/* ==========================================================================
   Hanna Soleymani — single-page site
   Design tokens first; everything else reads from them.
   ========================================================================== */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/caveat-latin-wght-normal.woff2") format("woff2"); }

:root {
  /* Colour — specification tokens */
  --bg: #f7f7f5;
  --surface: #ffffff;
  --soft-blue: #dce4ea;
  --muted-blue: #c7d2db;
  --ink: #333333;
  --ink-soft: #6d6d6d;
  --line: #e5e7e8;
  --warm: #e5e0d8;
  /* Colour — added for depth and the dark finale */
  --deep: #27323b;
  --steel: #4f6b7d;      /* small accents; 5.5:1 on white */
  --sand: #ead9c6;       /* warm glow only, never text */

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --hand: "Caveat", "Segoe Script", cursive;

  /* Shape and rhythm */
  --wrap: 1280px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --space: clamp(5rem, 11vw, 9.5rem);
  --r-lg: clamp(1.25rem, 2.4vw, 2rem);
  --r-md: 1.25rem;
  --header-h: 5.25rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow: 0 1px 2px rgb(39 50 59 / .04), 0 18px 40px -22px rgb(39 50 59 / .22);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
::selection { background: var(--muted-blue); color: var(--ink); }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 4px; border-radius: 4px; }
.contact :focus-visible { outline-color: var(--surface); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--space); }

/* ---------- Type ---------- */
.t-hero, .t-statement, .t-title, .t-word { font-family: var(--display); font-optical-sizing: auto; font-weight: 330; text-wrap: balance; }
.t-hero { font-size: clamp(2.75rem, 7vw, 6.5rem); line-height: .98; letter-spacing: -.032em; }
.t-statement { font-size: clamp(2.125rem, 4.8vw, 4.25rem); line-height: 1.04; letter-spacing: -.024em; }
.t-word { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.028em; }
.t-title { font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.15; letter-spacing: -.012em; }
.lede { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.55; text-wrap: pretty; max-width: 34rem; }
.soft { color: var(--ink-soft); }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem; padding: .75rem 1.75rem; border-radius: 999px; background: var(--ink); color: var(--surface); font-weight: 500; font-size: 1rem; line-height: 1.2; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn:hover { background: var(--deep); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgb(39 50 59 / .55); }
.btn:active { transform: translateY(0); }
.btn-sm { min-height: 2.75rem; padding: .5rem 1.25rem; font-size: .9375rem; }
.btn-light { background: var(--surface); color: var(--deep); }
.btn-light:hover { background: var(--soft-blue); color: var(--deep); }
.link { display: inline-block; padding-block: .5rem; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; transition: text-underline-offset .25s var(--ease); }
.link:hover { text-underline-offset: .22em; }
.skip-link { position: absolute; left: var(--gutter); top: -6rem; z-index: 200; padding: .75rem 1.25rem; background: var(--ink); color: var(--surface); border-radius: 999px; }
.skip-link:focus { top: .75rem; }

/* Reading progress along the top edge */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 150; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--deep); transform: scaleX(0); transform-origin: left; }

