/* style.css */
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#fff1d7;background:#151410;font-synthesis:none}*{box-sizing:border-box}body{margin:0;padding:14px}.hero{height:calc(100svh - 28px);min-height:560px;position:relative;border-radius:18px;isolation:isolate;overflow:hidden;background:#a94017}video,.shade,.grid{position:absolute;inset:0;width:100%;height:100%}video{object-fit:cover;object-position:center 45%;z-index:-3}.shade{z-index:-2;background:linear-gradient(180deg,#130d0844,transparent 35%,#130d0899)}.grid{z-index:-1;border:1px solid #fff1d718;inset:88px 36px 120px;width:auto;height:auto}header{position:absolute;inset:25px 36px auto;display:flex;align-items:center;gap:48px}.monogram{font-size:39px;font-weight:700;letter-spacing:-5px;color:inherit;text-decoration:none}.monogram span{font-size:13px;vertical-align:top;letter-spacing:0;margin-left:9px}.edition,.study,.label,.eyebrow{font-family:monospace;font-size:10px;letter-spacing:1px;line-height:1.6}.study{margin-left:auto}.eyebrow{position:absolute;top:112px;left:36px;right:36px;display:flex;justify-content:space-between}.marquee{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);overflow:hidden}.track{display:flex;width:max-content;animation:travel 38s linear infinite;animation-play-state:paused}.phrase{flex-shrink:0;white-space:nowrap;font-size:clamp(100px,18.8vw,330px);font-weight:400;letter-spacing:-.075em;line-height:1.18;padding-right:.22em;display:flex;align-items:center;gap:.22em}.phrase i{font-style:normal;font-size:.62em;letter-spacing:0}.letter{display:inline-block}.word{white-space:pre}.running .track{animation-play-state:running;animation-delay:.7s}.enhanced .letter{opacity:0;transform:translateY(105%) rotate(4deg);filter:blur(5px)}.revealed .letter{animation:appear .85s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--n)*.018s)}.paused .track,.paused .letter{animation-play-state:paused!important}footer{position:absolute;bottom:30px;left:36px;right:36px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.label{display:block;opacity:.65;margin-bottom:12px}.position p{font-size:clamp(22px,2.7vw,40px);letter-spacing:-1.4px;line-height:1.08;margin:0}.signature{font-size:12px;line-height:1.6}.controls{display:flex;gap:8px}button{border:1px solid #fff1d74d;border-radius:30px;padding:12px 16px;color:inherit;background:#20150c24;backdrop-filter:blur(8px);font:11px Arial;cursor:pointer}button:hover{background:#fff1d7;color:#29170c}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:4px}.curtain{display:none;position:absolute;inset:0;background:#251b14;align-items:center;justify-content:center;z-index:10;font:11px monospace;letter-spacing:2px;pointer-events:none}.curtain-count{display:block;opacity:.4;margin-top:8px;font-size:9px}.enhanced .curtain{display:flex;animation:curtain .95s cubic-bezier(.76,0,.24,1) .08s both}.static .letter{opacity:1;transform:none;filter:none;animation:none}.static .track{animation:none}.static .curtain{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes travel{to{transform:translateX(-50%)}}@keyframes appear{to{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}}@keyframes curtain{to{transform:translateY(-101%)}}@media(max-width:650px){body{padding:8px}.hero{height:calc(100svh - 16px);min-height:560px;border-radius:12px}header{inset:20px 20px auto;gap:25px}.edition{font-size:8px}.study{display:none}.eyebrow{left:20px;right:20px;top:103px;font-size:8px}.eyebrow span:last-child{max-width:130px;text-align:right}.grid{inset:78px 20px 160px}.phrase{font-size:30vw}.marquee{top:49%}video{object-position:50% center}footer{left:20px;right:20px;bottom:22px;flex-wrap:wrap;gap:24px}.position{width:100%}.position p{font-size:30px}.signature{display:none}.controls{width:100%;justify-content:space-between}button{font-size:10px;padding:11px 14px}.label{font-size:8px;margin-bottom:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.enhanced .curtain{display:none}.enhanced .letter{opacity:1;transform:none;filter:none}.marquee .phrase{font-size:clamp(36px,8vw,130px)}.track{width:100%;justify-content:center}.phrase:nth-child(2),.phrase i{display:none}.phrase{white-space:normal;flex-wrap:wrap;justify-content:center;padding:20px;letter-spacing:-.05em}.controls{display:none}}


@media(prefers-reduced-motion:reduce){.enhanced .curtain{display:none}}

