/* Work-first refinements: accessible media, glass navigation, clear project credits. */
html{scroll-padding-top:110px}
header{position:absolute;top:20px;left:3%;width:94%;height:66px;padding:0 26px;border:1px solid #ffffff2e;border-radius:40px;background:#10121c87;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px #ffffff20,0 8px 35px #0003}
.wordmark{font-size:23px;display:flex;align-items:center;gap:14px;letter-spacing:-1px}.wordmark span{font-size:10px;letter-spacing:1.5px;font-weight:400;color:#acafba;margin:0;max-width:48px;line-height:1.35}
.contact-link{padding:10px 16px;background:#ffffff12}
button,a{touch-action:manipulation}.glass-panel,.glass-card,.glass-button{-webkit-backdrop-filter:blur(24px)}
.hero{height:min(900px,93svh);min-height:710px;max-height:none;border-radius:0 0 40px 40px;background:#09090b}
.hero-art{object-fit:cover;object-position:center;filter:none;animation:none}
.hero-shade{background:linear-gradient(0deg,#080a11f5 0%,#080a11a6 20%,#080a1110 54%,#080a1140 100%);pointer-events:none}
.hero-top{top:117px;left:5%;right:5%;align-items:center;letter-spacing:1.5px;font-size:12px}.hero-top>span{padding:10px 0;text-shadow:0 2px 8px #000}
.motion-toggle{padding:11px 17px;border:1px solid #ffffff50;border-radius:30px;background:#10121b99;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font-size:14px;letter-spacing:0;min-height:44px}
.motion-toggle:hover{background:#343842}
.hero-title{left:5%;right:5%;bottom:85px;pointer-events:none}
.hero-title>p{font-size:15px;letter-spacing:.01em;margin-bottom:14px;color:#dddfe7}
.hero h1{font-size:clamp(54px,6.2vw,90px);line-height:.96;letter-spacing:-.055em;font-weight:520;max-width:660px;text-shadow:0 3px 25px #0004}
.hero h1 em{text-shadow:none}
.hero-bottom{max-width:none;align-items:flex-end;margin-top:22px;pointer-events:auto}
.hero-bottom p{font-size:16px;line-height:1.5}.watch-reel{padding:16px 22px;gap:16px;background:#ffffff18;font-size:16px}.watch-reel>span{font-size:25px}
.reel-strip{position:absolute;left:5%;right:5%;bottom:24px;display:flex;justify-content:space-between;gap:24px;color:#c4c7d1;font-size:12px;letter-spacing:.025em;z-index:2}.reel-strip>a{color:#eceef3}
.intro-bar{padding:34px 5%;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid #ffffff16;background:#0e111a}.intro-bar>p{margin:0;line-height:1.55;font-size:17px}.intro-bar>p>span{color:#a7acbb}.intro-bar>div{display:flex;gap:14px}.intro-bar .glass-button{font-size:14px}
.section{padding:100px 7%;max-width:1600px}.section-heading h2{font-size:clamp(40px,4.7vw,68px)}
.section-heading>p{font-size:16px}.project-grid{gap:48px 24px}.project-image{border-radius:28px}.wide .project-image{aspect-ratio:1.95}.project-label{margin:18px 4px 0}.project-label>span{font-size:14px}.project-tag{font-size:12px;letter-spacing:.7px}.project-label h3{font-size:24px}.project-image .project-tag{max-width:calc(100% - 44px)}
.project-motion{opacity:0;transition:opacity .45s;pointer-events:none}.project:hover .project-motion{opacity:0}.project.is-playing .project-motion{opacity:1}.project:hover img{transform:scale(1.015)}
.motion-row{margin-top:48px}.text-button{font-size:16px;min-height:44px}
.pathways{background:radial-gradient(800px 600px at 15% 50%,#29314b44,transparent 75%);max-width:1600px}.pathway-card{display:flex;flex-direction:column;min-height:0;padding:36px;border-radius:32px}.pathway-card h3{font-size:clamp(32px,3.6vw,52px);margin-bottom:23px}.pathway-card>p:not(.eyebrow){font-size:16px;line-height:1.7;flex:1}.pathway-card .eyebrow{margin-bottom:18px}.pathway-meta{position:static;margin-top:30px;margin-bottom:25px;gap:16px;font-size:12px;line-height:1.5}.pathway-card>.glass-button{position:static;align-self:flex-start}.quiet-link{position:static;display:inline-block;align-self:flex-start;margin-top:20px;min-height:30px;font-size:14px}.pathway-number{top:33px;right:33px}.glass-button{min-height:46px}
.process{max-width:none;padding-left:7%;padding-right:7%;border-radius:40px;margin:0 3%;color:#151821}.process-layout{gap:5%}.process-image{background:#e5e8ef}.step h3{font-size:24px}.step p{font-size:16px}
.about{max-width:1600px;padding-top:110px;padding-bottom:110px;gap:8%}.about-copy>p:not(.eyebrow){font-size:17px}.portrait{aspect-ratio:.84;max-height:630px}.about h2{font-size:clamp(38px,4.2vw,60px)}.toolbox span{font-size:13px}.about-actions{align-items:flex-start;flex-direction:column;gap:14px}
.contact{max-width:none;margin:0 3%;border:1px solid #ffffff1b;border-radius:40px;background:radial-gradient(650px 350px at 75% 110%,#33394e,#12151f);padding:90px 5% 55px}.contact h2{font-size:clamp(48px,7.3vw,105px)}.contact-bottom{margin-top:65px}footer{border:0;margin-top:24px;padding:30px 7%}
dialog{width:min(1100px,94vw);border-radius:30px;background:#13161ef7;border-color:#ffffff30;box-shadow:0 30px 150px #000b;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}dialog::backdrop{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dialog-bar{background:#111620ee}.dialog-bar>span{font-size:12px}.dialog-bar button{width:44px;height:44px}.dialog-body{padding:36px}.dialog-body h2{font-size:clamp(38px,5.4vw,66px);letter-spacing:-.04em}.dialog-body>.eyebrow{font-size:12px;line-height:1.6}.dialog-body>p:not(.eyebrow){color:#b8bdca}.project-facts{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:30px 0;padding:24px 0;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20}.project-facts:empty{display:none}.project-facts dt{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#9da7bb;margin-bottom:9px}.project-facts dd{font-size:16px;line-height:1.6;margin:0;color:#e5e9f0}
#dialog-media{gap:20px}#dialog-media video{aspect-ratio:16/9;border-radius:18px;max-height:75svh}#dialog-media img{border-radius:18px}#dialog-media h3{font-size:25px;font-weight:500;letter-spacing:-.5px;margin:15px 0}#dialog-media .media-note{font-size:13px;line-height:1.7;color:#a3aaba;margin:0 0 20px}.case-approach{padding:16px 0 26px}.case-approach p{font-size:17px;line-height:1.7;color:#b8bdca;max-width:750px}.process-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.process-gallery img{height:auto;background:#212630}#original-link{font-size:14px}#original-link[hidden]{display:none}
@media(min-width:1700px){.hero-art{object-fit:contain}.hero{background:#09090b}}
@media(max-width:900px){header{left:4%;width:92%;padding:0 20px}.wordmark>span{display:none}.hero{min-height:690px}.hero h1{font-size:64px}.hero-title{bottom:86px}.hero-bottom{flex-direction:row;align-items:center;gap:20px}.hero-bottom p{font-size:15px}.watch-reel{font-size:14px;padding:12px 15px}.intro-bar{padding:27px 5%;gap:18px}.intro-bar>p{font-size:15px}.intro-bar>div{gap:10px}.intro-bar .glass-button{padding:12px 15px;font-size:13px}.section{padding:75px 6%}.project-tag{font-size:11px}.project-label>span{font-size:13px}.pathway-card{padding:28px}.pathway-meta{flex-direction:column;gap:5px}.process{padding:65px 5%}.about{padding:85px 6%}.contact{padding:65px 6% 40px}.process-gallery{grid-template-columns:1fr}}
@media(max-width:600px){header{top:15px;height:60px;padding:0 18px}.wordmark{font-size:21px}nav{gap:16px}nav a{font-size:13px}.hero{height:90svh;min-height:650px;border-radius:0 0 28px 28px}.hero-art{object-fit:cover}.hero-top{top:98px;left:6%;right:6%;gap:15px}.hero-top>span{font-size:10px;max-width:165px;line-height:1.6}.motion-toggle{font-size:12px;padding:9px 12px;white-space:nowrap}.hero-title{left:6%;right:6%;bottom:87px}.hero-title>p{font-size:13px}.hero h1{font-size:58px;line-height:.98}.hero-bottom{align-items:flex-start;flex-direction:column;gap:18px;margin-top:18px}.hero-bottom p{font-size:14px}.watch-reel{padding:11px 17px;min-height:45px}.watch-reel>span{font-size:20px}.reel-strip{left:6%;right:6%;font-size:10px;gap:15px;bottom:22px;align-items:flex-end;line-height:1.5}.reel-strip>span{max-width:190px}.reel-strip>a{max-width:86px;text-align:right}.intro-bar{display:block;padding:27px 6%}.intro-bar>p{font-size:16px;line-height:1.5;margin-bottom:20px}.intro-bar>div{display:grid;grid-template-columns:1fr 1fr}.intro-bar .glass-button{justify-content:center;padding:13px 8px;font-size:12px;gap:0}.section-heading{margin-bottom:32px}.section-heading h2{font-size:44px}.section-heading>p{font-size:15px;line-height:1.65;margin-top:22px}.project-grid{gap:35px}.project-image,.wide .project-image{aspect-ratio:1.18}.project-tag{font-size:10px}.project-label h3{font-size:23px}.project-label>span{font-size:13px}.pathway-card>p:not(.eyebrow){font-size:16px}.pathway-meta{font-size:12px}.glass-button{font-size:14px}.pathway-card{min-height:0}.process{border-radius:28px}.process-image{aspect-ratio:1.25;border-radius:24px}.step{gap:16px;padding:25px 0}.step h3{font-size:23px}.step p{font-size:16px}.portrait{max-height:480px;aspect-ratio:1}.contact{border-radius:28px}.contact h2{font-size:51px}.email{font-size:19px;gap:18px}.contact-bottom{font-size:13px}.dialog-body{padding:25px 20px}.dialog-body h2{font-size:41px}.dialog-bar{padding:12px 18px}.dialog-bar>span{font-size:10px}.project-facts{grid-template-columns:1fr;gap:20px}.project-facts dd{font-size:15px}#dialog-media video{border-radius:12px}.case-approach p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.project-motion{transition:none}.project:hover img{transform:none}}

/* Cinematic section handoffs: gentle depth while reading, with a short directional veil between scenes. */
.scroll-section{--focus:0;--scene-shift:18px;--scene-opacity:.84;--scene-glow:.12;--hero-shift:10px;--hero-opacity:.86;--hero-scale:1.015;position:relative;isolation:isolate;scroll-margin-top:112px}
.scroll-section:not(.hero)>*{opacity:var(--scene-opacity);transform:translate3d(0,var(--scene-shift),0);transition:opacity .42s ease,transform .58s cubic-bezier(.2,.7,.2,1)}
.scroll-section:not(.hero)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 42% at 50% 52%,rgba(230,255,152,.07),transparent 72%);opacity:var(--scene-glow);transition:opacity .6s ease}
.hero .hero-top,.hero .hero-title,.hero .reel-strip{opacity:var(--hero-opacity);transform:translate3d(0,var(--hero-shift),0);transition:opacity .42s ease,transform .58s cubic-bezier(.2,.7,.2,1)}
.hero .hero-art{transform:scale(var(--hero-scale));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.scroll-section.is-current::before{content:"";position:absolute;left:7%;right:7%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(230,255,152,.42),transparent);opacity:.45;pointer-events:none}
.scroll-transition{position:fixed;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none;overflow:hidden;opacity:0}
.scroll-transition::before{content:"";position:absolute;inset:-12%;background:radial-gradient(circle at 50% 48%,rgba(230,255,152,.22),transparent 28%),linear-gradient(145deg,#0a0e19f5 0%,#182237f2 48%,#0a0b10f7 100%);transform:translateY(110%);will-change:transform}
.scroll-transition::after{content:"";position:absolute;left:50%;top:50%;width:min(48vw,620px);aspect-ratio:1;border:1px solid rgba(230,255,152,.18);border-radius:50%;transform:translate(-50%,-50%) scale(.65);opacity:0;box-shadow:0 0 80px rgba(230,255,152,.13),inset 0 0 60px rgba(230,255,152,.08);will-change:transform,opacity}
.scroll-transition-label{position:relative;z-index:1;padding:11px 16px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(8,10,17,.32);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:11px;letter-spacing:1.8px;color:#f2f3f5;opacity:0;transform:translateY(10px);white-space:nowrap}
.scroll-transition-rule{position:absolute;left:50%;top:0;width:1px;height:100%;background:linear-gradient(transparent,rgba(230,255,152,.4),transparent);opacity:0}
body.is-section-transitioning .scroll-transition{opacity:1}
body.is-section-transitioning .scroll-transition::before{animation:veil-down .78s cubic-bezier(.76,0,.24,1) both}
body.is-section-transitioning .scroll-transition::after{animation:transition-ring .78s cubic-bezier(.2,.7,.2,1) both}
body.is-section-transitioning .scroll-transition-label{animation:transition-label .78s cubic-bezier(.2,.7,.2,1) both}
body.is-section-transitioning .scroll-transition-rule{animation:transition-rule .78s ease both}
body.is-section-transitioning[data-transition-direction="up"] .scroll-transition::before{animation-name:veil-up}
@keyframes veil-down{0%{transform:translateY(110%)}38%{transform:translateY(0)}62%{transform:translateY(0)}100%{transform:translateY(-110%)}}
@keyframes veil-up{0%{transform:translateY(-110%)}38%{transform:translateY(0)}62%{transform:translateY(0)}100%{transform:translateY(110%)}}
@keyframes transition-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.62)}38%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:.55;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}
@keyframes transition-label{0%{opacity:0;transform:translateY(12px)}32%{opacity:1;transform:translateY(0)}68%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes transition-rule{0%,100%{opacity:0;transform:scaleY(.25)}35%,65%{opacity:.5;transform:scaleY(1)}}
@media(max-width:600px){.scroll-section{scroll-margin-top:88px;--scene-shift:12px}.scroll-transition-label{font-size:10px;letter-spacing:1.4px;padding:10px 14px}.scroll-transition::after{width:74vw}.scroll-section.is-current::before{left:8%;right:8%}}
@media(prefers-reduced-motion:reduce){.scroll-section:not(.hero)>*,.hero .hero-top,.hero .hero-title,.hero .reel-strip,.hero .hero-art{opacity:1;transform:none;transition:none}.scroll-section:not(.hero)::after,.scroll-section.is-current::before,.scroll-transition{display:none!important}}
nav a{position:relative}
nav a.is-active{color:#f5f6f8}
nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:var(--accent);transform-origin:left;animation:nav-trace .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes nav-trace{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){nav a.is-active::after{animation:none}}

.graphic-concepts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.graphic-concepts img{width:100%;height:auto;display:block;border-radius:16px}.graphic-concepts h3{font-size:18px;margin:16px 0 0}.concept-disclosure{font-size:16px;line-height:1.7;color:#b9b9c1;max-width:900px;margin:32px 0}.graphic-concepts a{color:inherit;text-decoration:none}@media(max-width:700px){.graphic-concepts{grid-template-columns:1fr}header nav{gap:12px}header nav a{font-size:12px}}