/* ==========================================================================
   QuickNIE.com — Design System
   Brand: navy #0D1B2A · teal #00B2A9 · sunshine #FFC107 · aqua #E6F7F6
   Type:  Poppins 700/600 display, 500 UI · Source Sans 3 400/700 body
   Teal:  --teal illustration · --teal-700 display type · --teal-900 small text
          · --teal-ink anything carrying white text
   ========================================================================== */

/* ---------- 0. Font fallback ----------
   A metric-matched stand-in for Poppins, so the swap when the webfont arrives
   doesn't reflow the page. Values measured against Poppins: average character
   width 109.64% of Arial's, ascender 1.05em, descender 0.35em, line gap 0.1em,
   each divided by the size-adjust factor. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 109.64%;
  ascent-override: 95.77%;
  descent-override: 31.92%;
  line-gap-override: 9.12%;
}
@font-face {
  font-family: "Source Sans 3 Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 93.07%;
  ascent-override: 109.6%;
  descent-override: 42.98%;
  line-gap-override: 0.54%;
}

/* QuickNIE — self-hosted webfonts (latin + latin-ext).
   Self-hosted so no visitor data reaches Google: no third-party request, no consent needed. */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* Colour */
  --navy: #0D1B2A;
  --navy-700: #16273B;
  --navy-500: #24405C;
  --teal: #00B2A9;          /* brand teal — fills, illustration, accents on navy */
  --teal-700: #00908A;      /* teal for large text on light (>= 3:1) */
  --teal-900: #0A6B67;      /* teal for body text on light (>= 4.5:1) */
  --teal-ink: #007C77;      /* teal that carries white text (4.6:1) */
  --teal-ink-700: #006B67;  /* its hover / active shade (6.4:1) */
  --sun: #FFC107;
  --sun-700: #E0A800;
  --aqua: #E6F7F6;
  --grey: #F3F5F7;
  --slate: #6B7280;      /* clears 4.5:1 on white, grey and aqua backgrounds */
  --slate-dark: #4B5563;
  --white: #FFFFFF;
  --line: #E4E9ED;
  --line-strong: #CDD6DD;
  --danger: #B42318;
  --danger-bg: #FEF3F2;

  /* Type */
  /* Geometric Poppins carries the display type and UI chrome; humanist
     Source Sans 3 carries body copy, where it reads better at length. */
  --font-display: "Poppins", "Poppins Fallback", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Source Sans 3 Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.35rem, 1.5rem + 3.6vw, 4rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem);
  --fs-h2: clamp(1.65rem, 1.28rem + 1.6vw, 2.35rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem);
  --fs-lead: clamp(1.09rem, 1.02rem + 0.35vw, 1.28rem);
  --fs-body: 1.0625rem;   /* Source Sans 3 has a smaller x-height than Poppins */
  --fs-sm: 1rem;
  --fs-xs: 0.8125rem;     /* Poppins UI labels — unaffected by the body face */

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Shape */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13,27,42,.05), 0 2px 8px rgba(13,27,42,.04);
  --shadow: 0 2px 4px rgba(13,27,42,.04), 0 10px 28px rgba(13,27,42,.07);
  --shadow-lg: 0 4px 10px rgba(13,27,42,.05), 0 24px 60px rgba(13,27,42,.12);

  --container: 1160px;
  --container-narrow: 740px;
  --nav-h: 72px;

  --ease: cubic-bezier(.22,.68,.31,1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* `clip` contains the same overflow without turning <body> into a scroll
   container, which is what `hidden` does to the block axis. */
@supports (overflow: clip) { body { overflow-x: clip; } }
body.is-locked { overflow: hidden; }

img, svg, picture, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--navy);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.018em; font-weight: 600; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-900); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-700); }

ul, ol { padding-left: 1.15em; }
li { margin-bottom: var(--s-2); }

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--teal-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--navy :focus-visible,
.footer :focus-visible,
.cta-band :focus-visible { outline-color: var(--teal); }

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--navy); color: var(--white);
  padding: 12px 18px; border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--s-4); color: var(--white); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--aqua { background: var(--aqua); }
.section--grey { background: var(--grey); }
.section--navy { background: var(--navy); color: rgba(255,255,255,.82); }
.section--navy h2, .section--navy h3 { color: var(--white); }

.section-head { max-width: 640px; margin-bottom: var(--s-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p:not(.eyebrow) { color: var(--slate-dark); font-size: var(--fs-lead); }
.section--navy .section-head p { color: rgba(255,255,255,.75); }

.grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 4. Signature: brush underline (from the logo tagline) ---------- */
.brush { position: relative; display: inline-block; color: var(--teal-700); }
.brush::after {
  content: "";
  /* sits clear of the descenders in "easy way" rather than cutting through them */
  position: absolute; left: 2%; right: 2%; bottom: -.28em; height: .16em;
  background: var(--teal-700);
  border-radius: var(--r-pill);
  transform: scaleX(0); transform-origin: left center;
  animation: brush-in .7s .25s var(--ease) forwards;
}
.brush--sun::after { background: var(--sun); }
@keyframes brush-in { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .brush::after { animation: none; transform: scaleX(1); }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-900); margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: ""; width: 22px; height: 3px; border-radius: var(--r-pill); background: var(--teal);
  flex-shrink: 0;
}
.section--navy .eyebrow { color: var(--teal); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  line-height: 1; text-decoration: none; text-align: center;
  padding: 16px 26px; min-height: 52px;
  border-radius: var(--r-pill); border: 2px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), background-color .18s, border-color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--teal-ink); color: var(--white); box-shadow: 0 6px 18px rgba(0,124,119,.26); }
.btn--primary:hover { background: var(--teal-ink-700); color: var(--white); box-shadow: 0 10px 24px rgba(0,124,119,.3); }
.btn--secondary { background: var(--white); color: var(--navy); border-color: var(--line-strong); }
.btn--secondary:hover { color: var(--navy); border-color: var(--navy); background: var(--white); }
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-700); color: var(--white); }
.btn--ghost { background: transparent; color: var(--navy); border-color: transparent; padding-inline: 12px; }
.btn--ghost:hover { color: var(--teal-900); }
.btn--on-navy { background: var(--white); color: var(--navy); }
.btn--on-navy:hover { background: var(--aqua); color: var(--navy); }
.btn--wide { width: 100%; }
.btn--sm { padding: 11px 18px; min-height: 44px; font-size: 0.9375rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 479px) { .btn-row .btn { width: 100%; } }

.link-arrow {
  font-family: var(--font-display); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; color: var(--teal-900);
}
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- 6. Header / nav ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
/* The frosted panel lives on a pseudo-element: `backdrop-filter` on the header
   itself would make it the containing block for the fixed mobile nav inside it,
   which collapsed that panel to the height of its own content. */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(150%) blur(12px);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: var(--nav-h);
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; color: var(--navy); }
.logo__mark { width: 46px; height: 36px; flex-shrink: 0; }
.logo__text {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  letter-spacing: -0.03em; color: var(--navy); line-height: 1;
}
.logo__text .t { color: var(--teal-700); }
.logo__dot {
  background: var(--sun); color: var(--navy); border-radius: var(--r-pill);
  font-size: .62em; padding: 3px 7px 4px; margin-left: 3px; vertical-align: 2px;
  font-weight: 700; letter-spacing: -0.01em;
}
.logo__tag {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: .625rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--slate); margin-top: 3px;
}

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  display: block; padding: 10px 13px; border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  color: var(--navy); text-decoration: none; white-space: nowrap;
  transition: background-color .18s, color .18s;
}
.nav__link:hover { background: var(--aqua); color: var(--navy); }
.nav__link[aria-current="page"] { color: var(--teal-900); font-weight: 600; }
.header__cta { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 2px solid var(--line-strong); color: var(--navy);
  border-radius: var(--r-pill); padding: 9px 15px 9px 13px; min-height: 44px;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.nav-toggle:hover { border-color: var(--navy); }
.nav-toggle[aria-expanded="true"] { background: var(--aqua); border-color: var(--navy); }
.nav-toggle__bars { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s var(--ease), opacity .2s;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
  background: var(--white); padding: var(--s-5) var(--s-5) var(--s-8);
  overflow-y: auto; display: none;
}
.mobile-nav[data-open="true"] { display: block; animation: fade-up .22s var(--ease); }
.mobile-nav__list { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.mobile-nav__list li { margin: 0; border-bottom: 1px solid var(--line); }
.mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  color: var(--navy); text-decoration: none;
  transition: color .18s;
}
.mobile-nav__link:hover, .mobile-nav__link:active { color: var(--teal-900); }
.mobile-nav__link[aria-current="page"] { color: var(--teal-900); }

@media (min-width: 1024px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}
/* At exactly 1024 (iPad landscape) the full nav, language picker and CTA
   overran by ~15px. Tightening the padding keeps the desktop header there
   rather than dropping a large screen back to a hamburger. */
@media (min-width: 1024px) and (max-width: 1099px) {
  .header__inner { gap: var(--s-3); }
  .nav__link { padding-inline: 9px; }
  .nav__list { gap: 2px; }
  .header__cta { padding-inline: 16px; }
}
/* the header CTA must never wrap — a two-line button grows the whole bar */
.header__cta { white-space: nowrap; }

/* ---------- 7. Mobile sticky CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 10px var(--s-4) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(150%) blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .28s var(--ease);
}
.sticky-cta[data-visible="true"] { transform: translateY(0); }
.sticky-cta__inner { display: flex; align-items: center; gap: var(--s-3); }
.sticky-cta__meta { flex: 1; min-width: 0; }
.sticky-cta__meta strong { display: block; font-family: var(--font-display); font-size: .95rem; line-height: 1.2; }
.sticky-cta__meta span { font-size: var(--fs-xs); color: var(--slate); }
.sticky-cta .btn { flex-shrink: 0; }
body.has-sticky-cta { padding-bottom: 84px; }
@media (min-width: 1024px) { .sticky-cta { display: none; } body.has-sticky-cta { padding-bottom: 0; } }

/* ---------- 8. Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--white); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 88% 12%, var(--aqua) 0%, rgba(230,247,246,0) 70%),
    linear-gradient(180deg, var(--white) 0%, var(--grey) 100%);
  z-index: 0;
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: var(--s-7);
  padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 96px);
}
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: 1.02fr .98fr; align-items: center; gap: var(--s-8); }
}
.hero h1 { font-size: var(--fs-hero); margin-bottom: var(--s-5); }
.hero__lead { font-size: var(--fs-lead); color: var(--slate-dark); max-width: 30em; margin-bottom: var(--s-6); }
.hero__note {
  margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--slate);
  display: flex; align-items: flex-start; gap: 10px; max-width: 34em;
}
.hero__note svg { flex-shrink: 0; margin-top: 2px; }

/* Hero signature: the lens */
.lens { position: relative; width: 100%; max-width: 520px; margin-inline: auto; }
.lens__svg { width: 100%; height: auto; overflow: visible; }
.lens-float { animation: lens-float 9s ease-in-out infinite; transform-origin: center; }
.lens-float--slow { animation-duration: 12s; animation-direction: reverse; }
@keyframes lens-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) { .lens-float { animation: none; } }

/* ---------- 9. Trust strip ---------- */
.trust-strip { border-block: 1px solid var(--line); background: var(--white); }
.trust-strip__list {
  list-style: none; margin: 0; padding: var(--s-5) 0;
  display: grid; gap: var(--s-4) var(--s-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .trust-strip__list { grid-template-columns: repeat(4, 1fr); } }
/* two columns at 375px forced every label onto two lines — one column reads
   cleaner and costs the same height */
@media (max-width: 559px) {
  .trust-strip__list { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5) 0; }
}
.trust-strip__list li {
  margin: 0; display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--navy);
}
.trust-strip__list svg { flex-shrink: 0; }

/* ---------- 10. Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
  height: 100%;
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--slate-dark); font-size: var(--fs-sm); line-height: 1.65; }
.card__icon {
  width: 46px; height: 46px; border-radius: 14px; background: var(--aqua);
  display: grid; place-items: center; margin-bottom: var(--s-4);
}
.card--link { display: flex; flex-direction: column; text-decoration: none; }
.card--link .link-arrow { margin-top: auto; padding-top: var(--s-4); }

.card-list { list-style: none; padding: 0; margin: 0; }
.card-list li { position: relative; padding-left: 28px; margin-bottom: 10px; font-size: var(--fs-sm); color: var(--slate-dark); }
.card-list li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 16px; height: 9px;
  border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal);
  transform: rotate(-45deg); border-radius: 1px;
}
.card-list--cross li::before {
  border: 0; background: var(--slate); height: 2.5px; width: 12px;
  transform: none; top: .72em; left: 2px; border-radius: 2px;
}

/* Benefit card with big label */
.benefit { text-align: left; }
.benefit__label {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal-900);
  display: block; margin-bottom: 6px;
}
.benefit h3 { font-size: 1.15rem; }