/* ---------- Header: a floating bar ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: .75rem var(--gutter); }
.header-bar { max-width: var(--wrap); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 3.75rem; padding: .375rem .375rem .375rem 1.125rem; border-radius: 999px; background: rgb(255 255 255 / .62); border: 1px solid rgb(255 255 255 / .7); box-shadow: 0 8px 30px -18px rgb(39 50 59 / .35); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); transition: background-color .3s var(--ease); }
.is-scrolled .header-bar { background: rgb(255 255 255 / .82); }
.brand { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; font-family: var(--display); font-size: 1.1875rem; letter-spacing: -.01em; white-space: nowrap; }
.brand-mark { width: 1.75rem; height: 1.75rem; color: var(--deep); flex: none; }
.main-nav { display: none; }
.main-nav ul { display: flex; gap: .25rem; }
.main-nav a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: .875rem; border-radius: 999px; font-size: .9375rem; transition: background-color .25s var(--ease); }
.main-nav a:hover { background: rgb(39 50 59 / .06); }
.main-nav a[aria-current] { background: var(--deep); color: var(--surface); }
.header-actions { display: flex; align-items: center; gap: .375rem; }
.header-actions .btn { display: none; }
.menu-button { min-height: 2.75rem; padding-inline: 1.125rem; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: .9375rem; font-weight: 500; }
.menu-panel { max-width: var(--wrap); margin: .5rem auto 0; padding: 1rem 1.25rem 1.25rem; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); }
.menu-panel li { border-bottom: 1px solid var(--line); }
.menu-panel li a { display: block; padding-block: .875rem; font-family: var(--display); font-size: 1.5rem; }
.menu-panel .btn { width: 100%; margin-top: 1.25rem; }

/* ---------- Image slots ---------- */
/* Each slot shows a labelled tint until its photograph exists; the image then covers it. */
.media { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--ph, var(--muted-blue)); isolation: isolate; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-note { position: absolute; left: 1.25rem; bottom: 1rem; font-size: .8125rem; color: var(--ink); opacity: .75; }
.media-note.on-dark { color: var(--surface); }
.media-note-top { top: 1rem; bottom: auto; }
.glass { background: rgb(255 255 255 / .58); border: 1px solid rgb(255 255 255 / .75); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 12px 32px -18px rgb(39 50 59 / .4); }
.dev-tag { display: inline-block; padding: .125rem .625rem; border: 1px dashed var(--ink-soft); border-radius: 999px; font-size: .75rem; line-height: 1.5; }

/* ==========================================================================
   01 Hero
   ========================================================================== */
.hero { padding: calc(var(--header-h) + .25rem) var(--gutter) 0; }
.hero-card { position: relative; max-width: calc(var(--wrap) + 2rem); margin-inline: auto; overflow: hidden; border-radius: var(--r-lg); background: var(--soft-blue); isolation: isolate; }

