/* odNOVA non-treatment hero family — shared title geometry and calm motion. Individual pages may keep their own artwork; the typographic anchor stays fixed. */ @keyframes nt-cue-breathe{ 0%{transform:scaleY(.38);opacity:.5;} 48%{transform:scaleY(1);opacity:1;} 100%{transform:scaleY(.64) translateY(11px);opacity:.22;} } body.nt-hero-page #top.od-hero-sys{ --nt-content-top:clamp(62px,8vh,80px); --nt-content-left:max(60px,calc((100vw - 1200px)/2)); --hs-content-top:var(--nt-content-top)!important; --hs-gap-title:15px; --hs-rhythm:21px; --hs-h1-size:clamp(54px,5vw,68px); --hs-h1-lh:1.02; position:relative; min-height:100svh; overflow:hidden; background-color:#0A1018; } body.nt-hero-page{ opacity:1; /* Settled pages must not keep a transform or filter on : either one becomes a containing block and breaks genuinely fixed mobile controls. */ filter:none; transform:none; } body.nt-hero-page #top .hs-eyebrow{ justify-content:flex-start!important; margin:0!important; font-family:var(--font-mono)!important; font-size:10.5px!important; line-height:1.35!important; letter-spacing:.18em!important; text-align:left!important; } body.nt-hero-page #top h1.hs-h1{ margin-top:15px!important; margin-left:0!important; margin-right:0!important; font-family:var(--font-serif)!important; font-size:var(--hs-h1-size)!important; font-weight:300!important; line-height:var(--hs-h1-lh)!important; letter-spacing:-.018em!important; text-align:left!important; text-wrap:balance; } body.nt-hero-page #top .hs-lede{ margin-left:0!important; margin-right:0!important; font-family:var(--font-sans)!important; font-size:18px!important; font-weight:300!important; line-height:1.65!important; text-align:left!important; } /* One common gold continuation mark. No label competes with the page title. */ body.nt-hero-page #top .nt-hero-cue{ position:absolute!important; left:50%!important; right:auto!important; bottom:0!important; z-index:6!important; width:54px!important; height:78px!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; background:none!important; color:transparent!important; font-size:0!important; line-height:0!important; text-indent:-9999px!important; transform:translateX(-50%)!important; display:flex!important; align-items:flex-start!important; justify-content:center!important; overflow:visible!important; } body.nt-hero-page #top .nt-hero-cue::before{display:none!important;content:none!important;} body.nt-hero-page #top .nt-hero-cue::after{ content:""!important; display:block!important; width:2px!important; height:47px!important; margin:0!important; border:0!important; background:linear-gradient(180deg,#C9B79A 0%,rgba(201,183,154,.75) 52%,rgba(201,183,154,0) 100%)!important; transform-origin:top!important; animation:nt-cue-breathe 3.25s cubic-bezier(.4,0,.2,1) infinite!important; } /* Desktop: shared content line begins after the same header chrome. */ @media(min-width:861px){ body.nt-hero-page #top .hs-eyebrow{width:max-content;max-width:none;white-space:nowrap;} /* Treatments keeps its two functional route cards in the first view, but its title anchor must still sit on the same line as every sister page. */ body.nt-hero-page[data-lang-page="treatments"] #top .hs-stage{align-self:start!important;} body.nt-hero-page[data-lang-page="treatments"] #choose>.wrap{ width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; padding-left:var(--nt-content-left)!important; padding-right:var(--nt-content-left)!important; } body.nt-hero-page #top>.pf-hero-body{ align-items:flex-start!important; padding-top:var(--nt-content-top)!important; } body.nt-hero-page #top>.hs-band, body.nt-hero-page #top>.cv-hero{ align-items:flex-start!important; justify-content:flex-start!important; padding-top:var(--nt-content-top)!important; text-align:left!important; } body.nt-hero-page[data-lang-page="journal"] #top>.jr-hbody{ align-items:flex-start!important; justify-content:flex-start!important; padding-top:var(--nt-content-top)!important; text-align:left!important; } body.nt-hero-page[data-lang-page="fees"] #top>.hs-band{ flex:1 1 auto!important; width:min(100%,1320px)!important; margin:0 auto!important; padding-right:var(--pad-x,60px)!important; padding-left:calc(var(--nt-content-left) - max(0px,(100vw - 1320px)/2))!important; padding-bottom:88px!important; } body.nt-hero-page[data-lang-page="fees"] #top>.hs-band>*{ max-width:760px!important; margin-left:0!important; margin-right:0!important; } body.nt-hero-page[data-lang-page="booking"] #top>.ap-hero{ flex:1 1 auto!important; width:min(100%,1320px)!important; margin:0 auto!important; padding:var(--nt-content-top) var(--pad-x,60px) 92px!important; align-items:flex-start!important; justify-content:flex-start!important; text-align:left!important; } body.nt-hero-page[data-lang-page="booking"] .ap-hero-inner{ width:100%!important; max-width:760px!important; margin:0!important; text-align:left!important; } body.nt-hero-page[data-lang-page="booking"] #top .pf-hero-ctas{ justify-content:flex-start!important; } body.nt-hero-page[data-lang-page="contact"] .ct-hero-grid{align-items:start!important;} } /* One restrained entrance sequence. Page art follows separately and more slowly. */ /* V2 pages own their entrance sequence in their family stylesheet. Keeping them behind this JS-added class created a permanent blank hero whenever an external script was delayed or unavailable in Safari. The generic gate is retained only for older non-V2 pages that do not have a CSS-owned reveal. */ body.nt-hero-page:not(.nt-v2-page):not(.treatments-v2-page):not(.consultation-v2-page):not(.nt-hero-ready) #top .hs-eyebrow, body.nt-hero-page:not(.nt-v2-page):not(.treatments-v2-page):not(.consultation-v2-page):not(.nt-hero-ready) #top h1, body.nt-hero-page:not(.nt-v2-page):not(.treatments-v2-page):not(.consultation-v2-page):not(.nt-hero-ready) #top .hs-lede, body.nt-hero-page:not(.nt-v2-page):not(.treatments-v2-page):not(.consultation-v2-page):not(.nt-hero-ready) #top .mp-hero-role, body.nt-hero-page:not(.nt-v2-page):not(.treatments-v2-page):not(.consultation-v2-page):not(.nt-hero-ready) #top .mp-hero-intro, body.nt-hero-page:not(.nt-v2-page):not(.treatments-v2-page):not(.consultation-v2-page):not(.nt-hero-ready) #top .cv-atglance, body.nt-hero-page:not(.nt-v2-page):not(.treatments-v2-page):not(.consultation-v2-page):not(.nt-hero-ready) #top .ct-direct, body.nt-hero-page:not(.nt-v2-page):not(.treatments-v2-page):not(.consultation-v2-page):not(.nt-hero-ready) #top .pf-hero-ctas{ opacity:0!important; filter:blur(8px); transform:translate3d(0,14px,0); } body.nt-hero-page #top .hs-eyebrow, body.nt-hero-page #top h1, body.nt-hero-page #top .hs-lede, body.nt-hero-page #top .mp-hero-role, body.nt-hero-page #top .mp-hero-intro, body.nt-hero-page #top .cv-atglance, body.nt-hero-page #top .ct-direct, body.nt-hero-page #top .pf-hero-ctas{ transition:opacity .9s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1); } body.nt-hero-page.nt-hero-ready #top .hs-eyebrow, body.nt-hero-page.nt-hero-ready #top h1, body.nt-hero-page.nt-hero-ready #top .hs-lede, body.nt-hero-page.nt-hero-ready #top .mp-hero-role, body.nt-hero-page.nt-hero-ready #top .mp-hero-intro, body.nt-hero-page.nt-hero-ready #top .cv-atglance, body.nt-hero-page.nt-hero-ready #top .ct-direct, body.nt-hero-page.nt-hero-ready #top .pf-hero-ctas{ opacity:1!important; filter:blur(0); transform:translate3d(0,0,0); } body.nt-hero-page #top .hs-eyebrow{transition-delay:.08s;} body.nt-hero-page #top h1{transition-delay:.16s;} body.nt-hero-page #top .hs-lede, body.nt-hero-page #top .mp-hero-role{transition-delay:.27s;} body.nt-hero-page #top .mp-hero-intro, body.nt-hero-page #top .cv-atglance, body.nt-hero-page #top .ct-direct, body.nt-hero-page #top .pf-hero-ctas{transition-delay:.37s;} body.nt-hero-page[data-lang-page="meet-piotr"] .mp-hero-photo{ transition:opacity 1.2s .08s cubic-bezier(.16,1,.3,1),transform 1.6s .08s cubic-bezier(.16,1,.3,1); } body.nt-hero-page[data-lang-page="meet-piotr"]:not(.nt-hero-ready) .mp-hero-photo{ opacity:.35;transform:scale(1.018); } body.nt-hero-page[data-lang-page="meet-piotr"].nt-hero-ready .mp-hero-photo{ opacity:1;transform:scale(1); } @media(max-width:860px){ body.nt-hero-page #top.od-hero-sys{ --nt-content-top:24px; --hs-h1-size:clamp(46px,13.5vw,58px); min-height:100svh; } body.nt-hero-page #top>.pf-hero-body, body.nt-hero-page #top>.hs-band, body.nt-hero-page #top>.cv-hero, body.nt-hero-page #top>.jr-hbody, body.nt-hero-page #top>.ap-hero{ align-items:flex-start!important; justify-content:flex-start!important; padding-top:var(--nt-content-top)!important; text-align:left!important; } body.nt-hero-page #top h1.hs-h1{font-size:var(--hs-h1-size)!important;line-height:1.01!important;} body.nt-hero-page #top .hs-eyebrow{min-height:29px;align-items:flex-start!important;} body.nt-hero-page #top .hs-lede{font-size:16px!important;line-height:1.62!important;} body.nt-hero-page #top .nt-hero-cue{height:65px!important;} body.nt-hero-page #top .nt-hero-cue::after{height:42px!important;} body.nt-hero-page[data-lang-page="booking"] #top>.ap-hero{ width:100%!important; margin:0!important; padding-right:20px!important; padding-bottom:82px!important; padding-left:20px!important; } body.nt-hero-page[data-lang-page="booking"] .ap-hero-inner{margin:0!important;text-align:left!important;} body.nt-hero-page[data-lang-page="booking"] #top .pf-hero-ctas{justify-content:flex-start!important;} body.nt-hero-page[data-lang-page="fees"] #top>.hs-band{ padding-right:20px!important;padding-bottom:78px!important;padding-left:20px!important; } body.nt-hero-page[data-lang-page="journal"] #top>.jr-hbody{padding-right:0!important;padding-left:0!important;} body.nt-hero-page[data-lang-page="treatments"] #top .hs-stage{margin-top:-12px!important;} body.nt-hero-page[data-lang-page="contact"] #top.od-hero-sys{min-height:calc(100svh - 43px);} body.nt-hero-page[data-lang-page="contact"] #top .nt-hero-cue{bottom:43px!important;} } @media(prefers-reduced-motion:reduce){ body.nt-hero-page #top .hs-eyebrow, body.nt-hero-page #top h1, body.nt-hero-page #top .hs-lede, body.nt-hero-page #top .mp-hero-role, body.nt-hero-page #top .mp-hero-intro, body.nt-hero-page #top .cv-atglance, body.nt-hero-page #top .ct-direct, body.nt-hero-page #top .pf-hero-ctas, body.nt-hero-page .mp-hero-photo{opacity:1!important;filter:none!important;transform:none!important;transition:none!important;} body.nt-hero-page{opacity:1!important;filter:none!important;transform:none!important;transition:none!important;} body.nt-hero-page #top .nt-hero-cue::after{animation:none!important;opacity:1!important;transform:none!important;} }