/* ---------- 11. Problem list ---------- */
.problem-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .problem-list { grid-template-columns: repeat(2, 1fr); } }
.problem-list li {
  margin: 0; display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; font-size: var(--fs-sm); color: var(--slate-dark);
}
.problem-list strong { display: block; color: var(--navy); font-family: var(--font-display); margin-bottom: 2px; }
.problem-list svg { flex-shrink: 0; margin-top: 2px; }

/* ---------- 12. Process / timeline ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps__item { position: relative; margin: 0; padding: 0 0 var(--s-6) 56px; counter-increment: step; }
.steps__item::before {
  content: counter(step);
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--navy); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  display: grid; place-items: center;
}
.steps__item::after {
  content: ""; position: absolute; left: 19.5px; top: 46px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--line-strong), var(--line));
}
.steps__item:last-child { padding-bottom: 0; }
.steps__item:last-child::after { display: none; }
.steps__item h3 { margin-bottom: 6px; }
.steps__item p { color: var(--slate-dark); font-size: var(--fs-sm); max-width: 68ch; }
.steps--teal .steps__item::before { background: var(--teal); }
.section--navy .steps__item::before { background: var(--teal); color: var(--navy); }
.section--navy .steps__item p { color: rgba(255,255,255,.75); }
.section--navy .steps__item::after { background: rgba(255,255,255,.16); }

.step-note {
  display: inline-block; margin-top: 10px; font-size: var(--fs-xs);
  background: var(--aqua); color: var(--teal-900); border-radius: var(--r-pill);
  padding: 5px 12px; font-weight: 600; font-family: var(--font-display);
}
.section--navy .step-note { background: rgba(0,178,169,.16); color: var(--teal); }

/* ---------- 13. Pricing ---------- */
.fee-split {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--shadow-sm); margin-bottom: var(--s-6);
}
/* the bar and its key stay full width; the explanation keeps a reading measure */
.fee-split > p { max-width: 72ch; }
.fee-split__bar {
  display: flex; height: 46px; border-radius: var(--r-pill); overflow: hidden;
  margin: var(--s-4) 0 var(--s-3); border: 1px solid var(--line);
}
.fee-split__seg {
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-xs); letter-spacing: .04em; color: var(--white); padding-inline: 8px;
  text-align: center;
}
.fee-split__seg--gov { background: var(--navy); flex: 0 0 22%; }
.fee-split__seg--service { background: var(--teal-ink); flex: 1; }
.fee-split__key { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-sm); color: var(--slate-dark); }
.fee-split__key span { display: inline-flex; align-items: center; gap: 8px; }
.fee-split__swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.fee-split__swatch--gov { background: var(--navy); }
.fee-split__swatch--service { background: var(--teal-ink); }

.price-card { display: flex; flex-direction: column; position: relative; }
.price-card--featured { border-color: var(--teal); box-shadow: 0 4px 12px rgba(0,178,169,.12), var(--shadow); }
.price-card .price-card__flag {
  position: absolute; top: -13px; left: var(--s-5);
  background: var(--sun); color: var(--navy); border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px;
}
.price-card__name { font-size: 1.2rem; margin-bottom: 4px; }
.card .price-card__for { font-size: var(--fs-sm); color: var(--slate); margin-bottom: var(--s-4); }
.price-card .price-card__price {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.7rem + 1.6vw, 2.6rem);
  letter-spacing: -0.03em; line-height: 1; color: var(--navy);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.price-card .price-card__price .unit { font-size: .95rem; font-weight: 500; color: var(--slate); letter-spacing: 0; }
.price-card .price-card__plus { font-size: var(--fs-sm); color: var(--slate); margin: 8px 0 var(--s-4); }
/* Hold the divider and feature lists on one line across the three plans, even
   though the "who it's for" line and the fee caveat wrap to different depths. */
@media (min-width: 900px) {
  .card .price-card__for { min-height: 4.95em; }
  .price-card__plus { min-height: 3.3em; }
}
.price-card hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }
.price-card .price-card__sub {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: 10px;
}
.price-card .btn { margin-top: auto; }
.price-card__inner-actions { margin-top: auto; padding-top: var(--s-5); }

.placeholder-price {
  background: var(--sun); color: var(--navy); border-radius: 8px;
  padding: 2px 10px; font-size: .75rem; vertical-align: middle; letter-spacing: .04em;
  font-family: var(--font-display); font-weight: 700;
}

/* ---------- 14. FAQ accordion ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: 20px 4px; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--navy);
  line-height: 1.4;
}
.faq__q:hover { color: var(--teal-900); }
.faq__icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--aqua); position: relative; margin-top: 2px;
  transition: background-color .2s;
}
/* the aqua disc would disappear into an aqua section */
.section--aqua .faq__icon { background: var(--white); }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--teal-900);
  border-radius: 2px; transform: translate(-50%, -50%); transition: transform .22s var(--ease), opacity .22s;
}
.faq__icon::before { width: 12px; height: 2px; }
.faq__icon::after { width: 2px; height: 12px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__a { display: none; padding: 0 4px 22px; max-width: 62ch; }
.faq__a p { color: var(--slate-dark); font-size: var(--fs-sm); }
.faq__a[data-open="true"] { display: block; animation: fade-up .22s var(--ease); }
.faq__a ul { font-size: var(--fs-sm); color: var(--slate-dark); }

/* ---------- 14b. Credibility ----------
   The trust argument is the most important one on the site, so it gets an
   asymmetric layout rather than another row of identical cards: the promises
   read as prose on the left, the checkable company facts sit in a panel. */
.credibility { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .credibility { grid-template-columns: 1.35fr .95fr; gap: var(--s-8); align-items: start; }
}

.commitments { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-5); }
.commitments li { margin: 0; padding-left: var(--s-5); border-left: 2px solid var(--teal); }
.commitments h3 { font-size: 1.08rem; margin-bottom: 4px; }
.commitments p { color: var(--slate-dark); font-size: var(--fs-sm); margin: 0; max-width: 64ch; }

.facts {
  background: var(--navy); color: rgba(255,255,255,.78);
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-5) var(--s-4);
}
@media (min-width: 900px) {
  /* only the home page's two-column block is tall enough to warrant this */
  .credibility .facts { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }
}
.facts__title {
  color: var(--white); font-size: var(--fs-xs); letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: var(--s-4);
}
.facts__list { margin: 0; display: grid; gap: 2px; }
.facts__list > div {
  display: grid; gap: 2px; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.facts__list dt {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs);
  color: rgba(255,255,255,.6);
}
.facts__list dd { margin: 0; font-size: var(--fs-sm); color: var(--white); }
.facts__list a { color: var(--white); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.facts__list a:hover { color: var(--teal); }
.facts__note { font-size: var(--fs-xs); color: rgba(255,255,255,.6); margin: var(--s-4) 0 0; }

/* Pre-launch gap — one marker for everything Jase still has to fill in. */
.tbc {
  display: inline-block; background: var(--sun); color: var(--navy);
  font-family: var(--font-display); font-weight: 700; font-size: .72rem;
  letter-spacing: .04em; border-radius: 7px; padding: 2px 9px; vertical-align: 1px;
}

/* The honest stand-in until there are real reviews to publish. */
.reviews-note { max-width: 62ch; }
.reviews-note h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.reviews-note p { color: var(--slate-dark); }

/* Ready for real quotes — see the commented template on the home page. */
.quote { margin: 0; display: flex; flex-direction: column; }
.quote blockquote { margin: 0 0 var(--s-4); }
.quote blockquote p { color: var(--navy); font-size: var(--fs-body); }
.quote blockquote p::before { content: "\201C"; }
.quote blockquote p::after { content: "\201D"; }
.quote figcaption { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.quote figcaption strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); }
.quote figcaption span { font-size: var(--fs-xs); color: var(--slate); }

/* ---------- 14c. Artifacts ----------
   Drawn evidence of the paperwork itself — the forms, the fee slip, the
   certificate, the routes. Each one is an anchor for the text beside it,
   not decoration, so it carries a caption and an accessible name. */
.artifact { margin: 0; }
.artifact__frame {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--grey); border: 1px solid var(--line);
}
.artifact__frame svg { width: 100%; height: auto; display: block; }
.artifact figcaption {
  margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--slate); max-width: 46ch;
}
.section--navy .artifact__frame { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.section--navy .artifact figcaption { color: rgba(255,255,255,.7); }

/* Text and its evidence, side by side. */
.explainer { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) {
  .explainer { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
  .explainer--wide-art { grid-template-columns: .85fr 1.15fr; }
  .explainer--art-first > :first-child { order: 2; }
  /* A 740px column split in two squeezes both halves — inside a narrow
     container the artifact runs full width and the text sits under it. */
  .container--narrow .explainer { grid-template-columns: 1fr; gap: var(--s-6); }
  .container--narrow .explainer--art-first > :first-child { order: 0; }
}

/* The one authored moment: the paperwork completes itself. Fields fill,
   the right fee option is ticked, the number lands on the certificate. */
.artifact [data-fill] { transform-box: fill-box; transform-origin: left center; }
.artifact [data-pop] { transform-box: fill-box; transform-origin: center; }
/* Drawn complete by default; only JavaScript empties them out to fill in. */
.js .artifact [data-fill] { transform: scaleX(0); }
.js .artifact [data-pop] { transform: scale(.4); opacity: 0; }
.js .artifact[data-seen="true"] [data-fill] { animation: art-fill .55s var(--ease) forwards; }
.js .artifact[data-seen="true"] [data-pop] { animation: art-pop .5s var(--ease) forwards; }
@keyframes art-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes art-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media print { .js .artifact [data-fill] { transform: scaleX(1); } .js .artifact [data-pop] { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .artifact [data-fill] { transform: scaleX(1); }
  .js .artifact [data-pop] { transform: scale(1); opacity: 1; }
  .js .artifact[data-seen="true"] [data-fill],
  .js .artifact[data-seen="true"] [data-pop] { animation: none; }
}

/* Emblems for the guide cards — same kit, card-sized. */
.emblem { width: 100%; height: auto; display: block; border-radius: var(--r); background: var(--aqua); }
.card--link .emblem { margin-bottom: var(--s-4); }

/* Slot for licensed photography: reserves its ratio so nothing shifts on load. */
.media { margin: 0; }
.media__frame {
  border-radius: var(--r-lg); overflow: hidden; background: var(--aqua);
  aspect-ratio: 3 / 2;
}
.media__frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media figcaption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--slate); }

/* ---------- 15. Callouts ---------- */
.callout {
  border: 1px solid var(--line); border-left: 4px solid var(--teal);
  background: var(--white); border-radius: var(--r);
  padding: var(--s-4) var(--s-5); font-size: var(--fs-sm); color: var(--slate-dark);
  max-width: 72ch;  /* a callout in a full-width section still reads as prose */
}
.callout strong { color: var(--navy); }
.callout--sun { border-left-color: var(--sun); }
.callout--navy { border-left-color: var(--navy); background: var(--grey); }

.disclaimer-band {
  background: var(--grey); border-top: 1px solid var(--line);
  padding-block: var(--s-5); font-size: var(--fs-sm); color: var(--slate-dark);
}
.disclaimer-band p { max-width: 70ch; }

/* ---------- 16. Footer ---------- */
.footer { background: var(--navy); color: rgba(255,255,255,.7); padding-block: var(--s-8) var(--s-6); }
.footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__top { display: grid; gap: var(--s-6); margin-bottom: var(--s-7); }
@media (min-width: 800px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-5); } }
.footer .logo { color: var(--white); }
.footer .logo__text { color: var(--white); }
.footer .logo__tag { color: rgba(255,255,255,.55); }
.footer__blurb { font-size: var(--fs-sm); margin-top: var(--s-4); max-width: 32ch; }
.footer__col h2 {
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); margin-bottom: var(--s-4);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 2px; font-size: var(--fs-sm); }
.footer__col a { display: inline-block; padding-block: 7px; }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--s-5);
  font-size: var(--fs-xs); line-height: 1.7; display: grid; gap: var(--s-4);
}
.footer__legal p { max-width: 72ch; }
@media (min-width: 800px) { .footer__legal { grid-template-columns: 1fr auto; align-items: end; } }
.footer__built { color: rgba(255,255,255,.62); }
.footer__company { display: block; margin-top: 6px; max-width: 46ch; }
@media (min-width: 800px) { .footer__built { text-align: right; } .footer__company { margin-left: auto; } }

