@font-face{font-family:Montserrat;src:url('../premium-scroll-2026/assets/fonts/montserrat.otf')}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:white;color:#151515;font-family:Montserrat,Arial,sans-serif}.showcase{height:100svh;min-height:600px;position:relative;overflow:hidden;isolation:isolate}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.topbar{position:absolute;top:8vh;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;justify-content:center;gap:30px;padding:10px 13px 10px 20px;border-radius:50px;background:#ffffffed;box-shadow:0 2px 5px #00000010,0 0 1px #00000014;white-space:nowrap;font-size:12px}.topbar a{color:inherit;text-decoration:none}.topbar .logo img{width:28px;height:28px;object-fit:contain;display:block}.visit{background:#272b58;color:white!important;border-radius:30px;padding:10px 18px}.device{position:absolute;top:20vh;left:calc(50% - 21.907vh);width:58.703vh;height:80vh;z-index:3;pointer-events:none}.hand{display:block;width:100%;height:100%;object-fit:fill}.screen{position:absolute;left:7.4vh;top:1.5vh;width:26.625vh;height:57.5vh;border-radius:3.9vh;overflow:hidden;background:#f7f7f7;pointer-events:auto;box-shadow:0 0 0 .2px #000;isolation:isolate}.screen iframe{position:absolute;left:0;top:0;width:390px;height:843px;transform-origin:0 0;border:0;background:white}.cards{position:absolute;inset:0;z-index:1;pointer-events:none}.project-card{position:absolute;top:calc(20vh + 56px + var(--row) * 99px);left:calc(50% + var(--offset));width:var(--width);height:79px;padding:12px 16px;display:flex;align-items:center;gap:12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #00000005,0 1px 1px .5px #00000005,0 3px 3px 1.5px #00000005,0 6px 6px -3px #00000005,0 12px 12px -6px #00000005,0 24px 24px -12px #00000005;opacity:var(--opacity);transition:opacity .45s ease,transform .6s ease;overflow:hidden}.project-card img{width:58px;height:49px;object-fit:cover;flex:none;border-radius:7px}.project-card .copy{min-width:0}.project-card strong{font-size:13px;font-weight:600;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.project-card p{font-size:11px;line-height:1.5;margin:5px 0 0;color:#777;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.changing .project-card{opacity:0;transform:translateY(12px)}.selector{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);display:flex;align-items:center;padding:4px;gap:2px;background:#232323;border-radius:40px;z-index:7;white-space:nowrap}.selector button{font:11px Montserrat,Arial,sans-serif;border:0;background:transparent;color:#ddd;cursor:pointer;border-radius:35px;padding:13px 21px;transition:color .25s,background .25s}.selector button[aria-selected=true]{background:#fedb09;color:#151515;font-weight:600}.selector button:hover:not([aria-selected=true]){background:#ffffff15;color:white}.selector button:focus-visible,.topbar a:focus-visible{outline:3px solid #ea8000;outline-offset:3px}.project-info{position:absolute;left:25px;bottom:25px;z-index:5;font-size:9px;display:flex;flex-direction:column;gap:5px;color:#888}.project-info strong{font-size:11px;color:#333}@media(max-width:1100px) and (min-width:701px){.cards{transform:scale(.8);transform-origin:50% 50%}}@media(max-width:700px){.topbar{top:4vh;gap:15px;padding:8px 12px;font-size:9px}.topbar>span{display:none}.topbar .logo img{width:24px;height:24px}.visit{padding:9px 12px}.device{top:18vh;left:calc(50% - 21.907vh)}.cards{transform:scale(.65);transform-origin:50% 45%}.selector{bottom:7vh;width:94%;padding:4px}.selector button{padding:12px 3px;font-size:9px;flex:1}.project-info{bottom:18px;left:0;width:100%;align-items:center}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Brand treatments and fixed Pro Max viewport. */
body{--stage:#272b58;--ink:#fff;--muted:#c4c7e0;--card:#343961;--line:#ffffff1a;--orange:#ea8000;background:var(--stage);color:var(--ink)}body[data-treatment=white]{--stage:#fff;--ink:#272b58;--muted:#6c6f87;--card:#f8f8fb;--line:#272b5814}.showcase{background:var(--stage);transition:background .5s ease;min-height:700px}.topbar{top:3vh;background:var(--stage);color:var(--ink);border:1px solid var(--line);box-shadow:none;font-size:11px;padding:8px 12px;gap:22px}.visit{background:var(--orange);color:#151515!important;font-weight:600}.treatment-picker{position:absolute;top:11.5vh;left:0;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;z-index:8}.treatment-picker>span{font-size:7px;letter-spacing:.13em;color:var(--muted);margin-right:8px}.treatment-picker button{font:9px Montserrat;padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}.treatment-picker button[aria-pressed=true]{border-color:var(--orange);color:var(--ink)}.treatment-picker #replay{border:0;text-decoration:underline;text-underline-offset:3px;font-size:8px}.device{transform:translateY(85vh);opacity:0;transition:transform 1.2s cubic-bezier(.18,.76,.22,1),opacity .65s ease;will-change:transform}.has-entered .device{transform:translateY(0);opacity:1}.screen{left:7.48vh;width:calc(57.5vh * 440 / 956);height:auto;aspect-ratio:440 / 956}.screen iframe{width:440px;height:956px;opacity:1;filter:blur(0);transition:opacity .22s ease,filter .22s ease}.screen.is-switching iframe{opacity:0;filter:blur(4px)}.card-layer{position:absolute;inset:0;pointer-events:none}.project-card{top:calc(30vh + var(--row) * 17vh);width:min(29vw,340px);height:112px;left:auto;transform:translateY(24px) scale(.76);filter:blur(14px);opacity:0;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 35px #0000000d;border-radius:13px;padding:18px;gap:13px;transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .45s ease,filter .6s ease;transition-delay:calc(var(--i) * 28ms + 140ms)}.project-card[data-side=left]{right:calc(50% + 155px);transform-origin:right center}.project-card[data-side=right]{left:calc(50% + 165px);transform-origin:left center}.project-card img{width:58px;height:62px;object-fit:cover;border-radius:7px}.project-card .copy{min-width:0}.deliverable-label{display:block;color:var(--orange);font-size:6px;letter-spacing:.12em;margin-bottom:8px;white-space:nowrap}.project-card strong{font-size:12px;color:var(--ink)}.project-card p{font-size:9px;line-height:1.65;color:var(--muted);white-space:normal;margin-top:6px}.has-entered .is-visible .project-card{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}.card-layer.is-leaving .project-card{opacity:0;filter:blur(14px);transform:translateY(-10px) scale(.72);transition-delay:calc(var(--i) * 18ms)}.selector{background:#202448;border:1px solid #ffffff20;box-shadow:0 10px 30px #0002;padding:5px}.selector button{color:#ececf7;padding:13px 22px}.selector button[aria-selected=true]{background:var(--orange);color:#171a36}.project-info{color:var(--muted);font-size:8px;max-width:260px;line-height:1.4}.project-info strong{color:var(--ink)}.device-note{position:absolute;bottom:18px;right:20px;font-size:7px;color:var(--muted);z-index:5}.cards{transform:none!important}.selector button:focus-visible,.treatment-picker button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
body[data-treatment=artwork] .project-card{height:clamp(116px,15vh,155px);padding:0;gap:0;display:grid;grid-template-columns:43% 57%;overflow:hidden}body[data-treatment=artwork] .project-card img{width:100%;height:100%;border-radius:0;object-fit:cover}body[data-treatment=artwork] .copy{padding:13px}body[data-treatment=artwork] .project-card strong{font-size:11px;white-space:normal}body[data-treatment=artwork] .deliverable-label{font-size:5px;white-space:normal}body[data-treatment=artwork] .project-card p{font-size:8px}
@media(max-height:780px) and (min-width:701px){.project-card{height:96px;padding:13px}.project-card p{font-size:8px}.project-card strong{font-size:11px}.project-card img{width:43px;height:54px}.treatment-picker{top:12vh}.device-note{bottom:12px}.project-info{bottom:15px}}
@media(max-width:1000px) and (min-width:701px){.project-card{width:27vw}.project-card[data-side=left]{right:calc(50% + 122px)}.project-card[data-side=right]{left:calc(50% + 135px)}.project-card img{width:38px}.deliverable-label{font-size:5px}.project-card{padding:12px;gap:8px}.project-card strong{font-size:10px}.project-card p{font-size:8px}}
@media(max-width:700px){.topbar{top:2vh}.treatment-picker{top:9vh;gap:4px;padding:0 8px;flex-wrap:wrap}.treatment-picker>span{display:none}.treatment-picker button{font-size:7px;padding:7px}.device{top:19vh}.project-card{width:200px;opacity:.7!important;top:calc(30vh + var(--row) * 16vh)}.project-card[data-side=left]{right:calc(50% + 90px)}.project-card[data-side=right]{left:calc(50% + 90px)}.project-card p{display:none}.deliverable-label{font-size:5px}.project-card strong{font-size:10px}.selector{bottom:7vh}.selector button{font-size:9px;padding:12px 3px}.project-info{display:none}.device-note{bottom:20px;left:0;right:0;text-align:center}}
@media(prefers-reduced-motion:reduce){.device,.project-card,.screen iframe,.showcase{transition:none!important;animation:none!important}.device{transform:none;opacity:1}.is-visible .project-card{transform:none;filter:none;opacity:1}.card-layer.is-leaving{display:none}}
/* Supplied device frame and mobile browser presentation. */
.supplied-phone{position:absolute;left:6.5vh;top:.1vh;width:28.9vh;height:59.6vh;z-index:5;pointer-events:none}.screen{left:7.7vh;top:1.05vh;width:26.45vh;height:57.65vh;aspect-ratio:auto;border-radius:3.8vh;background:white}.screen iframe{top:6.97vh;height:750px}.browser-top,.browser-bottom{position:absolute;left:0;width:100%;z-index:3;background:#fff;color:#111;font-family:Arial,sans-serif}.browser-top{top:0;height:6.98vh;padding:.65vh .7vh}.status{display:flex;justify-content:space-between;padding:0 1.4vh;font-size:1.12vh;font-weight:700;height:2.7vh}.address{display:flex;align-items:center;justify-content:space-between;border:1px solid #e5e5e5;border-radius:3vh;padding:.6vh .8vh;font-size:1.15vh;background:#fafafa}.address span{font-weight:600}.browser-bottom{bottom:0;height:5.5vh;display:flex;align-items:center;justify-content:space-around;font-size:2vh;padding-bottom:.5vh;border-top:1px solid #f6f6f6}.browser-bottom span{color:#ccc}.browser-bottom:after{content:'';position:absolute;bottom:.35vh;left:34%;width:32%;height:.25vh;background:#222;border-radius:2vh}.message-card{height:126px!important;padding:18px!important;gap:12px!important;border-radius:20px!important;overflow:visible}.message-avatar{width:36px;height:36px;flex:none;border-radius:11px;background:#ea8000;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;align-self:flex-start}.message-card[data-side=left] .message-avatar{background:#626890}.message-card strong{font-size:12px!important;margin:4px 0!important}.message-card p{font-size:11px!important;line-height:1.5!important}.message-card .deliverable-label{font-size:6px!important;letter-spacing:.7px}.message-card[data-side=right]{background:color-mix(in srgb,var(--card) 85%,#ea8000 15%)}body[data-treatment=artwork] .message-card{display:flex;width:min(29vw,340px);height:126px;background:#ffffff19;backdrop-filter:blur(16px);border:1px solid #ffffff35;box-shadow:0 18px 40px #11132a33}body[data-treatment=artwork] .message-card .copy{padding:0}body[data-treatment=artwork] .showcase{background:radial-gradient(ellipse at 20% 45%,#4c507e,transparent 55%),radial-gradient(ellipse at 85% 70%,#805144,transparent 45%),#272b58}@media(max-height:780px){.message-card{height:104px!important;padding:12px!important}.message-card p{font-size:9px!important}.message-avatar{width:28px;height:28px;font-size:9px}}@media(max-width:700px){.message-card{width:43vw!important}.message-card p{font-size:9px!important}.message-avatar{display:none}}
/* Screenshot-matched browser controls, clear of the supplied Dynamic Island. */
.browser-top{height:8.3vh;padding:0}.status{position:absolute;top:.8vh;left:0;width:100%;height:2.3vh;padding:0 1.6vh;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Arial,sans-serif;font-size:1.35vh;font-weight:600;letter-spacing:-.04em}.status-icons{display:flex;align-items:center;gap:.42vh;height:1.2vh}.status-icons .signal{width:1.48vh;height:1.12vh}.status-icons .wifi{width:1.5vh;height:1.18vh}.status-icons .battery{width:2.25vh;height:1.23vh}.address{position:absolute;top:4.15vh;left:.8vh;width:calc(100% - 1.6vh);height:2.95vh;padding:0 .9vh;border-color:#d5d5d5;background:linear-gradient(#fff,#fafafa);font-family:-apple-system,BlinkMacSystemFont,Arial,sans-serif;font-size:1.3vh;box-shadow:0 .3vh 1vh #00000004}.address>svg,.address button svg{width:1.5vh;height:1.5vh;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.address span{font-weight:600}.address button{padding:0;border:0;background:none;color:#111;display:grid;place-items:center;cursor:pointer}.browser-bottom{height:5.5vh;padding:0 0 .6vh;justify-content:center}.history-controls{display:flex;align-items:center;justify-content:center;gap:2.6vh;height:3.5vh;min-width:12vh;border:1px solid #e1e1e1;border-radius:4vh;background:linear-gradient(#fff,#fafafa);box-shadow:0 .25vh 1vh #00000003}.history-controls button{display:grid;place-items:center;width:3vh;height:3vh;padding:.65vh;border:0;background:none;cursor:pointer;color:#080808}.history-controls button svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.history-controls button:focus-visible,.address button:focus-visible{outline:2px solid #ea8000;outline-offset:2px}
/* Selected direction: the real work behind the screen. */
@font-face{font-family:CherylDisplay;src:url('site-previews/cheryl/assets/display.ttf')}
body[data-treatment=white]{--stage:#fff;--ink:#272b58}.showcase{min-height:700px}.topbar{top:3vh;left:4vw;transform:none;background:transparent;border:0;padding:0;gap:18px}.topbar>span{font-weight:600}.topbar .visit{background:#ea8000}.topbar .logo img{width:34px;height:34px}.build-heading{position:absolute;top:11vh;left:4vw;width:27vw;color:#272b58;z-index:4}.build-heading>span{font-size:8px;letter-spacing:2.5px;color:#777c95}.build-heading h1{font-size:clamp(22px,2.65vw,42px);font-weight:600;line-height:1.08;letter-spacing:-1.2px;margin:12px 0}.build-heading h1 span{color:#ea8000}.build-heading p{font-size:10px;line-height:1.7;max-width:230px;color:#777c95}.replay-build{position:absolute;right:4vw;top:4vh;background:none;border:0;color:#777c95;font:10px Montserrat;cursor:pointer;z-index:7}.device{top:16vh}.selector{background:#fff;border:1px solid #e2e3e9;box-shadow:0 10px 30px #272b580a;bottom:4vh;padding:5px;gap:8px}.selector button{color:#272b58;min-width:120px}.selector button[aria-selected=true]{background:#ea8000;color:#fff}.selector button:hover:not([aria-selected=true]){background:#f3f3f7;color:#272b58}.project-info{bottom:4vh}.device-note{color:#85899e;font-size:7px;letter-spacing:1.5px;bottom:2vh}.build-piece{position:absolute;margin:0;width:25vw;max-width:370px;opacity:0;filter:blur(14px);transform:translateY(24px) scale(.76) rotate(var(--tilt));transition:opacity .6s ease,filter .7s ease,transform .85s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i)*65ms);pointer-events:none}.piece-0{left:9vw;top:32vh;--tilt:-7deg;z-index:2}.piece-1{right:7vw;top:22vh;--tilt:5deg;z-index:2}.piece-2{left:4.5vw;top:61vh;--tilt:7deg;z-index:1}.piece-3{right:4vw;top:56vh;--tilt:-5deg;z-index:1}.piece-surface{height:25vh;min-height:155px;max-height:290px;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 16px 44px #30233824;border:1px solid #272b5809}.piece-surface img{width:100%;height:100%;object-fit:cover;display:block}.piece-surface.page iframe{width:600px;border:0;transform-origin:0 0;pointer-events:none}.piece-surface.identity{background:#fff4fa;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;color:#191519}.piece-surface.identity img{width:55px;height:55px;object-fit:contain;margin-bottom:10px}.identity strong{font:clamp(22px,2.5vw,36px) CherylDisplay,sans-serif;line-height:1}.identity>span{font:8px Montserrat;letter-spacing:1px;margin-top:7px}.identity p{font:clamp(12px,1.2vw,19px) CherylDisplay,sans-serif;color:#bc719d;margin-top:18px}.build-piece figcaption{font-size:12px;font-weight:600;color:#272b58;margin:15px 10px;display:flex;gap:10px;align-items:center}.build-piece figcaption:before{content:'';width:23px;height:2px;background:#ea8000}.has-entered .is-visible .build-piece{opacity:1;filter:blur(0);transform:translateY(0) scale(1) rotate(var(--tilt))}.card-layer.is-leaving .build-piece{opacity:0;filter:blur(16px);transform:translateY(-15px) scale(.72) rotate(var(--tilt));transition-delay:calc(var(--i)*25ms)}@media(max-width:900px){.build-heading{width:29vw}.build-heading p{display:none}.build-piece{width:26vw}.piece-0{left:4vw}.piece-1{right:3vw}.piece-2{left:2vw}.piece-3{right:1vw}.selector button{min-width:0}.identity p{font-size:11px}.piece-surface.identity{padding:10px}}@media(max-width:700px){.topbar{left:4vw;top:2vh}.topbar>a:not(.logo):not(.visit){display:none}.build-heading{top:10vh;width:70vw}.build-heading h1{font-size:24px}.replay-build{top:4vh;font-size:8px}.device{top:24vh}.build-piece{width:38vw}.piece-0{left:-15vw;top:38vh}.piece-1{right:-15vw;top:33vh}.piece-2{left:-18vw;top:68vh}.piece-3{right:-18vw;top:64vh}.piece-surface{height:20vh;min-height:120px}.build-piece figcaption{font-size:9px}.selector{bottom:3vh}.device-note{display:none}}@media(prefers-reduced-motion:reduce){.build-piece{transition:none!important}.has-entered .is-visible .build-piece{filter:none;opacity:1;transform:rotate(var(--tilt))}}

.status-icons .wifi{display:block;width:1.65vh;height:1.35vh;object-fit:contain;filter:none;opacity:1}
/* Scrollable chapters with a pinned hand, matching the reference structure. */
html{height:auto;scroll-behavior:smooth}body{height:auto}.scroll-story{height:400vh;position:relative}.showcase{position:sticky;top:0;height:100vh;min-height:0}.cards{translate:0 calc(var(--scroll-drift,0px) * -1)}.piece-0{left:8vw;top:31vh}.piece-1{right:6vw;top:22vh}.piece-2{left:4vw;top:61vh}.piece-3{right:3vw;top:57vh}.piece-surface{background:#fff}.piece-0 .piece-surface img[src*="branding"]{padding:28px;background:#fff4fa}.scroll-cue{position:absolute;right:4vw;bottom:5vh;font-size:8px;letter-spacing:1.5px;color:#747991;z-index:8}.scroll-cue span{display:block;text-align:right;color:#ea8000;margin-top:8px;font-size:12px;font-weight:600}.device-note{display:none}.build-piece{--tilt:0deg}.piece-0,.piece-2{transform-origin:right center}.piece-1,.piece-3{transform-origin:left center}.piece-surface{border-radius:16px;box-shadow:0 1px 2px #00000008,0 8px 20px #272b580d,0 24px 48px #272b5812}.piece-2,.piece-3{opacity:.65}.has-entered .is-visible .piece-2,.has-entered .is-visible .piece-3{opacity:.8}@media(max-width:700px){.scroll-cue{display:none}.piece-0{left:-15vw;top:38vh}.piece-1{right:-15vw;top:33vh}.piece-2{left:-18vw;top:68vh}.piece-3{right:-18vw;top:64vh}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cards{translate:none}}
/* Reference notification composition: five staggered rows around the hand. */
.reference-notification{position:absolute;top:calc(23vh + var(--row)*12.8vh);width:clamp(245px,28vw,390px);height:79px;padding:12px 16px;display:flex;align-items:center;gap:12px;border-radius:16px;background:white;box-shadow:0 0 0 1px #00000005,0 1px 1px .5px #00000005,0 3px 3px 1.5px #00000005,0 6px 6px -3px #00000005,0 12px 12px -6px #00000005,0 24px 24px -12px #00000005;opacity:0;filter:blur(14px);transform:translateY(20px) scale(.75);transition:opacity .6s,filter .7s,transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i)*25ms);font-family:-apple-system,BlinkMacSystemFont,Arial,sans-serif}.reference-notification[data-side=left]{right:calc(50% + 12vh);transform-origin:right center}.reference-notification[data-side=right]{left:calc(50% + 14vh);transform-origin:left center}.reference-notification:nth-child(4n+1){margin-right:4vw}.reference-notification:nth-child(4n){margin-left:4vw}.reference-notification img{width:48px;height:48px;object-fit:cover;border-radius:8px;flex:none}.reference-notification div{min-width:0}.reference-notification strong{font-size:14px;font-weight:600;line-height:1.5;color:#191919;display:block}.reference-notification p{font-size:12px;line-height:1.5;margin:2px 0 0;color:#0008}.has-entered .is-visible .reference-notification{opacity:1;filter:none;transform:translateY(0) scale(1)}.has-entered .is-visible .reference-notification:nth-child(4n+1),.has-entered .is-visible .reference-notification:nth-child(4n){opacity:.35}.card-layer.is-leaving .reference-notification{opacity:0;filter:blur(15px);transform:translateY(-15px) scale(.72)}.build-heading{top:10vh}.build-heading h1{font-size:clamp(20px,2vw,30px);margin:8px 0}.build-heading p{display:none}.build-heading>span{font-size:7px}.device{top:18vh}@media(max-height:760px){.reference-notification{height:65px;padding:10px 12px}.reference-notification img{width:38px;height:38px}.reference-notification strong{font-size:12px}.reference-notification p{font-size:10px}}@media(max-width:700px){.reference-notification{width:230px}.reference-notification[data-side=left]{right:calc(50% + 9vh)}.reference-notification[data-side=right]{left:calc(50% + 10vh)}.build-heading{top:11vh}}@media(prefers-reduced-motion:reduce){.reference-notification{transition:none!important}}
/* Preserve thumbnail subjects and use the real brand display font on mobile. */
@font-face{font-family:Bryson;src:url('../premium-scroll-2026/assets/fonts/bryson.otf') format('opentype');font-display:swap}
.reference-notification img{object-fit:contain;object-position:center;background:#f7f5f6}.reference-notification strong,.reference-notification p{overflow-wrap:anywhere}.reference-notification{height:auto;min-height:79px}.reference-notification[data-side=left]{right:calc(50% + 12vh)}.reference-notification:nth-child(4n+1){margin-right:2vw}.reference-notification:nth-child(4n){margin-left:2vw}
@media(max-width:760px){
 .cards{display:none!important}
 .build-heading{top:11svh;left:7%;width:86%;text-align:center}
 .build-heading>span{display:none}
 .build-heading h1{font-family:Bryson,Arial,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(25px,7.4vw,38px);line-height:1.08;letter-spacing:0;margin:0}
 .build-heading h1 br{display:none}
 .build-heading p{display:none}
 .device{top:26svh;left:50%;transform-origin:top center;transform:translate(-50%,65vh) scale(var(--mobile-device-scale,.7));opacity:0}
 .has-entered .device{transform:translate(-50%,0) scale(var(--mobile-device-scale,.7));opacity:1}
 .topbar{top:2.5svh;left:5%;gap:10px}.topbar>span,.topbar>a:not(.logo):not(.visit){display:none}.topbar .logo img{width:26px;height:26px}.topbar .visit{padding:8px 12px;font-size:9px}
 .replay-build{right:5%;top:3.5svh;font-size:8px}
 .selector{bottom:max(2svh,env(safe-area-inset-bottom));width:94%;gap:0;padding:4px;left:50%}
 .selector button{min-width:0;flex:1;font-size:9px;padding:12px 3px}
 .project-info,.scroll-cue,.device-note{display:none}
 .showcase{height:100svh}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.device{transform:translate(-50%,0) scale(var(--mobile-device-scale,.7));opacity:1}}
/* Three chapters: website, social work, then a full-size brochure. */
.scroll-story{height:500vh}.device{transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .65s}.show-brochure.has-entered .device{transform:translateY(105vh);opacity:0;pointer-events:none}.show-brochure .cards{opacity:0;transition:opacity .5s;pointer-events:none}.brochure-stage{position:absolute;inset:16vh 17vw 13vh;z-index:4;opacity:0;transform:translateY(12vh) scale(.82);pointer-events:none;transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .7s .15s}.brochure-stage iframe{width:100%;height:100%;border:0;border-radius:12px;background:#1c1714;box-shadow:0 20px 60px #272b5820}.show-brochure .brochure-stage{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.show-brochure .build-heading{top:9vh;left:17vw;width:66vw;text-align:center;z-index:5}.show-brochure .build-heading>span{display:none}.build-heading h1{font-family:Bryson,Arial,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0}.show-brochure .build-heading h1{font-size:clamp(22px,3vw,40px)}@media(max-width:760px){.brochure-stage{inset:23svh 3vw 12svh}.show-brochure .build-heading{left:6%;width:88%;top:12svh}.show-brochure.has-entered .device{transform:translate(-50%,105vh) scale(var(--mobile-device-scale,.7));opacity:0}.show-brochure .build-heading h1{font-size:30px}}@media(prefers-reduced-motion:reduce){.brochure-stage{transition:none}}
/* The social chapter uses an app presentation, without browser chrome. */
.instagram-mode .browser-top{height:4.2vh}.instagram-mode .address{display:none}.instagram-mode .browser-bottom{height:1.8vh}.instagram-mode .history-controls{display:none}
/* Selected soft-glass direction. */
body[data-treatment=glass]{--stage:#272b58;--ink:#fff;--muted:#c4c7e0}.showcase{background:#272b58}.build-heading,.build-heading h1,.topbar,.topbar a{color:#fff}.build-heading>span,.replay-build,.project-info,.project-info strong,.scroll-cue{color:#c9cbe0}.reference-notification{background:rgba(255,255,255,.13);border:1px solid #ffffff38;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 1px 0 #ffffff30,0 12px 32px #0d102638}.reference-notification strong{color:white}.reference-notification p{color:#f1f1fa}.reference-notification small{display:block;color:#d2d5e9;font:8px Montserrat;letter-spacing:1.3px;margin-bottom:5px}.reference-notification.sample-notification{top:calc(28vh + var(--row)*20vh);height:105px}.reference-notification .app-icon{object-fit:contain;padding:10px;background:#fff;border-radius:12px;width:48px;height:48px}.app-whatsapp{background:#25d366!important}.app-facebook{background:#1877f2!important}.app-instagram{background:#ee9cd1!important}.app-message-circle{background:#65df81!important}.has-entered .is-visible .sample-notification:nth-child(4n+1),.has-entered .is-visible .sample-notification:nth-child(4n){opacity:1}.has-entered .is-visible .sample-notification:nth-child(n+5){opacity:.55}#sample-note{position:absolute;left:25px;bottom:10vh;font:9px Montserrat;color:#c8cbe2;z-index:8}.selector{background:#ffffff12;border-color:#ffffff30;backdrop-filter:blur(20px)}.selector button{color:#eee}.selector button:hover:not([aria-selected=true]){color:#fff;background:#ffffff20}.device{transition:transform 1.25s cubic-bezier(.45,0,.2,1),opacity .8s}.show-brochure.has-entered .device{transform:translate(8vw,110vh) rotate(8deg);opacity:0}.brochure-stage{inset:17vh 5vw 13vh;transition:transform 1.2s cubic-bezier(.22,1,.36,1) .3s,opacity .8s .3s}.brochure-stage iframe{background:transparent;box-shadow:none}.show-brochure .build-heading{left:5vw;width:90vw}@media(max-width:760px){#sample-note{display:none}.show-brochure.has-entered .device{transform:translate(-35%,110vh) rotate(8deg) scale(var(--mobile-device-scale,.7))}.brochure-stage{inset:23svh 2vw 12svh}}
/* White glass composition with unmodified App Store icon artwork. */
body[data-treatment=white]{--stage:#fff;--ink:#272b58;--muted:#73788d}.showcase{background:#fff}.build-heading,.build-heading h1,.topbar,.topbar a{color:#272b58}.build-heading>span,.replay-build,.project-info,.scroll-cue{color:#74798b}.project-info strong{color:#272b58}.reference-notification{background:rgba(245,246,249,.78);border:1px solid #ffffff;backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);box-shadow:inset 0 1px 1px #fff,0 3px 8px #272b5805,0 12px 32px #272b5810;border-radius:20px}.reference-notification strong{color:#17191f;font-weight:600}.reference-notification p{color:#30343f;font-weight:400}.reference-notification small{color:#777c8a}.reference-notification img.app-icon{padding:0!important;background:transparent!important;border-radius:11px;object-fit:contain;filter:none;width:48px;height:48px}.selector{background:#ffffffb8;border:1px solid #e5e6ed;box-shadow:0 8px 25px #272b5808}.selector button{color:#272b58}.selector button:hover:not([aria-selected=true]){color:#272b58;background:#f0f1f5}.selector button[aria-selected=true]{color:white}#sample-note{color:#777c8a}.has-entered .is-visible .sample-notification:nth-child(n+5){opacity:.72}.brochure-stage iframe{background:#272b58;border-radius:16px}
/* Focused composition: centre the handset, not the hand asset. */
.topbar,.build-heading,.replay-build,.project-info,.device-note,.scroll-cue,#sample-note{display:none!important}
.showcase{height:100svh;min-height:0;overflow:hidden}
.device{top:3vh;left:calc(50% - 27.235vh);transform-origin:top left;transform:translateY(100vh) scale(1.3);width:58.703vh;height:80vh}
.has-entered .device{transform:translateY(0) scale(1.3)}
.show-brochure.has-entered .device{transform:translate(8vw,110vh) rotate(8deg) scale(1.3);opacity:0}
.reference-notification.sample-notification{top:calc(16vh + var(--row)*26vh);width:clamp(260px,31vw,440px);height:104px;min-height:0;box-shadow:inset 0 1px 1px #fff,0 14px 38px #272b5810,0 4px 12px #272b5804;background:#f5f6f9c9}
.reference-notification[data-side=left]{right:calc(50% + 16vh)}
.reference-notification[data-side=right]{left:calc(50% + 16vh)}
.reference-notification:nth-child(4n+1){margin-right:1.5vw}.reference-notification:nth-child(4n){margin-left:1.5vw}
.is-visible .reference-notification{animation:none}
.selector{bottom:2vh;z-index:9;background:#ffffffb8;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.brochure-stage{inset:3vh 4vw 12vh}
@media(max-width:760px){
 .device{top:5svh;left:calc(50% - 20.95vh * var(--mobile-device-scale));transform-origin:top left;transform:translateY(100vh) scale(var(--mobile-device-scale))}
 .has-entered .device{transform:translateY(0) scale(var(--mobile-device-scale))}
 .show-brochure.has-entered .device{transform:translate(8vw,110vh) rotate(8deg) scale(var(--mobile-device-scale));opacity:0}
 .hand{height:calc(100% + 25vh);object-fit:fill}
 .selector{bottom:max(2svh,env(safe-area-inset-bottom))}
 .brochure-stage{inset:3svh 2vw 12svh}
}
@media(prefers-reduced-motion:reduce){.is-visible .reference-notification{animation:none}.device{transition:none}}
@media(max-width:760px){.device{top:calc(100svh - 80vh * var(--mobile-device-scale))}.hand{height:100%;object-fit:fill}}
/* Company-blue glass scene; reserve clear space for all message content. */
body[data-treatment=blue]{--stage:#272b58;--ink:#fff;background:#272b58}.showcase{background:#272b58}.reference-notification{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);box-shadow:inset 0 1px 0 #ffffff38,0 16px 40px #11152d30}.reference-notification strong{color:#fff}.reference-notification p{color:#f1f2fa}.reference-notification small{color:#c7cbe0;letter-spacing:.6px;font-size:9px}.reference-notification.sample-notification{width:clamp(230px,25vw,400px);height:auto;min-height:104px;padding:16px;gap:12px}.reference-notification[data-side=left]{right:calc(50% + 21vh);margin-right:0}.reference-notification[data-side=right]{left:calc(50% + 28vh);margin-left:0}.reference-notification:nth-child(4){left:calc(50% + 31vh)}.reference-notification:nth-child(6){left:calc(50% + 34vh);top:65vh}.reference-notification p{white-space:normal;overflow-wrap:normal;line-height:1.45}.has-entered .is-visible .sample-notification:nth-child(n+5){opacity:.92}.selector{background:#ffffff26;border:1px solid #ffffff40;box-shadow:0 8px 30px #0001}.selector button{color:#fff}.selector button:hover:not([aria-selected=true]){color:#fff;background:#ffffff18}#sample-note:not([hidden]){display:block!important;position:absolute;left:22px;bottom:14px;margin:0;max-width:250px;font:8px/1.5 Montserrat;color:#b5bbd4}
@media(min-width:761px) and (max-aspect-ratio:3/2){.reference-notification.sample-notification{width:23vw;padding:12px;gap:8px;min-height:100px}.reference-notification[data-side=left]{right:calc(50% + 18vh)}.reference-notification[data-side=right]{left:auto;right:2vw}.reference-notification:nth-child(4){top:39vh}.reference-notification:nth-child(6){top:58vh}.reference-notification .app-icon{width:34px!important;height:34px!important}.reference-notification strong{font-size:12px}.reference-notification p{font-size:11px}}
@media(max-width:760px){#sample-note:not([hidden]){display:none!important}}
/* Approved Clear material from liquid-glass-study.html. Keep this after
   earlier card treatments so the pale sample-card fill cannot override it. */
.showcase .reference-notification,
.showcase .reference-notification.sample-notification{
 background:rgba(38,43,72,.17);
 border:1px solid rgba(255,255,255,.145);
 backdrop-filter:blur(7px) saturate(150%);
 -webkit-backdrop-filter:blur(7px) saturate(150%);
 box-shadow:0 15px 40px #0002,inset 0 1px 0 #ffffff70,inset 0 -1px 0 #ffffff28;
 border-radius:30px;isolation:isolate;overflow:hidden;
}
.showcase .reference-notification::before{
 content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(ellipse at var(--glass-light-x,20%) var(--glass-light-y,0%),#ffffff30,transparent 65%);
 z-index:-1;
}
.showcase .reference-notification strong{color:#fff}
.showcase .reference-notification p{color:#fff;text-shadow:0 1px 2px #0003}
.showcase .reference-notification small{color:#e1e3ec}
@media(prefers-reduced-transparency:reduce){
 .showcase .reference-notification,.showcase .reference-notification.sample-notification{background:#34395f;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Website stage: eight larger messages, spaced around the fixed handset. */
.showcase .reference-notification.sample-notification{
 width:clamp(280px,27vw,410px);height:auto;min-height:100px;padding:18px;gap:16px;
 border-radius:26px;align-items:center
}
.showcase .reference-notification.sample-notification .app-icon{width:48px;height:48px;flex:0 0 48px}
.showcase .reference-notification.sample-notification .app-icon{
 border-radius:0!important;clip-path:none;overflow:hidden;
 -webkit-mask-image:url('assets/social-icons/app-icon-mask.svg');mask-image:url('assets/social-icons/app-icon-mask.svg');
 -webkit-mask-size:100% 100%;mask-size:100% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat
}
.showcase .reference-notification.sample-notification small{font-size:9px;letter-spacing:.55px;margin:0 0 6px;white-space:nowrap}
.showcase .reference-notification.sample-notification strong{font-size:15px;line-height:1.2}
.showcase .reference-notification.sample-notification p{font-size:13px;line-height:1.4;margin:4px 0 0}
.showcase .reference-notification.sample-notification[data-side=left]{right:calc(50% + 19vh);left:auto;margin:0}
.showcase .reference-notification.sample-notification[data-side=right]{left:calc(50% + 19vh);right:auto;margin:0}
.showcase .reference-notification.sample-notification:nth-child(1){top:13vh;right:calc(50% + 24vh)}
.showcase .reference-notification.sample-notification:nth-child(2){top:3vh;left:calc(50% + 22vh)}
.showcase .reference-notification.sample-notification:nth-child(3){top:36vh;right:calc(50% + 19vh)}
.showcase .reference-notification.sample-notification:nth-child(4){top:26vh;left:calc(50% + 25vh)}
.showcase .reference-notification.sample-notification:nth-child(5){top:59vh;right:calc(50% + 26vh)}
.showcase .reference-notification.sample-notification:nth-child(6){top:49vh;left:calc(50% + 19vh)}
.showcase .reference-notification.sample-notification:nth-child(7){top:77vh;right:calc(50% + 19vh)}
.showcase .reference-notification.sample-notification:nth-child(8){top:72vh;left:calc(50% + 24vh)}
@media(min-width:761px) and (max-width:1150px){
 .showcase .reference-notification.sample-notification{width:clamp(230px,25vw,300px);min-height:104px;padding:16px;gap:12px}
 .showcase .reference-notification.sample-notification .app-icon{width:42px;height:42px;flex-basis:42px}
 .showcase .reference-notification.sample-notification strong{font-size:13px}
 .showcase .reference-notification.sample-notification p{font-size:11px}
 .showcase .reference-notification.sample-notification:nth-child(1),.showcase .reference-notification.sample-notification:nth-child(5),.showcase .reference-notification.sample-notification:nth-child(7){right:calc(50% + 20vh)}
 .showcase .reference-notification.sample-notification:nth-child(2),.showcase .reference-notification.sample-notification:nth-child(4),.showcase .reference-notification.sample-notification:nth-child(6),.showcase .reference-notification.sample-notification:nth-child(8){left:calc(50% + 20vh)}
}
@media(min-width:1151px){
 .showcase .reference-notification.sample-notification:nth-child(2){left:calc(50% + 27vh)}
 .showcase .reference-notification.sample-notification:nth-child(4){left:calc(50% + 29vh)}
 .showcase .reference-notification.sample-notification:nth-child(6){left:calc(50% + 28vh)}
 .showcase .reference-notification.sample-notification:nth-child(8){left:calc(50% + 27vh)}
}
.showcase .card-layer .reference-notification{pointer-events:auto;transition:opacity .6s,filter .7s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.showcase .card-layer.is-visible .reference-notification:hover{
 transform:translateY(-6px) scale(1.025);filter:brightness(1.08);z-index:6;
 box-shadow:0 18px 42px #0003,inset 0 1px 0 #ffffff80,inset 0 -1px 0 #ffffff35
}
@media(prefers-reduced-motion:reduce){.showcase .card-layer.is-visible .reference-notification:hover{transform:none}}
/* Match the reference notification icon scale; keep the supplied SVG mask. */
.showcase .reference-notification.sample-notification .app-icon{
 width:68px!important;height:68px!important;flex:0 0 68px!important;
 object-fit:cover;padding:0!important;background:transparent!important;
 -webkit-mask-image:url('assets/social-icons/app-icon-mask.svg');mask-image:url('assets/social-icons/app-icon-mask.svg');
 -webkit-mask-size:100% 100%;mask-size:100% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 /* Bevel/highlight is already part of the supplied square icon artwork. */
 filter:none
}

/* A quiet sense of depth: notifications drift a few pixels and gently scale
   toward and away from the viewer, with alternating front/back planes. */
.showcase .card-layer{perspective:1400px;transform-style:preserve-3d}
.showcase .card-layer.is-visible .sample-notification{animation:notification-float-front 8s ease-in-out infinite;will-change:translate,scale,filter}
.showcase .card-layer.is-visible .sample-notification:nth-child(2),
.showcase .card-layer.is-visible .sample-notification:nth-child(5),
.showcase .card-layer.is-visible .sample-notification:nth-child(6),
.showcase .card-layer.is-visible .sample-notification:nth-child(7){animation-name:notification-float-back;z-index:1}
.showcase .card-layer.is-visible .sample-notification:nth-child(1){animation-duration:7.7s;animation-delay:-1.3s}
.showcase .card-layer.is-visible .sample-notification:nth-child(2){animation-duration:9.1s;animation-delay:-5.6s}
.showcase .card-layer.is-visible .sample-notification:nth-child(3){animation-duration:8.8s;animation-delay:-3.4s}
.showcase .card-layer.is-visible .sample-notification:nth-child(4){animation-duration:7.3s;animation-delay:-4.9s}
.showcase .card-layer.is-visible .sample-notification:nth-child(5){animation-duration:10.2s;animation-delay:-7.1s}
.showcase .card-layer.is-visible .sample-notification:nth-child(6){animation-duration:8.1s;animation-delay:-2.6s}
.showcase .card-layer.is-visible .sample-notification:nth-child(7){animation-duration:9.6s;animation-delay:-6.3s}
.showcase .card-layer.is-visible .sample-notification:nth-child(8){animation-duration:7.9s;animation-delay:-.8s}
.showcase .card-layer.is-visible .sample-notification:hover{animation-play-state:paused}
@keyframes notification-float-front{
 0%,100%{translate:0 1px 0;scale:.995}
 50%{translate:0 -3px 12px;scale:1.008}
}
@keyframes notification-float-back{
 0%,100%{translate:0 -1px -5px;scale:.992;filter:blur(.65px)}
 50%{translate:0 3px 3px;scale:1;filter:blur(.25px)}
}
@media(prefers-reduced-motion:reduce){.showcase .card-layer.is-visible .sample-notification{animation:none;will-change:auto;filter:none}}
@media(min-width:761px) and (max-aspect-ratio:3/2){
 .showcase .reference-notification.sample-notification .app-icon{width:68px!important;height:68px!important;flex-basis:68px!important}
}

/* One deliberate snap point for each showcase beat, including the brochure's
   cover and two spreads. The pinned stage animates while the scroll markers
   provide firm, repeatable stops on wheel, trackpad, keyboard and touch. */
html{scroll-snap-type:y mandatory;scroll-padding-block:0}
body{overflow-x:hidden}
.scroll-story{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,100svh);height:auto;min-height:500svh}
.scroll-story>.showcase{grid-column:1;grid-row:1/6;align-self:start;position:sticky;top:0;z-index:2;scroll-snap-align:start;scroll-snap-stop:always}
.scroll-stop{grid-column:1;width:100%;height:100svh;min-height:100svh;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
.scroll-stop:nth-of-type(1){grid-row:2}
.scroll-stop:nth-of-type(2){grid-row:3}
.scroll-stop:nth-of-type(3){grid-row:4}
.scroll-stop:nth-of-type(4){grid-row:5}

/* Compact, legible category controls with a clear, Apple-inspired glass face. */
.selector{
 gap:3px;padding:5px;border-radius:999px;isolation:isolate;overflow:hidden;
 background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.11))!important;
 border:1px solid rgba(255,255,255,.48)!important;
 backdrop-filter:blur(28px) saturate(175%);-webkit-backdrop-filter:blur(28px) saturate(175%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.66),inset 0 -1px 0 rgba(255,255,255,.18),0 12px 34px rgba(7,11,39,.28)!important
}
.selector::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 16% 0%,rgba(255,255,255,.2),transparent 58%)}
.selector button{font-family:Montserrat,Arial,sans-serif;font-size:11px;letter-spacing:.01em;padding:12px 23px;color:#fff}
.selector button[aria-selected=true]{background:#ea8000!important;color:#24264d!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.58),0 3px 9px rgba(10,14,38,.28)}
.selector button:hover:not([aria-selected=true]){background:rgba(255,255,255,.15)!important;color:#fff!important}
.selector button:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.scroll-cue{font-family:Montserrat,Arial,sans-serif}

/* Magazine framing: preserve Lee's original artwork and real page-turn
   animation while giving the paper a subtle edge, spine and physical depth. */
.brochure-stage{inset:15vh 9vw 11vh;}
.brochure-stage iframe{border-radius:0;background:transparent;box-shadow:none}
@media(max-width:760px){.brochure-stage{inset:20svh 1vw 12svh}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:y proximity}}

/* Use only the approved navy, orange and warm neutral from the brand kit. */
.showcase,body[data-treatment=blue],body[data-treatment=glass]{background:#272b58!important}
.build-heading,.build-heading h1,.topbar,.topbar a{color:#f3e5d5}
.build-heading>span,.replay-build,.project-info,.project-info strong,.scroll-cue{color:#f3e5d5cc}
.build-heading h1 span{color:#ea8000}
.show-brochure .build-heading{top:7vh}
.brochure-stage{inset:16vh 9vw 16vh}
.brochure-stage iframe{background:transparent;box-shadow:none;border-radius:0}

/* The orange selection travels between tabs; the tray stays clear and calm. */
.selector{
 width:min(460px,calc(100vw - 28px));height:54px;padding:5px;gap:0;display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));position:absolute;overflow:hidden;
 background:rgba(39,43,88,.58)!important;border:1px solid rgba(243,229,213,.18)!important;
 backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%);
 box-shadow:0 7px 18px rgba(39,43,88,.2)!important
}
.selector::before{display:none!important}
.selector-indicator{position:absolute;z-index:0;left:5px;top:5px;bottom:5px;width:calc((100% - 10px)/3);border-radius:999px;background:#ea8000;transition:transform .58s cubic-bezier(.22,.75,.25,1);will-change:transform}
.selector[data-active="0"] .selector-indicator{transform:translateX(0)}
.selector[data-active="1"] .selector-indicator{transform:translateX(100%)}
.selector[data-active="2"] .selector-indicator{transform:translateX(200%)}
.selector button{position:relative;z-index:1;width:100%;min-width:0;height:100%;padding:0 8px;background:transparent!important;border-radius:999px;color:#f3e5d5!important;font:12px Montserrat,Arial,sans-serif;transition:color .25s ease}
.selector button[aria-selected="true"]{color:#272b58!important;font-weight:600;box-shadow:none!important}
.selector button:hover:not([aria-selected="true"]){background:transparent!important;color:#fff!important}
.selector button:focus-visible{outline:2px solid #f3e5d5;outline-offset:-3px}
@media(max-width:760px){.selector{width:94%;height:50px}.selector button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.selector-indicator{transition:none}}