@font-face{font-family:Dorothea Sans;src:url(assets/sans.woff2) format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:Afacad;src:url(assets/afacad.woff2) format('woff2');font-display:swap}
:root{--canvas:#f7f3ee;--ink:#181b26;--muted:#65616c;--field:#e5e0f1;--accent:#b9b1e6;--accent-ink:#29223f;--surface:#fff;--line:rgba(24,27,38,.17);--wash:#f0ecf7;--hero-floor:#e5deeb;--duration:700ms;scroll-behavior:smooth;scroll-padding-top:90px}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-family:Dorothea Sans,Arial,sans-serif;transition:background var(--duration),color var(--duration)}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button{background:none;border:0}button:focus-visible,a:focus-visible,.wheel:focus-visible{outline:2px solid var(--ink);outline-offset:6px}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2{font-weight:450;letter-spacing:-.065em;line-height:1.01}em{font-style:normal;color:var(--ink)}.eyebrow{font-size:11px;font-weight:550;letter-spacing:.12em;line-height:1.5}.nav{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5vw;position:relative;z-index:5}.wordmark{font:34px Afacad,sans-serif;letter-spacing:.18em;line-height:1}.nav nav{display:flex;align-items:center;gap:34px;font-size:13px}.nav-contact{border-bottom:1px solid var(--ink);padding:10px 0}.nav-contact span{padding-left:22px}.nav a:not(.wordmark):hover{opacity:.6}.hero{position:relative;min-height:calc(100svh - 100px);padding:40px 4.5vw 0;display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:2vw}.hero-copy{z-index:2;padding-bottom:48px}.hero-copy .eyebrow{margin-bottom:34px;display:flex;align-items:center;gap:13px}.little-star{font-size:30px;line-height:1;animation:starspin 28s linear infinite;color:var(--ink)}h1{font-size:clamp(72px,7.6vw,142px)}h1 em{position:relative}h1 em:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:10px;background:var(--accent);z-index:-1;transition:background .7s}.standfirst{font-size:17px;line-height:1.55;margin:28px 0 28px;color:var(--muted)}.liquid{display:inline-flex;align-items:center;justify-content:space-between;position:relative;min-width:240px;height:64px;padding:0 26px;color:var(--accent-ink);isolation:isolate;font-size:14px}.liquid svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}.liquid path{fill:var(--accent);transition:fill .7s}.liquid b{font-size:23px;font-weight:400}.liquid span{display:inline-flex;white-space:pre}.liquid .letter{display:inline-block;transition:transform 377ms cubic-bezier(.65,0,0,1);transition-delay:calc(var(--i)*8ms)}.liquid:hover .letter{transform:translateY(-2px)}.hero-art{position:relative;align-self:stretch;min-height:500px;margin:0 -4.5vw 0 0;border-radius:140px 0 0 140px;overflow:hidden;background:var(--hero-floor);transition:background .7s}.hero-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:30px 0 32px;font-size:10px;line-height:1.6;letter-spacing:.03em}.hero-foot>span{font-size:9px;letter-spacing:.08em}.scroll-link{border:1px solid var(--line);border-radius:50%;width:42px;height:42px;display:grid;place-items:center;font-size:20px}.work{padding:105px 0 62px;background:var(--wash);transition:background .7s;overflow:hidden;position:relative}.section-top{display:flex;justify-content:space-between;align-items:center;margin:0 4.5vw 52px}.section-index{font-size:10px;letter-spacing:.08em}h2{font-size:clamp(60px,6.3vw,110px)}.work h2{text-align:center}.work h2 span,.process h2 span{opacity:.55}.section-intro{text-align:center;margin:24px auto 34px;color:var(--muted);font-size:15px}.filters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 20px}.filters button{border:1px solid var(--line);border-radius:100px;font-size:12px;padding:12px 19px;transition:background .3s,color .3s,transform .3s}.filters button:hover{transform:translateY(-2px)}.filters .selected{background:var(--ink);color:var(--canvas);border-color:var(--ink)}.wheel{height:640px;position:relative;cursor:grab;touch-action:pan-y;outline-offset:-10px!important;margin-top:40px}.wheel.dragging{cursor:grabbing}.wheel-track{position:absolute;inset:0}.piece{position:absolute;left:50%;top:15px;width:370px;height:500px;border-radius:26px;background:var(--surface);padding:24px;text-align:left;transform-origin:50% 50%;will-change:transform;user-select:none;overflow:hidden;transition:opacity .28s,background .7s}.piece img{width:322px;height:295px;object-fit:cover;border-radius:16px;pointer-events:none;transition:transform .65s cubic-bezier(.65,0,.35,1)}.piece:hover img{transform:scale(1.025)}.piece h3{font-size:23px;font-weight:500;letter-spacing:-.04em}.piece p{font-size:13px;line-height:1.5;margin-top:8px;color:var(--muted);max-width:275px}.piece .piece-arrow{position:absolute;right:24px;bottom:24px;font-size:22px}.drag-hint{position:absolute;bottom:36px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.14em;pointer-events:none;opacity:.65}.gallery-controls{display:flex;align-items:center;justify-content:center;gap:28px}.circle{width:43px;height:43px;border:1px solid var(--line);border-radius:100%;font-size:20px;transition:background .3s}.circle:hover{background:var(--accent)}.circle:disabled{opacity:.3;cursor:default}.gallery-position{font-size:11px;min-width:46px;text-align:center}.concept-note{font-size:10px;color:var(--muted);text-align:center;margin:25px 24px 0;line-height:1.6}.meaning{padding:110px 6vw;display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:8vw}.meaning-art{position:relative;background:var(--surface);border-radius:42% 42% 22px 22px;overflow:hidden;aspect-ratio:.88}.meaning-art img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}.text-link{padding:10px 0;border-bottom:1px solid var(--ink);margin-top:24px;font-size:13px}.text-link span{margin-left:25px}.process{padding:70px 4.5vw 110px}.process .section-top{margin:0 0 48px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:70px}.steps article{border-top:1px solid var(--line);padding-top:18px}.step-num{font-size:11px;display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;margin-bottom:42px}.steps h3{font-weight:500;font-size:23px;letter-spacing:-.035em;margin-bottom:14px}.steps p{font-size:13px;line-height:1.75;color:var(--muted);max-width:240px}.closing{background:var(--field);padding:95px 5vw 105px;text-align:center;position:relative;overflow:hidden;transition:background .7s,color .7s}.closing h2{font-size:clamp(75px,9vw,150px);margin:35px 0}.closing h2+.closing-intro{margin-top:-10px}.closing .liquid{background:none}.closing-orbit{position:absolute;inset:0;pointer-events:none}.closing-orbit span{position:absolute;font-size:130px;line-height:1;color:var(--accent);animation:float 9s ease-in-out infinite}.closing-orbit span:nth-child(1){left:8%;top:18%;transform:rotate(-12deg)}.closing-orbit span:nth-child(2){right:9%;top:47%;font-size:90px;animation-duration:10.5s;animation-delay:-4s}.closing-orbit span:nth-child(3){left:19%;bottom:10%;font-size:55px;animation-duration:8s;animation-delay:-2s}footer{padding:45px 4.5vw;display:flex;justify-content:space-between;align-items:center;gap:25px}footer p,footer>span{font-size:10px;color:var(--muted)}footer>span{letter-spacing:.1em}dialog{background:var(--canvas);color:var(--ink);border:0;border-radius:25px;padding:0;width:940px;max-width:calc(100vw - 32px);max-height:85svh;overflow:auto}dialog::backdrop{background:#16101dc0;backdrop-filter:blur(7px)}.project-dialog[open]{display:grid;grid-template-columns:1fr 1fr}.dialog-close{position:absolute;right:15px;top:15px;width:38px;height:38px;display:grid;place-items:center;font-size:25px;border-radius:50%;background:var(--surface);z-index:2}.project-image{min-height:480px;background:var(--surface);display:flex;align-items:center}.project-image img{width:100%;height:auto;object-fit:contain}.project-copy{padding:65px 38px 38px}.project-copy h2{font-size:46px;margin:20px 0}.project-description{font-size:14px;line-height:1.7;color:var(--muted)}dl{margin-top:30px}dt{font-size:10px;letter-spacing:.08em;margin-top:18px;text-transform:uppercase}dd{margin:6px 0 0;font-size:13px;color:var(--muted)}.brief-dialog{width:610px;padding:44px}.brief-dialog h2{font-size:60px;margin:24px 0}.brief-dialog>p:not(.eyebrow){font-size:13px;line-height:1.7;color:var(--muted)}form{margin-top:25px}label{display:block;font-size:12px;margin:18px 0}input,textarea{display:block;width:100%;background:var(--surface);border:1px solid var(--line);padding:13px;margin-top:8px;border-radius:10px;color:var(--ink);outline-color:var(--ink);font-size:14px;resize:vertical}.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s,transform .75s}.reveal.visible{opacity:1;transform:none}@keyframes float{0%,100%{translate:0 0;rotate:-8deg}50%{translate:15px -25px;rotate:10deg}}@keyframes starspin{to{transform:rotate(360deg)}}
@media(min-width:1800px){.hero-art{min-height:670px}.hero{min-height:900px}}
@media(max-width:1000px){.nav{height:82px}.hero{padding-top:22px;grid-template-columns:1fr 1fr;min-height:700px}.hero-art{min-height:450px;border-radius:90px 0 0 90px}h1{font-size:80px}.hero-copy{padding-bottom:20px}.standfirst{font-size:15px}.meaning{gap:6vw}.steps{gap:22px}.closing-orbit span:nth-child(1){left:3%;font-size:95px}.closing-orbit span:nth-child(2){right:3%;font-size:75px}}
@media(max-width:650px){.nav{height:76px;padding:0 22px}.wordmark{font-size:28px}.nav nav{gap:18px;font-size:11px}.nav nav>a:nth-child(2),.nav-contact{display:none}.hero{display:flex;flex-direction:column;align-items:stretch;padding:25px 22px 0;gap:0;min-height:auto}.hero-copy{padding:0}.hero-copy .eyebrow{font-size:9px;margin-bottom:22px}.little-star{font-size:24px}h1{font-size:clamp(66px,13.4vw,88px);line-height:1.02;letter-spacing:-.065em}.standfirst{margin:20px 0;font-size:14px}.liquid{min-width:215px;height:58px;padding:0 24px;font-size:12px}.hero-art{height:345px;min-height:0;margin:30px -22px 0 25px;border-radius:100px 0 0 22px}.hero-foot{padding:20px 0 27px;font-size:9px}.hero-foot>span{display:none}.scroll-link{height:35px;width:35px}.work{padding:65px 0 35px}.section-top{margin:0 22px 32px;align-items:start;gap:20px}.section-top .eyebrow{font-size:8px;max-width:190px}.section-index{font-size:8px;white-space:nowrap}h2{font-size:clamp(43px,9.5vw,60px)}.section-intro{font-size:12px;margin:20px 25px 25px}.filters{gap:6px}.filters button{font-size:10px;padding:10px 12px}.wheel{height:460px;margin-top:25px}.piece{width:260px;height:370px;padding:17px;border-radius:22px}.piece img{width:226px;height:207px;border-radius:13px}.piece h3{font-size:18px}.piece p{font-size:11px;line-height:1.4;max-width:210px}.piece .piece-arrow{font-size:20px;bottom:17px;right:17px}.drag-hint{bottom:23px;font-size:8px}.concept-note{font-size:8px}.meaning{padding:60px 22px;grid-template-columns:1fr;gap:38px}.meaning-art{aspect-ratio:1.05}.process{padding:30px 22px 60px}.process .section-top{margin-bottom:34px}.steps{grid-template-columns:1fr 1fr;gap:34px 22px;margin-top:40px}.step-num{margin-bottom:24px;width:28px;height:28px;font-size:9px}.steps h3{font-size:20px}.steps p{font-size:12px}.closing{padding:65px 22px 75px}.closing .eyebrow{font-size:9px}.closing h2{font-size:70px;margin:35px 0}.closing-orbit span:nth-child(1){font-size:50px;left:0;top:33%}.closing-orbit span:nth-child(2){font-size:44px;right:3%;top:61%}.closing-orbit span:nth-child(3){font-size:32px;left:14%;bottom:8%}footer{padding:32px 22px;flex-wrap:wrap;gap:24px}footer .wordmark{width:100%}footer p{font-size:8px}footer>span{display:none}.project-dialog[open]{grid-template-columns:1fr}.project-image{min-height:0;max-height:320px;overflow:hidden}.project-image img{max-height:320px;object-fit:contain}.project-copy{padding:28px}.project-copy h2{font-size:39px}.brief-dialog{padding:35px 24px}.brief-dialog h2{font-size:49px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.closing .liquid:focus-visible{outline-color:currentColor}.meaning-art{overflow:hidden;aspect-ratio:auto;border-radius:42% 42% 22px 22px}.meaning-art img{aspect-ratio:1;object-fit:contain;height:auto}
.facts{padding:80px 0 50px;overflow:hidden}.facts .section-top{margin-bottom:30px}.facts-rail{display:flex;gap:24px;padding:5px 4.5vw 15px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:4.5vw}.facts-rail::-webkit-scrollbar{display:none}.fact-card{flex:0 0 39%;min-width:360px;background:var(--field);padding:38px 38px 40px;border-radius:26px;scroll-snap-align:start;min-height:380px;transition:background .7s,color .7s}.fact-kicker{font-size:9px;letter-spacing:.12em;display:block}.fact-card>strong{font-size:150px;line-height:1.25;font-weight:450;letter-spacing:-.08em;display:block;margin:12px 0 0}.fact-card>strong span{font-size:.5em;vertical-align:18%;margin-left:8px}.fact-card h3{font-size:24px;font-weight:500;letter-spacing:-.025em}.fact-card p{font-size:12px;line-height:1.6;margin-top:12px;max-width:300px;opacity:.75}.fact-card:nth-child(2){background:var(--ink);color:var(--canvas)}.fact-invitation{background:var(--wash)}.fact-invitation h3{font-size:52px;line-height:1.04;letter-spacing:-.06em;margin-top:45px}.fact-invitation .text-link{display:inline-block}.facts-bottom{display:flex;align-items:center;justify-content:space-between;margin:10px 4.5vw 0;gap:24px}.facts-bottom p{font-size:10px;color:var(--muted)}.facts-bottom>div{display:flex;gap:8px}
.calculator{padding:65px 4.5vw 100px}.calc-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:end}.calc-heading .eyebrow{grid-column:1/-1}.calc-heading h2{font-size:clamp(52px,5.5vw,94px)}.calc-heading em{opacity:.55}.calc-heading>p:last-child{font-size:15px;line-height:1.7;color:var(--muted);padding-bottom:8px}.calc-panel{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--surface)}.calc-inputs{padding:40px}.calc-inputs fieldset{padding:0;border:0;margin:0 0 28px}.calc-inputs legend,.calc-inputs label{font-size:12px;margin:0 0 13px;display:block}.package-toggle{display:flex;border:1px solid var(--line);border-radius:15px;padding:5px;gap:5px}.package-toggle button{flex:1;text-align:left;padding:16px;border-radius:10px}.package-toggle button[aria-pressed=true]{background:var(--ink);color:var(--canvas)}.package-toggle strong{font-weight:500;font-size:16px;display:block}.package-toggle span{display:block;font-size:10px;opacity:.7;margin-top:7px}.calc-inputs .range-label{display:flex;align-items:center;justify-content:space-between;margin-top:28px}.range-label output{font-size:22px;letter-spacing:-.04em}.calc-inputs input[type=range]{width:100%;accent-color:var(--ink);padding:0;height:25px;cursor:pointer;border:0;background:none}.range-ends{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin:4px 0 28px}.calc-inputs label[for=acv]{display:flex;justify-content:space-between}.calc-inputs label[for=acv] span{color:var(--muted);font-size:10px}.money-input{display:flex;align-items:center;border-bottom:1px solid var(--line);font-size:34px;letter-spacing:-.04em}.money-input input{font-size:34px;letter-spacing:-.04em;padding:9px 10px;border:0;border-radius:0;background:none;margin:0}.money-input>span{opacity:.5}.calc-inputs #acv-help{font-size:10px;color:var(--muted);margin-top:12px}.acv-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.acv-presets button{border:1px solid var(--line);border-radius:20px;font-size:11px;padding:9px 16px}.acv-presets button[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}.calc-inputs .price-help{font-size:10px;color:var(--muted);margin:-14px 0 0}.calc-results{background:var(--ink);color:var(--canvas);padding:40px;display:flex;flex-direction:column;transition:background .7s,color .7s}.revenue{font-size:clamp(65px,7vw,110px);letter-spacing:-.07em;line-height:1.2;margin-top:20px}.multiple-line{font-size:11px;opacity:.85;margin-top:8px}.multiple-line strong{font-weight:500;font-size:17px;margin-right:6px}.forecast{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid #ffffff30;margin-top:34px;padding-top:25px}.forecast strong{display:block;font-size:30px;font-weight:450;letter-spacing:-.04em}.forecast span{display:block;font-size:10px;opacity:.7;margin-top:6px}.spend-row{display:flex;justify-content:space-between;margin-top:28px;margin-bottom:25px;font-size:11px}.spend-row strong{font-weight:500}.calc-results details{margin-top:auto;border-top:1px solid #ffffff30;padding-top:18px}.calc-results summary{cursor:pointer;font-size:11px;list-style:none;display:flex;justify-content:space-between}.calc-results summary:focus-visible{outline:2px solid currentColor;outline-offset:6px}.two-year{padding-top:22px}.two-year strong{display:block;font-size:35px;font-weight:450;letter-spacing:-.04em}.two-year span{display:block;font-size:11px;margin-top:6px}.two-year p{font-size:10px;line-height:1.7;opacity:.65;margin-top:15px}.calc-assumptions{font-size:10px;line-height:1.7;color:var(--muted);margin:22px 0 0;max-width:850px}
@media(min-width:651px) and (max-width:900px){h1{font-size:clamp(54px,8vw,72px)}.hero-art{min-height:420px}.hero{min-height:620px}.calc-inputs,.calc-results{padding:26px}.package-toggle button{padding:13px 8px}.acv-presets{gap:5px}.acv-presets button{padding:9px 12px}}
@media(max-width:650px){.facts{padding:55px 0 25px}.fact-card{flex-basis:82%;min-width:0;min-height:330px;padding:28px}.fact-card>strong{font-size:115px}.fact-card h3{font-size:21px}.fact-card p{font-size:11px}.fact-invitation h3{font-size:44px}.facts-rail{gap:16px;padding-left:22px;padding-right:22px;scroll-padding:22px}.facts-bottom{margin:12px 22px 0}.facts-bottom p{font-size:8px;max-width:210px}.calculator{padding:45px 22px 65px}.calc-heading{display:block}.calc-heading h2{font-size:52px;margin:24px 0}.calc-heading>p:last-child{font-size:13px}.calc-panel{grid-template-columns:1fr;margin-top:30px;border-radius:22px}.calc-inputs,.calc-results{padding:26px}.revenue{font-size:88px}.calc-assumptions{font-size:9px}.package-toggle button{padding:14px 9px}.package-toggle strong{font-size:14px}.package-toggle span{font-size:9px}.calc-inputs input[type=range]{min-height:34px}.facts-bottom .circle{width:35px;height:35px}.money-input input{min-width:0}}
.hero-art{background:#d7d2e6}
@media(max-width:650px){}
.liquid .letter{height:1.2em;position:relative;overflow:hidden;transform:none!important;transition:none}.liquid .letter i{display:block;font-style:normal;transition:transform 377ms cubic-bezier(.65,0,0,1),opacity 233ms;transition-delay:calc(var(--i)*8ms)}.liquid .letter i+i{position:absolute;top:100%;left:0;opacity:0}.liquid:hover .letter i{transform:translateY(-100%);opacity:0}.liquid:hover .letter i+i{opacity:1}.liquid .letter:has(i:first-child:empty){min-width:.25em}
@media(max-width:650px){.closing h2{font-size:clamp(52px,15vw,70px)}}
/* Keep the complete storefront sign inside its frame. */
.meaning-art{border-radius:22px}

/* "Meet the team" became a link to the booking page (2026-09-28); keep the box a button had. */
.excellence>a.text-link{display:inline-block}

/* The Waitlist link adds a fourth nav item; between 651 and 720px the second link steps aside so the row never wraps. */
@media(min-width:651px) and (max-width:720px){.nav nav>a:nth-child(2){display:none}}
/* Line arrow icons (inline SVG, inherit colour and size from their wrapper). Replace typed arrows that Apple devices draw as emoji. */
.i-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.14em;flex:none}
/* The button background rules (.liquid svg / .liquid path) must not reach the icon. */
.liquid .i-arrow{display:block;position:static;inset:auto;width:1em;height:1em;z-index:auto;overflow:hidden;stroke-width:1.75}.liquid .i-arrow path{fill:none;transition:none}
/* Line asterisk for the spinning star and the closing orbit. The typed ✳ is drawn as a green emoji on Apple devices. */
.i-star{display:block;width:1em;height:1em}
/* Keeps a highlighted phrase on one line (hero: "to ignore."). A class, because the CSP blocks inline style attributes. */
.nowrap{white-space:nowrap}
@media(max-width:340px){#hero-title{font-size:58px}} /* "Impossible" fits a 320px screen */
/* Rebrand 2026-10-15: the tagline under the hero name, and the line under the closing headline. */
.hero-tagline{font-size:clamp(28px,2.7vw,50px);font-weight:500;line-height:1.1;letter-spacing:-.045em;margin-top:16px;max-width:620px;isolation:isolate}.hero-tagline em{position:relative}.hero-tagline em:after{content:'';position:absolute;left:0;right:0;bottom:1px;height:7px;background:var(--accent);z-index:-1;transition:background .7s}
.closing-intro{font-size:17px;line-height:1.6;color:inherit;opacity:.78;max-width:520px;margin:22px auto 30px}
@media(max-width:650px){.hero-tagline{font-size:clamp(24px,7vw,30px);margin-top:12px}.closing-intro{font-size:15px;max-width:330px}}

/* Inspiration uses the existing circular card motion and both colour systems. */
.section-intro{max-width:620px;line-height:1.6}.piece img{object-fit:contain;background:var(--canvas)}.piece:hover img{transform:scale(1.015)}.piece h3{font-size:22px;line-height:1.12}.piece p{max-width:285px}.project-dialog{width:1120px;max-height:90svh;overscroll-behavior:contain}.project-dialog[open]{grid-template-columns:46% 54%;align-items:start}.project-image{position:sticky;top:0;min-height:0;padding:46px 26px 26px;display:block;background:var(--wash);border-radius:25px 0 0 25px}.project-image img{aspect-ratio:1;width:100%;height:auto;object-fit:contain;border-radius:14px}.image-caption{font-size:8px;letter-spacing:.08em;color:var(--muted);text-align:center;line-height:1.6;margin:17px 0 0}.project-copy{padding:56px 42px 40px}.project-copy h2{font-size:46px;line-height:1.03;margin:17px 0 22px}.project-category{font-size:9px;letter-spacing:.08em}.project-description{font-size:16px;line-height:1.65;color:var(--ink)}.campaign-details{margin-top:27px;border-top:1px solid var(--line)}.campaign-details dt{font-size:9px;color:var(--muted);margin-top:24px}.campaign-details dd{font-size:13px;line-height:1.65;color:var(--ink);margin-top:7px}.letter-panel{margin-top:32px;padding:27px 26px;background:#fffdf8;color:#252522;border:1px solid #e7e2d7;border-radius:4px 4px 20px 4px;box-shadow:0 8px 20px #17171706}.letter-panel h3,.personalise-panel h3,.campaign-list h3{font-size:12px;font-weight:550;margin:0 0 17px}.letter-footnote{border-top:1px solid #e7e2d7;font-size:10px;line-height:1.6;padding-top:15px;margin-top:20px;color:#706b60}.personalise-panel,.campaign-list{margin-top:27px}.personalise-panel h3,.campaign-list h3{margin-bottom:9px}.personalise-copy,.campaign-list p{font-size:12px;line-height:1.7;color:var(--muted)}.campaign-list{background:var(--wash);border-radius:14px;padding:20px}.campaign-sources{font-size:11px;line-height:1.6;margin-top:25px;padding-top:18px;border-top:1px solid var(--line)}.campaign-sources summary{cursor:pointer;display:flex;justify-content:space-between;gap:14px;list-style:none}.campaign-sources summary:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.product-fact{margin-top:18px}.source-links{display:grid;gap:8px;margin-top:15px}.source-links a{text-decoration:underline;text-underline-offset:3px}.research-note{font-size:10px;color:var(--muted);margin-top:17px}.hero-art{background:var(--hero-floor)}.meaning-art img{mix-blend-mode:normal}
@media(max-width:1000px){.project-copy{padding:55px 28px 30px}.project-copy h2{font-size:39px}.project-image{padding:48px 18px 22px}}
@media(max-width:650px){.piece h3{font-size:17px}.project-dialog[open]{grid-template-columns:1fr}.project-image{position:relative;max-height:none;padding:20px 20px 14px;border-radius:25px 25px 0 0}.project-image img{max-height:330px;max-width:330px;margin:auto}.image-caption{font-size:7px}.project-copy{padding:28px 24px}.project-copy h2{font-size:38px}.project-description{font-size:14px}.letter-panel{padding:22px 20px}.section-intro{max-width:330px}.concept-note{line-height:1.8}.project-category{font-size:8px}}

.letter-panel{background:#fffdf6;padding:30px 29px;box-shadow:0 5px 22px #17171709}.letter-panel h3{color:#706b60;font-weight:450;font-size:10px;letter-spacing:.04em}.piece{height:515px}.piece>img{height:270px}.piece-company{display:flex;align-items:center;gap:10px;margin:16px 0 13px}.piece .piece-company img{width:31px;height:31px;max-width:31px;object-fit:contain;border-radius:6px;background:#fff;padding:3px;transform:none}.piece-company>span{display:grid;gap:3px}.piece-company small{font-size:9px;font-weight:400;line-height:1.1;color:var(--muted)}.piece-company strong{font-size:15px;font-weight:550;line-height:1.1}.piece h3{font-size:21px}.piece p{font-size:12px;max-width:275px}.piece:hover .piece-logo{transform:none}.company-heading{display:flex;gap:15px;align-items:center;margin:22px 0 18px}.company-heading .company-logo{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:10px;padding:5px}.company-heading p{font-size:10px;color:var(--muted);margin-bottom:5px}.company-heading h3{font-size:29px;line-height:1;font-weight:550;letter-spacing:-.035em}.company-summary{font-size:12px;line-height:1.7;color:var(--muted)}.company-links{display:flex;gap:20px;flex-wrap:wrap;margin:15px 0 28px}.company-links a{font-size:11px;text-decoration:underline;text-underline-offset:4px}.business-case{font-size:12px;line-height:1.7;color:var(--muted);margin-top:14px}.business-case:empty{display:none}
@media(max-width:650px){.piece{height:400px}.piece>img{height:190px}.piece .piece-company img{width:26px;height:26px;max-width:26px}.piece-company{gap:8px;margin:13px 0 12px}.piece-company small{font-size:8px}.piece-company strong{font-size:12px}.piece h3{font-size:17px}.piece p{font-size:10px;max-width:204px}.wheel{height:490px}.letter-panel{padding:25px 22px}.company-heading h3{font-size:25px}}
/* Source-provided company wordmarks retain their original colours and aspect ratio. */
.piece .piece-company img{width:62px;max-width:62px;height:30px;padding:5px;background:#fff;border-radius:5px}.company-heading .company-logo{width:96px;height:49px;padding:8px;border-radius:8px}.piece-company strong{font-size:14px}
@media(max-width:650px){.piece .piece-company img{width:48px;max-width:48px;height:27px;padding:4px}.piece-company strong{font-size:12px}.company-heading .company-logo{width:82px;height:44px}}
/* Square photos fill square frames. No coloured letterboxing, no cropped plinths. */
.piece{height:563px}.piece>img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:none}.wheel{height:700px}.piece:hover>img{transform:none}.piece .piece-arrow{bottom:20px}
@media(max-width:650px){.piece{height:433px}.piece>img{height:auto;aspect-ratio:1}.wheel{height:535px}}
/* The visible letter is an actual generated ink-on-paper image, not a typeface. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.letter-panel{background:none;border:0;border-radius:0;padding:10px 0 0;box-shadow:none;perspective:1200px}.letter-panel h3{color:var(--muted);font-family:Dorothea Sans,Arial,sans-serif;margin:0 0 14px}.note-float{filter:drop-shadow(2px 16px 13px #17171720);transform-origin:50% 50%;transform:rotateX(3deg) rotateY(-3deg) rotateZ(-.7deg);animation:note-drift 9s ease-in-out infinite;will-change:transform}.note-image{display:block;width:100%;height:auto;clip-path:inset(3.3% 3.3% 2.8% 3.3% round 1.2%)}.letter-footnote{border:0;margin:0;padding:10px 9px 0;font-size:10px;line-height:1.6;color:var(--muted)}@keyframes note-drift{0%,100%{transform:translateY(0) rotateX(3deg) rotateY(-3deg) rotateZ(-.7deg)}50%{transform:translateY(-4px) rotateX(1deg) rotateY(-1deg) rotateZ(-.3deg)}}
@media(max-width:650px){.letter-panel{padding:5px 0 0}.note-float{filter:drop-shadow(1px 11px 9px #17171720)}}
@media(prefers-reduced-motion:reduce){.note-float{animation:none;transform:none}}
.project-photo{position:relative;aspect-ratio:1}.project-photo .light-off-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .65s cubic-bezier(.65,0,.35,1);pointer-events:none}.project-photo.lamp-off .light-off-image{opacity:1}.light-switch{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:8px;background:#121820cc;backdrop-filter:blur(10px);color:#fff;padding:10px 14px;border-radius:100px;font-size:11px}.light-switch[hidden],.light-off-image[hidden]{display:none}.light-switch i{width:8px;height:8px;background:#ffc775;border-radius:50%;box-shadow:0 0 10px #ffc775}.light-switch[aria-pressed=false] i{background:#adb4bc;box-shadow:none}.light-switch:focus-visible{outline-color:white}
@media(max-width:650px){.project-photo{max-width:330px;margin:auto}.light-switch{left:12px;bottom:12px}}

/* Original kit category treatment, with Dorothea colours. */
.work{background:color-mix(in srgb,var(--wash) 72%,var(--industry-tone,var(--wash)));transition:background .7s cubic-bezier(.65,0,.35,1)}.wheel-track{perspective:none}.piece{backface-visibility:hidden}.hero-copy .standfirst{max-width:440px}
@media(prefers-reduced-motion:reduce){.work{transition:none}.piece{rotate:none!important}}
/* Gallery v2 (2026-10-16): a design idea without a legible note photo shows the note as text. */
.note-float[hidden],.campaign-list[hidden]{display:none}.example-letter.letter-text{white-space:pre-line;font-size:14px;line-height:1.75;color:#252522;background:#fffdf6;border:1px solid #e7e2d7;border-radius:4px 4px 18px 4px;padding:24px 26px;box-shadow:0 5px 22px #17171709}
@media(max-width:650px){.example-letter.letter-text{font-size:13px;padding:20px}}
.company-logo[hidden],.piece-logo[hidden]{display:none!important}

.email-contact{max-width:430px;margin:25px 0 0}.email-contact label{font-size:12px;line-height:1.6;margin:0 0 12px;color:var(--muted)}.email-row{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:6px;gap:6px}.email-row input{min-width:0;flex:1;padding:12px 10px;margin:0;background:transparent;border:0;font-size:14px}.email-row input:focus-visible{outline:2px solid var(--accent);outline-offset:0}.email-row button{background:var(--ink);color:var(--canvas);border-radius:11px;padding:13px 17px;display:flex;align-items:center;gap:17px;font-size:12px;white-space:nowrap;transition:transform .2s,opacity .2s}.email-row button:hover{transform:translateY(-1px)}.email-row button:disabled{opacity:.6;cursor:wait}.email-row button span+span{font-size:20px}.contact-consent{font-size:9px;line-height:1.5;color:var(--muted);margin-top:10px}.contact-consent a{text-decoration:underline;text-underline-offset:2px}.contact-status{font-size:12px;line-height:1.6;margin-top:12px;color:var(--ink)}.contact-status:empty{display:none}.calendar-link{display:inline-flex;gap:18px;align-items:center;font-size:12px;line-height:1.5;margin-top:17px;border-bottom:1px solid var(--line);padding-bottom:6px}.calendar-link:hover{border-color:currentColor}.contact-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.closing .calendar-link{position:relative;z-index:1}.contact-dialog .email-contact{max-width:none}.contact-dialog .contact-context{font-size:13px;line-height:1.7;color:var(--muted)}.contact-dialog .contact-context:empty{display:none}.hero-copy{padding-bottom:28px}.piece .piece-company img{width:88px;max-width:88px;height:34px;padding:5px}.company-heading .company-logo{width:120px;height:52px;image-rendering:auto}
@media(max-width:650px){.email-contact{margin-top:22px}.email-row input{font-size:16px;padding:11px 8px}.email-row button{padding:11px 12px;gap:10px;font-size:11px}.calendar-link{font-size:11px}.email-contact label{font-size:11px}.piece .piece-company img{width:64px;max-width:64px;height:30px}.company-heading .company-logo{width:104px;height:47px}}
/* The main invitation keeps the original liquid spring and rolling letters. */
.hero-copy>.calendar-link{display:flex;width:fit-content;max-width:calc(100% - 26px);margin-left:26px;line-height:1.6;font-size:11px}.hero-copy>.liquid{margin-top:0}.closing>.calendar-link{display:flex;justify-content:center;width:fit-content;margin:20px auto 0}.contact-dialog .email-row{border-radius:100px;padding:6px;background:var(--surface)}.contact-dialog .email-row input{padding:12px 14px;border-radius:100px}.contact-dialog .email-row button{border-radius:100px}.contact-dialog{border-radius:32px}.contact-dialog .calendar-link{font-size:11px;line-height:1.65}.contact-dialog .email-contact label{font-size:13px}.contact-dialog .contact-consent{margin-left:15px}.contact-dialog .contact-status{margin-left:15px}

/* A quiet, slightly offset drawn contour follows the original spring. */
.liquid .liquid-outline{fill:none;stroke:var(--accent-ink);stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round;opacity:.42;transform:translate(-1.4px,.8px) rotate(-.45deg);transform-origin:center;vector-effect:non-scaling-stroke;transition:stroke .4s,opacity .2s}.liquid:hover .liquid-outline{opacity:.66}

/* The small hero link starts where the button text starts: the button pads 26px, 24px on phones (style.css .liquid). */
@media(max-width:650px){.hero-copy>.calendar-link{margin-left:24px;max-width:calc(100% - 24px)}}

/* The same square photographs fill the frame in every direction. No letterboxing. */
.hero-art.hero-carousel {
  align-self:center; width:calc(100% + 4.5vw); height:auto; min-height:0;
  aspect-ratio:1; margin:0 -4.5vw 0 0; border-radius:clamp(40px,8vw,140px) 0 0 clamp(40px,8vw,140px);
  overflow:hidden; isolation:isolate; background:var(--hero-floor);
  touch-action:pan-y pinch-zoom; /* horizontal swipes change the photo; vertical drags scroll and pinch still zooms */
}
.hero-photo {
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:contain; opacity:0; transition:opacity 1100ms cubic-bezier(.45,0,.2,1);
  pointer-events:none; user-select:none;
}
.hero-photo.is-current { opacity:1; }
.hero-photo-controls {
  position:absolute; z-index:2; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; border:1px solid #ffffff99;
  padding:7px 10px; border-radius:100px; background:#ffffffed; color:#202126;
  box-shadow:0 3px 18px #10131812; backdrop-filter:blur(12px); white-space:nowrap;
}
.hero-photo-controls button { width:34px; height:34px; padding:0; display:grid; place-items:center; border-radius:50%; font-size:18px; line-height:1; color:#202126; }
.hero-photo-controls button:hover { background:#20212612; }
.hero-photo-controls button:focus-visible { outline:2px solid #202126; outline-offset:2px; }
.hero-photo-controls [hidden] { display:none; }
.hero-photo-company { font-size:10px; max-width:95px; overflow:hidden; text-overflow:ellipsis; }
.hero-photo-position { font-size:9px; font-variant-numeric:tabular-nums; letter-spacing:.05em; }
.hero-photo-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[data-direction=d] body,
[data-direction=d] .work,
[data-direction=d] .closing,
[data-direction=d] .fact-card,
[data-direction=d] .calc-results,
[data-direction=d] h1 em:after,
[data-direction=d] .liquid path { transition:none; }
[data-direction=d] .piece { transition:opacity .28s; }
[data-direction=d] .closing,
[data-direction=d] .fact-card:first-child { color:#fafbfc; }
[data-direction=d] .closing em { color:var(--accent); }
@media(max-width:650px) {
  .hero-art.hero-carousel { width:calc(100% + 22px); margin:30px -22px 0 0; height:auto; min-height:0; border-radius:64px 0 0 22px; }
  .hero-photo-controls { gap:6px; bottom:12px; padding:5px 8px; }
  .hero-photo-controls button { width:30px; height:30px; }
}
@media(prefers-reduced-motion:reduce) { .hero-photo { transition:none; } }


/* One campaign at a time: sender, audience, reason and physical gift. */
.targeting.meaning{display:block;padding:96px 5vw 100px}.targeting-heading{max-width:760px}.targeting-heading .eyebrow{margin-bottom:24px}.targeting-heading h2{font-size:clamp(42px,4.7vw,72px);line-height:1.04}.targeting-heading h2 em{color:var(--muted)}.targeting-heading>p:last-child{font-size:17px;line-height:1.65;color:var(--muted);max-width:600px;margin-top:24px}.targeting-options{display:flex;gap:8px;flex-wrap:wrap;margin:35px 0 42px}.targeting-options button{border:1px solid transparent;border-radius:100px;padding:12px 17px;font-size:14px;line-height:1.4;white-space:nowrap;transition:background .25s,color .25s}.targeting-options button:hover{background:var(--wash)}.targeting-options button[aria-pressed=true]{background:var(--ink);color:var(--canvas)}.targeting-options button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.targeting-example-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'photo summary' 'photo flow';grid-template-rows:min-content 1fr;gap:26px 6vw;align-items:start}.targeting-summary{grid-area:summary}.targeting-sender{display:flex;align-items:center;gap:14px;margin:0 0 22px}.targeting-sender img{width:83px;height:36px;object-fit:contain;background:#fff;border-radius:9px;padding:7px}.targeting-sender p{font-size:12px;line-height:1.5;color:var(--muted)}.targeting-sender strong{display:block;font-size:16px;font-weight:500;color:var(--ink)}.targeting-summary h3{font-size:clamp(29px,2.6vw,43px);font-weight:500;line-height:1.12;letter-spacing:-.045em;max-width:550px}.targeting-summary>p{font-size:16px;line-height:1.6;color:var(--muted);margin-top:17px;max-width:490px}.targeting-visual{grid-area:photo;margin:0;min-width:0}.targeting .meaning-art{position:relative;padding:0;border-radius:28px;overflow:hidden;background:none;aspect-ratio:1;isolation:isolate}.targeting .meaning-art img{width:100%;height:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:normal}.targeting-gift-open{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;z-index:2}.targeting-gift-open:focus-visible{outline:3px solid var(--ink);outline-offset:-6px}.targeting-visual figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 3px;color:var(--muted);font-size:13px;line-height:1.5}.targeting-visual figcaption>span:last-child{font-size:25px;color:var(--ink)}.targeting-copy{grid-area:flow;min-width:0}.targeting-flow{list-style:none;padding:0;margin:0;display:grid;gap:23px}.targeting-flow li{display:grid;grid-template-columns:31px 1fr;gap:15px;position:relative}.targeting-flow li>span{width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:11px;margin-top:1px;background:var(--canvas)}.targeting-flow li:not(:last-child):after{content:'';position:absolute;left:14px;top:36px;bottom:-15px;border-left:1px solid var(--line)}.targeting-flow h4{font-size:13px;font-weight:500;margin:0 0 6px;line-height:1.5;color:var(--muted)}.targeting-flow p{font-size:16px;line-height:1.55;max-width:475px}.targeting-goal{font-size:14px;line-height:1.55;max-width:480px;margin:25px 0 0 46px;color:var(--muted)}.targeting-caveat{font-size:12px;line-height:1.6;margin:13px 0 0 46px;color:var(--muted);max-width:470px}.targeting-copy>.text-link{margin:18px 0 0 46px;font-size:14px;text-align:left}.targeting-footer{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid var(--line);margin-top:45px;padding-top:20px}.targeting-footer>p{font-size:12px;line-height:1.6;color:var(--muted);max-width:460px}.targeting-footer .text-link{margin:0;white-space:nowrap;font-size:14px}.targeting.is-changing .targeting-summary,.targeting.is-changing .targeting-copy{animation:targeting-arrive .32s ease-out both}.targeting.is-changing [data-target-image]{animation:targeting-photo .45s ease-out both}.excellence .steps h3{max-width:250px}.excellence .steps p{max-width:280px}.excellence .excellence-intro{max-width:660px;margin-top:26px;font-size:19px;line-height:1.6;color:var(--muted)}.excellence .text-link{margin-top:44px}.excellence .steps p{font-size:15px}
@keyframes targeting-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes targeting-photo{from{opacity:.45}to{opacity:1}}
@media(max-width:1100px){.targeting-example-grid{gap:24px 4vw}.targeting-options{gap:3px}.targeting-options button{padding:11px 13px}.targeting-flow{gap:20px}.targeting-flow p{font-size:15px}}
@media(max-width:820px){.targeting.meaning{padding:65px 22px 70px}.targeting-heading h2{font-size:clamp(38px,7.4vw,58px)}.targeting-heading>p:last-child{font-size:16px}.targeting-options{flex-wrap:nowrap;overflow:auto;scrollbar-width:none;padding:4px 3px 7px;margin:25px -3px 28px}.targeting-options::-webkit-scrollbar{display:none}.targeting-options button{flex:0 0 auto;font-size:13px;padding:11px 15px}.targeting-example-grid{grid-template-columns:1fr;grid-template-areas:'summary' 'photo' 'flow';gap:24px}.targeting-summary h3{font-size:34px;max-width:540px}.targeting-summary>p{max-width:590px}.targeting-sender{margin-bottom:18px}.targeting-visual{max-width:560px;width:100%}.targeting .meaning-art{border-radius:23px}.targeting-flow p{font-size:16px;max-width:590px}.targeting-flow{gap:24px}.targeting-goal{max-width:550px}.targeting-footer{align-items:flex-start;flex-direction:column;gap:14px;margin-top:32px}.excellence .excellence-intro{font-size:17px}}
@media(prefers-reduced-motion:reduce){.targeting *, .targeting *:after{animation:none!important;transition:none!important}}

/* Category composition from the kit: centred header,24px inset,26px card,
  100ms dissolve-out and200ms dissolve-in with4px travel.
  No rotation or stagger;700ms category background interpolation. */
.targeting.meaning{--target-tone:#b8c7d1;background:color-mix(in srgb,var(--canvas) 75%,var(--target-tone));transition:background .7s cubic-bezier(.65,0,.35,1)}
.targeting-heading{margin-inline:auto;text-align:center;max-width:850px}.targeting-heading>p:last-child{margin-inline:auto;max-width:600px}.targeting-options{justify-content:center;max-width:1240px;margin-inline:auto}
.targeting-example-grid{max-width:1240px;margin-inline:auto;background:var(--surface);padding:30px;border-radius:26px;gap:24px 42px;backface-visibility:hidden;transform-origin:50% 50%;box-shadow:none}
.targeting .meaning-art{border-radius:18px}.targeting-flow li>span{background:var(--surface)}.targeting-footer{max-width:1240px;margin-inline:auto}.targeting.is-changing .targeting-summary,.targeting.is-changing .targeting-copy,.targeting.is-changing [data-target-image]{animation:none}
@media(max-width:1100px){.targeting-example-grid{padding:24px;gap:24px 30px}.targeting-summary h3{font-size:31px}.targeting-flow p{font-size:15px}}
@media(max-width:820px){.targeting-options{justify-content:flex-start}.targeting-example-grid{padding:22px;gap:23px}.targeting-summary h3{font-size:30px}.targeting-flow p{font-size:16px}.targeting-heading{max-width:650px}.targeting-visual{margin-inline:auto}.targeting-heading>p:last-child{max-width:590px}}
@media(max-width:430px){.targeting-example-grid{padding:20px}.targeting-summary h3{font-size:28px}.targeting-sender{gap:10px}.targeting-flow li{grid-template-columns:26px 1fr;gap:11px}.targeting-flow li>span{width:25px;height:25px}.targeting-flow li:not(:last-child):after{left:12px}.targeting-goal,.targeting-caveat,.targeting-copy>.text-link{margin-left:37px}.targeting-copy>.text-link{font-size:13px}.targeting-copy>.text-link span{margin-left:8px}.targeting-flow p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.targeting.meaning{transition:none}.targeting-example-grid{transform:none!important}}
/* The design-call card carries no photo since 2026-10-16: the summary and the three steps share one column. */
.design-call .targeting-example-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:'summary' 'flow';max-width:640px;margin-top:38px}

/* Shape silhouettes and independent clocks come from the kit; materials use Dorothea tokens. */
.playful-host{position:relative;isolation:isolate}.playful-host>.playful-layer{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;user-select:none;contain:layout paint}.playful-layer,.playful-layer *{pointer-events:none!important}.playful-float{position:absolute;display:block;animation:paper-drift 12s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 50%;opacity:.63}.playful-float[hidden]{display:none}.playful-slot-1{animation-name:paper-orbit;animation-duration:15.5s;animation-delay:-4.7s;opacity:.42}.playful-shape{display:block;width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 60%,white),var(--accent) 58%,color-mix(in srgb,var(--accent) 72%,var(--ink)));mask-image:var(--shape-mask);mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-image:var(--shape-mask);-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;transform:rotate(-14deg);transition:transform 1s cubic-bezier(.22,1,.36,1),background .7s}.playful-slot-1 .playful-shape{transform:rotate(23deg);background:color-mix(in srgb,var(--accent) 65%,var(--canvas))}.playful-running .playful-float{animation-play-state:running}[data-direction=d] .playful-shape{background:linear-gradient(140deg,var(--canvas),var(--accent) 55%,var(--ink))}[data-direction=d] .playful-float{opacity:.34}@keyframes paper-drift{0%,100%{transform:translate3d(0,0,0) rotate(-5deg)}50%{transform:translate3d(10px,-12px,0) rotate(8deg)}}@keyframes paper-orbit{0%,100%{transform:translate3d(0,0,0) rotate(8deg)}50%{transform:translate3d(-12px,10px,0) rotate(-5deg)}}@media(max-width:650px){.playful-float{opacity:.45;animation-name:paper-drift-small}.playful-slot-1{opacity:.3;animation-direction:reverse}}@keyframes paper-drift-small{0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}50%{transform:translate3d(5px,-6px,0) rotate(5deg)}}@media(prefers-reduced-motion:reduce){.playful-float,.playful-shape{animation:none!important;transition:none!important}}

/* Pointer repulsion composes with the independent slow drift. */
.playful-float{translate:var(--push-x,0px) var(--push-y,0px);transition:translate 700ms cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce),(hover:none){.playful-float{translate:none!important;transition:none!important}}

.arrival{padding:35px 4.5vw 110px}.arrival-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:44px}.arrival-heading h2{font-size:clamp(48px,5.8vw,96px)}.arrival-heading .eyebrow{margin-bottom:25px}.arrival-heading>p{max-width:315px;font-size:16px;line-height:1.65;color:var(--muted)}.arrival-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start}.arrival figure{margin:0;min-width:0}.arrival figure:nth-child(2){margin-top:95px}.arrival-photo{overflow:hidden;border-radius:28px;background:var(--surface)}.arrival-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.arrival figcaption{display:flex;gap:24px;align-items:baseline;justify-content:space-between;padding:22px 3px}.arrival figcaption h3{font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.04em;max-width:220px}.arrival figcaption p{font-size:13px;line-height:1.6;color:var(--muted);max-width:210px}.arrival-footnote{font-size:11px;color:var(--muted);margin-top:26px;line-height:1.6}
@media(max-width:900px){.arrival-grid{gap:20px}.arrival figcaption{display:block}.arrival figcaption p{margin-top:10px;max-width:300px}.arrival-heading>p{max-width:270px}}
@media(max-width:650px){.arrival{padding:25px 22px 70px}.arrival-heading{display:block;margin-bottom:30px}.arrival-heading>p{margin-top:25px;max-width:330px;font-size:15px}.arrival-grid{grid-template-columns:1fr;gap:30px}.arrival figure:nth-child(2){margin-top:0}.arrival-photo{border-radius:22px}.arrival figcaption{padding:18px 0}.arrival figcaption h3{font-size:25px;max-width:none}.arrival figcaption p{font-size:14px;max-width:330px}.arrival-footnote{font-size:11px;margin-top:10px}}

/* The journey. Static layout is the default and every fallback: still left, the seven stops right as a numbered list.
   The pinned layout applies only when .journey[data-journey] is live or 3d AND motion is not reduced, so reduced motion
   gets the static layout from CSS alone, before any script runs. --gutter mirrors the .process horizontal padding in style.css.
   Pinned, the seven stations step down a diagonal: station i sits i/6 across the rail and 24% + i/6 x 36% down the stage,
   set on the li rules below, and journey.js only measures them. The object floats half its height plus a gap above its station. */
.journey{--piece-h:clamp(80px,6.4vh + 36px,96px);--gutter:4.5vw;--journey-step:30vh;margin-top:70px}
.journey-stage{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:40px 6vw;align-items:start}
.journey-index,.journey-canvas,.journey-path,.journey-rail{display:none}
.journey-still{width:min(100%,260px);height:auto;margin:0 auto}
.journey-steps{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.journey-step{display:grid;grid-template-columns:31px 1fr;column-gap:15px;position:relative}
.journey-step .step-num{width:29px;height:29px;font-size:11px;margin:1px 0 0;background:var(--canvas);grid-row:1/3}
.journey-step:not(:last-child):after{content:'';position:absolute;left:14px;top:36px;bottom:-18px;border-left:1px solid var(--line)}
.journey-step h3{font-weight:500;font-size:23px;letter-spacing:-.035em;margin-bottom:10px;max-width:440px}
.journey-step p{font-size:15px;line-height:1.75;color:var(--muted);max-width:440px}
html[data-motion=paused] .journey-stage .playful-float{animation-play-state:paused!important;translate:none!important}
@media(max-width:650px){.journey{margin-top:40px}.journey-stage{grid-template-columns:1fr;gap:30px}.journey-step h3{font-size:20px}.journey-step p{font-size:12px}}

@media(prefers-reduced-motion:no-preference){
.journey:not([data-journey=static]){display:block;height:calc(100vh + 6*var(--journey-step));height:calc(100svh + 6*var(--journey-step));margin-top:24px}
/* (0,3,0) beats .playful-host{position:relative} in playful.css; the stage spans the gutters so nothing inside it can overflow the page. */
.journey:not([data-journey=static]) .journey-stage,.journey:not([data-journey=static]) .journey-stage.playful-host{position:sticky;top:0;height:100vh;height:100svh;display:block;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter);overflow:clip}
/* Invisible probe so journey.js can read the piece height in px without repeating the clamp() in JavaScript. */
.journey:not([data-journey=static]) .journey-stage::before{content:'';position:absolute;top:0;left:0;width:0;height:var(--piece-h);visibility:hidden;pointer-events:none}
.journey:not([data-journey=static]) .journey-index{display:block;position:absolute;top:34px;left:var(--gutter);font-size:10px;letter-spacing:.08em;font-variant-numeric:tabular-nums;z-index:2}
/* The path and the canvas both cover the whole stage, so a stage pixel, a canvas pixel and a path coordinate are the same number. */
.journey:not([data-journey=static]) .journey-path{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.journey-path path{fill:none;stroke-width:1px;vector-effect:non-scaling-stroke}
.journey-path-line{stroke:var(--line)}
/* --accent-ink is repainted by hero-carousel.js as 90% #0f1218 + 10% photo hue, so the filled path, the active pill and the passed numerals
   render as ink (within 4/255 of --ink) under every photo; the :root #29223f never shows. Intentional: the step disc is an ink disc.
   pathLength="6" on the element: the ink covers s of the six segments once journey.js sets stroke-dashoffset to 6 - s. */
.journey-path-fill{stroke:var(--accent-ink);stroke-dasharray:5;stroke-dashoffset:5}
.journey:not([data-journey=static]) .journey-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:1}
.journey[data-journey="3d"] .journey-canvas{opacity:1;transition:opacity .2s}
/* Centre-anchored: the object spans .79 of the still's height, and journey.js translates the still so its centre sits on the object centre. */
.journey:not([data-journey=static]) .journey-still{position:absolute;left:0;top:0;height:calc(var(--piece-h)/.79);width:auto;max-width:none;margin:0;transform:translate(-50%,-50%);z-index:1;will-change:transform}
.journey[data-journey="3d"] .journey-still{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
/* The rail is a full-stage positioning box for the pills; it takes no pointer events itself so the stage still sees every move. */
.journey:not([data-journey=static]) .journey-rail{display:block;position:absolute;top:0;bottom:0;left:calc(var(--gutter) + var(--rail-inset,0px));right:calc(var(--gutter) + var(--rail-inset,0px));margin:0;padding:0;list-style:none;z-index:2;pointer-events:none}
/* Each li's top is its station; the translate puts the pill's centre on it (34px pills, 28px on phones). */
.journey-rail li{position:absolute;transform:translate(-50%,-17px);display:grid;justify-items:center;gap:8px;margin:0;pointer-events:auto}
.journey-rail li:nth-child(1){left:0;top:35%}.journey-rail li:nth-child(2){left:20%;top:41.2%}.journey-rail li:nth-child(3){left:40%;top:47.4%}.journey-rail li:nth-child(4){left:60%;top:53.6%}.journey-rail li:nth-child(5){left:80%;top:59.8%}.journey-rail li:nth-child(6){left:100%;top:66%}
.journey-rail li:nth-child(1):not([data-state=active]) .step-num{background:color-mix(in srgb,var(--accent) 20%,var(--canvas));border-color:color-mix(in srgb,var(--accent) 48%,var(--line))}
.journey-rail li:nth-child(2):not([data-state=active]) .step-num{background:color-mix(in srgb,var(--accent) 28%,var(--canvas));border-color:color-mix(in srgb,var(--accent) 56%,var(--line))}
.journey-rail li:nth-child(3):not([data-state=active]) .step-num{background:color-mix(in srgb,var(--accent) 36%,var(--canvas));border-color:color-mix(in srgb,var(--accent) 64%,var(--line))}
.journey-rail li:nth-child(4):not([data-state=active]) .step-num{background:color-mix(in srgb,var(--accent) 44%,var(--canvas));border-color:color-mix(in srgb,var(--accent) 72%,var(--line))}
.journey-rail li:nth-child(5):not([data-state=active]) .step-num{background:color-mix(in srgb,var(--accent) 52%,var(--canvas));border-color:color-mix(in srgb,var(--accent) 80%,var(--line))}
.journey-rail li:nth-child(6):not([data-state=active]) .step-num{background:color-mix(in srgb,var(--accent) 60%,var(--canvas));border-color:color-mix(in srgb,var(--accent) 88%,var(--line))}
.journey-rail .step-num{margin:0;position:relative;background:var(--canvas);color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.journey-rail .step-num::before{content:'';position:absolute;inset:-8px;border-radius:50%}
.journey-rail li[data-state=passed] .step-num{color:var(--accent-ink)}
.journey-rail li[data-state=active] .step-num{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--canvas)}
@media(hover:hover) and (pointer:fine){.journey-rail li:not([data-state=active]) .step-num:hover{background:var(--accent);color:var(--ink)}}
.journey-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .2s}
.journey-rail li[data-state=active] .journey-label{color:var(--accent-ink)}
/* All seven captions stay in the DOM in order; JavaScript moves opacity and transform, never a CSS transition. The block is a
   full-stage box so journey.js can set each caption's top under its own station; it must not catch pointer events or it would sit on the pills. */
.journey:not([data-journey=static]) .journey-steps{position:absolute;left:var(--gutter);right:var(--gutter);top:0;bottom:0;display:block;z-index:2;pointer-events:none}
.journey:not([data-journey=static]) .journey-step{position:absolute;top:0;left:0;width:250px;display:block;opacity:0;pointer-events:none;will-change:opacity,transform}
.journey:not([data-journey=static]) .journey-step .step-num,.journey:not([data-journey=static]) .journey-step:after{display:none}
.journey:not([data-journey=static]) .journey-step h3{max-width:250px;margin-bottom:14px;text-wrap:balance}
.journey:not([data-journey=static]) .journey-step:last-child{text-align:right}
.journey:not([data-journey=static]) .journey-step p{max-width:250px}
}
@media(prefers-reduced-motion:no-preference) and (max-width:1000px){.journey:not([data-journey=static]) .journey-steps{top:calc(66% + 48px);bottom:auto}
.journey:not([data-journey=static]) .journey-step{width:auto;right:0}
.journey:not([data-journey=static]) .journey-step h3{max-width:none}
.journey:not([data-journey=static]) .journey-step p{max-width:none}}
@media(prefers-reduced-motion:no-preference) and (max-width:820px){.journey-label{display:none}}
@media(prefers-reduced-motion:no-preference) and (max-width:650px){
.journey{--gutter:22px;--rail-inset:24px;--piece-h:clamp(72px,8vh + 20px,90px)}
.journey-rail li{transform:translate(-50%,-14px)}
.journey:not([data-journey=static]) .journey-index{top:22px;font-size:8px}
.journey:not([data-journey=static]) .journey-step h3{font-size:20px}
.journey:not([data-journey=static]) .journey-step p{font-size:12px}
}
/* The section heading stays in view while the stage is pinned (founder, 2026-10-16); it fades in once the stage locks, so the real h2 and the copy are never on screen together. Its second line fills with ink and the
   accent underline as the object moves, one sixth per step: --journey-fill is set by journey.js from the object's progress. */
.journey-heading{display:none}
.journey:not([data-journey=static]) .journey-heading{display:block;opacity:0;transition:opacity .35s ease;position:absolute;top:30px;right:var(--gutter);z-index:2;text-align:right;pointer-events:none;isolation:isolate}
.journey-heading p{font-size:clamp(30px,3vw,52px);font-weight:500;line-height:1.06;letter-spacing:-.05em}
.journey-heading span{--fill:calc(var(--journey-fill,.1667)*100%);position:relative;display:inline-block;color:transparent;background:linear-gradient(90deg,var(--ink) var(--fill),color-mix(in srgb,var(--ink) 30%,transparent) var(--fill));-webkit-background-clip:text;background-clip:text}
.journey-heading span:after{content:'';position:absolute;left:0;bottom:3px;height:8px;width:var(--fill);background:var(--accent);z-index:-1;transition:background .7s}
@media(max-width:650px){.journey:not([data-journey=static]) .journey-heading{top:44px;left:var(--gutter);right:auto;text-align:left}.journey-heading p{font-size:24px}.journey-heading span:after{height:6px;bottom:2px}}
.journey.is-pinned .journey-heading{opacity:1}
/* Tablets keep the original piece: their captions sit below the line, so the smaller desktop piece (2026-10-16) buys nothing there. */
@media(min-width:651px) and (max-width:1000px){.journey{--piece-h:clamp(96px,8vh + 48px,120px)}}