/* One uninterrupted document: native scrolling, no pinned sections or slide runways. */
.experience-page { --paper: #f2f2f2; }
.experience-page [data-scroll-scene] { --scene-progress: 0; --entry-progress: 1; --exit-progress: 0; }
.experience-page [data-reveal] { opacity: 1 !important; transition: none !important; }
.experience-page *, .experience-page *::before, .experience-page *::after { animation: none !important; }
.experience-page main,.experience-page .site-footer { overflow-x: clip; }
.experience-header { min-height: 78px; }
.cinematic-hero { height: auto; position: relative; border: 0; }
.hero-viewport { position: relative; height: min(880px,94svh); min-height: 660px; overflow: clip; isolation: isolate; background: var(--paper); }
.hero-media { position: absolute; inset: 12% 3% 12% 0; z-index: -2; mix-blend-mode: multiply; opacity: .9; transform: translate3d(calc(var(--scene-progress) * 8%),0,0) scale(calc(1 - var(--scene-progress) * .2)); transform-origin: right center; mask-image: linear-gradient(90deg,transparent,transparent calc(40% - var(--scene-progress) * 20%),#000 calc(55% - var(--scene-progress) * 27%),#000); }
.hero-media img,.hero-media video { filter: grayscale(1) brightness(2.1) contrast(1.3); position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.hero-media video { opacity: 0; }.hero-media[data-video-ready='true'] video { opacity: 1; }
.hero-orbits { position: absolute; inset: 0; pointer-events: none; z-index: -1; transform: translate3d(calc(var(--scene-progress) * -10%),calc(var(--scene-progress) * 8%),0) rotate(calc(var(--scene-progress) * 100deg)); opacity: .22; }
.hero-orbits>span { position: absolute; border: 1px solid #929292; border-radius: 50%; width: 45vw; aspect-ratio: 1; right: 2%; top: 8%; transform: rotate(-35deg) scaleY(.54); }.hero-orbits>span+span { right: 19%; top: 25%; transform: rotate(38deg) scaleY(.54); }
.hero-title-wrap { position: relative; padding-top: clamp(65px,9svh,110px); transform-origin: left center; transform: translate3d(0,calc(var(--scene-progress) * -35px),0); }
.hero-title-wrap .eyebrow { font-size: 9px; color: #696969; letter-spacing: .065em; }
.hero-title-wrap h1 { font-size: clamp(78px,9.4vw,140px); letter-spacing: -.085em; line-height: .96; font-weight: 480; margin: 38px 0 27px; max-width: 8ch; }
.hero-title-wrap h1>span:not(.heading-phrase) { color: #555555; }
.hero-positioning { font-size: 16px; line-height: 1.75; letter-spacing: -.03em; color: #5d5d5d; }
.hero-bottom { position: absolute; bottom: 60px; inset-inline: 0; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.hero-bottom .button { border-radius: 0; font-size: 11px; }
.hero-scroll-cue { padding: 8px 12px; background: #f2f2f2c9; font: 8px/1.8 var(--mono); color: #5d5d5d; }
.hero-scroll-cue>span { display: inline-block; font: 23px var(--sans); margin-left: 25px; transform: translateY(calc(var(--scene-progress) * 12px)); }
.hero-scroll-cue small { display: block; font: 10px var(--sans); color: #858585; margin-top: 7px; }
.story-endorsement { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 42px; }
.stories-heading { padding-block: 25px 35px; }
.stories-heading h2 { transform: translate3d(calc((1 - var(--entry-progress)) * -55px),0,0); }
.stories-heading>div>p { transform: translate3d(0,calc((1 - var(--entry-progress)) * 55px),0); }
.stories-heading h2>span:not(.heading-phrase) { display: inline-block; transform: translate3d(calc((1 - var(--entry-progress)) * 90px),0,0); }
/* Neighbouring compositions share the canvas and are visible together while passing. */
.concept-chapter { height: auto; border: 0; background: transparent; --unfold: clamp(0,calc(var(--scene-progress) * 2.25),1); }
.concept-layout { position: relative; top: auto; height: auto; min-height: 0; padding-block: 50px; align-items: center; }
.concept-copy,.concept-art { position: relative; top: auto; }
.concept-copy { padding-block: 0; transform: translate3d(0,calc((1 - var(--entry-progress)) * 30px - var(--scene-progress) * 12px),0); }
.concept-art { height: clamp(470px,46vw,650px); min-height: 0; transform: translate3d(0,calc((1 - var(--entry-progress)) * 25px - var(--scene-progress) * 28px),0) scale(calc(.96 + var(--scene-progress) * .04)); }
.concept-copy h2 em { display: inline-block; transform: translate3d(calc((1 - var(--scene-progress)) * 12px),0,0); }
.art-index { display: none; }
.art-caption { border-top: 0; }
.art-caption::after { display: none; }
.cafe-main { transform: translate3d(calc((1 - var(--unfold)) * 15px),calc((1 - var(--unfold)) * 48px),0) rotate(calc(-19deg + var(--unfold) * 16deg)) scale(calc(.83 + var(--unfold) * .17)); }.cafe-main img { transform: scale(calc(1.12 - var(--scene-progress) * .12)); }.cafe-main { overflow: hidden; }
.cafe-story { transform: translate3d(calc((1 - var(--unfold)) * -160px),calc((1 - var(--unfold)) * 130px),0) rotate(calc(-9deg + var(--unfold) * 19deg)); }.cafe-caption { transform: translate3d(calc((1 - var(--unfold)) * 160px),calc((1 - var(--unfold)) * 70px),0) rotate(calc(8deg - var(--unfold) * 20deg)); }
.beauty-product { overflow: hidden; transform: translate3d(0,calc((1 - var(--unfold)) * 95px),0) rotate(calc(20deg - var(--unfold) * 20deg)) scale(calc(.81 + var(--unfold) * .19)); }.beauty-product img { transform: scale(calc(1.16 - var(--scene-progress) * .16)); }.beauty-type { transform: translate3d(calc((1 - var(--unfold)) * -70px),calc((1 - var(--unfold)) * 30px),0); }.beauty-feedback { transform: translate3d(calc((1 - var(--unfold)) * -30px),calc((1 - var(--unfold)) * 130px),0) rotate(calc(-15deg + var(--unfold) * 11deg)); }.beauty-approved { transform: translate3d(0,calc((1 - var(--unfold)) * 140px),0) rotate(calc(20deg - var(--unfold) * 23deg)) scale(calc(.5 + var(--unfold) * .5)); }
.atelier-editorial { overflow: hidden; transform: translate3d(calc(var(--scene-progress) * -10px),calc(var(--scene-progress) * -25px),0) rotate(calc(8deg - var(--unfold) * 17deg)) scale(calc(1.07 - var(--unfold) * .13)); }.atelier-editorial img { transform: scale(calc(1.15 - var(--scene-progress) * .15)); }.atelier-question { transform: translate3d(calc((1 - var(--unfold)) * 70px),calc((1 - var(--unfold)) * 120px),0) rotate(calc(15deg - var(--unfold) * 15deg)); }.atelier-answer { transform: translate3d(calc((1 - var(--unfold)) * -60px),calc((1 - var(--unfold)) * 180px),0); }.conversation-route { transform: rotate(calc(var(--scene-progress) * 90deg)); }
.art-caption::after { content: ''; position: absolute; height: 1px; left: 0; right: 0; top: -1px; background: #757575; transform-origin: left; transform: scaleX(var(--scene-progress)); }
/* A moving ribbon carries the story into scope and the actual intake. */
.format-bridge { background: transparent; color: var(--ink); padding-block: 18px 25px; }
.format-marquee { border: 0; padding-block: 0 20px; }
.format-marquee>div { transform: translate3d(calc(var(--scene-progress) * -30%),0,0); }
.format-marquee span { color: #777777; }
.format-inner { padding-block: 40px 30px; }
.format-inner .eyebrow,.format-inner h2>span:not(.heading-phrase) { color: #656565; }
.format-inner h2 { transform: translate3d(0,calc((1 - var(--entry-progress)) * 55px - var(--scene-progress) * 12px),0); }
.format-list>p { border-color: var(--line); transform: translate3d(calc((1 - var(--entry-progress)) * 60px),0,0); }
.format-list>p:nth-child(2) { transform: translate3d(calc((1 - var(--entry-progress)) * 90px),0,0); }
.format-list>p:nth-child(3) { transform: translate3d(calc((1 - var(--entry-progress)) * 120px),0,0); }
.format-list>p>span,.format-list>p>small,.format-note { color: var(--muted); }
.format-list .text-link { border-color: var(--ink); }
.offer-section { padding-block: 65px; }
.offer-section h2 { transform: translate3d(calc((1 - var(--entry-progress)) * -40px),calc(var(--scene-progress) * -12px),0); }
.offer-details>p { transform: translate3d(0,calc((1 - var(--entry-progress)) * 40px),0); }
.offer-details dl>div { transform: translate3d(calc((1 - var(--entry-progress)) * 50px),0,0); }
.onboarding-section { border: 0; padding-block: 60px 75px; }
.onboarding-intro h2 { transform: translate3d(calc((1 - var(--entry-progress)) * -35px),0,0); }
.onboarding-promise>span { display: block; transform: rotate(calc((1 - var(--entry-progress)) * -60deg + var(--scene-progress) * 35deg)); }
/* Inputs stay still so focus and pointer targets never drift while answering. */
.onboarding-panel { transform: none; }
.experience-page .questions { border: 0; padding-block: 45px 65px; }
.questions>div:first-child { transform: translate3d(calc((1 - var(--entry-progress)) * -35px),0,0); }
.questions .question-list { transform: translate3d(0,calc((1 - var(--entry-progress)) * 30px),0); }
/* The film dissolves into the same paper above and below, without another hold. */
.opening { display: block; min-height: 0; height: auto; overflow: visible; isolation: auto; background: var(--paper); color: var(--ink); }
.closing-viewport { position: relative; height: auto; min-height: 730px; overflow: clip; display: flex; align-items: center; isolation: isolate; background: var(--paper); }
.opening-scene { inset: 10% 2% 12% 0; mix-blend-mode: multiply; transform: scale(calc(1.03 - var(--scene-progress) * .03)); transform-origin: right center; mask-image: linear-gradient(transparent,#000 15%,#000 85%,transparent); }
.opening-poster,.opening-film { object-fit: contain; object-position: right center; filter: grayscale(1) brightness(1.8) contrast(1.4); }
.opening-shade { background: linear-gradient(90deg,var(--paper),#f2f2f2e0 32%,#f2f2f200 65%); mask-image: none; }
.opening-film { transition: none; }
.opening-content { padding-block: 135px 155px; transform: translate3d(0,calc(var(--scene-progress) * -20px),0); }
.opening h2 { font-size: clamp(70px,8.5vw,124px); transform-origin: left center; transform: scale(calc(.97 + var(--scene-progress) * .03)); }
.opening .eyebrow,.opening h2>span:not(.heading-phrase),.opening-bottom>p,.opening-bottom strong { color: var(--muted); }
.opening-bottom { display: flex; flex-direction: column; align-items: start; gap: 22px; }
.opening-bottom .opening-action { margin-top: 0; }
.opening-arrow { transform: rotate(calc((1 - var(--scene-progress)) * 70deg)); }
.opening-foot { color: var(--muted); bottom: 25px; }
.experience-page .site-footer { border: 0; padding-top: 15px; }
.site-footer .footer-wordmark { transform-origin: center bottom; transform: translate3d(calc((1 - var(--entry-progress)) * -55px),calc((1 - var(--entry-progress)) * 30px),0) scale(calc(.96 + var(--entry-progress) * .04)); }
/* One progress strand for the entire visit, never a separate one per scene. */
.experience-page::after { content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 3px; z-index: 12; pointer-events: none; background: #444444; transform: scaleX(var(--page-progress,0)); transform-origin: left; }
@media (min-width: 1001px) {
  .beauty-chapter .concept-layout { grid-template-columns: 1.24fr .76fr; }
  .beauty-chapter .concept-art { grid-column: 1; grid-row: 1; }
  .beauty-chapter .concept-copy { grid-column: 2; grid-row: 1; padding-left: 30px; }
}
@media (max-width: 1100px) {
  .hero-title-wrap h1 { font-size: 10.5vw; }.hero-title-wrap { padding-top: 75px; }.hero-positioning { font-size: 14px; }
  .concept-layout { gap: 35px; }.concept-art { height: 500px; }
}
@media (max-width: 760px) {
  .experience-header { min-height: 70px; }
  .hero-viewport { height: min(820px,calc(100svh - 25px)); min-height: 640px; }
  .hero-title-wrap { padding-top: 42px; z-index: 1; }
  .hero-title-wrap h1 { font-size: clamp(62px,16.3vw,108px); margin-top: 25px; max-width: none; }
  .hero-title-wrap .eyebrow { font-size: 7px; max-width: 36ch; }
  .hero-positioning { font-size: 12px; line-height: 1.65; width: fit-content; padding-right: 18px; background: linear-gradient(90deg,var(--paper) 85%,transparent); }
  .hero-media { inset: 43% 3% 16% -75%; max-height: 70vw; opacity: .85; transform: translate3d(calc(var(--scene-progress) * 7%),0,0) scale(calc(1 - var(--scene-progress) * .035)); mask-image: linear-gradient(90deg,transparent,#000 25%,#000); }
  .hero-media img,.hero-media video { object-fit: contain; }
  .hero-orbits { z-index: 0; opacity: .19; }.hero-orbits>span { width: 83vw; right: -15%; top: 29%; }.hero-orbits>span+span { right: 14%; top: 40%; }
  .hero-bottom { bottom: 28px; align-items: start; flex-direction: column; gap: 24px; }
  .hero-bottom .button { min-height: 46px; font-size: 10px; padding: 13px 17px; gap: 20px; }
  .hero-scroll-cue { font-size: 6px; }.hero-scroll-cue small { font-size: 8px; }.hero-scroll-cue>span { font-size: 17px; margin-left: 18px; }
  .stories-heading { padding-block: 25px 20px; }.story-endorsement { align-items: start; gap: 24px; margin-bottom: 32px; }.story-endorsement .company-logo { width: 110px; }.story-endorsement .eyebrow { font-size: 6px; max-width: 23ch; text-align: right; }.stories-heading>div { gap: 22px; }
  .concept-layout { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 20px; height: auto; min-height: 0; padding-block: 35px 15px; }
  .concept-copy { padding: 0; }.concept-copy .eyebrow { font-size: 7px; }
  .concept-copy h2 { font-size: clamp(38px,10vw,56px); margin-block: 20px 18px; line-height: 1.04; }.concept-copy h2 br { display: none; }.concept-copy h2 em::before { content: ' '; white-space: pre; }.concept-copy h2 em { transform: translate3d(calc((1 - var(--scene-progress)) * 7px),0,0); }
  .concept-copy>p:not(.eyebrow) { font-size: 13px; line-height: 1.8; max-width: 45ch; }
  .concept-deliverable { margin-top: 18px; padding-top: 12px; }.concept-deliverable>span { display: none; }.concept-deliverable>p { margin: 0; font-size: 9px; }
  .concept-art { width: min(100%,480px); margin: 0 auto; height: clamp(390px,112vw,520px); min-height: 0; align-self: center; }
  .art-caption { font-size: 5px; padding-block: 10px; }.cafe-caption { padding: 15px; }.cafe-caption p { font-size: 17px; }.cafe-main { top: 16%; width: 47%; left: 28%; }.cafe-main h3 { font-size: 28px; }.cafe-main>div { padding: 12px; }.cafe-story { width: 28%; top: 16%; right: 0; }.cafe-story p { font-size: 27px; }.cafe-caption { width: 36%; top: 5%; }
  .beauty-product { width: 54%; left: 32%; top: 7%; }.beauty-product h3 { font-size: 28px; }.beauty-feedback { top: 33%; width: 42%; padding: 15px; }.beauty-feedback p { font-size: 16px; }.beauty-type { font-size: 37px; top: 11%; }.beauty-approved { top: 76%; padding: 12px 15px; }
  .atelier-editorial { width: 75%; top: 5%; }.atelier-editorial h3 { font-size: 34px; }.atelier-question { top: 39%; width: 62%; padding: 16px; }.atelier-question p { font-size: 20px; }.atelier-answer { top: 66%; padding: 15px; width: 69%; }.atelier-answer p { font-size: 10px; line-height: 1.65; }.atelier-answer small { margin-top: 10px; font-size: 6px; }
  .format-bridge { padding-top: 0; }.format-inner { padding-block: 25px; }.offer-section { padding-block: 40px; }.onboarding-section { padding-block: 35px 45px; }.experience-page .questions { padding-block: 30px 40px; }
  .closing-viewport { min-height: 880px; align-items: start; }.opening-content { padding-block: 130px 140px; }.opening h2 { font-size: 17vw; }.opening-foot { bottom: 22px; }
  .opening-scene { inset: 56% 3% 12% -65%; }
  .opening-shade { display: none; }
}
@media (max-height: 540px) and (min-width: 761px) {
  .hero-viewport { height: 690px; }
}
/* Reduced/script-free views retain this same flow, with fully composed artwork. */
html:not([data-motion]) [data-scroll-scene],html[data-motion='reduced'] [data-scroll-scene] { --entry-progress: 1 !important; --exit-progress: 0 !important; }
html:not([data-motion]) .concept-chapter,html[data-motion='reduced'] .concept-chapter { --scene-progress: 1 !important; }
html:not([data-motion]) .cinematic-hero,html[data-motion='reduced'] .cinematic-hero { --scene-progress: 0 !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }