:root{--paper:oklch(96% .012 282);--ink:oklch(0% 0 0);--blue:oklch(49% .28 270);--nav:oklch(30% .02 277);--muted:oklch(92% .015 277);--margin:5vw;--radius:20px;--ease:cubic-bezier(.22,1,.36,1);--z-fluid:2;--z-header:10;--z-dialog:20}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f0f1fa;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{border:0;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:6px}button:disabled{cursor:wait}h1,h2,p{margin:0;font-weight:400}::selection{background:var(--blue);color:white}.skip-link{position:fixed;top:-80px;left:20px;z-index:30;background:white;padding:15px}.skip-link:focus{top:15px}.header{position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:clamp(30px,2.45vw,50px) var(--margin);z-index:var(--z-header);pointer-events:none}.header a,.header button{pointer-events:auto}.logo{font-size:clamp(28px,2.1vw,42px);letter-spacing:-.045em;line-height:1;font-weight:500}.header-actions{display:flex;gap:18px;align-items:center}.pill{display:inline-flex;align-items:center;justify-content:center;gap:20px;white-space:nowrap;border-radius:99px;background:var(--muted);height:54px;padding:0 28px;font-size:clamp(12px,.84vw,17px);font-weight:500;position:relative;overflow:hidden;transition:background .35s var(--ease),color .35s var(--ease),transform .45s var(--ease)}.pill:active{transform:scale(.95)}.dark{background:var(--nav);color:white}.white{background:white;box-shadow:0 4px 10px #00000009;font-size:clamp(14px,1vw,20px);height:66px;padding:0 32px}.dot{width:10px;height:10px;background:currentColor;border-radius:50%;flex-shrink:0}.small-dot{font-size:14px}.menu-dots{font-size:18px;letter-spacing:2px}.sound{padding:0;width:54px;flex-shrink:0}.sound svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}.hero{height:100svh;min-height:650px;position:relative;padding:0 var(--margin);display:flex;flex-direction:column}.accent{color:var(--blue)}
.hero h1{position:absolute;left:27.65vw;top:clamp(30px,2.45vw,50px);font-size:2.5vw;line-height:1.1;letter-spacing:-.025em;width:43vw}.hero-visual{position:absolute;top:26svh;bottom:5.1svh;left:var(--margin);right:var(--margin);padding:0;overflow:hidden;border-radius:var(--radius);background:radial-gradient(ellipse at center,#23252c,#101113 80%)}.hero-hint{position:absolute;right:26px;bottom:25px;color:#fff;font-size:12px;letter-spacing:.06em;opacity:0;transition:opacity .3s}.hero-visual:hover .hero-hint{opacity:.6}.scroll-cue{position:absolute;bottom:1.2svh;left:var(--margin);right:var(--margin);display:flex;justify-content:space-between;align-items:center;font-size:30px;line-height:1}.scroll-cue b{font-weight:400;font-size:clamp(12px,1vw,20px)}.scroll-cue span:nth-child(2){position:absolute;left:33%}.scroll-cue span:nth-last-child(2){position:absolute;left:66.7%}.section{position:relative;padding-left:var(--margin);padding-right:var(--margin);scroll-margin-top:130px}.about{padding-top:10vw;padding-bottom:12vw;isolation:isolate;overflow:hidden}.ribbon{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}.ribbon path{fill:none;stroke-width:33;stroke-linecap:round;stroke-linejoin:round}.about-title{font-size:10vw;letter-spacing:-.045em;line-height:1.08;width:100%;position:relative;z-index:3}.line{display:block}.about-title .first{padding-left:15.2vw}.about-content{display:grid;grid-template-columns:1fr 1fr;gap:5.65vw;margin-top:7.5vw;align-items:start;position:relative;z-index:3}.about-copy{font-size:1.5vw;line-height:1.4;letter-spacing:-.027em}.approach{margin-top:3em;gap:18px}.arrow{display:inline-block;transition:transform .4s;transform:translateX(0)}.pill:hover .arrow{transform:translate(4px,-4px)}.flower-frame{margin-top:5.6vw;aspect-ratio:16/9;position:relative;background:#aaa2ff;overflow:hidden}.media-frame{border-radius:var(--radius)}.bloom{position:absolute;inset:0;display:block;width:100%;height:100%;mix-blend-mode:multiply;touch-action:pan-y}.flower-tint{position:absolute;inset:0;background:#5040ff;mix-blend-mode:screen;opacity:.4;pointer-events:none}.reel{padding-bottom:8vw}.reel-pin{position:relative}.marquee{font-size:clamp(14px,1.1vw,23px);overflow:hidden;height:52px;display:flex;align-items:center}.marquee>div{display:flex;min-width:max-content;animation:marquee 25s linear infinite}.marquee span{display:inline-block;width:22.5vw}.reverse>div{animation-direction:reverse}.reel-frame{display:block;position:relative;width:100%;height:76svh;min-height:400px;max-height:1000px;overflow:hidden;background:var(--blue);padding:0}.reel-video{width:100%;height:100%;object-fit:cover}.reel-frame::before{content:"";position:absolute;inset:0;background:#0b0d2a;opacity:.5;pointer-events:none;transition:opacity .6s var(--ease)}.reel-frame[data-playing]::before{opacity:0}.reel-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2.5vw;color:white;font-size:7.5vw;letter-spacing:-.035em;transition:opacity .6s var(--ease)}.reel-frame[data-playing] .reel-title{opacity:0}.reel-frame[data-playing]:focus-visible::before{opacity:.5}.reel-frame[data-playing]:focus-visible .reel-title{opacity:1}@media(hover:hover){.reel-frame[data-playing]:hover::before{opacity:.5}.reel-frame[data-playing]:hover .reel-title{opacity:1}}.play-pill{display:flex;align-items:center;justify-content:center;background:white;width:10.6vw;height:6.6vw;min-height:70px;min-width:115px;border-radius:99px;transition:transform .5s var(--ease)}.play-pill svg{width:35px;height:35px;fill:#111}.reel-cursor{position:absolute;top:0;left:0;display:grid;place-items:center;width:100px;height:100px;background:var(--blue);color:white;border-radius:50%;opacity:0;transform:translate(-50%,-50%);font-size:28px;pointer-events:none;transition:opacity .2s}.reel-frame:hover .reel-cursor{opacity:1}.work{padding-top:4vw;padding-bottom:3vw}.work-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.work-heading h2{font-size:8vw;letter-spacing:-.04em;line-height:1}.work-heading p{font-size:clamp(12px,.85vw,19px);line-height:1.45;width:21vw;margin-bottom:.3em}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw 2vw;margin-top:4vw}.project{display:block;min-width:0}.project-image{display:block;width:100%;aspect-ratio:1/.65;position:relative;overflow:hidden;border-radius:var(--radius);background:#dfdfef;padding:0;text-align:left}.project-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease),filter 1.1s var(--ease);will-change:transform}.project-image:hover img{transform:scale(1.055);filter:saturate(1.12)}.project-arrow{position:absolute;right:24px;bottom:24px;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--paper);font-size:30px;transform:translateY(90px) rotate(-30deg);transition:transform .6s var(--ease)}.project-image:hover .project-arrow,.project-image:focus-visible .project-arrow{transform:translateY(0) rotate(0)}.project-meta{font-size:clamp(10px,.8vw,16px);margin-top:1.5em;text-transform:uppercase;line-height:1.5}.project-title{display:flex;align-items:baseline;justify-content:space-between;font-size:clamp(24px,2.2vw,48px);line-height:1.15;margin-top:.4em;letter-spacing:-.03em}.project-title small{font-size:11px;letter-spacing:0;color:#535460}.project[hidden]{display:none}.all-projects{margin:5vw auto 0;display:flex}.ideas{padding-top:11vw;padding-bottom:30px;isolation:isolate;overflow:hidden}.ideas h2{font-size:8vw;letter-spacing:-.033em;line-height:1;position:relative;z-index:3}.ribbon-aqua{height:1350px;top:-100px}.ideas-content{margin-top:12vw;display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:center;position:relative;z-index:3}.ideas-copy{font-size:1.5vw;line-height:1.4;letter-spacing:-.02em}.ideas-copy p+p{margin-top:1em}.ideas-copy .pill{margin-top:2.5em}.end-note{display:flex;justify-content:space-between;gap:25px;margin-top:12vw;font-size:11px;line-height:1.5;position:relative;z-index:3}.end-note a:hover{text-decoration:underline}.scroll-indicator{position:fixed;right:10px;top:40%;height:20vh;width:5px;border-radius:10px;background:#0001;z-index:var(--z-header)}.scroll-indicator i{position:absolute;top:0;width:100%;height:35px;border-radius:10px;background:black}#fluid-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-fluid);mix-blend-mode:multiply}dialog{border:0;color:inherit;background:var(--paper);padding:0;max-width:none;max-height:none}dialog::backdrop{background:#11121bbb;backdrop-filter:blur(12px)}dialog[open]{animation:dialog-enter .55s var(--ease)}.menu-dialog{position:fixed;inset:0;width:100%;height:100svh;z-index:var(--z-dialog)}.menu-dialog::backdrop{background:transparent}.menu-inner{padding:160px var(--margin) 50px;height:100%;overflow:auto}.menu-label{font-size:12px;letter-spacing:.03em}.menu-inner nav{margin-top:35px;max-width:1100px}.menu-inner nav>a{display:flex;align-items:center;justify-content:space-between;font-size:clamp(58px,7.5vw,150px);letter-spacing:-.045em;line-height:1.1;transition:color .25s,padding-left .4s var(--ease)}.menu-inner nav>a:hover{color:var(--blue);padding-left:20px}.menu-inner nav>a span{font-size:13px;letter-spacing:0}.menu-contact{margin-top:40px;padding:0;background:none;font-size:clamp(16px,1.5vw,28px)}.dialog-close{position:absolute;right:25px;top:25px;z-index:3}.contact-dialog{width:min(800px,95vw);border-radius:25px;max-height:90svh;overflow:hidden}.contact-dialog .dialog-scroll{max-height:90svh;overflow-y:auto;padding:65px 55px}.contact-dialog h2{font-size:clamp(50px,5vw,88px);line-height:1;letter-spacing:-.045em;margin:35px 0 25px}.dialog-scroll>p{font-size:20px}form{margin-top:35px;display:grid;gap:25px}form label{display:grid;gap:10px;font-size:13px}input,textarea{width:100%;padding:12px 0;background:transparent;border:0;border-bottom:1px solid #0003;border-radius:0;font-size:18px;color:black;resize:vertical}input::placeholder,textarea::placeholder{color:#61616d}form .pill{justify-self:start}.form-status{font-size:14px;line-height:1.5}.media-dialog{width:95vw;height:92svh;background:#101114;color:white;border-radius:20px;overflow:hidden}.media-dialog-content{height:100%;padding:70px 4vw 35px;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.media-dialog-content video{width:100%;max-height:calc(100% - 50px)}.media-dialog-content img{max-width:100%;max-height:72%;object-fit:contain;border-radius:14px}.media-dialog-content h2{font-size:clamp(28px,3vw,55px)}.media-credit{font-size:13px;color:#bfc0d0;text-align:center;line-height:1.7}.media-credit a{text-decoration:underline}.brief-download{display:inline-block;text-decoration:underline;color:var(--blue);margin-top:10px}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes wave{50%{transform:scaleY(.55)}}@keyframes dialog-enter{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@font-face{font-family:Aeonik;src:url('/assets/Aeonik-Regular.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}body{font-family:Aeonik,Arial,Helvetica,sans-serif}.about-title{letter-spacing:-.02em}.ideas h2{letter-spacing:-.01em}.work-heading h2{letter-spacing:-.02em}.hero h1{letter-spacing:0}.menu-logo{position:absolute;left:var(--margin);top:clamp(30px,2.45vw,50px)}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;width:100%}.gallery-grid button{padding:0;text-align:left;background:none;color:white}.gallery-grid img{width:100%;max-height:none;aspect-ratio:1/.65;object-fit:cover;border-radius:12px}.gallery-grid span{display:block;margin-top:10px;font-size:16px}.media-dialog-content:has(.gallery-grid){justify-content:flex-start}.media-dialog-content:has(.gallery-grid) h2{align-self:flex-start;margin-bottom:20px}
@media(max-width:812px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.gallery-grid span{font-size:12px}.menu-logo{top:30px}}
@media(min-aspect-ratio:21/9){.hero h1{font-size:2vw;width:36vw}.about-title{font-size:8vw}.reel-frame{height:80svh}}
@media(max-width:812px){:root{--margin:25px;--radius:15px}.header{padding:25px}.header-actions{gap:8px}.logo{font-size:29px}.pill{height:43px;padding:0 19px;gap:12px;font-size:11px}.sound{width:43px;padding:0}.sound svg{width:24px}.white{height:54px;font-size:13px;padding:0 23px}.hero{min-height:650px}.hero h1{left:25px;top:130px;width:calc(100% - 50px);font-size:6vw;line-height:1.1}.hero-visual{top:34svh;bottom:8svh}.scroll-cue{bottom:3svh}.scroll-cue b{font-size:11px}.hero-hint{display:none}.about{padding-top:120px;padding-bottom:100px}.about-title{font-size:13.8vw;letter-spacing:-.045em}.about-title .first{padding-left:0}.about-content{grid-template-columns:1fr;gap:40px;margin-top:55px}.about-copy{font-size:22px;order:-1;line-height:1.4}.flower-frame{width:85%;margin-top:20px}.ribbon-blue{width:160%;left:-25%;opacity:.85}.ribbon path{stroke-width:28}.reel{padding-bottom:80px}.reel-frame{min-height:0;height:55svh}.reel-title{font-size:10vw;gap:15px}.play-pill{min-width:75px;min-height:52px}.play-pill svg{width:25px}.reel-cursor{display:none}.marquee{height:42px}.marquee span{width:50vw}.work{padding-top:30px}.work-heading{display:block}.work-heading h2{font-size:13vw}.work-heading p{width:100%;margin-top:25px;font-size:12px}.project-grid{grid-template-columns:1fr;gap:40px;margin-top:35px}.project-meta{font-size:10px}.project-title{font-size:30px}.project-arrow{width:45px;height:45px;right:15px;bottom:15px}.all-projects{margin-top:45px}.ideas{padding-top:110px}.ideas h2{font-size:10.4vw;line-height:1.05}.ideas-content{grid-template-columns:1fr;gap:45px;margin-top:90px}.ideas-copy{font-size:22px}.ribbon-aqua{height:850px;width:150%;left:-30%}.end-note{margin-top:80px;flex-wrap:wrap;font-size:9px}.scroll-indicator{display:none}.contact-dialog .dialog-scroll{padding:55px 25px 30px}.contact-dialog h2{font-size:62px}.dialog-close{right:15px;top:15px}.media-dialog{height:85svh}.media-dialog-content{padding:75px 20px 25px}.menu-inner{padding:130px 25px 40px}.menu-inner nav>a{font-size:16vw}#fluid-canvas{display:none}}
@media(max-width:420px){.talk{padding:0 13px}.header-actions{gap:6px}.menu-button{padding:0 14px}.logo{font-size:26px}.hero h1{font-size:7.3vw}.about-title{font-size:16vw}.ideas h2{font-size:11.4vw}.about-copy,.ideas-copy{font-size:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reel-cursor,#fluid-canvas{display:none!important}}
/* Keep modal content scrollable without exposing native scrollbar tracks. */
html,body,dialog,dialog *{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,dialog::-webkit-scrollbar,dialog ::-webkit-scrollbar{display:none;width:0;height:0}
dialog,.menu-inner,.dialog-scroll,.media-dialog-content{overscroll-behavior:contain}
.menu-dialog{margin:0;overflow:hidden;height:100dvh;max-height:100dvh}
.menu-inner{height:100%;min-height:0;overflow-x:hidden;overflow-y:auto}
/* The menu always fits one screen: links and spacing follow the viewport's height as well as its width. */
.menu-inner{padding-top:clamp(96px,15dvh,160px);padding-bottom:clamp(24px,5dvh,50px)}
.menu-inner nav{margin-top:clamp(14px,3.5dvh,35px)}
.menu-inner nav>a{font-size:clamp(40px,min(7.5vw,12.5dvh),150px)}
.menu-contact{margin-top:clamp(14px,4dvh,40px)}
@media(max-width:812px){.menu-inner{padding-top:clamp(96px,15dvh,130px)}.menu-inner nav>a{font-size:min(16vw,11dvh)}}
html:has(dialog[open]) .scroll-indicator{visibility:hidden}
html[data-input-mode="pointer"] :is(button,a):focus{outline:none}
.reel-frame .reel-cursor{opacity:0;visibility:hidden;will-change:transform}
.reel-frame[data-pointer-inside] .reel-cursor{opacity:1;visibility:visible}
.hero-visual{background:#242bf4;color:#f0f1fa;transition:background-color .4s var(--ease),color .4s var(--ease)}
.kinetic-word{position:absolute;width:94%;height:84%;left:3%;top:5%;fill:currentColor;overflow:visible;pointer-events:none}
.hero-caption{position:absolute;left:32px;bottom:27px;font-size:clamp(18px,1.3vw,26px);letter-spacing:-.02em}
.hero-visual .hero-hint{opacity:.85;color:inherit;right:32px;bottom:30px;font-size:11px;letter-spacing:.02em}
.hero-visual[data-inverted="true"]{background:#dce0ff;color:#242bf4}
/* Phone & tablet ------------------------------------------------------------ */
.hint-touch{display:none}
/* Once content scrolls beneath it, the fixed header needs its own surface on smaller screens. */
@media(max-width:1180px),(hover:none){
  .header{transition:padding .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
  .header[data-scrolled]{padding-top:14px;padding-bottom:14px;background:color-mix(in oklch,var(--paper) 84%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 #0000000d}
}
/* Touch: no sticky hover states after a tap, touch-appropriate hint, comfortable targets. */
@media(hover:none){
  .hint-pointer{display:none}.hint-touch{display:inline}
  .pill:hover .arrow{transform:none}
  .menu-inner nav>a:hover{padding-left:0;color:inherit}
  .project-arrow{transform:none}
  .reel-frame:hover .play-pill{transform:none}
  .scroll-indicator{display:none}
  .logo{padding:10px 0;margin:-10px 0}
  .end-note a{padding:14px 0;margin:-14px 0}
  .project-title a{min-height:44px}
  /* Footer links tile their 10px gaps (28px targets, none overlapping); the rest have room to grow. */
  .footer-col a{padding:5px 0;margin:-5px 0}
  .footer-bottom a{padding:14px 0;margin:-14px 0}
  .menu-contact{padding:12px 0;margin-top:28px}
}
/* Tablet portrait and small landscape: the desktop headline would collide with the header. */
@media(min-width:813px) and (max-width:1100px){
  .hero h1{left:var(--margin);top:118px;width:min(82vw,800px);font-size:4.4vw;line-height:1.12}
  .hero-visual{top:calc(150px + 10vw)}
  .about-copy,.ideas-copy{font-size:max(2.2vw,19px)}
  .work-heading p{width:32vw;font-size:12px}
  .project-meta{font-size:11px}
  .project-summary{font-size:17px}
  .menu-inner{padding-top:140px}
}
/* Small laptops and iPad landscape: the header pills keep their size, so the headline narrows and moves left to clear them. */
@media(min-width:1101px) and (max-width:1400px){.hero h1{left:25vw;width:38vw;font-size:2.2vw}}
@media(min-width:813px) and (max-width:1100px) and (orientation:portrait){
  .kinetic-word{width:88%;height:auto;aspect-ratio:1100/520;left:6%;top:50%;translate:0 -50%}
  .about-content{grid-template-columns:1fr;gap:50px}
  .about-copy{order:-1;max-width:640px;font-size:24px}
  .flower-frame{width:75%;margin-top:0}
  .ideas-content{grid-template-columns:1fr;gap:60px}
  .ideas-copy{font-size:24px;max-width:640px}
  .device-scene{width:80%;justify-self:center}
}
@media(max-width:812px){
  .scroll-cue span:nth-child(2),.scroll-cue span:nth-last-child(2){display:none}
}
/* Header pills ------------------------------------------------- */
:root{--snap:cubic-bezier(.4,0,.1,1)}
.header{--pad-y:clamp(30px,2.45vw,50px);--pill-h:54px}
@media(max-width:812px){.header{--pad-y:25px;--pill-h:43px}}
@media(max-width:1180px),(hover:none){.header[data-scrolled]{--pad-y:14px}}
/* Fluid fill: the disc sits between the pill's background and its content. */
.pill{isolation:isolate;transition:background-color .4s var(--ease),color .35s var(--ease),transform .45s var(--ease)}
.pill-fill{position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;background:var(--blue);z-index:-1;pointer-events:none;will-change:transform}
.pill[data-filled],.pill.sound[aria-pressed=true]{color:white}
.media-dialog>.dialog-close[data-filled]{color:white}
/* Reel: the video fills the screen with nothing on it but a round close button. */
.media-dialog[data-reel]{width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border-radius:0;background:#000;overflow:hidden}
.media-dialog[data-reel] .media-dialog-content{display:block;padding:0;overflow:hidden}
.media-dialog[data-reel] .media-dialog-content video{display:block;width:100%;height:100%;max-height:none;object-fit:contain}
.media-dialog[data-reel]>.dialog-close{width:54px;padding:0;font-size:24px;color:#111}
.media-dialog[data-reel] .close-label{display:none}
@media(max-width:812px){.media-dialog[data-reel]>.dialog-close{width:43px;font-size:20px}}
/* Projects and screenshots grow out of what was clicked (openFrom in main.js), so the generic dialog entrance is skipped. */
dialog[data-opening]{animation:none}
/* Let's talk: arrow slides in, label shifts, dot scales away. */
.talk{gap:0}
.talk-arrow{position:absolute;left:22px;top:50%;width:16px;height:16px;margin-top:-8px;transform:translateX(-46px);transition:transform .3s var(--snap)}
.talk-arrow svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.talk-label{transition:transform .3s var(--snap)}
.talk-dot{width:5px;height:5px;margin-left:14px;border-radius:50%;background:currentColor;transition:transform .15s var(--snap)}
.talk[data-filled] .talk-arrow{transform:none}
.talk[data-filled] .talk-label{transform:translateX(12px)}
.talk[data-filled] .talk-dot{transform:scale(0)}
/* Sound: the waveform path is drawn by script (flat when off). */
.sound svg{overflow:visible}.sound path{stroke-width:2.2}
/* Menu button: white on hover/open, dots turn upright, MENU rolls up to CLOSE. */
.menu-button{gap:12px;transition:background-color .4s var(--ease),color .4s var(--ease),transform .45s var(--ease)}
.menu-button-label{display:grid;overflow:hidden;line-height:1.25}
.menu-button-label>span{grid-area:1/1;transition:transform .3s var(--snap)}
.menu-button-label>span+span{transform:translateY(105%)}
.menu-dots{position:relative;width:16px;height:16px;font-size:0;letter-spacing:0;transition:transform .4s var(--snap)}
.menu-dots i{position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:currentColor}
.menu-dots i:first-child{left:1px}.menu-dots i:last-child{right:1px}
@media(hover:hover){.menu-button:hover{background:white}.menu-button:hover .menu-dots{transform:rotate(90deg)}}
.menu-button[aria-expanded=true]{background:white}
.menu-button[aria-expanded=true] .menu-dots{transform:rotate(90deg)}
.menu-button[aria-expanded=true] .menu-button-label>span:first-child{transform:translateY(-105%)}
.menu-button[aria-expanded=true] .menu-button-label>span+span{transform:none}
/* Narrowest phones (320px): the logo and three pills only fit with tighter pills, which keeps
   a gap after the logo and the 25px edge margin. */
@media(max-width:359px){.header-actions{gap:5px}.talk{padding:0 10px}.talk-dot{margin-left:8px}.menu-button{padding:0 11px;gap:8px}}
/* Reel play pill: white at rest; hovering the pill itself makes a blue fill rises from below with a curved,
   liquid leading edge (a large disc), and drains back down on leave. */
.play-pill{position:relative;overflow:hidden;isolation:isolate;transition:background-color .1s}
.play-pill::before{content:"";position:absolute;left:-40%;top:100%;width:180%;aspect-ratio:1;border-radius:50%;background:var(--blue);z-index:-1;transition:transform .55s var(--snap)}
.play-pill svg{position:relative;transition:fill .3s var(--snap)}
@media(hover:hover){.play-pill:hover{background:var(--blue);transition:background-color .1s .3s}.play-pill:hover::before{transform:translateY(-48%)}.play-pill:hover svg{fill:white}.reel-frame:has(.play-pill:hover) .reel-cursor{opacity:0}}
.reel-frame:focus-visible .play-pill::before{transform:translateY(-48%)}.reel-frame:focus-visible .play-pill svg{fill:white}
/* Preloader ----------------------------------------------------------------------- */
.preloader{position:fixed;inset:0;z-index:100;background:#000;color:#fff;overflow:hidden;animation:preloader-failsafe .01s 7s forwards}
@keyframes preloader-failsafe{to{visibility:hidden;opacity:0}}
.pl-mark{position:absolute;left:50%;top:50%;width:120px;height:84px;margin:-42px 0 0 -60px}
.pl-mark i{position:absolute;display:block;background:#fff}
.pl-mark .pl-track{left:5px;top:34px;width:110px;height:16px;background:#2b2b31}
.pl-fill{left:5px;top:34px;width:110px;height:16px;transform-origin:0 50%;transform:scaleX(0)}
.pl-top,.pl-bottom{opacity:0}
.pl-diag{left:18px;top:35px;width:84px;height:14px;transform:scaleX(0)}
.pl-count{position:absolute;left:clamp(14px,1.6vw,30px);bottom:clamp(10px,1.4vw,26px);display:flex;font-size:clamp(64px,9vw,170px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pl-digit{display:block;height:1em;overflow:hidden;width:.6em}
.pl-digit>span{display:block;transition:transform .45s var(--snap)}
.pl-digit i{display:block;height:1em;font-style:normal;text-align:center}
@media(prefers-reduced-motion:reduce){.preloader{display:none}}
/* Masked line reveals: pad the clip so descenders are not cut. */
.splitline-mask{padding-bottom:.14em;margin-bottom:-.14em}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Project titles: an arrow slides in as the card is hovered. */
.project-title h3{position:relative;display:flex;align-items:center}
.project-title-arrow{position:absolute;left:0;top:50%;width:.8em;height:.8em;margin-top:-.4em;opacity:0;transform:translateX(-130%);transition:transform .5s var(--snap),opacity .3s}
.project-title-arrow svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.project-title-text{display:block;transition:transform .5s var(--snap)}
@media(hover:hover){.project:has(.project-image:hover) .project-title-arrow{opacity:1;transform:none}.project:has(.project-image:hover) .project-title-text{transform:translateX(1.15em)}}
.project:has(.project-image:focus-visible) .project-title-arrow{opacity:1;transform:none}.project:has(.project-image:focus-visible) .project-title-text{transform:translateX(1.15em)}
/* Phone hero: headline and frame stack in normal flow, so the frame always starts just under the copy
   and fills what is left of the screen. The wordmark box matches the SVG viewBox (it is drawn with
   preserveAspectRatio="none"), so the letters keep their drawn proportions instead of stretching tall. */
@media(max-width:812px){
  .hero{height:auto;min-height:0;padding-top:108px;padding-bottom:calc(3svh + 42px)}
  .hero h1{position:static;width:auto;font-size:7.4vw;line-height:1.1;letter-spacing:-.015em}
  .hero h1 .line{text-wrap:balance}
  /* Fill the screen below a ~4-line headline, but never taller than a poster so the wordmark is not lost in it. */
  .hero-visual{position:relative;inset:auto;flex:none;height:clamp(300px,calc(97svh - 180px - 33vw),125vw);margin-top:clamp(22px,4svh,40px)}
  .kinetic-word{width:88%;height:auto;aspect-ratio:1100/520;left:6%;top:50%;translate:0 -50%}
  .hero-visual .hero-hint{display:block;top:20px;left:20px;right:auto;bottom:auto;font-size:11px;letter-spacing:.04em;text-align:left}
  .hero-caption{left:20px;right:20px;bottom:18px;font-size:22px;text-align:left}
  .scroll-cue{bottom:calc(3svh + 4px)}
}
@media(max-width:812px) and (max-height:700px){.hero{padding-top:96px}.hero h1{font-size:6.6vw}}
/* Phones on their side (and narrow landscape windows): a shorter headline and a frame no taller than the screen.
   The letters are capped by the frame's height as well as its width (frame height less ~110px for the hint and
   caption, times the 1100:520 artwork ratio), so they never run into either. */
@media(max-width:812px){.kinetic-word{left:50%;translate:-50% -50%;width:min(88%,calc((clamp(300px,calc(97svh - 180px - 33vw),125vw) - 110px)*2.115))}}
@media(max-width:812px) and (orientation:landscape){
  .hero h1{font-size:4.4vw}
  .hero-visual{height:clamp(200px,calc(100svh - 90px),300px)}
  .kinetic-word{width:min(88%,calc((clamp(200px,calc(100svh - 90px),300px) - 110px)*2.115))}
}
/* Page transition curtain (top layer via popover where supported). */
.page-transition{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;z-index:200;display:none;cursor:progress}
.page-transition:popover-open,.page-transition.is-open{display:block}
.page-transition::backdrop{display:none}
.page-transition canvas{display:block;width:100%;height:100%}
/* Laptop ------------------------------------------------------------------------
   A CSS 3D notebook. The camera wrapper pitches the view down onto the deck; page.js turns the laptop and
   opens the lid on its hinge as the section scrolls in (the CSS below is the resting, open state, used as-is
   with reduced motion). Container units scale the whole model with its column. */
.device-scene{container-type:inline-size;perspective:2600px;perspective-origin:50% 10%;padding:3cqw 0 15cqw}
.laptop-camera{transform-style:preserve-3d;transform:rotateX(-13deg)}
.laptop{--alu:#c9ccd4;position:relative;width:80cqw;aspect-ratio:1/.645;margin:0 auto;transform-style:preserve-3d;transform:rotateY(-8deg)}
.laptop-lid{position:absolute;inset:0;transform-origin:50% 100%;transform-style:preserve-3d;transform:rotateX(8deg)}
.laptop-face,.laptop-back{position:absolute;inset:0;border-radius:3cqw 3cqw .9cqw .9cqw;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.laptop-face{background:#0a0a0d;padding:1.5cqw 1.5cqw 2.6cqw;box-shadow:inset 0 0 0 .22cqw #34353c,0 0 0 .14cqw #8b8e98}
.laptop-notch{position:absolute;left:50%;top:1.5cqw;width:9cqw;height:1.5cqw;translate:-50% 0;background:#0a0a0d;border-radius:0 0 .7cqw .7cqw;z-index:2}
.laptop-notch::after{content:"";position:absolute;left:50%;top:30%;width:.6cqw;aspect-ratio:1;border-radius:50%;translate:-50% 0;background:#1f2a44;box-shadow:0 0 0 .12cqw #15161b}
.laptop-display{position:relative;height:100%;overflow:hidden;border-radius:.9cqw .9cqw .2cqw .2cqw;background:#111}
.laptop-display::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,#ffffff1f,transparent 38%);pointer-events:none}
.laptop-back{transform:translateZ(-.5cqw) rotateY(180deg);background:linear-gradient(160deg,#e3e5ea,var(--alu) 55%,#b4b7c1);display:grid;place-items:center}
.laptop-back span{font-size:7cqw;letter-spacing:-.05em;color:#b3b6c0;text-shadow:0 1px 0 #ffffff99}
.laptop-base{position:absolute;left:-.8cqw;right:-.8cqw;top:100%;height:54cqw;transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;background:linear-gradient(180deg,#b9bcc6,var(--alu) 14%,#d9dbe0);border-radius:.8cqw .8cqw 2.6cqw 2.6cqw}
.laptop-base::before{content:"";position:absolute;left:12%;right:12%;top:0;height:2.2cqw;background:linear-gradient(#24252b,#5a5c64);border-radius:0 0 .6cqw .6cqw}
.laptop-keys{position:absolute;left:9%;right:9%;top:10%;height:37%;border-radius:.6cqw;box-shadow:0 0 0 .5cqw #babdc6;background:repeating-linear-gradient(180deg,transparent 0 calc(16.666% - .5cqw),var(--alu) calc(16.666% - .5cqw) 16.666%),repeating-linear-gradient(90deg,#26272d 0 calc(6.666% - .45cqw),var(--alu) calc(6.666% - .45cqw) 6.666%)}
.laptop-trackpad{position:absolute;left:30%;right:30%;bottom:7%;height:36%;border-radius:1.2cqw;background:linear-gradient(#d5d7dd,#c6c9d0);box-shadow:inset 0 0 0 .18cqw #0000001c}
.laptop-lip{position:absolute;left:0;right:0;top:100%;height:1.6cqw;transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(#a9acb6,#80838e);border-radius:0 0 1.4cqw 1.4cqw}
.laptop-lip::after{content:"";position:absolute;left:43%;right:43%;top:0;height:55%;background:#6f727c;border-radius:0 0 1cqw 1cqw}
.laptop-shadow{position:absolute;inset:6% 2% -4%;transform:translateZ(-2.2cqw);background:#1b1f4a;border-radius:4cqw;filter:blur(3cqw);opacity:.3}
.device-toolbar{height:3.4cqw;background:#1b1c21;display:flex;gap:.6cqw;align-items:center;padding:0 1.4cqw;color:#9c9dad;font-size:1.25cqw}
.device-toolbar i{width:.8cqw;height:.8cqw;border-radius:50%;background:#ff5f57}
.device-toolbar i:nth-child(2){background:#febc2e}.device-toolbar i:nth-child(3){background:#28c840}
.device-toolbar span{margin-left:2.4cqw;padding:.35cqw 3cqw .35cqw 1.2cqw;border-radius:.5cqw;background:#2a2b31}
.device-screen{position:relative;height:calc(100% - 3.4cqw);overflow:hidden}
.device-screen img{width:100%;height:100%;object-fit:cover}
/* Pages ------------------------------------------------------------------------- */
main[data-page-root]{outline:none}
/* Entrance transforms (cards tilting in, the pledge stamp) reach past the screen edge until they settle; clip them
   so the page never scrolls sideways. clip keeps vertical overflow visible; hidden is the fallback for Safari 15. */
main[data-page-root]{overflow-x:hidden;overflow-x:clip}
.eyebrow{font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.page-hero{min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:150px;padding-bottom:6vw}
.page-title{font-size:10.5vw;line-height:.95;letter-spacing:-.045em;margin:.25em 0 0}
.page-title .line{display:block}
.page-lede{max-width:34ch;margin-top:3vw;margin-left:auto;font-size:clamp(20px,1.7vw,34px);line-height:1.3;letter-spacing:-.02em}
.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:4vw}
.section-title{font-size:6.2vw;line-height:1;letter-spacing:-.04em}
/* About */
.manifesto{padding-top:4vw;padding-bottom:10vw}
.manifesto-copy{font-size:3.8vw;line-height:1.12;letter-spacing:-.035em;max-width:94%}
.chip{display:inline-block;width:2em;height:.92em;border-radius:.46em;overflow:hidden;vertical-align:-.1em;background:var(--muted)}
/* Line-art chips: ivory strokes on cobalt, same pill as the hero's ZEL frame. */
.chip-art{background:var(--blue);color:var(--paper)}
.chip-art svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chip-art circle,.chip-art .fill{fill:currentColor;stroke:none}
/* The two charts bob out of step: dashboards that never agree. */
.chip-bars rect{transform-box:fill-box;transform-origin:50% 100%;animation:chip-bar 1.8s var(--ease) infinite alternate;animation-play-state:inherit}
.chip-bars rect:nth-child(even){animation-delay:-.9s}
.chip-bars rect:nth-child(n+4){animation-direction:alternate-reverse}
@keyframes chip-bar{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
.ledger{padding-top:4vw;padding-bottom:9vw}
.ledger-note{font-size:clamp(16px,1.15vw,22px);line-height:1.45;max-width:36ch;margin:-2vw 0 3vw}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2vw}
.stat{display:flex;flex-direction:column;border-top:1px solid #0002;padding:1.6vw 0 3.4vw}
.stat strong{font-weight:400;font-size:7.4vw;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stat strong em{font-style:normal;font-size:.45em;letter-spacing:0;margin-left:.08em;vertical-align:.9em;color:var(--blue)}
.stat p{margin-top:1.2vw;font-size:clamp(15px,1.05vw,20px);line-height:1.45;max-width:30ch}
.stat small{margin-top:auto;padding-top:1.4vw;font-size:11px;letter-spacing:.06em;color:var(--blue)}
.service-tags{display:block;margin-top:.9em;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#55566a}
.services{padding-top:6vw;padding-bottom:8vw}
/* Services read as a route map: steps alternate either side of a dotted trail that draws with scroll. */
.route-map{position:relative;margin-top:1vw}
.route{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.route path{fill:none}
.route-ghost,.route-line{stroke-width:4;stroke-linecap:round;stroke-dasharray:0 13}
.route-ghost{stroke:#0000001f}
.route-line{stroke:var(--blue)}
.route-mask{stroke:#fff;stroke-width:18}
.route-tip{fill:var(--blue);stroke:var(--paper);stroke-width:3;transition:opacity .3s}
.route-start,.route-end{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;width:max-content;margin:0 auto;font-size:11px;letter-spacing:.08em;color:var(--blue)}
.route-start{margin-bottom:4vw}
.route-end{margin-top:3vw}
.route-pin{display:block;width:16px;height:16px;border-radius:50%;border:2px solid var(--blue);background:var(--paper);transition:background-color .3s}
.route-pin[data-reached]{background:var(--blue)}
.route-x{display:block;width:clamp(44px,3.4vw,64px);aspect-ratio:1;color:#0003;transition:color .3s}
.route-x svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round}
.route-x[data-reached]{color:var(--blue);animation:route-pop .6s var(--ease)}
@keyframes route-pop{40%{transform:scale(1.2)}}
.service-list{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1vw}
.service-list li{position:relative;width:50%;display:grid;grid-template-columns:1fr auto;column-gap:3vw;align-items:start;padding-right:9vw;text-align:right}
.service-list li:nth-child(even){margin-left:50%;grid-template-columns:auto 1fr;padding:0 0 0 9vw;text-align:left}
.service-list li:nth-child(odd)>.service-index{grid-column:2;grid-row:1}
.service-index{display:grid;place-items:center;width:clamp(44px,3.4vw,64px);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--blue);background:var(--paper);font-size:13px;color:var(--blue);transition:background-color .35s,color .35s}
.service-index[data-reached]{background:var(--blue);color:var(--paper);animation:route-pop .6s var(--ease)}
.service-list h3{font-size:clamp(26px,2.6vw,52px);font-weight:400;letter-spacing:-.03em;margin:0}
.service-list p{margin:1vw 0 0;font-size:clamp(16px,1.15vw,22px);line-height:1.45;max-width:46ch}
.service-list li:nth-child(odd) p{margin-left:auto}
/* The pledge: each rule strikes out the excuse it replaces, and the section ends signed and stamped. */
.pledge{padding-top:4vw;padding-bottom:8vw}
.pledge-list{list-style:none;margin:0;padding:0}
.rule{display:grid;grid-template-columns:8vw 1fr 26vw;column-gap:3vw;align-items:end;border-top:1px solid #0002;padding:2.6vw 0 3.2vw}
.rule-mark{grid-row:1/3;align-self:start;font-size:13px;letter-spacing:.04em;color:var(--blue)}
.rule-excuse{grid-column:2/4;margin:0;font-size:clamp(18px,1.6vw,30px);letter-spacing:-.02em;color:#0000008c}
.rule-excuse s{text-decoration:none;background:linear-gradient(var(--blue),var(--blue)) no-repeat 0 58%/100% .09em}
.rule h3{grid-column:2;margin:1.4vw 0 0;font-size:clamp(34px,4.4vw,84px);font-weight:400;line-height:1.02;letter-spacing:-.04em}
.rule-detail{grid-column:3;margin:0;font-size:clamp(16px,1.15vw,22px);line-height:1.45}
.pledge-sign{display:grid;grid-template-columns:8vw 1fr;column-gap:3vw;border-top:1px solid #0002;padding-top:2.6vw}
.pledge-sign>*{grid-column:2}
.pledge-label,.pledge-who{margin:0;font-size:11px;letter-spacing:.08em;color:#55566a}
.pledge-art{position:relative;width:max-content;margin:1vw 0 .4vw}
.signature{display:block;width:clamp(240px,26vw,480px);height:auto;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stamp{position:absolute;left:100%;top:8%;width:clamp(96px,8.6vw,160px);height:auto;margin-left:1.2vw;transform:rotate(-12deg);fill:none;stroke:var(--blue);stroke-width:2.5;mix-blend-mode:multiply}
.stamp text{fill:var(--blue);stroke:none;font-size:8.6px;letter-spacing:.06em}
.stamp .stamp-core{font-size:21px;letter-spacing:-.02em}
.cta-band{padding-top:6vw;padding-bottom:9vw;display:flex;align-items:flex-end;justify-content:space-between;gap:4vw;flex-wrap:wrap}
.cta-band h2{font-size:7.6vw;line-height:1;letter-spacing:-.045em}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.page-hero .cta-actions{margin-top:clamp(32px,3vw,56px);align-items:center}
/* Projects */
.projects-hero{position:relative;min-height:70svh}
.projects-title{font-size:15.5vw;text-transform:uppercase;letter-spacing:-.05em}
.projects-count{position:absolute;right:var(--margin);top:calc(150px + 4vw);display:flex;flex-direction:column;align-items:flex-end;gap:1.2vw;font-size:clamp(24px,3vw,60px);line-height:1}
.projects-arrow{font-size:1.4em}
.projects-page{padding-top:0;padding-bottom:6vw}
.projects-page .project-grid{margin-top:0}
/* Contact */
.contact-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px var(--margin) 70px;overflow:hidden;isolation:isolate}
.confetti{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.contact-title{font-size:9vw;line-height:1;margin:.3em 0 .5em}
.contact-body{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding-top:7vw;padding-bottom:9vw;align-items:start}
.contact-intro h2{font-size:5vw;line-height:1;letter-spacing:-.04em}
.contact-intro p{font-size:clamp(18px,1.4vw,28px);line-height:1.4;margin-top:2vw;max-width:34ch}
.contact-steps{list-style:none;padding:0;margin:3vw 0 0;display:grid;gap:12px}
.contact-steps li{display:flex;gap:18px;align-items:baseline;font-size:clamp(16px,1.2vw,22px);padding:14px 0;border-bottom:1px solid #0002}
.contact-steps span{font-size:12px;color:var(--blue)}
.contact-page-form{margin-top:0;background:white;border-radius:var(--radius);padding:3vw}
/* Footer + next page */
.site-footer{position:relative;z-index:3;background:var(--paper)}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:3vw;padding-top:6vw;padding-bottom:4vw;border-top:1px solid #0002}
.footer-logo{font-size:clamp(40px,4vw,80px);letter-spacing:-.05em;line-height:1}
.footer-brand p{margin-top:14px;font-size:15px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:15px}
.footer-col a:hover{text-decoration:underline}
.footer-col p{font-size:15px;line-height:1.45}
.footer-label{font-size:11px;letter-spacing:.06em;margin-bottom:6px;color:#55566a}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:30px;font-size:11px}
.next-page{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;min-height:62svh;padding:4vw var(--margin) 3.4vw;background:#0d0e14;color:white;overflow:hidden}
.next-hint{grid-column:1/-1;font-size:11px;letter-spacing:.06em;line-height:1.5;color:#a8a9b8}
.next-title{align-self:end;font-size:9vw;line-height:.9;letter-spacing:-.045em;text-transform:uppercase;transition:transform .6s var(--snap)}
.next-label{align-self:end;display:flex;align-items:center;gap:16px;font-size:12px;letter-spacing:.06em;padding-bottom:1.2vw}
.next-label i{position:relative;display:block;width:clamp(90px,10vw,180px);height:3px;border-radius:3px;background:#ffffff24;overflow:hidden}
.next-label b{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:white}
.next-label b+b{background:#79f24a}
@media(hover:hover){.next-page:hover .next-title{transform:translateX(1.5vw)}}
@media(max-width:812px){
  .page-hero{min-height:78svh;padding-top:120px;padding-bottom:50px}
  .page-title{font-size:15vw}
  .projects-title{font-size:19vw}
  .projects-count{top:118px;font-size:26px}
  .page-lede{margin-left:0;margin-top:28px;font-size:20px}
  .section-title{font-size:11vw}
  .manifesto{padding-bottom:90px}
  .manifesto-copy{font-size:7.4vw;max-width:none}
  .ledger-note{margin:0 0 30px}
  .stats{grid-template-columns:1fr 1fr;gap:0 16px}
  .stat{padding:18px 0 34px}
  .stat strong{font-size:15vw}
  .stat p{margin-top:12px}
  .stat small{padding-top:14px}
  .route-start,.route-end{margin-left:0;align-items:flex-start}
  .route-start{margin-bottom:34px}
  .route-end{margin-top:30px}
  .route-pin{margin-left:14px}
  .route-x{width:44px}
  .service-list{gap:34px}
  .service-list li,.service-list li:nth-child(even){width:auto;margin-left:0;grid-template-columns:44px 1fr;column-gap:18px;padding:0;text-align:left}
  .service-list li:nth-child(odd)>.service-index{grid-column:1}
  .service-list p{margin-top:10px}
  .service-list li:nth-child(odd) p{margin-left:0}
  .rule{grid-template-columns:1fr;padding:26px 0 30px}
  .rule-mark{grid-row:auto;margin-bottom:12px}
  .rule-excuse,.rule h3,.rule-detail{grid-column:1}
  .rule h3{margin-top:12px;font-size:9.4vw}
  .rule-detail{margin-top:14px}
  .pledge-sign{grid-template-columns:1fr;padding-top:26px}
  .pledge-sign>*{grid-column:1}
  .pledge-art{margin:14px 0 6px}
  .signature{width:62vw}
  .stamp{width:86px;margin-left:8px}
  .cta-band h2{font-size:13vw}
  .contact-title{font-size:15vw}
  .contact-body{grid-template-columns:1fr;gap:40px}
  .contact-intro h2{font-size:11vw}
  .contact-page-form{padding:24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px 20px;padding-top:50px}
  .footer-brand{grid-column:1/-1}
  .next-page{min-height:52svh;padding:30px 25px}
  .next-title{font-size:15vw}
}
@media(min-width:813px) and (max-width:1100px){.service-list li{padding-right:4vw}.service-list li:nth-child(even){padding-left:4vw}.rule{grid-template-columns:10vw 1fr}.rule-excuse,.rule-detail{grid-column:2}.rule-detail{margin-top:1.6vw}.pledge-sign{grid-template-columns:10vw 1fr}.stats{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
/* Form fields: no focus box; the underline itself turns blue and thicker. */
input:focus,input:focus-visible,textarea:focus,textarea:focus-visible{outline:none;border-bottom-color:var(--blue);box-shadow:0 1px 0 var(--blue)}
input,textarea{transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
@media(max-width:812px){.next-page{grid-template-columns:1fr;grid-template-rows:1fr auto auto;row-gap:18px}.next-label{justify-self:start;padding-bottom:0}}
/* Brief form: three short steps of tap-to-pick choices, contact details last. */
.brief-progress{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;font-size:11px;letter-spacing:.08em;color:#55566a}
.brief-progress b{font-weight:400}
.brief-progress i{display:flex;gap:6px}
.brief-progress i b{display:block;width:28px;height:3px;border-radius:3px;background:#0000001a;transition:background-color .4s}
form[data-step="1"] .brief-progress i b:first-child,form[data-step="2"] .brief-progress i b:nth-child(-n+2),form[data-step="3"] .brief-progress i b{background:var(--blue)}
.brief-step{display:none;border:0;margin:0;padding:0;min-width:0}
form[data-step="1"] .brief-step[data-index="1"],form[data-step="2"] .brief-step[data-index="2"],form[data-step="3"] .brief-step[data-index="3"]{display:block}
.brief-step>legend{padding:0;margin-bottom:18px;font-size:clamp(22px,1.9vw,32px);line-height:1.15;letter-spacing:-.03em}
.brief-step>legend:focus{outline:none}
.brief-hint{margin:-8px 0 16px;font-size:13px;color:#55566a}
.choices{display:flex;flex-wrap:wrap;gap:8px}
form label.choice{display:block;position:relative;font-size:15px;cursor:pointer}
.choice input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.choice span{display:block;padding:.62em 1.15em;border:1px solid #00000033;border-radius:99px;transition:background-color .25s,color .25s,border-color .25s}
.choice:hover span{border-color:var(--ink)}
.choice input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.choice input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.brief-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:22px}
.brief-step textarea{resize:none}
.brief-error{margin:0;font-size:13px;color:#b42318}
.brief-error:empty,.form-status:empty{display:none}
.brief-nav{display:flex;flex-wrap:wrap;gap:10px}
form[data-step="1"] [data-brief-back],form[data-step="3"] [data-brief-next],form:not([data-step="3"]) [data-brief-submit]{display:none}
.form-status .brief-send,.form-status .brief-download{display:inline;margin:0;color:var(--blue);text-decoration:underline}
/* The contact dialog sizes itself to the screen's height, so it never needs to scroll. */
.contact-dialog .dialog-scroll{padding:clamp(34px,6svh,65px) clamp(25px,5vw,55px)}
.contact-dialog h2{font-size:clamp(44px,min(5vw,8svh),88px);margin:clamp(16px,3svh,35px) 0 clamp(10px,2svh,25px)}
.contact-dialog form{margin-top:clamp(18px,3svh,35px);gap:clamp(16px,2.6svh,25px)}
@media(max-width:812px){.brief-row{grid-template-columns:1fr;gap:20px}}
/* Direct contact: email, phones and Instagram wherever someone might look for them. */
@media(min-width:1101px){.footer-grid{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}}
.menu-direct{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:clamp(12px,2.4dvh,22px);font-size:13px}
.menu-direct a:hover,.contact-direct a:hover{text-decoration:underline}
.contact-direct{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:3vw;font-size:clamp(17px,1.4vw,24px);letter-spacing:-.02em}
@media(max-width:812px){.contact-direct{margin-top:34px}}
/* Phones: the stamp lands on the signature's end instead of beside it, so the pair never outgrows a 320px screen. */
@media(max-width:812px){.pledge-art{width:100%}.signature{width:min(62vw,300px)}.stamp{left:auto;right:0;margin-left:0}}
/* Touch: the email and Instagram links are full-height targets without moving the text. */
@media(hover:none){
  .contact-direct{gap:0}.contact-direct a{padding:10px 0}
  .menu-direct{row-gap:0}.menu-direct a{padding:10px 0}
}
/* Short landscape screens (phones on their side): the links take the left column and the contact block the right, so it still fits. */
@media(orientation:landscape) and (max-height:500px){
  .menu-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,max-content);grid-template-rows:auto 1fr auto;column-gap:6vw;padding-top:84px}
  .menu-label{grid-column:1/-1}
  .menu-inner nav{grid-row:2/4;max-width:none}
  .menu-inner nav>a{font-size:min(9vw,12dvh)}
  .menu-contact{grid-column:2;align-self:end;max-width:34vw;margin-top:0;padding:6px 0;text-align:left;white-space:normal}
  .menu-direct{grid-column:2;flex-direction:column;align-items:flex-start;gap:0;margin-top:8px}
  .menu-direct a{padding:6px 0}
}