:root {
  color-scheme: light;
  --linen: #fefefe;
  --ivory: #f8f5ef;
  --sand: #efeae0;
  --oat: #e7dfd1;
  --stone: #e9e5dc;
  --espresso: #2a231b;
  --cocoa: #574737;
  --taupe: #766b5b;
  --gold: #b0894f;
  --gold-light: #d9bc84;
  --bronze: #7c5f33;
  --line: rgba(100, 78, 50, .21);
  --display: "Playfair Display", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --hero-blur: 0px;
  --hero-scale: 1;
  --hero-wash-opacity: 0;
  --hero-copy-opacity: 1;
  --hero-copy-shift: 0px;
  --approach-tail: 240px;
  --about-lead-in: 160px;
  --about-seam: 200px;
  --header-h: 104px;
  --header-h-scrolled: 78px;
  --practice-copy-opacity: 0;
  --practice-copy-shift: 18px;
  --pathways-opacity: 0;
}

/* Page-to-page motion (transitions.js decides the mode). Every page change passes through ivory; nothing zooms or
   morphs. Two curves carry it: silk for anything that sweeps, settle for anything that fades or rises into place. */
:root { --ease-silk: cubic-bezier(.65, .05, .25, 1); --ease-settle: cubic-bezier(.22, .61, .36, 1); }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.site-header { view-transition-name: site-header; }
::view-transition { background: var(--ivory); }
::view-transition-group(site-header) { animation-duration: .9s; animation-timing-function: var(--ease-silk); }
/* The page softens into ivory, then the next one comes up out of it. The two never overlap. */
::view-transition-old(root) { animation: kh-recede .5s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: kh-arrive .8s var(--ease-settle) .42s both; }
/* Opening a pathway or service holds the ivory a breath longer; the page then arrives in stages (pathway.css). */
.vt-open::view-transition-new(root) { animation: kh-arrive .9s var(--ease-settle) .62s both; }
/* The arriving page waits in that ivory until its first view is ready (transitions.js releases it). */
.vt-hold::view-transition-new(root) { animation-play-state: paused; }
/* While the next page is still on its way, the page being left eases toward ivory instead of freezing. It starts
   after a short grace, so a page that is already prepared takes over first. The header stays: it carries across. */
.vt-leaving body::after { content: ""; position: fixed; z-index: 29; inset: 0; pointer-events: none; background: var(--ivory); animation: kh-veil 1.2s var(--ease-settle) .2s both; }
@keyframes kh-veil { from { opacity: 0; } to { opacity: .72; } }
@keyframes kh-recede { to { opacity: 0; filter: blur(5px); } }
@keyframes kh-arrive { from { opacity: 0; } }
/* Dissolve: the section being arrived at rises the last few pixels into place. --vt-lag takes off any ivory
   already held, so each stage keeps its place in the sequence. */
.vt-dissolve .vt-emerge > :not([aria-hidden="true"]) { animation: kh-emerge 1.1s var(--ease-settle) calc(.5s - var(--vt-lag, 0ms)) backwards; }
@keyframes kh-emerge { from { opacity: 0; translate: 0 18px; } }
@keyframes kh-write { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes kh-focus { from { opacity: 0; filter: blur(12px); } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; color: var(--espresso); background: var(--linen); font-family: var(--body); -webkit-font-smoothing: antialiased; }
main, .site-footer { position: relative; z-index: 1; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: var(--espresso); background: #e9d7b5; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 5px; }
button:focus-visible { outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 16px; background: var(--espresso); color: var(--linen); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.page-frame { width: min(100% - 112px, 1320px); margin-inline: auto; }
.arrow-icon { position: relative; display: inline-block; flex: 0 0 13px; width: 13px; height: 13px; vertical-align: middle; transition: transform .45s var(--ease); }
.arrow-icon::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 1.4px; border-radius: 1px; background: currentColor; }
.arrow-icon::after { content: ""; position: absolute; top: 3px; right: 1px; width: 6px; height: 6px; border-top: 1.4px solid currentColor; border-right: 1.4px solid currentColor; transform: rotate(45deg); }

/* On the hero the header has no surface: it sits in the photograph, legible through a faint ivory mist at the
   image's top edge. Once the page moves, it settles into a slimmer ivory glass bar with a gold hairline. */
.site-header { position: fixed; z-index: 30; inset: 0 0 auto; height: var(--header-h); isolation: isolate; transition: height .55s var(--ease); }
.site-header::before, .site-header::after { content: ""; position: absolute; z-index: -1; pointer-events: none; transition: opacity .55s var(--ease); }
.site-header::before { inset: 0 0 -90px; background: linear-gradient(180deg, rgba(248,245,239,.62) 0%, rgba(248,245,239,.44) 30%, rgba(248,245,239,.24) 58%, rgba(248,245,239,.08) 82%, rgba(248,245,239,0) 100%); }
.site-header::after { inset: 0; opacity: 0; background: rgba(248,245,239,.9); border-bottom: 1px solid rgba(176,137,79,.2); box-shadow: 0 12px 34px -22px rgba(52,42,29,.22); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); }
.site-header.is-scrolled { height: var(--header-h-scrolled); }
.site-header.is-scrolled::before { opacity: 0; }
.site-header.is-scrolled::after { opacity: 1; }
/* Three zones: the section links are centred in the real space between the logo and the two actions. */
.header-inner { width: min(100% - 84px, 1510px); height: 100%; margin: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(22px, 3vw, 52px); }
/* The logo artwork's swirl is cropped flat at its top edge, so the logo hangs from the top of the bar and that cut reads as running off the page. */
.brand { grid-column: 1; align-self: start; width: 250px; flex: 0 0 250px; transition: width .55s var(--ease), flex-basis .55s var(--ease); }
.is-scrolled .brand { width: 196px; flex-basis: 196px; }
.brand img { display: block; width: 100%; height: auto; }
.main-nav { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: clamp(18px, 2vw, 35px); white-space: nowrap; }
:is(.main-nav > a, .nav-services-link) { position: relative; padding-block: 10px; color: #4d4438; font-size: 14px; font-weight: 600; letter-spacing: .01em; transition: color .25s ease; }
:is(.main-nav > a, .nav-services-link)::after { content: ""; position: absolute; height: 1px; bottom: 3px; left: 0; right: 100%; background: var(--gold); transition: right .35s var(--ease); }
:is(.main-nav > a, .nav-services-link):hover { color: var(--bronze); }
.site-header:not(.is-scrolled) :is(.main-nav > a, .nav-services-link) { text-shadow: 0 0 3px rgba(248,245,239,.9), 0 0 16px rgba(248,245,239,.95); }
:is(.main-nav > a, .nav-services-link):hover::after, :is(.main-nav > a, .nav-services-link):focus-visible::after { right: 0; }
/* Services menu (menu.js): a quiet ivory card that settles beneath "Services". Framed, never shadowed; a thread
   of prism light on its top edge; the five pathways in Playfair between hairlines. */
.nav-services { position: relative; display: flex; align-items: center; gap: 4px; }
.nav-services.is-open .nav-services-link { color: var(--bronze); }
.nav-services.is-open .nav-services-link::after { right: 0; }
.nav-services-toggle { display: grid; place-items: center; width: 24px; height: 24px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--bronze); }
.nav-services-toggle svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-settle); }
.nav-services.is-open .nav-services-toggle svg { transform: rotate(180deg); }
.services-menu { position: absolute; z-index: 5; top: calc(100% + 20px); left: -30px; width: 412px; padding: 12px 30px 26px; border: 1px solid rgba(176,137,79,.42); background: #fbf9f5; white-space: normal; opacity: 0; visibility: hidden; translate: 0 -8px; transition: opacity .26s ease, translate .3s ease, visibility 0s linear .3s; }
.services-menu::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: 100%; height: 22px; }
.services-menu::after { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(158,143,203,.7), rgba(127,168,223,.7), rgba(111,194,174,.65), rgba(230,169,192,.6), var(--gold-light)); }
.nav-services.is-open .services-menu { opacity: 1; visibility: visible; translate: 0; transition: opacity .5s var(--ease-settle), translate .6s var(--ease-settle), visibility 0s; }
.services-menu-list { margin: 0; padding: 0; list-style: none; }
.services-menu-row { border-bottom: 1px solid rgba(124,95,51,.17); opacity: 0; translate: 0 6px; transition: opacity .2s ease, translate .2s ease; }
.nav-services.is-open .services-menu-row { opacity: 1; translate: 0; transition: opacity .5s var(--ease-settle) calc(90ms + var(--i, 0) * 40ms), translate .6s var(--ease-settle) calc(90ms + var(--i, 0) * 40ms); }
.services-menu-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0 14px; border: 0; background: none; color: var(--espresso); font: 400 19px/1.3 var(--display); letter-spacing: -.005em; text-align: left; transition: color .3s ease; }
.services-menu-item .arrow-icon { flex: 0 0 13px; color: var(--gold); opacity: 0; translate: -8px 0; transition: opacity .35s ease, translate .5s var(--ease-settle); }
.services-menu-item:hover, .services-menu-item:focus-visible, .services-menu-row.is-opening .services-menu-item { color: var(--bronze); }
.services-menu-item:hover .arrow-icon, .services-menu-item:focus-visible .arrow-icon, .services-menu-row.is-opening .arrow-icon { opacity: 1; translate: 0; }
.services-menu-item:focus-visible { outline-offset: 2px; }
.services-menu-item.is-current { color: var(--bronze); }
.services-menu-item.is-current > span:first-child::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 10px; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.services-menu-list:has(.is-opening) .services-menu-row:not(.is-opening) { opacity: .38; transition: opacity .45s var(--ease-settle); }
.services-menu-all { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; color: var(--bronze); font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: color .3s ease; }
.services-menu-all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-settle); }
.services-menu-all:hover { color: var(--espresso); }
.services-menu-all:hover svg { transform: translateX(4px); }
.header-actions { grid-column: 3; display: flex; align-items: center; gap: 12px; }

