/* Seek Consulting. Direction: "Colour chapters" (tasteskill seed 1895030217, tone luxury). Palette kept from the Seek Arete
   family (navy #1D3557, orange #F4A261) with ivory, stone and a deep navy; type chosen for the brand: Cormorant Garamond
   for display, Manrope for text. */
:root {
  --paper: #f2f0eb;
  --stone: #ddd4c4;
  --navy: #1d3557;
  --deep: #0f1e33;
  --orange: #f4a261;
  --ink-navy: #1d3557;
  --ink-deep: #0f1e33;
  --ink-paper: #f2f0eb;
  --soft-navy: #3d5373;      /* secondary text on paper (7.6:1) */
  --soft-paper: #c9d1dc;     /* secondary text on navy (8:1) */
  --edge: clamp(20px, 3vw, 48px);
  --r: 2px;
  /* One type scale: every size on the page comes from here. */
  --s-xs: var(--s-small);
  --s-small: 0.875rem;
  --s-base: 1rem;
  --s-body: 1.125rem;
  --s-h4: 1.25rem;
  --s-h3: var(--s-lead);
  --s-lead: clamp(1.375rem, 1.05rem + 0.9vw, 1.875rem);
  --s-h2s: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  --s-head: clamp(2.5rem, 1.3rem + 3.8vw, 4.75rem);
  --s-display: clamp(4.5rem, 8.4vw, 8.75rem);
  --s-giant: 8vw;
  --s-word: 6.2vw;
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --text: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html { scrollbar-color: var(--soft-navy) var(--paper); }
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--paper); } ::-webkit-scrollbar-thumb { background: var(--soft-navy); border-radius: 10px; border: 2px solid var(--paper); }
body { caret-color: var(--orange); }
body { margin: 0; background: var(--paper); color: var(--ink-navy); font-family: var(--text); font-size: var(--s-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--ink-deep); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.display { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; line-height: 0.95; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 0 var(--edge); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--orange); color: var(--ink-deep);
  font: 600 var(--s-small)/1 var(--text); letter-spacing: 0.01em; text-decoration: none; padding: 16px 22px; border-radius: var(--r);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease); }
.btn:hover { background: #f7b77f; }
.btn:active { transform: scale(0.97); }
.chapter { position: relative; }
.f-paper { background: var(--paper); color: var(--ink-navy); }
.f-stone { background: var(--stone); color: var(--ink-navy); }
.f-navy { background: var(--navy); color: var(--ink-paper); }
.f-deep { background: var(--deep); color: var(--ink-paper); }
.f-orange { background: var(--orange); color: var(--ink-deep); }

/* ---------- Header: takes the ink of the chapter beneath it ---------- */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--edge); color: var(--ink-navy); background: var(--paper); transition: color 0.3s var(--ease), background-color 0.3s var(--ease); }
.site-head.on-dark { color: var(--ink-paper); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--display); font-size: var(--s-h3); font-weight: 600; letter-spacing: -0.01em; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.links { display: flex; align-items: center; gap: 30px; }
.links a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1.5px;
  font-size: var(--s-small); font-weight: 500; padding: 6px 0; transition: text-decoration-color 0.25s var(--ease); }
.links a:hover { text-decoration-color: currentColor; }
.links .btn { color: var(--ink-deep); text-decoration: none; padding: 13px 18px; }
.site-head.on-orange .links .btn { background: var(--navy); color: var(--ink-paper); }
.site-head.on-orange .links .btn:hover { background: var(--deep); }

