/* The public experience: one campaign, from first look to first-month brief. */
.experience-page { --paper: #f2f2f2; --ink: #1c1c1c; --muted: #626262; --line: #d2d2d2; --soft: #e7e7e7; overflow-x: clip; }
.experience-page .wrap { width: min(1320px, calc(100% - 100px)); }
.experience-header { padding-inline: 36px; min-height: 84px; background: var(--paper); border: 0; position: relative; z-index: 4; }
.experience-header .brand { font-size: 25px; }
.experience-header nav { gap: 28px; }
.header-cta { display: inline-flex; align-items: center; gap: 26px; font-size: 12px; font-weight: 550; text-decoration: none; border-bottom: 1px solid; padding-block: 10px; }
.header-cta > span { font-size: 23px; line-height: 1; }
.motion-toggle { padding: 9px 12px; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 30px; font-size: 10px; white-space: nowrap; }
.motion-toggle:hover { color: var(--ink); border-color: var(--ink); }
.opening { position: relative; isolation: isolate; min-height: min(840px, calc(100svh - 84px)); background: #292929; color: #f3f3f3; overflow: clip; display: flex; flex-direction: column; justify-content: center; }
.opening-scene { position: absolute; inset: -7% 0; z-index: -3; transform: translate3d(0, calc(var(--hero-progress, 0) * 9%), 0) scale(1.04); }
.opening-poster, .opening-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 58%; }
.opening-film { opacity: 0; transition: opacity 1.1s ease; }
.opening-scene[data-video-ready='true'] .opening-film { opacity: 1; }
.opening-poster { filter: brightness(.82); }
.opening-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #141414d9, #1515155e 58%, #1414140d), linear-gradient(0deg, #171717aa, transparent 40%); z-index: -1; }
.opening-content { width: 100%; padding: 70px 6.5% 74px; transform: translate3d(0, calc(var(--hero-progress, 0) * -75px), 0); }
.opening .eyebrow { color: #dedede; font-size: 10px; letter-spacing: .1em; }
.opening h2 { font-size: clamp(70px, 10.7vw, 164px); font-weight: 450; letter-spacing: -.075em; line-height: .91; margin: 36px 0 44px -7px; max-width: 9ch; }
.opening h2 > span:not(.heading-phrase) { color: #dbdbdb; font-weight: 360; }
.opening-bottom { display: flex; align-items: end; justify-content: space-between; gap: 40px; max-width: 1140px; }
.opening-bottom > p { color: #eeeeee; font-size: 17px; line-height: 1.6; letter-spacing: -.025em; }
.opening-bottom strong { font-weight: 400; color: #c6c6c6; display: inline-block; margin-top: 8px; font-size: 12px; }
.opening-action { display: flex; gap: 35px; align-items: center; text-decoration: none; font-size: 18px; line-height: 1.6; }
.opening-action small { color: #d2d2d2; font-size: 11px; }
.opening-arrow { height: 68px; width: 68px; border: 1px solid #dfdfdf88; border-radius: 50%; display: grid; place-items: center; font-size: 30px; transition: background .3s, transform .3s; }
.opening-action:hover .opening-arrow { transform: translateY(5px); background: #ffffff18; }
.opening-foot { position: absolute; bottom: 20px; inset-inline: 6.5%; display: flex; justify-content: space-between; gap: 20px; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; color: #cecece; }
.format-bridge { overflow: clip; background: #232323; color: #efefef; padding-block: 32px 35px; }
.format-marquee { width: 100%; overflow: clip; font-size: clamp(49px, 7.1vw, 110px); font-weight: 440; line-height: 1.3; letter-spacing: -.06em; white-space: nowrap; padding-bottom: 30px; border-bottom: 1px solid #4c4c4c; }
.format-marquee > div { display: inline-block; padding-left: 4vw; }
html[data-motion='running'] .format-marquee > div { animation: omni-ribbon 34s linear infinite; }
.format-marquee span { color: #a1a1a1; }
.format-marquee i { font-style: normal; display: inline-block; margin-inline: 35px; }
@keyframes omni-ribbon { to { transform: translateX(-50%); } }
.format-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; padding-block: 73px 46px; }
.format-inner .eyebrow { color: #b5b5b5; font-size: 9px; }
.format-inner h2 { font-size: clamp(47px, 5.2vw, 76px); font-weight: 450; line-height: 1.05; letter-spacing: -.06em; margin-top: 30px; }
.format-inner h2 > span:not(.heading-phrase) { color: #b4b4b4; }
.format-list > p { position: relative; padding: 21px 0 21px 33px; font-size: 17px; border-top: 1px solid #5c5c5c; }
.format-list > p > span { position: absolute; left: 0; top: 24px; color: #acacac; font-family: var(--mono); font-size: 8px; }
.format-list > p > small { display: block; font-size: 11px; color: #b4b4b4; margin-top: 11px; line-height: 1.7; }
.format-list .text-link { margin-top: 18px; border-color: #b4b4b4; }
.format-note { font-size: 9px; color: #b2b2b2; line-height: 1.7; }
.offer-section { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-block: 100px; }
.offer-section .eyebrow { font-size: 9px; color: var(--muted); }
.offer-section h2 { font-size: clamp(43px, 4.8vw, 68px); line-height: 1.06; letter-spacing: -.06em; font-weight: 470; margin-top: 25px; }
.offer-details > p { font-size: 15px; color: var(--muted); line-height: 1.8; max-width: 44ch; }
.offer-details dl { margin: 30px 0 22px; }
.offer-details dl > div { padding-block: 15px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 100px 1fr; gap: 20px; font-size: 12px; }
.offer-details dt { color: var(--muted); }.offer-details dd { margin: 0; line-height: 1.7; }
.offer-details .offer-note { font-size: 10px; }
/* A plain-paper opening: the objects explain the service, not a background image. */
.kinetic-hero { display: grid; grid-template-columns: 1fr 1.04fr; column-gap: 25px; align-items: center; padding-top: 48px; }
.hero-copy { position: relative; z-index: 1; padding-block: 20px 45px; }
.hero-copy .eyebrow { color: var(--muted); font-size: 9px; }
.hero-copy h1 { font-size: clamp(64px, 7.5vw, 110px); line-height: .99; letter-spacing: -.078em; font-weight: 490; margin: 28px 0; }
.hero-copy h1 span { color: inherit; }.hero-seen { color: #8f8f8f !important; }.hero-remembered { position: relative; }
.hero-explanation { color: var(--muted); line-height: 1.8; font-size: 14px; letter-spacing: -.025em; }
.hero-explanation strong { color: var(--ink); font-weight: 520; }
.kinetic-actions { display: flex; gap: 21px; align-items: center; flex-wrap: wrap; margin-top: 28px; }.kinetic-actions .button { border-radius: 0; padding-inline: 17px; font-size: 11px; gap: 18px; }.kinetic-actions .text-link { font-size: 10px; }
.hero-workflow { position: relative; aspect-ratio: 600 / 580; min-width: 0; isolation: isolate; }
.workflow-paths { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.workflow-track { stroke: #cacaca; stroke-width: 1; stroke-dasharray: 3 7; }.workflow-signal { stroke: #626262; stroke-width: 2; stroke-dasharray: 5 95; animation: signal-travel 12s linear infinite paused; }
.workflow-idea { position: absolute; width: 46%; left: 0; top: 8%; transform: rotate(-8deg); padding: 21px 24px 26px; border: 1px solid #d7d7d7; background: #fafafa; box-shadow: 0 20px 50px -34px #39393955; }
.workflow-idea .small-label, .workflow-creative .small-label, .workflow-conversation .small-label { font-size: 7px; color: #767676; }
.workflow-idea p { font-size: clamp(19px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -.055em; margin-top: 15px; }
.idea-spark { position: absolute; right: 13px; bottom: 15px; width: 31px; height: 31px; }
.workflow-creative { position: absolute; right: 4%; top: 21%; width: 45%; padding: 21px; background: #e3e3e3; transform: rotate(9deg); box-shadow: 0 22px 40px -30px #35353550; border: 1px solid #cbcbcb; }
.creative-type { font-size: clamp(37px, 4.4vw, 64px); font-weight: 560; letter-spacing: -.085em; line-height: .96; margin-top: 27px; position: relative; }.creative-type>span { position: absolute; font-weight: 300; right: 0; bottom: 3px; font-size: 45px; }
.creative-formats { display: flex; gap: 7px; margin-top: 30px; }.creative-formats>span { font-family: var(--mono); font-size: 6px; padding: 6px 8px; border: 1px solid #b3b3b3; border-radius: 20px; }
.workflow-approval { position: absolute; left: 7%; top: 48%; display: flex; gap: 12px; align-items: center; transform: rotate(-4deg); background: var(--paper); border: 1px solid #cfcfcf; padding: 15px 20px; border-radius: 40px; }
.workflow-approval svg { width: 25px; height: 25px; padding: 4px; border: 1px solid #a9a9a9; border-radius: 50%; }.workflow-approval>span { font-size: 13px; letter-spacing: -.03em; }.workflow-approval small { display: block; font-family: var(--mono); font-size: 6px; color: #808080; margin-top: 4px; letter-spacing: .02em; }
.workflow-conversation { position: absolute; left: 13%; top: 68%; width: 65%; background: #282828; color: #f2f2f2; border-radius: 20px 20px 20px 0; padding: 22px 25px; transform: rotate(3deg); box-shadow: 0 25px 45px -30px #37373755; }
.workflow-conversation .small-label { color: #bfbfbf; }.workflow-conversation>p { font-size: clamp(26px, 3vw, 44px); line-height: 1.3; letter-spacing: -.06em; margin-block: 10px; }.workflow-conversation>div { display: flex; gap: 4px; align-items: center; }.workflow-conversation i { width: 3px; height: 3px; border-radius: 50%; background: #c6c6c6; }.workflow-conversation>div>span { margin-left: 7px; color: #bfbfbf; font-size: 8px; }
.workflow-caption { position: absolute; left: 0; right: 0; bottom: -3%; text-align: center; font: 7px var(--mono); color: #898989; letter-spacing: .06em; }
.hero-baseline { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 38px; padding-block: 25px; border-top: 1px solid var(--line); }
.hero-baseline>span:not(.company-endorsement),.hero-baseline>a { font: 8px var(--mono); color: var(--muted); letter-spacing: .03em; }.hero-baseline>a { text-decoration: none; }.hero-baseline>a>span { margin-left: 14px; font-size: 15px; }
.hero-workflow [data-workflow-node] { animation: idea-float 8s ease-in-out infinite paused; }
.hero-workflow .workflow-creative { animation-name: creative-float; animation-delay: -2s; }.hero-workflow .workflow-approval { animation-name: approval-float; animation-delay: -4s; }.hero-workflow .workflow-conversation { animation-name: conversation-float; animation-delay: -6s; }
html[data-motion='running'] [data-hero-workflow][data-in-view='true'] [data-workflow-node],html[data-motion='running'] [data-hero-workflow][data-in-view='true'] .workflow-signal { animation-play-state: running; }
@keyframes idea-float { 0%,100%{ transform: translateY(0) rotate(-8deg); }50%{ transform: translateY(-13px) rotate(-4deg); } }
@keyframes creative-float { 0%,100%{ transform: translateY(0) rotate(9deg); }50%{ transform: translateY(12px) rotate(5deg); } }
@keyframes approval-float { 0%,100%{ transform: translateY(0) rotate(-4deg); }50%{ transform: translateY(-8px) rotate(0); } }
@keyframes conversation-float { 0%,100%{ transform: translateY(0) rotate(3deg); }50%{ transform: translateY(10px) rotate(-1deg); } }
@keyframes signal-travel { to { stroke-dashoffset: -100; } }
/* Three separate scroll stories: spread, assemble, follow through. */
.stories-heading { padding-block: 100px 70px; }.stories-heading .eyebrow { color: var(--muted); font-size: 9px; }.stories-heading>div { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-top: 25px; }
.stories-heading h2 { font-size: clamp(52px, 6vw, 88px); font-weight: 480; letter-spacing: -.067em; line-height: 1.03; }.stories-heading h2>span:not(.heading-phrase) { color: #909090; }.stories-heading p:not(.eyebrow) { max-width: 43ch; font-size: 14px; line-height: 1.9; color: var(--muted); }.stories-heading small { display: block; margin-top: 17px; font-size: 10px; }
.concept-chapter { --scene-progress: 1; --unfold: clamp(0, calc((var(--scene-progress) - .28) * 1.8), 1); border-top: 1px solid var(--line); position: relative; }
.cafe-chapter { background: #e8e8e8; }.beauty-chapter { background: #f3f3f3; }.atelier-chapter { background: #e6e6e6; }
.concept-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: 70px; min-height: max(920px, 125svh); align-items: start; padding-block: 70px; }
.concept-copy { position: sticky; top: max(60px, 19svh); padding-block: 35px 15px; }.concept-copy .eyebrow { font-size: 9px; color: var(--muted); }.concept-copy h2 { font-size: clamp(45px, 5vw, 72px); font-weight: 480; line-height: 1.04; letter-spacing: -.06em; margin: 26px 0; }.concept-copy h2 em { font-weight: 400; font-family: Georgia, serif; letter-spacing: -.055em; color: #737373; }.concept-copy>p:not(.eyebrow) { max-width: 34ch; line-height: 1.9; color: #656565; font-size: 14px; }
.concept-deliverable { border-top: 1px solid #cbcbcb; margin-top: 35px; padding-top: 18px; }.concept-deliverable>span { font: 8px var(--mono); color: #7a7a7a; }.concept-deliverable>p { margin-top: 10px; font-size: 11px; line-height: 1.7; }.chapter-next { display: flex; width: fit-content; gap: 45px; align-items: center; text-decoration: none; border-bottom: 1px solid #adadad; padding-bottom: 9px; margin-top: 30px; font-size: 11px; }.chapter-next>span { font-size: 23px; }
.concept-art { position: sticky; top: max(30px, calc((100svh - 630px) / 2)); height: 630px; min-width: 0; isolation: isolate; }
.art-piece { position: absolute; box-shadow: 0 30px 55px -32px #4040404d; }.art-piece img { display: block; width: 100%; height: 100%; object-fit: cover; }.art-index { position: absolute; right: 3%; top: 0; font: 9px var(--mono); color: #949494; }.art-orbit { position: absolute; width: 86%; aspect-ratio: 1; border: 1px solid #d2d2d2; border-radius: 50%; left: 7%; top: 7%; z-index: -1; }.art-caption { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid #cccccc; padding-block: 16px; display: flex; justify-content: space-between; gap: 15px; font: 7px var(--mono); color: #787878; letter-spacing: .02em; }
.cafe-main { width: 47%; aspect-ratio: 4 / 5.1; left: 25%; top: 17%; color: #f2f2f2; transform: translateY(calc((1 - var(--unfold)) * 42px)) rotate(calc(-12deg + var(--unfold) * 9deg)); z-index: 2; }
.cafe-main>div { position: absolute; inset: 0; padding: 20px; background: linear-gradient(180deg, #29292933, transparent 20%, #23232399); display: flex; flex-direction: column; }.cafe-main>div>span { font: 6px var(--mono); }.cafe-main h3 { margin-top: auto; font-size: clamp(32px,3.2vw,46px); line-height: 1.03; letter-spacing: -.055em; font-weight: 450; }.cafe-main small { display: flex; justify-content: space-between; align-items: center; font: 5px var(--mono); margin-top: 22px; }.cafe-main b { font: 28px var(--sans); }
.cafe-story { width: 29%; aspect-ratio: 9 / 16; right: 1%; top: 12%; color: #f3f3f3; transform: translate(calc((1 - var(--unfold)) * -120px), calc((1 - var(--unfold)) * 85px)) rotate(calc(var(--unfold) * 10deg)); }.cafe-story img { object-position: 60% center; }.cafe-story>div { position: absolute; inset: 0; padding: 15px; display: flex; flex-direction: column; background: linear-gradient(0deg,#242424a6,transparent 80%); }.cafe-story>div>span { font: 6px var(--mono); }.cafe-story p { margin-top: auto; font: italic clamp(28px,3.2vw,44px)/1 Georgia,serif; letter-spacing: -.04em; }.cafe-story small { font: 5px var(--mono); margin-top: 18px; }
.cafe-caption { width: 33%; top: 12%; left: 0; background: #fbfbfb; padding: 23px; transform: translate(calc((1 - var(--unfold)) * 145px), calc((1 - var(--unfold)) * -30px)) rotate(calc(var(--unfold) * -12deg)); z-index: 3; }.cafe-caption .small-label { font-size: 6px; color: #868686; }.cafe-caption p { font-size: clamp(16px,1.7vw,24px); letter-spacing: -.04em; line-height: 1.3; margin-top: 15px; }.caption-line { display: block; width: 28px; height: 1px; background: #999999; margin-block: 21px 12px; }.cafe-caption small { font: 5px var(--mono); color: #8f8f8f; }
.beauty-outline { position: absolute; top: 8%; left: 26%; width: 64%; height: 74%; border: 1px solid #d4d4d4; border-radius: 46% 46% 0 0; transform: rotate(calc(12deg - var(--unfold) * 12deg)); }.beauty-type { box-shadow: none; top: 18%; left: -1%; font-size: clamp(36px,4.5vw,68px); font-weight: 400; line-height: 1.03; letter-spacing: -.06em; color: #bebebe; transform: translateX(calc((1 - var(--unfold)) * -35px)); }.beauty-type em { font-family: Georgia,serif; }
.beauty-product { left: 29%; top: 8%; width: 55%; aspect-ratio: 4/5; transform: translateY(calc((1 - var(--unfold)) * 80px)) rotate(calc(13deg - var(--unfold) * 13deg)); }.beauty-product>div { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 19px; }.beauty-product>div>span { font: 6px var(--mono); color: #6c6c6c; }.beauty-product h3 { margin-top: auto; font-size: clamp(27px,2.8vw,40px); line-height: 1.02; letter-spacing: -.06em; font-weight: 470; }.beauty-product small { font: 5px var(--mono); margin-top: 15px; color: #747474; }
.beauty-feedback { width: 39%; top: 33%; left: 0; padding: 24px; background: #fafafa; transform: translateY(calc((1 - var(--unfold)) * 95px)) rotate(calc(-9deg + var(--unfold) * 5deg)); }.beauty-feedback .small-label { font-size: 6px; color: #828282; }.beauty-feedback p { font-size: clamp(16px,1.6vw,22px); line-height: 1.4; letter-spacing: -.04em; margin-top: 11px; }.beauty-feedback small { display: block; margin-top: 19px; font: 5px var(--mono); color: #828282; }
.beauty-approved { right: 0; top: 72%; display: flex; gap: 13px; align-items: center; border: 1px solid #bdbdbd; border-radius: 40px; padding: 18px 22px; color: #333333; background: #e1e1e1; transform: translateY(calc((1 - var(--unfold)) * 65px)) rotate(calc(15deg - var(--unfold) * 18deg)) scale(calc(.75 + var(--unfold) * .25)); }.beauty-approved svg { width: 29px; height: 29px; }.beauty-approved>span { font-size: 17px; letter-spacing: -.04em; }.beauty-approved small { display: block; font: 6px var(--mono); margin-top: 5px; }
.conversation-route { position: absolute; left: 12%; top: 13%; width: 75%; height: 70%; border: 1px dashed #c1c1c1; border-radius: 50%; transform: rotate(30deg); }.atelier-editorial { left: 0; top: 10%; width: 74%; aspect-ratio: 4 / 3.1; transform-origin: 25% 50%; transform: translateY(calc(var(--unfold) * -20px)) rotate(calc(-3deg - var(--unfold) * 6deg)) scale(calc(1 - var(--unfold) * .07)); }.atelier-editorial>div { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; color: #f5f5f5; background: linear-gradient(0deg,#272727a1,transparent 70%); }.atelier-editorial>div>span { font: 6px var(--mono); color: #535353; }.atelier-editorial h3 { margin-top: auto; font-size: clamp(35px,3.8vw,54px); line-height: .98; font-weight: 440; letter-spacing: -.06em; }.atelier-editorial small { font: 5px var(--mono); margin-top: 19px; }
.atelier-question { right: 0; top: 39%; width: 59%; background: #f6f6f6; padding: 24px; border-radius: 18px 18px 0 18px; transform: translateY(calc((1 - var(--unfold)) * 100px)) rotate(calc(9deg - var(--unfold) * 9deg)); }.atelier-question .small-label { font-size: 6px; color: #7d7d7d; }.atelier-question p { font-size: clamp(20px,2.1vw,29px); letter-spacing: -.045em; line-height: 1.25; margin-top: 12px; }
.atelier-answer { right: 5%; top: 64%; width: 65%; background: #393939; color: #f2f2f2; padding: 23px; border-radius: 0 18px 18px 18px; transform: translateY(calc((1 - var(--unfold)) * 120px)); }.atelier-answer .small-label { color: #c4c4c4; font-size: 6px; }.atelier-answer p { margin-top: 13px; font-size: 13px; line-height: 1.75; }.atelier-answer small { display: flex; gap: 6px; align-items: center; margin-top: 20px; color: #c8c8c8; font-size: 7px; }.atelier-answer small>span { width: 4px; height: 4px; border-radius: 50%; background: #c8c8c8; }
.experience-page .questions { padding-block: 70px 90px; border-top: 1px solid var(--line); }
.experience-page .footer-wordmark { color: #bcbcbc; }
.motion-ready .experience-page [data-reveal] { transition-duration: .9s; }
.motion-ready .experience-page [data-reveal]:not(.is-revealed) { transform: translateY(35px); }
html[data-motion='paused'] .experience-page *, html[data-motion='reduced'] .experience-page * { animation-play-state: paused !important; }
html:not([data-motion]) .concept-chapter,html[data-motion='reduced'] .concept-chapter { --scene-progress: 1 !important; }
@media (max-width: 1100px) {
  .experience-page .wrap { width: calc(100% - 70px); }.experience-header { padding-inline: 28px; }.kinetic-hero { column-gap: 5px; }.hero-copy h1 { font-size: 8vw; }.hero-workflow { margin-top: -70px; }.kinetic-actions { gap: 16px; }.workflow-idea { padding: 17px; }.workflow-creative { padding: 17px; }.creative-formats { gap: 4px; }.creative-formats>span { padding-inline: 5px; }.workflow-conversation { padding: 18px; }.workflow-approval { padding: 12px 14px; }.hero-baseline>span:not(.company-endorsement) { display: none; }.concept-layout { gap: 30px; grid-template-columns: .8fr 1.2fr; }.concept-art { height: 565px; top: max(30px,calc((100svh - 565px)/2)); }.concept-copy h2 { font-size: 50px; }.cafe-caption { padding: 17px; }.cafe-main>div { padding: 16px; }.beauty-feedback { padding: 18px; }.beauty-approved { padding: 14px; }.atelier-answer { top: 62%; padding: 19px; }.atelier-question { padding: 20px; }.offer-section,.format-inner { gap: 60px; }
}
@media (max-width: 760px) {
  .experience-page .wrap { width: calc(100% - 40px); }.experience-header { min-height: 74px; padding-inline: 20px; gap: 15px; }.experience-header .brand { font-size: 21px; }.experience-header .brand-mark { width: 26px; }.experience-header nav { gap: 10px; }.header-cta { font-size: 10px; gap: 12px; }.header-cta>span { font-size: 19px; }.motion-toggle { position: fixed; right: 16px; bottom: 15px; z-index: 10; padding: 10px 13px; font-size: 9px; background: #f4f4f4ed; color: #404040; border-color: #c3c3c3; box-shadow: 0 4px 16px #13131314; }
  .kinetic-hero { display: block; padding-top: 25px; }.hero-copy { padding-block: 12px 20px; }.hero-copy h1 { font-size: clamp(66px, 14.5vw, 104px); margin: 27px 0 24px; }.hero-copy h1 .hero-remembered br { display: none; }.hero-copy h1 { max-width: 7ch; }.hero-copy .eyebrow { font-size: 8px; }.hero-explanation { font-size: 13px; }.kinetic-actions { gap: 15px; margin-top: 24px; }.kinetic-actions .button { font-size: 10px; gap: 18px; padding-inline: 15px; }.kinetic-actions .text-link { font-size: 9px; gap: 7px; }.hero-workflow { margin: 5px auto 35px; width: min(100%, 470px); }.workflow-idea p { font-size: clamp(18px,4.9vw,25px); }.workflow-idea { padding: 16px; }.idea-spark { width: 21px; height: 21px; bottom: 12px; right: 10px; }.workflow-creative { padding: 16px; }.creative-type { font-size: clamp(36px,10vw,50px); margin-top: 17px; }.creative-type>span { font-size: 28px; }.creative-formats { margin-top: 20px; }.creative-formats>span { font-size: 4px; padding: 5px; }.workflow-idea .small-label,.workflow-creative .small-label,.workflow-conversation .small-label { font-size: 5px; }.workflow-approval { left: 2%; padding: 11px 13px; gap: 8px; }.workflow-approval>span { font-size: 10px; }.workflow-approval small { font-size: 4px; }.workflow-approval svg { width: 20px; height: 20px; }.workflow-conversation { padding: 17px; }.workflow-conversation>p { font-size: 26px; margin-block: 7px; }.workflow-conversation>div>span { font-size: 6px; }.workflow-caption { font-size: 5px; bottom: -5%; }.hero-baseline { margin-top: 40px; padding-block: 22px; }.hero-baseline .company-logo { width: 120px; }.hero-baseline>a { font-size: 6px; }.hero-baseline>a>span { margin-left: 8px; }
  .stories-heading { padding-block: 60px 45px; }.stories-heading .eyebrow { font-size: 7px; max-width: 31ch; }.stories-heading>div { grid-template-columns: 1fr; gap: 25px; margin-top: 23px; }.stories-heading h2 { font-size: 58px; }.stories-heading p:not(.eyebrow) { font-size: 13px; }.stories-heading small { font-size: 9px; }
  .concept-layout { display: flex; flex-direction: column; gap: 20px; min-height: 1050px; padding-block: 45px 90px; }.concept-copy { position: relative; top: auto; padding-block: 0; width: 100%; }.concept-copy h2 { font-size: 48px; margin-block: 21px; }.concept-copy h2 br { display: initial; }.concept-copy h2 { max-width: none; }.concept-copy h2 em { display: inline; }.concept-copy .eyebrow { font-size: 8px; }.concept-copy>p:not(.eyebrow) { max-width: 45ch; font-size: 12px; line-height: 1.85; }.concept-deliverable { margin-top: 21px; padding-top: 15px; }.concept-deliverable>span { font-size: 7px; }.concept-deliverable>p { font-size: 10px; }.chapter-next { margin-top: 16px; font-size: 10px; gap: 30px; }.concept-art { width: 100%; height: 445px; flex: 0 0 445px; top: max(18px,calc((100svh - 445px)/2)); margin-block: 12px 50px; }.art-index { font-size: 7px; }.art-caption { font-size: 5px; padding-block: 13px; gap: 20px; }.art-caption>span { max-width: 25ch; line-height: 1.7; }.art-caption>span:last-child { text-align: right; }.cafe-main>div { padding: 14px; }.cafe-main h3 { font-size: clamp(26px,7vw,39px); }.cafe-main>div>span { font-size: 4px; }.cafe-main small { font-size: 3px; margin-top: 13px; }.cafe-main b { font-size: 18px; }.cafe-main { width: 49%; left: 25%; top: 17%; }.cafe-story { top: 15%; width: 31%; }.cafe-story>div { padding: 11px; }.cafe-story>div>span { font-size: 4px; }.cafe-story p { font-size: 30px; }.cafe-story small { font-size: 3px; }.cafe-caption { top: 9%; padding: 16px; width: 36%; }.cafe-caption .small-label { font-size: 4px; }.cafe-caption p { font-size: 17px; margin-top: 9px; }.caption-line { margin-block: 15px 10px; width: 22px; }.cafe-caption small { font-size: 3px; }.beauty-type { font-size: 40px; top: 20%; }.beauty-product { top: 13%; width: 57%; }.beauty-product>div { padding: 14px; }.beauty-product h3 { font-size: 28px; }.beauty-product>div>span { font-size: 4px; }.beauty-product small { font-size: 3px; }.beauty-feedback { width: 43%; top: 32%; padding: 16px; }.beauty-feedback p { font-size: 17px; }.beauty-feedback .small-label,.beauty-feedback small { font-size: 4px; }.beauty-feedback small { margin-top: 13px; }.beauty-approved { top: 72%; padding: 12px 14px; gap: 8px; }.beauty-approved>span { font-size: 14px; }.beauty-approved small { font-size: 4px; }.beauty-approved svg { width: 21px; height: 21px; }.atelier-editorial { width: 78%; top: 12%; }.atelier-editorial>div { padding: 17px; }.atelier-editorial h3 { font-size: 38px; }.atelier-editorial>div>span,.atelier-editorial small { font-size: 4px; }.atelier-editorial small { margin-top: 14px; }.atelier-question { width: 63%; top: 38%; padding: 17px; }.atelier-question p { font-size: 22px; }.atelier-question .small-label { font-size: 5px; }.atelier-answer { width: 70%; top: 66%; padding: 16px; }.atelier-answer p { font-size: 10px; margin-top: 9px; }.atelier-answer .small-label { font-size: 5px; }.atelier-answer small { font-size: 6px; margin-top: 13px; }
  .format-bridge { padding-top: 26px; }.format-marquee { font-size: 60px; padding-bottom: 20px; }.format-inner { grid-template-columns: 1fr; gap: 35px; padding-block: 47px 35px; }.format-inner h2 { font-size: 50px; margin-top: 22px; }.format-list>p { font-size: 16px; }.format-note { font-size: 8px; }.offer-section { grid-template-columns: 1fr; gap: 30px; padding-block: 57px; }.offer-section h2 { font-size: 47px; }.offer-details>p { font-size: 13px; }.offer-details dl>div { grid-template-columns: 83px 1fr; gap: 10px; font-size: 11px; }.experience-page .questions { padding-block: 48px 60px; gap: 33px; }
  .opening { min-height: max(650px,calc(100svh - 74px)); }.opening-content { padding: 66px 24px 90px; }.opening h2 { font-size: clamp(69px,13.5vw,100px); margin: 38px 0 39px -3px; letter-spacing: -.072em; }.opening .eyebrow { font-size: 8px; max-width: 28ch; line-height: 1.8; }.opening-bottom { display: block; }.opening-bottom>p { font-size: 16px; }.opening-action { margin-top: 37px; justify-content: space-between; font-size: 16px; }.opening-arrow { width: 50px; height: 50px; font-size: 25px; }.opening-foot { inset-inline: 24px; bottom: 20px; font-size: 6px; max-width: 320px; line-height: 1.8; }.opening-foot>span:last-child { max-width: 17ch; text-align: right; }.opening-shade { background: linear-gradient(90deg,#151515df,#15151552),linear-gradient(0deg,#151515ab,transparent); }.opening-poster,.opening-film { object-position: 61% center; }.experience-page .site-footer { padding-bottom: 40px; }
}
@media (max-width: 390px) {
  .experience-page .wrap { width: calc(100% - 32px); }.experience-header { padding-inline: 16px; }.experience-header .brand { font-size: 19px; }.header-cta { font-size: 9px; gap: 8px; }.header-cta>span { font-size: 17px; }.concept-copy h2 { font-size: 44px; }.concept-art { height: 420px; flex-basis: 420px; }.opening-content { padding-inline: 20px; }.opening h2 { font-size: 67px; }.opening-foot { inset-inline: 20px; }
}
@media (max-height: 540px) {
  .concept-copy,.concept-art { position: relative; top: auto; }.concept-layout { min-height: auto; }.hero-workflow { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-preference='full']) :is(.opening-scene,.opening-content) { transform: none; }.hero-workflow [data-workflow-node],.workflow-signal,.format-marquee>div { animation: none; }.motion-ready .experience-page [data-reveal]:not(.is-revealed) { transform: none; opacity: 1; }
}

/* Static views use the fully composed stories without extra animation runway. */
html:not([data-motion]) .concept-layout,html[data-motion='reduced'] .concept-layout { min-height: auto; }
html:not([data-motion]) .concept-copy,html:not([data-motion]) .concept-art,html[data-motion='reduced'] .concept-copy,html[data-motion='reduced'] .concept-art { position: relative; top: auto; }