.page-atmosphere { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: var(--ivory); }
.atmosphere-media, .atmosphere-tone, .atmosphere-wash, .atmosphere-prism { position: absolute; inset: 0; }
.atmosphere-media { inset: -24px; background: url("assets/hero-chair-composite-v2.webp") center center / cover no-repeat; filter: blur(var(--hero-blur)); transform: scale(var(--hero-scale)); will-change: filter, transform; }
.atmosphere-tone { background: linear-gradient(90deg, rgba(248,245,239,.68) 0%, rgba(248,245,239,.32) 35%, rgba(248,245,239,0) 65%); }
.atmosphere-wash { background: var(--ivory); opacity: var(--hero-wash-opacity); will-change: opacity; }
.atmosphere-prism { inset: auto 0 0; height: 170px; background: linear-gradient(100deg, rgba(158,143,203,.07) 20%, rgba(127,168,223,.08) 39%, rgba(111,194,174,.07) 55%, rgba(230,169,192,.04) 70%, transparent 80%); opacity: calc(1 - var(--hero-wash-opacity)); mask-image: linear-gradient(to top, #000, transparent); }
.hero-journey { position: relative; min-height: 100vh; }
.hero-stage { position: relative; height: 100vh; min-height: 690px; overflow: hidden; }
.scroll-scene-active .hero-journey { height: var(--journey-height, 235vh); }
.scroll-scene-active .hero-stage { position: sticky; top: 0; }
.scroll-scene-active .services-anchor, .approach-anchor { position: absolute; top: 0; width: 1px; height: 1px; }
.hero-content { height: 100%; min-height: 690px; position: relative; display: flex; align-items: center; padding-top: 74px; }
.hero-copy { width: min(50%, 650px); padding-bottom: 32px; opacity: var(--hero-copy-opacity); transform: translateY(var(--hero-copy-shift)); will-change: opacity, transform; }
.hero-copy.is-hidden { visibility: hidden; }
.scroll-scene-active .hero-content > .services-intro { position: absolute; top: 50%; right: 0; width: 44%; padding: 0 0 24px; opacity: var(--practice-copy-opacity); transform: translateY(calc(-50% + var(--practice-copy-shift))); pointer-events: none; }
.scroll-scene-active .services-intro h2 { font-size: clamp(49px, 3.7vw, 58px); }
.scroll-scene-active .services-intro .section-lead { max-width: 510px; font-size: 18px; }
.scroll-scene-active .hero-content > .services-pathways { position: absolute; top: calc(50% + 37px); left: 0; width: 46%; opacity: var(--pathways-opacity); transform: translateY(calc(-50% + var(--pathways-shift, 0px))); will-change: opacity, transform; }
.hero-copy .hero-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 11px 22px; margin: 0 0 22px; color: var(--bronze); font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: .01em; }
.hero-identity span + span { position: relative; color: var(--cocoa); }
.hero-identity span + span::before { content: ""; position: absolute; top: 50%; left: -12px; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); }
.hero-copy h1 { margin: 0; max-width: 680px; color: #2d271f; font: 500 clamp(66px, 5.55vw, 90px)/1.045 var(--display); letter-spacing: -.027em; text-wrap: balance; }
.hero-copy h1 em { color: var(--bronze); font-weight: 400; }
.hero-copy p { max-width: 540px; margin: 32px 0 0; color: #4f463b; font-size: clamp(17px, 1.38vw, 20px); line-height: 1.63; }
.hero-actions, .closing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-top: 42px; }
/* Buttons follow the Gateway page: compact, centred labels; only the gold primary carries a small arrow. */
/* CTA system, after the Gateway page: compact centred labels, a small arrow only on the gold primary.
   Primary lifts and brightens; secondary stays in its ivory family, its surface clearing and its outline warming to gold. */
.button, .header-action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; min-height: 52px; padding: 0 28px; border-radius: 3px; border: 1px solid transparent; font-size: 13px; line-height: 1.2; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .45s var(--ease), transform .45s var(--ease); }
.button:hover, .header-action:hover { transform: translateY(-2px); }
.button:active, .header-action:active { transform: translateY(0); transition-duration: .12s; }
.button .arrow-icon, .header-action .arrow-icon { color: currentColor; }
.button:hover .arrow-icon, .header-action:hover .arrow-icon { transform: translateX(3px); }
.button-gold, .header-checkout { border-color: var(--gold); background: var(--gold); color: #2a1d06; }
.button-gold:hover, .header-checkout:hover { border-color: var(--gold-light); background: var(--gold-light); box-shadow: 0 14px 26px -16px rgba(124,95,51,.7); }
.button-text, .button-outline, .header-book { border-color: rgba(124,95,51,.62); background: rgba(254,254,254,.38); color: var(--espresso); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.button-outline { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.button-text:hover, .button-outline:hover, .header-book:hover { border-color: var(--gold); background: rgba(254,254,254,.9); color: var(--espresso); box-shadow: 0 14px 26px -18px rgba(87,71,55,.45); }
/* Header actions use the same two roles at a compact size: outlined secondary, then the gold primary. */
.header-action { min-height: 46px; padding: 0 22px; }
/* Supporting actions, after the Gateway page's "Open itinerary" links: a tracked bronze label and a straight arrow
   standing on one long gold hairline. On hover the label deepens, the line firms and the arrow travels on. */
.cta-link { display: inline-flex; align-items: center; gap: 14px; padding: 0 2px 16px; border: 0; border-bottom: 1px solid rgba(176,137,79,.55); background: transparent; color: var(--bronze); font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-align: left; transition: color .4s var(--ease), border-color .4s var(--ease); }
.cta-arrow { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.cta-link:hover, .cta-link:focus-visible { color: var(--espresso); border-color: var(--bronze); }
.cta-link:hover .cta-arrow, .cta-link:focus-visible .cta-arrow { transform: translateX(6px); }
.hero-credentials { position: absolute; left: 0; bottom: 38px; width: min(62%, 820px); display: grid; grid-template-columns: repeat(4, auto); justify-content: start; margin: 0; padding: 20px 0 0; list-style: none; border-top: 1px solid rgba(124,95,51,.3); opacity: var(--hero-copy-opacity); transform: translateY(var(--hero-copy-shift)); }
.hero-credentials li { padding: 0 22px; white-space: nowrap; color: var(--cocoa); font-size: 15px; line-height: 1.4; font-weight: 500; border-left: 1px solid rgba(124,95,51,.24); }
.hero-credentials li:first-child { padding-left: 0; border-left: 0; }
.hero-credentials a { border-bottom: 1px solid rgba(124,95,51,.45); transition: color .25s ease, border-color .25s ease; }
.hero-credentials a:hover { color: var(--bronze); border-color: var(--bronze); }
.hero-credentials.is-hidden { visibility: hidden; }
.placeholder { display: inline-flex; align-items: baseline; gap: 8px; color: var(--taupe); border-bottom: 1px dashed rgba(176,137,79,.8); }
.placeholder::after { content: "To confirm"; color: var(--bronze); font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.section-shell { padding-block: 130px; }
.section-marker { margin: 0 0 30px; color: var(--bronze); font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.section-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: clamp(60px, 8vw, 150px); align-items: end; }
h2 { margin: 0; font: 500 clamp(46px, 4vw, 64px)/1.1 var(--display); letter-spacing: -.019em; text-wrap: balance; }
h2 em { font-weight: 400; color: var(--bronze); }
.section-lead { max-width: 570px; margin: 0; color: var(--cocoa); font-size: 18px; line-height: 1.75; }
.services-section { position: relative; background: transparent; }
.scroll-scene-active .services-section { display: none; }
.services-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(254,253,250,.92) 0%, rgba(254,253,250,.83) 32%, rgba(254,253,250,.56) 52%, rgba(254,253,250,.09) 77%, rgba(254,253,250,.02) 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.45) 74px, #000 240px); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.45) 74px, #000 240px); }
.services-section > .page-frame { position: relative; }
.services-intro { display: block; width: min(100%, 720px); padding-bottom: 66px; }
.services-intro h2 { max-width: 700px; }
.services-intro .section-lead { max-width: 560px; margin-top: 30px; }
.services-pathways { width: min(100%, 720px); }
.service-list { width: 100%; border-top: 1px solid rgba(100,78,50,.29); }
.service-row { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 26px; row-gap: 9px; align-items: center; padding: 28px 17px 30px 0; border: 0; border-bottom: 1px solid rgba(100,78,50,.29); background: transparent; color: var(--espresso); text-align: left; transition: background .3s ease; }
.service-row::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.service-row:hover { background: linear-gradient(90deg, rgba(255,255,255,.47), rgba(255,255,255,.06)); }
.service-row:hover::before, .service-row:focus-visible::before { transform: scaleX(1); }
.service-title { grid-column: 1; font: 500 clamp(27px, 2.45vw, 36px)/1.2 var(--display); letter-spacing: -.01em; transition: transform .45s var(--ease), color .35s ease; }
.service-row:hover .service-title { transform: translateX(12px); }
.service-description { grid-column: 1; max-width: 570px; color: var(--cocoa); font-size: 16px; line-height: 1.55; }
.service-arrow { grid-column: 2; grid-row: 1 / 3; justify-self: end; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(124,95,51,.52); border-radius: 50%; color: var(--bronze); transition: color .3s ease, background .3s ease, transform .3s var(--ease); }
.service-row:hover .service-arrow { color: var(--linen); background: var(--bronze); transform: translateX(3px); }
/* Opening a pathway: the chosen row answers (line drawn, title warm, arrow filled) while the others step back. */
.service-list .service-row { transition: background .3s ease, opacity .45s var(--ease-settle); }
.service-row.is-opening::before { transform: scaleX(1); }
.service-row.is-opening .service-title { color: var(--bronze); transform: translateX(12px); }
.service-row.is-opening .service-arrow { color: var(--linen); background: var(--bronze); transform: translateX(3px); }
.service-list:has(.is-opening) .service-row:not(.is-opening) { opacity: .38; }
.service-footnote { max-width: 720px; margin: 25px 0 0; color: var(--taupe); font-size: 14px; line-height: 1.55; }
.scroll-scene-active .service-row { grid-template-columns: minmax(0, 1fr) 38px; column-gap: 18px; row-gap: 5px; padding: 16px 4px 17px 0; }
.scroll-scene-active .service-title { font-size: clamp(25px, 2vw, 29px); }
.scroll-scene-active .service-description { max-width: 520px; font-size: 16px; line-height: 1.45; }
.scroll-scene-active .service-arrow { width: 38px; height: 38px; }
.scroll-scene-active .service-footnote { margin-top: 18px; font-size: 14px; }

.approach-section { background: var(--ivory); }
.approach-stage { display: flex; align-items: center; min-height: min(100svh, 1000px); }
@media (min-width: 761px) { html:not(.approach-scroll-active) .approach-stage { padding-bottom: calc(130px + var(--approach-tail)); } }
.approach-grid { display: grid; grid-template-columns: minmax(420px, .9fr) minmax(480px, 1.1fr); gap: clamp(88px, 8vw, 160px); align-items: center; }
.approach-visual { margin: 0; }
.approach-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 44%; filter: saturate(.9); }
.approach-visual-caption { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 14px; margin-top: 19px; color: var(--bronze); font: italic 16px/1.4 var(--display); }
.approach-visual-caption::before { content: ""; width: 25px; height: 1px; background: rgba(176,137,79,.72); }
.approach-copy h2 { max-width: 720px; }
.approach-copy .section-lead { max-width: 620px; margin-top: 27px; }
.approach-steps { margin: 43px 0 29px; border-top: 1px solid var(--line); }
.approach-step { display: grid; grid-template-columns: 42px 1fr; gap: 24px; padding: 21px 0 19px; border-bottom: 1px solid var(--line); }
.step-index { color: var(--bronze); font: italic 17px/1.6 var(--display); }
.approach-step h3 { margin: 0 0 5px; font: 500 26px/1.25 var(--display); }
.approach-step p { margin: 0; color: var(--cocoa); font-size: 17px; line-height: 1.6; }

.about-section { position: relative; background: var(--ivory); }
/* Meet Candi links land with the section scrolled through to its end: the anchor sits one viewport (less the header offset) above the section's foot. */
.about-anchor { position: absolute; bottom: calc(100svh - 104px); width: 1px; height: 1px; pointer-events: none; }
.about-stage { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 100svh; overflow: hidden; }
.about-stage::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(248,245,239,.8) 0%, rgba(248,245,239,.7) 30%, rgba(248,245,239,.46) 44%, rgba(248,245,239,.12) 55%, transparent 63%); }
.about-artwork { position: absolute; z-index: 0; inset: 0; margin: 0; }
.about-artwork-rise { display: none; }
.about-portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.55) 70px, #000 180px); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.55) 70px, #000 180px); }
.about-grid { position: relative; z-index: 2; width: min(100% - 112px, 1320px); }
.about-copy { width: min(52%, 660px); max-width: 660px; }
.about-copy h2 { font-size: clamp(57px, 5vw, 76px); }
.about-lead { margin: 32px 0 19px; font: 400 clamp(24px, 2.3vw, 32px)/1.38 var(--display); color: var(--cocoa); }
.about-copy > p:not(.section-marker):not(.about-lead):not(.about-note) { max-width: 610px; color: var(--cocoa); font-size: 17px; line-height: 1.8; }
.about-cta { margin-top: 30px; }

