@import url("/assets/fonts.css");

:root {
  color-scheme: light;
  --ink: #333;
  --heading: #262626;
  --accent: #c62525;
  --border: #e3e3e3;
  --banner: #f4f4f4;
  --footer: #161616;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: #fff;
  font: 400 12px/1.8 "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: #8c1717; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: #f3d6cf; color: #262626; }
.wrap { width: calc(100% - 60px); max-width: 1140px; margin-inline: auto; }
.visually-hidden, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  inset: 10px auto auto 10px;
  z-index: 10;
  background: #fff;
  padding: 8px 12px;
}
.site-header { border-bottom: 1px solid var(--border); background: #fff; }
.header-inner { min-height: 98px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { color: var(--heading); text-decoration: none; line-height: 1.2; flex-shrink: 0; }
.brand:hover { color: var(--heading); }
.site-title { display: block; font-size: 23px; font-weight: 700; }
.site-description { display: block; margin-top: 3px; font-size: 12px; color: #737373; font-weight: 600; }
.main-navigation { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.main-navigation a { display: block; padding: 15px; color: #161616; text-decoration: none; }
.main-navigation a:last-child { padding-right: 15px; }
.main-navigation a:hover, .main-navigation [aria-current="page"] { color: var(--accent); }
.menu-toggle { display: none; }
.page-banner { background: var(--banner); border-bottom: 1px solid var(--border); }
.banner-inner { min-height: 120px; display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.banner-inner h1 { margin: 0; font-size: 20px; font-weight: 400; text-transform: uppercase; line-height: 1.4; }
.banner-inner nav { display: flex; gap: 7px; align-items: center; }
.banner-inner nav a { text-decoration: none; }
.content { flex: 1; padding-top: 70px; padding-bottom: 40px; min-height: 320px; }
.home .content { padding-top: 48px; padding-bottom: 30px; }
.page-content::after { content: ""; display: table; clear: both; }
.page-content p { margin: 0 0 20px; }
.page-content img { max-width: 100%; height: auto; }
.page-content .alignright { float: right; margin: 0 0 20px 20px; }
.page-content .alignleft { float: left; margin: 0 20px 20px 0; }
.page-content .aligncenter { display: block; margin: 0 auto 20px; }
.site-footer { color: #b3b3b3; background: var(--footer); }
.footer-inner { padding-block: 20px; display: flex; gap: 12px 30px; justify-content: space-between; flex-wrap: wrap; }
.site-footer a { color: #c3c3c3; }
.site-footer a:hover { color: #fff; }
.slider { position: relative; height: 350px; background: #101c24; }
.slide { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr); }
.slide img { min-width: 0; min-height: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.slide-caption { align-self: center; padding: 28px 60px 55px 36px; color: #fff; }
.slide-caption h2 { margin: 0 0 16px; font-size: 28px; line-height: 1.25; font-weight: 400; text-wrap: balance; }
.slide-caption p { margin: 0 0 16px; font-size: 14px; line-height: 1.8; }
.slide-caption a { color: #fff; font-size: 14px; font-weight: 600; }
.slide[hidden] { display: none; }
.slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 54px; border: 0; background: #101c24; color: #fff; font: 36px/1 sans-serif; opacity: 0; }
.slider:hover .slide-arrow, .slider:focus-within .slide-arrow { opacity: 1; }
.previous { left: 0; }
.next { right: 0; }
.slide-controls { position: absolute; bottom: 21px; left: 75%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; }
.slide-dot { position: relative; padding: 0; width: 11px; height: 11px; border: 0; border-radius: 50%; background: #7d8b94; border: 1px solid #fff; }
.slide-dot::after { content: ""; position: absolute; inset: -10px; }
.slide-dot[aria-pressed="true"] { background: #fff; }
.slide-pause { position: absolute; left: calc(100% + 16px); color: #fff; background: #101c24; border: 1px solid #78858c; padding: 2px 6px; opacity: 1; }
.slider:hover .slide-pause, .slider:focus-within .slide-pause { opacity: 1; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
.feature { border: 3px solid var(--border); text-align: center; }
.feature > img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.feature-content { min-height: 190px; padding: 20px 20px 32px; }
.feature h2 { margin: 0 0 20px; color: var(--heading); font-size: 14px; line-height: 1.8; font-weight: 600; text-transform: uppercase; }
.feature p { margin: 0 0 16px; color: #626262; font-size: 14px; }
.feature-content > a { font-size: 14px; font-weight: 600; }

@media (max-width: 1000px) {
  .header-inner { gap: 15px; }
  .main-navigation a { padding-inline: 9px; }
  .site-title { font-size: 21px; }
}
@media (max-width: 800px) {
  .wrap { width: calc(100% - 40px); }
  .header-inner { min-height: 90px; flex-wrap: wrap; gap: 0; padding-block: 20px; }
  .menu-toggle { display: block; color: var(--heading); background: #fff; border: 1px solid #777; padding: 8px 13px; }
  .main-navigation { width: 100%; justify-content: stretch; flex-direction: column; align-items: stretch; padding-top: 12px; }
  .js .main-navigation:not(.is-open) { display: none; }
  .main-navigation a { padding: 11px 0; border-bottom: 1px solid var(--border); }
  .banner-inner { min-height: 100px; gap: 14px; padding-block: 22px; align-items: flex-start; flex-direction: column; }
  .banner-inner h1 { font-size: 19px; }
  .content { padding-top: 40px; }
  .features { gap: 18px; }
  .feature-content { padding-inline: 12px; }
  .slider { height: 380px; }
  .slide-caption { padding-inline: 24px 40px; }
  .slide-caption h2 { font-size: 23px; }
  .slide-arrow { opacity: 1; width: 30px; }
  .slide-pause { opacity: 1; }
}
@media (max-width: 600px) {
  .features { display: block; }
  .feature { margin-bottom: 24px; }
  .feature-content { min-height: 0; padding: 20px 22px 28px; }
  .slider { height: auto; }
  .slide { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .slide img { height: 250px; object-fit: cover; }
  .slide-caption { min-height: 250px; padding: 26px 30px 60px; }
  .slide-arrow { top: 125px; }
  .slide-controls { bottom: 20px; left: 42%; }
  .page-content .alignright, .page-content .alignleft { float: none; display: block; margin: 0 auto 24px; max-width: 100%; }
  .page-content img { height: auto !important; }
  .home .content { padding-top: 20px; }
  .footer-inner { display: block; }
  .footer-inner nav { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}