@font-face{font-family:Poppins;src:url('fonts/Poppins-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
.phrase{font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:700;letter-spacing:-.055em}
.phrase i{font-size:.45em}

/* Footer content revision: spacing belongs to the divider itself. */
.grid{border-bottom:0;bottom:0}
footer{border-top:1px solid #fff1d726;padding-top:24px}
.location{text-align:right}
.location p{margin:0;font-size:16px;line-height:1.4;letter-spacing:-.3px}
@media(max-width:650px){footer{gap:22px;padding-top:24px}.location{text-align:left}.location p{font-size:14px}}

/* Shared page margins, with content breathing room inside the rails. */
.hero{--rail:36px;--rail-padding:16px}
.grid{inset:0 var(--rail);border-top:0;border-bottom:0}
.grid::before{content:"";position:absolute;top:88px;left:0;right:0;border-top:1px solid #fff1d718}
header{left:calc(var(--rail) + var(--rail-padding));right:calc(var(--rail) + var(--rail-padding))}
footer{left:var(--rail);right:var(--rail);padding-left:var(--rail-padding);padding-right:var(--rail-padding)}
@media(max-width:650px){.hero{--rail:20px}.grid::before{top:78px}header{gap:20px}}

/* Center the content rails within a maximum 1440px canvas. */
.hero{--content-edge:max(var(--rail), calc((100% - 1440px) / 2))}
.grid{left:var(--content-edge);right:var(--content-edge)}
header{left:calc(var(--content-edge) + var(--rail-padding));right:calc(var(--content-edge) + var(--rail-padding))}
footer{left:var(--content-edge);right:var(--content-edge)}
.marquee{left:var(--content-edge);width:calc(100% - var(--content-edge) - var(--content-edge))}

/* JMR wordmark centered in the header's ruled band. */
header{top:0;height:88px;align-items:center}
.monogram{font-family:Poppins,Arial,sans-serif;font-size:32px;font-weight:700;letter-spacing:-2px;line-height:1;display:inline-flex;align-items:center;flex-shrink:0}
@media(max-width:650px){header{top:0;height:78px}.monogram{font-size:28px;letter-spacing:-1.5px}}
.monogram .reveal-word{font-size:inherit;letter-spacing:inherit;line-height:inherit;margin-left:0;vertical-align:baseline}

/* Release temporary reveal layers before the continuous marquee travels. */
.hero.enhanced.revealed .reveal-word.reveal-complete{opacity:1;filter:none;transform:none;animation:none;will-change:auto}

.work-section{--rail:36px;--rail-padding:16px;--content-edge:max(var(--rail), calc((100% - 1440px) / 2));color:#f9eddb;position:relative;margin-top:0}
.work-rails{margin:0 var(--content-edge);border-inline:1px solid #fff1d718;padding:110px 16px 100px;position:relative}

.work-heading{position:relative}.section-index{font:10px monospace;letter-spacing:1px;display:block;margin-bottom:34px;color:#c3ac93}
.work-heading h2{font-family:Poppins,Arial,sans-serif;font-weight:700;font-size:clamp(40px,6.5vw,94px);line-height:1.1;letter-spacing:-.055em;margin:0;max-width:1050px}
.work-intro{font-size:16px;line-height:1.6;max-width:370px;margin:34px 0 0 auto;color:#c9bdad}
@media(max-width:650px){.work-section{--rail:20px}.work-rails{padding-top:72px;padding-bottom:64px}.work-intro{margin-left:0;font-size:14px}.work-heading h2{font-size:clamp(32px,8.5vw,52px)}}

/* Full-bleed opening; the existing frame appears with the first scroll. */
.hero{--hero-gutter:14px;--hero-radius:18px;margin:calc(-1 * var(--hero-gutter)) calc(-1 * var(--hero-gutter)) 0;height:100svh;border-radius:0;clip-path:inset(calc(var(--hero-gutter) * var(--frame-progress,0)) round calc(var(--hero-radius) * var(--frame-progress,0)));transition:none}
@media(max-width:650px){.hero{--hero-gutter:8px;--hero-radius:12px}}
@media(prefers-reduced-motion:reduce){.hero{transition:none}}

/* Shared arrow proportions for all text links. */
a.icon-link{display:inline-flex;align-items:center;gap:.6em}.link-arrow{display:block;width:1em;height:1em;flex:0 0 1em;vertical-align:middle}

/* components/split-curtain.css */
/* Split loader: upper and lower panels leave before media playback. */
.enhanced .curtain{display:block;animation:none;background:transparent}
.curtain-panel{position:absolute;left:0;width:100%;height:calc(50% + 1px);background:rgb(61 27 12 / 50%);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px)}
.curtain-top{top:0}.curtain-bottom{bottom:0}
.loader{position:absolute;top:50%;left:50%;width:200px;height:2px;transform:translate(-50%,-50%);background:#dedbd3;z-index:1}
.loader-fill{height:100%;background:#2c2923;transform:scaleX(0);transform-origin:left}
.enhanced .loader-fill{animation:loadLine .85s cubic-bezier(.22,.61,.36,1) .12s both}
.enhanced .loader{animation:hideLoader .2s ease .98s both}
.enhanced .curtain-top{animation:splitTop 1.1s cubic-bezier(.76,0,.24,1) 1.18s both}
.enhanced .curtain-bottom{animation:splitBottom 1.1s cubic-bezier(.76,0,.24,1) 1.18s both}
@keyframes loadLine{to{transform:scaleX(1)}}
@keyframes hideLoader{to{opacity:0}}
@keyframes splitTop{to{transform:translateY(-101%)}}
@keyframes splitBottom{to{transform:translateY(101%)}}
.static .curtain{display:none}
@media(prefers-reduced-motion:reduce){.enhanced .curtain{display:none}}

/* components/reveal.css */
/* Loro-inspired word reveal: short rise and blur resolving into focus. */
.reveal-word{display:inline-block}
.enhanced .reveal-word{opacity:0;transform:translateY(18px);filter:blur(6px)}
.revealed .reveal-word{animation:loroReveal .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--n)*.055s)}
.enhanced .controls button{opacity:0;transform:translateY(18px);filter:blur(6px)}
.revealed .controls button{animation:loroReveal .8s cubic-bezier(.22,1,.36,1) .25s both}
.revealed .controls button:nth-child(2){animation-delay:.35s}
.enhanced .controls button:focus-visible{opacity:1;transform:none;filter:none;animation:none}
.paused .reveal-word{animation-play-state:paused!important}
.static .reveal-word,.static .controls button{opacity:1;transform:none;filter:none;animation:none}
@keyframes loroReveal{to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.enhanced .reveal-word,.enhanced .controls button{opacity:1;transform:none;filter:none;animation:none}}


.enhanced.revealed .reveal-word.reveal-complete{opacity:1;filter:none;transform:none;animation:none;will-change:auto}

.intro-reveal:not(.revealed):not(.static) .reveal-word{animation:none;opacity:0;transform:translateY(18px);filter:blur(6px)}
@media(prefers-reduced-motion:reduce){.intro-reveal .reveal-word{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}}

.intro-word{display:inline-block;white-space:nowrap}
.intro-reveal.revealed .reveal-word{animation-duration:.85s;animation-delay:calc(var(--n)*.09s)}

/* components/hello.css */
.scroll-intro{height:420svh;position:relative;margin-top:0;background:#151410}.intro-stage{height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate}.intro-title{height:100%;display:flex;flex-direction:column;justify-content:center;max-width:1440px;margin:auto;padding:64px 36px;will-change:transform}.intro-title h2{font:700 clamp(58px,10.5vw,160px)/1.02 Poppins,Arial,sans-serif;letter-spacing:-.065em;margin:0}.intro-title em{font-style:normal;color:#c57847}.intro-title a{color:#dfccb5;text-decoration:none;font:12px monospace;margin-top:36px;width:fit-content}.intro-title a span{margin-left:24px}.intro-overlay{position:absolute;inset:0;background:#020405;transform:translateY(105%) scale(.86);overflow:hidden;will-change:transform}.intro-overlay video{z-index:0;object-fit:cover;position:absolute;width:100%;height:100%;inset:0}.scroll-caption{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);font:10px monospace;letter-spacing:2px;color:#fff9}.intro-end{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#151410;opacity:0;font:700 clamp(90px,20vw,290px)/1 Poppins;letter-spacing:-.075em}.intro-end span{color:#c57847}.hello-section{--edge:max(36px,calc((100% - 1440px)/2));background:#151410}.hello-rails{margin:0 var(--edge);border-inline:1px solid #fff1d718;padding:70px 16px 90px}.hello-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px}.hello-note{font:12px monospace;color:#a69986}.audience-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:60px}.audience-tabs button{border-radius:4px;padding:14px 18px;font-size:12px;background:transparent;transition:color .2s,background .2s,border-color .2s}.audience-tabs button[aria-selected=true]{background:#f7e9d2;color:#2c1b11;border-color:#f7e9d2}.audience-tabs button:hover{border-color:#c57847}.hello-panel{display:grid;grid-template-columns:1fr 1.6fr;gap:8%;min-height:400px;align-items:center;outline-offset:10px}.hello-copy h2{font:700 clamp(36px,4.6vw,66px)/1.12 Poppins,Arial;letter-spacing:-.05em;margin:0 0 26px}.hello-copy .section-index{margin-bottom:20px;color:#c57847;text-transform:uppercase}.hello-copy p{font-size:clamp(17px,1.6vw,23px);line-height:1.55;max-width:750px}.hello-copy .hello-detail{font-size:15px;line-height:1.7;color:#b9ae9e}.hello-orbit{aspect-ratio:1;border:1px solid #c5784750;border-radius:50%;position:relative;display:grid;place-items:center;max-width:360px;margin:20px;box-shadow:inset 0 0 80px #b7531215}.hello-orbit::before,.hello-orbit::after{content:"";position:absolute;inset:13%;border:1px solid #c5784730;border-radius:50%}.hello-orbit::after{inset:28%}.hello-orbit span{font:700 clamp(38px,6vw,80px) Poppins;letter-spacing:-5px}.hello-orbit i{position:absolute;inset:-1px;border-radius:50%;animation:orbit 24s linear infinite}.hello-orbit i::after{content:"";position:absolute;top:50%;left:-4px;width:9px;height:9px;background:#c57847;border-radius:50%}.hello-orbit b{position:absolute;bottom:-34px;font:8px monospace;letter-spacing:1.5px;color:#b9ae9e;white-space:nowrap}@keyframes orbit{to{transform:rotate(360deg)}}.intro-static{height:auto}.intro-static .intro-stage{height:75svh;position:relative}.intro-static .intro-overlay{display:none}.intro-static .intro-title{transform:none!important}
@media(max-width:650px){.intro-title{padding:40px 36px}.intro-title h2{font-size:clamp(44px,10.8vw,70px)}.scroll-intro{height:340svh}.hello-section{--edge:20px}.hello-rails{padding-top:45px}.hello-top{display:block}.hello-note{display:block;margin-bottom:24px}.hello-top .section-index{margin-bottom:15px}.audience-tabs{gap:6px;margin-bottom:40px}.audience-tabs button{padding:11px 12px;font-size:11px}.hello-panel{grid-template-columns:1fr;gap:40px}.hello-orbit{display:none}.hello-copy h2{font-size:36px}.hello-copy p{font-size:18px}.intro-static{height:auto}}
@media(prefers-reduced-motion:reduce){.scroll-intro{height:auto}.intro-stage{position:relative;height:75svh}.intro-overlay{display:none}.hello-orbit i{animation:none}}

/* Full-bleed rise: no scaling card, title stays behind the video plane. */
.scroll-intro{margin-inline:-14px;height:400svh}
.intro-title{max-width:none;padding:40px 2.5vw;justify-content:center}
.intro-title h2{font-size:clamp(64px,15.4vw,310px);line-height:.94;letter-spacing:-.07em}
.intro-title h2 em{color:inherit}
.intro-title .section-index{margin-bottom:36px}
.intro-overlay{transform:translateY(100%);border-radius:0}
.intro-tint{position:absolute;inset:0;background:#151410;opacity:.72;pointer-events:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
@media(max-width:650px){.scroll-intro{margin-inline:-8px;height:340svh}.intro-title{padding-inline:5vw}.intro-title h2{font-size:14.8vw}.intro-static{height:auto}}
@media(prefers-reduced-motion:reduce){.scroll-intro{height:auto}}

/* Quiet two-column introduction emerging over the pinned Hello. */
.hello-section{height:190svh;--about-reveal:1;--hello-opacity:0;--about-y:0px}
.hello-sticky{position:sticky;top:0;min-height:100svh;display:flex;align-items:center}
.hello-parallax{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 clamp(100px,21vw,300px)/1 Poppins;letter-spacing:-.075em;opacity:var(--hello-opacity);pointer-events:none}
.hello-parallax span{color:#c57847}
.hello-rails{width:calc(100% - var(--edge) - var(--edge));margin:0 var(--edge);padding:64px 16px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:7%;border:0;opacity:var(--about-reveal);transform:translateY(var(--about-y))}
.hello-sidebar h2{font:400 clamp(38px,4.2vw,60px)/1.1 Arial,sans-serif;letter-spacing:-2px;margin:0 0 35px}
.audience-tabs{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:0}
.audience-tabs button,.audience-tabs button[aria-selected=true]{background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;color:#837d72;padding:10px 0;font:16px/1.4 Arial;text-align:left;display:flex;align-items:center;gap:12px}
.audience-tabs button::before{content:'';height:1px;width:14px;background:currentColor;transition:width .25s}
.audience-tabs button[aria-selected=true]{color:#fff1d7}.audience-tabs button[aria-selected=true]::before{width:30px}.audience-tabs button:hover{color:#fff1d7}
.hello-panel{display:block;min-height:440px}
.hello-copy h2{font:400 clamp(27px,3.1vw,45px)/1.25 Arial,sans-serif;letter-spacing:-1.5px;margin:0 0 25px}
.hello-copy [data-copy=label]{display:none}
.hello-copy p{font:400 clamp(24px,3vw,43px)/1.4 Arial,sans-serif;letter-spacing:-1px;margin:0 0 26px;color:#eee2cf;max-width:900px}
.hello-copy .hello-detail{font:400 clamp(16px,1.5vw,20px)/1.6 Arial,sans-serif;letter-spacing:0;color:#a99f90}
@media(max-width:800px){.hello-rails{grid-template-columns:170px minmax(0,1fr);gap:25px}.audience-tabs button{font-size:13px}}
@media(max-width:650px){.hello-section{height:210svh}.hello-sticky{min-height:100svh}.hello-rails{grid-template-columns:1fr;padding:32px 16px;gap:24px}.hello-sidebar h2{font-size:36px;margin-bottom:16px}.audience-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.audience-tabs button{font-size:12px;padding:7px 0;gap:6px}.hello-panel{min-height:0}.hello-copy h2{font-size:25px;margin-bottom:16px}.hello-copy p{font-size:21px;line-height:1.4}.hello-copy .hello-detail{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hello-section{height:auto}.hello-sticky{position:relative}.hello-parallax{display:none}.hello-rails{opacity:1;transform:none}}
/* One sticky stage owns video, a single Hello and About; no boundary handoff. */
.scroll-intro{height:360svh}
.intro-stage>.hello-section{position:absolute;inset:0;height:100%;background:#151410;opacity:var(--about-reveal,0);z-index:3}
.intro-stage .hello-sticky{position:relative;min-height:100%;height:100%;overflow-y:auto}
.intro-stage .hello-rails{opacity:1;transform:translateY(var(--about-y,35px))}
.intro-static{height:auto}
.intro-static .intro-stage{height:auto;overflow:visible}
.intro-static .intro-title{min-height:65svh}
.intro-static .hello-section{position:relative;height:auto;opacity:1}
.intro-static .hello-sticky{height:auto;min-height:0}
.intro-static .hello-rails{transform:none}
@media(max-width:650px){.scroll-intro{height:340svh}.intro-static{height:auto}}
@media(prefers-reduced-motion:reduce){.scroll-intro{height:auto}.intro-stage{height:auto;overflow:visible}.intro-stage>.hello-section{position:relative;height:auto;opacity:1}.intro-stage .hello-rails{transform:none}}

/* Editorial card: warm glass, fine dotted texture and a quiet copper accent. */
.hello-panel{position:relative;padding:42px;border:1px solid #cda57d35;border-radius:24px;background:radial-gradient(ellipse at 100% 0%,#a5582920,transparent 60%),radial-gradient(#e8c9a515 .8px,transparent .8px),#211e19;background-size:auto,20px 20px,auto;box-shadow:0 20px 60px #0002;overflow:hidden;min-height:440px}
.hello-panel::before{content:'';position:absolute;top:0;left:42px;width:60px;height:2px;background:#c57847}
.hello-copy{position:relative}
.hello-copy h2{font-size:clamp(26px,2.6vw,40px)}
.hello-copy p{font-size:clamp(23px,2.6vw,38px)}
@media(max-width:650px){.hello-panel{padding:24px 20px;border-radius:18px;min-height:0}.hello-panel::before{left:20px}.hello-copy h2{font-size:24px}.hello-copy p{font-size:20px}.hello-copy .hello-detail{font-size:14px}}

/* Shift the desk-video subject right within the portrait crop. */
@media(max-width:650px){.intro-overlay video{object-position:45% 45%}}

/* Reusable scroll cue: Poppins, cream and copper. */
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;bottom:32px;color:#fff1d7a6;letter-spacing:normal}
.scroll-cue__label{font:700 10px/1.4 Poppins,Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;padding-left:.3em}
.scroll-cue__track{position:relative;display:block;height:40px;width:1px;overflow:hidden;background:#fff1d72b}
.scroll-cue__stroke{position:absolute;top:0;left:0;width:1px;height:16px;background:#c57847;animation:scroll-cue-travel 1.8s cubic-bezier(.76,0,.24,1) infinite}
@keyframes scroll-cue-travel{from{transform:translateY(-100%)}to{transform:translateY(250%)}}
@media(prefers-reduced-motion:reduce){.scroll-cue__stroke{animation:none;transform:translateY(12px)}}

.hello-code{margin:24px 0 0;max-width:100%;font-family:inherit;font-size:clamp(23px,2.6vw,38px);line-height:1.55;color:inherit;white-space:pre-wrap;overflow-wrap:anywhere;letter-spacing:inherit}
.hello-code code{font:inherit;color:inherit}
.hello-code[hidden],.hello-copy [hidden]{display:none}
@media(max-width:650px){.hello-code{font-size:20px}}

/* Syntax colour only: preserve the card's typography and sizing. */
.hello-code .syntax-keyword{color:#c8a4e8}
.hello-code .syntax-variable{color:#a9cde0}
.hello-code .syntax-string{color:#d9bd8a}
.hello-code .syntax-punctuation{color:#e4dfd5}

/* A small design canvas, reserved for the Designer perspective. */
.designer-chrome,.designer-tools{display:none}
.hello-panel.is-designer{padding-top:100px;padding-bottom:104px}
.is-designer .designer-chrome{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid #fff1d718;background:#292723;font:500 11px/1.4 Poppins,Arial,sans-serif;color:#d8cfbf}
.designer-mode{display:flex;gap:16px;color:#fff1d7}.designer-mode span{color:#a49e94}
.is-designer .hello-copy{outline:none}
.is-designer .hello-copy::before{content:'About / Product thinking';position:absolute;top:-36px;left:-15px;color:#9bcdff;font:500 10px/1.4 Poppins,Arial,sans-serif;letter-spacing:.02em}

.is-designer .designer-tools{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;border:1px solid #ffffff16;border-radius:12px;background:#30302e;box-shadow:0 6px 20px #0003}
.designer-tool{width:34px;height:34px;display:grid;place-items:center;font:500 23px/1 Arial,sans-serif;color:#eee8dd;border-radius:7px}
.designer-tool.active{background:#168bee;color:white}.designer-tool svg{width:23px;height:23px}.designer-code-icon{font-size:14px;border-left:1px solid #ffffff25;margin-left:5px;padding-left:5px}
@media(max-width:650px){.hello-panel.is-designer{padding:90px 28px 90px}.is-designer .designer-chrome{padding:16px;font-size:9px}.designer-mode{gap:10px}.is-designer .designer-tools{bottom:18px}.designer-tool{width:29px;height:29px}}

.designer-selection{display:none}
.is-designer .designer-selection{display:block;position:absolute;inset:-14px;border:1px solid #79baff;pointer-events:none}
.designer-selection i{position:absolute;width:7px;height:7px;border:1px solid #79baff;background:#fff;transform:translate(-50%,-50%)}
.designer-selection i:nth-child(1){left:0;top:0}.designer-selection i:nth-child(2){left:100%;top:0}.designer-selection i:nth-child(3){left:0;top:100%}.designer-selection i:nth-child(4){left:100%;top:100%}
.designer-tool svg{width:20px;height:20px;stroke-width:1.65}
.designer-file{display:flex;align-items:center;gap:10px}
.designer-figma{display:inline-flex;color:#fff}.designer-figma svg{width:16px;height:24px}

/* Engineers: compact editor with an accessible, decorative line gutter. */
.editor-breadcrumb{display:none}
.hello-panel.is-code{padding:0;min-height:440px}
.is-code .hello-copy{width:100%;align-self:start}
.is-code .hello-copy h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.is-code .editor-breadcrumb{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid #ffffff12;color:#999e96;font:400 13px/1.5 Poppins,Arial,sans-serif;white-space:nowrap;overflow-x:auto}
.editor-breadcrumb strong{font-weight:500;color:#eeeae1}.editor-breadcrumb b{font:700 10px/1 monospace;color:#e2c76f;margin-right:6px}
.is-code .hello-code{margin:0;padding:26px 24px 36px 0;font:400 16px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0;white-space:normal;overflow-x:auto;overflow-wrap:normal}
.is-code .hello-code code{display:block;min-width:max-content}
.editor-line{display:flex;white-space:pre}
.editor-line-number{width:58px;flex-shrink:0;padding-right:20px;text-align:right;color:#777e72;user-select:none}
.editor-line-content{display:block;white-space:pre}
@media(max-width:650px){.hello-panel.is-code{min-height:330px}.is-code .editor-breadcrumb{padding:16px;gap:8px;font-size:11px}.is-code .hello-code{font-size:12px;padding-top:20px}.editor-line-number{width:36px;padding-right:12px}}

/* Keep the shared warm dotted card; only the number gutter is tinted. */
.is-code .editor-body{display:flex;align-items:stretch;overflow-x:auto;font:400 clamp(19px,1.8vw,25px)/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.editor-body[hidden]{display:none}
.editor-gutter{flex:0 0 64px;padding:28px 0 36px;background:#fff1d708;border-right:1px solid #fff1d71c;position:sticky;left:0;z-index:1;user-select:none}
.editor-gutter .editor-line-number{display:block;width:auto;padding:0 18px;text-align:right;color:#b4a995;line-height:1.8}
.is-code .hello-code{font:inherit;padding:28px 24px 36px;margin:0;overflow:visible;flex:1;min-width:max-content}
@media(max-width:650px){.is-code .editor-body{font-size:16px}.editor-gutter{flex-basis:42px;padding-top:22px}.editor-gutter .editor-line-number{padding-inline:10px}.is-code .hello-code{padding:22px 16px 36px}}

/* Fill the card down to its rounded bottom, including the number gutter. */
.hello-panel.is-code{display:flex;flex-direction:column}
.is-code .hello-copy{display:flex;flex-direction:column;align-self:stretch;flex:1;min-width:0}
.is-code .editor-breadcrumb{flex-shrink:0}
.is-code .editor-body{flex:1}
.is-code.revealed .editor-line-content{animation:editor-line-reveal .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--line-index,0)*80ms)}
@keyframes editor-line-reveal{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.is-code.revealed .editor-line-content{animation:none}}

.is-code .editor-content{flex:1;min-width:0;display:flex;flex-direction:column}
.is-code .editor-content .hello-code{flex:none;min-width:0;padding-bottom:20px;overflow-x:auto}
.is-code .engineer-context{font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.7;color:#b9ae9e;margin:0;padding:0 24px 36px;max-width:750px}
@media(max-width:650px){.is-code .engineer-context{font-size:14px;padding-inline:16px}}

/* components/what-i-do.css */
.services{position:relative;height:480svh;margin-inline:-14px;background:#171613}
.services-stage{position:sticky;top:0;height:100svh;overflow:clip;isolation:isolate;color:#fff1d7}
.services-label{position:absolute;z-index:8;top:100px;left:max(36px,calc((100vw - 1440px)/2));font:11px monospace;letter-spacing:.15em;margin:0}
.service-scene{position:absolute;inset:0;overflow:hidden;transform:translateY(100%);transition:transform 1.15s cubic-bezier(.602,.001,.175,1);--warm-light:#E68447;--warm-dark:#621606;background:radial-gradient(ellipse at 50% 32%,var(--warm-light) 0%,var(--warm-dark) 100%)}
.service-scene:first-of-type,.service-scene.is-current,.service-scene.is-past{transform:translateY(0)}
.service-scene::after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(transparent 50%,#100e0b80);z-index:1}
.service-artwork{position:absolute;top:10%;left:50%;width:min(65vw,950px);height:69%;transform:translate(-50%,var(--lift,0));transition:transform .3s linear;perspective:1000px}
.service-caption{position:absolute;left:max(36px,calc((100vw - 1440px)/2));right:36px;bottom:32%;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:32px}.service-caption h3{font:500 clamp(24px,2.2vw,34px)/1.2 Poppins,Arial;margin:0;letter-spacing:-.045em}.service-caption p{font:15px/1.6 Arial;max-width:440px;margin:0;color:#f6e8d8d9}
.service-ticker{position:absolute;left:0;bottom:9%;z-index:3;width:max-content;white-space:nowrap;font:700 clamp(90px,15vw,240px)/1.1 Poppins,Arial;letter-spacing:-.065em;color:#fff1d7;-webkit-text-stroke:0;display:flex;animation:service-travel 140s linear infinite;animation-play-state:paused;pointer-events:none}
.service-nav{position:absolute;z-index:10;bottom:28px;left:max(36px,calc((100vw - 1440px)/2));right:max(36px,calc((100vw - 1440px)/2));display:flex;gap:20px}.service-nav button{flex:1;border:0;border-radius:0;padding:12px 0;background:none;backdrop-filter:none;color:#fff1d7a6;text-align:left;font:10px monospace;cursor:pointer;position:relative}.service-nav button::before,.service-nav button::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:#fff3}.service-nav button::after{background:#fff1d7;transform-origin:left;transform:scaleX(var(--fill,0))}.service-nav button[aria-current=true]{color:#fff1d7}.service-nav button:focus-visible{outline:1px solid #fff1d7;outline-offset:4px}
@media(max-width:700px){.services{margin-inline:-8px;height:420svh}.services-label{top:88px;left:20px}.service-artwork{width:100vw;height:58%;top:14%}.service-object{padding:7%;inset:4% 8%}.service-caption{left:20px;right:20px;bottom:29%;display:block}.service-caption p{font-size:13px;max-width:420px;margin-top:10px}.service-ticker{font-size:24vw;bottom:15%}.service-nav{left:20px;right:20px;gap:12px}.service-nav button{font-size:8px;line-height:1.5}.mock-interface div{height:85px}.mock-interface div:nth-child(2){height:65px}.system-grid{gap:8px}.service-object strong{font-size:30px}}
.services-static{height:auto}.services-static .services-stage{height:auto;position:relative}.services-static .services-label{display:none}.services-static .service-scene{position:relative;height:90svh;transform:none;transition:none}.services-static .service-nav{display:none}.services-static .service-artwork{transform:translateX(-50%)}.services-static .service-ticker{transform:none}
@media(prefers-reduced-motion:reduce){.service-scene,.service-artwork{transition:none}}

.service-ticker>span{display:block;flex:none;white-space:pre}
.service-scene.is-current .service-ticker{animation-play-state:running}
@keyframes service-travel{to{transform:translateX(-50%)}}
.services-static .service-ticker{animation:none}
@media(prefers-reduced-motion:reduce){.service-ticker{animation:none}}


/* Warm variations share the same radial lighting as Discovery. */
.service-scene:nth-of-type(2){--warm-light:#DAA05B;--warm-dark:#613018}
.service-scene:nth-of-type(3){--warm-light:#D97658;--warm-dark:#621D16}
.service-scene:nth-of-type(4){--warm-light:#C58A60;--warm-dark:#54291B}

/* Reusable photograph + independently replaceable HTML/image/video screen. */
.service-artwork.device-mockup{top:-4svh;left:48.3%;width:auto;height:132svh;aspect-ratio:2/3;z-index:2;perspective:none}
.device-mockup>img{display:block;width:100%;height:100%;object-fit:contain}
.device-screen{position:absolute;left:34.2%;top:7.65%;width:37%;height:51.2%;border-radius:16% / 8%;overflow:hidden;background:#12100e;color:#fff1d7;display:flex;flex-direction:column;justify-content:space-between;padding:6% 3%;box-sizing:border-box}
.device-screen span,.device-screen i{font:8px/1.5 monospace;letter-spacing:.08em;font-style:normal;color:#d7b696}
.device-screen b{font:700 clamp(15px,2vw,30px)/1.18 Poppins,Arial;letter-spacing:-.04em}
.device-screen>img,.device-screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.service-caption h3{max-width:23%}.service-caption p{max-width:24%;font-size:14px}
@media(max-width:700px){.service-artwork.device-mockup{height:72svh;top:-3%;left:48.3%}.service-caption{bottom:24%}.service-caption h3,.service-caption p{max-width:100%}.service-caption p{font-size:13px}.device-screen b{font-size:17px}.device-screen span,.device-screen i{font-size:6px}.service-ticker{bottom:11%}}
@media(max-width:700px){.service-artwork.device-mockup{height:62svh;top:3%}.device-mockup>img{mask-image:linear-gradient(#000 56%,transparent 78%);-webkit-mask-image:linear-gradient(#000 56%,transparent 78%)}}
@media(max-width:700px){.service-ticker{font-size:clamp(72px,24vw,100px)}}

/* A single stationary device bridges the moving service scenes. */
.services:not(.services-static) .service-scene{transform:none;transition:none;background:none;overflow:visible;pointer-events:none}
.services:not(.services-static) .service-scene::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 32%,var(--warm-light) 0%,var(--warm-dark) 100%);z-index:0}
.services:not(.services-static) .service-scene::before,
.services:not(.services-static) .service-scene::after,
.services:not(.services-static) .service-content{translate:0 100%;transition:translate 1.15s cubic-bezier(.602,.001,.175,1)}
.services:not(.services-static) .service-scene:is(:first-of-type,.is-current,.is-past)::before,
.services:not(.services-static) .service-scene:is(:first-of-type,.is-current,.is-past)::after,
.services:not(.services-static) .service-scene:is(:first-of-type,.is-current,.is-past) .service-content{translate:0 0}
.service-content{position:absolute;inset:0;z-index:3}
.services:not(.services-static) .service-scene>.device-mockup{display:none}
.service-artwork.device-shared{transform:translateX(-50%);transition:none;pointer-events:none}
.device-shared .device-screen{opacity:1;transition:none;clip-path:inset(100% 0 0 0)}
.device-shared .device-screen:first-of-type{clip-path:inset(0)}
.device-shared .device-screen.is-active{opacity:1}
.services-static .device-shared{display:none}
@media(prefers-reduced-motion:reduce){.service-content,.device-shared .device-screen{transition:none}}
.services:not(.services-static) .service-content{opacity:0;transition:translate 1.15s cubic-bezier(.602,.001,.175,1),opacity .45s ease}
.services:not(.services-static) .service-scene.is-current .service-content{opacity:1}
/* Research archive: responsive interface inside the stationary phone. */
.device-screen.device-screen-research{padding:0;container-type:inline-size;background:#eee9df;color:#292821}
.research-deck{position:absolute;inset:0}
.research-page{position:absolute;inset:0;padding:10% 7% 6%;display:flex;flex-direction:column;gap:3cqw;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .65s ease;pointer-events:none}
.research-page.is-selected{opacity:1;transform:none}
.research-page .research-header{display:flex;justify-content:space-between;border-bottom:1px solid #29282125;padding-bottom:3cqw}
.device-screen .research-page .research-header span{font:500 2.7cqw/1.4 monospace;color:#6d6c5d;letter-spacing:0}
.research-project{font:600 3cqw/1.4 Arial;letter-spacing:.06em;color:#72634c}
.research-page h4{font:700 8.6cqw/1.04 Poppins,Arial;letter-spacing:-.055em;margin:0 0 1cqw}
.research-page figure{margin:0;background:#ded8cb;border-radius:3cqw;overflow:hidden}
.research-page figure img{display:block;width:100%;aspect-ratio:1.45;object-fit:cover}
.research-page figcaption{font:3cqw/1.4 Arial;padding:2cqw 3cqw;color:#655e51}
.research-method{font:700 4.8cqw/1.2 Poppins,Arial;margin-top:1cqw}
.research-description{font:400 4.1cqw/1.45 Arial;margin:0;color:#49483e}
.research-tags{display:flex;gap:1.5cqw;flex-wrap:wrap}
.device-screen .research-tags span{font:3cqw/1.3 Arial;letter-spacing:0;color:#4b5140;background:#dce0cd;border:1px solid #a8af943f;border-radius:6cqw;padding:1.5cqw 2.7cqw}
.research-outcome{margin-top:auto;font:500 3.5cqw/1.4 Arial;border-top:1px solid #29282125;padding-top:3cqw;color:#68604f}
.research-progress{display:flex;gap:2cqw;padding-top:1cqw}
.research-progress span{height:2px;background:#29282122;flex:1}
.research-progress span.is-on{background:#99703e}
.kano-sheet{background:#faf8f2;border:1px solid #c8c6b9;border-radius:3cqw;overflow:hidden}
.kano-sheet-heading{font:600 4cqw/1.4 Arial;padding:3cqw;background:#dbe1ce;display:flex;justify-content:space-between}
.device-screen .kano-sheet-heading span{font:4cqw/1.4 monospace;color:#4b5140}
.kano-question{padding:3cqw;border-bottom:1px solid #d7d4c7}
.kano-question small{font:600 2.8cqw/1.4 Arial;letter-spacing:.05em;color:#7b7463}
.kano-question p{font:4cqw/1.4 Arial;margin:1cqw 0}
.kano-options{font:3.2cqw/1.7 Arial;padding:3cqw}
.kano-sheet .kano-note{font:2.6cqw/1.4 Arial;padding:2cqw 3cqw;background:#eeece3;color:#777062}
.services-static .device-screen-research{overflow-y:auto}
.services-static .research-deck{position:relative}
.services-static .research-page{position:relative;opacity:1;transform:none;min-height:100%;box-sizing:border-box}
@media(prefers-reduced-motion:reduce){.research-page{transition:none}}
/* Screen curvature follows the inner glass, independent of the metal bezel. */
.device-screen{border-radius:15.5% / 6.2%;container-type:inline-size;padding-top:16%;padding-bottom:12%}
.device-screen.device-screen-research{padding:0}
.ios-status{position:absolute;inset:0 0 auto;height:14cqw;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:0 7cqw;pointer-events:none;color:inherit}
.device-screen .ios-time{font:600 4.1cqw/1 Arial;color:inherit;letter-spacing:-.02em}
.ios-island{position:absolute;width:29cqw;height:8cqw;left:50%;top:3cqw;transform:translateX(-50%);border-radius:10cqw;background:#050505}
.ios-island::after{content:'';position:absolute;right:3cqw;top:2.5cqw;width:2.8cqw;height:2.8cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#23344b,#0c111a 65%);box-shadow:0 0 0 .4cqw #111}
.ios-indicators{display:flex;align-items:center;gap:1cqw}
.ios-indicators svg{width:4cqw;height:3cqw}.ios-indicators svg:last-child{width:6cqw}
.ios-bottom{position:absolute;bottom:0;left:0;right:0;z-index:6;background:#161410ed;color:#fff1d7;padding:3cqw 7cqw 2.5cqw;border-top:1px solid #ffffff18}
.device-screen-research .ios-bottom{background:#eee9dff5;color:#363b35;border-color:#29282122}
.ios-toolbar{display:flex;align-items:center;justify-content:space-between}
.ios-toolbar svg{width:5cqw;height:5cqw;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ios-toolbar svg:nth-child(2){opacity:.3}
.ios-home{width:34cqw;height:1.3cqw;border-radius:2cqw;margin:4cqw auto 0;background:currentColor}
.research-deck{top:14cqw;bottom:18cqw}
.research-page{padding:2cqw 7cqw 2cqw;gap:2.5cqw}
.research-page .research-header{position:static;inset:auto;height:auto;min-height:0;flex:none;gap:0;padding:0 0 2cqw;margin:0;align-items:center}
.research-page figure{flex-shrink:0}
.research-page figure img{aspect-ratio:1.65}
.research-page h4{font-size:8cqw}
.research-description{font-size:3.7cqw}
.research-page-kano{gap:2cqw}
.research-page-kano h4{font-size:6.5cqw}
.research-page-kano .research-outcome{display:none}
.research-page-kano .research-progress{margin-top:auto}
.kano-sheet{border-radius:0;flex-shrink:0;background:#e4ddce;color:#39362e}
.kano-sheet table{width:100%;border-collapse:collapse;table-layout:fixed;font:400 2.8cqw/1.18 Arial;letter-spacing:0}
.kano-sheet th{background:#cbc3ae;font-weight:700;padding:1cqw .5cqw;text-align:center;border-top:1px solid #aaa18d}
.kano-sheet td{vertical-align:middle;padding:1.7cqw .7cqw;border-bottom:1px solid #aaa18d;overflow-wrap:normal}
.kano-sheet td:last-child{border-left:1px solid #aaa18d;vertical-align:top}
.kano-sheet ol{margin:0;padding-left:3.6cqw;line-height:1.35}
.kano-sheet .kano-note{font-size:2.4cqw;padding:1cqw}
.research-page-kano{gap:1.5cqw}
.kano-sheet table{font-size:2.7cqw}

.research-page-kano .research-tags{display:flex;margin-top:1cqw}
.kano-sheet .kano-note{background:#d9d2c2;color:#655d4e}
/* Strategy: a compact decision workspace, with no invented priority scores. */
.strategy-app{position:absolute;inset:14cqw 0 18cqw;padding:2cqw 6.5cqw;display:flex;flex-direction:column;gap:3cqw;color:#302e26}
.strategy-topline{display:flex;justify-content:space-between;font:500 2.7cqw/1.4 monospace;border-bottom:1px solid #b5ac973f;padding-bottom:2cqw;color:#746b57}
.device-screen .strategy-topline span{font:4cqw/1 monospace;color:#8c6244}
.strategy-project{font:600 2.8cqw/1.4 Arial;letter-spacing:.06em;color:#7b6d55}
.strategy-app h4{font:700 8cqw/1.04 Poppins,Arial;letter-spacing:-.055em;margin:0}
.strategy-subtitle{font:3.5cqw/1.4 Arial;color:#736956}
.strategy-segments{display:flex;background:#dcd5c6;padding:1cqw;border-radius:3cqw;gap:1cqw}
.device-screen .strategy-segments span{flex:1;text-align:center;font:500 3.1cqw/1.4 Arial;color:#796e59;letter-spacing:0;padding:2cqw 0;border-radius:2cqw}
.device-screen .strategy-segments .selected{background:#eee9df;color:#342f25;box-shadow:0 1px 3px #33271115}
.strategy-board-label{display:flex;justify-content:space-between;align-items:center;font:3.4cqw/1.4 Arial}
.device-screen .strategy-board-label span{font:3cqw monospace;color:#82765d;letter-spacing:0}
.strategy-card{padding:3.5cqw;border:1px solid #b6aa8e55;border-radius:3.5cqw;background:#e3ddce;display:flex;flex-direction:column;gap:2cqw}
.strategy-card-meta{display:flex;justify-content:space-between;align-items:center;font:500 2.4cqw/1.4 monospace;color:#796a50}
.device-screen .strategy-card-meta span{font:2.5cqw/1.2 Arial;letter-spacing:0;color:#805532;background:#d9c7ad;padding:1cqw 1.5cqw;border-radius:5cqw}
.strategy-card h5{font:600 5.2cqw/1.1 Poppins,Arial;letter-spacing:-.035em;margin:0}
.strategy-card p,.strategy-decision p{font:3.3cqw/1.4 Arial;color:#625a4a;margin:0}
.strategy-evidence{display:flex;gap:2cqw;align-items:center;padding-top:2cqw;border-top:1px solid #b6aa8e55}
.device-screen .strategy-evidence span{font:2.4cqw monospace;color:#8a795c;letter-spacing:.04em}
.strategy-evidence strong{font:500 2.9cqw/1.4 Arial}
.strategy-tags{display:flex;gap:1.5cqw}
.device-screen .strategy-tags span{font:2.8cqw/1.3 Arial;letter-spacing:0;background:#d1d6bf;color:#4b5140;padding:1cqw 2cqw;border-radius:6cqw}
.strategy-decision{display:flex;gap:2cqw;padding:3cqw;background:#d8c4a845;border-left:2px solid #a77448;border-radius:0 2cqw 2cqw 0;margin-top:auto}
.strategy-decision-icon{font:6cqw/1 Arial;color:#a77448}
.strategy-decision strong{display:block;font:600 3.1cqw/1.3 Arial;margin-bottom:1.5cqw}
.strategy-decision p{font-size:2.9cqw}
.strategy-footnote{font:2.5cqw/1.4 Arial;color:#7e725d}
.device-shared .device-screen-strategy.is-active .strategy-card{animation:strategy-enter .7s cubic-bezier(.16,1,.3,1) both}
.device-shared .device-screen-strategy.is-active .strategy-card:nth-of-type(2){animation-delay:.12s}
@keyframes strategy-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.strategy-card{animation:none!important}}
.strategy-app{gap:1.8cqw}
.strategy-app h4{font-size:7cqw}
.strategy-card{padding:2.7cqw;gap:1.4cqw}
.strategy-card h5{font-size:4.7cqw}
.strategy-evidence{padding-top:1.3cqw}
.strategy-decision{padding:2cqw}
.strategy-career{display:flex;align-items:center;gap:1.4cqw;padding:2.5cqw 0;border-block:1px solid #b6aa8e55}
.device-screen .strategy-career span{font:500 2.8cqw/1.3 Arial;letter-spacing:0;color:#695a43;display:flex;align-items:center;gap:1.4cqw}
.strategy-career span+span::before{content:'→';color:#a77448}
.jira-app{position:absolute;inset:14cqw 0 18cqw;display:flex;flex-direction:column;gap:3cqw;color:#34352e;padding:0 5cqw;overflow:hidden;font-family:Arial,sans-serif}
.jira-top{display:flex;align-items:center;gap:2cqw;border-bottom:1px solid #b6aa8e55;padding:2cqw 0;font-size:4cqw}
.device-screen .jira-mark{color:#467292;font:6cqw/1 Arial}.device-screen .jira-tools{margin-left:auto;font:4cqw Arial;color:#706854}
.jira-breadcrumb{font:2.8cqw/1.3 Arial;color:#897b63}
.jira-project{display:flex;align-items:center;gap:3cqw}.device-screen .jira-project>span{background:#507897;color:#f6efe0;border-radius:2cqw;padding:2cqw 3cqw;font:600 5cqw Arial}
.jira-project h4{font:700 5.6cqw/1.2 Arial;margin:0;letter-spacing:-.03em}.jira-project p{font:3cqw/1.4 Arial;color:#81745d;margin:1cqw 0 0}
.jira-tabs{display:flex;gap:4cqw;border-bottom:1px solid #b6aa8e55}.device-screen .jira-tabs span{font:3.4cqw/1.4 Arial;color:#7c735f;padding-bottom:2cqw;letter-spacing:0}.device-screen .jira-tabs .selected{color:#345e80;border-bottom:2px solid #507897}
.jira-filter{display:flex;align-items:center;gap:2cqw}.device-screen .jira-filter span{font:3cqw Arial;letter-spacing:0;color:#7c735f}.jira-filter span:first-child{padding:2cqw;border:1px solid #b6aa8e55;border-radius:1cqw;flex:1}.device-screen .jira-filter b,.jira-ticket-footer b{font:600 2.6cqw Arial;background:#9d7150;border-radius:50%;color:#fff1d7;padding:1.7cqw}
.jira-sprint{display:flex;justify-content:space-between;font:3.4cqw Arial}.device-screen .jira-sprint span{font:3cqw Arial;color:#7c735f}
.jira-board-window{overflow:hidden;margin:0 -5cqw;padding:0 5cqw;flex-shrink:0;height:73cqw}
.jira-board{position:relative;display:flex;gap:3cqw;width:max-content;height:100%;transform:translateX(calc(-1 * var(--board-pan,0cqw)));will-change:transform}
.jira-column{width:59cqw;background:#ded8c9;border-radius:2cqw;padding:3cqw;flex:none}
.jira-column-title{font:600 2.6cqw Arial;display:flex;gap:2cqw;color:#706954}.device-screen .jira-column-title span{font:2.5cqw Arial;color:#81765c}
.jira-placeholder{height:31cqw;margin-top:3cqw;border:1px dashed #b9ae9755;border-radius:2cqw}
.jira-ticket{padding:3cqw;background:#efeade;border:1px solid #b6aa8e55;border-radius:2cqw;box-shadow:0 1px 2px #49372012;margin-top:2cqw}
.jira-ticket h5{font:500 3.6cqw/1.35 Arial;margin:0 0 3cqw}
.device-screen .jira-tag{font:2.5cqw/1.3 Arial;color:#536248;background:#d2dac4;padding:.8cqw 1.5cqw;border-radius:1cqw;letter-spacing:0}
.jira-ticket-footer{display:flex;align-items:center;justify-content:space-between;margin-top:3cqw}.device-screen .jira-ticket-footer span{font:2.7cqw Arial;color:#796e59;letter-spacing:0}
.jira-moving{position:absolute;left:3cqw;top:8cqw;width:53cqw;transform:translateX(var(--card-x,0cqw));z-index:2;will-change:transform}.jira-moving .jira-ticket{box-shadow:0 2cqw 5cqw #4a362030;border-color:#6688a2}.device-screen .jira-cursor{position:absolute;bottom:-2cqw;right:2cqw;background:#507897;color:#fff1d7;padding:1cqw 2cqw;border-radius:1cqw;font:2.5cqw Arial;letter-spacing:0}
.jira-progress{display:flex;gap:3cqw;align-items:center}.device-screen .jira-live-status{font:600 2.8cqw Arial;color:#507897;letter-spacing:0;min-width:18cqw}.jira-progress>div{height:1cqw;background:#d9d0bc;flex:1;border-radius:2cqw;overflow:hidden}.jira-progress i{display:block;height:100%;background:#507897;transform:scaleX(var(--board-progress,0));transform-origin:left}
.jira-story{border-top:1px solid #b6aa8e55;padding-top:3cqw}.device-screen .jira-story>span{font:600 2.7cqw Arial;color:#8f7659;letter-spacing:.04em}.jira-story h5{font:700 5cqw/1.1 Poppins,Arial;letter-spacing:-.03em;margin:2cqw 0}.jira-story p{font:3.3cqw/1.45 Arial;color:#665f4f;margin:0 0 2.5cqw}.jira-note{font:2.5cqw Arial;color:#8a7b60;margin-top:auto}
@media(prefers-reduced-motion:reduce){.jira-board,.jira-moving{transform:none;will-change:auto}}
.jira-app{gap:1.7cqw}.jira-board-window{height:62cqw}.jira-ticket{padding:2.3cqw}.jira-ticket h5{font-size:3.3cqw;margin-bottom:2cqw}.jira-ticket-footer{margin-top:2cqw}.jira-placeholder{height:28cqw}.jira-story p{font-size:3cqw}.jira-story h5{font-size:4.5cqw}

/* Owner-supplied product screens retain their own app navigation. */
.device-screen-product{padding:0;background:#fff;color:#151515}
.product-shot{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none}
.product-shot.is-selected{opacity:1}
.product-shot img{display:block;width:100%;height:100%;object-fit:fill}
.device-screen-product .ios-status{background:#fff;color:#151515;transition:background .55s ease,color .55s ease}
.device-screen-product.product-dark .ios-status{background:#1d1a23;color:#fff}
.device-screen-product .ios-bottom{display:none}
.device-screen-product::after{content:'';position:absolute;bottom:2.2cqw;left:33%;width:34%;height:1.2cqw;border-radius:2cqw;background:#343434;z-index:7}
.device-screen-product.product-dark::after{display:none}
@media(prefers-reduced-motion:reduce){.product-shot,.device-screen-product .ios-status{transition:none}}

/* AtomUI uses the same warm editorial language as the research screens. */
.device-screen-system{padding:0;background:#eee9df;color:#292821}
.atomui-showcase{position:absolute;inset:0;overflow:hidden;background:#eee9df}
.atomui-editorial{position:absolute;top:16cqw;left:7cqw;right:7cqw;z-index:2}
.atomui-topline{display:flex;justify-content:space-between;border-bottom:1px solid #29282125;padding-bottom:2cqw;font:500 2.7cqw/1.4 monospace;color:#6d6c5d}
.device-screen .atomui-topline span{font:inherit;letter-spacing:0;color:inherit}
.atomui-logo{display:block;width:34cqw;height:auto;margin:4cqw 0 3cqw}
.atomui-context h4{font:700 8cqw/1.04 Poppins,Arial;letter-spacing:-.055em;margin:0 0 3cqw}
.atomui-context p{font:400 3.7cqw/1.45 Arial,sans-serif;color:#49483e;margin:0 0 3cqw}
.atomui-context .research-tags{gap:1.5cqw;margin-bottom:3cqw}
.atomui-context a{display:inline-flex;align-items:center;min-height:8cqw;font:600 3.3cqw/1.4 Arial,sans-serif;color:#78532e;text-decoration:underline;text-underline-offset:1cqw}
.device-screen-system.is-active .atomui-context a,.services-static .atomui-context a{pointer-events:auto}
.atomui-context a:focus-visible{outline:2px solid #99703e;outline-offset:3px;border-radius:2px}
/* The glass is the only crop: full-size, straight sheets on the existing cream. */
.atomui-gallery{position:absolute;top:105cqw;left:7cqw;width:max-content}
.atomui-row{display:flex;align-items:start;gap:5cqw;width:max-content;will-change:transform}
.atomui-row img{display:block;width:112cqw;height:112cqw;object-fit:cover;object-position:left top;border-radius:3cqw;flex:none}
.device-screen-system .ios-status{background:#eee9df;color:#292821}
.device-screen-system .ios-bottom{background:#eee9dff5;color:#363b35;border-color:#29282122}
.device-shared .device-screen{contain:paint;will-change:clip-path}
@media(prefers-reduced-motion:reduce){.atomui-row{transform:none;will-change:auto}}

/* Mobile: prioritise the phone content and readable supporting copy. */
@media(max-width:700px){
 .service-artwork.device-mockup{height:78svh;top:1%;left:48.3%}
 .service-caption{bottom:24%}
 .service-caption h3{font-size:clamp(25px,6.5vw,32px)}
 .service-caption p{font-size:clamp(14px,3.8vw,17px);line-height:1.5;margin-top:12px}
 .service-ticker{font-size:clamp(64px,21vw,88px)}
}
@media(max-width:700px) and (max-height:700px){
 .service-artwork.device-mockup{height:70svh;top:0}
 .service-caption{bottom:23%}
 .service-caption h3{font-size:23px}
 .service-caption p{font-size:13px;line-height:1.45}
}

/* components/workstation.css */
.workstation{padding:64px max(36px,calc((100% - 1440px)/2)) 48px;color:#f9eddb;border-top:1px solid #c3ac9326}
.workstation-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:28px}
.workstation h2{font:700 clamp(42px,6.5vw,94px)/1.05 Poppins,Arial;letter-spacing:-.055em;margin:0}
.workstation-heading p{font:15px/1.6 Arial;max-width:260px;margin:0;color:#c3ac93}
.workstation-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,clamp(225px,27vw,330px));gap:0;border-radius:12px;overflow:hidden}
.station-tile{position:relative;margin:0;min-width:0;overflow:hidden;border-radius:0;background:#30251c;padding:0;border:0;display:block;isolation:isolate}
.station-tile img,.station-tile video{display:block;width:100%;height:100%;object-fit:cover}
.station-tile video{position:absolute;inset:0;opacity:0;transition:opacity .18s}
.station-tile.is-playing video{opacity:1}
.station-tile:focus-visible{outline:3px solid #d8ac7c;outline-offset:-3px}
.station-day{grid-column:1 / 4;grid-row:1 / 3}.station-light{grid-column:4 / 7;grid-row:1}.station-keys{grid-column:7 / 10;grid-row:1}.station-lamp{grid-column:10 / 13;grid-row:1 / 3}.station-stand{grid-column:4 / 7;grid-row:2}.station-screens{grid-column:7 / 10;grid-row:2}
.workstation-footer{display:flex;justify-content:space-between;margin-top:20px;font:10px/1.5 monospace;letter-spacing:.1em;color:#c3ac93}
@media(max-width:700px){.workstation{padding:48px 20px 32px}.workstation-heading{display:block;margin-bottom:24px}.workstation-heading p{margin-top:16px;max-width:280px;font-size:14px}.workstation-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,clamp(200px,58.6667vw,306.6667px));gap:0;border-radius:8px}.station-tile{grid-column:auto;grid-row:auto;border-radius:0}.station-day{grid-column:1;grid-row:1}.station-lamp{grid-column:2;grid-row:1}.workstation-footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){.station-tile video{transition:none}}
/* Scope away the hero's global media/header/footer positioning. */
.workstation-heading,.workstation-footer{position:static;inset:auto;transform:none;opacity:1}
.station-tile video{z-index:1;object-position:center}
.workstation-footer{padding:16px 0 0;border-top:1px solid #c3ac9326}

/* components/selected-work.css */
.selected-work{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.5fr);gap:6vw;margin-top:90px;position:relative}
.selected-sidebar{position:sticky;top:18svh;align-self:start;padding:28px 0;min-height:440px}
.selected-context[hidden]{display:none}
.selected-count{font:11px monospace;color:#c3ac93;letter-spacing:.12em}
.selected-context h3{font:600 clamp(34px,4.4vw,68px)/1.05 Poppins,Arial;letter-spacing:-.055em;margin:50px 0 22px}
.selected-context p{font:16px/1.6 Arial;color:#c9bdad;max-width:320px;margin:0 0 24px}
.selected-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 42px}
.selected-tags span{font:11px Arial;border:1px solid #c3ac9340;padding:7px 10px;border-radius:30px;color:#dfccb5}
.selected-link{color:#f9eddb;text-decoration:none;font:12px monospace;border-bottom:1px solid #c57847;padding-bottom:8px;display:inline-block}
.selected-cards{display:grid;gap:32px;min-width:0}
.selected-card{display:block;color:inherit;text-decoration:none;scroll-margin-top:15svh}
.selected-cover{overflow:hidden;border-radius:10px;background:#eee9df;aspect-ratio:1.15;position:relative}
.selected-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.selected-card:hover img{transform:scale(1.025)}
.selected-card[data-project="fountain"] img{object-position:center top}
.selected-card figcaption{display:flex;justify-content:space-between;align-items:center;padding:16px 0 24px;border-bottom:1px solid #c3ac9333;font:13px Arial;color:#c9bdad}
.selected-card figure{margin:0}.selected-card figcaption b{font-weight:400;color:#f9eddb}.selected-card figcaption i{font-style:normal;color:#c57847}
.selected-mobile-copy{display:none}.selected-all{display:block;margin:40px 0 0;text-align:right;color:#dfccb5;font:12px monospace}
@media(max-width:700px){.selected-work{display:block;margin-top:48px}.selected-sidebar{display:none}.selected-cards{gap:32px}.selected-cover{aspect-ratio:1.15}.selected-mobile-copy{display:block;color:#c9bdad;font:14px/1.6 Arial;margin:14px 0}.selected-card figcaption{padding-bottom:14px}.selected-all{text-align:left}}
@media(prefers-reduced-motion:reduce){.selected-cover img{transition:none}.selected-card:hover img{transform:none}}

/* Focus follows the scroll; only the project artwork is dimmed. */
.selected-cover{opacity:1;transition:opacity .5s cubic-bezier(.22,1,.36,1)}
.has-focus .selected-card:not(.is-active) .selected-cover{opacity:.34}
.selected-card:focus-visible .selected-cover{opacity:1}
.selected-context{transition:opacity .18s ease,transform .18s ease;opacity:1;transform:none}
.selected-context.is-leaving{opacity:0;transform:translateY(-10px);pointer-events:none}
.selected-context.revealed:not(.is-leaving){animation:projectContextIn .5s cubic-bezier(.22,1,.36,1) both}
.selected-context.revealed .reveal-word{animation-duration:.65s;animation-delay:calc(var(--n)*.025s)}
@keyframes projectContextIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.selected-cover,.selected-context{transition:none}.selected-context.is-leaving{transform:none}.selected-context.revealed{animation:none}}

/* Scroll-controlled cinema backdrop, shared with the following section. */
:root{background:var(--page-bg,#151410)}
.selected-card figure{position:relative;overflow:hidden;border-radius:10px}
.selected-card figcaption{position:absolute;inset:auto 0 0;z-index:1;min-height:110px;align-items:flex-end;padding:48px 24px 22px;border:0;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#eee5d8;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.selected-card figcaption b{color:#fff1d7}.selected-card figcaption i{color:#e1af82}
.selected-card:hover figcaption,.selected-card:focus-visible figcaption{opacity:1;transform:none}
@media(hover:none){.selected-card figcaption{opacity:1;transform:none}}
@media(max-width:700px){.selected-card figcaption{padding:40px 16px 16px;font-size:11px;gap:12px}}
@media(prefers-reduced-motion:reduce){.selected-card figcaption{transition:none;transform:none}}

/* The frame responds to scroll focus; the artwork follows the pointer inside it. */
.selected-card figure{transform:scale(.985);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.selected-card.is-active figure{transform:scale(1)}
.selected-cover img,.selected-card:hover img{transform:translate3d(var(--mouse-x,0px),var(--mouse-y,0px),0) scale(1.04);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.selected-cover.is-tracking img{transition-duration:.35s}
@media(hover:none),(prefers-reduced-motion:reduce){.selected-cover img,.selected-card:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){.selected-card figure{transform:none;transition:none}}

/* Give the sticky project information three distinct vertical anchors. */
@media(min-width:701px){
 .selected-sidebar{top:8svh;padding:0;min-height:0;height:84svh;max-height:900px}
 .selected-context{height:100%;display:flex;flex-direction:column;align-items:flex-start;padding:24px 0}
 .selected-count{flex:none}
 .selected-context h3{margin-top:auto;padding-top:32px}
 .selected-tags{margin-bottom:auto}
 .selected-link{flex:none;margin-top:40px}
}
@media(min-width:701px) and (max-height:600px){
 .selected-sidebar{top:4svh;height:92svh}
 .selected-context{padding:12px 0}
 .selected-context h3{font-size:34px;margin-bottom:14px;padding-top:16px}
 .selected-context p{font-size:14px;margin-bottom:16px}
 .selected-link{margin-top:20px}
}
/* Match the link hit area to its label so the cursor can hug it. */
.selected-all{width:max-content;max-width:100%;margin-left:auto;padding:8px 0}
@media(max-width:700px){.selected-all{margin-left:0}}

.selected-link{display:inline-flex;align-items:center;gap:.65em;line-height:1.4}.project-link-arrow{display:block;width:1em;height:1em;flex:none}



/* components/education.css */
.education{padding:100px max(36px,calc((100% - 1440px)/2)) 100px;color:#f9eddb;border-top:1px solid #c3ac9326}
.education-heading{margin-bottom:56px}.education h2{font:700 clamp(40px,6.5vw,94px)/1.08 Poppins,Arial;letter-spacing:-.055em;margin:24px 0}.education-heading p{font:16px/1.6 Arial;color:#c3ac93;margin:0}
.education-row{display:grid;grid-template-columns:1fr 2fr 1fr;gap:32px;align-items:start;padding:34px 0;border-top:1px solid #c3ac9333}.education-row:last-child{border-bottom:1px solid #c3ac9333}
.education-meta{font:11px/1.7 monospace;letter-spacing:.06em;color:#c3ac93}.education-meta span{display:block;margin-top:10px;max-width:220px}.education h3{font:500 clamp(20px,2vw,28px)/1.3 Poppins,Arial;letter-spacing:-.035em;margin:0 0 12px}.education-detail p{font:14px/1.6 Arial;color:#c3ac93;margin:0}
.education-award{display:inline-block;color:#e5b58b;font:12px/1.5 monospace;margin-top:18px}.education-links{display:flex;flex-direction:column;align-items:flex-end;gap:16px;padding-top:4px}.education-links a{font:12px/1.5 monospace;color:#f9eddb;text-underline-offset:6px;text-decoration-color:#c57847}.education-links a:hover{color:#e5b58b}.education-links a:focus-visible{outline:2px solid #e5b58b;outline-offset:6px}.education-status{font:11px/1.5 monospace;color:#d8ddbc;border:1px solid #d8ddbc55;border-radius:30px;padding:6px 12px}
@media(max-width:700px){.education{padding:64px 20px}.education-heading{margin-bottom:36px}.education-row{grid-template-columns:1fr;gap:18px;padding:28px 0}.education-meta{display:flex;flex-wrap:wrap;gap:12px}.education-meta span{margin:0;max-width:none}.education-links{align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:20px}.education h3{max-width:30ch}}

/* components/contact.css */
.contact-ending{position:relative;isolation:isolate;background:#b78965;margin:0 -14px -14px;color:#fff1d7;--closing:0}
.collab{position:relative;z-index:2;min-height:78svh;background:#181713;clip-path:inset(0 calc(20px * var(--closing)) round 0 0 calc(26px * var(--closing)) calc(26px * var(--closing)));transform:scale(calc(1 - .025 * var(--closing)));transform-origin:50% 0}
.collab-inner{max-width:1512px;margin:auto;padding:90px 50px 72px}.collab h2{font:700 clamp(66px,14vw,220px)/1.15 Poppins,Arial;letter-spacing:-.065em;margin:48px 0 60px}.collab-bottom{display:flex;justify-content:space-between;align-items:end;gap:32px}.collab-bottom p{font:clamp(20px,2.6vw,36px)/1.3 Arial;letter-spacing:-.03em;margin:0;color:#c3ac93}.collab-cta{display:flex;align-items:center;gap:50px;border-bottom:1px solid #c57847;padding:16px 0;color:#fff1d7;text-decoration:none;font:20px Arial}.collab-cta span{font-size:36px;transition:transform .3s}.collab-cta:hover span{transform:translate(4px,-4px)}
.site-footer{position:sticky;inset:auto;bottom:0;z-index:1;display:block;transform:none;opacity:1;border:0;padding:72px 50px 0;color:#231b15;overflow:hidden;min-height:520px}.footer-top{max-width:1412px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:40px}.footer-monogram{font:700 48px Poppins,Arial;letter-spacing:-.07em;text-decoration:none}.footer-identity p{font:17px/1.5 Arial;margin:20px 0}.footer-identity>span{font:12px monospace}.site-footer a{color:inherit}.site-footer nav,.footer-connect{display:flex;flex-direction:column;align-items:flex-start;gap:13px}.footer-label{font:10px/1.5 monospace;letter-spacing:.1em;margin-bottom:13px;opacity:.7}.site-footer nav a,.footer-connect a{font:15px/1.5 Arial;text-decoration:none}.site-footer a:hover{text-decoration:underline;text-underline-offset:5px}.footer-signoff{max-width:1412px;margin:60px auto 0;padding-top:22px;border-top:1px solid #231b1533;display:flex;justify-content:space-between;gap:20px;font:11px/1.5 monospace}.footer-signoff a{text-decoration:none}.footer-wordmark{font:700 clamp(52px,12.5vw,210px)/1.2 Poppins,Arial;letter-spacing:-.065em;white-space:nowrap;text-align:center;margin:38px -30px -0.22em}
@media(max-width:700px){.collab{min-height:65svh}.collab-inner{padding:64px 34px}.collab h2{margin:40px 0}.collab-bottom{align-items:start;flex-direction:column;gap:25px}.collab-cta{font-size:17px;gap:40px}.site-footer{position:relative;bottom:auto;min-height:0;padding:48px 34px 0}.footer-top{grid-template-columns:1fr 1fr;gap:36px 24px}.footer-identity{grid-column:1/-1}.footer-signoff{margin-top:44px;font-size:9px}.footer-connect a{overflow-wrap:anywhere}.footer-wordmark{margin-top:40px;font-size:12.5vw}}
@media(prefers-reduced-motion:reduce){.collab{transform:none;clip-path:none}.site-footer{position:relative}.collab-cta span{transition:none}}

/* A compact closing panel, with the signature carrying the visual weight. */
.collab{min-height:0}.collab-inner{padding:64px 50px 44px}.collab h2{font-size:clamp(64px,11.5vw,176px);line-height:1.05;margin:32px 0 38px}.collab-bottom{border-top:1px solid #c3ac9333;padding-top:26px;align-items:center}.collab-bottom p{font-size:clamp(18px,2vw,26px)}.collab-cta{font:16px monospace;gap:32px;padding:8px 0}.collab-cta span{font-size:30px}
.footer-wordmark{font:700 clamp(110px,21vw,360px)/1.05 Poppins,Arial;letter-spacing:-.065em;white-space:nowrap;text-align:left;margin:46px -50px -.14em;overflow:hidden}.footer-name-track{display:flex;width:max-content;transform:translate3d(var(--signature-x,0px),0,0)}.footer-name-track>span{display:block;flex:none}.footer-name-track i{font-style:normal;font-size:.55em;vertical-align:middle}
@media(max-width:700px){.collab{min-height:0}.collab-inner{padding:48px 34px 32px}.collab h2{margin:28px 0 30px}.collab-bottom{align-items:flex-start;gap:20px;padding-top:22px}.footer-wordmark{font-size:30vw;margin:36px -34px -.12em}}
@media(prefers-reduced-motion:reduce){.footer-name-track{transform:none}}

/* Continuous marquee inside the scroll-responsive track. */
.footer-name-track>span{animation:footerNameTravel 38s linear infinite}
@keyframes footerNameTravel{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.footer-name-track>span{animation:none}}

/* Match the mobile body gutter; contain the moving signature without a sideways scroll. */
@media(max-width:700px){.contact-ending{overflow-x:clip}.footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.footer-connect{min-width:0}.footer-connect a{max-width:100%}}
@media(max-width:650px){.contact-ending{margin-inline:-8px;margin-bottom:-8px}}

/* Education and contact share one surface above the continuous footer backdrop. */
.closing-surface{position:relative;z-index:2;background:#181713;clip-path:inset(0 calc(20px * var(--closing)) round 0 0 calc(26px * var(--closing)) calc(26px * var(--closing)))}
.closing-surface .collab{transform:none;clip-path:none}
.closing-surface .education{padding-inline:max(50px,calc((100% - 1440px)/2 + 14px))}
@media(max-width:700px){.closing-surface .education{padding-inline:28px}}
@media(prefers-reduced-motion:reduce){.closing-surface{clip-path:none}}
@media(max-width:700px){.closing-surface{clip-path:inset(0 calc(10px * var(--closing)) round 0 0 calc(18px * var(--closing)) calc(18px * var(--closing)))}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.closing-surface{clip-path:none}}

.collab-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cv-download{display:inline-flex;align-items:center;gap:28px;border:1px solid #c3ac9370;border-radius:100px;padding:16px 24px;color:inherit;background:transparent;text-decoration:none;font:14px monospace}.cv-download:disabled{opacity:.5;cursor:not-allowed}.cv-download:not(:disabled):hover{background:#fff1d7;color:#181713}

.cv-download .link-arrow{display:block;flex:0 0 20px;width:20px;height:20px}

/* components/cursor.css */
.portfolio-cursor{position:fixed;top:0;left:0;z-index:2147483647;pointer-events:none;background:#fff1d7;mix-blend-mode:difference;opacity:0;transition:opacity .18s,background .2s;contain:layout style;display:flex;align-items:center;justify-content:center}
.portfolio-cursor.is-visible{opacity:1}.portfolio-cursor.is-magnetic{background:#fff1d7aa}.portfolio-cursor.is-media::after{content:'';position:absolute;inset:0;margin:auto;width:24px;height:24px;background:#181713;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M6 6h12v12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}.portfolio-cursor.is-pressed{opacity:.65}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.custom-pointer,.custom-pointer a,.custom-pointer button,.custom-pointer [role=tab]{cursor:none!important}}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.portfolio-cursor{display:none}}

/* Warm highlights keep link accents intact instead of inverting them to blue. */
.portfolio-cursor.is-magnetic{mix-blend-mode:normal;background:rgba(229,181,139,.16);box-shadow:inset 0 0 0 1px rgba(229,181,139,.35)}
/* Project hover: a single hollow ring, with delayed label reveal. */
.portfolio-cursor.is-case{mix-blend-mode:difference;background:transparent;color:#fff;box-shadow:none;border:1.5px solid #fff;border-radius:50%!important;outline:none}
.portfolio-cursor::before{position:absolute;inset:0;display:grid;place-items:center;content:'READ CASE';font:700 10px/1.2 Arial,sans-serif;letter-spacing:.14em;color:#fff;white-space:nowrap;opacity:0;transition:opacity .2s}
.portfolio-cursor.is-case::before{opacity:1;transition-delay:.12s}

/* components/navigation.css */
.site-navigation{position:fixed;z-index:100;inset:0 0 auto;background:none;color:#fff1d7;mix-blend-mode:normal;pointer-events:none}.navigation-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 5vw;max-width:1600px;margin:auto}.site-navigation a{color:inherit;text-decoration:none}.navigation-brand{font:700 30px/40px Poppins,sans-serif;letter-spacing:-1.6px;pointer-events:auto}.navigation-shell{display:flex;align-items:center;justify-content:flex-end;position:relative;pointer-events:auto;border-radius:28px}.navigation-links{display:flex;align-items:center;gap:24px;max-width:760px;overflow:hidden;opacity:1;transform:translateX(0);padding-right:24px;white-space:nowrap;transition:max-width .7s cubic-bezier(.22,1,.36,1),padding .7s cubic-bezier(.22,1,.36,1),opacity .35s,transform .7s cubic-bezier(.22,1,.36,1)}.navigation-links a{font:13px/1.4 monospace;text-transform:uppercase;padding:12px 0;position:relative}.navigation-links a::after{content:'';position:absolute;bottom:6px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}.navigation-links a:hover::after,.navigation-links a[aria-current]::after{transform:scaleX(1)}.navigation-menu{display:flex;align-items:center;justify-content:center;gap:10px;flex:none;border:0;border-radius:999px;background:#ffffff18;color:inherit;font:13px/1.4 monospace;text-transform:uppercase;padding:12px 16px;min-height:40px;cursor:pointer;backdrop-filter:blur(12px)}.navigation-menu svg{width:13px;height:13px;transition:transform .6s cubic-bezier(.22,1,.36,1)}.navigation-menu[aria-expanded=true] svg{transform:rotate(45deg)}.is-compact .navigation-links{max-width:0;padding-right:0;opacity:0;transform:translateX(24px);pointer-events:none}.navigation-links a:focus-visible,.navigation-menu:focus-visible,.navigation-brand:focus-visible{outline:1px solid #c99d76;outline-offset:5px}.hero header{visibility:hidden}html{scroll-padding-top:96px}
@media(max-width:1000px){.navigation-links{gap:16px}.navigation-links a{font-size:12px}.navigation-bar{padding-inline:24px}}
@media(max-width:760px){.navigation-bar{padding:14px 24px}.navigation-shell{align-items:flex-end;flex-direction:column}.navigation-menu{order:-1}.navigation-links{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;max-height:260px;max-width:calc(100vw - 48px);padding:18px 20px;margin-top:10px;background:#151410f2;border-radius:20px;transform-origin:top right;transition:max-height .6s cubic-bezier(.22,1,.36,1),padding .6s,opacity .3s,transform .6s,margin .6s}.navigation-links a{font-size:13px}.is-compact .navigation-links{max-width:calc(100vw - 48px);max-height:0;padding:0 20px;margin-top:0;transform:scale(.8);opacity:0}.navigation-brand{font-size:28px}}
@media(prefers-reduced-motion:reduce){.navigation-links,.navigation-menu svg,.navigation-links a::after{transition:none}}

/* Match the content rails; choose explicit foregrounds, never inverted hues. */
.navigation-bar{max-width:none;padding-inline:max(36px,calc((100vw - 1440px)/2))}
.navigation-brand,.navigation-links a,.navigation-menu{color:#fff1d7;transition:color .2s;text-shadow:0 1px 3px #0005}
.site-navigation .on-light{color:#211b15;text-shadow:0 1px 2px #fff3}
.navigation-menu.on-light{background:#211b1512}
@media(max-width:700px){.navigation-bar{padding-inline:20px}}
@media(prefers-reduced-motion:reduce){.navigation-brand,.navigation-links a,.navigation-menu{transition:none}}


/* Keep navigation lettering clean on every surface. */
.navigation-brand,.navigation-links a,.navigation-menu,.site-navigation .on-light{text-shadow:none;box-shadow:none}

/* Initial breathing room inside the hero rails, released over the first 140px. */
.navigation-bar{padding-inline:calc(max(36px,(100vw - 1440px)/2) + 20px * var(--intro-inset,1))}
@media(max-width:700px){.navigation-bar{padding-inline:calc(20px + 12px * var(--intro-inset,1))}}

.navigation-links a{display:inline-flex;align-items:center;gap:.7em}.navigation-arrow{width:1em;height:1em;flex:none;display:block}

/* components/project-transition.css */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:1s}
::view-transition-old(root),::view-transition-new(root){animation-duration:1s;animation-timing-function:cubic-bezier(.25,.74,.22,.99);animation-fill-mode:both;mix-blend-mode:normal}
::view-transition-old(root){animation-name:project-away}
::view-transition-new(root){animation-name:project-arrive}
@keyframes project-away{to{transform:translateY(-35vh) scale(.9);opacity:.3}}
@keyframes project-arrive{from{transform:translateY(100vh)}to{transform:translateY(0)}}
html.project-return::view-transition-old(root){animation-name:project-depart;z-index:2}
html.project-return::view-transition-new(root){animation-name:project-restore;z-index:1}
@keyframes project-depart{to{transform:translateY(100vh)}}
@keyframes project-restore{from{transform:translateY(-35vh) scale(.9);opacity:.3}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none}}

/* components/language.css */
.language-switch{display:inline-flex;align-items:center;gap:0;flex:none;pointer-events:auto;align-self:center;background:transparent;color:#fff1d7;border:0;border-radius:0;padding:0;white-space:nowrap;line-height:1}
.language-switch button{appearance:none;display:inline-flex;justify-content:center;align-items:center;min-width:36px;min-height:40px;padding:10px 6px;border:0;border-radius:0;background:transparent;color:inherit;font:13px/1 monospace;letter-spacing:.02em;cursor:pointer;box-shadow:none;transform:none;opacity:.4;transition:opacity .2s ease}
.language-switch button[aria-pressed=true]{opacity:1;background:transparent;color:inherit}
.language-switch button:hover{opacity:.75}.language-switch button:focus-visible{outline:2px solid #c99d76;outline-offset:3px}.language-switch span{opacity:.4;font:12px/1 monospace}
.navigation-shell{margin-left:auto}.navigation-bar{gap:16px}.case-nav .case-back{margin-left:auto}.case-nav{gap:20px}
@media(max-width:1100px) and (min-width:761px){.navigation-links{gap:12px;padding-right:12px}.navigation-links a{font-size:11px}}
@media(max-width:760px){.navigation-bar{gap:10px}.language-switch{align-self:flex-start}.language-switch button{min-width:32px;min-height:36px}.case-nav{gap:10px}.case-back{font-size:12px!important}.contact-view header{flex-wrap:wrap;gap:16px}}
.contact-view-bar .contact-back{margin-left:auto}.contact-view-bar{gap:20px}
@media(max-width:600px){.contact-view-bar{gap:10px;flex-wrap:wrap}.contact-view-bar .contact-back{font-size:12px;padding:10px 14px}.contact-view-bar .language-switch{align-self:center}}
.case-nav .language-switch{align-self:center}
@media(max-width:760px){.navigation-shell{flex:none}.navigation-links{position:absolute;top:100%;right:0;width:max-content}.navigation-bar .language-switch{align-self:flex-start}}

.navigation-links .language-switch{color:inherit;align-self:center}
@media(max-width:760px){.navigation-links .language-switch{grid-column:2;justify-self:start}}
@media(max-width:760px){.navigation-links a:last-of-type{grid-column:1}}