@media (min-width: 761px) {
  .approach-section { position: relative; isolation: isolate; overflow: hidden; background: transparent; }
  .approach-section::before { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, transparent 0, rgba(248,245,239,.38) 150px, var(--ivory) 360px); pointer-events: none; }
  .approach-visual { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.15) 55px, #000 250px, #000 calc(100% - 340px), rgba(0,0,0,.45) calc(100% - 170px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.15) 55px, #000 250px, #000 calc(100% - 340px), rgba(0,0,0,.45) calc(100% - 170px), transparent 100%); }
  .approach-visual picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .approach-visual picture img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: left center; }
  .approach-visual::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(248,245,239,.78) 49%, rgba(248,245,239,.91) 64%, rgba(248,245,239,.9) 100%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 46%); mask-image: linear-gradient(90deg, transparent 28%, #000 46%); }
  .approach-visual-caption { position: absolute; z-index: 3; left: clamp(28px, 5vw, 76px); bottom: 31px; margin: 0; color: var(--bronze); }
  .approach-copy { position: relative; z-index: 2; grid-column: 2; }

  /* The approach room softens into a blur as it dissolves, so it mixes with the marble rising beneath it. */
  .approach-visual::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(180deg, transparent calc(100% - 460px), #000 calc(100% - 160px)); mask-image: linear-gradient(180deg, transparent calc(100% - 460px), #000 calc(100% - 160px)); }

  /* Meet Candi rises into the approach scene's empty tail (below the CTA): its section starts one seam early,
     transparent there, so the two textures crossfade instead of meeting in a band of flat ivory. */
  .about-section { z-index: 1; margin-top: calc(-1 * var(--about-seam)); background: linear-gradient(transparent var(--about-seam), var(--ivory) var(--about-seam)); }
  /* The portrait is shown at its full height (never cropped at the blazer), so on landscape screens the section
     runs a little past one viewport. The copy, caption and nav landing stay framed on the first viewport. */
  .about-section { --about-photo-h: max(100svh, 66.6667vw); --about-overrun: calc(var(--about-photo-h) - 100svh); }
  .about-stage { min-height: calc(var(--about-photo-h) + var(--about-lead-in) + var(--about-seam)); padding-top: calc(130px + var(--about-lead-in) + var(--about-seam)); padding-bottom: var(--about-overrun); }
  .about-anchor { top: calc(var(--about-lead-in) + var(--about-seam) + 103px); bottom: auto; }
    .about-stage::before { -webkit-mask-image: linear-gradient(to bottom, transparent var(--about-seam), #000 calc(var(--about-seam) + var(--about-lead-in) + 140px)); mask-image: linear-gradient(to bottom, transparent var(--about-seam), #000 calc(var(--about-seam) + var(--about-lead-in) + 140px)); }
  /* The portrait keeps its framing and is never masked. Above it, a Candi-free marble strip cut from the same
     image continues its top edge, drawn at the portrait's exact scale, and dissolves upward into the room. */
  .about-artwork { inset: calc(var(--about-lead-in) + var(--about-seam)) 0 0; container-type: size; }
  .about-portrait { object-position: center top; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 150px), rgba(0,0,0,.6) calc(100% - 70px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 150px), rgba(0,0,0,.6) calc(100% - 70px), transparent 100%); }
  .about-artwork-rise { position: absolute; left: 50%; bottom: 100%; display: block; width: max(100cqw, 150cqh); max-width: none; height: min(calc(max(100cqw, 150cqh) * .234375), calc(var(--about-lead-in) + var(--about-seam))); object-fit: cover; object-position: center bottom; transform: translateX(-50%); pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000 0, rgba(0,0,0,.86) 26%, rgba(0,0,0,.58) 54%, rgba(0,0,0,.26) 80%, transparent 100%); mask-image: linear-gradient(to top, #000 0, rgba(0,0,0,.86) 26%, rgba(0,0,0,.58) 54%, rgba(0,0,0,.26) 80%, transparent 100%); }
}

@media (min-width: 1181px) and (min-height: 740px) and (prefers-reduced-motion: no-preference) {
  .approach-scroll-active .approach-section { height: calc(250svh + var(--approach-tail)); overflow: clip; }
  .approach-scroll-active .approach-stage { position: sticky; top: 0; height: calc(100svh + var(--approach-tail)); min-height: 0; padding-block: calc(90px + clamp(24px, 4vh, 56px)) calc(clamp(28px, 5vh, 64px) + var(--approach-tail)); }
  .approach-scroll-active .approach-grid { height: 100%; }
  .approach-scroll-active .approach-intro { opacity: var(--approach-intro-opacity, 1); transform: translateY(var(--approach-intro-y, 0px)); will-change: opacity, transform; }
  .approach-scroll-active .approach-path { opacity: var(--approach-path-opacity, 1); transform: translateY(calc(18px * (1 - var(--approach-path-opacity, 1)))); will-change: opacity, transform; }

  /* The pinned stage is exactly one viewport, so the copy scales with its height and always fits. */
  .approach-scroll-active .approach-section .section-marker { margin-bottom: clamp(14px, 2.6vh, 30px); }
  .approach-scroll-active .approach-copy h2 { font-size: clamp(42px, min(3.9vw, 5.8vh), 58px); }
  .approach-scroll-active .approach-copy .section-lead { margin-top: clamp(14px, 2.4vh, 27px); font-size: 17px; line-height: 1.6; }
  .approach-scroll-active .approach-steps { margin-block: clamp(18px, 3.6vh, 43px) clamp(14px, 2.6vh, 29px); }
  .approach-scroll-active .approach-step { padding-block: clamp(9px, 1.8vh, 21px) clamp(8px, 1.6vh, 19px); }
  .approach-scroll-active .approach-step h3 { font-size: clamp(22px, 2.8vh, 26px); }
  .approach-scroll-active .approach-step p { font-size: clamp(16px, 1.9vh, 17px); line-height: 1.5; }
}


.professionals-section { position: relative; isolation: isolate; overflow: clip; background: var(--ivory); }
.professionals-anchor { position: absolute; top: 0; width: 1px; height: 1px; pointer-events: none; }
.professionals-material { position: absolute; z-index: -1; inset: 0; background: var(--sand) url("assets/professionals-texture.webp") right center / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.45) 150px, #000 380px, #000 calc(100% - 240px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.45) 150px, #000 380px, #000 calc(100% - 240px), transparent 100%); }
.professionals-material::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250,248,243,.94) 0%, rgba(250,248,243,.9) 44%, rgba(250,248,243,.55) 68%, rgba(250,248,243,.2) 100%); }
.professionals-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: clamp(56px, 6vw, 100px); align-items: start; }
.professionals-main h2 { max-width: 690px; }
.professionals-lead { max-width: 640px; margin: 30px 0 0; color: var(--cocoa); font-size: 19px; line-height: 1.75; }
.professionals-subhead { margin: 0 0 26px; font: 500 28px/1.25 var(--display); letter-spacing: -.01em; }
.referral-process { margin-top: 76px; }
.referral-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin: 0; padding: 0; list-style: none; }
.referral-steps li { padding-top: 22px; border-top: 1px solid rgba(124,95,51,.34); }
.referral-steps .step-index { display: block; margin-bottom: 12px; }
.referral-steps h4 { margin: 0 0 8px; font: 500 23px/1.25 var(--display); }
.referral-steps p { margin: 0; color: var(--cocoa); font-size: 17px; line-height: 1.6; }
.scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 72px; }
.scope-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.scope-list li { position: relative; padding: 15px 0 15px 30px; border-bottom: 1px solid var(--line); color: var(--cocoa); font-size: 17px; line-height: 1.55; }
.scope-list li::before { content: ""; position: absolute; left: 2px; top: 25px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.scope-list.is-outside li::before { top: 28px; width: 11px; height: 1px; border-radius: 0; background: var(--taupe); }
.professionals-note { max-width: 640px; margin: 30px 0 0; color: var(--taupe); font-size: 14px; line-height: 1.55; }

.referral-card { position: sticky; top: 124px; padding: 40px 36px 36px; background: var(--linen); border: 1px solid rgba(124,95,51,.17); border-radius: 3px; box-shadow: 0 34px 70px -34px rgba(52,42,29,.34), 0 3px 10px rgba(52,42,29,.05); }
.referral-card::before { content: ""; position: absolute; top: -1px; left: 40px; right: 40px; height: 2px; background: linear-gradient(90deg, rgba(158,143,203,.55), rgba(127,168,223,.55) 30%, rgba(111,194,174,.5) 55%, rgba(217,188,132,.85) 80%, rgba(176,137,79,.9)); }
.referral-card h3 { margin: 0; font: 500 34px/1.15 var(--display); letter-spacing: -.015em; }
.referral-card > p { margin: 14px 0 0; color: var(--cocoa); font-size: 17px; line-height: 1.6; }
.referral-contact { margin: 28px 0 0; border-top: 1px solid var(--line); }
.referral-contact div { display: grid; gap: 4px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.referral-contact dt { color: var(--taupe); font-size: 14px; font-weight: 600; }
.referral-contact dd { margin: 0; color: var(--espresso); font-size: 18px; }
.referral-sheet { display: grid; grid-template-columns: 74px 1fr; gap: 20px; align-items: center; margin-top: 30px; }
.sheet-thumb { position: relative; height: 96px; padding: 11px 10px; background: #fff; border: 1px solid rgba(124,95,51,.2); box-shadow: 0 10px 20px -10px rgba(52,42,29,.3); transform: rotate(-2.5deg); }
.sheet-thumb img { width: 42px; height: auto; }
.sheet-thumb span { display: block; height: 3px; margin-top: 6px; background: rgba(124,95,51,.2); }
.sheet-thumb span:nth-of-type(1) { width: 70%; margin-top: 9px; background: rgba(176,137,79,.6); }
.sheet-thumb span:nth-of-type(3) { width: 82%; }
.sheet-thumb span:nth-of-type(5) { width: 58%; }
.referral-sheet .button { width: 100%; }
.referral-sheet-meta { grid-column: 2; margin: -8px 0 0; color: var(--taupe); font-size: 14px; }
.referral-book { width: 100%; margin-top: 24px; }

.access-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(370px, .8fr); gap: clamp(100px, 12vw, 210px); align-items: start; }
/* Meet Candi, LSA & payment and For professionals read as one continuous surface: ivory out of the portrait,
   a brighter linen middle for the practical copy, ivory again as the marble surfaces beneath the referral section. */
.access-section { background: linear-gradient(180deg, var(--ivory) 0, var(--linen) 260px, var(--linen) calc(100% - 300px), var(--ivory) 100%); }
.access-grid h2 { max-width: 650px; }
.access-copy { padding-top: 66px; }
.access-block { padding: 0 0 24px; margin: 0 0 29px; border-bottom: 1px solid var(--line); }
.access-block h3 { margin: 0 0 12px; font: 500 25px/1.25 var(--display); }
.access-block p { margin: 0; color: var(--cocoa); font-size: 17px; line-height: 1.75; }

.closing-section { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0 160px; background: rgba(248,245,239,.73); -webkit-backdrop-filter: blur(8px) saturate(.8); backdrop-filter: blur(8px) saturate(.8); text-align: center; }
.closing-section::before { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 76%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(176,137,79,.58), transparent); }
.closing-light { position: absolute; z-index: -1; inset: auto 20% -300px; height: 540px; border-radius: 50%; background: conic-gradient(from 210deg, rgba(158,143,203,.16), rgba(127,168,223,.16), rgba(111,194,174,.11), rgba(230,169,192,.15), rgba(217,188,132,.10), rgba(158,143,203,.16)); filter: blur(110px); opacity: .72; }
.closing-section::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 140px; background: linear-gradient(180deg, rgba(248,245,239,0), var(--ivory)); pointer-events: none; }
.closing-inner { display: flex; flex-direction: column; align-items: center; }
.closing-section h2 { max-width: 850px; font-size: clamp(50px, 4.6vw, 73px); }
.closing-section p { max-width: 520px; margin: 28px 0 0; color: var(--cocoa); font-size: 18px; line-height: 1.7; }
.closing-actions { justify-content: center; margin-top: 35px; }

.site-footer { position: relative; padding: 96px 0 40px; background: linear-gradient(180deg, var(--ivory) 0%, #f3eee5 100%); color: var(--espresso); }
.site-footer::before { content: ""; position: absolute; top: 0; left: 50%; width: min(100% - 112px, 1320px); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(176,137,79,.55) 18%, rgba(176,137,79,.55) 82%, transparent); }
.site-footer::after { content: ""; position: absolute; top: 0; left: 50%; width: 38%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(158,143,203,.55), rgba(127,168,223,.55), rgba(111,194,174,.5), rgba(230,169,192,.45), transparent); }
.footer-top { display: grid; grid-template-columns: minmax(300px, 1.4fr) repeat(3, minmax(160px, .8fr)); gap: clamp(40px, 5vw, 88px); padding-bottom: 72px; }
.footer-brand img { width: 230px; height: auto; }
.footer-brand p { max-width: 380px; margin: 24px 0 0; color: var(--cocoa); font: 400 23px/1.4 var(--display); text-wrap: balance; }
.footer-brand em { color: var(--bronze); }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 8px; }
.footer-column h2 { margin: 0 0 8px; color: var(--bronze); font: 700 13px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.footer-column a, .footer-column button { position: relative; padding: 2px 0; border: 0; background: none; color: var(--cocoa); font-size: 16px; line-height: 1.5; text-align: left; transition: color .25s ease; }
.footer-column a::after, .footer-column button::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); transition: right .35s var(--ease); }
.footer-column a:hover, .footer-column button:hover { color: var(--bronze); }
.footer-column a:hover::after, .footer-column button:hover::after, .footer-column a:focus-visible::after, .footer-column button:focus-visible::after { right: 0; }
.footer-column p { margin: 0; color: var(--cocoa); font-size: 16px; line-height: 1.5; }
.footer-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 40px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--taupe); font-size: 14px; line-height: 1.5; }
.footer-bottom p { margin: 0; }
.footer-scope { justify-self: center; font-style: italic; }
.footer-top-link { display: inline-flex; align-items: center; gap: 12px; color: var(--cocoa); font-size: 14px; font-weight: 600; transition: color .25s ease; }
.footer-top-link:hover { color: var(--bronze); }
.arrow-up { transform: rotate(-90deg); }
.footer-prototype { margin: 22px 0 0; color: var(--taupe); font-size: 13px; opacity: .8; }

