/* Vermont Unlimited, 802unlimited.com. Built and managed by Strelva.
   Palette and type are taken from the client's existing site: forest green, kelly green,
   coral accent, cream and tan grounds. Coral is used for text only where it passes AA
   (the terracotta below); the bright coral is reserved for rules, dots and badges. */

/* Metric-matched fallbacks.
   The fonts load from Google with display=swap against a plain system-ui fallback, so every
   heading reflowed the moment the real font arrived and shoved the page below it: 0.034 CLS
   on /hunting, 0.022 on /transportation and /contact, all of it SECTION/DIV/H1 moving at
   ~430-620ms, none of it images. These overrides make the fallback occupy the same space as
   the real font, so the swap is invisible.

   Figures measured, not guessed: rendered a probe string at 100px in each face and compared
   advance width and fontBoundingBox ascent/descent against Arial. Helvetica measured within
   0.05px of Arial, and Liberation Sans is metric-compatible, so one set of numbers covers
   macOS, Windows, Linux and Android. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 102.60%;
  ascent-override: 85.77%;
  descent-override: 20.47%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Sans 3 Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 90.96%;
  ascent-override: 112.14%;
  descent-override: 43.98%;
  line-gap-override: 0%;
}

:root {
  --forest: #266445;
  --forest-700: #2f7a55;
  --forest-900: #1b4a33;
  --forest-950: #143a28;
  --kelly: #02b84b;
  --kelly-600: #02a544;
  --kelly-ink: #04270f;
  --kelly-100: #dff6e8;
  --terra: #af2b1d;
  --terra-100: #f6e0dc;
  --coral: #ff6161;
  --cream: #f0ecdf;
  --cream-deep: #e6e0cf;
  --tan: #d9d3bf;
  --paper: #ffffff;
  --ink: #1f2a24;
  --body: #3e4a43;
  --muted: #6a746d;
  --line: #e3ddcd;
  --shadow-sm: 0 1px 2px rgba(20, 40, 30, .05), 0 2px 8px rgba(20, 40, 30, .05);
  --shadow-md: 0 10px 28px rgba(20, 40, 30, .10);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .42);
  --radius: 8px;
  --radius-lg: 12px;
  --container: 1180px;
  --font-head: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Source Sans 3 Fallback", system-ui, sans-serif;
  --font-serif: "EB Garamond", Georgia, serif;  /* team bios on /about; the only serif on the site */

  /* Aliases kept so the inline styles across the pages keep resolving. */
  --pine-900: var(--forest-900);
  --pine-800: var(--forest);
  --pine-700: var(--forest-700);
  --pine-100: #dcece2;
  --water-600: var(--forest);
  --water-500: var(--kelly);
  --water-100: #9fe6bd;
  --amber-600: var(--terra);
  --amber-500: var(--terra);
  --amber-100: var(--terra-100);
  --sand: var(--paper);
  --sand-soft: var(--cream);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--forest); text-decoration: none; }
