/* Living archive: one window, a suspended portrait and an unfolding index. */
:root{--weight:cubic-bezier(.16,1,.3,1)}
body{background:radial-gradient(ellipse at 0 0,#fffaf2 0,transparent 65%),#f1ece4}
body:before{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.site-header{position:relative;z-index:3;padding:25px 0}.preview-note{background:#e4dfd6}
/* ——— HERO v2: encounter staged in light. Arch of living silk, type passing behind the subject. ——— */
:root{--gold:#a87f4e;--gold-soft:#c2a06f}
.home-encounter{position:relative;display:grid;grid-template-columns:47fr 53fr;gap:0;padding-top:34px;padding-bottom:0;min-height:max(660px,calc(100vh - 205px));isolation:isolate;overflow:clip}
.home-copy{position:relative;z-index:3;padding-top:12px;display:block}
.home-copy h1.encounter-title{margin:30px 0 24px;letter-spacing:-.055em;position:relative}
.encounter-title>span{font-size:clamp(28px,3.3vw,46px);display:block;letter-spacing:-.025em;margin-bottom:6px;font-weight:400}
.encounter-title em{font-size:clamp(96px,14.6vw,212px);line-height:.94;display:block;width:max-content;white-space:nowrap;font-weight:400;position:relative;z-index:1;transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--my,0)*-8px + var(--hy,0)*-0.05px),0);will-change:transform}
.encounter-title strong{font-weight:600}
.title-dot{font-weight:600;color:var(--gold);font-style:normal}
.home-intro{margin-top:26px;font-size:22px;line-height:1.45;max-width:21ch;position:relative;z-index:3}.home-copy .underlined{margin-top:22px}.home-footnote{display:none}
.hero-arch{position:absolute;z-index:0;left:1.5vw;bottom:0;width:min(44vw,640px);height:86%;pointer-events:none}
.arch-window{position:absolute;inset:0;display:block;border-radius:999px 999px 0 0;overflow:hidden;background:#e8e2d6;box-shadow:inset 0 0 0 1px #ffffff8c,0 30px 70px #2927241f}
.arch-window video{width:100%;height:112%;object-fit:cover;display:block;transform:translate3d(0,calc(var(--hy,0)*0.085px - 6%),0);filter:sepia(.22) saturate(1.12) contrast(1.06) brightness(.985);will-change:transform}
.arch-window:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#f1ece400 55%,#f1ece42e 100%),radial-gradient(120% 90% at calc(50% + var(--mx,0)*40%) calc(30% + var(--my,0)*30%),#fff3dd3d 0,transparent 60%);mix-blend-mode:soft-light}
.arch-echo{position:absolute;inset:-22px 26px 0 -26px;border:1px solid var(--gold-soft);border-bottom:0;border-radius:999px 999px 0 0;opacity:.5;transform:translate3d(calc(var(--mx,0)*8px),calc(var(--my,0)*5px),0)}
.hero-light{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(46vw 40vw at calc(38% + var(--mx,0)*22%) calc(38% + var(--my,0)*22%),#fff4de66 0,transparent 68%);mix-blend-mode:soft-light}
.hero-figure{position:absolute;z-index:2;left:max(-20px,2.2vw);bottom:0;width:min(41vw,600px);margin:0;transform:translate3d(calc(var(--mx,0)*22px),calc(var(--my,0)*12px + var(--hy,0)*0.075px),0);will-change:transform}
.hero-figure img{width:100%;height:auto;filter:drop-shadow(26px 34px 44px #29272433) drop-shadow(-14px 10px 60px #a87f4e21)}
.hero-figure figcaption{position:absolute;left:12px;bottom:18px;font-size:10px;color:var(--muted);writing-mode:vertical-rl;letter-spacing:.08em;opacity:.85}
.home-encounter .margin-index{top:56px;bottom:56px;z-index:3}
/* entrance */
html.js .hero-line{opacity:0;transform:translateY(26px);animation:heroLine .95s var(--weight) forwards}
html.js .home-copy .eyebrow.hero-line{animation-delay:.12s}
html.js .encounter-title .hero-line{animation-delay:.22s}
html.js .encounter-title em{clip-path:inset(-15% -8% 102% -8%);animation:heroWord 1.05s .38s var(--weight) forwards}
html.js .home-intro.hero-line{animation-delay:.62s}
html.js .underlined.hero-line{animation-delay:.74s}
html.js .quick-treatments.hero-line{animation-delay:.86s}
html.js .hero-figure img{opacity:0;transform:translateY(46px) scale(.985);animation:heroFig 1.15s .5s var(--weight) forwards}
html.js .hero-arch{clip-path:inset(100% 0 0 0);animation:heroArch 1.25s .08s var(--weight) forwards}
@keyframes heroLine{to{opacity:1;transform:translateY(0)}}
@keyframes heroWord{to{clip-path:inset(-15% -8% -6% -8%)}}
@keyframes heroFig{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes heroArch{to{clip-path:inset(0 0 0 0)}}
/* Dense, dark index is the hinge between human portrait and an individual question. */
.treatment-preview,.index-page{background:radial-gradient(ellipse at 0 0,#475453 0,transparent 70%),var(--dark,#292e2d);color:#f1ece4;border-top:0;--rule:#828780;--muted:#d1d4ca;padding-top:90px;padding-bottom:110px}
.treatment-preview .section-heading{grid-template-columns:1fr 3fr 1fr;margin-bottom:65px;align-items:end}.treatment-preview .section-heading h2{font-size:clamp(64px,7.6vw,120px);line-height:.94}.treatment-preview .section-heading h2 em{color:#b9c4be}.treatment-preview .eyebrow{align-self:start}
.treatment-preview .text-link,.index-page .text-link{border-color:#d2d5cb}
.treatment-preview .stage-list{gap:65px}.treatment-row{transition:padding .38s var(--weight),background .08s,color .08s}.treatment-preview .treatment-row,.index-page .treatment-row{padding-block:27px;min-height:103px}.treatment-preview .row-title,.index-page .row-title{font-size:clamp(30px,3.5vw,55px);font-weight:400;line-height:1.2}.treatment-preview .treatment-row:hover,.index-page .treatment-row:hover,.treatment-row.is-selected{background:#f1ece4;color:#292724;padding-inline:20px}.treatment-row:hover .row-number{color:inherit}.treatment-preview .narrow .photo-frame,.index-page .narrow .photo-frame{height:480px;background:#91a2a0;box-shadow:12px 20px 40px #0003}.treatment-preview .photo figcaption,.index-page .photo figcaption{color:#c7cdc3}.index-page .review-label{color:#d1d4ca}.index-page .margin-index i{background:#9da59d}
/* Expanded destination: a headline takes the width previously occupied by the index. */
.treatment-page{padding-top:35px;padding-bottom:90px;background:radial-gradient(ellipse at 0 5%,#fffff7,transparent 64%),#f1ece4}.treatment-page .margin-index{top:45px;bottom:70px}.treatment-masthead{margin-bottom:45px}.treatment-masthead h1{font-size:clamp(76px,10.5vw,170px);line-height:1.02;letter-spacing:-.045em;margin-top:25px;max-width:14ch;text-wrap:balance}.treatment-page .stage-detail{gap:7vw;align-items:center}.treatment-page .treatment-intro{padding-block:10px}.treatment-page .treatment-intro .lead{font-size:26px;max-width:30ch}.treatment-page .treatment-photo .photo-frame{height:380px;background:linear-gradient(125deg,#e0e3d7,#a4b5b3);box-shadow:14px 22px 38px #29272412,28px 40px 80px #2927240d}.treatment-page .treatment-photo img{object-fit:contain;object-position:center bottom}
/* ——— 03: the preserved letter — her words as the artefact. ——— */
.preserved{display:block;padding-block:120px;background:linear-gradient(112deg,var(--paperA,#f7f1e5),var(--paperB,#e3dfd6));position:relative;overflow:clip}
.ghost-numeral{position:absolute;left:-2vw;bottom:-14vw;font-size:36vw;line-height:1;font-weight:600;color:#29272408;pointer-events:none;letter-spacing:-.06em}
.preserved-copy{position:relative;display:grid;grid-template-columns:38fr 54fr;gap:8vw;align-items:start}
.preserved-head{position:sticky;top:90px}
.preserved h2{font-size:clamp(48px,5.5vw,85px);max-width:9ch;line-height:1.05;margin:25px 0 0}
.original-copy{position:relative;max-width:58ch;padding-inline-start:min(6vw,84px);padding-top:10px}
.quote-mark{position:absolute;inset-inline-start:0;top:-30px;font-size:clamp(90px,9vw,150px);line-height:1;color:var(--gold);opacity:.85;font-weight:600}
.original-copy p{font-size:20px;line-height:1.85}
.original-copy p:first-of-type{font-size:clamp(23px,1.9vw,27px);line-height:1.65}
.copy-signature{display:block;margin-top:38px;font-size:15px;letter-spacing:.14em;color:var(--gold-ink);padding-top:16px;border-top:1px solid var(--gold-soft);width:max-content}
/* ——— 04: technology — a beam of light in a tilted cinema frame. ——— */
.technology-invitation{padding-block:120px;align-items:center}.tech-entry h2{font-size:clamp(60px,7vw,108px);line-height:.98}
.tech-entry .tech-cta{display:inline-flex;align-items:center;gap:22px;font-size:16px;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-top:30px}
.tech-entry:hover{text-decoration:none}.tech-entry:hover .tech-cta{gap:30px}
.tech-entry>svg{display:none}
.purple-band{margin-top:15px;margin-bottom:105px;padding:30px 50px 45px;background:radial-gradient(ellipse at 0 0,#f9f2f2,transparent 70%),var(--purpleBand,#ded4e0);box-shadow:0 1px 0 #fff8,0 20px 45px #4532490a}.purple-band figure img{height:330px;filter:drop-shadow(12px 20px 15px #422f4822)}.purple-copy h2{font-size:clamp(42px,4.5vw,70px)}
.journal-preview{padding-top:20px;padding-bottom:110px}.journal-preview .section-heading{grid-template-columns:1fr 3fr}.journal-preview .section-heading h2{font-size:clamp(65px,8.5vw,125px);max-width:7ch}.journal-preview .article-row:first-child h3{font-size:36px}.article-row{transition:padding .4s var(--weight)}.article-row:hover{padding-inline:12px;text-decoration:none}.questions{padding-block:90px}.press-strip{background:var(--press,#becbc7);padding-block:85px}.press-strip h2{font-size:clamp(50px,6vw,90px)}footer{background:radial-gradient(ellipse at top left,#404641,transparent 75%),var(--footerBg,#252a27)}.footer-lead h2{font-size:clamp(75px,9.3vw,150px);line-height:.95}
.underlined,.text-link,.action svg{transition:gap .4s var(--weight),transform .4s var(--weight)}.action:hover svg{transform:translate(-3px,3px)}
::view-transition-group(route-title),::view-transition-group(route-photo),::view-transition-group(route-index){animation-duration:.48s;animation-timing-function:var(--weight)}
@media(min-width:761px) and (max-width:1050px){.home-encounter{min-height:710px}.home-encounter>.portrait{margin-top:125px;margin-right:-35px}.home-encounter>.portrait .photo-frame{height:440px}.home-copy h1.encounter-title{margin-top:35px}.home-intro{font-size:19px}.treatment-preview .section-heading{grid-template-columns:1fr 3fr}.treatment-preview .stage-list{gap:35px}.treatment-page .treatment-photo .photo-frame{height:auto;aspect-ratio:1300/1330}.treatment-page .treatment-intro .lead{font-size:23px}.treatment-masthead h1{font-size:10.5vw}.footer-phone bdi{font-size:29px}}
@media(max-width:760px){
.home-encounter{padding:20px 22px 65px;min-height:0;overflow:clip}.home-copy h1.encounter-title{margin:24px 0;max-width:100%;width:100%}.encounter-title>span{font-size:25px;margin-bottom:10px}.encounter-title em{font-size:18vw;line-height:1;letter-spacing:-.06em}.home-intro{font-size:18px;margin-top:20px;max-width:none}.home-copy .underlined{margin-top:20px;font-size:17px}.quick-treatments{margin-bottom:0}.home-encounter>.portrait{margin:40px -14px 0 -14px;transform:rotate(-3deg);width:calc(100% + 28px)}.home-encounter>.portrait .photo-frame{height:auto;aspect-ratio:4/5}.home-encounter>.portrait figcaption{text-align:left;padding-left:12px}.home-footnote{display:none}.home-encounter .margin-index{margin-bottom:6px}.treatment-preview,.index-page{padding:65px 22px}.treatment-preview .section-heading{display:block;margin-bottom:40px}.treatment-preview .section-heading h2{font-size:17vw;margin:24px 0 30px}.treatment-preview .stage-list{gap:32px}.treatment-preview .row-title,.index-page .row-title{font-size:29px}.treatment-preview .treatment-row,.index-page .treatment-row{padding-block:24px;min-height:94px}.treatment-preview .narrow{max-width:65%;margin-right:auto}.treatment-preview .narrow .photo-frame{height:220px}.index-page .narrow .photo-frame{height:250px}.treatment-preview .narrow img{object-fit:cover;object-position:center 20%}.treatment-masthead{margin-bottom:28px}.treatment-masthead h1{font-size:16vw;max-width:10ch;line-height:1.05;margin-top:20px}.treatment-page{padding:25px 22px 55px}.treatment-page .stage-detail{gap:30px}.treatment-page .treatment-intro{padding:0}.treatment-page .treatment-intro .lead{font-size:21px;max-width:none}.treatment-page .treatment-photo .photo-frame{height:auto;aspect-ratio:4/3}.treatment-page .back-link{margin-bottom:25px}.preserved{padding:65px 22px;gap:45px}.preserved h2{font-size:14vw}.preserved .hands-detail{transform:none;max-width:75%;align-self:flex-end}.hands-detail .awaiting-media{height:250px}.hands-detail .awaiting-media p{font-size:44px}.technology-invitation{padding:65px 22px;gap:45px}.tech-entry h2{font-size:17vw}.technology-invitation .media-placeholder{min-height:300px}.technology-invitation .media-placeholder p{font-size:31px}.purple-band{margin:20px 22px 65px;padding:22px}.purple-band figure img{height:260px}.purple-copy h2{font-size:42px}.journal-preview{padding:20px 22px 65px}.journal-preview .section-heading h2{font-size:20vw}.journal-preview .article-row:first-child h3{font-size:29px}.questions{padding:65px 22px}.press-strip{padding:60px 22px}.press-strip h2{font-size:14vw}.footer-lead h2{font-size:20vw}.footer-phone bdi{font-size:32px}::view-transition-group(route-title),::view-transition-group(route-photo),::view-transition-group(route-index){animation-duration:.32s}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:760px){.encounter-title em{font-size:25vw}.home-encounter>.portrait img{object-fit:cover;object-position:center center}.treatment-masthead h1 span{display:block}.treatment-masthead h1 span+span{font-weight:400}}

/* One moving surface per shared element, never overlapping faded copies. */
::view-transition-old(route-title),::view-transition-old(route-photo),::view-transition-old(route-index){display:none}
::view-transition-new(route-title),::view-transition-new(route-photo),::view-transition-new(route-index){animation:none;mix-blend-mode:normal}

::view-transition-new(route-title){object-fit:contain;object-position:right center}

/* ═══ v2 motion & film system ═══ */
/* scroll reveals — opacity+lift, staggered; parallax elements keep transform for --py */
html.js [data-reveal]:not(.is-in):not([data-px]),html.js [data-reveal-group]>*:not(.is-in){opacity:0;transform:translateY(30px)}
html.js [data-reveal]:not(.is-in)[data-px]{opacity:0}
html.js [data-reveal],html.js [data-reveal-group]>*{transition:opacity .85s var(--weight) var(--stagger,0ms),transform .95s var(--weight) var(--stagger,0ms),padding .38s var(--weight),background .09s,color .09s,gap .4s var(--weight)}
[data-px]:not(.film-frame){transform:translate3d(0,var(--py,0px),0);will-change:transform}
/* living film frames */
.film-frame{margin:0;position:relative}
.film-frame .film-surface{display:block;position:relative;overflow:hidden;background:#292724}
.film-frame video{width:100%;height:100%;object-fit:cover;display:block;transform:translate3d(0,var(--py,0px),0) scale(1.16);will-change:transform}
.film-frame .film-surface:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,#fff2 0%,transparent 24%),linear-gradient(0deg,#29272426 0,transparent 30%)}
.film-frame figcaption{font-size:11px;color:var(--muted);margin-top:14px;letter-spacing:.05em}
/* 02 — the dark index gets a tall arched film */
.narrow-film .film-surface{border-radius:999px 999px 10px 10px;height:560px;box-shadow:0 34px 80px #0006,inset 0 0 0 1px #ffffff1c}
.treatment-preview .film-frame figcaption{color:#c7cdc3;text-align:center}
.narrow-film{align-self:center;max-width:400px;width:100%;justify-self:center}
/* technology page — wide cinema band */
.tech-page-film{margin-bottom:65px}
.tech-page-film .film-surface{border-radius:18px;height:480px;box-shadow:0 28px 70px #2c3d361f,inset 0 0 0 1px #ffffff2e}
@media(max-width:760px){.tech-page-film .film-surface{height:300px}}
/* 04 — tilted cinema frame */
.tech-film{transform:rotate(2deg)}
.tech-film .film-surface{border-radius:16px;height:440px;box-shadow:16px 30px 60px #2c3d3620,0 4px 14px #2c3d3618,inset 0 0 0 1px #ffffff2e}
.tech-film figcaption{text-align:left;direction:ltr}
html.js .tech-film.is-in .film-surface:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 30%,#fff5e04d 47%,#fff5e07a 50%,#fff5e04d 53%,transparent 70%);transform:translateX(-130%);animation:sweep 1.6s .35s var(--weight) forwards}
@keyframes sweep{to{transform:translateX(130%)}}
/* 05 — purple: product floats on its own light */
.purple-band figure img{transform:translate3d(0,var(--py,0px),0)}
.purple-band figure{will-change:transform}
/* rows: gold number accent on hover */
.treatment-row:hover .row-number,.treatment-row.is-selected .row-number{color:var(--gold-ink)}
.article-row:hover h3{color:#48413b}
/* ═══ v2 mobile hero — same drama, vertical stage ═══ */
@media(max-width:760px){
.home-encounter{display:block;padding:18px 22px 0;min-height:0}
.home-copy{padding-top:0}
.home-copy h1.encounter-title{margin:20px 0 18px;width:auto;max-width:none}
.encounter-title>span{font-size:25px;margin-bottom:8px}
.encounter-title em{font-size:clamp(74px,23.5vw,96px);line-height:1;letter-spacing:-.05em;transform:none;will-change:auto}
.home-intro{font-size:19px;margin-top:16px;max-width:none}
.home-copy .underlined{margin-top:18px;font-size:16px}
.quick-treatments{margin:14px 0 0;font-size:13px;gap:18px}
.hero-arch{position:absolute;left:50%;translate:-50% 0;bottom:0;width:min(78vw,360px);height:min(96vw,430px)}
.arch-echo{inset:-14px 16px 0 -16px}
.hero-light{display:none}
.hero-figure{position:relative;left:auto;bottom:auto;width:min(88vw,410px);margin:36px auto 0;transform:none;will-change:auto;z-index:2}
.hero-figure figcaption{left:2px;bottom:10px}
.home-encounter .margin-index{margin-bottom:10px}
.narrow-film{max-width:min(78vw,340px)}
.narrow-film .film-surface{height:420px}
.tech-film{transform:rotate(1.2deg)}
.tech-film .film-surface{height:300px}
.ghost-numeral{font-size:64vw;bottom:-18vw}
.preserved-copy{display:block}
.preserved-head{position:static}
.preserved h2{margin-bottom:0}
.original-copy{padding-inline-start:0;padding-top:55px}
.quote-mark{top:-18px;font-size:80px}
.preserved h2{margin-bottom:35px}
.copy-signature{margin-top:28px}
}
/* after the entrance settles, drop the keyframes — final state becomes plain CSS */
html.js .hero-done .hero-line{animation:none;opacity:1;transform:none}
html.js .hero-done .hero-figure img{animation:none;opacity:1;transform:none}
html.js .hero-done .encounter-title em{animation:none;clip-path:none}
html.js .hero-done.hero-arch,html.js .hero-done .hero-arch{animation:none;clip-path:none}
/* ═══ v3: the dark stage — a glowing arch in a night room, cinema slabs floating on bone ═══ */
.home-encounter{margin:12px 20px 0;border-radius:34px;background:radial-gradient(90% 120% at 15% 100%,#39443f 0,transparent 55%),radial-gradient(70% 90% at 80% 0%,#333a36 0,transparent 60%),var(--slab,#1e2422);color:var(--bone);--rule:#5a615c;--muted:#c9c4b8;min-height:max(640px,calc(100vh - 215px));box-shadow:inset 0 1px 0 #ffffff14,0 30px 80px #2927241f}
.home-encounter:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 130px #0000003d;z-index:4}
.home-copy .eyebrow{color:#cbb891}
.home-copy,.encounter-title{color:var(--bone)}
.title-dot{color:#d9b273;text-shadow:0 0 20px #d9ae6b99,0 0 64px #d9ae6b59}
.home-intro{color:#e7e1d4}
.home-copy .underlined{border-color:#f1ece466}
.quick-treatments a{border-color:#f1ece440;color:#efe9dc}
.home-encounter .margin-index{color:#d8d2c4}
.home-encounter .margin-index i{background:#5a615c}
.home-encounter .margin-index .index-number{border-color:#d8d2c4}
.arch-window{background:radial-gradient(130% 105% at 50% -5%,#f6e7c4 0%,#e0c48e 44%,#b98f52 78%,#96713c 100%);box-shadow:0 0 0 1px #ffffff2b,0 0 95px 20px #c8a05e38,0 40px 90px #00000052}
.arch-window video{filter:sepia(.25) saturate(1.35) contrast(1.04) brightness(1.05)}
.arch-window:after{background:radial-gradient(120% 90% at calc(50% + var(--mx,0)*18%) calc(28% + var(--my,0)*14%),#fff1cf40 0,transparent 62%);mix-blend-mode:screen}
.arch-echo{border-color:#c9a76a;opacity:.7}
.hero-light{background:radial-gradient(42vw 36vw at calc(40% + var(--mx,0)*22%) calc(42% + var(--my,0)*22%),#ffca7c24 0,transparent 65%);mix-blend-mode:screen}
.hero-figure img{filter:drop-shadow(24px 30px 40px #00000066) drop-shadow(-16px 4px 70px #c8a05e38)}
.hero-figure figcaption{color:#e8e4db;background:#12100de6;padding:9px 3px;border-radius:99px;opacity:1}
/* dark slabs share the language */
.treatment-preview,.index-page{margin:26px 20px;border-radius:34px;box-shadow:inset 0 1px 0 #ffffff12,0 30px 80px #2927241a}
.press-strip{margin:0 20px;border-radius:34px}
footer{border-radius:34px 34px 0 0;margin:34px 20px 0}
@media(max-width:760px){
.home-encounter{margin:8px 10px 0;border-radius:26px;padding:22px 20px 0}
.treatment-preview,.index-page{margin:18px 10px;border-radius:26px;padding:60px 20px}
.press-strip{margin:0 10px;border-radius:26px}
footer{margin:20px 10px 0;border-radius:26px 26px 0 0}
.home-encounter:after{box-shadow:inset 0 0 80px #00000033}
}
/* ═══ v4: choreography — veil, kinetic letters, pinned scene, word river, gold cursor ═══ */
/* opening veil */
html.veiling{overflow:hidden}
.site-veil{position:fixed;inset:0;z-index:120;display:grid;place-items:center;pointer-events:none}
.veil-panel{position:absolute;left:0;right:0;height:50.5%;background:#171d1b;transition:transform .85s cubic-bezier(.7,0,.2,1)}
.veil-top{top:0}.veil-bottom{bottom:0}
.veil-word{position:relative;z-index:2;text-align:center;color:var(--bone);opacity:0;transform:translateY(26px);transition:opacity .7s var(--weight),transform .7s var(--weight)}
.veil-word span{font-size:12px;letter-spacing:.35em;display:block;margin-bottom:18px;color:#cbb891}
.veil-word em{font-style:normal;font-weight:600;font-size:clamp(90px,16vw,210px);line-height:1;letter-spacing:-.04em}
.veil-word b{color:#d9b273;text-shadow:0 0 24px #d9ae6b99}
.site-veil.go .veil-word{opacity:1;transform:translateY(0)}
.site-veil.lift .veil-top{transform:translateY(-102%)}
.site-veil.lift .veil-bottom{transform:translateY(102%)}
.site-veil.lift .veil-word{opacity:0;transform:translateY(-18px) scale(.97);transition-duration:.45s}
/* entrance waits for the veil */
html.js .hero-line{animation-delay:calc(var(--introDelay,0s) + .05s)}
html.js .home-copy .eyebrow.hero-line{animation-delay:calc(var(--introDelay,0s) + .02s)}
html.js .encounter-title .hero-line{animation-delay:calc(var(--introDelay,0s) + .1s)}
html.js .home-intro.hero-line{animation-delay:calc(var(--introDelay,0s) + .4s)}
html.js .underlined.hero-line{animation-delay:calc(var(--introDelay,0s) + .52s)}
html.js .quick-treatments.hero-line{animation-delay:calc(var(--introDelay,0s) + .64s)}
html.js .hero-figure img{animation-delay:calc(var(--introDelay,0s) + .28s)}
html.js .hero-arch{animation-delay:calc(var(--introDelay,0s) + 0s)}
/* kinetic letters take over the word entrance */
html.js.split .encounter-title em{clip-path:none;animation:none}
.encounter-title .ch{display:inline-block;opacity:0;transform:translateY(1.08em) rotate(4deg)}
html.js .encounter-title .ch{animation:chIn .85s var(--weight) forwards;animation-delay:calc(var(--introDelay,0s) + .12s + var(--ci,0)*58ms)}
@keyframes chIn{to{opacity:1;transform:translateY(0) rotate(0)}}
html.js .hero-done .encounter-title .ch{animation:none;opacity:1;transform:none}
/* pinned hero scene — the slab is a shot, not a section */
.home-copy{z-index:1}
.home-intro,.home-copy .underlined,.quick-treatments,.home-copy .eyebrow{position:relative;z-index:3}
.hero-scene{height:185vh}
.hero-scene .home-encounter{position:sticky;top:12px}
.encounter-title em{transform:translate3d(calc(var(--mx,0)*-14px - var(--hp,0)*26vw),calc(var(--my,0)*-8px),0)}
.hero-figure{transform:translate3d(calc(var(--mx,0)*22px),calc(var(--my,0)*12px + var(--hp,0)*26px),0) scale(calc(1 + var(--hp,0)*.04));transform-origin:50% 100%}
.arch-window video{transform:translate3d(0,calc(var(--hp,0)*-46px - 6%),0)}
.hero-light{opacity:calc(1 - var(--hp,0)*.5)}
/* word river */
.word-river{overflow:clip;padding:64px 0 20px}
.river-track{display:flex;width:max-content;animation:river 42s linear infinite}
.river-track span{font-size:clamp(58px,8.5vw,140px);font-weight:400;letter-spacing:-.02em;line-height:1.15;white-space:nowrap;color:#8d867d;padding-inline-end:.45em}
@keyframes river{to{transform:translateX(50%)}}
/* gold cursor */
@media(pointer:fine){html.js body{cursor:none}html.js a,html.js button,html.js summary{cursor:none}}
.site-cursor{position:fixed;left:-6px;top:-6px;z-index:220;pointer-events:none}
.site-cursor i{display:block;width:12px;height:12px;border-radius:50%;background:#c8a05e;box-shadow:0 0 16px #c8a05e77;transition:transform .3s var(--weight),background .3s,box-shadow .3s}
.site-cursor.is-hover i{transform:scale(2.7);background:#c8a05e26;box-shadow:inset 0 0 0 1.5px #c8a05e,0 0 28px #c8a05e44}
.header-contact,.underlined,.footer-phone,.action{transition:translate .3s var(--weight)}
@media(max-width:760px){
.hero-scene{height:auto}
.hero-scene .home-encounter{position:relative;top:auto}
.encounter-title em{transform:none}
.hero-figure{transform:none}
.word-river{padding:44px 0 8px}
.river-track span{font-size:15vw}
.veil-word em{font-size:24vw}
}
@media(prefers-reduced-motion:reduce){
.site-veil{display:none}
.river-track{animation:none}
.encounter-title .ch,html.js .encounter-title .ch{animation:none;opacity:1;transform:none}
.hero-scene{height:auto}
.hero-scene .home-encounter{position:relative;top:auto}
}
/* ═══ v5: reading light, landing frames, gold thread ═══ */
/* gold scroll thread across the whole site */
.scroll-thread{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;background:linear-gradient(90deg,#e2c184,#c8a05e);transform-origin:100% 50%;transform:scaleX(var(--sp,0));pointer-events:none}
/* the letter reads itself — ink fills as you scroll */
@supports (animation-timeline: view()){
html.js .original-copy p{color:transparent;background:linear-gradient(to left,var(--ink) 50%,#2927242b 50%);background-size:200% 100%;background-position:0% 0;-webkit-background-clip:text;background-clip:text;animation:inkFill linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
@keyframes inkFill{from{background-position:0% 0}to{background-position:100% 0}}
html.js .ghost-numeral{animation:ghostDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
@keyframes ghostDrift{from{transform:translateY(9vw)}to{transform:translateY(-7vw)}}
html.js .quote-mark{animation:quoteIn linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
@keyframes quoteIn{from{opacity:0;transform:translateY(30px) rotate(-8deg)}to{opacity:.85;transform:none}}
/* the laser frame lands as it enters */
html.js .tech-film{animation:filmLand linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
@keyframes filmLand{from{transform:rotate(7deg) translateY(70px) scale(.94)}to{transform:rotate(2deg) translateY(0) scale(1)}}
}
/* purple product — tactile 3d tilt */
.purple-band figure{perspective:900px}
.purple-band figure img{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--py,0px),0);transition:transform .18s linear;will-change:transform}
/* press headline — gold ink on hover */
.press-strip a{display:block}
.press-strip h2{background:linear-gradient(to left,var(--gold) 50%,var(--ink) 50%);background-size:205% 100%;background-position:0% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .9s var(--weight)}
.press-strip a:hover h2{background-position:100% 0}
.press-strip a:hover{text-decoration:none}
@media(prefers-reduced-motion:reduce){
.scroll-thread{display:none}
html.js .original-copy p{animation:none;color:var(--ink);background:none}
html.js .ghost-numeral,html.js .quote-mark,html.js .tech-film{animation:none}
.purple-band figure img{transition:none}
}
/* reduced motion: everything visible, nothing animated */
@media(prefers-reduced-motion:reduce){
html.js .hero-line,html.js .hero-figure img{opacity:1;transform:none}
html.js .encounter-title em,html.js .hero-arch{clip-path:none}
html.js [data-reveal]:not(.is-in):not([data-px]),html.js [data-reveal-group]>*:not(.is-in),html.js [data-reveal]:not(.is-in)[data-px]{opacity:1;transform:none}
}
/* contact details — address & hours */
.contact-details{margin-top:8px;font-size:16px;line-height:1.8;border-top:1px solid var(--rule);padding-top:22px;max-width:34ch}
.contact-details p+p{margin-top:14px}
.contact-details strong{font-weight:600}

/* device gallery — the technology corner shows the real machines */
.device-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(230px,(100% - 68px)/3),1fr));gap:34px;margin-top:75px}
.device-card{margin:0}
.device-shot{display:grid;place-items:center;background:linear-gradient(165deg,#faf6ee,#e8e1d3);border-radius:22px;height:320px;padding:26px;box-shadow:inset 0 0 0 1px #ffffffb3,0 20px 45px #29272414}
.device-shot img{max-height:265px;max-width:100%;width:auto;object-fit:contain;filter:drop-shadow(0 18px 26px #29272426)}
.device-card figcaption{padding-top:18px}
.device-card bdi{font-weight:600;font-size:22px;letter-spacing:.01em}
.device-card p{font-size:15px;line-height:1.7;color:var(--muted);margin-top:6px;max-width:34ch}
@media(max-width:760px){.device-gallery{grid-template-columns:1fr;gap:28px;margin-top:45px}.device-shot{height:300px}}

/* ═══ gate, consent, accessibility ═══ */
.site-gate{position:fixed;inset:0;z-index:150;display:none;place-items:center;overflow:hidden;background:#12100d;text-align:center}
html.js .site-gate.gate-open{display:grid}
.site-gate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.gate-scrim{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 45%,#12100d99 0,#12100df0 100%)}
.gate-inner{position:relative;color:var(--bone);padding:30px;max-width:640px}
.gate-brand{font-size:12px;letter-spacing:.35em;display:block;margin-bottom:22px;color:#e5cfa2}
.gate-title{font-style:normal;font-weight:600;font-family:var(--font-display,Assistant);font-size:clamp(90px,17vw,220px);line-height:1;display:block;letter-spacing:-.04em;text-shadow:0 10px 60px #00000059}
.gate-inner p{margin-top:16px;font-size:19px;color:#efe7d6}
.gate-enter{margin-top:34px;display:inline-flex;align-items:center;gap:22px;background:var(--bone);color:var(--ink);border:0;padding:15px 30px;font:inherit;font-size:18px;cursor:pointer;border-radius:999px}
.gate-enter:hover{background:#fff}
.site-gate.gate-leaving{transition:opacity .7s var(--weight),visibility .7s;opacity:0;visibility:hidden}
.consent-bar[hidden]{display:none !important}
.consent-bar{position:fixed;inset-inline:16px;bottom:16px;z-index:140;background:var(--ink);color:var(--bone);border-radius:16px;padding:16px 20px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;box-shadow:0 18px 50px #00000047;max-width:980px;margin-inline:auto}
.consent-bar p{font-size:14px;line-height:1.6;margin:0;max-width:62ch}
.consent-bar a{text-decoration:underline}
.consent-actions{display:flex;gap:10px}
.consent-accept{background:var(--gold-ink);border:0;color:#fff;padding:10px 20px;font:inherit;font-size:15px;border-radius:999px;cursor:pointer}
.consent-bar .quiet{background:none;border:1px solid #f1ece44d;color:var(--bone);padding:10px 16px;font:inherit;font-size:14px;border-radius:999px;cursor:pointer}
.a11y-widget{position:fixed;bottom:18px;inset-inline-start:18px;z-index:145}
.a11y-toggle{width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:var(--bone);font-size:22px;cursor:pointer;box-shadow:0 10px 26px #00000038}
.a11y-panel[hidden]{display:none !important}
.a11y-panel{position:absolute;bottom:56px;inset-inline-start:0;background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 20px 55px #00000030;padding:14px;display:grid;gap:8px;width:210px;font-size:14px}
.a11y-panel strong{font-size:13px}
.a11y-panel button{font:inherit;font-size:14px;text-align:start;background:#f4f0e8;border:1px solid #e2dbcd;border-radius:9px;padding:8px 10px;cursor:pointer}
.a11y-panel button[aria-pressed=true]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.a11y-panel a{font-size:12.5px;text-decoration:underline}
/* accessibility effect modes */
html.a11y-bigtext{font-size:118%}
html.a11y-underline a{text-decoration:underline !important}
html.a11y-gray{filter:grayscale(1)}
html.a11y-contrast body{background:#fff}
html.a11y-contrast{--bone:#ffffff;--ink:#111111;--muted:#222222;--slab:#111111;--dark:#111111;--paperA:#ffffff;--paperB:#f2f2f2;--purpleBand:#ffffff;--press:#ffffff;--footerBg:#111111}
html.a11y-nomotion *,html.a11y-nomotion *:before,html.a11y-nomotion *:after{animation:none !important;transition:none !important}
html.a11y-nomotion .scroll-thread{display:none}
@media(max-width:760px){.gate-title{font-size:26vw}.consent-bar{flex-direction:column;align-items:stretch}.consent-actions{justify-content:flex-start}}
/* topic photos on treatment pages + article visuals */
.topic-photo .photo-frame{height:430px;background:#dcd6ca}
.topic-photo img{object-fit:cover;object-position:center;width:100%;height:100%}
.article-visual{margin:38px 0 10px}
.article-visual img{width:100%;height:clamp(240px,38vw,430px);object-fit:cover;border-radius:20px;box-shadow:0 22px 55px #29272417}
.article-visual figcaption{font-size:11px;color:var(--muted);margin-top:10px}
@media(max-width:760px){.topic-photo .photo-frame{height:auto;aspect-ratio:3/2}.article-visual img{border-radius:14px}}
/* tablet refinements */
@media(min-width:761px) and (max-width:1020px){
.device-gallery{grid-template-columns:1fr 1fr;gap:30px}
.device-shot{height:320px}
.tech-film .film-surface{height:360px}
.narrow-film .film-surface{height:480px}
.article-visual img{height:340px}
}
/* technology page: cinematic device band with overlaid line */
.tech-band{position:relative;margin:0 0 70px;border-radius:24px;overflow:hidden;background:var(--slab,#1e2422);min-height:clamp(320px,42vw,520px);display:grid;align-items:center;isolation:isolate}
.tech-band-media{position:absolute;inset:0;z-index:0}
.tech-band-media video{width:100%;height:100%;object-fit:cover;object-position:28% center;display:block;opacity:.42;filter:saturate(.9) contrast(1.04)}
.tech-band:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#1e242247 0%,#1e242238 34%,#1e2422e0 78%,#1e2422f2 100%)}
.tech-band-copy{position:relative;z-index:2;padding:clamp(34px,5vw,70px);max-width:min(620px,56%)}
.tech-band-copy em{display:block;font-style:normal;font-family:var(--font-display,Assistant);font-weight:600;color:var(--bone,#f1ece4);font-size:clamp(30px,3.6vw,54px);line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.tech-band-copy span{display:block;margin-top:18px;color:#ded8cb;font-size:clamp(17px,1.5vw,20px);line-height:1.6}
.tech-band-copy small{display:block;margin-top:26px;color:#c5c1b9;font-size:11px;letter-spacing:.05em}
@media(max-width:760px){.tech-band{min-height:0;margin-bottom:46px}.tech-band-media video{opacity:.26}.tech-band:after{background:linear-gradient(180deg,#1e2422cc,#1e2422f2)}.tech-band-copy{max-width:none;padding:30px 22px 34px}}
/* press page: broadcast interviews */
.press-videos{padding-top:10px}
.press-videos-head{margin-bottom:34px;max-width:1000px;margin-inline:auto}
.press-videos-head h2{font-size:clamp(34px,4vw,58px);margin-top:14px}
.press-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;max-width:1000px;margin-inline:auto}
.press-video{margin:0}
.press-video video{width:100%;aspect-ratio:16/9;background:#1e2422;border-radius:18px;display:block;box-shadow:0 22px 50px #2927241f}
.press-video figcaption{padding-top:16px}
.press-program{display:inline-block;font-size:11px;letter-spacing:.14em;color:var(--gold-ink);border:1px solid var(--gold-soft);border-radius:999px;padding:4px 12px}
.press-video h3{font-size:24px;margin:12px 0 8px;line-height:1.25}
.press-video p{font-size:16px;line-height:1.65;color:var(--muted)}
@media(max-width:860px){.press-video-grid{grid-template-columns:1fr;gap:30px}.press-videos-head{margin-bottom:26px}}
/* press page: the magazine feature as a vertical cover card */
.press-feature{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:center;border:0;padding:44px 0 10px;perspective:1200px}
.press-feature:hover{text-decoration:none}
.press-cover{display:block;transform:rotate(-2.2deg);transition:transform .5s var(--weight)}
.press-cover img{width:100%;height:auto;display:block;border-radius:10px;box-shadow:16px 26px 50px #2927242e,0 2px 0 #ffffff80,inset 0 0 0 1px #ffffff40}
.press-feature:hover .press-cover{transform:rotate(-1deg) translateY(-6px)}
.press-feature-copy h2{font-size:clamp(34px,4.4vw,64px);line-height:1.05;margin:16px 0 14px;letter-spacing:-.03em}
.press-feature-copy p{font-size:19px;line-height:1.7;color:var(--muted);max-width:44ch}
.press-feature-copy .text-link{margin-top:26px;font-size:16px}
@media(max-width:760px){.press-feature{grid-template-columns:1fr;gap:26px;padding-top:26px}.press-cover{max-width:250px;margin-inline:auto}}
/* delicate cream smears on the dark slabs */
.cream-smear{position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:contain;background-position:center;z-index:1}
.smear-hero{background-image:url('assets/cream-smear-a.webp');width:min(62vw,860px);aspect-ratio:1500/824;left:-4vw;bottom:-3%;opacity:.42;transform:rotate(-3deg)}
.smear-index{background-image:url('assets/cream-smear-b.webp');width:min(52vw,720px);aspect-ratio:1300/741;right:-6vw;top:4%;opacity:.34;transform:rotate(4deg)}
.treatment-preview{position:relative}
@media(max-width:760px){.smear-hero{width:110vw;left:-22vw;bottom:auto;top:54%;opacity:.3}.smear-index{width:96vw;right:-24vw;top:2%;opacity:.26}}
/* cookie preferences button, beside the accessibility one */
.a11y-widget{display:flex;gap:10px;align-items:center}
.consent-toggle{width:46px;height:46px;border-radius:50%;border:0;background:var(--bone);color:var(--ink);font-size:20px;cursor:pointer;box-shadow:0 10px 26px #00000030;line-height:1;display:grid;place-items:center}
.consent-toggle:hover{background:#fff}
.consent-title{display:block;font-size:15px;margin-bottom:6px}

/* The site hides the system pointer and draws a 12px dot instead. That dot
   ignores every operating-system cursor setting: enlarged pointer, high
   contrast pointer, shake to locate. Anyone who turned on an adaptation here,
   or asked their system for less motion, gets their own pointer back. */
html.a11y-bigtext,html.a11y-contrast,html.a11y-underline,html.a11y-nomotion,html.a11y-gray,
html.a11y-bigtext a,html.a11y-contrast a,html.a11y-underline a,html.a11y-nomotion a,html.a11y-gray a,
html.a11y-bigtext button,html.a11y-contrast button,html.a11y-underline button,html.a11y-nomotion button,html.a11y-gray button,
html.a11y-bigtext summary,html.a11y-contrast summary,html.a11y-underline summary,html.a11y-nomotion summary,html.a11y-gray summary{cursor:auto}
html.a11y-bigtext a,html.a11y-contrast a,html.a11y-underline a,html.a11y-nomotion a,html.a11y-gray a,
html.a11y-bigtext button,html.a11y-contrast button,html.a11y-underline button,html.a11y-nomotion button,html.a11y-gray button,
html.a11y-bigtext summary,html.a11y-contrast summary,html.a11y-underline summary,html.a11y-nomotion summary,html.a11y-gray summary{cursor:pointer}
html.a11y-bigtext .site-cursor,html.a11y-contrast .site-cursor,html.a11y-underline .site-cursor,
html.a11y-nomotion .site-cursor,html.a11y-gray .site-cursor{display:none}
@media(prefers-reduced-motion:reduce){
 html.js,html.js a,html.js button,html.js summary{cursor:auto}
 html.js a,html.js button,html.js summary{cursor:pointer}
 .site-cursor{display:none}
}

/* 2.5.8: the credit link was 179x21. Padding grows the target, the negative margin keeps the footer line exactly where it was. */
.footer-bottom a{padding-block:4px;margin-block:-4px}

/* footer social marks: white outline icons, 44px targets */
.footer-social{display:flex;gap:14px;margin-top:4px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff3d;color:#f1ece4;transition:background .25s var(--weight),border-color .25s var(--weight),transform .25s var(--weight)}
.footer-social a:hover{background:#ffffff14;border-color:#ffffff7a;transform:translateY(-2px);text-decoration:none}
.footer-social svg{width:21px;height:21px}
.footer-nav{align-items:center}
@media(max-width:760px){.footer-social{margin:2px 0 6px}}

/* Voices: what patients wrote. Quiet editorial panels, a gold quote mark set
   into the top corner, and the same three-column cap the device grid uses so
   the last row is never a single orphan. */
.voices{padding-top:34px}
.voice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(260px,(100% - 72px)/3),1fr));gap:36px;max-width:1180px;margin-inline:auto}
.voice{margin:0;position:relative;display:flex;flex-direction:column;background:linear-gradient(168deg,#faf6ee,#f0ebe1);border-radius:4px 22px 4px 22px;padding:44px 32px 30px;box-shadow:0 18px 44px #2927240f,inset 0 0 0 1px #ffffffb3}
.voice-mark{position:absolute;top:10px;inset-inline-start:26px;font:600 76px/1 var(--font-display,Assistant);color:var(--gold-soft);opacity:.55;pointer-events:none}
.voice blockquote{margin:0;font-size:19px;line-height:1.8;color:var(--ink);flex:1}
.voice figcaption{margin-top:26px;padding-top:18px;border-top:1px solid #29272426;display:flex;flex-direction:column;gap:4px}
.voice figcaption bdi{font-weight:600;font-size:17px;direction:rtl}
.voice figcaption span{font-size:13px;letter-spacing:.04em;color:var(--muted)}
@media(max-width:1020px){.voice-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:760px){.voice-grid{grid-template-columns:1fr;gap:22px}.voice{padding:38px 24px 26px}.voice blockquote{font-size:18px}.voice-mark{font-size:62px}}

/* A trailing card left alone on its own row reads as a mistake. When the count
   leaves exactly one over, centre it at one column's width instead of letting
   it hang at the edge. The column count is known per breakpoint, so the
   nth-child test can match it. */
@media(min-width:1021px){
 .voice-grid>:last-child:nth-child(3n+1){grid-column:1/-1;max-width:calc((100% - 72px)/3);margin-inline:auto}
}
@media(min-width:761px) and (max-width:1020px){
 .voice-grid>:last-child:nth-child(2n+1){grid-column:1/-1;max-width:calc((100% - 28px)/2);margin-inline:auto}
}