/* ---------- Hero: headline on the ivory field, the plain words on navy ---------- */
.hero { position: relative; display: grid; grid-template-rows: 58fr 42fr; min-height: 100svh; }
.hero .top { background: var(--paper); display: flex; align-items: flex-end; padding: 120px var(--edge) 40px; }
.hero .hl { font-family: var(--display); font-weight: 500; font-size: var(--s-display); line-height: 0.9; letter-spacing: -0.025em; color: var(--ink-navy); max-width: 15ch; text-wrap: balance; }
.hero .bottom { background: var(--navy); color: var(--ink-paper); display: flex; align-items: flex-start; padding: 44px 0 56px; }
.hero .bottom .grid { width: 100%; row-gap: 28px; }
.hero .sub { grid-column: 1 / 6; font-family: var(--display); font-weight: 500; font-size: var(--s-lead); line-height: 1.3; max-width: 34ch; }
.hero .sub-side { grid-column: 6 / 9; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero .sub-side p { color: var(--soft-paper); font-size: var(--s-body); max-width: 42ch; }
.hero-pic { position: absolute; right: var(--edge); top: 96px; bottom: 0; width: clamp(300px, 27vw, 460px); margin: 0; overflow: hidden; border-radius: var(--r) var(--r) 0 0; background: var(--navy); }
.hero-pic img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 80%; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.more { color: var(--ink-paper); font-size: var(--s-small); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: color 0.2s var(--ease); }
.more:hover { color: var(--orange); }

/* ---------- Stakes: the problem, on deep navy ---------- */
.stakes { display: flex; flex-direction: column; gap: 80px; padding: 150px 0 140px; }
.stakes h2 { grid-column: 1 / 12; font-family: var(--display); font-weight: 500; font-size: var(--s-head); line-height: 0.98; max-width: 20ch; text-wrap: balance; }
.stakes .say { grid-column: 1 / 9; margin-top: 40px; font-family: var(--display); font-weight: 500; font-size: var(--s-lead); line-height: 1.3; color: var(--soft-paper); max-width: 44ch; }
.pains { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.pains li { color: var(--soft-paper); font-size: var(--s-base); line-height: 1.6; max-width: 34ch; }
.pains b { display: block; margin-bottom: 12px; color: var(--ink-paper); font-family: var(--display); font-weight: 500; font-size: var(--s-h3); line-height: 1.15; }

/* ---------- Showcase: the brain on a disc (live) ---------- */
.ask { padding: 150px var(--edge) 130px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 64px; align-items: center; }
.ask.value-only { padding-bottom: 150px; }
.value { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.value h2 { grid-column: 1 / 6; font-family: var(--display); font-weight: 500; font-size: var(--s-head); line-height: 0.95; text-wrap: balance; }
.gains { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 32px; padding-top: 10px; }
.gains li { font-size: var(--s-base); line-height: 1.6; color: var(--soft-navy); }
.gains b { display: block; margin-bottom: 8px; color: var(--ink-navy); font-family: var(--display); font-weight: 500; font-size: var(--s-h3); line-height: 1.15; }
.gains b::before { content: ""; display: inline-block; width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--orange); margin-right: 0.4em; vertical-align: 0.15em; }
.ask-list { grid-column: 1 / 6; align-self: end; display: flex; flex-direction: column; gap: 36px; }
.ask-list h3 { font-size: var(--s-small); font-weight: 600; color: var(--ink-navy); }
.ask-list [role="tablist"] { display: flex; flex-direction: column; }
.ask-list button { all: unset; cursor: pointer; font-family: var(--display); font-weight: 500; font-size: var(--s-h2s); line-height: 1.15;
  color: var(--soft-navy); transition: color 0.25s var(--ease), transform 0.25s var(--ease); }
.ask-list button[aria-selected="true"] { color: var(--ink-navy); }
.ask-list button[aria-selected="true"]::after { content: ""; display: inline-block; width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--orange); margin-left: 0.3em; vertical-align: 0.18em; }
.ask-list button:hover { color: var(--ink-navy); transform: translateX(6px); }
.ask-list button:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.qs { display: flex; flex-wrap: wrap; gap: 8px; }
.qs button { all: unset; cursor: pointer; font-size: var(--s-small); font-weight: 500; padding: 10px 14px; border-radius: var(--r); background: var(--stone); color: var(--ink-navy);
  transition: background-color 0.2s var(--ease); }
.qs button[aria-pressed="true"] { background: var(--navy); color: var(--ink-paper); }
.qs button:hover { background: #cfc4b0; }
.qs button[aria-pressed="true"]:hover { background: var(--navy); }
.qs button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.ask-note { font-size: var(--s-small); color: var(--soft-navy); }
.disc-wrap { grid-column: 6 / 13; position: relative; display: grid; place-items: center; min-height: 64vh; }
.disc { width: min(64vh, 40vw); aspect-ratio: 1; border-radius: 50%; background: var(--orange); transition: background-color 0.3s var(--ease); }
.card { position: absolute; width: min(470px, 86%); background: var(--paper); color: var(--ink-navy); border-radius: 4px; padding: 28px; top: 6%; }
.card[data-ui] { box-shadow: 0 24px 60px rgba(15, 30, 51, 0.18); }
.card .q { font-size: var(--s-small); color: var(--soft-navy); }
.card .a { font-family: var(--display); font-weight: 500; font-size: var(--s-h3); line-height: 1.22; margin-top: 12px; }
.card .src { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.card .src span { font-size: var(--s-xs); background: var(--stone); padding: 6px 10px; border-radius: var(--r); }
.card.swap { animation: swap 0.42s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.disc-fact { position: absolute; right: 0; bottom: 10%; max-width: 22ch; font-size: var(--s-body); text-align: right; }

/* ---------- Features: specimens on colour tiles ---------- */
.build { padding: 140px var(--edge) 140px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.build-head { grid-column: 1 / 4; align-self: start; position: sticky; top: 110px; }
.build-head h2 { font-family: var(--display); font-weight: 500; font-size: var(--s-head); line-height: 0.95; }
.build-head p { margin-top: 24px; max-width: 30ch; font-size: var(--s-body); }
.tiles { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 10px; }
.spec { display: flex; flex-direction: column; gap: 14px; }
.spec .plate { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; }
.spec.wide { grid-column: span 2; }
.spec.wide .plate { aspect-ratio: 8 / 5; }
.spec .plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.spec:hover .plate img { transform: scale(1.04); }
.spec > h3 { font-size: var(--s-h4); font-weight: 600; }
.spec h3 a { text-decoration: none; }
.spec h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.spec > p { font-size: var(--s-base); color: var(--soft-navy); margin-top: -6px; max-width: 40ch; }

/* ---------- How it works: accordion of tinted panels ---------- */
.how { padding: 140px var(--edge) 140px; }
.how-top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.how-top h2 { grid-column: 1 / 6; font-family: var(--display); font-weight: 500; font-size: var(--s-head); line-height: 0.95; }
.how-top p { grid-column: 7 / 12; font-size: var(--s-body); }
.panels { display: flex; height: 520px; margin-top: 64px; border-radius: var(--r); overflow: hidden; }
.panel { position: relative; flex: 0 0 21%; transition: flex-basis 0.45s var(--ease); overflow: hidden; color: var(--ink-paper); cursor: pointer; }
.panel[aria-expanded="true"] { flex-basis: 58%; cursor: default; }
.panel:nth-child(1) { background: #0f1e33; } .panel:nth-child(2) { background: #1d3557; }
.panel:nth-child(3) { background: #36507a; } .panel:nth-child(4) { background: #9fb0c6; color: var(--ink-deep); }
.panel .sliver { position: absolute; left: 22px; bottom: 26px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--s-h4); font-weight: 600; white-space: nowrap; }
.panel .open { position: absolute; top: 0; bottom: 0; left: 0; width: calc((100vw - 2 * var(--edge)) * 0.58); padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0s 0.3s; pointer-events: none; }
.panel[aria-expanded="true"] .open { opacity: 1; visibility: visible; transition: opacity 0.3s 0.18s var(--ease), visibility 0s 0s; pointer-events: auto; }
.panel[aria-expanded="true"] .sliver { opacity: 0; }
.panel .open h3 { font-family: var(--display); font-weight: 500; font-size: var(--s-h2s); line-height: 1; }
.panel .open .txt { display: flex; flex-direction: column; justify-content: space-between; }
.panel .open p { font-size: var(--s-body); max-width: 36ch; }
.panel .open img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.panel button.toggle { all: unset; position: absolute; inset: 0; cursor: pointer; }
.panel button.toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: -6px; }
.panel[aria-expanded="true"] button.toggle { display: none; }

/* ---------- Proof: findings running off the edges ---------- */
.guide { overflow: hidden; }

/* ---------- Guide: empathy and authority on navy ---------- */
.guide-body { padding: 64px var(--edge) 150px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.guide-who { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 44px; }
.guide-who h2 { font-family: var(--display); font-weight: 500; font-size: var(--s-head); line-height: 0.95; text-wrap: balance; }
.guide .story { font-family: var(--display); font-weight: 500; font-size: var(--s-lead); line-height: 1.32; max-width: 40ch; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; max-width: 520px; }
.facts dt { font-size: var(--s-small); color: var(--soft-paper); }
.facts dd { font-size: var(--s-base); font-weight: 600; margin-top: 4px; }
.record-word { font-size: var(--s-small); font-weight: 600; margin-bottom: 14px; }
.records ul { display: grid; gap: 10px; max-width: 420px; font-size: var(--s-base); }
.records li { display: flex; justify-content: space-between; gap: 16px; }
.records li span:last-child { color: var(--soft-paper); }
.research { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 26px; padding-top: 14px; }
.research h3 { font-family: var(--display); font-weight: 500; font-size: var(--s-h3); }
.research ul { display: grid; gap: 22px; font-size: var(--s-base); line-height: 1.6; color: var(--soft-paper); }
.research b { color: var(--ink-paper); font-weight: 600; }
.research a { color: var(--ink-paper); text-underline-offset: 3px; }

/* ---------- Plan call to action ---------- */
.plan-cta { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.plan-cta p { font-size: var(--s-small); color: var(--soft-navy); }
.plan-cta p a { color: var(--ink-navy); font-weight: 600; }

/* ---------- Two ways: failure and success ---------- */
.ways { padding: 150px var(--edge); }
.ways h2 { font-family: var(--display); font-weight: 500; font-size: var(--s-head); line-height: 0.95; }
.ways-cols { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.way { border-radius: var(--r); padding: 48px; display: flex; flex-direction: column; gap: 32px; }
.way.without { background: var(--stone); color: var(--ink-navy); }
.way.with { background: var(--navy); color: var(--ink-paper); }
.way h3 { font-family: var(--display); font-weight: 500; font-size: var(--s-h2s); line-height: 1.05; }
.way ul { display: grid; gap: 18px; font-size: var(--s-body); line-height: 1.5; }
.way li { position: relative; padding-left: 26px; }
.way li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--soft-navy); }
.way.with li::before { background: var(--orange); }
.way.without li { color: var(--soft-navy); }
.way .btn { align-self: flex-start; margin-top: auto; }

/* ---------- FAQ: accordion of filled tiles ---------- */
.faq { padding: 140px var(--edge); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.faq h2 { grid-column: 1 / 5; align-self: start; position: sticky; top: 110px; font-family: var(--display); font-weight: 500; font-size: var(--s-head); line-height: 0.95; }
.faq-list { grid-column: 5 / 13; display: grid; gap: 8px; }
.faq details { background: #182b47; border-radius: var(--r); transition: background-color 0.25s var(--ease); }
.faq details[open] { background: var(--orange); color: var(--ink-deep); }
.faq summary { list-style: none; cursor: pointer; min-height: 72px; padding: 22px 64px 22px 24px; font-size: var(--s-h4); font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 16px; height: 3px; background: currentColor; transition: transform 0.25s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 24px 26px; max-width: 52ch; font-size: var(--s-body); }

/* ---------- Contact: rows in display type ---------- */
.contact { padding: 0; }
.explain { padding: 130px var(--edge) 90px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 32px; }
.explain h2 { grid-column: 1 / 6; font-family: var(--display); font-weight: 500; font-size: var(--s-head); line-height: 0.95; text-wrap: balance; }
.explain p { grid-column: 6 / 13; font-size: var(--s-h4); line-height: 1.6; max-width: 62ch; }
.crow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 150px; padding: 0 var(--edge) 26px; font-family: var(--display);
  font-weight: 500; font-size: var(--s-head); line-height: 1; }
.crow:nth-child(even) { background: #f7b47d; }
.crow a { text-decoration: none; }
.crow a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.crow .go { width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--ink-deep); color: var(--orange); display: inline-grid; place-items: center; flex: none;
  transition: transform 0.25s var(--ease); }
.crow .go:hover { transform: translateX(6px); }
.crow .go svg { width: 45%; height: 45%; }
.crow small { font-family: var(--text); font-size: var(--s-small); font-weight: 500; }

/* ---------- Footer: tiles ---------- */
.site-foot { padding: 10px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; background: var(--deep); }
.ft { border-radius: var(--r); padding: 22px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; background: #182b47; color: var(--ink-paper); }
.ft.statement { grid-column: 1 / 5; } .ft.nav { grid-column: 5 / 8; } .ft.time { grid-column: 8 / 10; } .ft.mail { grid-column: 10 / 13; }
.ft.statement p:first-child { font-family: var(--display); font-size: var(--s-h3); line-height: 1.2; font-weight: 500; }
.ft small, .ft .legal { font-size: var(--s-xs); color: var(--soft-paper); }
.ft ul { display: grid; gap: 8px; } .ft ul a { text-decoration: none; } .ft ul a:hover { text-decoration: underline; }
.ft .clock { font-family: var(--display); font-size: var(--s-h2s); font-weight: 500; }
.ft.mail a { font-size: var(--s-h4); text-decoration: none; } .ft.mail a:hover { text-decoration: underline; }
.ft.word { grid-column: 1 / 9; min-height: 320px; background: var(--paper); color: var(--ink-navy); flex-direction: row; align-items: center; justify-content: center; gap: 0.25em; font-size: var(--s-word); }
.ft.word .mark { width: 0.8em; height: 0.8em; flex: none; }
.ft.word p { font-family: var(--display); font-weight: 500; font-size: 1em; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.ft.invite { grid-column: 9 / 13; min-height: 320px; background: var(--orange); color: var(--ink-deep); text-decoration: none; transition: background-color 0.2s var(--ease); }
.ft.invite:hover { background: #f7b77f; }
.ft.invite p { font-family: var(--display); font-size: var(--s-h3); font-weight: 500; line-height: 1.1; }
.ft.invite svg { align-self: flex-end; width: 56px; height: 56px; transition: transform 0.25s var(--ease); }
.ft.invite:hover svg { transform: translate(6px, -6px); }
.credits { grid-column: 1 / -1; padding: 18px 12px 8px; font-size: var(--s-xs); color: var(--soft-paper); line-height: 1.5; }
.credits a { color: var(--soft-paper); }

/* ---------- Motion ---------- */
.js .reveal > * { opacity: 0.85; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.in > * { opacity: 1; transform: none; }
.js .reveal.in > *:nth-child(2) { transition-delay: 0.08s; } .js .reveal.in > *:nth-child(3) { transition-delay: 0.16s; }
.js .reveal.in > *:nth-child(4) { transition-delay: 0.24s; } .js .reveal.in > *:nth-child(n+5) { transition-delay: 0.32s; }
.hero .hl { animation: rise 1.1s var(--ease) both; }
.hero .sub, .hero .sub-side { animation: fade 1s 0.45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal > * { opacity: 1; transform: none; }
}

/* ---------- Tablet: headings beside their words ---------- */
@media (min-width: 600px) and (max-width: 860px) {
  .build-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; }
  .build-head p { margin-top: 0; max-width: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 860px) {
  .links a:not(.btn) { display: none; }
  .brand { font-size: var(--s-lead); }
  .hero { grid-template-rows: auto auto; }
  .hero .top { min-height: 0; padding: 120px var(--edge) 32px; }
  .hero-pic { position: relative; right: auto; top: auto; bottom: auto; width: auto; height: 82vw; border-radius: 0; }
  .hero-pic img { height: 100%; object-position: 50% 60%; }
  .hero-pic.hero-ui { height: auto; padding: 32px var(--edge) 0; background: var(--navy); }
  .phone { border-radius: 40px 40px 0 0; padding-bottom: 0; } .phone .ui-thread { border-radius: 0; }
  .ui-float { left: var(--edge); bottom: 16px; }
  .ui-plate { padding: 20px; }
  .hero .hl { font-size: 14vw; }
  .hero .bottom { padding: 32px 0 44px; }
  .hero .sub, .hero .sub-side { grid-column: 1 / -1; }
  .hero .hl { max-width: none; }
  .stakes { padding: 100px 0; gap: 48px; }
  .stakes h2, .stakes .say { grid-column: 1 / -1; }
  .stakes .say { margin-top: 24px; }
  .pains { grid-template-columns: 1fr; gap: 32px; }
  .value h2, .gains { grid-column: 1 / -1; }
  .gains { grid-template-columns: 1fr; gap: 26px; margin-top: 32px; }
  .ask { grid-template-columns: 1fr; padding-top: 100px; padding-bottom: 100px; row-gap: 48px; }
  .value { grid-column: 1; grid-template-columns: 1fr; }
  .ask-list, .disc-wrap { grid-column: 1; }
  .disc-wrap { min-height: 0; padding-bottom: 40%; }
  .disc { width: 86vw; }
  .card { position: absolute; top: 12%; width: 86%; padding: 22px; }
  .card .a { font-size: var(--s-h4); }
  .disc-fact { position: static; text-align: left; margin-top: 16px; }
  .build { grid-template-columns: 1fr; padding: 96px var(--edge); row-gap: 40px; }
  .build-head { position: static; grid-column: 1; }
  .tiles { grid-column: 1; grid-template-columns: 1fr; gap: 28px; }
  .spec.wide { grid-column: 1; }
  .spec .plate { aspect-ratio: 4 / 3; }
  .how { padding: 96px var(--edge); }
  .how-top { grid-template-columns: 1fr; row-gap: 18px; }
  .how-top h2, .how-top p { grid-column: 1; }
  .panels { flex-direction: column; height: auto; }
  .panel { flex: none; min-height: 64px; }
  .panel .sliver { writing-mode: horizontal-tb; transform: none; left: 20px; top: 20px; bottom: auto; font-size: var(--s-body); }
  .panel .open { position: relative; width: auto; display: none; grid-template-columns: 1fr; padding: 24px 20px; }
  .panel[aria-expanded="true"] .open { display: grid; }
  .panel .open img { aspect-ratio: 16 / 10; height: auto; }
  .guide-body { grid-template-columns: 1fr; row-gap: 64px; padding: 48px var(--edge) 100px; }
  .guide-who, .research { grid-column: 1; }
  .ways { padding: 100px var(--edge); }
  .ways-cols { grid-template-columns: 1fr; margin-top: 40px; }
  .way { padding: 32px 24px; }
  .explain { grid-template-columns: 1fr; padding: 100px var(--edge) 56px; }
  .explain h2, .explain p { grid-column: 1; }
  .explain p { font-size: var(--s-body); }
  .faq { grid-template-columns: 1fr; padding: 96px var(--edge); row-gap: 32px; }
  .faq h2 { position: static; grid-column: 1; }
  .faq-list { grid-column: 1; }
  .faq summary { font-size: var(--s-body); min-height: 64px; }
  .crow { min-height: 84px; font-size: var(--s-h2s); padding: 16px var(--edge); align-items: center; }
  .crow small { display: none; }
  .site-foot { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
  .ft.word { grid-column: 1 / -1; order: -2; min-height: 160px; font-size: 8.6vw; }
  .ft.invite { grid-column: 1 / -1; order: -1; min-height: 160px; }
  .ft.nav, .ft.mail { grid-column: span 1; } .ft.time, .ft.statement { grid-column: span 1; }
  .ft { padding: 20px; min-height: 180px; }
}

/* ---------- Product pictures: example screens of the brain at work ---------- */
.ui { background: #fff; color: var(--ink-navy); border-radius: 14px; padding: 20px; font-family: var(--text); font-size: var(--s-small); line-height: 1.5;
  box-shadow: 0 18px 44px rgba(15, 30, 51, 0.16); display: flex; flex-direction: column; gap: 12px; text-align: left; }
.ui-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.ui-tag { font-weight: 500; color: var(--soft-navy); background: var(--paper); border-radius: 999px; padding: 2px 10px; }
.ui-input { background: var(--paper); border-radius: 10px; padding: 10px 14px; color: var(--soft-navy); }
.ui-answer, .ui-cap { font-size: var(--s-base); line-height: 1.5; }
.ui-big { font-family: var(--display); font-weight: 500; font-size: var(--s-h3); line-height: 1.1; }
.ui-note { color: var(--soft-navy); }
.ui-facts, .ui-lines, .ui-jobs, .ui-steps { display: grid; gap: 8px; }
.ui-facts li, .ui-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 0; }
.ui-facts li + li, .ui-lines li + li { box-shadow: 0 -1px 0 var(--paper); }
.ui-facts li span:last-child { color: var(--soft-navy); white-space: nowrap; }
.ui-lines li span:last-child { font-weight: 600; white-space: nowrap; }
.ui-jobs li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; background: var(--paper); border-radius: 10px; padding: 10px 14px; }
.ui-jobs b { grid-column: 1; font-weight: 600; } .ui-jobs span { grid-column: 1; color: var(--soft-navy); }
.ui-jobs em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-weight: 600; color: var(--navy); background: #fbe3cf; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.ui-steps li { position: relative; padding-left: 26px; color: var(--soft-navy); }
.ui-steps li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--soft-navy); }
.ui-steps li.done { color: var(--ink-navy); }
.ui-steps li.done::before { background: var(--orange); box-shadow: none; }
.ui-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.ui-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-btn { background: var(--navy); color: var(--ink-paper); border-radius: 8px; padding: 6px 12px; font-weight: 600; }
.ui-btn.alt { background: var(--paper); color: var(--ink-navy); }
.ui-code { align-self: flex-start; font-weight: 600; font-size: var(--s-h4); letter-spacing: 0.08em; background: var(--orange); color: var(--ink-deep); border-radius: 8px; padding: 6px 14px; }
.ui-review b { font-weight: 600; margin-right: 6px; }
.ui-thread { display: flex; flex-direction: column; gap: 10px; }
.ui-q { align-self: flex-end; max-width: 86%; background: var(--navy); color: var(--ink-paper); border-radius: 14px 14px 4px 14px; padding: 9px 13px; }
.ui-a { align-self: flex-start; max-width: 92%; background: var(--paper); border-radius: 14px 14px 14px 4px; padding: 10px 13px; display: flex; flex-direction: column; gap: 8px; }
.ui-src { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-src span { background: #fff; border-radius: 999px; padding: 2px 10px; color: var(--soft-navy); }

/* plates that hold a screen instead of a photograph */
.ui-plate { display: grid; place-items: center; padding: clamp(18px, 3vw, 36px); }
.ui-plate .ui { width: 100%; max-width: 420px; }
.p-navy { background: var(--navy); } .p-paper { background: var(--paper); } .p-orange { background: var(--orange); }
.spec.wide .ui-plate .ui { max-width: 480px; }

/* hero: the brain on a phone, across the seam */
.hero-pic.hero-ui { display: grid; place-items: center; padding: 0 0 48px; background: transparent; overflow: visible; }
.phone { width: min(100%, 350px); background: var(--deep); border-radius: 40px; padding: 12px; box-shadow: 0 30px 60px rgba(15, 30, 51, 0.35);
  font-size: var(--s-small); line-height: 1.5; color: var(--ink-navy); }
.phone .ui-head { background: #fff; border-radius: 28px 28px 0 0; padding: 18px 18px 12px; }
.phone .ui-thread { background: #fff; padding: 6px 14px 22px; border-radius: 0 0 28px 28px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.ui-float { position: absolute; left: -12%; bottom: 8%; width: min(320px, 86%); }

/* plan panels: a screen or a photo fills the right half */
.panel .open .shot { width: 100%; height: 100%; overflow: hidden; }
.panel .open .ui.shot { height: auto; align-self: center; }
.hero-pic.hero-photo { overflow: visible; }
.hero-photo img { border-radius: var(--r) var(--r) 0 0; }

/* ---------- Mix: pieces borrowed from the ChatGPT build, and the review's colour notes ---------- */
.proof-strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 36px; color: var(--soft-paper); font-size: var(--s-small); font-weight: 600; }
.proof-strip li { display: flex; align-items: center; gap: 10px; }
.proof-strip li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.phone-tag { position: absolute; left: -96px; top: 17%; max-width: 172px; background: var(--orange); color: var(--ink-deep); font-size: var(--s-small); font-weight: 600; line-height: 1.4;
  padding: 12px 16px; border-radius: 12px; }
.guide-h { grid-column: 1 / -1; margin-bottom: 64px; font-family: var(--display); font-weight: 500; font-size: var(--s-head); line-height: 0.98; max-width: 22ch; text-wrap: balance; }
.guide-pic { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); }
.guide-pic img { width: 100%; height: 100%; object-fit: cover; }
.record-note { margin-top: 14px; font-size: var(--s-small); color: var(--soft-paper); max-width: 40ch; }
.f-paper.faq details { background: var(--stone); }
.f-paper.faq details[open] { background: var(--navy); color: var(--ink-paper); }
.f-deep.contact .crow:nth-child(even) { background: #182b47; }
.f-deep.contact .crow:first-of-type a { color: var(--orange); }
.f-deep.contact .crow .go { background: var(--orange); color: var(--ink-deep); }
.f-deep.contact .explain p { color: var(--soft-paper); }
@media (max-width: 860px) {
  .phone-tag { left: var(--edge); bottom: 20px; max-width: 220px; }
  .guide-h { font-size: var(--s-h2s); margin-bottom: 32px; }
  .proof-strip { margin-top: 24px; }
}

/* ---------- Phone fixes that must come last (they override the blocks appended above) ---------- */
.menu-btn { display: none; }
@media (max-width: 860px) {
  .hero-pic.hero-ui { height: auto; padding: 32px var(--edge) 0; background: var(--navy); }
  .phone { border-radius: 40px 40px 0 0; padding-bottom: 0; } .phone .ui-thread { border-radius: 0; }
  .phone-tag { display: none; }
  .ui-float { left: var(--edge); right: var(--edge); bottom: 16px; width: auto; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r); background: transparent; color: inherit;
    font: 600 var(--s-small)/1 var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 6px; margin-left: auto; }
  .site-head { flex-wrap: nowrap; }
  .site-head .links .btn { display: none; }
  .site-head.menu-open .links .btn { display: inline-flex; margin-top: 8px; }
  .site-head.menu-open .links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 8px var(--edge) 24px; background: inherit; }
  .site-head.menu-open .links a:not(.btn) { display: block; font-size: var(--s-body); padding: 10px 0; }
  .links .btn { padding: 12px 14px; }
  .site-head:not(.menu-open) .links { display: none; }
}

/* ---------- 2026 style moves, adapted to the brand ---------- */
/* frosted-glass header: the page shows through, softened */
.site-head { backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
/* kinetic headline: each word rises into place */
.hero .hl.split { animation: none; }
.hero .hl .w { display: inline-block; animation: rise 1s var(--ease) both; }
/* data in the product screens reads as data */
/* the demo answer streams in */
.card .a[aria-busy="true"]::after { content: ""; display: inline-block; width: 0.5em; height: 0.9em; margin-left: 2px; background: var(--orange); vertical-align: -0.1em; animation: blink 0.9s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Choose your path ---------- */
.paths { padding: 150px var(--edge); }
.paths-top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.paths-top h2 { grid-column: 1 / 7; font-family: var(--display); font-weight: 500; font-size: var(--s-head); line-height: 0.95; text-wrap: balance; }
.paths-top p { grid-column: 8 / 13; font-size: var(--s-body); color: var(--soft-navy); }
.path-cards { margin-top: 64px; display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 10px; align-items: stretch; }
.path { background: var(--stone); border-radius: var(--r); padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; }
.path.pick { background: var(--navy); color: var(--ink-paper); }
.path h3 { font-family: var(--display); font-weight: 500; font-size: var(--s-h2s); line-height: 1.05; }
.path-tag { align-self: flex-start; background: var(--orange); color: var(--ink-deep); font-size: var(--s-small); font-weight: 600; border-radius: 999px; padding: 4px 12px; margin-top: -6px; }
.path-for { font-size: var(--s-body); font-weight: 600; }
.path > ul { display: grid; gap: 10px; font-size: var(--s-base); }
.path > ul li { position: relative; padding-left: 22px; color: var(--soft-navy); }
.path.pick > ul li { color: var(--soft-paper); }
.path > ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--soft-navy); }
.path.pick > ul li::before { background: var(--orange); }
.path .btn, .path-cta { margin-top: auto; align-self: flex-start; }
.path-cta { font-size: var(--s-small); font-weight: 600; color: var(--ink-navy); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; padding: 16px 0 0; }
.paths-note { margin-top: 28px; font-size: var(--s-base); color: var(--soft-navy); }
.paths-note a { color: var(--ink-navy); font-weight: 600; }
.research-note { font-size: var(--s-small); color: var(--soft-paper); margin-top: -12px; max-width: 46ch; }

/* ---------- Call form ---------- */
.call-form { margin: 0 var(--edge) 64px; padding: 36px; border-radius: var(--r); background: #182b47; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 16px; align-items: end; }
.call-form h3 { grid-column: 1 / -1; font-family: var(--display); font-weight: 500; font-size: var(--s-h3); color: var(--ink-paper); }
.call-form label { display: grid; gap: 8px; }
.call-form label span { font-size: var(--s-small); font-weight: 600; color: var(--soft-paper); }
.call-form input, .call-form select { font: 500 var(--s-base)/1.3 var(--text); color: var(--ink-navy); background: var(--paper); border: 0; border-radius: var(--r); padding: 14px 14px; min-height: 50px; width: 100%; }
.call-form input:focus-visible, .call-form select:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.call-form .btn { min-height: 50px; }
.call-form .hp { position: absolute; left: -9999px; }
.form-status { grid-column: 1 / -1; color: var(--orange); font-size: var(--s-small); font-weight: 600; min-height: 1em; }
.form-status:empty { display: none; }

/* ---------- Fixes from the blind reviews ---------- */
.phone-tag { top: 34%; }
.panel .sliver { writing-mode: horizontal-tb; transform: none; top: 30px; bottom: auto; left: 26px; right: 20px; white-space: normal; line-height: 1.25; }

@media (max-width: 860px) {
  .paths { padding: 100px var(--edge); }
  .paths-top { grid-template-columns: 1fr; row-gap: 18px; }
  .paths-top h2, .paths-top p { grid-column: 1; }
  .path-cards { grid-template-columns: 1fr; margin-top: 40px; gap: 28px; }
  .path.pick { order: -1; }
  .path { padding: 28px 24px; }
  .call-form { grid-template-columns: 1fr; margin: 0 var(--edge) 48px; padding: 24px; }
  .panel .sliver { top: 20px; left: 20px; }
  .disc-wrap { display: grid; min-height: 0; padding: 0; place-items: stretch; position: relative; }
  .disc { position: absolute; top: 0; left: 7vw; width: 76vw; }
  .card { position: relative; top: auto; width: 100%; margin-top: 40px; }
  .disc-fact { position: static; margin-top: 20px; }
}

.call-mini { display: none; }
@media (max-width: 860px) {
  .call-mini { display: inline-flex; padding: 12px 16px; margin-left: auto; }
  .menu-btn { margin-left: 4px; }
}
@media (max-width: 860px) {
  .brand { white-space: nowrap; gap: 10px; }
  .brand .mark { width: 30px; height: 30px; }
  .call-mini { padding: 10px 12px; }
  .menu-btn { padding: 0 6px; }
}
@media (max-width: 420px) {
  .brand { font-size: var(--s-h4); }
}

/* ---------- D: menu cards carry their product screen; prices on golf ---------- */
.path { overflow: hidden; }
.path-shot { margin: -36px -32px 10px; padding: 28px; display: grid; place-items: center; }
.path-shot .ui { width: 100%; max-width: 380px; }
.path.pick .path-shot { background: var(--deep); }
.path-price { font-family: var(--display); font-weight: 500; font-size: var(--s-h3); line-height: 1.1; margin-top: -8px; }
.f-orange.contact .call-form { margin-top: 8px; }
@media (max-width: 860px) {
  .path-shot { margin: -28px -24px 8px; padding: 20px; }
}
.ui-img { height: auto; }
.phone-tag { left: -176px; top: 30%; max-width: 160px; }
.ask.value-only { padding-bottom: 40px; }
.phone-tag { left: -148px; }

/* ---------- Which brain do you need? ---------- */
.brain-check { margin-top: 48px; background: var(--paper); border-radius: var(--r); box-shadow: inset 0 0 0 2px var(--stone); padding: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 28px; }
.brain-check h3 { grid-column: 1 / -1; font-family: var(--display); font-weight: 500; font-size: var(--s-h3); }
.brain-check fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.brain-check legend { font-weight: 600; font-size: var(--s-base); margin-bottom: 10px; padding: 0; }
.brain-check label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--s-base); background: var(--stone); border-radius: var(--r); padding: 10px 14px; transition: background-color 0.2s var(--ease); }
.brain-check label:hover { background: #d3c8b5; }
.brain-check input { accent-color: var(--navy); width: 18px; height: 18px; margin: 0; }
.brain-check label:has(input:checked) { background: var(--navy); color: var(--ink-paper); }
.brain-check label:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }
.check-result { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.check-out { font-size: var(--s-body); }
.check-out b { font-weight: 600; }
.path.chosen { box-shadow: 0 0 0 3px var(--orange); }
@media (max-width: 860px) {
  .brain-check { grid-template-columns: 1fr; padding: 24px; }
}

/* ---------- D: Dustin in the hero, the brain on a phone in front of him ---------- */
.hero-pic.hero-me { top: 96px; width: clamp(320px, 30vw, 470px); overflow: visible; background: transparent; }
.hero-me .me { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; border-radius: var(--r) var(--r) 0 0; }
.hero-me .phone-wrap { position: absolute; left: -96px; bottom: 36px; }
.hero-me .phone { width: 330px; zoom: 0.76; }
.hero-me .phone-tag { left: calc(100% - 24px); right: auto; top: auto; bottom: 72px; transform: none; width: 168px; max-width: none; }
.hero .sub { grid-column: 1 / 5; text-wrap: pretty; }
.hero .sub-side { grid-column: 5 / 8; }
@media (max-width: 860px) {
  .hero-pic.hero-me { position: relative; top: auto; right: auto; width: auto; height: auto; padding: 0; background: var(--navy); display: block; }
  .hero-me .me { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-position: 60% 25%; border-radius: 0; }
  .hero-me .phone-wrap { position: relative; left: auto; bottom: auto; margin: -120px var(--edge) 0; }
  .hero-me .phone { zoom: 1; width: auto; border-radius: 40px 40px 0 0; }
  .hero .sub, .hero .sub-side { grid-column: 1 / -1; }
}

/* ---------- D: three-result headline, cited study and numbers ---------- */
.hero .hl.hl-3 { font-size: clamp(2.75rem, 5.1vw, 5.25rem); line-height: 0.98; max-width: none; }
.hero .hl.hl-3 > span { display: block; }
.hero .sub p + .hero-study { margin-top: 16px; }
.hero-study { font-family: var(--text); font-size: var(--s-small); line-height: 1.55; color: var(--soft-paper); max-width: 46ch; }
.hero-study a, .proof-strip.stats a { color: var(--orange); text-underline-offset: 3px; white-space: nowrap; }
.proof-strip.stats { gap: 12px 40px; font-weight: 500; }
.proof-strip.stats li { align-items: baseline; display: block; max-width: 32ch; }
.proof-strip.stats li::before { display: inline-block; margin-right: 10px; transform: translateY(-2px); }
.proof-strip.stats b { color: var(--paper); font-weight: 700; }
@media (max-width: 860px) {
  .hero .hl.hl-3 { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  .proof-strip.stats { flex-direction: column; }
}
.proof-strip.stats { grid-column: 1 / 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; }
.proof-strip.stats li { max-width: none; }
@media (max-width: 860px) {
  .hero .hl.hl-3 { font-size: clamp(1.9rem, 7.9vw, 3.5rem); }
  .proof-strip.stats { grid-column: 1 / -1; grid-template-columns: 1fr; }
}
@media (min-width: 861px) { .hero { grid-template-rows: 1fr auto; } }

/* ---------- Hero at in-between sizes (tablets, small laptops, phones turned sideways): stack it so the phone never covers the face ---------- */
.hero-me .me { object-position: 30% 30%; }
@media (min-width: 861px) and (max-width: 1199px), (min-width: 861px) and (max-height: 560px) {
  .hero { grid-template-rows: auto auto auto; min-height: 0; }
  .hero-pic.hero-me { position: relative; top: auto; right: auto; bottom: auto; width: auto; height: auto; background: var(--navy); }
  .hero-me .me { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-position: 50% 42%; border-radius: 0; }
  .hero-me .phone-wrap { position: relative; left: auto; bottom: auto; width: 380px; margin: -90px 0 0 var(--edge); }
  .hero-me .phone { zoom: 1; width: 100%; border-radius: 40px 40px 0 0; padding-bottom: 0; }
  .hero-me .phone .ui-thread { border-radius: 0; }
  .hero-me .phone-tag { display: block; left: calc(100% + 28px); right: auto; bottom: auto; top: 140px; }
  .hero .sub { grid-column: 1 / 7; }
  .hero .sub-side { grid-column: 7 / -1; }
  .proof-strip.stats { grid-column: 1 / -1; }
}
.site-head .brand { white-space: nowrap; }
.site-head .links a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1100px) { .site-head .links a[aria-current="page"] { display: none; } }
@media (min-width: 861px) and (max-width: 1000px) { .site-head .links a[href="#plan"] { display: none; } .site-head .links { gap: 22px; } }

/* ---------- Showcase on phones: circle and card share one cell, the note sits below both ---------- */
.disc-fact { z-index: 1; }
@media (max-width: 860px) {
  .disc-wrap { display: grid; grid-template-columns: 1fr; place-items: stretch; padding: 0; }
  .disc { position: relative; grid-area: 1 / 1; justify-self: center; align-self: center; top: auto; left: auto; width: min(76vw, 420px); }
  .card { grid-area: 1 / 1; align-self: center; position: relative; top: auto; margin-top: 0; width: 100%; z-index: 1; }
  .disc-fact { grid-row: 2; position: relative; margin-top: 56px; }
}
@media (min-width: 861px) { .disc-fact { position: static; justify-self: end; margin-top: 28px; } }

/* ---------- Generic AI versus yours: the same question, two answers ---------- */
.versus { display: flex; flex-direction: column; gap: 64px; padding: 140px 0 130px; }
.vs-top { align-items: end; row-gap: 24px; }
.vs-top h2 { grid-column: 1 / 8; font-family: var(--display); font-weight: 500; font-size: var(--s-head); line-height: 0.98; letter-spacing: -0.01em; text-wrap: balance; }
.vs-lead { grid-column: 8 / 13; color: var(--soft-navy); max-width: 44ch; text-wrap: pretty; }
.vs-pair { align-items: center; row-gap: 24px; }
.vs-col { margin: 0; border-radius: 4px; display: flex; flex-direction: column; gap: 18px; }
.vs-generic { grid-column: 1 / 6; padding: 28px; background: var(--paper); color: var(--soft-navy); }
.vs-yours { grid-column: 6 / 13; padding: 40px; background: var(--navy); color: var(--ink-paper); box-shadow: 0 28px 56px rgba(15, 30, 51, 0.24); }
.vs-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--s-small); font-weight: 600; }
.vs-tag { font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--stone); color: var(--ink-navy); }
.vs-yours .vs-tag { background: rgba(242, 240, 235, 0.14); color: var(--ink-paper); }
.vs-q { font-size: var(--s-small); padding: 12px 14px; border-radius: var(--r); background: var(--stone); color: var(--ink-navy); }
.vs-yours .vs-q { background: rgba(242, 240, 235, 0.1); color: var(--ink-paper); }
.vs-generic .vs-a { font-size: var(--s-base); line-height: 1.6; }
.vs-yours .vs-a { font-family: var(--display); font-weight: 500; font-size: var(--s-lead); line-height: 1.25; }
.vs-src { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-src span { font-size: var(--s-small); padding: 6px 10px; border-radius: var(--r); background: rgba(242, 240, 235, 0.12); }
.vs-col figcaption { font-size: var(--s-small); font-weight: 600; }
.vs-generic figcaption { color: var(--ink-navy); }
.vs-yours figcaption { color: var(--orange); }
.vs-why { list-style: none; margin: 0; row-gap: 32px; }
.vs-why li { grid-column: span 4; color: var(--soft-navy); font-size: var(--s-base); line-height: 1.6; max-width: 36ch; }
.vs-why b { display: block; margin-bottom: 8px; color: var(--ink-navy); font-family: var(--display); font-weight: 500; font-size: var(--s-h4); line-height: 1.2; }
@media (max-width: 860px) {
  .versus { padding: 96px 0 88px; gap: 48px; }
  .vs-top h2, .vs-lead, .vs-generic, .vs-yours, .vs-why li { grid-column: 1 / -1; }
  .vs-yours { padding: 28px 24px; }
  .vs-generic { padding: 24px; }
}
.versus .vs-lead, .vs-why li { color: #2c4263; } /* deeper than soft navy: stone is darker than paper */

/* ---------- Desktop hero, calmer: one line, two buttons, the numbers, the photo with one question on the phone.
   Phones keep the full version (it stacks one thing at a time there). ---------- */
@media (min-width: 1200px) and (min-height: 561px) {
  .hero:has(.hl-3) .hero-study,
  .hero:has(.hl-3) .sub-side > p,
  .hero:has(.hl-3) .hero-me .phone-tag,
  .hero:has(.hl-3) .ui-thread > p.ui-q:nth-of-type(2),
  .hero:has(.hl-3) .ui-thread > div.ui-a:nth-of-type(2) { display: none; }
  .hero:has(.hl-3) .sub { grid-column: 1 / 6; }
  .hero:has(.hl-3) .sub-side { grid-column: 6 / 9; align-self: end; }
  .hero:has(.hl-3) .bottom { padding: 52px 0 60px; }
  .hero:has(.hl-3) .proof-strip.stats { margin-top: 48px; }
}
@media (min-width: 1200px) and (min-height: 561px) {
  .hero:has(.hl-3) .top { align-items: center; }
  .hero .hl.hl-3 { font-size: clamp(2.75rem, 5.1vw, 6rem); }
}

/* ---------- Home hero, Coach Builder pattern (laptops and up): one ivory field, text left, Dustin right,
   one line, one button, nothing over his face. The cited numbers sit in one thin strip below. ---------- */
.hero-strip { background: var(--navy); color: var(--ink-paper); }
@media (min-width: 861px) {
  .hero:has(.hl-3) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto;
    column-gap: clamp(40px, 5vw, 96px); min-height: 0; background: var(--paper); }
  .hero:has(.hl-3) .top { grid-column: 1; grid-row: 1; background: transparent; padding: 150px 0 0 var(--edge); align-items: flex-end; }
  .hero:has(.hl-3) .hl.hl-3 { font-size: clamp(2.6rem, 4.1vw, 4.75rem); line-height: 1.02; }
  .hero:has(.hl-3) .bottom { grid-column: 1; grid-row: 2; background: transparent; color: var(--ink-navy); padding: 36px 0 88px var(--edge); }
  .hero:has(.hl-3) .bottom .grid { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; padding: 0; }
  .hero:has(.hl-3) .sub { max-width: 34ch; }
  .hero:has(.hl-3) .sub p:first-child { color: var(--soft-navy); }
  .hero:has(.hl-3) .hero-study,
  .hero:has(.hl-3) .sub-side > p,
  .hero:has(.hl-3) .phone-wrap { display: none; }
  .hero:has(.hl-3) .sub-side { display: block; }
  .hero:has(.hl-3) .ctas { display: flex; align-items: center; gap: 32px; }
  .hero:has(.hl-3) .more { color: var(--ink-navy); }
  .hero:has(.hl-3) .more:hover { color: var(--soft-navy); }
  .hero:has(.hl-3) .hero-pic.hero-me { grid-column: 2; grid-row: 1 / 3; position: relative; inset: auto; width: auto; height: auto;
    margin: 120px var(--edge) 72px 0; background: transparent; overflow: hidden; border-radius: var(--r); }
  .hero:has(.hl-3) .hero-me .me { position: relative; inset: auto; display: block; width: 100%; height: 100%; min-height: 480px;
    max-height: min(78vh, 780px); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--r); }
  .hero:has(.hl-3) .hero-strip { grid-column: 1 / -1; grid-row: 3; padding: 34px var(--edge); }
  .hero:has(.hl-3) .proof-strip.stats { grid-column: auto; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 48px; }
}
@media (max-width: 860px) {
  .hero:has(.hl-3) .bottom { padding-bottom: 8px; }
  .hero:has(.hl-3) .hero-strip { padding: 0 var(--edge) 44px; }
  .hero:has(.hl-3) .proof-strip.stats { margin-top: 24px; }
}
@media (min-width: 861px) {
  .hero:has(.hl-3) .sub-side { align-self: flex-start; }
  .hero:has(.hl-3) { grid-template-rows: 1fr auto auto 1fr auto; }
  .hero:has(.hl-3) .top { grid-row: 2; padding: 120px 0 0 var(--edge); }
  .hero:has(.hl-3) .bottom { grid-row: 3; padding: 36px 0 72px var(--edge); }
  .hero:has(.hl-3) .hero-pic.hero-me { grid-row: 1 / 5; }
  .hero:has(.hl-3) .hero-strip { grid-row: 5; }
}

/* Real photo (stairs, landscape): Dustin sits in the centre of the frame */
.hero-me .me { object-position: 50% 28%; }
@media (max-width: 860px) { .hero-me .me { aspect-ratio: 4 / 4.2; object-position: 50% 20%; } }
.hero-strip .proof-strip:not(.stats) { margin: 0; }
@media (min-width: 861px) { .hero:has(.hl-3) .hero-strip .proof-strip:not(.stats) { display: flex; gap: 12px 48px; } }
.hero .hl.hl-3.hl-1 { font-size: clamp(3rem, 13vw, 4.25rem); }
@media (min-width: 861px) { .hero:has(.hl-3) .hl.hl-3.hl-1 { font-size: clamp(3.5rem, 6.4vw, 7rem); line-height: 0.95; } }
/* A sale price always shows the list price crossed out beside it: <p class="path-price"><s>$2,100</s> $1,785 a month</p> */
.path-price s { font-size: 0.72em; color: var(--soft-navy); margin-right: 0.35em; text-decoration-thickness: 1.5px; }
.path.pick .path-price s { color: var(--soft-paper); }

/* ---------- Ministries: the Sermon Media add-on, a wide band under the three plans ---------- */
.sermon-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
  margin: 40px var(--edge) 0; padding: 40px; background: var(--deep); color: var(--ink-paper); border-radius: 4px; }
.sermon-band h3 { font-family: var(--display); font-weight: 500; font-size: var(--s-h2s); line-height: 1.05; }
.sermon-band .path-price { margin: 10px 0 18px; }
.sermon-band .path-price s { color: var(--soft-paper); }
.sermon-band p { max-width: 52ch; }
.sermon-band .sermon-note { margin-top: 14px; font-size: var(--s-small); color: var(--soft-paper); }
.sermon-band .ui { max-width: 520px; justify-self: end; width: 100%; }
@media (max-width: 860px) {
  .sermon-band { grid-template-columns: 1fr; padding: 28px 24px; gap: 28px; }
  .sermon-band .ui { justify-self: stretch; }
}
.sermon-band .sermon-incl { margin-top: 14px; font-weight: 600; color: var(--orange); }

/* ---------- Subscriptions under each price (Dustin, 2026-11-09) ---------- */
.path-subs { font-size: var(--s-small); line-height: 1.45; color: var(--soft-navy); margin: 6px 0 2px; text-wrap: pretty; }
.path.pick .path-subs, .sermon-band .path-subs { color: var(--soft-paper); }
.sermon-band .path-subs { margin: -8px 0 18px; }

/* ---------- Term label under struck prices; veterans band (Dustin, 2026-11-09) ---------- */
.path-term { font-size: var(--s-small); font-weight: 600; color: var(--soft-navy); margin: 8px 0 0; }
.path.pick .path-term { color: var(--soft-paper); }
.path-term + .path-subs { margin-top: 2px; }
.vet-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  margin: 40px 0 0; background: var(--paper); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--stone); overflow: hidden; }
.vet-pic { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.vet-txt { padding: 40px; align-self: center; }
.vet-txt h3 { font-family: var(--display); font-weight: 500; font-size: var(--s-h2s); line-height: 1.05; }
.vet-txt > p { margin-top: 14px; max-width: 48ch; }
.vet-prices { margin: 22px 0 0; display: grid; }
.vet-prices div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1.5px solid var(--stone); }
.vet-prices div:first-child { border-top: 1.5px solid var(--stone); }
.vet-prices dt { font-weight: 600; }
.vet-prices dd { margin: 0; font-family: var(--display); font-size: var(--s-h4); white-space: nowrap; }
.vet-prices s { font-size: 0.78em; color: var(--soft-navy); margin-right: 0.35em; text-decoration-thickness: 1.5px; }
.vet-note { font-size: var(--s-small); color: var(--soft-navy); margin-top: 10px; }
@media (max-width: 860px) {
  .vet-band { grid-template-columns: 1fr; }
  .vet-pic { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
  .vet-txt { padding: 28px 24px; }
}
.path-meta { margin-top: -6px; }
.path-meta .path-term { margin: 0; }
.path-meta .path-subs { margin: 2px 0 0; }

/* ---------- What is it worth? The calculator that replaced the three-question picker (2026-11-10).
   It reuses the .brain-check panel and chips; the inputs and the navy result are its own. ---------- */
.calc { align-items: start; }
.calc-field { display: grid; gap: 10px; align-content: start; }
.brain-check .calc-label { display: block; background: none; padding: 0; cursor: default; font-weight: 600; font-size: var(--s-base); }
.brain-check .calc-label:hover { background: none; }
.calc-range, .calc-money { display: flex; align-items: center; gap: 14px; background: var(--stone); border-radius: var(--r); padding: 0 14px; min-height: 52px; }
.brain-check .calc-range input { flex: 1; min-width: 0; width: auto; height: 32px; accent-color: var(--navy); cursor: pointer; }
.calc-range output { min-width: 7.5ch; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-money { gap: 6px; }
.calc-money span { font-weight: 600; }
.brain-check .calc-money input { flex: 1; min-width: 0; width: auto; height: 50px; border: 0; background: transparent; color: var(--ink-navy);
  font: inherit; font-size: var(--s-body); font-variant-numeric: tabular-nums; }
.calc-range:focus-within, .calc-money:focus-within { outline: 3px solid var(--orange); outline-offset: 2px; }
.brain-check .calc-range input:focus, .brain-check .calc-money input:focus { outline: none; }
.calc-hint { font-size: var(--s-small); line-height: 1.45; color: var(--soft-navy); }
.calc-out { grid-column: 1 / -1; background: var(--navy); color: var(--ink-paper); border-radius: var(--r); padding: 28px 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 32px; align-items: end; }
.calc-tier { grid-column: 1 / -1; font-size: var(--s-small); font-weight: 600; color: var(--soft-paper); }
.calc-tier b { display: block; margin-top: 6px; font-family: var(--display); font-weight: 500; font-size: var(--s-h3); line-height: 1.1; color: var(--ink-paper); }
.calc-nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; margin: 0; }
.calc-nums[hidden] { display: none; }
.calc-nums dt { font-size: var(--s-small); line-height: 1.4; color: var(--soft-paper); }
.calc-nums dd { margin: 6px 0 0; font-size: var(--s-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-note { font-size: var(--s-small); color: var(--soft-paper); }
.calc-out .btn { justify-self: end; }
.tiers .path { transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.tiers .path .path-shot { transition: background-color 0.4s var(--ease); }
.path.pick .path-cta { color: var(--ink-paper); }
.tier-incl { margin-top: 56px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 18px; }
.tier-incl h3 { grid-column: 1 / 4; font-family: var(--display); font-weight: 500; font-size: var(--s-h3); line-height: 1.1; }
.tier-incl ul { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; font-size: var(--s-base); }
.tier-incl li { position: relative; padding-left: 22px; color: var(--soft-navy); }
.tier-incl li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.paths-note + .paths-note { margin-top: 12px; }
@media (max-width: 860px) {
  .calc-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-out { grid-template-columns: 1fr; padding: 24px; }
  .calc-out .btn { justify-self: start; }
  .tiers .path.pick { order: 0; }
  .tier-incl { margin-top: 40px; }
  .tier-incl h3, .tier-incl ul { grid-column: 1 / -1; }
  .tier-incl ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tiers .path, .tiers .path .path-shot { transition: none; } }
.path-cards.tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .path-cards.tiers { grid-template-columns: 1fr; } }
.sermon-band .sermon-txt p + .path-subs { margin: 14px 0 0; }
@media (max-width: 860px) { .calc-nums { grid-template-columns: 1fr; gap: 14px; } .calc-nums dd { margin-top: 2px; } }
.sermon-band .sermon-incl + p { margin-top: 12px; }
/* Hero stats: four since 2026-11-10 (three marketing, one AI). Two by two on laptops, one row on wide screens. */
@media (min-width: 861px) { .hero:has(.hl-3) .proof-strip.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; } }
@media (min-width: 1180px) { .hero:has(.hl-3) .proof-strip.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 40px; } }

/* ---------- Pass 2 (2026-11-10): accessibility and layout fixes ---------- */
/* A one-line headline (golf) shrank to its narrowest word inside the flex row; let it use the column. */
.hero .top > .hl { flex: 1 1 auto; min-width: 0; }
/* Orange focus ring disappears on the orange contact field; navy there, orange inside the navy form. */
.f-orange :focus-visible { outline-color: var(--ink-navy); }
.f-orange .call-form :focus-visible { outline-color: var(--orange); }
/* Secondary hero link: a 24px-plus tap target. */
.ctas .more { display: inline-block; padding-block: 5px; }
/* Skip link: hidden until a keyboard user tabs to it. */
.skip { position: absolute; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--navy); color: var(--ink-paper); font-weight: 600; font-size: var(--s-small); }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Motion layer, 2026-11-11 (the RWM-style effects, kept small) ----------
   Page fades between Home, Golf and Ministries; the hero's buttons, phone and strip arrive after the headline;
   cards lift under the pointer; the header tucks away reading down and returns reading up (motion.js).
   The reduced-motion rule above switches all of it off. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
.hero .ctas { animation: rise 0.9s 0.55s var(--ease) both; }
.hero .phone-wrap { animation: rise 1.1s 0.3s var(--ease) both; }
.hero-strip { animation: fade 1s 0.8s var(--ease) both; }
.site-head { transition: color 0.3s var(--ease), background-color 0.3s var(--ease), translate 0.3s var(--ease); }
.site-head.is-tucked { translate: 0 -100%; }
@media (hover: hover) {
  .path { transition: translate 0.35s var(--ease), box-shadow 0.35s var(--ease); }
  .path:hover { translate: 0 -4px; box-shadow: 0 18px 36px -24px rgba(15, 30, 51, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .site-head.is-tucked { translate: none; }
  .path:hover { translate: none; }
}

/* Four-input calculators sit two by two; the sales estimate gets its own line (2026-11-11). */
.brain-check.calc-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .brain-check.calc-2x2 { grid-template-columns: 1fr; } }
.calc-gain { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.calc-out .calc-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.brain-check .calc-hint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.calc-out .calc-note { grid-column: 1 / -1; max-width: 72ch; }
.calc-out .btn { grid-column: 1 / -1; }

/* Sources live in one FAQ item per page (2026-11-11). */
.faq details p:has(+ .sources) { padding-bottom: 10px; }
.faq .sources { display: grid; gap: 10px; margin: 0; padding: 0 24px 26px calc(24px + 1.1em); list-style: disc; font-size: var(--s-base); }
.faq .sources a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }