/* ==========================================================================
   Sparrow Thinking — the site stylesheet
   One hand-written file. Values are read from the design files in handoff 3/design,
   with Decisions.md taking precedence, then the .dc.html file, then Design Spec.md.

   Bands (Design Spec.md §2, validated against Sparrow Tablet Reference.dc.html):
     ≥1280       desktop as designed     gutter 64, section 96, inline nav, 40 gap
     1024–1279   compact desktop         gutter 48, section 80, drawer (the design had the inline nav here;
                                         five nav items need 1280: Suz, 19 September 2026)
     768–1023    tablet                  gutter 40, section 80, drawer
     <768        mobile (the mobile files)  gutter 20, section 56, drawer
   Hover is gated to ≥1024 with a real pointer. The hero watermark exists only at ≥1280.
   ========================================================================== */

/* ---------- Font: Hanken Grotesk, self-hosted latin subset ---------- */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-italic-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;
}

/* ---------- Tokens ---------- */
:root {
  /* Colour (Design Spec.md §1). The two logo artwork colours are never UI colours and appear nowhere here. */
  --blue: #0445AD;
  --ink: #16202E;
  --cream: #F2EDE6;
  --light-blue: #65AAF7;
  --coral: #FF6850;
  --grey: #42536A;
  --footer-grey: #C9D3E2;
  --pale-blue: #D9E4F7;
  --panel-blue: #E9F1FD;
  --white: #FFFFFF;
  --rule-light: rgba(22, 32, 46, .14);
  --rule-ink: rgba(255, 255, 255, .18);
  --rule-blue: rgba(255, 255, 255, .25);
  --quiet-underline: rgba(66, 83, 106, .4);
  --overlay: rgba(22, 32, 46, .4);

  --shadow-card: 0 2px 6px rgba(22, 32, 46, .06), 0 20px 48px rgba(22, 32, 46, .18);
  --shadow-card-m: 0 2px 6px rgba(22, 32, 46, .06), 0 12px 32px rgba(22, 32, 46, .12);
  --shadow-drawer: 0 20px 48px rgba(22, 32, 46, .35);

  /* Band rules */
  --gutter: 64px;
  --sy: 96px;            /* section padding, top and bottom */
  --sy-last: 112px;      /* bottom padding of the last section on pages whose design uses it */
  --col-gap: 80px;       /* 5/7, 7/5 and 1fr 1fr grids */
  --head-gap: 56px;      /* section heading to content */
  --header-h: 112px;
  /* Full-bleed bands; content stays inside a 1440 container (Design Spec.md §6). */
  --pad-x: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));

  /* Hero padding per page family: top / bottom */
  --hero-home-pt: 112px;    --hero-home-pb: 130px;
  --hero-product-pt: 120px; --hero-product-pb: 112px;
  --hero-session-pt: 120px; --hero-session-pb: 200px;   /* Sense Check, Advisory: overhang room */
  --hero-about-pt: 96px;    --hero-about-pb: 200px;
  --hero-contact-pt: 96px;  --hero-contact-pb: 128px;
  --hero-404-pt: 112px;     --hero-404-pb: 130px;
  --portrait-overhang: -150px;

  /* Type (Design Spec.md §1) */
  --fs-h1-home: 96px;
  --fs-h1: 80px;
  --fs-h1-contact: 80px;
  --fs-h1-legal: 56px;
  --fs-h2: 48px;
  --fs-card-title: 30px;
  --fs-hero-lead: 26px;
  --fs-lead: 28px;
  --fs-body: 20px;
  --fs-acc: 22px;
  --fs-price: 32px;
  --fs-step-n: 56px;
  --fs-cta-q: 28px;
  --fs-col-title: 26px;
}

@media (max-width: 1279.98px) {
  :root {
    --gutter: 48px;
    --sy: 80px;
    --sy-last: 96px;
    --col-gap: 56px;
    --head-gap: 40px;
    --header-h: 104px;
    --hero-home-pt: 88px;    --hero-home-pb: 106px;
    --hero-product-pt: 96px; --hero-product-pb: 88px;
    --hero-session-pt: 96px; --hero-session-pb: 180px;
    --hero-about-pt: 88px;   --hero-about-pb: 180px;
    --hero-contact-pt: 88px; --hero-contact-pb: 104px;
    --hero-404-pt: 88px;     --hero-404-pb: 106px;
    --portrait-overhang: -140px;
    --fs-h1-home: 68px;
    --fs-h1: 68px;
    --fs-h1-contact: 68px;
    --fs-h2: 42px;
    --fs-card-title: 26px;
    --fs-hero-lead: 24px;
    --fs-lead: 24px;
    --fs-body: 19px;
    --fs-acc: 20px;
    --fs-price: 28px;
    --fs-step-n: 48px;
    --fs-cta-q: 24px;
    --fs-col-title: 24px;
  }
}

@media (max-width: 1023.98px) {
  :root {
    --gutter: 40px;
    --col-gap: 32px;
    --hero-home-pt: 72px;    --hero-home-pb: 72px;
    --hero-product-pt: 72px; --hero-product-pb: 72px;
    --hero-session-pt: 72px; --hero-session-pb: 72px;   /* no overhang in the single-column bands */
    --hero-about-pt: 72px;   --hero-about-pb: 150px;
    --hero-contact-pt: 72px; --hero-contact-pb: 72px;
    --hero-404-pt: 72px;     --hero-404-pb: 72px;
    --portrait-overhang: -120px;
    --fs-h1-home: 56px;
    --fs-h1: 56px;
    --fs-h1-contact: 56px;
    --fs-h2: 36px;
    --fs-hero-lead: 22px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --gutter: 20px;
    --sy: 56px;
    --sy-last: 64px;
    --col-gap: 28px;
    --head-gap: 28px;
    --header-h: 76px;
    --hero-home-pt: 40px;    --hero-home-pb: 56px;
    --hero-product-pt: 32px; --hero-product-pb: 40px;
    --hero-session-pt: 48px; --hero-session-pb: 56px;
    --hero-about-pt: 40px;   --hero-about-pb: 88px;
    --hero-contact-pt: 40px; --hero-contact-pb: 56px;
    --hero-404-pt: 40px;     --hero-404-pb: 56px;
    --portrait-overhang: -56px;
    --fs-h1-home: 48px;
    --fs-h1: 42px;
    --fs-h1-contact: 48px;
    --fs-h1-legal: 40px;
    --fs-h2: 34px;
    --fs-card-title: 26px;
    --fs-hero-lead: 20px;
    --fs-lead: 22px;
    --fs-body: 17px;
    --fs-acc: 18px;
    --fs-price: 28px;
    --fs-step-n: 42px;
    --fs-cta-q: 20px;
    --fs-col-title: 22px;
  }
}

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  position: relative;          /* the drawer and its overlay position against the page, as in the mobile files */
  margin: 0;
  background: var(--white);    /* the page is always white; cream belongs to sections only */
  color: var(--ink);
  font-family: 'Hanken Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg, picture { display: block; }
img { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
/* text-wrap: pretty where the design files use it: headings and paragraphs. List items, card subtitles and
   accordion titles wrap normally, as they do in the files (About's bullets are the exception, set below). */
h1, h2, h3, p { text-wrap: pretty; }
.card-kind, .acc__title, .offer-card__label, .eyebrow, .contact-band__q, .legal-h3, .signpost__title,
.about-exp__loc--strong, .cta-row--faq .cta-row__q { text-wrap: wrap; }
[hidden] { display: none !important; }   /* a flex or grid panel must never beat [hidden] (Design Spec.md §8.1) */

/* Focus: coral ring with a white inner band and an ink outer edge, so one band passes 3:1 on every ground
   (Accessibility Spec.md §5). !important because the accordion triggers use all:unset. */
:focus-visible {
  outline: 3px solid var(--coral) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 8px #16202E !important;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--white);
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  border-radius: 8px;
  transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible { transform: none; }

/* Coral full stop after every h1, and only the h1 */
.stop { color: var(--coral); position: relative; top: .02em; margin-left: .04em; }

/* Intended line breaks that only exist from 768 up (Sense Check h1, footer location) */
@media (max-width: 767.98px) { .br-wide { display: none; } }

/* ---------- Type ---------- */
h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.bg-blue h2 { color: var(--white); }

.h1 {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--blue);          /* blue on white and cream heroes */
  max-width: 1000px;
}
.hero--blue .h1 { color: var(--white); }   /* white on blue heroes */
.h1--home { font-size: var(--fs-h1-home); line-height: .98; max-width: 1040px; }
.h1--narrow { max-width: 900px; }
.h1--contact { font-size: var(--fs-h1-contact); max-width: none; }
.h1--legal { font-size: var(--fs-h1-legal); max-width: none; }

.lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.3; letter-spacing: -.015em; }
.body { font-size: var(--fs-body); line-height: 1.55; }
.body--grey { color: var(--grey); }
.body--500 { font-weight: 500; }
.body--600 { font-weight: 600; }
.stack { display: flex; flex-direction: column; }
.stack--28 { gap: 28px; }
.stack--24 { gap: 24px; }

@media (max-width: 767.98px) {
  .lead { line-height: 1.3; }
  .lead--compact-m { font-size: 20px; line-height: 1.35; }
  .body { line-height: 1.55; }
}

/* ---------- Sections ---------- */
.section { padding: var(--sy) var(--pad-x); }
.section--last { padding-bottom: var(--sy-last); }
@media (max-width: 767.98px) { .section--last-m { padding-bottom: var(--sy-last); } }
.bg-white { background: var(--white); color: var(--ink); }
.bg-blue { background: var(--blue); color: var(--white); }
.bg-cream { background: var(--cream); color: var(--ink); }

/* 5fr 7fr: heading left, body right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--col-gap);
  align-items: start;
}
.split__heading { max-width: 440px; }
.split__body { max-width: 720px; padding-top: 6px; }
@media (max-width: 1023.98px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__heading { max-width: none; }
  .split__body { padding-top: 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  padding: 16px 26px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 8px;
  text-align: center;
}
.btn--lg { padding: 18px 28px; }
.btn--invert { background: var(--white); color: var(--ink); }   /* primary on blue grounds */

@media (max-width: 767.98px) {
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    min-height: 52px;
  }
  .btn--block-m { width: 100%; }
}

/* ---------- Text link with the coral underline ---------- */
.tlink {
  display: inline-block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1.5px solid var(--coral);
  padding-bottom: 2px;
  transition: border-color .15s, color .15s;
}
.tlink--on-dark { color: var(--white); }
.tlink--hero { padding: 4px 0; }
.tlink--sm { font-size: 16px; line-height: 1.5; }
@media (max-width: 767.98px) {
  .tlink--hero { padding: 0 0 2px; }
  .tlink--sm { line-height: normal; }
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--pad-x);
  background: var(--white);
}
/* Logo box: 56 desktop and tablet, 40 / 36 / 34 mobile (Design Spec.md §2). The vector in brand/ carries less
   transparent padding than the PNG the design files render, so the artwork is drawn at 92.5% of the box to
   match the reference's visible logo size while the box, and so the header height, stays as specified. */
.site-header__logo { --logo-box: 56px; display: flex; align-items: center; height: var(--logo-box); }
.site-header__logo img { height: calc(var(--logo-box) * .925); width: auto; }

.site-nav__list {
  display: flex;
  gap: 40px;
  align-items: center;
  list-style: none;
  font-size: 17px;
  font-weight: 500;
}
.site-nav__list a { display: block; }
.site-nav__link { position: relative; color: var(--ink); }
/* Current page: coral bar, text stays ink (Design Spec.md §5, §8.5) */
.site-nav__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--coral);
}
.site-nav__cta {
  color: var(--white);
  background: var(--blue);
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
}
.site-header--contact .site-nav__cta { background: var(--ink); }

.site-header__compact { display: none; }

.menu-toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-toggle__bars { display: flex; flex-direction: column; gap: 6px; }
.menu-toggle__bars > span,
.menu-toggle__cross > span { display: block; width: 22px; height: 2px; background: var(--ink); }
.menu-toggle__cross { display: none; }
.menu-toggle__cross > span { position: absolute; left: 11px; top: 21px; }
.menu-toggle__cross > span:first-child { transform: rotate(45deg); }
.menu-toggle__cross > span:last-child { transform: rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__cross { display: block; }

@media (max-width: 1279.98px) {
  .site-header { padding-top: 24px; padding-bottom: 24px; }
}

/* Below 1280: burger drawer, filled header button, 48px trigger. The design switched at 1024; with Advisory added
   (Suz, 19 September 2026) the five inline nav items need 1280 to sit on one line with room to spare. */
@media (max-width: 1279.98px) {
  .site-nav { display: none; }
  .site-header__compact { display: flex; gap: 14px; align-items: center; }
  .header-cta {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 14px 22px;
    border-radius: 8px;
    background: var(--blue);
    color: var(--white);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }
  .site-header--contact .header-cta { background: var(--ink); }
  .menu-toggle { width: 48px; height: 48px; }
  .menu-toggle__bars > span,
  .menu-toggle__cross > span { width: 24px; }
  .menu-toggle__cross > span { left: 12px; top: 23px; }
}

/* Mobile header ladder: logo 40 / 36 / 34, outlined button, button moves into the drawer below 360 */
@media (max-width: 767.98px) {
  .site-header { padding: 16px 20px; }
  .site-header__logo { --logo-box: 40px; }
  .site-header__compact { gap: 10px; }
  .header-cta {
    min-height: 44px;
    padding: 11px 16px;
    background: var(--white);
    color: var(--blue);
    border: 1.5px solid var(--blue);
    font-size: 15px;
  }
  .site-header--contact .header-cta { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .menu-toggle { width: 44px; height: 44px; }
  .menu-toggle__bars > span,
  .menu-toggle__cross > span { width: 22px; }
  .menu-toggle__cross > span { left: 11px; top: 21px; }
}
@media (max-width: 389.98px) {
  .site-header__logo { --logo-box: 36px; }
  .header-cta { padding: 11px 10px; font-size: 14px; }
}
@media (max-width: 359.98px) {
  .site-header__logo { --logo-box: 34px; }
  .header-cta { display: none; }
}

/* ---------- Drawer (mobile files' implementation: absolute, overlays the page) ---------- */
.drawer-overlay {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--overlay);
}
.drawer {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 11;
  background: var(--ink);
  padding: 8px var(--gutter) 28px;
  box-shadow: var(--shadow-drawer);
}
.drawer__list { display: flex; flex-direction: column; list-style: none; }
.drawer__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-ink);
  color: var(--white);
  font-size: 24px;
  font-weight: 500;
}
.drawer__list > li:nth-last-child(2) > .drawer__link { border-bottom: 0; }   /* About, the last of the five */
.drawer__link.is-current::after { content: ''; flex: none; width: 28px; height: 2px; background: var(--coral); }
.drawer__cta-item { display: none; }
.drawer__link--cta { border-top: 1px solid var(--rule-ink); border-bottom: 0; }
@media (max-width: 767.98px) {
  .drawer__link { font-size: 22px; }
}
@media (max-width: 359.98px) {
  .drawer__cta-item { display: block; }
}
@media (min-width: 1280px) {
  .drawer,
  .drawer-overlay { display: none !important; }
}

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 88px var(--pad-x) 48px;
  background: var(--ink);
  color: var(--white);
  font-size: 16px;
}
.site-footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.site-footer__brand { display: flex; flex-direction: column; gap: 20px; max-width: 460px; }
/* Same artwork parity as the header logo: a 40px box (36 mobile), artwork at 92.5% of it */
.site-footer__logo { --logo-box: 40px; height: calc(var(--logo-box) * .925); margin: calc(var(--logo-box) * .0375) 0; width: auto; align-self: flex-start; }
.site-footer__tagline { font-size: 19px; line-height: 1.45; }
.site-footer__location { font-size: 16px; line-height: 1.5; color: var(--footer-grey); }
.site-footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;           /* every item right-aligned, including the booking link */
  list-style: none;
  font-size: 17px;
  font-weight: 500;
}
.site-footer__nav a { display: block; color: var(--white); }
.site-footer__book {
  border-bottom: 1.5px solid var(--coral);
  padding-bottom: 2px;
  transition: border-color .15s, color .15s;
}
.site-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--footer-grey);
  border-top: 1px solid var(--rule-ink);
  padding-top: 24px;
}
.site-footer__meta { display: flex; gap: 24px; }
.site-footer__legal-links { display: flex; gap: 24px; list-style: none; }
.site-footer__legal-link { color: var(--footer-grey); }
.site-footer__legal-link.is-current { color: var(--white); }

@media (max-width: 1279.98px) {
  .site-footer { gap: 44px; padding-top: 72px; }
}
@media (max-width: 1023.98px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__nav ul { align-items: flex-start; }
  .site-footer__legal { flex-wrap: wrap; gap: 24px; }
  .site-footer__meta { flex-wrap: wrap; }
}
@media (max-width: 767.98px) {
  .site-footer { gap: 40px; padding: 56px 20px 32px; }
  .site-footer__brand { gap: 16px; }
  .site-footer__logo { --logo-box: 36px; }
  .site-footer__tagline { font-size: 18px; }
  .site-footer__location { font-size: 15px; }
  .site-footer__legal { flex-direction: column; align-items: stretch; gap: 12px; font-size: 13px; padding-top: 20px; }
  .site-footer__meta { flex-direction: column; gap: 6px; }
  .site-footer__legal-links { gap: 20px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero--white { background: var(--white); color: var(--ink); }
.hero--blue { background: var(--blue); color: var(--white); }
.hero__inner {
  position: relative;
  max-width: 1160px;
  margin-left: max(0px, calc((100% - 1440px) / 2));
  padding: var(--hero-pt) var(--gutter) var(--hero-pb);
}
.hero--home { --hero-pt: var(--hero-home-pt); --hero-pb: var(--hero-home-pb); }
.hero--product { --hero-pt: var(--hero-product-pt); --hero-pb: var(--hero-product-pb); }
.hero--session { --hero-pt: var(--hero-session-pt); --hero-pb: var(--hero-session-pb); }
.hero--about { --hero-pt: var(--hero-about-pt); --hero-pb: var(--hero-about-pb); }
.hero--contact { --hero-pt: var(--hero-contact-pt); --hero-pb: var(--hero-contact-pb); }
.hero--404 { --hero-pt: var(--hero-404-pt); --hero-pb: var(--hero-404-pb); }

/* Watermark: the brand mark SVG, placed to reproduce the design's 1000×1000 PNG box at left 770, top -60.
   The SVG viewBox (162 76 1675 1847) is that PNG's 2000px canvas cropped to the mark, hence the ratios.
   Desktop only, at 1280 and above. Never on mobile or tablet, never on the 404. */
.watermark { display: none; }
@media (min-width: 1280px) {
  .watermark {
    --wm-box: 1000px;
    display: block;
    position: absolute;
    left: calc(max(0px, (100% - 1440px) / 2) + 770px + var(--wm-box) * .081);
    top: calc(-60px + var(--wm-box) * .038);
    width: calc(var(--wm-box) * .8375);
    height: calc(var(--wm-box) * .9235);
    max-width: none;
    opacity: .07;
    pointer-events: none;
  }
  .hero--blue .watermark { opacity: .1; filter: brightness(0) invert(1); }
}

.hero-lead { margin-top: 44px; font-size: var(--fs-hero-lead); line-height: 1.4; max-width: 780px; }
.hero-p { margin-top: 24px; font-size: var(--fs-body); line-height: 1.5; max-width: 740px; }
.hero-p--third { margin-top: 16px; font-weight: 500; }
.hero-ctas { display: flex; gap: 24px; align-items: center; margin-top: 48px; }
.hero--home .hero-lead { margin-top: 48px; }
.hero--home .hero-ctas { margin-top: 56px; }
.hero-lead--about { max-width: 720px; }
.hero-lead--second { margin-top: 24px; max-width: 740px; font-weight: 600; }
.eyebrow { font-size: 17px; font-weight: 500; letter-spacing: .02em; color: var(--grey); }
.hero--404 .h1 { margin-top: 20px; }
.hero--404 .hero-lead { max-width: 720px; }
.hero--404 .hero-ctas { margin-top: 44px; flex-wrap: wrap; }
.hero--404 .btn { min-height: 52px; display: inline-flex; align-items: center; }

@media (max-width: 1279.98px) {
  .h1 { max-width: none; }
  .hero-lead,
  .hero--home .hero-lead { margin-top: 24px; }
  .hero-ctas,
  .hero--home .hero-ctas,
  .hero--404 .hero-ctas { margin-top: 32px; }
}
@media (max-width: 767.98px) {
  .h1--home { line-height: 1; }
  .hero-ctas,
  .hero--home .hero-ctas,
  .hero--404 .hero-ctas { flex-direction: column; gap: 16px; align-items: center; margin-top: 26px; }
  .hero--home .hero-lead { margin-top: 28px; }
  .hero--home .hero-p { margin-top: 16px; }
  .hero--product .hero-lead { margin-top: 20px; }
  .hero--product .hero-p { margin-top: 14px; }
  .hero--session .hero-lead { margin-top: 24px; }
  .hero--session .hero-p { margin-top: 16px; }
  .hero--session .hero-p--third { margin-top: 12px; }
  .hero--about .hero-lead { margin-top: 24px; }
  .hero--about .hero-lead--second { margin-top: 16px; }
  .eyebrow { font-size: 15px; }
  .hero--404 .h1 { margin-top: 16px; }
  .hero--404 .hero-lead { margin-top: 20px; }
}

/* ---------- Cards ---------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--ink);
  border-top: 6px solid var(--blue);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow-card);        /* never removed: it carries the 3:1 boundary on light-blue edges */
  transition: border-color .15s, transform .15s;
}
.card--edge-light { border-top-color: var(--light-blue); }

/* The seven padding variants (Decisions.md §5) */
.card--route { padding: 36px 36px 40px; }   /* route and product cards; callouts share the value */
.card--offer { padding: 32px 28px 28px; }   /* Home offers, 404 routes */
.card--price { padding: 28px 32px 30px; }   /* The Outside Read */
.card--form  { padding: 36px 36px 28px; }   /* Contact */
@media (max-width: 767.98px) {
  .card { box-shadow: var(--shadow-card-m); }
  .card--m-offer   { padding: 24px 22px 26px; }   /* 404, The AI Fit, The Outside Read */
  .card--m-24      { padding: 24px 22px 24px; }   /* The Sense Check, Advisory */
  .card--m-compact { padding: 24px 22px 22px; }   /* Home */
  .card--form      { padding: 20px 16px 12px; box-shadow: 0 2px 6px rgba(22, 32, 46, .06), 0 12px 32px rgba(22, 32, 46, .14); }
}

/* Title block: card-title size, then the 40×3 coral rule */
.title-block { display: flex; flex-direction: column; gap: 14px; }
.title-block::after { content: ''; display: block; width: 40px; height: 3px; background: var(--coral); }
.card-title { font-size: var(--fs-card-title); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; }
.card-kind { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--blue); }
.card-kind--18 { font-size: 18px; }
@media (max-width: 767.98px) {
  .title-block { gap: 12px; }
  .card-kind,
  .card-kind--18 { font-size: 16px; }
}

/* ---------- Bullet list: real <ul>, square light-blue marker as presentation ---------- */
.bullets { display: flex; flex-direction: column; list-style: none; }
.bullets > li { display: flex; gap: 14px; align-items: flex-start; }
.bullets > li::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  background: var(--light-blue);
}
/* 20px lists: item gap 14, marker offset 9 (Decisions.md §5) */
.bullets--20 { gap: 14px; font-size: var(--fs-body); line-height: 1.5; color: var(--grey); }
.bullets--about { line-height: 1.55; color: var(--white); }
.bullets--about > li { text-wrap: pretty; }
.bullets--18 { gap: 12px; font-size: 18px; line-height: 1.5; color: var(--grey); }
.bullets--detail { gap: 10px; font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--white); }
@media (max-width: 767.98px) {
  .bullets > li { gap: 12px; }
  .bullets > li::before { margin-top: 8px; }
  .bullets--20,
  .bullets--18 { gap: 12px; font-size: 16px; }
  .bullets--about { gap: 12px; font-size: 17px; }
  .bullets--detail { font-size: 16px; }
}

/* ---------- Step row: the one place a real class drives a pseudo-element ---------- */
.step-row {
  position: relative;
  border-top: 1.5px solid var(--rule-light);
  padding-top: 28px;
  transition: border-top-color .15s;
}
.step-row::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1.5px;
  height: 4px;
  background: var(--light-blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .15s;
}
@media (max-width: 767.98px) {
  .step-row { padding-top: 20px; }
}

/* ---------- Accordion ---------- */
.acc { display: flex; flex-direction: column; border-top: 1.5px solid var(--rule-light); }
.acc__item { border-bottom: 1.5px solid var(--rule-light); }
.acc--on-blue,
.acc--on-blue .acc__item { border-color: var(--rule-blue); }
.acc__heading { margin: 0; font: inherit; letter-spacing: normal; }
.acc__trigger {
  all: unset;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  font-family: inherit;
  color: var(--ink);
}
.acc__title { font-size: var(--fs-acc); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.acc__icon { position: relative; flex: none; width: 28px; height: 28px; transition: transform .2s; }
.acc__icon::before,
.acc__icon::after { content: ''; position: absolute; background: var(--blue); }
.acc__icon::before { left: 6px; right: 6px; top: 13px; height: 2px; }
.acc__icon::after { top: 6px; bottom: 6px; left: 13px; width: 2px; }
.acc__trigger[aria-expanded="true"] .acc__icon { transform: rotate(45deg); }
.acc--on-blue .acc__trigger { color: var(--white); }
.acc--on-blue .acc__icon::before,
.acc--on-blue .acc__icon::after { background: var(--white); }
.acc__panel { display: flex; flex-direction: column; gap: 16px; padding: 0 0 28px; }

/* Detail panels (blue) */
.detail-p { font-size: 18px; line-height: 1.55; color: var(--white); }
.detail-tail { font-size: 18px; line-height: 1.55; color: var(--pale-blue); }
/* FAQ panels (cream) */
.acc--faq .acc__panel { gap: 14px; padding: 0 52px 28px 0; }
.faq-a { font-size: 17px; line-height: 1.55; color: var(--grey); }
/* Legal panels: tighter rhythm, a deliberate exception (Decisions.md §8) */
.acc--legal .acc__trigger { padding: 18px 0; }
.acc--legal .acc__title { font-size: 20px; }
.acc--legal .acc__panel { gap: 14px; padding: 0 52px 26px 0; }

.expand-all {
  all: unset;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1.5px solid var(--coral);
  padding-bottom: 2px;
}
.expand-all--legal { font-size: 15px; }

@media (max-width: 767.98px) {
  .acc__trigger { gap: 16px; }
  .acc--detail .acc__trigger { padding: 18px 0; }
  .acc--detail .acc__title { font-size: 19px; }
  .acc--detail .acc__panel { gap: 14px; padding: 0 0 24px; }
  .detail-p,
  .detail-tail { font-size: 16px; }
  .acc--faq .acc__trigger { padding: 16px 0; }
  .acc--faq .acc__title { font-size: 18px; line-height: 1.3; }
  .acc--faq .acc__panel { gap: 12px; padding: 0 0 24px; }
  .faq-a { font-size: 16px; }
  .acc--legal .acc__trigger { padding: 16px 0; min-height: 52px; gap: 24px; }
  .acc--legal .acc__title { font-size: 18px; line-height: 1.3; }
  .acc--legal .acc__panel { gap: 14px; padding: 0 0 22px; }
  .expand-all { font-size: 16px; min-height: 44px; display: flex; align-items: center; align-self: flex-end; }
  .expand-all--legal { font-size: 15px; padding: 14px 0 2px; align-items: flex-end; }
}

/* ---------- CTA rows ---------- */
.cta-row__q { font-size: var(--fs-cta-q); line-height: 1.3; letter-spacing: -.015em; }
.cta-row .btn { flex: none; }

/* Full-width CTA row: foot of The AI Fit detail, The Sense Check cream band, About's last band */
.cta-row--full {
  grid-column: 1 / -1;
  margin-top: 20px;
  border-top: 1.5px solid var(--rule-light);
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-row--on-blue { border-top-color: var(--rule-blue); }
.cta-row--on-blue .cta-row__q { color: var(--white); }
.cta-row__text { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.cta-row__sub { font-size: 18px; line-height: 1.55; color: var(--grey); }

/* From 768 up the question (or text block) flexes, so the button keeps its place on the right at 768 and 1024
   instead of wrapping under a long line. At 1440 this renders exactly as the design's row. */
@media (min-width: 768px) {
  .cta-row--full > .cta-row__q,
  .cta-row--full > .cta-row__text { flex: 1 1 320px; }
}

/* FAQ closing row: right-aligned, no rule (Decisions.md §8) */
.cta-row--faq { display: flex; justify-content: flex-end; align-items: center; gap: 32px; padding-top: 8px; }

@media (max-width: 767.98px) {
  .cta-row__q { line-height: 1.35; }
  .cta-row--full {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 12px;
    padding-top: 28px;          /* the rule stays on every page, The AI Fit included (Decisions.md §8) */
  }
  .cta-row__text { gap: 16px; }
  .cta-row__sub { font-size: 17px; }
  .cta-row--faq { flex-direction: column; align-items: stretch; gap: 18px; }
}

/* ---------- Callout (tinted, rounded, coral rule) and signpost (tinted, no rule) ---------- */
.callout { display: flex; flex-direction: column; gap: 24px; padding: 36px 36px 40px; border-radius: 8px; margin-top: -34px; }
.callout--panel { background: var(--panel-blue); }
.callout--white { background: var(--white); }
.callout__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
/* Brand mark in a 72px box, as designed; the SVG is sized to its artwork (ratios as for .watermark). */
.callout__mark {
  --mark-box: 72px;
  flex: none;
  width: calc(var(--mark-box) * .8375);
  height: calc(var(--mark-box) * .9235);
  margin: calc(-8px + var(--mark-box) * .038) calc(var(--mark-box) * .0815) calc(var(--mark-box) * .0385) calc(var(--mark-box) * .081);
}
.callout__p { font-size: 18px; line-height: 1.55; color: var(--grey); }
@media (max-width: 1023.98px) {
  .callout { margin-top: 0; }
}
@media (max-width: 767.98px) {
  .callout { gap: 16px; padding: 24px 22px 26px; margin-top: 12px; }
  .callout__head { gap: 16px; }
  .callout__mark { --mark-box: 56px; margin-top: calc(-6px + var(--mark-box) * .038); }
  .callout__p { font-size: 16px; }
}

.signpost {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 40px;
  padding: 28px 32px;
  border-radius: 8px;
  background: var(--panel-blue);
}
.signpost__title { font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--blue); }
.signpost__p { font-size: 18px; line-height: 1.55; color: var(--grey); }
.signpost__link { align-self: flex-start; margin-top: 6px; }
@media (max-width: 767.98px) {
  .signpost { padding: 22px; margin-top: 0; }
  .signpost__title { font-size: 19px; }
  .signpost__p { font-size: 16px; }
  .signpost__link { font-size: 16px; margin-top: 4px; }
}

/* ==========================================================================
   Page sections
   ========================================================================== */

/* ---------- Home ---------- */
.home-decision .split__body { max-width: 720px; }
.home-ways { display: flex; flex-direction: column; gap: var(--head-gap); }
.offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.offer-card { gap: 18px; min-height: 480px; }
.offer-card__blurb { flex: 1; font-size: 17px; line-height: 1.5; color: var(--grey); }
.offer-card__price { display: flex; flex-direction: column; gap: 4px; border-top: 1.5px solid var(--rule-light); padding-top: 18px; }
/* Fixed 20px label slot on every card, empty on two. Never remove it: it holds the row's alignment. */
.offer-card__label {
  display: block;
  height: 20px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 20px;
  color: var(--grey);
}
.offer-card__amount { display: block; font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.offer-card__cta {
  align-self: flex-end;             /* right-aligned on every card (Suz, 19 September 2026) */
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1.5px solid var(--coral);
  padding-bottom: 2px;
}
.home-closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: start;
}
/* nowrap dropped from the two cream headings so they wrap between 1024 and 1279 (Decisions.md §6.7) */
.home-closing__btn { align-self: flex-end; margin-top: 12px; }

@media (max-width: 1279.98px) {
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-card { min-height: 0; }
}
@media (max-width: 1023.98px) {
  .home-closing { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 767.98px) {
  .home-decision { display: flex; flex-direction: column; gap: 28px; }
  .home-decision .split__body { gap: 20px; }
  .home-ways { gap: 28px; }
  .offer-grid { display: flex; flex-direction: column; gap: 16px; }
  .offer-card { gap: 14px; }
  .offer-card__blurb { font-size: 16px; }
  .offer-card__price { gap: 2px; padding-top: 14px; }
  .offer-card__label { margin-bottom: 0; }
  .offer-card__cta { font-size: 16px; margin-top: 4px; }
  .home-closing { display: flex; flex-direction: column; gap: 48px; }
  .home-closing__block { gap: 20px; }
  .home-closing__block h2 { margin-bottom: 8px; }
  .home-closing__btn { align-self: stretch; margin-top: 8px; }
}

/* ---------- The AI Fit ---------- */
@media (min-width: 1280px) {
  .ai-signs { padding-top: 88px; padding-bottom: 88px; }
}
@media (max-width: 767.98px) {
  .ai-signs { display: flex; flex-direction: column; gap: 20px; }
}

.routes { display: flex; flex-direction: column; gap: 48px; }
.routes__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: repeat(6, auto);
  gap: 22px 24px;
  align-items: start;
}
/* The two route cards share row tracks through subgrid, so their six parts align across the pair. */
.route-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; }
.route-card__intro { font-size: 20px; line-height: 1.5; color: var(--ink); }
.route-card__list { border-top: 1.5px solid var(--rule-light); padding-top: 20px; }
.route-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 24px;
  align-self: start;
}
.route-card__meta--tight { gap: 20px; }
.route-card__price { position: relative; display: flex; align-items: baseline; gap: 10px; }
.route-card__label {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 4px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--blue);
}
.route-card__amount { font-size: var(--fs-price); font-weight: 500; letter-spacing: -.02em; }
.route-card__gst { font-size: 17px; color: var(--grey); }
.route-card__btn { align-self: start; justify-self: end; }
.route-card__note { display: none; font-size: 16px; line-height: 1.5; color: var(--grey); }
.routes__note { margin-top: 4px; padding-left: 36px; font-size: 16px; line-height: 1.5; color: var(--grey); }

@media (max-width: 1023.98px) {
  .routes { gap: var(--head-gap); }
  .routes__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 24px; }
  .route-card { display: flex; flex-direction: column; gap: 22px; grid-row: auto; }
  .route-card__btn { align-self: flex-end; }
  .route-card__note { display: block; }
  .routes__note { display: none; }
}
@media (max-width: 767.98px) {
  .routes { gap: 24px; }
  .route-card { gap: 16px; }
  .route-card__intro { font-size: 17px; }
  .route-card__list { padding-top: 18px; }
  /* Mobile order: price, founding note, button, then the text link, centred under the button */
  .route-card__meta { display: contents; }
  .route-card__price {
    order: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 8px;
    row-gap: 2px;
    border-top: 1.5px solid var(--rule-light);
    padding-top: 16px;
  }
  .route-card__label { position: static; flex-basis: 100%; margin: 0; text-align: right; }
  .route-card__gst { font-size: 15px; }
  .route-card__note { order: 2; font-size: 15px; }
  .route-card__btn { order: 3; align-self: stretch; }
  .route-card__link { order: 4; align-self: center; }
}

.built-on { display: flex; flex-direction: column; gap: 40px; }
.built-on__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.built-on__item { display: flex; flex-direction: column; gap: 16px; }
.built-on__title { font-size: var(--fs-col-title); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.built-on__body { font-size: 18px; line-height: 1.55; color: var(--grey); }
@media (max-width: 1279.98px) {
  .built-on__grid { gap: 40px; }
}
@media (max-width: 1023.98px) {
  .built-on__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 767.98px) {
  .built-on { gap: 24px; }
  .built-on__grid { gap: 32px; }
  .built-on__item { gap: 14px; padding-top: 22px; }
  .built-on__body { font-size: 17px; }
}

/* Detail section, The AI Fit and The Outside Read: 5/7 with accordions */
.detail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--col-gap);
  align-items: start;
}
.detail__main { display: flex; flex-direction: column; gap: 28px; }
.detail__side { display: flex; flex-direction: column; }
.detail__note { font-size: 19px; line-height: 1.55; color: var(--pale-blue); }
@media (max-width: 1023.98px) {
  .detail { display: flex; flex-direction: column; gap: 28px; }
  .detail__main,
  .detail__side { display: contents; }
  /* The Outside Read stacks accordions, then the price card, then the signpost (the mobile file's order) */
  .detail--or .acc { order: 4; }
  .detail--or .price-card { order: 5; }
  .detail--or .signpost { order: 6; margin-top: 12px; }
}
@media (max-width: 767.98px) {
  .detail--ai { gap: 24px; }
  .detail--or { gap: 22px; }
  .detail__note { font-size: 17px; }
  .detail--or .signpost { margin-top: 0; }
}

