/* The Institute of Cognitive Connections
   Design system. Generated by frontend-design-engine, Phase 4.
   DNA hash: ebdc92c1b9d3
   Typography editorial-petrona-warm / Layout mixed-width-sections-varied
   Colour earth-organic-natural (distribution inverted per anti-default guard) */

:root {
  /* ── Colour. Every pair verified against WCAG in session. ───────────── */
  --paper:          #f7f8f4;   /* true off-white, faint green cast, not cream */
  --paper-raised:   #ffffff;
  --ink:            #1b2620;   /* on paper 14.64:1 */
  --ink-muted:      #414b45;   /* on paper 8.50:1, on tint 8.09:1 */
  --pine:           #24493a;   /* committed surface. paper on pine 9.42:1 */
  --pine-deep:      #163026;   /* paper on pine-deep 13.26:1 */
  --pine-tint:      #f0f3ec;   /* quiet band on paper */

  /* Accent has three grades because one hex cannot clear AAA on every
     surface. The grade is chosen by surface and by text size, never by taste.
       terracotta      GRAPHICS ONLY. Never set as a text colour.
       terracotta-deep all accent text on paper and tint. 8.41 / 8.01
       clay            large text and graphics on pine only. 4.60
       clay-light      small text on pine and pine-deep. 7.26 / 10.21 */
  --terracotta:     #b4552f;
  --terracotta-deep:#7d3216;
  --terracotta-press:#682a11;
  --clay:           #e0a184;
  --clay-light:     #f4d5c4;
  --mist:           #d2ded2;   /* muted body text on pine. 7.24 / 10.18 */
  --mist-bright:    #d7e0d6;   /* lede and links on pine. 7.43 / 10.45 */
  --rule:           #d3d8cd;
  --rule-dark:      #3d5f4e;

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-display: 'Petrona', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --measure: 68ch;
  --measure-tight: 34ch;

  /* ── Spacing. very-generous, but measured. ──────────────────────────────
     Adjacent sections each contribute a full pad, so the value here lands
     doubled between them. At the old 9.5rem that produced 304px of dead air
     at 1440, which reads as disconnected rather than calm. 6.5rem gives 208px
     between sections: still airy, still the slow rhythm the brief asked for,
     without the page falling apart. */
  --gap-section: clamp(3rem, 6.4vw, 5.5rem);
  --gap-block:   clamp(1.75rem, 3.6vw, 3rem);
  --pad-x:       clamp(1.25rem, 5vw, 4rem);

  /* ── Widths. mixed-width-sections-varied. ───────────────────────────── */
  --w-read:  42rem;
  --w-mid:   64rem;
  --w-wide:  80rem;

  /* ── Motion. cinematic-slow, on the strong easing floor. ────────────── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-control: 180ms;   /* buttons and nav stay fast regardless of profile */
  --t-slow:    900ms;   /* expressive, entrance only */
}

/* ══ Base ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: 0.001em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--clay); color: var(--pine-deep); }

:focus-visible {
  outline: 3px solid var(--terracotta-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pine-deep); color: var(--paper);
  padding: 0.9rem 1.4rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ══ Type scale. Petrona display, Inter body. ══════════════════════════ */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;   /* floor is -0.04em; stays clear of cramped */
  margin: 0;
  text-wrap: balance;
}

/* oversized-heading mutation lives here */
/* Capped so the headline holds at two lines inside the 60% hero column.
   Above ~5.2rem a seven word sentence wraps to three, which trips the
   overstuffed-hero ceiling. */
.h-hero  { font-size: clamp(2.75rem, 5.6vw, 5.2rem); line-height: 1.04; font-weight: 500; }
.h-page  { font-size: clamp(2.6rem, 6vw, 4.75rem); line-height: 1.06; font-weight: 500; }
.h-sect  { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.12; }
.h-sub   { font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.2; }
.h-card  { font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.25; font-weight: 600; }

.lede {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 0;
}

p { margin: 0 0 1.25em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.prose > * + * { margin-top: 1.35em; }
.prose p { max-width: var(--measure); }
.prose strong { font-weight: 600; color: var(--ink); }

a { color: inherit; }

.link {
  color: var(--terracotta-deep);
  text-decoration: none;
  font-weight: 600;
  background-image: linear-gradient(var(--terracotta-deep), var(--terracotta-deep));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size var(--t-control) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { background-size: 100% 2px; }
}

.quiet { color: var(--ink-muted); }

/* Small caps label. Used sparingly, never as a per-section eyebrow. */
.label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  margin: 0;
}
.on-pine .label, .band .label, .band-deep .label { color: var(--clay-light); }

/* ══ Layout. Width encodes content type. ═══════════════════════════════ */

.wrap      { width: 100%; margin-inline: auto; padding-inline: var(--pad-x); }
.w-read    { max-width: calc(var(--w-read)  + var(--pad-x) * 2); }
.w-mid     { max-width: calc(var(--w-mid)   + var(--pad-x) * 2); }
.w-wide    { max-width: calc(var(--w-wide)  + var(--pad-x) * 2); }

.section   { padding-block: var(--gap-section); }
.section-s { padding-block: calc(var(--gap-section) * 0.6); }

/* The first section on a page opens tighter. A full section pad under an
   already 79px sticky header pushes the h1 most of a screen down for no
   reason. The homepage is unaffected: its hero is nested in the pin wrapper,
   so it is not a direct section child. */
main > section:first-child { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }

/* Two adjacent sections stack both their paddings, which put 182px between a
   page head and the photograph under it. The second one yields. */
main > section[data-section-type="hero"] + section[data-section-type="visual-break"],
main > section[data-section-type="hero"] + section[data-widen] { padding-top: 0; }

/* And the page head itself yields when a photograph follows it directly. */
main > section[data-section-type="hero"]:has(+ section[data-section-type="visual-break"]),
main > section[data-section-type="hero"]:has(+ section[data-widen]) {
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}

/* The connective rule opens a page head; it does not need a full block of air
   between itself and the headline it introduces. */
main > section:first-child .conn { margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem); }

/* Committed colour. Pine carries roughly a third of the page. */
.band {
  background: var(--pine);
  color: var(--paper);
  position: relative;
  isolation: isolate;
}
.band-deep { background: var(--pine-deep); color: var(--paper); }
.band-tint { background: var(--pine-tint); color: var(--ink); }

/* paper-organic texture, low opacity, pine bands only */
.band::before,
.band-deep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 18% 22%, #ffffff 0.6px, transparent 0.7px),
    radial-gradient(circle at 62% 68%, #ffffff 0.5px, transparent 0.6px),
    radial-gradient(circle at 84% 34%, #ffffff 0.7px, transparent 0.8px);
  background-size: 47px 47px, 61px 61px, 83px 83px;
  pointer-events: none;
}

/* Dark surfaces are .band, .band-deep, .nav (mobile overlay) and .ftr. Keep all four on this
   list: the footer is a dark surface that is not a .band, and leaving it off
   is what silently dropped near-black text onto pine. */
.band .lede, .band-deep .lede, .nav .lede, .ftr .lede { color: var(--mist-bright); }
.band .quiet, .band-deep .quiet, .nav .quiet, .ftr .quiet { color: var(--mist); }
.band a.link, .band-deep a.link {
  color: var(--clay-light);
  background-image: linear-gradient(var(--clay-light), var(--clay-light));
}

/* ══ The connective rule. Signature motif. ═════════════════════════════
   A hairline that travels and terminates in a filled node. This is the
   brand's Connections idea made structural. It replaces every generic <hr>
   and every per-section eyebrow. */

.conn {
  display: flex;
  align-items: center;
  gap: 0;
  /* Introduces the heading below it, so it sits closer than a content block
     gap. At a full --gap-block it was adding 56px on top of two section pads. */
  margin: 0 0 clamp(1.35rem, 2.6vw, 2.25rem);
  --conn-col: var(--terracotta);
}
.on-pine .conn, .band .conn, .band-deep .conn { --conn-col: var(--clay); }

.conn::before {
  content: "";
  height: 1px;
  width: clamp(3rem, 9vw, 8rem);
  background: var(--conn-col);
  flex: 0 0 auto;
  transform-origin: left center;
  transition: transform var(--t-slow) var(--ease-out);
}
.conn::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--conn-col);
  flex: 0 0 auto;
  transition: transform 420ms var(--ease-out) 620ms;
}
.is-in .conn::before { transform: scaleX(1); }
.is-in .conn::after  { transform: scale(1); }

/* Vertical variant, used to link stacked pairs */
.conn-v {
  width: 1px;
  background: var(--rule);
  align-self: stretch;
  position: relative;
  transform-origin: top center;
  transition: transform var(--t-slow) var(--ease-out);
}
.is-in .conn-v { transform: scaleY(1); }
.conn-v::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* ══ Cards. one-corner-accent: bottom-right rounded, three sharp. ══════ */

.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 0 0 28px 0;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  position: relative;
  transition: transform 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card-lift:hover { transform: translateY(-4px); border-color: var(--terracotta); }
}
.band .card, .band-deep .card {
  /* Recessed, not lifted. A white overlay raises the background enough to
     drop muted text under 7:1 on pine; darkening keeps every pair AAA. */
  background: rgba(0,0,0,0.16);
  border-color: var(--rule-dark);
  color: var(--paper);
}

/* The pair. Mirrored corners face each other so the two read as a joint.
   This is the Connections idea in the component layer. */
.pair-a { border-radius: 0 0 28px 0; }
.pair-b { border-radius: 0 0 0 28px; }

/* asymmetric-offset mutation: paired blocks sit at unequal offsets */
@media (min-width: 900px) {
  .offset-down { margin-top: 4.5rem; }
  .offset-up   { margin-top: -2rem; }
  /* Staircase for the three entry points. Breaks the single-row-of-equal-cards
     reflex without pretending there are anything other than three of them. */
  .stair-1 { margin-top: 2.75rem; }
  .stair-2 { margin-top: 5.5rem; }
}

/* ══ The age axis. ════════════════════════════════════════════════════════
   The three entry points are not three parallel products, they are three
   points on one continuum, so they sit on a shared line rather than in
   staggered cards. The connective rule threads them, which is the same motif
   used everywhere else on the site, doing real work here. */

.axis {
  --axis-gap: clamp(1.75rem, 3.2vw, 2.75rem);
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--axis-gap);
}
.axis-item { position: relative; display: flex; flex-direction: column; }

.axis-img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 0 0 28px 0; background: var(--pine-tint);
}
.axis-item:nth-child(even) .axis-img { border-radius: 0 0 0 28px; }

.axis-marker { position: relative; height: 26px; margin-top: 1.5rem; }
.axis-node {
  position: absolute; left: 0; top: 50%;
  width: 11px; height: 11px; margin-top: -5.5px;
  border-radius: 50%;
  background: var(--terracotta);
  z-index: 2;
}
.axis-age {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terracotta-deep);
  margin: 0 0 0.7rem;
}
.axis-item h3 { margin-bottom: 0.75rem; }
.axis-item p { color: var(--ink-muted); margin-bottom: 1.2rem; }
.axis-item .link { margin-top: auto; align-self: flex-start; }

/* One column on small screens. The node stays as the accent; the connecting
   line is a desktop affordance, because stacked full-width photographs give a
   vertical rule nothing meaningful to connect. */