/* ---------- 17. Forms & application flow ---------- */
.form-field { margin-bottom: var(--s-5); }
.form-field label, .fieldset__legend {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); color: var(--navy); margin-bottom: 8px;
}
.form-field .hint { font-size: var(--fs-xs); color: var(--slate); font-weight: 400; display: block; margin-top: -4px; margin-bottom: 8px; }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--navy);
  background: var(--white); border: 2px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 14px 16px; min-height: 52px; transition: border-color .18s, box-shadow .18s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--teal-ink); box-shadow: 0 0 0 4px rgba(0,124,119,.18);
}
.textarea { min-height: 130px; resize: vertical; }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
.field-error {
  display: none; align-items: center; gap: 8px; margin-top: 8px;
  color: var(--danger); font-size: var(--fs-sm); font-weight: 700;
}
.field-error[data-show="true"] { display: flex; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); }

.select-cards { display: grid; gap: var(--s-3); }
@media (min-width: 560px) { .select-cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .select-cards--3 { grid-template-columns: repeat(3, 1fr); } }

.select-card { position: relative; }
.select-card input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.select-card__body {
  display: flex; align-items: flex-start; gap: 14px;
  border: 2px solid var(--line-strong); border-radius: var(--r); background: var(--white);
  padding: 16px 18px; min-height: 64px; height: 100%;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.select-card__body strong {
  display: block; font-family: var(--font-display); font-size: 1rem; line-height: 1.3; color: var(--navy);
}
.select-card__body span { display: block; font-size: var(--fs-xs); color: var(--slate); margin-top: 3px; }
.select-card__body span:empty { display: none; }
.select-card__tick {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--r-pill);
  border: 2px solid var(--line-strong); background: var(--white);
  display: grid; place-items: center; margin-left: auto;
  transition: border-color .18s, background-color .18s;
}
.select-card__tick svg { opacity: 0; transition: opacity .18s; }
.select-card input:hover + .select-card__body { border-color: var(--slate); }
.select-card input:focus-visible + .select-card__body { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
.select-card input:checked + .select-card__body {
  border-color: var(--teal-ink); background: var(--aqua);
  box-shadow: 0 0 0 3px rgba(0,124,119,.14);
}
.select-card input:checked + .select-card__body .select-card__tick { background: var(--teal-ink); border-color: var(--teal-ink); }
.select-card input:checked + .select-card__body .select-card__tick svg { opacity: 1; }
.select-card__icon { flex-shrink: 0; }

/* Progress */
.progress { margin-bottom: var(--s-6); }
.progress__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; margin-bottom: 10px;
}
.progress__meta span:last-child { color: var(--slate); font-weight: 500; }
.progress__track { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
/* Scaled rather than widened — the track's overflow gives it the pill ends,
   so this animates on the compositor without touching layout. */
.progress__fill {
  height: 100%; width: 100%; background: var(--teal-ink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s var(--ease);
}

.apply-shell { background: var(--grey); min-height: 60vh; }
.apply-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(20px, 4vw, 40px); box-shadow: var(--shadow);
}
.apply-step { display: none; }
.apply-step[data-active="true"] { display: block; animation: fade-up .28s var(--ease); }
.apply-step h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); margin-bottom: 6px; }
.apply-step__lead { color: var(--slate-dark); font-size: var(--fs-sm); margin-bottom: var(--s-5); }
.apply-actions {
  display: flex; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.apply-actions .btn--primary { margin-left: auto; }
@media (max-width: 519px) {
  .apply-actions { flex-direction: column-reverse; }
  .apply-actions .btn { width: 100%; margin-left: 0; }
}

.review-list { list-style: none; margin: 0 0 var(--s-5); padding: 0; border-top: 1px solid var(--line); }
.review-list li {
  margin: 0; display: flex; gap: var(--s-4); align-items: baseline; justify-content: space-between;
  padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.review-list dt, .review-list__label { color: var(--slate); }
.review-list li > span + span { display: inline-flex; align-items: baseline; gap: var(--s-3); }
.review-list__value { font-family: var(--font-display); font-weight: 600; color: var(--navy); text-align: right; }
.review-edit { background: none; border: 0; color: var(--teal-900); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); cursor: pointer; padding: 4px; }
.review-edit:hover { text-decoration: underline; }

/* Document checklist */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li {
  display: flex; gap: 14px; align-items: flex-start; margin: 0;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.doc-list li:last-child { border-bottom: 0; }
.doc-list strong { display: block; font-family: var(--font-display); font-size: var(--fs-body); }
.doc-list span { display: block; font-size: var(--fs-sm); color: var(--slate-dark); margin-top: 2px; }
.doc-list__mark { flex-shrink: 0; width: 24px; height: 24px; margin-top: 3px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px);
  z-index: 120; max-width: calc(100% - 32px);
  background: var(--navy); color: var(--white); border-radius: var(--r);
  padding: 14px 20px; font-size: var(--fs-sm); box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
  display: flex; align-items: center; gap: 10px;
}
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1024px) { .toast { bottom: 32px; } }

/* ---------- 18. Article / prose ---------- */
.prose { max-width: 68ch; }
/* When .prose is itself the container, the block keeps the container's left edge
   so it lines up with the page heading, and the reading measure is set on the
   text itself instead — Source Sans 3 fits ~88 characters into the full width. */
.container--narrow.prose { max-width: var(--container-narrow); }
.container.prose > p,
.container.prose > ul,
.container.prose > ol,
.container.prose > blockquote { max-width: 68ch; }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin-bottom: var(--s-4); color: var(--slate-dark); }
.prose li { color: var(--slate-dark); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-5); font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--font-display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--slate); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--s-5); }

.page-head { background: var(--aqua); padding-block: clamp(36px, 5vw, 64px); border-bottom: 1px solid rgba(0,178,169,.18); }
.page-head p { color: var(--slate-dark); font-size: var(--fs-lead); max-width: 56ch; }

.breadcrumbs { font-size: var(--fs-xs); color: var(--slate); margin-bottom: var(--s-4); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: flex; gap: 8px; align-items: center; }
.breadcrumbs li + li::before { content: "/"; color: var(--line-strong); }
.breadcrumbs a { color: var(--slate); text-decoration: none; }
.breadcrumbs a:hover { color: var(--teal-900); text-decoration: underline; }

.post-meta { font-size: var(--fs-xs); color: var(--slate); margin-bottom: var(--s-5); display: flex; gap: 12px; flex-wrap: wrap; }
.post-card__tag {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal-900); margin-bottom: 8px; display: block;
}
.post-card__title { font-size: 1.2rem; }

/* ---------- 19. Utilities & motion ---------- */
/* Content only starts hidden when JavaScript is there to reveal it — with no
   JS, a failed script or a print job, everything stays visible. */
.js .reveal:not([data-seen="true"]) { opacity: 0; transform: translateY(18px); }
.reveal[data-seen="true"] { animation: fade-up .55s var(--ease) forwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media print {
  .js .reveal:not([data-seen="true"]) { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not([data-seen="true"]) { opacity: 1; transform: none; }
  .reveal[data-seen="true"] { animation: none; }
  .btn:hover { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0; }
.mb-6 { margin-bottom: var(--s-6); }
.lead { font-size: var(--fs-lead); color: var(--slate-dark); }
/* Dark surfaces: body copy must invert, or a dark grey lands on navy at
   2.3:1. .lead sets its own colour, so it has to be told explicitly. */
.section--navy .lead,
.section--navy p:not(.eyebrow):not(.express__stamp),
.section--navy li,
.cta-band .lead,
.cta-band p:not(.eyebrow){ color: rgba(255,255,255,.86); }
.section--navy strong,
.cta-band strong{ color: var(--white); }
.small { font-size: var(--fs-sm); color: var(--slate-dark); }
.muted { color: var(--slate); }

/* A hairline divider inside a card or prose block. */
.rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
.rule--tight { margin: var(--s-5) 0; }

/* Heading that only wraps an accordion button — the button carries the styling. */
.faq__heading { margin: 0; font-size: 1.05rem; }

.btn-row--center { justify-content: center; }
.grid--start { align-items: start; }
.list-centred { display: inline-block; text-align: left; }

/* A plain list of links — no tick marks, which mean "included" elsewhere. */
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { margin: 0; }
.link-list a {
  display: block; padding: 9px 0; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); color: var(--teal-900); text-decoration: none;
}
.link-list a:hover { color: var(--teal-ink-700); text-decoration: underline; }

/* Centred confirmation panel (application thank-you). */
.panel--centred { text-align: center; padding: clamp(28px, 5vw, 56px); }
.panel--centred .callout, .panel--centred .list-centred { text-align: left; }
.panel__mark { margin: 0 auto var(--s-5); }

.cta-band { background: var(--navy); border-radius: var(--r-xl); padding: clamp(28px, 5vw, 56px); color: rgba(255,255,255,.78); position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
  border: 24px solid rgba(0,178,169,.18); border-radius: 50%;
}
.cta-band__inner { position: relative; z-index: 1; max-width: 46ch; }
.cta-band h2 { color: var(--white); }
.cta-band p { font-size: var(--fs-lead); margin-bottom: var(--s-5); }

.notfound { display: grid; place-items: center; text-align: center; padding-block: clamp(60px, 12vw, 140px); }
.notfound__code {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1; letter-spacing: -0.05em; color: var(--teal-700); margin-bottom: var(--s-4);
}

/* ---------- 20. Small-screen refinements found in audit ---------- */
@media (max-width: 479px) {
  .review-list li { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 2px; }
  /* the value keeps the row, Edit moves to the far edge as its own target */
  .review-list li > span + span { display: flex; width: 100%; justify-content: space-between; gap: var(--s-4); }
  .review-list__value { text-align: left; }
  .review-edit { padding: 8px 0 8px var(--s-3); }
  .fee-split__key { flex-direction: column; gap: 10px; }
}
/* 320px devices: the logo and Menu button overran the header by a few pixels */
@media (max-width: 359px) {
  .logo__tag { display: none; }
  .container { padding-inline: var(--s-4); }
  .logo__text { font-size: 1.15rem; }
  .nav-toggle { padding-inline: 12px 13px; }
}

/* ---------- 21. Recommended plan (application review step) ---------- */
.plan-rec {
  background: var(--aqua); border: 1px solid rgba(0,178,169,.28);
  border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-5);
}
.plan-rec .plan-rec__label {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal-900); margin-bottom: 4px;
}
.plan-rec h3 { font-size: 1.35rem; margin-bottom: 8px; }
.plan-rec p { font-size: var(--fs-sm); color: var(--slate-dark); }

/* ---- Post header image ---------------------------------------------- */
.post-figure{
  margin: 1.75rem 0 2rem;
}
.post-figure picture,
.post-figure img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.post-figure figcaption{
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--slate);
}
.post-figure figcaption a{ color: var(--slate); }
@media (prefers-reduced-motion: no-preference){
  .post-figure img{ transition: none; }
}

/* ---- Section band image --------------------------------------------- */
.section-figure{
  margin: 0 0 2.25rem;
}
.section-figure picture,
.section-figure img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.section-figure figcaption{
  margin-top: .55rem;
  font-size: .82rem;
  color: var(--slate);
  text-align: right;
}
.section-figure figcaption a{ color: var(--slate); }

/* ---- Language switcher ---------------------------------------------- */
.langsel{ position: relative; margin-left: .75rem; display: none; }
@media (min-width: 1024px){ .langsel{ display: block; } }
.langsel > summary{
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--navy);
  background: var(--white); white-space: nowrap;
}
.langsel > summary::-webkit-details-marker{ display: none; }
.langsel > summary:hover{ border-color: var(--teal-ink); color: var(--teal-ink); }
.langsel > summary:focus-visible{ outline: 3px solid var(--teal-ink); outline-offset: 2px; }
.langsel__list{
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 60;
  margin: 0; padding: .35rem; list-style: none; min-width: 11rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
.langsel__list a{
  display: block; padding: .5rem .7rem; border-radius: 8px;
  color: var(--navy); text-decoration: none; font-size: .9rem;
}
.langsel__list a:hover{ background: var(--aqua); color: var(--teal-ink); }
.langsel__list a[aria-current="true"]{ font-weight: 700; color: var(--teal-ink); }


/* ---- Language options inside the mobile menu ------------------------ */
.mobile-nav__langs{
  margin: .5rem 0 0; padding: 1rem 0 .25rem; border-top: 1px solid var(--line);
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
}
.mobile-nav__langs-label{
  width: 100%; margin: 0 0 .5rem; font-family: var(--font-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--slate);
}
.mobile-nav__langs a{
  display: block; padding: .5rem .85rem; border: 1px solid var(--line-strong);
  border-radius: 999px; font-size: .9rem; color: var(--navy); text-decoration: none;
}
.mobile-nav__langs a[aria-current="true"]{
  background: var(--aqua); border-color: var(--teal-ink); color: var(--teal-ink); font-weight: 700;
}
@media (min-width: 1024px){ .mobile-nav__langs{ display: none; } }

/* ---- Collapsible detail inside cards and sections -------------------- */
.more{ margin-top: .65rem; }
.more > summary{
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  color: var(--teal-ink); padding: .15rem 0;
}
.more > summary::-webkit-details-marker{ display: none; }
.more > summary::after{
  content: ""; width: .42rem; height: .42rem; margin-left: .1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform .18s;
}
.more[open] > summary::after{ transform: rotate(-135deg) translateY(-1px); }
.more > summary:hover{ color: var(--teal-ink-700); }
.more > summary:focus-visible{ outline: 3px solid var(--teal-ink); outline-offset: 3px; border-radius: 4px; }
.more__body{ padding-top: .5rem; }
.more__body > *:first-child{ margin-top: 0; }
@media (prefers-reduced-motion: reduce){ .more > summary::after{ transition: none; } }

/* ---- 48-hour hero badge --------------------------------------------- */
.hero__flash{
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1.35rem; padding: .3rem .85rem .3rem .3rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  font-size: .82rem; line-height: 1.3; color: var(--slate-dark);
  max-width: 100%;
}
.hero__flash-tag{
  flex-shrink: 0;
  background: var(--navy); color: var(--white);
  border-radius: var(--r-pill); padding: .3rem .7rem .35rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.hero__flash-text{ font-family: var(--font-body); }
@media (max-width: 560px){
  .hero__flash{ font-size: .76rem; }
  .hero__flash-tag{ font-size: .66rem; padding: .28rem .6rem .3rem; }
}

/* ---- Express highlight panel ---------------------------------------- */
.express{
  display: grid; gap: 1.75rem; align-items: center;
}
@media (min-width: 900px){ .express{ grid-template-columns: 1fr 0.85fr; gap: 2.5rem; } }
.express__figure{ margin: 0; }
.express__figure img{
  display: block; width: 100%; height: auto;
  border-radius: 18px; box-shadow: var(--shadow-lg);
}
.express__figcaption{
  margin-top: .55rem; font-size: .8rem; color: var(--slate); text-align: right;
}
.express__stamp{
  display: inline-block; margin-bottom: .8rem; padding: .4rem .85rem;
  background: var(--navy); color: var(--white); border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ---- Turnaround strip ------------------------------------------------ */
.speed-strip{
  list-style: none; margin: 1.5rem 0 2rem; padding: 0;
  display: grid; gap: .6rem;
}
@media (min-width: 640px){ .speed-strip{ grid-template-columns: repeat(3,1fr); gap: .8rem; } }
.speed-strip li{
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  padding: .85rem 1.1rem; background: var(--white);
  border: 1px solid var(--line); border-radius: 14px;
}
.speed-strip__name{
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--slate);
}
.speed-strip__time{
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--navy);
}
.speed-strip .is-express{ background: var(--navy); border-color: var(--navy); }
.speed-strip .is-express .speed-strip__name{ color: var(--teal); }
.speed-strip .is-express .speed-strip__time{ color: var(--white); }

/* outlined button for navy sections */
.btn--outline-light{
  background: transparent; color: var(--white);
  border: 2px solid rgba(255,255,255,.55);
}
.btn--outline-light:hover{ border-color: var(--white); background: rgba(255,255,255,.08); color: var(--white); }
.btn--outline-light:focus-visible{ outline: 3px solid var(--teal); outline-offset: 3px; }

/* secondary flag so "Most chosen" reads below the Express highlight */
.price-card__flag--muted{
  background: var(--aqua) !important; color: var(--teal-ink) !important;
}

.logo__mark{ width: 38px; height: 38px; flex-shrink: 0; }
.logo__tag .t{ color: var(--teal-700); }
.footer .logo__tag .t{ color: var(--teal); }

/* white-on-navy variant: document reads as outline, teal check retained */
.footer .logo__mark rect{ fill: transparent; }

/* ---- WCAG AA guard for the brand palette ----------------------------
   Brand slate #6B7280 clears AA on white (4.83:1) but not on the brand's
   own aqua (4.37:1) or light grey (4.42:1). Inside tinted sections the
   token resolves to the darker brand slate, which clears at 6.84:1.
   The brand hex is unchanged wherever it passes.                        */
.section--aqua,
.section--grey,
.page-head,
.apply-shell,
.plan-rec,
.faq,
.facts,
.card{ --slate: var(--slate-dark); }

/* logo tagline: teal-700 is 3.92:1 on white — use the AA-rated brand teal */
.logo__tag .t{ color: var(--teal-900); }

/* honeypot: off-screen for people, present for bots (not display:none — some bots skip those) */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---- Photo hero ------------------------------------------------------ */
.hero-photo{
  position: relative; isolation: isolate;
  padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2.5rem, 6vw, 5rem);
  background: var(--aqua);
  overflow: hidden;
}
.hero-photo__bg{ position: absolute; inset: 0; z-index: 0; }
.hero-photo__bg img{
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%;
  display: block;
}
.hero-photo::after{
  content: ""; position: absolute; z-index: 1; pointer-events: none;
}

/* --- Mobile and tablet: photo on top, words underneath ------------------
   Laying the text over the photograph here meant a 95%-opaque scrim, which
   erased the picture. Stacking keeps the photograph doing its job and gives
   the type a clean white ground. --------------------------------------- */
@media (max-width: 899px){
  .hero-photo{
    padding: 0 0 clamp(2rem, 6vw, 3rem);
    background: var(--white);
  }
  .hero-photo__bg{
    position: relative; inset: auto;
    display: block; height: clamp(232px, 40vw + 130px, 340px);
  }
  .hero-photo__bg img{ object-position: 60% 36%; }
  /* fade the foot of the photograph into the panel below it */
  .hero-photo::after{
    left: 0; right: 0; top: 0;
    height: clamp(232px, 40vw + 130px, 340px);
    background: linear-gradient(180deg,
      rgba(255,255,255,0) 62%, rgba(255,255,255,.72) 86%, var(--white) 100%);
  }
  .hero-photo__inner{ padding-top: clamp(1.15rem, 4vw, 1.9rem); }
}
@media (max-width: 559px){
  /* tighten the stack so the button is a short thumb-scroll from the fold */
  .hero-photo__bg, .hero-photo::after{ height: clamp(220px, 62vw, 288px); }
  .hero-photo h1{ font-size: clamp(1.95rem, 8.4vw, 2.45rem); line-height: 1.08; }
  .hero-photo .hero__lead{ font-size: .96rem; line-height: 1.5; margin-bottom: 0; }
  .hero-photo .hero__flash{ margin-bottom: .9rem; }
}

/* --- Desktop -----------------------------------------------------------
   The couple sit centre-left in the photograph, which is exactly where the
   text has to go. Full-bleed put them under the scrim and only the woman
   survived. So the picture is held to the right of the panel and panned, and
   its left edge is feathered so it still reads as one image, not a hard
   split. Because the frame is now taller than it is wide, the image overflows
   horizontally and object-position finally has something to move. -------- */
@media (min-width: 900px){
  .hero-photo{ background: var(--white); }
  .hero-photo__bg{
    left: 38%; right: 0; top: 0; bottom: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  }
  .hero-photo__bg img{ object-position: 26% 42%; }
  /* only a light wash where type meets the feathered edge */
  .hero-photo::after{
    inset: 0;
    background: linear-gradient(96deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.97) 32%, rgba(255,255,255,.55) 44%, rgba(255,255,255,0) 56%);
  }
}
@media (min-width: 1280px){
  .hero-photo__bg{ left: 42%; }
  .hero-photo__bg img{ object-position: 30% 42%; }
}
.hero-photo__inner{ position: relative; z-index: 2; }
.hero-photo__panel{ max-width: 34rem; }
@media (min-width: 900px){ .hero-photo__panel{ max-width: 33rem; } }
@media (min-width: 1200px){ .hero-photo__panel{ max-width: 35rem; } }

.hero-photo h1{ margin: 0 0 .75rem; }
.hero-photo .hero__lead{ max-width: 30rem; }

.hero-chips{
  list-style: none; margin: 1.5rem 0 1.75rem; padding: 0;
  display: grid; gap: .6rem;
}
@media (min-width: 560px){ .hero-chips{ grid-template-columns: repeat(3, 1fr); gap: .5rem; } }
.hero-chips li{
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: .7rem .75rem;
  font-size: .8rem; line-height: 1.35; color: var(--slate-dark);
  box-shadow: var(--shadow-sm);
  text-wrap: pretty;
}
/* keep the chip labels on one line so the three cards read as a set */
.hero-chips strong{ white-space: nowrap; }
.hero-chips svg{ flex-shrink: 0; color: var(--teal-ink); margin-top: 1px; }
.hero-chips strong{ color: var(--navy); font-family: var(--font-display); font-weight: 700; }

/* On a phone the three cards cost a whole screen before anyone reaches the
   button. Same three facts, read as a list instead. */
@media (max-width: 559px){
  .hero-chips{ gap: .1rem; margin: 1.15rem 0 1.4rem; }
  .hero-chips li{
    background: none; border: 0; box-shadow: none;
    padding: .3rem 0; align-items: center; font-size: .86rem;
  }
  .hero-chips li span{ display: block; }
  .hero-chips li br{ display: none; }
  .hero-chips strong::after{ content: " — "; color: var(--slate); font-weight: 400; }
  .hero-chips svg{ margin-top: 0; }
}

/* sunshine CTA, per the brand's primary action colour */
.btn--sun{
  background: var(--sun); color: var(--navy);
  border: 2px solid var(--sun); font-weight: 700;
}
.btn--sun:hover{ background: var(--sun-700); border-color: var(--sun-700); color: var(--navy); }
.btn--sun:focus-visible{ outline: 3px solid var(--navy); outline-offset: 3px; }

/* header fits 375px: drop the lockup tagline before the nav toggle is squeezed */
@media (max-width: 420px){
  .logo__tag{ display: none; }
  .logo__mark{ width: 34px; height: 34px; }
  .header__inner{ gap: var(--s-2); }
}

/* ============================================================
   Cookie consent
   Bottom sheet on mobile, floating card on desktop. Both action
   buttons carry equal weight — the AEPD treats a quiet "reject"
   as no consent at all.
   ============================================================ */
.consent{
  position: fixed; z-index: 200;
  left: 0; right: 0; bottom: 0;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 32px rgba(13,27,42,.14);
  padding: var(--s-4) var(--s-3) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
}
.consent[hidden]{ display: none; }

.consent__inner{
  max-width: 68rem; margin: 0 auto;
  display: grid; gap: var(--s-3);
}
.consent__title{
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
  color: var(--navy); margin: 0 0 .3rem;
}
.consent__body{
  margin: 0; font-size: .88rem; line-height: 1.55; color: var(--slate-dark);
  max-width: 60ch; text-wrap: pretty;
}
.consent__actions{
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
}
.consent__btn{ flex: 1 1 auto; min-height: 46px; justify-content: center; }
.consent__link{
  flex: 1 1 100%;
  font-size: .82rem; color: var(--teal-900); text-decoration: underline;
  text-underline-offset: 3px; padding: .35rem 0;
}
.consent__link:hover{ color: var(--teal-ink-700); }

@media (min-width: 640px){
  .consent__actions{ flex-wrap: nowrap; }
  /* a shared minimum keeps accept and reject a matched pair, so neither
     option reads as the favoured one */
  .consent__btn{ flex: 0 0 auto; min-width: 12rem; }
  .consent__link{ flex: 0 0 auto; margin-left: .35rem; }
}
@media (min-width: 900px){
  .consent{
    left: auto; right: var(--s-4); bottom: var(--s-4);
    max-width: 30rem; border: 1px solid var(--line); border-radius: 16px;
    padding: var(--s-4);
  }
  .consent__inner{ gap: var(--s-3); }
  /* the card is too narrow to hold both buttons and the link on one line */
  .consent__actions{ flex-wrap: wrap; }
  .consent__btn{ flex: 1 1 0; }
  .consent__link{ flex: 1 1 100%; margin-left: 0; }
}

/* the banner slides in unless the visitor has asked for less motion */
@media (prefers-reduced-motion: no-preference){
  .consent{ animation: consent-in .32s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes consent-in{ from{ transform: translateY(14px); opacity: 0; } to{ transform: none; opacity: 1; } }
}

/* the settings link only does something with JS, so only show it then */
[data-consent-settings]{ display: none; }
.js [data-consent-settings]{ display: list-item; }

/* The consent banner sits over the sticky call-to-action, which would leave
   that button unreachable. Stand the sticky bar down until a choice is made. */
body.consent-open .sticky-cta{ display: none; }