/* Mark the Spot, Inc. - site styles
   Single stylesheet, no build step. Keep it lean and readable. */

:root {
  /* Palette derived from the logo: deep navy "spot" wordmark + red splat accent.
     Site reads in shades of blue; the logo red is reserved for the primary CTA. */
  --ink: #101935;        /* near-black navy ink for headings + body */
  --muted: #56607a;      /* secondary text */
  --line: #dde3ef;       /* light blue-grey borders */
  --bg: #ffffff;
  --bg-soft: #f2f6fc;    /* very light blue tint for muted sections */
  --navy: #0c1a4b;       /* deep brand navy (the "spot" wordmark) */
  --brand: #173a8c;      /* primary blue: links, kickers, card accents, hovers */
  --brand-dark: #102a66;
  --brand-soft: #e8f0fd; /* tinted fills */
  --accent: #2f6fe0;     /* focus rings / links */
  --spot: #d11f2d;       /* logo red splat: primary CTA pop, used sparingly */
  --spot-dark: #ad1623;
  --radius: 14px;
  --maxw: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.4em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.01em; margin: 0 0 0.5em; }
h3 { font-size: 1.25rem; margin: 0 0 0.4em; }

/* --- Header --- */
.site-header { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); z-index: 10; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-logo { height: 42px; width: auto; display: block; }
.site-header nav { display: flex; align-items: center; gap: 22px; }
.site-header nav a { position: relative; color: var(--muted); font-weight: 500; font-size: 0.95rem; }
/* Underline grows from the center out on hover; text turns the same red. */
.site-header nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--spot); transform: scaleX(0); transform-origin: center; transition: transform .22s ease; }
.site-header nav a:not(.nav-cta):hover { color: var(--spot); text-decoration: none; }
.site-header nav a:not(.nav-cta):hover::after { transform: scaleX(1); }
/* Current page: larger, heavier, darker. No underline. */
.site-header nav a.is-current:not(.nav-cta) { color: var(--navy); font-weight: 600; font-size: 1.08rem; }
.site-header nav a.is-current:not(.nav-cta)::after { content: none; }
.site-header nav a.nav-cta { background: var(--spot); color: #fff; padding: 8px 18px; border-radius: 999px; font-weight: 600; }
.site-header nav a.nav-cta:hover { background: var(--spot-dark); color: #fff; text-decoration: none; }

/* --- Buttons --- */
.btn { display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 0.98rem; transition: transform .05s ease, background .2s ease; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--spot); color: #fff; box-shadow: 0 8px 20px rgba(209,31,45,0.22); }
.btn-primary:hover { background: var(--spot-dark); }
.btn-blue { background: var(--brand); color: #fff; }
.btn-blue:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

/* --- Hero --- */
.hero { padding: 88px 0 64px; background: radial-gradient(1200px 400px at 50% -10%, #e8f0fd, transparent), var(--bg); }
.hero-inner { max-width: 820px; }

/* Home hero: full-color brand banner behind a frosted rounded card that holds
   the text. The banner stays vivid; readability comes from the semi-opaque card,
   not from dimming the image.
   - ::before holds the image (z 0)
   - .hero-inner is the rounded card sitting above it (z 1) */
.home .hero { position: relative; overflow: hidden; }
.home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/static/img/hero-banner.webp") center / cover no-repeat;
  opacity: 0.52;
  z-index: 0;
}
.home .hero-inner {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow: 0 20px 55px rgba(12, 26, 75, 0.16);
}
/* Matches .section-eyebrow sizing so the page-top kicker and section eyebrows
   read as the same label style. */
.hero-kicker, .card-kicker { display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
/* Home headline: "Spt" of Spot in deep navy, the "o" in logo red. */
.hero-title .t-navy { color: var(--navy); }
.hero-title .t-spot { color: var(--spot); }
.hero-tagline { font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--brand); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 1rem; }
/* Hero service list: gradient icon + bold navy label */
.hero-services { list-style: none; padding: 0; margin: 0.4rem 0 1.7rem; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.hero-services li { display: flex; align-items: center; gap: 14px; font-weight: 400; font-size: 1.32rem; color: var(--navy); }
.svc-icon { width: 36px; height: 36px; flex: none; }
@media (max-width: 560px) { .hero-services { grid-template-columns: 1fr; } }
.hero-lede { font-size: 1.12rem; color: var(--muted); margin: 0 0 1.6rem; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-contact a { font-weight: 600; }
.hero-service { padding: 72px 0 48px; }
/* Service-page hero: the pillar name is the headline act, rendered as the same
   red->purple gradient wordmark used for the pillars on the home page. The
   sentence headline steps back to a supporting size. Extra line-height and
   bottom padding keep background-clip from shaving descenders. */
/* line-height + padding-bottom give the clipped background room for descenders
   (the "g" in Design). */
.hero-pillar { display: block; font-size: clamp(2.1rem, 4.4vw, 2.9rem); font-weight: 800; line-height: 1.32; letter-spacing: -0.03em; margin: 0 0 0.2rem; padding-bottom: 0.18em;
  background: linear-gradient(120deg, #d11f2d 0%, #8a1f6d 55%, #4a1a8a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-headline { font-size: clamp(1.45rem, 2.6vw, 1.95rem); font-weight: 600; line-height: 1.25; color: var(--navy); margin: 0 0 0.7rem; }

/* Split service hero: copy left, themed media panel right */
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero-copy { max-width: 640px; }
.hero-media { aspect-ratio: 4 / 3; border-radius: 20px; background: linear-gradient(135deg, var(--navy), var(--spot)); box-shadow: 0 20px 50px rgba(12, 26, 75, 0.18); display: flex; align-items: center; justify-content: center; }
.hero-media > span { color: rgba(255, 255, 255, 0.92); font-weight: 800; font-size: 1.4rem; letter-spacing: 0.01em; }
/* Service-page hero holding a real product image: white panel so the art (on a
   white background) blends in; contained so nothing crops, never upscaled. */
.hero-media-photo { background: #fff; padding: 22px; }
.hero-media-photo > img { width: auto; height: auto; max-width: 94%; max-height: 320px; object-fit: contain; display: block; }
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  /* Stacked, the image should lead: it identifies the pillar at a glance,
     where the desktop side-by-side reading order puts the copy first. Order
     only moves the visual box; the DOM order stays copy-then-image, so screen
     readers and tab order still get the heading first. */
  .hero-grid .hero-media { order: -1; }
  /* The 44px slide-in comes from the right, which on a narrow viewport can
     briefly widen the page. Reveal it in place instead. */
  .js .hero-grid .hero-media.reveal-right.in-view { animation-name: reveal-up; }
}

/* --- Feature rows (zig-zag): media one side, text the other, alternating --- */
.feature-rows { display: grid; gap: 56px; margin-top: 8px; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature-media { aspect-ratio: 4 / 3; border-radius: 18px; background: linear-gradient(135deg, var(--navy), var(--spot)); box-shadow: 0 18px 45px rgba(12, 26, 75, 0.16); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.feature-num { color: rgba(255, 255, 255, 0.85); font-weight: 800; font-size: 2.4rem; letter-spacing: 0.02em; }
/* Home zig-zag: real product images sit on their own white background, so the
   panel is white (not the gradient) and the art blends in cleanly. Contain so
   nothing is cropped; sized large but never upscaled past the source. */
.feature-media-photo { background: #fff; padding: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.feature-media-photo:hover { transform: translateY(-3px); box-shadow: 0 24px 55px rgba(12, 26, 75, 0.22); text-decoration: none; }
.feature-media-photo > img { width: auto; height: auto; max-width: 94%; max-height: 320px; object-fit: contain; display: block; }
.feature-kicker { display: inline-block; color: var(--brand); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; }
/* Pillar name as the row's loud topic label: big red->purple gradient wordmark. */
.feature-topic { display: block; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 0.3rem; padding-bottom: 0.06em;
  background: linear-gradient(120deg, #d11f2d 0%, #8a1f6d 55%, #4a1a8a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.feature-text h3 { font-size: 1.35rem; color: var(--navy); margin: 0 0 0.6rem; }
.feature-text p { color: var(--muted); margin: 0 0 1rem; line-height: 1.6; }
@media (max-width: 760px) {
  .feature-row { grid-template-columns: 1fr; gap: 18px; }
  .feature-media { order: -1; aspect-ratio: 16 / 9; }
}

/* --- Scroll reveal: hidden only when JS is on, animate in on scroll --- */
.js .reveal { opacity: 0; }
.js .reveal.in-view { opacity: 1; animation-duration: 0.7s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); animation-fill-mode: both; animation-name: reveal-up; }
.js .reveal-left.in-view { animation-name: reveal-left; }
.js .reveal-right.in-view { animation-name: reveal-right; }
.js .reveal[data-delay="1"].in-view { animation-delay: 0.1s; }
.js .reveal[data-delay="2"].in-view { animation-delay: 0.2s; }
.js .reveal[data-delay="3"].in-view { animation-delay: 0.3s; }
@keyframes reveal-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes reveal-left { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
@keyframes reveal-right { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; }
  .js .reveal.in-view { animation: none !important; }
}

/* --- Sections --- */
.section { padding: 64px 0; }
.section-muted { background: var(--bg-soft); }
.section-lede { font-size: 1.08rem; color: var(--muted); max-width: 640px; margin: 0 0 2rem; }
/* Section header: small gradient eyebrow over a larger title; wide lede spans
   the row instead of wrapping in a narrow column. */
.section-eyebrow { display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.6rem;
  background: linear-gradient(120deg, #d11f2d 0%, #8a1f6d 55%, #4a1a8a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.section-lede-wide { max-width: none; }

/* --- Service cards --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
/* Blue->red gradient border via padding-box/border-box (respects radius).
   Hover thickens the stroke and flips the gradient direction. */
.service-card {
  display: block; padding: 26px; border: 8px solid transparent; border-radius: var(--radius);
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, var(--brand), var(--spot)) border-box;
  color: var(--ink);
  transition: transform .12s ease, box-shadow .2s ease;
}
.service-card:hover {
  text-decoration: none; border-width: 8px;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(315deg, var(--brand), var(--spot)) border-box;
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(12, 26, 75, 0.12);
}
.service-card p { color: var(--muted); font-size: 0.97rem; }
.card-link { color: var(--brand); font-weight: 600; font-size: 0.95rem; }
.card-image { display: block; width: 100%; max-width: 148px; height: auto; margin: 0 auto 18px; }

/* --- Capability list --- */
.capability-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.capability-list li { padding: 14px 16px 14px 42px; border: 1px solid var(--line); border-radius: 10px; position: relative; }
.capability-list li::before { content: "✓"; position: absolute; left: 16px; color: var(--brand); font-weight: 700; }

/* --- Capability cards (service page: title + description) --- */
.cap-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.cap-card:hover {
  border-color: var(--brand);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 22px rgba(12, 26, 75, 0.08);
}
.cap-card h3 { font-size: 1.12rem; color: var(--navy); margin: 0 0 0.4rem; }
.cap-card p { color: var(--muted); margin: 0; font-size: 0.97rem; line-height: 1.55; }

/* --- Process steps --- */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin-top: 8px; }
.step-num { display: block; font-size: 2rem; font-weight: 800; line-height: 1; margin: 0 0 0.5rem; padding-bottom: 0.06em;
  background: linear-gradient(120deg, #d11f2d 0%, #8a1f6d 55%, #4a1a8a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.step h3 { font-size: 1.15rem; color: var(--navy); margin: 0 0 0.35rem; }
.step p { color: var(--muted); margin: 0; font-size: 0.96rem; line-height: 1.55; }

/* --- Featured work / case study --- */
/* One centered heading for the whole group; each project then leads with its
   own name at a smaller size. */
.section-featured-head { padding: 64px 0 0; text-align: center; }
/* Gradient wordmark treatment, matching the eyebrows and pillar names. */
.featured-title { font-size: clamp(1.75rem, 3.2vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin: 0; padding-bottom: 0.12em;
  background: linear-gradient(120deg, #d11f2d 0%, #8a1f6d 55%, #4a1a8a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.casestudy-name { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.casestudy { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.casestudy-media img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 50px rgba(12, 26, 75, 0.16); }
/* Thumbnail gallery: click a thumb to swap the main image. The main image is
   locked to the first shot's aspect ratio and contained, so swapping between
   images of different proportions never changes the page height. */
.casestudy-gallery .casestudy-main { aspect-ratio: var(--shot-ratio, 1127 / 859); object-fit: contain; object-position: center; background: #fff; }
.casestudy-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.casestudy-thumb { padding: 0; border: 2px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; overflow: hidden; line-height: 0; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.casestudy-thumb img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; border-radius: 0; box-shadow: none; }
.casestudy-thumb:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(12, 26, 75, 0.10); }
.casestudy-thumb.is-active { border-color: var(--brand); }
.casestudy-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.casestudy-copy .capability-list { grid-template-columns: 1fr 1fr; margin: 0.4rem 0 1.6rem; }
.casestudy-cta { margin-top: 0.2rem; }
/* Featured work uses the shared section eyebrow/title scale, same as every
   other section heading on the page. */
/* Borderless checklist with larger checkmarks. */
.casestudy-copy .capability-list li, .casestudy-solo .capability-list li { border: 0; border-radius: 0; padding: 8px 12px 8px 40px; }
.casestudy-copy .capability-list li::before, .casestudy-solo .capability-list li::before { font-size: 1.35rem; left: 12px; top: 6px; }
/* Text-only case study (no screenshot): centered single column. */
.casestudy-solo { max-width: 760px; }
.casestudy-solo .capability-list { grid-template-columns: 1fr 1fr; margin: 0.4rem 0 0; }
@media (max-width: 560px) { .casestudy-solo .capability-list { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .casestudy { grid-template-columns: 1fr; gap: 26px; }
  .casestudy-media { order: -1; }
  .casestudy-copy .capability-list { grid-template-columns: 1fr; }
}

/* --- Client logo wall --- */
/* White section. The 1px gap over a line-colored background draws the hairline
   grid, so tiles stay plain white with no double borders. Logos are muted to
   grayscale so mismatched brand colors do not fight each other, and come back to
   full color on hover. */
.section-clients { background: var(--bg); text-align: center; }
.section-clients .section-lede { margin-left: auto; margin-right: auto; max-width: 760px; }
/* Three columns fits the nine logos exactly. No tile borders: the logos sit
   directly on the white section, spaced by the grid gap. */
.client-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px; margin: 0.6rem auto 0; max-width: 880px;
}
.client-tile {
  background: #fff; display: flex; align-items: center; justify-content: center;
  padding: 22px 24px; min-height: 128px;
}
.client-tile img {
  max-width: 82%; max-height: 66px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) opacity(0.6); transition: filter .2s ease;
}
.client-tile:hover img { filter: grayscale(0) opacity(1); }
@media (max-width: 560px) {
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .client-tile { min-height: 104px; padding: 18px 16px; }
}

/* --- Related / pills --- */

/* --- CTA band --- */
.cta-band { background: var(--ink); color: #fff; text-align: center; }
.cta-band .section-lede { color: #c7ccd6; margin-left: auto; margin-right: auto; }
.cta-inner { display: flex; flex-direction: column; align-items: center; }

/* --- Prose --- */
.prose { font-size: 1.08rem; color: var(--ink); margin: 0 0 1.2rem; }

/* --- Contact form --- */
.contact-form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.92rem; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
/* Honeypot: taken out of the layout entirely, but still a real rendered input so
   bots that parse the DOM will fill it. Not `display: none` — some bots skip that. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0; padding: 12px 14px; border: 1px solid var(--spot); border-left-width: 4px; border-radius: 8px; background: #fdf1f2; color: #8c1620; font-size: 0.95rem; }

/* --- Footer --- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); margin-top: 24px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding: 48px 24px; }
.footer-brand { display: inline-block; }
.footer-brand:hover { text-decoration: none; }
.footer-logo { height: 48px; width: auto; display: block; margin-bottom: 6px; }
/* margin: 0 kills the browser default 1em top margin, which was stacking with
   the logo's own bottom margin and opening a gap under the mark. */
.footer-tagline { margin: 0; color: var(--muted); font-size: 1.05rem; max-width: 32ch; }
.footer-heading { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-links a { color: var(--ink); }
.footer-legal { border-top: 1px solid var(--line); padding: 18px 0; }
.footer-legal p { margin: 0; color: var(--muted); font-size: 0.88rem; }

/* --- Mobile nav ---
   The header needs ~546px for the logo plus six links, so below roughly that it
   overflowed and pushed the Contact button off-screen. Under 800px (phones and
   portrait tablets) the links collapse into a hamburger panel.

   Progressive enhancement, same `.js` flag the scroll-reveal uses: without JS
   the toggle stays hidden and the nav wraps onto a second row instead, so the
   links are always reachable rather than sitting behind a dead button. */
.nav-toggle { display: none; }

@media (max-width: 800px) {
  .js .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0;   /* 44px = comfortable touch target */
    border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
  }
  .js .nav-toggle span { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .js .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Bars morph into an X while open. */
  .js .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .js .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .js .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .js .site-header nav { display: none; }
  .js .site-header.nav-open nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 10px 24px 18px; box-shadow: 0 14px 30px rgba(12, 26, 75, 0.12);
  }
  .js .site-header.nav-open nav a { padding: 13px 4px; font-size: 1.05rem; }
  /* The hover underline is meaningless in a stacked list and mis-measures at
     full row width, so drop it here. */
  .site-header nav a:not(.nav-cta)::after { content: none; }
  .js .site-header.nav-open nav a.nav-cta { margin-top: 10px; padding: 13px 18px; text-align: center; }
  /* The current page is already marked by color and weight; the desktop size
     bump would jostle the stacked rows. */
  .js .site-header.nav-open nav a.is-current:not(.nav-cta) { font-size: 1.05rem; }

  /* No-JS fallback: wrap rather than overflow. */
  html:not(.js) .header-inner { flex-wrap: wrap; height: auto; gap: 6px 0; padding-top: 10px; padding-bottom: 10px; }
  html:not(.js) .site-header nav { flex-wrap: wrap; gap: 12px 16px; }
}

@media (max-width: 720px) {
  .site-header nav { gap: 14px; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}