/* A slow, living backdrop: three soft fields of colour drifting past one another */
.aura { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .9; }
.b1 { width: 60%; aspect-ratio: 1; left: -12%; top: -20%; background: radial-gradient(circle, #f4f6f8 0%, transparent 65%); }
.b2 { width: 55%; aspect-ratio: 1; right: -10%; bottom: -30%; background: radial-gradient(circle, var(--sand) 0%, transparent 62%); }
.b3 { width: 45%; aspect-ratio: 1; left: 30%; top: 25%; background: radial-gradient(circle, var(--muted-blue) 0%, transparent 60%); }
.hero-lines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero-lines path { fill: none; stroke: var(--deep); stroke-width: 1; vector-effect: non-scaling-stroke; }

.hero-grid { position: relative; display: grid; gap: 2.5rem; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(5rem, 13vw, 11rem); }
.hero-name { font-weight: 500; }
.hero-name span:last-child { font-weight: 400; }
.hero-intro { margin-top: clamp(1.75rem, 3vw, 2.75rem); max-width: 30rem; }
.hero-body { margin-top: .75rem; color: #4a4a4a; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2rem; }
.hero-visual { position: relative; width: min(100%, 26rem); margin-left: auto; }
.hero-visual .media { aspect-ratio: 4 / 5; }
.hero-visual { filter: drop-shadow(0 22px 30px rgb(39 50 59 / .16)); }
.hero-badge { position: absolute; left: -1rem; bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; max-width: calc(100% - 1rem); padding: .75rem 1rem; border-radius: 1rem; font-size: .875rem; font-weight: 500; }
.hero-badge .soft { font-weight: 400; color: #555; }
.badge-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 4px rgb(79 107 125 / .18); }
.hero-themes { display: flex; flex-direction: column; gap: .125rem; font-family: var(--display); font-style: italic; font-weight: 340; font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--deep); }
.hero-themes li:nth-child(2) { padding-left: 1.5em; }
.hero-themes li:nth-child(3) { padding-left: 3em; }
.hero-wordmark { position: absolute; left: 50%; bottom: -.18em; z-index: -1; transform: translateX(-50%); font-family: var(--display); font-weight: 300; font-size: clamp(3.5rem, 13.2vw, 13.5rem); line-height: 1; letter-spacing: -.045em; white-space: nowrap; color: rgb(255 255 255 / .72); pointer-events: none; user-select: none; }

/* ==========================================================================
   02 Recognition
   ========================================================================== */
.recognition { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.recognition-grid { display: grid; gap: 2.5rem 2rem; }
.recognition-list { position: relative; padding-left: 1.75rem; }
.recognition-track { position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 1px; background: var(--line); }
.recognition-track span, .steps-track span { position: absolute; inset: 0; background: var(--deep); transform-origin: top; }
.motion .recognition-track span, .motion .steps-track span { transform: scaleY(0); }
.motion .moments li { opacity: .18; }
.moments li { font-family: var(--display); font-weight: 330; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.18; letter-spacing: -.012em; padding-block: clamp(.875rem, 2.2vh, 1.5rem); text-wrap: balance; }

/* ==========================================================================
   03 Core themes
   ========================================================================== */
.themes { padding-top: clamp(1.5rem, 3vw, 3rem); }
.theme-row { display: grid; gap: 1.25rem; }
.theme-card { padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.theme-card p { margin-top: .75rem; color: var(--ink-soft); max-width: 22rem; }
.theme-card h3 { margin-top: 1.75rem; }
.illo { width: 7.5rem; height: 7.5rem; overflow: visible; }
.illo .draw { fill: none; stroke: var(--deep); stroke-width: 1.25; stroke-linecap: round; }
.illo .fill { fill: var(--steel); }

/* ==========================================================================
   04 Coaching
   ========================================================================== */
.coaching { background: var(--warm); border-radius: var(--r-lg); margin-inline: var(--gutter); max-width: calc(var(--wrap) + 2rem); }
@media (min-width: 87rem) { .coaching { margin-inline: auto; } }
.coaching-grid { display: grid; gap: 3rem 4rem; align-items: center; }
.coaching-text .lede { margin-top: 1.5rem; }
.outcomes { display: flex; flex-wrap: wrap; gap: .625rem; margin-block: 2.25rem 2.5rem; }
.outcomes li { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1rem .625rem .75rem; border-radius: 999px; background: rgb(255 255 255 / .7); border: 1px solid rgb(255 255 255 / .9); font-weight: 500; font-size: .9375rem; }
.outcomes svg { width: 1.25rem; height: 1.25rem; flex: none; }
.outcomes .draw { fill: none; stroke: var(--steel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.coaching-visual { width: min(100%, 30rem); }
.coaching-visual { width: min(100%, 30rem); }
.coaching-visual .media { aspect-ratio: 4 / 5; }
@media (min-width: 64rem) { .coaching-visual { width: 100%; } }
@media (min-width: 64rem) { .coaching-visual { width: 100%; } }

/* ==========================================================================
   05 Approach
   ========================================================================== */
.approach-band { position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: clamp(26rem, 72vh, 46rem); display: flex; align-items: flex-end; isolation: isolate; }
.approach-band .media { position: absolute; inset: 0; border-radius: 0; z-index: -2; }
.approach-band .media img { height: 118%; top: -9%; }
.approach-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(39 50 59 / .72), rgb(39 50 59 / .08) 60%, transparent); }
.approach-band .media-note { top: 1.25rem; bottom: auto; }
.approach-title { color: var(--surface); padding: clamp(1.5rem, 5vw, 4rem); max-width: 14ch; }

.journey { position: relative; margin-top: clamp(3rem, 7vw, 5.5rem); }
.journey-path { display: none; }
.steps-track { position: absolute; left: 0; top: .9rem; bottom: .5rem; width: 1px; background: var(--muted-blue); }
.steps { display: grid; gap: 2.75rem; padding-left: 2rem; }
.step { position: relative; }
.step .node { position: absolute; left: calc(-2rem - .4375rem); top: 1.1rem; width: .875rem; height: .875rem; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--deep); z-index: 1; }
.step p { margin-top: .75rem; color: var(--ink-soft); max-width: 20rem; font-size: 1.125rem; }

/* ==========================================================================
   06 About
   ========================================================================== */
.about-grid { display: grid; gap: 3rem 4rem; align-items: center; }
.about-visual { position: relative; width: 100%; }
.about-visual .portrait { aspect-ratio: 1 / 1; }
.about-orbit { position: absolute; width: 46%; right: -8%; top: -8%; z-index: -1; overflow: visible; }
.about-orbit .draw { fill: none; stroke: var(--muted-blue); stroke-width: .75; }
.about-body { margin-top: 2rem; font-size: clamp(1.1875rem, 1.75vw, 1.5rem); line-height: 1.5; letter-spacing: -.005em; max-width: 36rem; }
.signature { margin-block: 1.5rem .75rem; font-family: var(--hand); font-size: 2.5rem; line-height: 1; color: var(--deep); }
.signature span { display: inline-block; }

/* ==========================================================================
   Questions
   ========================================================================== */
.faq { padding-top: 0; }
.faq-grid { display: grid; gap: 2.5rem 4rem; }
.faq-grid .lede { margin-top: 1.25rem; }
.faq-list { display: grid; gap: .75rem; }
.faq-list details { border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); interpolate-size: allow-keywords; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding: 1.125rem 1.5rem; cursor: pointer; list-style: none; font-weight: 500; font-size: 1.0625rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: .75rem; height: .75rem; border-right: 1.5px solid var(--deep); border-bottom: 1.5px solid var(--deep); transform: translateY(-25%) rotate(45deg); transition: transform .35s var(--ease); }
.faq-list details[open] summary::after { transform: translateY(15%) rotate(-135deg); }
.faq-list details p { padding: 0 1.5rem 1.375rem; color: var(--ink-soft); max-width: 40rem; }
.faq-list details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; }

/* ==========================================================================
   07 Content + Events
   ========================================================================== */
.notes { padding-top: 0; }
.notes-grid { display: grid; gap: 1.25rem; }
.panel { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: clamp(1.75rem, 3.5vw, 3rem); border-radius: var(--r-lg); background: var(--soft-blue); scroll-margin-top: calc(var(--header-h) + 1rem); }
.panel + .panel { background: var(--surface); box-shadow: var(--shadow); }
.panel .soft { max-width: 30rem; color: #4d4d4d; }
.panel-empty { margin-top: auto; padding-top: 1.5rem; font-family: var(--display); font-style: italic; font-size: 1.25rem; line-height: 1.35; max-width: 26rem; }

/* ==========================================================================
   08 Reviews (placeholder-only for now)
   ========================================================================== */
[data-placeholder-scene] { display: none; }
.preview [data-placeholder-scene] { display: block; }
.review-row { display: grid; gap: 1.25rem; margin-top: 3rem; }
.review { padding: 2rem; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.review blockquote { font-family: var(--display); font-size: 1.375rem; line-height: 1.35; }
.review figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; margin-top: 1.75rem; }
.avatar { width: 3rem; height: 3rem; border-radius: 50%; background: var(--muted-blue); }
.review .name { font-weight: 500; }

/* ==========================================================================
   09 Contact + 10 Footer: the dark finale
   ========================================================================== */
.contact { position: relative; overflow: hidden; padding-top: clamp(4rem, 9vw, 7rem); background: var(--deep); color: var(--surface); isolation: isolate; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.contact-glow { position: absolute; z-index: -1; width: 80vw; max-width: 70rem; aspect-ratio: 1; left: 50%; bottom: -55%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgb(234 217 198 / .55), rgb(199 210 219 / .18) 40%, transparent 68%); filter: blur(20px); }
.marquee { overflow: hidden; border-block: 1px solid rgb(255 255 255 / .12); padding-block: 1rem; }
.marquee-track { display: flex; gap: 2rem; width: max-content; font-family: var(--display); font-weight: 300; font-size: clamp(1.625rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; color: rgb(255 255 255 / .9); }
.marquee-track i { font-style: normal; color: var(--sand); }
.motion .marquee-track { animation: marquee 38s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

.contact-grid { display: grid; gap: 3rem 4rem; padding-block: clamp(4rem, 9vw, 7rem); align-items: end; }
.contact-grid h2 { max-width: 15ch; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.06; }
.contact-grid .lede { margin-top: 1.25rem; color: rgb(255 255 255 / .82); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.glass-dark { padding: 2rem; border-radius: var(--r-lg); background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.offer-detail { margin-top: .5rem; color: rgb(255 255 255 / .82); }
.offer .btn { margin-top: 1.5rem; }
.offer .t-title { font-size: clamp(1.375rem, 2vw, 1.75rem); }

.site-footer { padding-bottom: 1.5rem; }
.footer-main { display: grid; gap: 2.5rem; padding-block: 3rem; border-top: 1px solid rgb(255 255 255 / .14); }
.footer-name { font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; }
.footer-title { margin-top: .5rem; color: var(--muted-blue); }
.site-footer nav a { display: inline-block; padding-block: .625rem; text-underline-offset: .4em; }
.site-footer nav a:hover { text-decoration: underline; }
.footer-base { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .14); font-size: .9375rem; color: var(--muted-blue); }
.footer-base ul { display: flex; gap: 1.5rem; }
.footer-base a { display: inline-block; padding-block: .75rem; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 40rem) {
  .header-actions .btn { display: inline-flex; }
  .theme-row, .notes-grid, .review-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-card:last-child { grid-column: 1 / -1; }
  .footer-main { grid-template-columns: 2fr 1fr 1fr; }
  .footer-base { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ==========================================================================
   Desktop — the editorial compositions
   ========================================================================== */
@media (min-width: 64rem) {
  .main-nav { display: block; }
  .menu-button, .menu-panel { display: none !important; }

  .hero-card { min-height: min(calc(100svh - var(--header-h) - 1rem), 56rem); display: flex; flex-direction: column; }
  .hero-grid { flex: 1; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; gap: 2rem; }
  .hero-main { grid-column: 1 / span 8; grid-row: 1; align-self: center; }
  .hero-visual { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: center; width: 100%; }
  .hero-themes { grid-column: 1 / span 6; grid-row: 2; }

  .recognition-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .recognition-head { grid-column: 1 / span 5; position: sticky; top: 30vh; }
  .recognition-list { grid-column: 7 / span 6; }
  .moments li { padding-block: clamp(1.25rem, 5.5vh, 3rem); }

  .theme-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
  .theme-card:last-child { grid-column: auto; }
  .theme-card:nth-child(2) { margin-top: 5rem; }
  .theme-card:nth-child(3) { margin-top: 10rem; }

  .coaching-grid { grid-template-columns: 7fr 5fr; }

  .journey-path { display: block; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 7.5rem; overflow: visible; }
  .journey-path path { fill: none; stroke: var(--deep); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
  .steps-track { display: none; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 0; border: 0; }
  .step { padding-top: 6.5rem; }
  .step .node { top: 3.25rem; left: 0; width: 1rem; height: 1rem; }

  .about-grid { grid-template-columns: 7fr 5fr; gap: 3rem 4.5rem; }
  .about-visual { margin: 0; }

  .faq-grid { grid-template-columns: 5fr 7fr; align-items: start; }

  .notes-grid { grid-template-columns: 7fr 5fr; }

  .review-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .contact-grid { grid-template-columns: 7fr 4fr; justify-content: space-between; }
  .footer-main { grid-template-columns: 6fr 2fr 2fr; }
}

/* ==========================================================================
   Motion states — only prepared when html.motion is set (see <head>).
   GSAP drives the rest; CSS here only handles the ambient aura.
   ========================================================================== */
.motion .b1 { animation: drift1 22s ease-in-out infinite alternate; }
.motion .b2 { animation: drift2 26s ease-in-out infinite alternate; }
.motion .b3 { animation: drift3 30s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18%, 14%) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-16%, -12%) scale(.92); } }
@keyframes drift3 { to { transform: translate(-22%, 10%) scale(1.15); } }

/* Hide what GSAP will reveal, but only while motion is active */
.motion [data-hero], .motion [data-hero-visual], .motion [data-fade] { opacity: 0; }
.motion [data-split] { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Phones — recomposed, not shrunk
   ========================================================================== */
@media (max-width: 39.99rem) {
  :root { --space: 4.5rem; --r-lg: 1.25rem; --header-h: 4.75rem; }
  body { font-size: 1rem; }
  .site-header { padding: .5rem .75rem; }
  .header-bar { min-height: 3.25rem; padding-left: .875rem; }
  .brand { font-size: 1.0625rem; gap: .5rem; }
  .brand-mark { width: 1.5rem; height: 1.5rem; }

  /* Hero: statement first, then a wide image; the theme lines fold away */
  .hero { padding-inline: .75rem; }
  .hero-grid { gap: 2rem; padding: 2rem 1.25rem 4.25rem; }
  .t-hero { font-size: clamp(2.375rem, 11vw, 3rem); }
  .hero-intro { margin-top: 1.5rem; }
  .hero-ctas { margin-top: 1.5rem; gap: .5rem 1.25rem; }
  .hero-visual { width: 100%; }
  .hero-visual .media { aspect-ratio: 5 / 4; }
  .hero-visual img { object-position: 72% 40%; }
  .hero-badge { left: .75rem; bottom: .75rem; font-size: .8125rem; padding: .625rem .875rem; }
  .hero-themes { display: none; }
  .hero-wordmark { font-size: 9.6vw; bottom: -.16em; letter-spacing: -.04em; }
  .blob { filter: blur(40px); }
  .motion .b1, .motion .b2, .motion .b3 { animation: none; }

  /* Recognition */
  .t-statement { font-size: clamp(1.875rem, 8.4vw, 2.375rem); }
  .moments li { font-size: 1.375rem; padding-block: .875rem; }
  .recognition-list { padding-left: 1.25rem; }

  /* Themes */
  .themes { padding-top: 1rem; }
  .theme-card { padding: 1.5rem; }
  .theme-card h3 { margin-top: 1rem; }
  .illo { width: 5.5rem; height: 5.5rem; }

  /* Coaching: picture first, as a wide frame */
  .coaching { margin-inline: .75rem; }
  .coaching .wrap { padding-inline: 1.25rem; }
  .coaching-grid { gap: 2rem; }
  .coaching-visual { order: -1; width: 100%; }
  .coaching-visual .media { aspect-ratio: 4 / 3; }
  .outcomes { gap: .5rem; margin-block: 1.75rem 2rem; }
  .outcomes li { font-size: .875rem; padding: .5rem .875rem .5rem .625rem; }

  /* Approach */
  .approach-band { min-height: 22rem; }
  .approach-band img { object-position: 75% 50%; }
  .approach-title { font-size: clamp(2.25rem, 10vw, 2.75rem); padding: 1.5rem; }
  .journey { margin-top: 2.5rem; }
  .t-word { font-size: 2.25rem; }
  .step p { font-size: 1rem; }

  /* About */
  .about-grid { gap: 2rem; }
  .about-orbit { display: none; }
  .about-body { margin-top: 1.25rem; font-size: 1.125rem; }
  .signature { font-size: 2.125rem; }

  /* Questions */
  .faq-list summary { padding: 1rem 1.125rem; font-size: 1rem; }
  .faq-list details p { padding: 0 1.125rem 1.125rem; }

  /* Content + Events */
  .panel { padding: 1.5rem; }
  .panel-empty { font-size: 1.125rem; padding-top: .75rem; }

  /* Contact + footer */
  .contact { padding-top: 3rem; }
  .marquee { padding-block: .75rem; }
  .contact-grid { gap: 2rem; padding-block: 3rem; }
  .contact-grid h2 { font-size: 2rem; }
  .glass-dark { padding: 1.5rem; }
  .offer .btn { width: 100%; }
  .footer-main { padding-block: 2.25rem; gap: 1.75rem; }
  .footer-nav ul, .site-footer nav[aria-label="Footer"] ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
}

/* ---------- Cookie consent ---------- */
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--surface); }
.footer-button { display: inline-block; padding-block: .75rem; font-size: inherit; color: inherit; text-underline-offset: .4em; }
.footer-button:hover { text-decoration: underline; }
.consent { position: fixed; z-index: 160; left: var(--gutter); right: var(--gutter); bottom: 1rem; max-width: 26rem; padding: 1.25rem 1.375rem 1.125rem; border-radius: var(--r-md); background: rgb(255 255 255 / .98); border: 1px solid var(--line); box-shadow: 0 24px 48px -24px rgb(39 50 59 / .45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.consent.is-in { opacity: 1; transform: none; }
.consent-title { font-family: var(--display); font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; }
.consent-text { margin-top: .5rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .625rem; margin-top: 1rem; }
.consent-actions .btn { min-width: 6.5rem; }
.consent-link { margin-left: auto; padding-block: .5rem; font-size: .875rem; text-decoration: underline; text-underline-offset: .3em; }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; transform: none; } }
@media (max-width: 39.99rem) {
  .consent { bottom: .75rem; padding: 1.125rem; }
  .consent-actions .btn { flex: 1; }
  .consent-link { margin-left: 0; }
}