.steps-section { display: flex; flex-direction: column; gap: var(--head-gap); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; list-style: none; }
.step { display: flex; flex-direction: column; gap: 18px; }
/* Number, title and body share rows across the steps, so a title that wraps
   moves every body in that row down together and the row stays aligned. */
@media (min-width: 768px) {
  .step { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
}
.step__n { display: block; font-size: var(--fs-step-n); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--blue); }
.step__title { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.step__body { font-size: 19px; line-height: 1.5; color: var(--grey); }
@media (max-width: 1023.98px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
}
@media (max-width: 767.98px) {
  .steps { display: flex; flex-direction: column; gap: 28px; }
  .step { gap: 12px; }
  .step__title { font-size: 21px; }
  .step__body { font-size: 17px; }
}

.faq { display: flex; flex-direction: column; gap: var(--head-gap); }
.faq__head { display: flex; justify-content: space-between; align-items: baseline; gap: 40px; }
.faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
@media (max-width: 1023.98px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); }   /* one column below 1024 (Decisions.md §7) */
}
@media (max-width: 767.98px) {
  .faq { gap: 24px; }
  .faq__head { flex-direction: column; align-items: stretch; gap: 24px; }
  .faq__grid { margin-top: -8px; }
}

/* ---------- The Outside Read ---------- */
@media (max-width: 767.98px) {
  .or-fits { display: flex; flex-direction: column; gap: 20px; }
  .or-fits .split__body { gap: 20px; }
}
.price-card { gap: 14px; margin-top: 12px; }
.price-card__p { font-size: 16px; line-height: 1.5; color: var(--grey); }
.price-card__foot { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; margin-top: 6px; }
.price-card__price { font-size: var(--fs-price); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.price-card__gst { font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--grey); }
@media (max-width: 767.98px) {
  .price-card__p { font-size: 15px; }
  .price-card__foot { align-items: stretch; margin-top: 0; }
  .price-card__price { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; }
  .price-card__gst { font-size: 15px; }
}

/* ---------- The Sense Check and Advisory: card overhanging the hero ---------- */
.overhang {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  column-gap: var(--col-gap);
  align-items: start;
}
.overhang__text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 28px; max-width: 720px; }
.overhang__card {
  grid-column: 2;
  grid-row: 1;
  /* exactly the hero's bottom padding plus this section's top padding (Decisions.md §6.8) */
  margin-top: calc(-1 * (var(--hero-session-pb) + var(--sy)));
}
.product-card { gap: 24px; }
.product-card__price { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; }
.product-card__amount { font-size: var(--fs-price); font-weight: 500; letter-spacing: -.02em; }
.product-card__gst { font-size: 17px; color: var(--grey); }
.product-card__p { font-size: 16px; line-height: 1.5; color: var(--grey); }
.product-card__scope { display: flex; justify-content: flex-end; font-size: 17px; font-weight: 500; text-align: right; color: var(--ink); }
.sc-when { padding-bottom: var(--sy-last); }

@media (max-width: 1023.98px) {
  .overhang { display: flex; flex-direction: column; gap: 40px; }
  .overhang__card { order: -1; margin-top: 0; width: 100%; max-width: 520px; align-self: center; }
}
@media (max-width: 767.98px) {
  .overhang { gap: 28px; }
  .overhang__card { max-width: none; }
  .overhang__text { gap: 18px; padding-top: 12px; }
  .product-card { gap: 18px; }
  .product-card__gst { font-size: 15px; }
  .product-card__p { font-size: 15px; }
  .product-card__scope { font-size: 16px; }
  .sc-when { padding-bottom: var(--sy); }
}

@media (max-width: 767.98px) {
  .sc-after { display: flex; flex-direction: column; gap: 24px; }
  .sc-after .split__body { gap: 18px; }
  .sc-after .cta-row--full { margin-top: 6px; }
}

.ca-band { display: flex; justify-content: center; padding: 40px var(--pad-x); }
.ca-band__text { max-width: 900px; font-size: 20px; line-height: 1.4; letter-spacing: -.01em; text-align: center; color: var(--grey); }
.ca-band__text strong { font-weight: 600; color: var(--ink); }
@media (max-width: 767.98px) {
  .ca-band { padding: 36px 20px; }
  .ca-band__text { font-size: 17px; line-height: 1.45; }
}

/* ---------- About ---------- */
.about-exp {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "text card" "text loc";
  column-gap: var(--col-gap);
  row-gap: 32px;
  align-items: start;
}
.about-exp__text { grid-area: text; max-width: 720px; }
.about-exp__h2 { max-width: 680px; }
.portrait-card {
  grid-area: card;
  justify-self: center;
  width: 100%;
  max-width: 290px;
  margin-top: var(--portrait-overhang);
}
.portrait-card__img { height: 255px; overflow: hidden; background: var(--ink); }
.portrait-card__img picture { height: 100%; }
.portrait-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.portrait-card__body { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px; }
.title-block--portrait { gap: 10px; }
.portrait-card__name { font-size: 23px; font-weight: 500; letter-spacing: -.02em; line-height: 1.05; }
.portrait-card__role-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.portrait-card__role { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--blue); }
.portrait-card__links { display: flex; margin-right: -10px; }
.icon-link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--blue); transition: color .15s; }
.about-exp__location {
  grid-area: loc;
  justify-self: center;
  width: 100%;
  max-width: 290px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}
.about-exp__loc { font-size: 18px; line-height: 1.55; color: var(--white); }
.about-exp__loc--strong { font-weight: 500; }

.about-band { display: flex; flex-direction: column; gap: 48px; }
.about-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--col-gap);
  align-items: start;
}
.about-band__text { max-width: 720px; }

@media (max-width: 1023.98px) {
  .about-exp { grid-template-columns: minmax(0, 1fr) 290px; row-gap: 24px; }   /* the 768 portrait-card exception */
  .about-band { gap: var(--head-gap); }
  .about-band__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .about-exp { display: flex; flex-direction: column; gap: 32px; padding-top: 0; }
  .portrait-card { order: -1; align-self: center; width: 260px; max-width: none; box-shadow: 0 2px 6px rgba(22, 32, 46, .06), 0 12px 32px rgba(22, 32, 46, .18); }
  .portrait-card__img { height: 250px; }
  .about-exp__text { gap: 18px; }
  .about-exp__location {
    width: auto;
    max-width: none;
    gap: 8px;
    padding: 24px 0 0;
    border-top: 1px solid var(--rule-blue);
  }
  .about-exp__loc { font-size: 17px; }
  .about-band { gap: 24px; }
  .about-band__grid { display: flex; flex-direction: column; gap: 20px; }
  .about-band__text { gap: 20px; }
}

/* ---------- Contact ---------- */
.hero--contact .hero__inner { max-width: 1440px; }
.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: start;
}
.contact-hero__intro { display: flex; flex-direction: column; gap: 28px; }
.contact-hero__p { font-size: 22px; line-height: 1.45; color: var(--ink); }
.contact-hero__p--first { margin-top: 16px; }
.contact-hero__form { display: flex; flex-direction: column; align-self: start; }
.form-card__frame { display: block; width: 100%; height: 340px; border: 0; }
/* Quiet email fallback: outside the card, right-aligned, body grey, no coral. Load-bearing: keep it. */
.quiet-line { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--grey); text-align: right; }
.quiet-link {
  color: var(--grey);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--quiet-underline);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.contact-band { display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; padding: 40px var(--pad-x); }
.contact-band__q { font-size: 22px; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.contact-band__nav ul { display: flex; gap: 40px; align-items: center; list-style: none; font-size: 17px; font-weight: 500; }

@media (max-width: 1279.98px) {
  .contact-hero { gap: var(--col-gap); }
}
@media (max-width: 1023.98px) {
  .contact-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767.98px) {
  .contact-hero { display: flex; flex-direction: column; gap: 20px; }
  .contact-hero__intro { gap: 20px; }
  .contact-hero__p { font-size: 19px; }
  .contact-hero__p--first { margin-top: 8px; }
  .contact-hero__form { align-self: stretch; }
  .form-card { margin-top: 12px; }
  .form-card__frame { height: 560px; }
  .quiet-line { margin-top: 36px; }
  .contact-band { flex-direction: column; align-items: stretch; gap: 18px; padding: 36px 20px 40px; }
  .contact-band__q { font-size: 20px; }
  .contact-band__nav ul { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---------- Privacy and Terms ---------- */
.legal {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: start;
  padding: 96px var(--pad-x) 112px;
  background: var(--white);
}
.legal__aside { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 20px; }
.legal__contact { margin-top: 8px; max-width: 380px; font-size: 16px; line-height: 1.5; color: var(--grey); }
.legal__body { display: flex; flex-direction: column; max-width: 760px; }
.legal__intro { display: flex; flex-direction: column; gap: 14px; padding-bottom: 28px; }
.legal__tools { display: flex; justify-content: flex-end; padding-bottom: 6px; }
.legal__updated { margin-top: 24px; font-size: 15px; line-height: 1.5; color: var(--grey); }
.legal-p { font-size: 16px; line-height: 1.6; color: var(--grey); }
.legal-term { color: var(--ink); font-weight: 600; }
.legal-h3 { margin-top: 8px; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--blue); }
/* Default disc bullets on the legal pages; the square marker is for product pages only (Decisions.md §5) */
.legal-list { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; list-style: disc; font-size: 16px; line-height: 1.6; color: var(--grey); }
/* Inline mailto on the legal pages: blue text and a blue underline, so the cue carries its own contrast */
.inline-mail { color: var(--blue); border-bottom: 1.5px solid var(--blue); }

@media (max-width: 1279.98px) {
  .legal { gap: var(--col-gap); padding-top: 80px; padding-bottom: 96px; }
}
@media (max-width: 1023.98px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 72px; }
  .legal__aside { position: static; }
}
@media (max-width: 767.98px) {
  .legal { display: flex; flex-direction: column; gap: 28px; padding: 40px 20px 64px; }
  .legal__aside { gap: 12px; }
  .legal__contact { margin-top: 0; font-size: 15px; }
}

/* ---------- 404 ---------- */
.nf-routes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.nf-card { gap: 14px; }
.nf-card__p { font-size: 17px; line-height: 1.5; color: var(--grey); }
@media (max-width: 767.98px) {
  .nf-routes { display: flex; flex-direction: column; gap: 24px; }
  .nf-routes__grid { display: flex; flex-direction: column; gap: 20px; }
  .nf-card__p { font-size: 16px; }
}

/* ==========================================================================
   Hover: 1024 and up, with a real pointer only (Design Spec.md §8.6)
   ========================================================================== */
@media (min-width: 1024px) and (hover: hover) {
  :where(a:hover) { color: var(--ink); }
  .btn:hover { background: var(--ink); color: var(--white); }
  .tlink:hover { color: var(--blue); border-bottom-width: 3px; padding-bottom: .5px; }
  .tlink--hero:hover { padding-bottom: 2.5px; }
  .tlink--on-dark:hover { color: var(--light-blue); }
  .site-nav__link:not([aria-current]):hover { color: var(--blue); }
  .site-nav__cta:hover,
  .site-header--contact .site-nav__cta:hover { background: var(--ink); color: var(--white); }
  .site-footer__nav .site-footer__link:hover { color: var(--light-blue); }
  .site-footer__nav .site-footer__book:hover { color: var(--light-blue); border-bottom-width: 3px; padding-bottom: 0; }
  .site-footer__legal-link:hover { color: var(--light-blue); }

  /* Cards that lift: Home offers, 404 routes, The AI Fit route cards */
  .offer-card:hover,
  .nf-card:hover,
  .route-card:hover { border-top-color: var(--coral); transform: translateY(-4px); }
  /* Overhanging and price cards: coral edge only, no lift (Decisions.md §5) */
  .product-card:hover,
  .price-card:hover,
  .portrait-card:hover { border-top-color: var(--coral); }

  .step-row:hover { border-top-color: var(--light-blue); }
  .step-row:hover::before { transform: scaleY(1) !important; }

  .acc__trigger:hover { color: var(--blue); }
  .acc--on-blue .acc__trigger:hover { color: var(--light-blue); }
  .expand-all:hover { color: var(--blue); }

  .icon-link:hover { color: var(--coral); }
  .quiet-link:hover { color: var(--blue); text-decoration-color: var(--blue); }
  .inline-mail:hover { color: var(--ink); }
}

/* ---------- Reduced motion: end states kept, only the movement goes (Accessibility Spec.md §7) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}