@media (min-width: 1000px) {
  .axis { grid-template-columns: repeat(3, 1fr); }
  /* The rule sits in the marker row and overshoots into the grid gap so the
     three segments read as one continuous axis rather than three stubs. */
  .axis-marker::before {
    content: ""; position: absolute;
    left: 5px; right: calc(-1 * var(--axis-gap)); top: 50%;
    height: 1px; background: var(--rule);
  }
  .axis-item:last-child .axis-marker::before { right: 0; }
}

/* The certification ladder. A genuine ordered sequence, which is the only
   case where numbering is voice rather than reflex. */
.ladder .step { padding-left: 4.75rem; }
.ladder .step h3 { margin-bottom: 0.55rem; }
.ladder .step .row-v { max-width: 60ch; }

/* ══ Buttons. asymmetric-rounded, morph slowed to read as calm. ════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.95rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: 24px 4px 24px 4px;
  cursor: pointer;
  transition: border-radius 500ms var(--ease-in-out),
              background-color var(--t-control) var(--ease-out),
              color var(--t-control) var(--ease-out),
              transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-radius: 4px 24px 4px 24px; }
}

.btn-primary { background: var(--terracotta-deep); color: #ffffff; }
.btn-primary:hover { background: var(--terracotta-press); }

.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

.band .btn-line, .band-deep .btn-line { color: var(--paper); border-color: var(--clay); }
.band .btn-line:hover, .band-deep .btn-line:hover { background: var(--clay); color: var(--pine-deep); }

/* ══ Header. One row, grouped dropdowns, one standout action. ═════════════
   The utility row is gone. Everything lives in the primary nav, grouped under
   Care and Practitioners, which are still the two doors, just not a separate
   bar. Same markup serves the desktop dropdown and the mobile overlay. */

.hdr { position: sticky; top: 0; z-index: 60; }

.hdr-main {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hdr-main .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 78px;
}

.hdr-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }

/* ── The one standout action. Deliberately the only element on the page with
   a filled terracotta pill and a travelling arrow, so it never reads as
   "another button". ── */
.cta {
  display: none;
  align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  background: var(--terracotta-deep); color: #ffffff;
  padding: 0.8rem 1.35rem;
  border: 0;
  border-radius: 26px 5px 26px 5px;
  transition: background-color var(--t-control) var(--ease-out),
              border-radius 500ms var(--ease-in-out),
              transform 160ms var(--ease-out);
}
.cta svg { transition: transform 260ms var(--ease-out); }
.cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--terracotta-press); border-radius: 5px 26px 5px 26px; }
  .cta:hover svg { transform: translateX(3px); }
}
@media (min-width: 560px) { .cta { display: inline-flex; } }

.hdr-burger {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: none; border: 1.5px solid var(--ink); color: var(--ink);
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  padding: 0.65rem 1rem; min-height: 44px;
  border-radius: 16px 3px 16px 3px;
  cursor: pointer;
  transition: background-color var(--t-control) var(--ease-out), color var(--t-control) var(--ease-out);
}
.hdr-burger:hover { background: var(--ink); color: var(--paper); }

/* ══ Nav. Overlay on small screens, inline row with dropdowns on large. ══ */

.nav {
  position: fixed; top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  background: var(--pine-deep);
  color: var(--paper);
  padding: 1.5rem var(--pad-x);
  padding-top: max(1.5rem, env(safe-area-inset-top));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
.nav.is-open { display: flex; }

.nav-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1.5px solid var(--rule-dark); color: var(--paper);
  border-radius: 14px 3px 14px 3px;
  cursor: pointer; font-size: 1.25rem;
}
.nav-close:hover { background: rgba(255,255,255,0.08); }

.nav-top { display: flex; align-items: center; min-height: 48px; margin-bottom: 1.5rem; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }

.nav-link, .nav-btn {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 500;
  text-align: left;
  text-decoration: none; color: var(--paper);
  background: none; border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  padding: 0.7rem 0;
  cursor: pointer;
}
.nav-link:hover, .nav-btn:hover { color: var(--clay-light); }
.nav-btn svg { margin-left: auto; transition: transform 260ms var(--ease-out); }
.nav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.sub { list-style: none; margin: 0; padding: 0.4rem 0 1rem; display: none; }
.nav-btn[aria-expanded="true"] + .sub { display: block; }
.sub a {
  display: block;
  font-family: var(--font-body); font-size: 1rem; font-weight: 500;
  text-decoration: none; color: var(--mist-bright);
  padding: 0.55rem 0 0.55rem 1.1rem;
}
.sub a:hover { color: var(--clay-light); }
.sub-note { display: block; font-size: 0.8125rem; color: var(--mist); margin-top: 0.15rem; }

/* Column headings inside the menu. Visible on mobile where the panel stacks. */
.sub-col-head {
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay-light);
  margin: 1.1rem 0 0.4rem; padding-left: 1.1rem;
}
.sub-conds a { font-size: 0.9375rem; }

/* The action lives in the header from 560px up. Below that the header has no
   room for it, so it moves to the foot of the overlay instead of vanishing. */
.nav-cta-mobile { display: inline-flex; align-self: flex-start; margin-top: 1.75rem; }
@media (min-width: 560px) { .nav-cta-mobile { display: none; } }

@media (min-width: 1080px) {
  .hdr-burger, .nav-close, .nav-top { display: none; }

  .nav {
    position: static;
    width: auto; height: auto;
    display: block;
    overflow: visible;
    background: none;
    color: inherit;
    padding: 0;
    margin-left: 2rem;
  }
  .nav-list { display: flex; align-items: center; gap: 0.35rem; }

  .nav-link, .nav-btn {
    width: auto;
    font-family: var(--font-body);
    font-size: 0.9375rem; font-weight: 500;
    color: var(--ink);
    border-bottom: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 12px 2px 12px 2px;
    white-space: nowrap;
    transition: background-color var(--t-control) var(--ease-out), color var(--t-control) var(--ease-out);
  }
  .nav-link:hover, .nav-btn:hover,
  .nav-btn[aria-expanded="true"] { background: var(--pine-tint); color: var(--terracotta-deep); }
  .nav-link[aria-current="page"] { color: var(--terracotta-deep); background: var(--pine-tint); }
  .nav-btn svg { margin-left: 0.15rem; }

  /* The panel sits 8px below the button for breathing room, but that gap is
     not hoverable, so travelling into the menu fired mouseleave and shut it.
     This bridges the gap with an invisible extension of the panel's own hit
     area. Without it the submenu is unreachable by mouse. */
  .sub::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -10px; height: 10px;
  }
  .sub {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 20rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 0 0 20px 0;
    box-shadow: 0 14px 34px rgba(27,38,32,0.13);
    padding: 0.65rem;
    z-index: 70;
  }
  /* Two column panel. The conditions are what people actually search for, so
     they sit in the menu rather than one level down inside a page.

     Layout only here. `display` belongs exclusively to the open-state rule
     below: putting `display: grid` on a bare .sub-wide overrides
     `.sub { display: none }` and pins the panel permanently open. */
  .sub-wide {
    grid-template-columns: 17rem 1fr;
    gap: 0.5rem 1.25rem;
    min-width: 45rem; padding: 1rem;
  }
  .nav-btn[aria-expanded="true"] + .sub-wide { display: grid; }
  .sub-wide .sub-col-head {
    grid-column: 1 / -1;
    display: none;
  }
  .sub-conds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.1rem 0.5rem; align-content: start; }
  .sub-sep { border-left: 1px solid var(--rule); padding-left: 1.25rem; }
  .sub a {
    color: var(--ink);
    font-size: 0.9375rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px 2px 10px 2px;
  }
  .sub a:hover { background: var(--pine-tint); color: var(--terracotta-deep); }
  .sub-note { color: var(--ink-muted); }
}

/* ── Wordmark. Interlocking double C carried forward from the old mark. ── */
.mark { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.mark svg { flex: 0 0 auto; }
/* Two opposed arcs that overlap: the interlocking double C from the original
   mark, redrawn. The overlap is the point, so the strokes never fully close. */
.mark-a { stroke: var(--pine); }
.mark-b { stroke: var(--terracotta); }
.band .mark-a, .band-deep .mark-a, .nav .mark-a, .ftr .mark-a { stroke: var(--paper); }
.band .mark-b, .band-deep .mark-b, .nav .mark-b, .ftr .mark-b { stroke: var(--clay); }
.mark-txt { display: flex; flex-direction: column; line-height: 1; }
.mark-txt b {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.mark-txt span {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 4px;
}
.band .mark-txt span, .band-deep .mark-txt span,
.nav .mark-txt span, .ftr .mark-txt span { color: var(--mist); }

/* ══ Entrance. cinematic-slow, opacity and transform only. ════════════ */

/* Gated on the .js flag set by an inline script in <head>. Without it, a
   failed or blocked script would leave every below-fold section at opacity 0,
   which is a blank page, not a subtle degradation. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Same reasoning for the connective rule: it draws itself only when scripted. */
.js .conn::before { transform: scaleX(0); }
.js .conn::after  { transform: scale(0); }
.js .conn-v       { transform: scaleY(0); }
[data-reveal-delay="1"] { transition-delay: 120ms; }
[data-reveal-delay="2"] { transition-delay: 240ms; }
[data-reveal-delay="3"] { transition-delay: 360ms; }

/* ══ Hero. split-screen-asymmetric, inverted so type leads. ════════════ */

/* ══ Signature transitions. ══════════════════════════════════════════════
   One shared motion grammar, four mechanisms. Each page composes them over
   its own artwork, so every page has a distinct moment without the site
   drifting into four different design languages.
     draw      an SVG path writes itself
     converge  two halves move together and join
     settle    an agitated line calms to a steady one
     sequence  items arrive in order along an axis
   Everything here animates transform, opacity or stroke-dashoffset only. */

[data-draw] {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
}
.js .is-in [data-draw] {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1700ms var(--ease-out) var(--draw-delay, 0ms);
}
.js [data-draw-dot] { opacity: 0; transition: opacity 420ms var(--ease-out) var(--draw-delay, 0ms); }
.js .is-in [data-draw-dot] { opacity: 1; }

/* converge: two halves close the gap and the joint lands between them */
.js [data-converge="left"]  { transform: translateX(-3.5rem); opacity: 0; }
.js [data-converge="right"] { transform: translateX(3.5rem);  opacity: 0; }
.js [data-converge] { transition: transform 1200ms var(--ease-out), opacity 900ms var(--ease-out); }
.js .is-in [data-converge] { transform: none; opacity: 1; }

/* settle: the restless trace fades out as the regulated one fades in */
.js [data-settle="before"] { opacity: 1; transition: opacity 1400ms var(--ease-in-out); }
.js [data-settle="after"]  { opacity: 0; transition: opacity 1400ms var(--ease-in-out) 300ms; }
.js .is-in [data-settle="before"] { opacity: 0; }
.js .is-in [data-settle="after"]  { opacity: 1; }

/* sequence: children arrive in order rather than all at once */
.js [data-seq] > * { opacity: 0; transform: translateY(16px); }
.js .is-in [data-seq] > * {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.js .is-in [data-seq] > *:nth-child(1) { transition-delay: 0ms; }
.js .is-in [data-seq] > *:nth-child(2) { transition-delay: 110ms; }
.js .is-in [data-seq] > *:nth-child(3) { transition-delay: 220ms; }
.js .is-in [data-seq] > *:nth-child(4) { transition-delay: 330ms; }
.js .is-in [data-seq] > *:nth-child(5) { transition-delay: 440ms; }
.js .is-in [data-seq] > *:nth-child(6) { transition-delay: 550ms; }
.js .is-in [data-seq] > *:nth-child(7) { transition-delay: 660ms; }
.js .is-in [data-seq] > *:nth-child(8) { transition-delay: 770ms; }

/* ══ The motto, as the ladder ════════════════════════════════════════════
   Learn it, do it, teach it is the client's own motto, and it maps exactly
   onto the three tiers. So the hero sets it as three beats that step to the
   right, which reads as ascent, and hangs each credential off its own word.
   The heading is deliberately three lines: it is three discrete beats, not
   one long sentence wrapping. */

.motto { display: grid; gap: clamp(0.7rem, 1.6vw, 1.35rem); margin: 0; }
.motto-line { display: grid; gap: 0.35rem 1.75rem; align-items: baseline; }
@media (min-width: 860px) { .motto-line { grid-template-columns: auto 1fr; } }

.motto-word {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7.4vw, 5.75rem);
  line-height: 0.98; font-weight: 500; letter-spacing: -0.022em;
  white-space: nowrap;
}
.motto-tier {
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--terracotta-deep);
  line-height: 1.5;
}
.motto-tier b { display: block; font-weight: 700; }
.motto-tier em {
  display: block; font-style: normal; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none;
  font-size: 0.9375rem; color: var(--ink-muted); margin-top: 0.15rem;
}

/* The step to the right is the climb. */
.m-2 { padding-left: clamp(1.25rem, 7vw, 8rem); }
.m-3 { padding-left: clamp(2.5rem, 14vw, 16rem); }

/* The room sits as a wide band under the motto. A landscape scene squeezed
   into a narrow side column crops to nothing useful. */
.motto-fig { margin: 0; }
.motto-fig img {
  /* 16:9 rather than 21:9. The wider slice crops to the plants and the blurred
     upper wall and loses the table, which is the whole subject. */
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 72%;
  border-radius: 0 0 36px 0; background: var(--pine-tint);
}
@media (max-width: 780px) { .motto-fig img { aspect-ratio: 4 / 3; border-radius: 0 0 24px 0; } }
.motto-fig figcaption { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 0.8rem; }

/* ══ Routes ══════════════════════════════════════════════════════════════
   The services hero is the page's actual job: help someone work out which of
   the three doors is theirs. So the hero is the selector rather than a title
   block sitting above one. Age band leads, because age is what decides it. */

.routes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.route { position: relative; }
.route > a {
  position: relative;
  display: grid; gap: 0.4rem 2rem; align-items: center;
  padding: clamp(1.5rem, 2.8vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  isolation: isolate;
}
@media (min-width: 780px) {
  .route > a { grid-template-columns: 15rem 1fr auto; }
}

/* A wash that wipes in from the left on hover. scaleX only, no width. */
.route > a::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: calc(-1 * var(--pad-x)); right: calc(-1 * var(--pad-x));
  background: var(--pine-tint);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .route > a:hover::before { transform: scaleX(1); }
}

.route-age {
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--terracotta-deep);
}
.route-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 500; line-height: 1.12; letter-spacing: -0.018em;
  transition: color var(--t-control) var(--ease-out);
}
.route-note { display: block; font-size: 0.9375rem; color: var(--ink-muted); margin-top: 0.35rem; max-width: 46ch; }
.route-go {
  display: none;
  color: var(--terracotta-deep);
  transition: transform 320ms var(--ease-out);
}
@media (min-width: 780px) { .route-go { display: block; } }
@media (hover: hover) and (pointer: fine) {
  .route > a:hover .route-name { color: var(--terracotta-deep); }
  .route > a:hover .route-go { transform: translateX(6px); }
}
.route > a:focus-visible { outline-offset: -3px; }

/* ══ Said out loud ═══════════════════════════════════════════════════════
   Replaces a pill cloud of diagnosis names. People arrive with a description,
   not a label, so the description leads and the system it points at answers
   it. Sits directly after the Magnificent 7 so the seven systems are shown
   working rather than asserted: one complaint per system, in order. */

.says { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.say {
  display: grid; gap: 0.45rem 2.5rem;
  padding-block: clamp(1.1rem, 2.1vw, 1.6rem);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
@media (min-width: 820px) { .say { grid-template-columns: 1fr 17rem; } }

.say-q {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.32; font-weight: 500; margin: 0; max-width: 34ch;
}
.say-a { margin: 0; font-size: 0.875rem; color: var(--ink-muted); }
.say-sys {
  display: block;
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terracotta-deep); margin-bottom: 0.2rem;
}
.say-phys .say-sys { color: var(--pine); }

.says-foot { margin-top: 2.25rem; font-size: 0.9375rem; color: var(--ink-muted); max-width: 72ch; }
.says-foot a { color: var(--terracotta-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.says-foot a:hover { border-bottom-color: var(--terracotta-deep); }

/* ══ Store opening ═══════════════════════════════════════════════════════
   The one place on the site that is allowed to look like a shelf. Three
   photographs at deliberately different sizes and vertical offsets, with the
   headline threading between them, so the eye moves through the pictures
   rather than past a row of equal tiles. */

.shelf { position: relative; }
.shelf-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.shelf-fig { margin: 0; overflow: hidden; background: var(--pine-tint); }
.shelf-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-a { border-radius: 0 0 32px 0; aspect-ratio: 5 / 4; }
.shelf-b { border-radius: 0 0 0 28px; aspect-ratio: 1 / 1; }
.shelf-c { border-radius: 0 0 28px 0; aspect-ratio: 4 / 3; }

.shelf-say {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.18; font-weight: 500; letter-spacing: -0.018em;
  margin: 0; max-width: 18ch;
}
.shelf-note { color: var(--ink-muted); margin-top: 1rem; max-width: 34ch; }

@media (min-width: 900px) {
  .shelf-grid {
    grid-template-columns: 1.25fr 0.95fr 1fr;
    align-items: start;
  }
  /* The offsets are the point. Equal tops would read as a product grid. */
  .shelf-col-2 { margin-top: 5.5rem; }
  .shelf-col-3 { margin-top: 2rem; }
  .shelf-say { margin-top: 2.25rem; }
}

/* ══ The Magnificent 7, as a spectrum rather than a diagram ══════════════
   Replaces a generic node graph. The seven systems are not a symmetrical
   web, they are four cognitive and three physiological, so the layout says
   that: one continuous axis, cognitive labels above it, physiological below,
   split at the real boundary. Real HTML text, so it is selectable,
   translatable and contrast-checkable, which SVG labels are not. */

.mag7 { position: relative; }

.mag7-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }

.m7 { position: relative; display: grid; grid-template-columns: 13px 1fr; gap: 0.9rem; align-items: start; }
.m7-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--terracotta); margin-top: 0.5rem;
  transform: scale(0);
  transition: transform 420ms var(--ease-out);
}
.is-in .m7-dot { transform: scale(1); }
.m7-phys .m7-dot { background: var(--pine); }
.m7 b { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
.m7 .role { display: block; font-size: 0.875rem; color: var(--ink-muted); margin-top: 0.15rem; }

/* Vertical connector on small screens */
.m7::before {
  content: ""; position: absolute; left: 5px; top: 1.1rem; bottom: -1.5rem;
  width: 1px; background: var(--rule);
}
.m7:last-child::before { display: none; }

.mag7-key {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-top: 2rem; font-size: 0.8125rem; color: var(--ink-muted);
}
.mag7-key span { display: inline-flex; align-items: center; gap: 0.5rem; }
.mag7-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mag7-key .k-cog { background: var(--terracotta); }
.mag7-key .k-phy { background: var(--pine); }

@media (min-width: 960px) {
  .mag7 { padding-block: 1rem; }
  /* One axis, seven stations. Labels alternate across it.
     The rule belongs to the track, not to the section: anchoring it to the
     section put it below the dots, because the section is taller than the
     track once the key row is included. */
  .mag7-line { display: none; }
  .mag7-track { position: relative; }
  .mag7-track::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: var(--rule);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 1600ms var(--ease-out);
  }
  .is-in .mag7-track::before { transform: scaleX(1); }

  .mag7-track { grid-template-columns: repeat(7, 1fr); gap: 0; align-items: center; }
  .m7 {
    grid-template-columns: none;
    grid-template-rows: 1fr 13px 1fr;
    gap: 0; text-align: center; min-height: 15rem;
    padding-inline: 0.4rem;
  }
  .m7::before { display: none; }
  .m7-dot { grid-row: 2; margin: 0 auto; }
  .m7-txt { grid-row: 1; align-self: end; padding-bottom: 1rem; }
  .m7-down .m7-txt { grid-row: 3; align-self: start; padding: 1rem 0 0; }
  .m7 b { font-size: 1rem; }
  .m7 .role { font-size: 0.8125rem; }
}

/* ── widen: the image opens outward as it scrolls ──────────────────────
   The figure is laid out full width and clipped inward, then the clip
   releases with scroll. Nothing animates width or margin, only clip-path,
   so it stays on the compositor. Without JS it renders at its widest. */
.widen-media {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.js .widen-media {
  clip-path: inset(0 var(--wx, 24%) 0 var(--wx, 24%) round 0 0 var(--wr, 28px) 0);
  will-change: clip-path;
}
.widen-media img { width: 100%; height: auto; display: block; }
.widen-cap { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .js .widen-media { clip-path: inset(0 4% 0 4% round 0 0 28px 0); }
}

.fig-svg { width: 100%; height: auto; display: block; }

/* ── Components introduced by the subpages ──────────────────────────── */

/* The pair, joined. About and Contact. */
.pairjoin { display: grid; gap: clamp(1.5rem, 4vw, 3rem); position: relative; align-items: start; }
@media (min-width: 820px) { .pairjoin { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.pairjoin-node {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--terracotta); justify-self: center; flex: 0 0 auto;
  position: relative;
}
.pairjoin-node::before, .pairjoin-node::after {
  content: ""; position: absolute; top: 50%; width: clamp(1rem, 3vw, 2.5rem); height: 1px;
  background: var(--rule);
}
.pairjoin-node::before { right: 100%; }
.pairjoin-node::after  { left: 100%; }
@media (max-width: 819px) { .pairjoin-node { display: none; } }
/* The two source portraits have different aspect ratios, which reads as one
   partner being more important than the other. Normalise them. */
.pairjoin .fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.pairjoin figcaption { max-width: 42ch; }

.team-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 28%; border-radius: 0 0 20px 0; margin-bottom: 1.2rem; }
.card.pair-b .team-img { border-radius: 0 0 0 20px; }

.rolelabel {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracotta-deep);
  margin: 0.5rem 0 0.9rem;
}
.band .rolelabel, .band-deep .rolelabel, .on-pine .rolelabel { color: var(--clay-light); }

/* Six developmental domains */
.domains { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 760px)  { .domains { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .domains { grid-template-columns: repeat(3, 1fr); } }
.domain { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.domain-n {
  display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  color: var(--terracotta-deep); line-height: 1; margin-bottom: 0.6rem;
}
.domain h3 { margin-bottom: 0.6rem; }

/* Tick lists */
.ticks { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.4rem; margin-bottom: 0.5rem; font-size: 0.95rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta);
}
.band .ticks li::before, .band-deep .ticks li::before, .on-pine .ticks li::before { background: var(--clay); }

/* Intake question list */
.asks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
@media (min-width: 700px) { .asks { grid-template-columns: repeat(2, 1fr); } }
.asks li {
  font-family: var(--font-display); font-size: 1.15rem;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.65rem;
}

/* Conditions */
.condlist { list-style: none; margin: 0; padding: 0; }
.condlist li { border-top: 1px solid var(--rule); padding: 1rem 0; }
.condlist strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.condlist span { display: block; color: var(--ink-muted); font-size: 0.95rem; margin-top: 0.3rem; }
.condlist li:target strong { color: var(--terracotta-deep); }

/* Row tag, used on the Magnificent 7 breakdown */
.row-tag {
  display: inline-block; margin-left: 0.6rem; vertical-align: middle;
  font-family: var(--font-body); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); border: 1px solid var(--rule);
  border-radius: 10px 2px 10px 2px; padding: 0.2rem 0.5rem;
}

/* Speakers */
.speaker { border-top: 1px solid var(--rule); padding: clamp(1.75rem, 3.4vw, 2.75rem) 0; }
.speaker:first-child { border-top: 0; padding-top: 0; }
.speaker p.quiet { max-width: 68ch; }

/* Store bundles */
.bundle {
  background: rgba(0,0,0,0.16); border: 1px solid var(--rule-dark);
  border-radius: 0 0 28px 0; padding: clamp(1.5rem, 2.6vw, 2rem);
  display: flex; flex-direction: column;
}
.bundle:nth-child(even) { border-radius: 0 0 0 28px; }
.bundle .quiet { flex: 1 1 auto; margin: 0.9rem 0 1.4rem; }
.price-cur { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; color: var(--mist); }

/* Both settle traces live in the same SVG at the same coordinates, so they
   stack without any positioning help. */
.settle-stage { position: relative; }
.fig-svg text { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--ink); }
.band .fig-svg text, .band-deep .fig-svg text { fill: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .js [data-draw] { stroke-dashoffset: 0 !important; }
  .js [data-draw-dot],
  .js [data-converge],
  .js [data-seq] > * { opacity: 1 !important; transform: none !important; }
  .js [data-settle="before"] { opacity: 0 !important; }
  .js [data-settle="after"] { opacity: 1 !important; }
}

/* ══ Hero, and the scroll-grow. ══════════════════════════════════════════
   The hero photograph starts as an inset panel and unclips to fill the
   viewport as you scroll the runway, then the next section rides up over it.
   Progressive enhancement: without JS, or under reduced motion, the panel
   simply stays a panel and the runway collapses to nothing. */

.hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem); position: relative; z-index: 2; }

/* The hero is pinned for the length of the runway so the photo panel holds
   still while the image unclips around it. Tracking a moving panel instead
   anchors the growth to one edge and leaves dead space. */
.hero-pin { position: relative; z-index: 2; }
.js .hero-pin.is-active { height: 210vh; }
.js .hero-pin.is-active .hero-pin-inner {
  position: sticky; top: 0;
  min-height: 100vh;
  display: flex; align-items: center;
}
.js .hero-pin.is-active .hero { width: 100%; }

.hero-cover {
  position: fixed; inset: 0; z-index: 1;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  /* Only clip-path and transform animate here. No width, height, or offsets. */
  clip-path: inset(var(--ci-t, 0px) var(--ci-r, 0px) var(--ci-b, 0px) var(--ci-l, 0px) round 0 0 var(--ci-radius, 44px) 0);
  will-change: clip-path;
}
.hero-cover.is-live { visibility: visible; }
.hero-cover img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  transform: scale(var(--ci-scale, 1.04));
  will-change: transform;
}
/* A scrim so the closing caption stays legible over any photograph. */
.hero-cover::after {
  content: ""; position: absolute; inset: 0;
  /* Heavier than it looks like it needs to be. Text over a photograph cannot
     be contrast-checked programmatically, so the scrim carries the guarantee. */
  background: linear-gradient(180deg, rgba(22,48,38,0) 28%, rgba(22,48,38,0.62) 62%, rgba(22,48,38,0.93) 100%);
  opacity: var(--ci-scrim, 0);
}
.hero-cover-line {
  position: absolute;
  left: var(--ci-cap-x, 2rem);
  right: var(--ci-cap-x, 2rem);
  bottom: var(--ci-cap-b, 2.5rem);
  z-index: 2;
  opacity: var(--ci-scrim, 0);
  color: var(--paper);
}
.hero-cover-line .wrap { padding-inline: 0; max-width: none; }

/* Everything after the runway is opaque and rides over the fixed image. */
.js .after-runway { position: relative; z-index: 3; background: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .js .hero-pin.is-active { height: auto; }
  .js .hero-pin.is-active .hero-pin-inner { position: static; min-height: 0; display: block; }
  .hero-cover { display: none; }
}
.hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 60fr 40fr; }
}
.hero-media {
  position: relative;
  border-radius: 0 0 44px 0;
  overflow: hidden;
  background: var(--pine-tint);
  aspect-ratio: 1 / 1;
}
@media (min-width: 940px) { .hero-media { aspect-ratio: 4 / 5; } }
/* Square source in a 4:5 panel, so a centred crop would clip the chair off the
   left edge. Bias the crop left of centre. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 32% center; }

/* The two doors. Given real weight so they read as the fork in the road,
   not as two small tiles floating in a band. */
.doors { padding-block: clamp(3.5rem, 7vw, 6rem); }
.door {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
}
.door .h-sub { max-width: 16ch; }
.door p { margin: 0; }
.door p:last-child { margin-top: auto; padding-top: 0.75rem; }

/* ══ Figures and photography ══════════════════════════════════════════ */

.fig { margin: 0; }
.fig img { width: 100%; border-radius: 0 0 28px 0; background: var(--pine-tint); }
.fig-b img { border-radius: 0 0 0 28px; }
.fig figcaption { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 0.7rem; line-height: 1.5; }
.band .fig figcaption, .band-deep .fig figcaption { color: var(--mist); }

/* Photo stand-in used where the client has not yet supplied a final asset */
.ph {
  display: flex; align-items: flex-end;
  aspect-ratio: 4 / 3;
  background: var(--pine-tint);
  border: 1px solid var(--rule);
  border-radius: 0 0 28px 0;
  padding: 1rem;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink-muted);
}
.ph-b { border-radius: 0 0 0 28px; }
.ph-tall { aspect-ratio: 4 / 5; }
.ph-sq { aspect-ratio: 1 / 1; }
.band .ph, .band-deep .ph {
  background: rgba(0,0,0,0.16); border-color: var(--rule-dark); color: var(--mist);
}

/* ══ Lists and structures ═════════════════════════════════════════════ */

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 720px)  { .g-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .g-3-entry { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .g-3-entry { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .g-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .g-2-wide { grid-template-columns: 1.25fr 1fr; } }

/* Deliberately not three equal columns. Uneven spans carry the pairing idea. */
@media (min-width: 900px) {
  .g-uneven { grid-template-columns: repeat(6, 1fr); }
  .sp-3 { grid-column: span 3; }
  .sp-2 { grid-column: span 2; }
  .sp-4 { grid-column: span 4; }
  .sp-6 { grid-column: span 6; }
}

/* Definition rows. Replaces the PDF's left border stripe callouts. */
.rows { border-top: 1px solid var(--rule); }
.band .rows, .band-deep .rows { border-color: var(--rule-dark); }
.row {
  display: grid;
  gap: 0.5rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.band .row, .band-deep .row { border-color: var(--rule-dark); }
@media (min-width: 820px) { .row { grid-template-columns: 15rem 1fr; } }
.row-k { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.row-v { color: var(--ink-muted); }
.band .row-v, .band-deep .row-v { color: var(--mist); }

/* Numbered sequence. Used ONLY where the order is real. */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step { counter-increment: step; position: relative; padding-left: 4.25rem; margin-bottom: 2.5rem; }
.step:last-child { margin-bottom: 0; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0.1rem;
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 600;
  color: var(--terracotta-deep);
  line-height: 1;
}
.band .step::before, .band-deep .step::before { color: var(--clay); }

/* Tag set for conditions */
.tags { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0; margin: 0; list-style: none; }
.tags a, .tags span {
  display: inline-block;
  font-size: 0.875rem; font-weight: 500;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 14px 3px 14px 3px;
  text-decoration: none; color: var(--ink);
  transition: background-color var(--t-control) var(--ease-out), border-color var(--t-control) var(--ease-out);
}
.tags a:hover { background: var(--pine-tint); border-color: var(--terracotta); }
.band .tags a, .band-deep .tags a, .band .tags span, .band-deep .tags span {
  border-color: var(--rule-dark); color: var(--paper);
}
.band .tags a:hover, .band-deep .tags a:hover { background: rgba(255,255,255,0.1); border-color: var(--clay); }

/* Pull quote */
.pull {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 22ch;
}
.pull-cite {
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: 1.5rem;
}
.band .pull-cite, .band-deep .pull-cite { color: var(--clay-light); }

/* Price */
.price { font-family: var(--font-display); font-size: 1.85rem; font-weight: 600; line-height: 1; }
.price-was { font-size: 0.95rem; font-weight: 400; color: var(--ink-muted); text-decoration: line-through; margin-left: 0.6rem; font-family: var(--font-body); }
.band .price-was, .band-deep .price-was { color: var(--mist); }

/* Forms */
.field { display: block; margin-bottom: 1.5rem; }
.field span { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.45rem; }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--ink); background: var(--paper-raised);
  border: 1.5px solid var(--rule);
  border-radius: 14px 3px 14px 3px;
  padding: 0.85rem 1rem;
  transition: border-color var(--t-control) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--terracotta); }
.field textarea { min-height: 8.5rem; resize: vertical; }
.hint { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 0.4rem; }

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  padding: 1.4rem 2.5rem 1.4rem 0; cursor: pointer; position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 1.15rem;
  font-size: 1.5rem; color: var(--terracotta-deep); font-family: var(--font-body); font-weight: 400;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-a { padding-bottom: 1.6rem; color: var(--ink-muted); }
.faq .faq-a p { max-width: 62ch; }

/* ══ Footer ═══════════════════════════════════════════════════════════ */

.ftr { background: var(--pine-deep); color: var(--paper); padding-block: clamp(3.5rem, 7vw, 5.5rem) 0; }
.ftr-grid { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
@media (min-width: 780px)  { .ftr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ftr-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .ftr-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 0.8fr; } }
.ftr h2 {
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay-light);
  margin: 0 0 1.1rem;
}
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: 0.6rem; }
.ftr li a { font-size: 0.9375rem; color: var(--mist-bright); text-decoration: none; }
.ftr li a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.ftr-base {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule-dark);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem; color: var(--mist);
}

/* ══ Utility ══════════════════════════════════════════════════════════ */

.stack-s > * + * { margin-top: 1rem; }
.stack   > * + * { margin-top: 1.75rem; }
.stack-l > * + * { margin-top: clamp(2rem, 4vw, 3.25rem); }
.cluster { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.mt-block { margin-top: var(--gap-block); }
.center-read { margin-inline: auto; }

/* ══ Reduced motion. Gentler, not zero. ═══════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-parallax], [class*="parallax"] {
    animation: none !important;
    animation-timeline: none !important;
    transform: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .conn::before { transform: scaleX(1); }
  .conn::after  { transform: scale(1); }
  .conn-v { transform: scaleY(1); }
}