a:hover { color: var(--forest-700); }
strong { color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.1; letter-spacing: -.015em; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); }
h3 { font-size: 1.25rem; color: var(--forest); }
p { color: var(--body); }
.lead { font-size: 1.15rem; }
.eyebrow { font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .19em; text-transform: uppercase; color: var(--terra); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* Without JS the form cannot work: main.js stamps the dwell field the spam gate requires, so a
   no-JS post is silently discarded as a bot and the visitor is told nothing. Rather than show a
   control that quietly throws the lead away, hide it and let the <noscript> notice carry the
   phone number. `no-js` is on <html> from the start and main.js swaps it to `js`, so this also
   covers the case where main.js fails to load at all. */
html.no-js #leadForm { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Skip link + focus */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--forest); color: #fff; padding: 11px 18px; border-radius: 0 0 8px 0; font-family: var(--font-head); font-weight: 600; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--kelly); outline-offset: 2px; border-radius: 4px; }

/* Buttons. Primary is the client's green pill; #04270f on #02b84b measures 6.1:1. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-head); font-weight: 700; font-size: .92rem; letter-spacing: .04em; padding: 14px 28px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; white-space: nowrap; line-height: 1.1; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--kelly); color: var(--kelly-ink); box-shadow: 0 8px 22px rgba(2, 184, 75, .28); }
.btn-primary:hover { background: var(--kelly-600); color: var(--kelly-ink); box-shadow: 0 10px 26px rgba(2, 184, 75, .34); }
.btn-secondary { background: var(--paper); color: var(--forest); border-color: var(--forest); border-radius: 4px; }
.btn-secondary:hover { background: var(--forest); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-lg { padding: 16px 34px; font-size: 1rem; }

/* Header: transparent, sits over the page photo like the client's site. */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo { height: 62px; width: auto; flex-shrink: 0; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
nav .nav-links { list-style: none; display: flex; align-items: center; gap: 4px; padding: 0; flex-shrink: 0; }
.nav-links a.nav-top { display: inline-block; padding: 8px 12px; font-family: var(--font-head); font-weight: 600; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 1px 12px rgba(0,0,0,.85); }
.nav-links a.nav-top[aria-current="page"] { color: #fff; }
.nav-cta { margin-left: 10px; }
.nav-cta .btn { padding: 13px 22px; font-size: .84rem; min-height: 44px; }
.nav-toggle { display: none; background: rgba(0,0,0,.28); border: 1.5px solid rgba(255,255,255,.5); border-radius: 8px; width: 44px; height: 44px; cursor: pointer; color: #fff; align-items: center; justify-content: center; }

/* Home hero. The logo is the headline, everything in the left column is centered. */
.hero { position: relative; overflow: hidden; color: #fff; background: var(--forest-950); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: url("/assets/photos/hero-bright.jpg"); background-size: cover; background-position: center 44%; }
/* Two washes, not one. The old gradient faded out by 45% down, which left the logo and the
   kelly-green promo line sitting on bare sunlit foliage: white on white water, green on green
   leaves. The second gradient weights the left half where the text column lives, so the type
   gets a consistent dark ground without flattening the photo on the right. */
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,18,12,.5) 0, rgba(8,18,12,.12) 22%, rgba(8,18,12,0) 45%), linear-gradient(100deg, rgba(6,16,11,.72) 0, rgba(6,16,11,.52) 26%, rgba(6,16,11,.16) 46%, rgba(6,16,11,0) 60%); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 128px 24px 60px; min-height: 760px; }
.hero-col { text-align: center; }
.hero-logo { width: 282px; margin: 0 auto 18px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.75)) drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.hero-appt { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1.2rem; margin: 0 0 18px; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.hero-promo { margin: 30px 0 0; font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1.5rem; text-shadow: 0 2px 16px rgba(0,0,0,.95); }
.hero-promo b { color: #37e17a; }  /* lifted from kelly #02b84b: the darker green read as foliage against the photo */
.hero-social { display: flex; justify-content: center; gap: 22px; margin-top: 28px; }
.hero-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.hero-social a:hover { background: rgba(255,255,255,.14); color: #fff; }
.hero-social svg { width: 18px; height: 18px; }
.panel { background: var(--paper); border-radius: 7px; overflow: hidden; box-shadow: var(--shadow-lg); color: var(--body); text-align: left; }
.panel > img { height: 258px; width: 100%; object-fit: cover; background: #e9ece9; }
.panel-body { padding: 24px 26px 26px; }
.panel-body h3 { font-size: 1.55rem; margin: 0 0 8px; }
.panel-body p { color: var(--muted); font-size: .96rem; }
.panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.panel-price { font-family: var(--font-head); font-weight: 700; color: var(--forest); font-size: 1.1rem; }
.panel-price small { display: block; font-weight: 700; color: var(--terra); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.panel-link { font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--forest); border-bottom: 2.5px solid var(--kelly); padding-bottom: 2px; white-space: nowrap; }
.hero-slides { display: grid; }
.hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s ease; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.panel-media-dark > img { background: #16241b; padding: 20px 24px; }
.hero-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.hero-dot { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 99px; }
.hero-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.55); transition: width .25s ease, background .25s ease; }
.hero-dot:hover::before { background: rgba(255,255,255,.85); }
.hero-dot[aria-current="true"]::before { background: var(--kelly); width: 22px; }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
html.no-js .hero-slide { opacity: 1; visibility: visible; }  /* without JS show the first slide only */
html.no-js .hero-slide:not(:first-child) { display: none; }
html.no-js .hero-dots { display: none; }

/* Interior page hero. Photo set inline per page; the header floats over it. */
.page-hero { position: relative; color: #fff; background-color: var(--forest-950); background-size: cover; background-position: center 40%; padding: 150px 0 62px; min-height: 440px; display: flex; align-items: flex-end; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,18,12,.88) 0, rgba(8,18,12,.42) 45%, rgba(8,18,12,.28) 100%); }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--coral); }
.page-hero h1 { color: #fff; margin-top: 12px; max-width: 18ch; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.page-hero p { color: rgba(255,255,255,.9); margin-top: 14px; max-width: 58ch; font-size: 1.12rem; }
.page-hero.quiet { min-height: 0; padding: 132px 0 48px; background-image: none !important; }
.page-hero.quiet::after { background: none; }

/* Sections */
.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
.section-soft { background: var(--cream); }
.section-soft h2 { color: var(--terra); }
.section-tan { background: var(--tan); }
.section-pine { background: var(--forest); color: #eaf1ec; }
.section-pine h2, .section-pine h3 { color: #fff; }
.section-pine p { color: rgba(255,255,255,.8); }
.section-pine .eyebrow { color: var(--kelly); }
.section-photo { position: relative; color: #eef3ef; background-color: var(--forest-950); background-size: cover; background-position: center; }
.section-photo::after { content: ""; position: absolute; inset: 0; background: rgba(10,24,16,.82); }
.section-photo > .container { position: relative; z-index: 1; }
.section-photo h2, .section-photo h3 { color: #fff; }
.section-photo .eyebrow { color: var(--kelly); }
.section-photo p { color: rgba(255,255,255,.82); }
.section-head { max-width: 660px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-top: 10px; }
.section-head p { margin-top: 14px; font-size: 1.08rem; }

/* Two-column about band, straight from the client's site. */
.about-cols { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 56px; }
.about-cols h2 { color: var(--terra); margin-bottom: 16px; }
.about-cols p { margin-bottom: 16px; }
.about-rule { background: linear-gradient(to bottom, transparent, #c9c3b2 16%, #c9c3b2 84%, transparent); }
.cobrand { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: .95rem; color: var(--muted); }
.cobrand img { width: 96px; }

/* Grid + cards */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #cfd9d1; }
a.card { color: inherit; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: .97rem; }
.card-icon { width: 60px; height: 60px; border-radius: 14px; background: var(--cream); color: var(--forest); display: grid; place-items: center; margin-bottom: 18px; border: 1px solid #e6e0cf; }
.card-icon svg { width: 34px; height: 34px; }
.section-pine .card-icon, .section-photo .card-icon { background: rgba(255,255,255,.1); color: var(--kelly); border-color: rgba(255,255,255,.16); }
.section-pine .card, .section-photo .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); box-shadow: none; }
.section-pine .card h3, .section-photo .card h3 { color: #fff; }
.section-pine .card p, .section-photo .card p { color: rgba(255,255,255,.78); }
.card-media { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; margin: -26px -26px 18px; aspect-ratio: 16/10; background: var(--cream); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
/* fishing.jpg is a tall portrait (1100x1402) of an angler holding a trout: head near the top,
   fish near the bottom. Any landscape crop centred by default lands on his torso and
   decapitates him. No window wide enough to hold both exists in that file, so anchor near the
   top and keep the face. */
.photo-top { object-position: 50% 8% !important; }
.model-logo { height: 26px; width: auto; max-width: 100%; object-fit: contain; object-position: left; margin: 4px 0 8px; display: block; filter: brightness(0); } /* wordmarks ship white-on-transparent; render them ink on light cards. The four marks have very different aspect ratios (Unlimited is 9:1, Flint is 3:1), so cap the width: a narrow card shrinks the widest mark instead of being overflowed by it. */
.prod-media { position: relative; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; margin: -26px -26px 16px; aspect-ratio: 16/11; background: var(--cream); }
.prod-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 14px 20px; }
.section-pine .prod-media, .section-photo .prod-media { background: var(--cream); } /* product cutouts are dark objects; keep them on a light ground */
.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--forest); border-bottom: 2px solid var(--kelly); padding-bottom: 1px; }
.card-link:hover { color: var(--forest-700); gap: 9px; }
.section-pine .card-link, .section-photo .card-link { color: #fff; }
.price { font-family: var(--font-head); font-weight: 700; font-size: 1.06rem; color: var(--forest); margin: 8px 0 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Pills. The bright coral is fine on a pill because the text is on a tinted ground. */
.pill { display: inline-flex; align-items: center; gap: 7px; background: var(--kelly-100); color: #0a6b30; font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.pill-amber, .pill-terra { background: var(--terra-100); color: var(--terra); }
.section-pine .pill, .section-photo .pill { background: rgba(255,255,255,.14); color: #fff; }

/* Check lists */
.checks { list-style: none; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 1rem; }
.checks li::before { content: ""; flex-shrink: 0; margin-top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--kelly-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23266445' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }

/* Split (image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 5/4; object-fit: cover; width: 100%; }

/* Callout / CTA band */
.callout { background: var(--forest); color: #fff; border-radius: var(--radius-lg); padding: 52px 48px; text-align: center; position: relative; overflow: hidden; }
.callout::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 18% 0%, rgba(2,184,75,.22), transparent 55%); }
.callout > * { position: relative; }
.callout h2 { color: #fff; }
.callout .eyebrow { color: var(--kelly); }
.callout p { color: rgba(255,255,255,.82); margin: 12px auto 28px; max-width: 52ch; }

/* Forms */
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-md); }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--forest); }
.field input, .field textarea, .field select { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid #bdb6a2; border-radius: 6px; background: #fffdf8; color: var(--ink); width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest); background: #fff; }
.field textarea { min-height: 128px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.form-status { margin-top: 12px; font-family: var(--font-head); font-weight: 600; font-size: .92rem; }
.form-status.ok { color: var(--forest); }
.form-status.err { color: var(--terra); }

/* Contact meta */
.contact-item { display: flex; gap: 13px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.09); }
.contact-item:last-child { border-bottom: none; }
.contact-item .ci-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(38,100,69,.12); color: var(--forest); display: grid; place-items: center; flex-shrink: 0; }
.contact-item .ci-label { font-family: var(--font-head); font-weight: 700; font-size: .72rem; color: var(--forest); text-transform: uppercase; letter-spacing: .1em; }
.contact-item .ci-value { color: var(--ink); font-size: 1.02rem; }

/* Team. Round photos and serif bios, as on the client's site. */
/* The team row sizes to however many people are actually in it. It was a fixed 3-column
   grid, so when the team went from three to two the cards sat in the left two columns
   against an empty third and the whole block read as misaligned. */
.team-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); justify-content: center; }
.team-card { text-align: center; background: transparent; border: 0; box-shadow: none; padding: 10px; }
.team-card:hover { transform: none; box-shadow: none; }
.team-card .avatar { width: 168px; height: 168px; border-radius: 50%; margin: 0 auto 16px; object-fit: cover; background: var(--cream); border: 4px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.team-card h3 { color: var(--forest); font-size: 1.3rem; }
.team-card .role { color: var(--terra); font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.team-card p:not(.role) { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.6; color: #414c45; }

/* FAQ */
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 4px 20px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-family: var(--font-head); font-weight: 700; color: var(--forest); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--kelly); font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 0 18px; font-size: .98rem; }

/* Footer */
.site-footer { background: var(--forest); color: rgba(255,255,255,.74); padding: 56px 0 26px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.16); }
.footer-grid h3 { color: #fff; font-size: .76rem; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer-grid a { color: rgba(255,255,255,.74); }
.footer-grid a:hover { color: #fff; }
.footer-about .brand-logo { height: auto; width: 172px; filter: none; }
.footer-about p { color: rgba(255,255,255,.7); margin-top: 14px; max-width: 34ch; font-size: .92rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; color: rgba(255,255,255,.55); font-size: .85rem; }
.footer-bottom a { color: rgba(255,255,255,.72); }
.strelva-credit a { color: #fff; font-weight: 600; }

/* Utility */
.text-center { text-align: center; }

/* Responsive */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding-top: 118px; }
  .hero-logo { width: 240px; }
  .panel { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split-media { order: -1; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .about-cols { grid-template-columns: 1fr; gap: 36px; }
  .about-rule { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .page-hero { padding-top: 132px; min-height: 380px; }
}
/* 1180, not 1024. The desktop nav needs 1176px for the brand plus seven items plus the CTA,
   so between 1025px and 1179px it was rendered but could not fit: 116px of horizontal overflow
   at 1060, 76px at 1100, 38px at 1138 (Galaxy Tab S4 landscape, and most Android tablets in
   landscape). The QA widths were 768 and 1440, which step straight over the whole dead zone. */
@media (max-width: 1180px) {
  .btn { min-height: 44px; }
  .nav { height: 72px; }
  .brand-logo { height: 50px; }
  .nav-toggle { display: inline-flex; }
  nav .nav-links { position: fixed; inset: 72px 0 0 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; background: var(--forest-950); padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-md); overflow-y: auto; overscroll-behavior: contain; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; }
  nav .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
  nav .nav-links > li + li { border-top: 1px solid rgba(255,255,255,.09); }
  .nav-links a.nav-top { display: block; padding: 15px 4px; font-size: .95rem; text-shadow: none; }
  /* The underline is a desktop hover affordance. On a stacked full-width list it reads as a
     stray rule, so mark the current page with a left bar and brand colour instead. */
  .nav-links a.nav-top::after { display: none; }
  .nav-links a.nav-top[aria-current="page"] { color: var(--kelly); box-shadow: inset 3px 0 0 var(--kelly); padding-left: 14px; }
  .nav-cta { margin: 16px 0 0; border-top: 0 !important; }
  /* The home page suppresses the header logo because the hero logo is the headline, but the
     open menu covers the hero. Bring it back while the menu is up so the screen is never
     unbranded, and hold the page still behind the full-height panel. */
  body.home.nav-open .site-header .brand { display: flex; }
  body.nav-open { overflow: hidden; }
  .nav-cta .btn { width: 100%; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .callout { padding: 34px 22px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .hero-inner { padding: 104px 20px 48px; }
  .hero-logo { width: 210px; }
  .hero-promo { font-size: 1.2rem; }
  .panel > img { height: 200px; }
  .page-hero { padding: 116px 0 40px; }
}

/* Home: the hero carries the big logo, so the header logo only appears once the nav collapses. */
body.home .site-header .brand { display: none; }

/* ---------- Motion. Short, eased, and off entirely under prefers-reduced-motion. ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease-in both; }
::view-transition-new(root) { animation: vt-in .26s ease-out both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
/* Fallback fade for browsers without view transitions */
html.js body { animation: page-in .32s ease-out both; }
html.js body.is-leaving { opacity: 0; transition: opacity .16s ease-in; }
@keyframes page-in { from { opacity: 0; } }

/* Hero entrance, once */
html.js .hero-col > * , html.js .hero .panel, html.js .hero-dots { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
html.js .hero-col > *:nth-child(2) { animation-delay: .08s }
html.js .hero-col > *:nth-child(3) { animation-delay: .14s }
html.js .hero-col > *:nth-child(4) { animation-delay: .2s }
html.js .hero-col > *:nth-child(5) { animation-delay: .26s }
html.js .hero .panel { animation-delay: .22s }
html.js .hero-dots { animation-delay: .34s }
html.js .page-hero > .container > * { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
html.js .page-hero > .container > *:nth-child(2) { animation-delay: .06s }
html.js .page-hero > .container > *:nth-child(3) { animation-delay: .12s }
html.js .page-hero > .container > *:nth-child(4) { animation-delay: .18s }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Scroll reveal. JS adds [data-reveal] to section children; nothing is hidden without JS. */
html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
html.js [data-reveal].in { opacity: 1; transform: none; }

/* Lazy images fade in as they arrive */
html.js img[loading="lazy"] { opacity: 0; transition: opacity .45s ease-out; }
html.js img[loading="lazy"].loaded, html.no-js img[loading="lazy"] { opacity: 1; }

/* Nav underline grows from the left */
.nav-links a.nav-top { position: relative; }
.nav-links a.nav-top::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--kelly); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.nav-links a.nav-top:hover::after { transform: scaleX(1); background: rgba(255,255,255,.7); }
.nav-links a.nav-top[aria-current="page"]::after { transform: scaleX(1); }
.btn-primary:hover { transform: translateY(-1px); }
.card-link, .panel-link { transition: color .18s ease, gap .18s ease; }
.faq details p { animation: rise .28s ease-out both; }

/* Device polish */
@media (max-height: 520px) and (orientation: landscape) { .hero-logo { width: 150px; margin-bottom: 8px; } .hero-inner { padding-top: 92px; min-height: 0; } .hero-appt { margin-bottom: 10px; } .hero-promo { margin-top: 16px; font-size: 1.1rem; } }
@media (max-width: 360px) { .hero-promo { font-size: 1.05rem; } .btn-lg { padding: 14px 22px; font-size: .92rem; } h1 { font-size: 2rem; } }
@media (min-width: 1800px) { .hero-inner { min-height: clamp(760px, 78vh, 980px); max-width: 1320px; } .page-hero { min-height: 520px; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js img[loading="lazy"] { opacity: 1; transition: none; }
}