.preview-dialog { width: min(480px, calc(100% - 40px)); max-height: calc(100vh - 40px); padding: 47px 43px 42px; border: 1px solid rgba(124,95,51,.25); border-radius: 4px; background: var(--ivory); color: var(--espresso); box-shadow: 0 25px 80px rgba(31,24,17,.17); }
.preview-dialog::backdrop { background: rgba(31,25,18,.52); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.preview-dialog .section-marker { margin-bottom: 21px; }
.preview-dialog h2 { font-size: 38px; line-height: 1.14; }
.preview-dialog > p:not(.section-marker) { margin: 19px 0 31px; color: var(--cocoa); font-size: 16px; line-height: 1.68; }
.dialog-close { position: absolute; top: 15px; right: 17px; width: 38px; height: 38px; border: 0; background: transparent; color: var(--cocoa); }
.dialog-close span::before, .dialog-close span::after { content: ""; position: absolute; top: 18px; left: 10px; width: 18px; height: 1px; background: currentColor; }
.dialog-close span::before { transform: rotate(45deg); }
.dialog-close span::after { transform: rotate(-45deg); }
.dialog-close:hover { color: var(--bronze); }

@media (max-width: 1310px) {
  .header-inner { width: min(100% - 46px, 1510px); gap: 24px; }
  .brand { width: 204px; flex-basis: 204px; }
  .is-scrolled .brand { width: 176px; flex-basis: 176px; }
  .main-nav { gap: 20px; }
  :is(.main-nav > a, .nav-services-link) { font-size: 13px; }
  .header-action { font-size: 12px; padding-inline: 16px; }
  .header-actions { gap: 10px; }
  .page-frame { width: min(100% - 92px, 1320px); }
  .hero-copy { width: 51%; }
  .hero-copy h1 { font-size: clamp(60px, 5.5vw, 80px); }
  .approach-grid { gap: 80px; }
}

@media (max-width: 1180px) {
  .header-actions { gap: 8px; }
  .header-action { padding-inline: 14px; }
  .header-checkout .arrow-icon { display: none; }
}

@media (max-width: 1080px) {
  .main-nav { display: none; }
  .hero-stage, .hero-content { min-height: 690px; }
  .hero-copy { width: 56%; }
  .services-intro, .services-pathways { width: min(100%, 62%); }
  .service-row { column-gap: 18px; }
  .approach-grid, .access-grid { gap: 55px; }
  .professionals-layout { grid-template-columns: 1fr; }
  .referral-card { position: relative; top: 0; max-width: 560px; }
  .approach-grid { grid-template-columns: .85fr 1fr; }
}

/* A dedicated mobile design pass is intentionally deferred. This is only a safe fallback. */
@media (max-width: 760px) {
  .page-frame { width: min(100% - 40px, 1320px); }
  :root { --header-h: 84px; --header-h-scrolled: 68px; }
  .header-inner { width: min(100% - 32px, 1510px); }
  .brand { width: 190px; flex-basis: 190px; }
  .is-scrolled .brand { width: 160px; flex-basis: 160px; }
  .header-action { min-height: 40px; }
  .header-book { display: none; }
  .hero-journey { height: auto; min-height: 0; }
  .hero-stage { position: relative; height: min(920px, 100svh); min-height: 680px; }
  .page-atmosphere { position: absolute; height: 100svh; min-height: 680px; }
  .atmosphere-media { background-position: 62% center; }
  .atmosphere-tone { background: linear-gradient(90deg, rgba(248,245,239,.95) 0%, rgba(248,245,239,.7) 66%, rgba(248,245,239,.15)); }
  .services-section, .closing-section { background: var(--ivory); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .services-section::before { content: none; }
  .hero-content { align-items: end; padding: 120px 0 89px; min-height: 0; }
  .hero-copy { width: 100%; max-width: 540px; padding: 0; }
  .hero-copy h1 { font-size: clamp(44px, 9vw, 70px); }
  .hero-copy p { font-size: 16px; margin-top: 20px; }
  .hero-actions { margin-top: 25px; }
  .hero-credentials { position: static; width: 100%; margin-top: 34px; grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .section-shell { padding-block: 85px; }
  .section-intro, .approach-grid, .access-grid, .referral-steps, .scope-grid { grid-template-columns: 1fr; gap: 30px; }
  h2 { font-size: clamp(41px, 7vw, 56px); }
  .services-intro, .services-pathways { width: 100%; }
  .services-intro { padding-bottom: 50px; }
  .service-row { grid-template-columns: 1fr 42px; gap: 10px; }
  .service-title { font-size: 27px; }
  .service-description { grid-column: 1; grid-row: 2; font-size: 15px; }
  .service-arrow { grid-column: 2; grid-row: 1 / 3; }
  .approach-visual { max-width: 550px; }
  .approach-visual img { height: auto; }
  .approach-copy { padding-top: 15px; }
  .about-stage { min-height: 750px; }
  .about-stage::before { background: rgba(248,245,239,.88); }
  .about-grid { width: min(100% - 40px, 1320px); }
  .about-copy { width: 100%; }
    .access-copy { padding-top: 0; }
  .closing-section { padding-block: 105px; }
  .footer-top, .footer-bottom { grid-template-columns: 1fr; gap: 32px; }
  .footer-scope { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .atmosphere-media { filter: none !important; transform: none !important; }
  .atmosphere-wash { opacity: 0 !important; }
  .hero-copy { opacity: 1 !important; transform: none !important; }
}

/* Consultation form (consult.js): the photograph of what the visitor was looking at on the left, a short form on
   the right. It settles up out of a softened page, the same settle curve as everything else. */
.consult-dialog { width: min(1100px, calc(100% - 40px)); max-width: none; max-height: calc(100vh - 40px); margin: auto; padding: 0; overflow: auto; border: 1px solid rgba(176,137,79,.42); border-radius: 4px; background: var(--ivory); color: var(--espresso); box-shadow: 0 40px 90px -40px rgba(31,25,18,.55); }
.consult-dialog::backdrop { background: rgba(31,25,18,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.consult-dialog[open] { animation: kh-lift .7s var(--ease-settle) both; }
.consult-dialog[open]::backdrop { animation: kh-fade .5s ease both; }
@keyframes kh-lift { from { opacity: 0; transform: translateY(14px); } }
@keyframes kh-fade { from { opacity: 0; } }
.consult-card { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); min-height: 688px; }
.consult-visual { position: relative; margin: 0; overflow: hidden; background: var(--sand); }
.consult-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.consult-visual::after { content: ""; position: absolute; inset: 0; box-shadow: inset -1px 0 0 rgba(176,137,79,.28); pointer-events: none; }
.consult-body { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 34px 52px 28px; }
.consult-body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(158,143,203,.7), rgba(127,168,223,.7), rgba(111,194,174,.65), rgba(230,169,192,.6), var(--gold-light)); }
.consult-body .section-marker { margin: 0 0 14px; }
.consult-body h2 { margin: 0; font: 400 42px/1.06 var(--display); letter-spacing: -.015em; }
.consult-body h2 em { color: var(--bronze); }
.consult-regarding { display: flex; align-items: baseline; gap: 14px; margin: 14px 0 0; padding: 7px 0; border-block: 1px solid rgba(124,95,51,.2); color: var(--bronze); font: italic 400 21px/1.3 var(--display); }
.consult-regarding[hidden] { display: none; }
.consult-regarding span { flex: 0 0 auto; color: var(--taupe); font: 700 11.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.consult-regarding strong { font-weight: 400; }
.consult-lead { max-width: 54ch; margin: 12px 0 0; color: var(--cocoa); font-size: 15.5px; line-height: 1.6; }
.consult-form { display: grid; gap: 12px; margin-top: 18px; }
.consult-field { display: grid; gap: 7px; }
.consult-field label { color: var(--espresso); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.consult-field input, .consult-phone select { width: 100%; min-height: 46px; padding: 0 16px; border: 1px solid rgba(124,95,51,.34); border-radius: 3px; background: var(--linen); color: var(--espresso); font: 400 16px/1.2 var(--body); transition: border-color .3s ease, box-shadow .3s ease; }
.consult-phone select { padding-right: 34px; -webkit-appearance: none; appearance: none; background: var(--linen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237c5f33' stroke-width='1.4'/%3E%3C/svg%3E") right 12px center / 12px no-repeat; cursor: pointer; }
.consult-field input::placeholder { color: #a39784; }
.consult-field input:focus, .consult-phone select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,137,79,.16); }
.consult-field input[aria-invalid="true"] { border-color: #a3552f; }
.consult-phone { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 10px; }
.consult-hint { color: var(--taupe); font-size: 13px; line-height: 1.45; }
.consult-err { color: #9a4a26; font-size: 13px; line-height: 1.4; }
.consult-err[hidden] { display: none; }
.consult-consent { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--cocoa); font-size: 14px; line-height: 1.5; cursor: pointer; }
.consult-consent input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.consult-box { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1px solid rgba(124,95,51,.5); border-radius: 2px; background: var(--linen); transition: background-color .25s ease, border-color .25s ease; }
.consult-consent input:checked + .consult-box { border-color: var(--bronze); background: var(--bronze); }
.consult-consent input:checked + .consult-box::after { content: ""; width: 9px; height: 5px; border-left: 1.5px solid var(--linen); border-bottom: 1.5px solid var(--linen); transform: translateY(-1px) rotate(-45deg); }
.consult-consent input:focus-visible + .consult-box { outline: 2px solid var(--bronze); outline-offset: 2px; }
.consult-submit { width: 100%; min-height: 54px; margin-top: 4px; }
.consult-submit[disabled] { opacity: .72; cursor: progress; transform: none; }
.consult-status { margin: 0; color: var(--bronze); font-size: 14px; line-height: 1.5; }
.consult-status:empty { display: none; }
.consult-fallback { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 3px; border-bottom: 1px solid var(--gold); color: var(--bronze); font-size: 15px; font-weight: 600; }
.consult-fallback[hidden] { display: none; }
.consult-note { margin: 0; color: var(--taupe); font-size: 13px; line-height: 1.55; }
.consult-close { top: 10px; right: 12px; }
.is-sent .consult-status { color: var(--espresso); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Cookie notice: one slim ivory bar centred at the foot of the screen, as on the Gateway site, so it reads as part
   of the page rather than a card dropped in a corner. Preferences use the dialog language. */
.cookie-notice { position: fixed; z-index: 60; left: 50%; bottom: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: center; width: min(calc(100% - 40px), 900px); padding: 15px 18px 15px 26px; translate: -50% 0; border: 1px solid rgba(176,137,79,.42); border-radius: 4px; background: rgba(251,249,245,.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 24px 50px -30px rgba(31,25,18,.45); animation: kh-lift .8s var(--ease-settle) both; }
.cookie-notice[hidden] { display: none; }
.cookie-notice strong { display: block; margin-bottom: 3px; color: var(--espresso); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.cookie-notice p { margin: 0; color: var(--cocoa); font-size: 13.5px; line-height: 1.5; }
.cookie-notice-actions { display: flex; align-items: center; gap: 16px; }
.cookie-notice .button { min-height: 42px; padding: 0 18px; font-size: 11.5px; }
.cookie-link, .footer-cookie { padding: 0; border: 0; background: none; color: var(--cocoa); font: inherit; text-decoration: underline; text-decoration-color: rgba(176,137,79,.55); text-underline-offset: 3px; transition: color .25s ease; }
.cookie-link { font-size: 13px; }
.cookie-link:hover, .footer-cookie:hover { color: var(--bronze); }
.cookie-preferences { width: min(540px, calc(100% - 40px)); max-height: calc(100vh - 40px); padding: 44px 42px 34px; border: 1px solid rgba(176,137,79,.42); border-radius: 4px; background: var(--ivory); color: var(--espresso); box-shadow: 0 40px 90px -40px rgba(31,25,18,.55); }
.cookie-preferences::backdrop { background: rgba(31,25,18,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cookie-preferences[open] { animation: kh-lift .6s var(--ease-settle) both; }
.cookie-preferences .section-marker { margin: 0 0 14px; }
.cookie-preferences h2 { margin: 0; font: 400 36px/1.1 var(--display); }
.cookie-preferences h2 em { color: var(--bronze); }
.cookie-preferences > p { margin: 14px 0 20px; color: var(--cocoa); font-size: 15px; line-height: 1.6; }
.cookie-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(124,95,51,.2); }
.cookie-option h3 { margin: 0; font: 400 20px/1.3 var(--display); }
.cookie-option p { margin: 4px 0 0; color: var(--taupe); font-size: 14px; line-height: 1.5; }
.cookie-state { color: var(--bronze); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cookie-switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.cookie-switch input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cookie-switch span { position: absolute; inset: 0; border-radius: 13px; background: rgba(124,95,51,.24); transition: background-color .3s ease; }
.cookie-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--linen); box-shadow: 0 1px 3px rgba(31,25,18,.25); transition: transform .35s var(--ease); }
.cookie-switch input:checked + span { background: var(--bronze); }
.cookie-switch input:checked + span::after { transform: translateX(20px); }
.cookie-switch input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.cookie-preferences-foot { display: flex; justify-content: flex-end; padding-top: 18px; border-top: 1px solid rgba(124,95,51,.2); }

@media (max-width: 760px) {
  .consult-card { grid-template-columns: 1fr; min-height: 0; }
  .consult-visual { height: 150px; }
  .consult-body { padding: 30px 22px 26px; }
  .consult-body h2 { font-size: 34px; }
  .consult-phone { grid-template-columns: 124px minmax(0, 1fr); }
  .consult-phone select { padding-left: 12px; padding-right: 28px; background-position: right 10px center; }
  .cookie-notice { bottom: 16px; width: calc(100% - 32px); grid-template-columns: 1fr; padding: 16px 18px; }
  .cookie-preferences { padding: 34px 24px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .consult-dialog[open], .consult-dialog[open]::backdrop, .cookie-notice, .cookie-preferences[open] { animation: none; }
}

/* Privacy notice (privacy.html): a reading page. The title and a numbered index hold still on the left while the
   notice reads down the right in one comfortable column, the same numbered hairline sections as the Gateway terms. */
.legal-page main { background: var(--ivory); }
.legal-shell { padding: calc(var(--header-h) + 64px) 0 128px; }
.legal-layout { width: min(100% - 84px, 1180px); margin: auto; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(56px, 8vw, 112px); align-items: start; }
.legal-aside { position: sticky; top: calc(var(--header-h-scrolled) + 48px); }
.legal-aside .section-marker { margin: 0 0 18px; }
.legal-aside h1 { margin: 0; font: 400 64px/1.02 var(--display); letter-spacing: -.02em; }
.legal-aside h1 em { color: var(--bronze); }
.legal-effective { margin: 22px 0 0; color: var(--taupe); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.legal-lede { margin: 14px 0 0; color: var(--cocoa); font-size: 17px; line-height: 1.6; }
.legal-index { display: grid; margin-top: 36px; border-top: 1px solid rgba(124,95,51,.22); }
.legal-index a { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 13px 0; border-bottom: 1px solid rgba(124,95,51,.14); color: var(--cocoa); font-size: 15px; transition: color .3s ease, padding .45s var(--ease-settle); }
.legal-index a span { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.legal-index a:hover { color: var(--bronze); padding-left: 6px; }
.legal-body { max-width: 680px; }
.legal-preamble { margin: 0 0 12px; color: var(--cocoa); font: italic 400 23px/1.5 var(--display); }
.legal-section { padding: 40px 0 36px; border-top: 1px solid rgba(124,95,51,.2); scroll-margin-top: calc(var(--header-h-scrolled) + 32px); }
.legal-section:first-of-type { margin-top: 36px; }
.legal-section h2 { margin: 0 0 18px; font: 400 32px/1.15 var(--display); letter-spacing: -.01em; }
.legal-section h2 span { display: block; margin-bottom: 12px; color: var(--gold); font: 700 12px/1 var(--body); letter-spacing: .16em; }
.legal-section p, .legal-section li { color: var(--cocoa); font-size: 16.5px; line-height: 1.75; }
.legal-section p { margin: 0 0 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section strong { color: var(--espresso); font-weight: 600; }
.legal-section ul { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.legal-section ul:last-child { margin-bottom: 0; }
.legal-section li { position: relative; padding-left: 26px; }
.legal-section li::before { content: ""; position: absolute; top: .9em; left: 0; width: 12px; height: 1px; background: var(--gold); }
.legal-cookie { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--gold); background: none; color: var(--bronze); font: 600 15px/1.3 var(--body); cursor: pointer; transition: color .3s ease; }
.legal-cookie:hover { color: var(--espresso); }
.legal-cookie:hover .arrow-icon { transform: translateX(4px); }
.legal-contact { padding-top: 28px; border-top: 1px solid rgba(124,95,51,.2); color: var(--taupe); font-size: 15px; line-height: 1.6; }
.legal-contact a, .consult-note a, .cookie-notice p a { color: var(--bronze); text-decoration: underline; text-decoration-color: rgba(176,137,79,.55); text-underline-offset: 3px; }
.cookie-notice p a { font-size: inherit; }
@media (max-width: 860px) {
  .legal-shell { padding: calc(var(--header-h) + 32px) 0 88px; }
  .legal-layout { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 24px; }
  .legal-aside { position: static; }
  .legal-aside h1 { font-size: 46px; }
  .legal-preamble { font-size: 20px; }
  .legal-section h2 { font-size: 27px; }
}

/* Checkout (consult.js): every service in one quiet list, a tab per pathway. Choosing a row opens the request
   form for that service; the retreat row leaves for its own site. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.checkout-dialog { width: min(1120px, calc(100% - 40px)); max-width: none; max-height: calc(100vh - 40px); margin: max(20px, 5vh) auto auto; padding: 42px 56px 36px; overflow: auto; border: 1px solid rgba(176,137,79,.42); border-radius: 4px; background: var(--ivory); color: var(--espresso); box-shadow: 0 40px 90px -40px rgba(31,25,18,.55); }
.checkout-dialog::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(158,143,203,.7), rgba(127,168,223,.7), rgba(111,194,174,.65), rgba(230,169,192,.6), var(--gold-light)); }
.checkout-dialog::backdrop { background: rgba(31,25,18,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.checkout-dialog[open] { animation: kh-lift .7s var(--ease-settle) both; }
.checkout-dialog[open]::backdrop { animation: kh-fade .5s ease both; }
.checkout-dialog .section-marker { margin: 0 0 14px; }
.checkout-dialog h2 { margin: 0; font: 400 44px/1.06 var(--display); letter-spacing: -.015em; }
.checkout-dialog h2 em { color: var(--bronze); }
.checkout-lead { max-width: 80ch; margin: 12px 0 0; color: var(--cocoa); font-size: 16px; line-height: 1.6; }
.checkout-tabs { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 26px; border-bottom: 1px solid rgba(124,95,51,.2); }
.checkout-tab { position: relative; padding: 0 0 14px; border: 0; background: none; color: var(--taupe); font: 700 12px/1 var(--body); letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transition: color .3s ease; }
.checkout-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-settle); }
.checkout-tab:hover { color: var(--bronze); }
.checkout-tab[aria-selected="true"] { color: var(--espresso); }
.checkout-tab[aria-selected="true"]::after { transform: scaleX(1); }
.checkout-tab:focus-visible { outline-offset: 6px; }
.checkout-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; margin: 6px 0 0; padding: 0; list-style: none; }
.checkout-list li { border-bottom: 1px solid rgba(124,95,51,.14); }
.checkout-list.is-entering li { animation: kh-row .6s var(--ease-settle) calc(var(--i) * 45ms) both; }
@keyframes kh-row { from { opacity: 0; transform: translateY(8px); } }
.checkout-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto 36px; gap: 18px; align-items: center; width: 100%; padding: 14px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.checkout-thumb { position: relative; width: 62px; height: 62px; overflow: hidden; border: 1px solid rgba(176,137,79,.35); background: var(--sand); }
.checkout-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-settle); }
.checkout-name { display: block; color: var(--espresso); font: 400 19px/1.25 var(--display); transition: color .3s ease; }
.checkout-meta { display: block; margin-top: 5px; color: var(--taupe); font-size: 13.5px; line-height: 1.4; }
.checkout-price { color: var(--bronze); font: italic 400 15px/1.2 var(--display); white-space: nowrap; }
.checkout-price strong { font-style: normal; font-weight: 500; font-size: 18px; }
.checkout-arrow { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(124,95,51,.45); border-radius: 50%; color: var(--bronze); transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
.arrow-icon.arrow-out { transform: rotate(-45deg); }
.checkout-row:hover .checkout-name, .checkout-row:focus-visible .checkout-name { color: var(--bronze); }
.checkout-row:hover .checkout-thumb img { transform: scale(1.06); }
.checkout-row:hover .checkout-arrow, .checkout-row:focus-visible .checkout-arrow { background: var(--bronze); border-color: var(--bronze); color: var(--linen); }
.checkout-row:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

/* The request card's other two modes: checkout request (price on the Regarding line, "All services" back link)
   and referral (a wider form side, two-column fields in two labelled groups). Success replaces the form. */
.consult-back { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin: 0 0 16px; padding: 0; border: 0; background: none; color: var(--bronze); font: 700 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color .3s ease; }
.consult-back[hidden], .consult-body .section-marker[hidden] { display: none; }
.consult-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .45s var(--ease); }
.consult-back:hover { color: var(--espresso); }
.consult-back:hover svg { transform: translateX(-3px); }
.consult-stage { display: flex; flex-direction: column; }
.consult-form[hidden] { display: none; }
.consult-stage[hidden] { display: none; }
.consult-price { margin-left: auto; color: var(--bronze); font: italic 400 16px/1.2 var(--display); white-space: nowrap; }
.consult-price strong { font-style: normal; font-weight: 500; font-size: 19px; }
.consult-price:empty { display: none; }
.consult-optional { margin-left: 6px; color: var(--taupe); font-size: 12.5px; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
.consult-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.consult-select { width: 100%; min-height: 46px; padding: 0 34px 0 16px; border: 1px solid rgba(124,95,51,.34); border-radius: 3px; -webkit-appearance: none; appearance: none; background: var(--linen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237c5f33' stroke-width='1.4'/%3E%3C/svg%3E") right 12px center / 12px no-repeat; color: var(--espresso); font: 400 16px/1.2 var(--body); cursor: pointer; transition: border-color .3s ease, box-shadow .3s ease; }
.consult-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,137,79,.16); }
.consult-dialog[data-mode="referral"] .consult-card { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
.referral-form { gap: 12px; }
.referral-form .consult-phone { grid-template-columns: 118px minmax(0, 1fr); }
.referral-form .consult-phone select { padding-left: 12px; padding-right: 28px; background-position: right 10px center; font-size: 15px; }
.referral-group { display: flex; align-items: center; gap: 14px; margin: 4px 0 -2px; color: var(--bronze); font: 700 11.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.referral-group::after { content: ""; flex: 1; height: 1px; background: rgba(124,95,51,.2); }
.referral-form .consult-err + .consult-submit, .referral-form .consult-consent + .consult-err { margin-top: -4px; }
.consult-done { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.consult-done[hidden] { display: none; }
.consult-done::before { content: ""; width: 54px; height: 54px; margin-bottom: 26px; border: 1px solid var(--gold); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8' fill='none' stroke='%237c5f33' stroke-width='1.3'/%3E%3C/svg%3E") center / 26px no-repeat; animation: kh-lift .8s var(--ease-settle) both; }
.consult-done h2 { outline: none; }
.consult-done .consult-lead { max-width: 44ch; margin-top: 16px; font-size: 16.5px; }
.consult-done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 32px; }
.consult-done-actions .button { min-width: 150px; }
.consult-alt { padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--gold); background: none; color: var(--bronze); font: 600 15px/1.3 var(--body); cursor: pointer; transition: color .3s ease; }
.consult-alt:hover { color: var(--espresso); }

/* Referral card: what a referral involves, then the form. */
.referral-send { width: 100%; margin-top: 30px; }
.referral-send + .referral-book { margin-top: 12px; }
@media (max-width: 760px) {
  .checkout-dialog { margin-top: 20px; padding: 36px 20px 26px; }
  .checkout-dialog h2 { font-size: 34px; }
  .checkout-tabs { gap: 12px 22px; }
  .checkout-list { grid-template-columns: 1fr; }
  .checkout-row { grid-template-columns: 56px minmax(0, 1fr) 32px; }
  .checkout-thumb { width: 56px; height: 56px; }
  .checkout-price { grid-column: 2; grid-row: 2; margin-top: -10px; }
  .checkout-arrow { grid-column: 3; grid-row: 1; width: 32px; height: 32px; }
  .consult-pair { grid-template-columns: 1fr; }
  .consult-dialog[data-mode="referral"] .consult-card { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-dialog[open], .checkout-dialog[open]::backdrop, .checkout-list.is-entering li, .consult-done::before { animation: none; }
}

/* Mobile block. The site is designed desktop first and the mobile pass is still to come, so below 1024px
   (the Altwealth deck's breakpoint) every page shows only this screen. It is the homepage hero told in one frame:
   the portrait runs edge to edge under an ivory mist that carries the logo, then dissolves into the mineral
   ground where the promise, the desktop note and a way to book sit. Dialogs and the cookie notice stay available. */
.mobile-block { display: none; }
@media (max-width: 1023px) {
  body > :not(.mobile-block):not(dialog):not(.cookie-notice) { display: none !important; }
  body { background: var(--ivory); }
  /* Pinned to the visible screen (inset: 0) rather than sized in viewport units: Chrome on iOS measures svh
     smaller than the screen it shows, which collapsed the block. It scrolls only if the screen is shorter than the copy. */
  .mobile-block { position: fixed; z-index: 1; inset: 0; isolation: isolate; display: flex; flex-direction: column; align-items: center; padding: 0 28px calc(44px + env(safe-area-inset-bottom)); overflow: hidden auto; background: var(--ivory); color: var(--espresso); text-align: center; }
  /* Mineral ground under the copy, fading out upward into the photograph's dissolve. */
  .mobile-block::after { content: ""; position: absolute; z-index: -2; inset: 42% 0 0; background: url("assets/professionals-texture.webp") center / cover; opacity: .55; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
  /* The portrait starts below the logo's ivory band and ends where the copy begins, so the headline only ever
     meets the dissolve, never the figure. */
  .mobile-block-photo { position: absolute; z-index: -1; top: 58px; left: 0; right: 0; height: max(46%, calc(100% - 300px)); margin: 0; }
  .mobile-block-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 18%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 58%, rgba(0,0,0,.55) 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 58%, rgba(0,0,0,.55) 78%, transparent 100%); animation: kh-focus 1.6s var(--ease-settle) both; }
  /* The same ivory mist the desktop header lays over the hero photograph. */
  .mobile-block-photo::after { content: ""; position: absolute; inset: 0 0 auto; height: 18%; background: linear-gradient(180deg, rgba(248,245,239,.6) 0%, rgba(248,245,239,0) 100%); }
  .mobile-block-logo { width: 168px; height: auto; margin-top: 14px; }
  .mobile-block-title { max-width: 14ch; margin: auto 0 0; font: 400 36px/1.1 var(--display); letter-spacing: -.02em; text-shadow: 0 0 28px rgba(248,245,239,.9); }
  .mobile-block-title em { color: var(--bronze); }
  .mobile-block-rule { width: 44px; height: 1px; margin: 22px 0 16px; background: var(--gold); }
  .mobile-block-note { margin: 0; color: var(--taupe); font-size: 11px; font-weight: 700; letter-spacing: .22em; line-height: 1.6; text-transform: uppercase; }
  .mobile-block-cta { margin-top: 26px; min-width: 240px; }
  .mobile-block > :not(.mobile-block-photo) { animation: kh-lift 1s var(--ease-settle) both; }
  .mobile-block-logo { animation-delay: .2s !important; }
  .mobile-block-title { animation-delay: .45s !important; }
  .mobile-block-rule, .mobile-block-note { animation-delay: .6s !important; }
  .mobile-block-cta { animation-delay: .72s !important; }
  @keyframes kh-focus { from { opacity: 0; filter: blur(12px); transform: scale(1.04); } }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .mobile-block-photo { top: 86px; height: calc(100% - 380px); }
  .mobile-block-photo img { object-position: 66% 22%; }
  .mobile-block-logo { width: 220px; margin-top: 22px; }
  .mobile-block-title { max-width: 16ch; font-size: 50px; }
}
/* Phones held sideways: no room for the portrait, so the card keeps just the logo and the copy. */
@media (max-width: 1023px) and (max-height: 520px) {
  .mobile-block { justify-content: center; padding-bottom: 24px; }
  .mobile-block-photo { display: none; }
  .mobile-block-logo { width: 150px; margin-top: 0; }
  .mobile-block-title { max-width: 22ch; margin: 18px 0 0; font-size: 30px; }
  .mobile-block-rule { margin: 16px 0 12px; }
  .mobile-block-cta { margin-top: 18px; }
}
@media (max-width: 380px) {
  .mobile-block-note { font-size: 10.5px; letter-spacing: .16em; }
  .mobile-block-title { font-size: 33px; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .mobile-block > *, .mobile-block-photo img { animation: none !important; }
}