:root{--grain-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 0.32'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");--grain-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 0.6'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");--mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'%3E%3Cdefs%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='2' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='2' seed='8' result='b'/%3E%3CfeDisplacementMap in='a' in2='b' scale='60' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.66 0 0 0 0 0.8 0 0 0 0 0.93 3 0 0 0 -1.35'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' seed='14' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='2' seed='4' result='b'/%3E%3CfeDisplacementMap in='a' in2='b' scale='60' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.02 0 0 0 0 0.1 0 0 0 0 0.25 3 0 0 0 -1.35'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='1200' height='800' fill='url(%23g)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Crect width='1200' height='800' filter='url(%23l)'/%3E%3Crect width='1200' height='800' filter='url(%23d)'/%3E%3C/g%3E%3C/svg%3E")}
@font-face{font-family:Hanken;src:url('assets/HankenGrotesk-VariableFont_wght.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Hanken;src:url('assets/HankenGrotesk-Italic-VariableFont_wght.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Chivo;src:url('assets/ChivoMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Reenie;src:url('assets/ReenieBeanie-Regular.woff2') format('woff2');font-display:swap}
:root{--ink:#16294f;--blue:#174375;--sky:#a7cdec;--cover:#0f3773;--paper:#f6f4f1;--warm:#f6e9d2;--cool:#eff5f7;--coral:#e0885e;--muted:#44668e;--rule:rgba(23,67,117,.24);--pad:clamp(24px,4.45vw,80px);--gutter:clamp(20px,2.22vw,40px);--section:clamp(88px,10vw,160px);--ease:cubic-bezier(.22,1,.36,1);--short:240ms;--medium:650ms;--long:1000ms;--heading:clamp(44px,5.8vw,88px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 Hanken,Arial,sans-serif}body.menu-open{overflow:hidden}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer}img,svg{display:block;max-width:100%}img{height:auto}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:450;letter-spacing:-.048em;line-height:1.04}h2{font-size:var(--heading)}h3{font-size:clamp(26px,2.6vw,38px)}em{font-weight:400}p+p{margin-top:1em}p{max-width:68ch}::selection{background:var(--sky);color:var(--ink)}:focus-visible{outline:2px solid currentColor;outline-offset:6px}a,button,input,textarea{touch-action:manipulation}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;z-index:100;top:8px;left:8px;background:var(--paper);padding:12px 24px;transform:translateY(-150%)}.skip:focus{transform:none}.meta,.eyebrow,.case-num{font:400 11px/1.55 Chivo,monospace;text-transform:uppercase;letter-spacing:.065em}.meta{font-size:clamp(10px,.84vw,12px)}.eyebrow{margin-bottom:32px}.section{padding:var(--section) var(--pad)}.paper{background-color:#f6f4ef;background-image:var(--grain-paper),radial-gradient(38% 46% at 62% 34%,rgba(242,216,182,.55),rgba(242,216,182,0) 100%),radial-gradient(34% 40% at 20% 80%,rgba(220,234,246,.55),rgba(220,234,246,0) 100%);background-size:180px 180px,100% 100%,100% 100%;background-repeat:repeat,no-repeat,no-repeat;background-blend-mode:overlay,normal,normal}.page{display:none}.page.active{display:block}.page.active.route-enter{animation:page-in 500ms var(--ease) both}
.nav{position:absolute;z-index:30;top:0;left:0;right:0;height:104px;margin:0 var(--pad);display:flex;align-items:center;justify-content:space-between;color:var(--sky);border-bottom:1px solid rgba(167,205,236,.32)}.brand{display:block;width:160px;flex-shrink:0}.brand img{width:100%;height:auto;filter:brightness(0) saturate(100%) invert(82%) sepia(14%) saturate(758%) hue-rotate(169deg) brightness(96%) contrast(91%)}.navlinks{display:flex;gap:clamp(24px,3vw,48px);align-items:center;font-size:16px;line-height:1.4}.navlinks a{position:relative;padding:12px 0}.navlinks a:after{content:'';position:absolute;left:0;bottom:5px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--short) var(--ease)}.navlinks a:hover:after,.navlinks a[aria-current=page]:after{transform:scaleX(1);transform-origin:left}.nav-contact{display:flex;gap:32px;align-items:center}.nav-contact span{font-size:24px}.menu{display:none;background:none;border:0;padding:12px 0;align-items:center;gap:12px}.menu i{position:relative;width:22px;height:12px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}.reading-progress{position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:var(--sky);transform:scaleX(0);transform-origin:left;display:none}.nav.is-fixed{position:fixed;margin:0;padding:0 var(--pad);height:76px;background:var(--cover);border:0;box-shadow:0 1px rgba(167,205,236,.15);animation:nav-in .4s var(--ease)}.nav.is-fixed .brand{width:130px}.nav.is-fixed .reading-progress{display:block}@keyframes nav-in{from{transform:translateY(-100%)}to{transform:none}}
.cover{position:relative;min-height:min(980px,100svh);height:900px;max-height:1150px;padding:145px var(--pad) 36px;background-color:var(--cover);background-image:var(--grain-blue),var(--mottle),radial-gradient(48% 58% at 50% 50%,#1f4985,rgba(15,55,115,0) 100%);background-size:180px 180px,min(1500px,115%) auto,100% 100%;background-position:0 0,center,center;background-repeat:repeat,no-repeat,no-repeat;background-blend-mode:overlay,normal,normal;color:var(--sky);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.slogan{position:relative;max-width:1040px;width:min(88%,1040px);margin:-4% auto -4%;flex:1;display:flex;align-items:center;justify-content:center;will-change:transform}.slogan svg{width:100%;max-height:calc(100svh - 240px);height:auto;overflow:visible}.supplied-ring{opacity:.87}.ring-trace{stroke-dasharray:1;stroke-dashoffset:0}.motion-on .ring-trace{animation:draw-ring 2.2s cubic-bezier(.45,.05,.25,1) .45s both}@keyframes draw-ring{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}.cover-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:end;position:relative;z-index:2}.cover-bottom>p{font-size:16px;line-height:1.4}.cover-location{text-align:right;justify-self:end;line-height:1.7!important;font-size:10px!important}.discover{display:flex;align-items:center;justify-self:center;gap:18px;transition:gap var(--short) var(--ease)}.arrow-circle{width:42px;height:42px;border:1px solid rgba(167,205,236,.6);border-radius:50%;display:grid;place-items:center;font-size:24px;transition:background var(--short),color var(--short),transform var(--short)}.discover:hover .arrow-circle{background:var(--sky);color:var(--cover);transform:translateY(4px)}
.intro{padding-top:var(--section);padding-bottom:var(--section)}.section-code{margin-bottom:48px}.intro-statement{font-size:clamp(32px,3.65vw,55px);line-height:1.17;max-width:1170px;letter-spacing:-.035em;font-weight:400;text-wrap:pretty}.intro-statement em{color:var(--blue)}.intro-bottom{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:end;margin-top:64px;padding-left:25%}.intro-bottom p{font-size:18px;line-height:1.6;max-width:42ch}.text-link{position:relative;display:inline-flex;width:max-content;max-width:100%;align-items:center;gap:36px;padding:0 0 9px;border-bottom:1px solid currentColor;font-size:18px;white-space:normal}.text-link span{display:inline-block;font-size:24px;transition:transform var(--short) var(--ease)}.text-link:hover span{transform:translate(3px,-3px)}.intro-bottom .text-link{justify-self:end}
.selected-work{padding-top:100px;border-top:1px solid var(--rule)}.work-heading,.client-heading{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:end;margin-bottom:72px}.work-heading h2,.client-heading h2{margin-top:30px}.work-intro-copy{max-width:42ch;justify-self:end;font-size:18px;padding-bottom:3px}.work-intro-copy p:first-child{font-size:23px;line-height:1.4}.portfolio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:76px}.project-card{grid-column:span 6;min-width:0;outline-offset:8px}.project-1{grid-column:span 7}.project-2{grid-column:span 5;margin-top:120px}.project-3{grid-column:1/-1;display:grid;grid-template-columns:8fr 4fr;gap:var(--gutter);align-items:end}.project-4,.project-5,.project-6{grid-column:span 4}.project-7,.project-8{grid-column:span 6}.project-8{margin-top:80px}.project-media{position:relative;background:var(--cool);overflow:hidden;aspect-ratio:1.28}.project-1 .project-media{aspect-ratio:1.15}.project-2 .project-media{aspect-ratio:1.02}.project-3 .project-media{aspect-ratio:1.5}.project-7 .project-media{aspect-ratio:1.45}.project-8 .project-media{aspect-ratio:1.45}.project-image{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}.project-card:hover .project-image,.project-card:focus-visible .project-image{transform:scale(1.035)}.project-caption{padding-top:20px}.project-meta{display:flex;justify-content:space-between;gap:16px;align-items:baseline;color:var(--blue);font-size:15px}.project-caption h3{font-size:clamp(25px,2.15vw,33px);line-height:1.1;margin:12px 0 10px;max-width:23ch;letter-spacing:-.035em}.project-caption>p{color:var(--muted);font-size:15px}.project-3 .project-caption{padding:0 20px 26px;align-self:end}.project-3 h3{font-size:clamp(32px,3.5vw,52px);margin:28px 0 24px}.project-3 .project-meta{flex-direction:column;gap:10px}.project-open{position:absolute;bottom:24px;right:24px;background:var(--paper);color:var(--ink);padding:11px 16px;display:flex;align-items:center;gap:24px;font-size:14px;transition:color var(--short),background var(--short)}.project-open span{font-size:21px}.has-case:hover .project-open{background:var(--blue);color:var(--paper)}.typographic-preview{position:relative;height:100%;padding:26px;display:flex;align-items:center;justify-content:center;color:var(--blue);background:var(--paper)}.typographic-preview.warm{background:var(--warm)}.typographic-preview.cool{background:var(--cool)}.preview-index{position:absolute;top:24px;left:24px}.preview-caption{position:absolute;bottom:22px;left:24px;text-transform:none;font-size:10px;opacity:.75;letter-spacing:0}.preview-name{font-size:clamp(46px,6.5vw,110px);line-height:1;font-weight:450;letter-spacing:-.065em}.project-6 .preview-name{font-style:italic}.typographic-preview>img{width:58%;max-height:110px;object-fit:contain}.work-end{display:flex;justify-content:space-between;align-items:center;margin-top:72px;padding-top:28px;border-top:1px solid var(--rule)}
.clarity{background:var(--blue);color:var(--paper);padding-top:100px;padding-bottom:100px}.clarity>.meta{color:var(--sky);margin-bottom:72px}.clarity h2{max-width:1120px;font-size:clamp(46px,6vw,90px);line-height:1.05}.clarity h2 em{color:var(--sky)}.clarity-bottom{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:var(--gutter);margin-top:72px}.clarity-bottom>div{font-size:clamp(20px,1.8vw,27px);line-height:1.5;max-width:40ch}.underlined{background-image:linear-gradient(var(--sky),var(--sky));background-position:left bottom;background-size:100% 1px;background-repeat:no-repeat;padding-bottom:4px}
.service-heading{display:grid;grid-template-columns:1fr 3fr;column-gap:var(--gutter);margin-bottom:72px}.service-heading h2{font-size:clamp(43px,5vw,76px)}.service-heading>p{grid-column:2;margin-top:28px}.service-heading>.meta{margin-top:8px}.service-rows{border-top:1px solid var(--blue)}.service-row{position:relative;display:grid;grid-template-columns:1fr 5fr 4fr .8fr;gap:var(--gutter);align-items:start;padding:36px 0;border-bottom:1px solid var(--rule);transition:padding var(--medium) var(--ease);isolation:isolate}.service-row:before{content:'';position:absolute;inset:0 calc(-1 * var(--pad));z-index:-1;background:var(--warm);opacity:0;transform:scaleY(.7);transition:opacity var(--medium),transform var(--medium) var(--ease)}.service-row:hover:before,.service-row:focus-visible:before{opacity:1;transform:scaleY(1)}.service-row:hover{padding-left:12px}.service-row>.meta{padding-top:9px}.service-row h3{line-height:1.12;font-size:clamp(28px,3vw,44px);letter-spacing:-.035em}.service-row p{font-size:17px;max-width:34ch;padding-top:5px}.service-arrow{font-size:35px;line-height:1;text-align:right;transition:transform var(--medium) var(--ease)}.service-row:hover .service-arrow{transform:translate(5px,-5px)}
.clients{border-top:1px solid var(--rule);padding-top:100px}.client-heading h2{font-size:clamp(40px,4.5vw,68px)}.client-heading>p{font-size:20px;max-width:38ch;justify-self:end}.client-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:6%;row-gap:40px;padding-top:28px}.client-logo{height:95px;display:flex;align-items:center;justify-content:center}.client-logo img{width:100%;max-height:65px;object-fit:contain;transition:transform var(--medium) var(--ease)}.client-logo:hover img{transform:translateY(-4px)}
.across-borders{background-color:var(--cover);background-image:var(--grain-blue),var(--mottle),radial-gradient(48% 58% at 50% 50%,#1f4985,rgba(15,55,115,0) 100%);background-size:180px 180px,min(1500px,115%) auto,100% 100%;background-position:0 0,center,center;background-repeat:repeat,no-repeat,no-repeat;background-blend-mode:overlay,normal,normal;color:var(--sky);padding-top:100px;padding-bottom:64px;overflow:hidden}.borders-heading{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:72px}.years>span{font:400 clamp(170px,22vw,325px)/.9 Chivo,monospace;letter-spacing:-.1em;display:block;margin-left:-.06em}.years>p{font-size:23px;margin-top:30px;line-height:1.35}.borders-copy h2{font-size:clamp(42px,4.5vw,68px);line-height:1.08;margin-bottom:36px;color:var(--paper)}.borders-copy>p{font-size:18px;max-width:48ch}.borders-copy .text-link{margin-top:36px}.client-map{position:relative;margin:64px calc(-1 * var(--pad)) 0;overflow:hidden}@keyframes pin-in{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.hand-note{font:32px/1 Reenie,cursive;transform:rotate(-5deg);display:block}
.home-cta{padding-top:120px;padding-bottom:100px}.home-cta>.meta{margin-bottom:48px}.home-cta h2{font-size:clamp(52px,8.5vw,128px);line-height:.99;max-width:1100px}.cta-bottom{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:64px;align-items:end}.cta-bottom>div{font-size:20px;max-width:38ch}.cta-button{display:flex;align-items:center;justify-content:space-between;gap:56px;background:var(--blue);color:var(--paper);font-size:22px;padding:24px 28px;width:100%;max-width:420px;justify-self:end;border:1px solid var(--blue);transition:background var(--short),color var(--short)}.cta-button>span{font-size:35px;line-height:1;transition:transform var(--short)}.cta-button:hover{background:var(--paper);color:var(--blue)}.cta-button:hover>span{transform:translate(3px,-3px)}.home-cta>.cta-button{margin-top:48px}
.site-footer{padding:64px var(--pad) 24px;background:var(--cover);color:var(--sky);font-size:14px}.footer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:60px}.footer-top nav{display:flex;gap:28px}.footer-top nav a:hover{text-decoration:underline;text-underline-offset:6px}.footer-info{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:var(--gutter);padding:36px 0 56px;border-top:1px solid rgba(167,205,236,.3)}.footer-info>div>span{display:block;opacity:.8;margin-bottom:18px}.footer-info a{display:block;width:max-content;max-width:100%;line-height:1.8}.footer-info p{line-height:1.8}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid rgba(167,205,236,.3);padding-top:24px;font-size:12px}.motion-toggle{padding:10px 0;background:none;border:0;font:400 11px Chivo,monospace}.motion-toggle:before{content:'';display:inline-block;width:6px;height:6px;background:var(--sky);border-radius:50%;margin-right:8px}.motion-toggle[aria-pressed=true]:before{background:none;border:1px solid var(--sky)}
/* Interior pages share the same material, rhythm and type system. */
.page-hero,.case-hero{padding:200px var(--pad) 90px;background-color:var(--cover);background-image:var(--grain-blue),var(--mottle),radial-gradient(48% 58% at 50% 50%,#1f4985,rgba(15,55,115,0) 100%);background-size:180px 180px,min(1500px,115%) auto,100% 100%;background-position:0 0,center,center;background-repeat:repeat,no-repeat,no-repeat;background-blend-mode:overlay,normal,normal;color:var(--paper)}.page-hero{min-height:620px;display:flex;flex-direction:column;justify-content:flex-end}.page-hero h1,.case-hero h1{font-size:clamp(50px,7vw,104px);max-width:16ch;line-height:1.02}.page-hero .eyebrow,.case-hero .eyebrow{color:var(--sky)}.page-hero>p{max-width:44ch;margin-top:36px;font-size:22px;color:var(--sky)}[data-page=about] .page-hero h1{font-size:clamp(44px,5.5vw,82px);max-width:24ch}.section-head,.prose,.service-detail-grid,.contact-layout,.visit-grid,.case-split{display:grid;grid-template-columns:1fr 1.35fr;gap:8vw}.section-head{margin-bottom:64px}.section-head h2{max-width:15ch}.section-intro,.prose-copy,.contact-copy,.service-description,.case-copy{font-size:clamp(19px,1.65vw,24px);line-height:1.5;max-width:48ch}.section-intro{margin-top:32px}.prose-copy p+p,.case-copy p+p,.service-description p+p{margin-top:1.3em}.dream,.services-intro,.contact-intro{background-color:#f6f4ef;background-image:var(--grain-paper),radial-gradient(38% 46% at 62% 34%,rgba(242,216,182,.55),rgba(242,216,182,0) 100%),radial-gradient(34% 40% at 20% 80%,rgba(220,234,246,.55),rgba(220,234,246,0) 100%);background-size:180px 180px,100% 100%,100% 100%;background-repeat:repeat,no-repeat,no-repeat;background-blend-mode:overlay,normal,normal}.team{background:var(--cool)}.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.person{border-top:1px solid var(--blue);padding:28px 0 40px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between}.person h3{font-size:29px;margin-top:32px;margin-bottom:8px}.person p{font-size:15px;color:var(--muted)}.manifesto{background:var(--blue);color:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:8vw}.manifesto h2{font-size:clamp(48px,6vw,88px);max-width:10ch}.manifesto .case-copy{font-size:21px}.cta h2{font-size:clamp(52px,7vw,104px);max-width:15ch}.cta-link{display:flex;justify-content:space-between;align-items:center;margin-top:64px;padding:24px 0;border-top:1px solid currentColor;font-size:24px;gap:24px}.cta-link span:last-child{font-size:36px}.cta-link:hover span:last-child{transform:translateX(5px)}.service-detail{padding:var(--section) var(--pad);border-top:1px solid var(--rule)}.service-detail h2{font-size:clamp(40px,5vw,76px);max-width:12ch}.service-description h3,.case-copy h3{margin:56px 0 24px}.service-detail.dark,.case-section.dark{background:var(--cover);color:var(--paper)}.service-detail.acid,.case-section.acid,.case-footer-cta{background:var(--warm)}.deliverables{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;margin-top:32px;gap:0 24px;font-size:16px}.deliverables li{padding:12px 0;border-top:1px solid currentColor}.discipline-bridge{background:var(--blue);color:var(--paper)}.discipline-bridge h2{max-width:16ch}.field{display:flex;flex-direction:column;gap:12px}.field.full{grid-column:1/-1}.form{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}.field label{font-size:15px}.field input,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--blue);border-radius:0;padding:12px 0;color:var(--ink);width:100%}.field textarea{min-height:160px;resize:vertical}.field input:focus-visible,.field textarea:focus-visible{outline:none;border-bottom:2px solid var(--blue);background:rgba(167,205,236,.15)}.helper{font-size:14px;color:var(--muted)}.submit{background:var(--blue);color:var(--paper);border:1px solid var(--blue);border-radius:0;padding:16px 20px;width:max-content;display:flex;gap:30px;align-items:center}.submit:hover{background:var(--paper);color:var(--blue)}.visit{background:var(--cover);color:var(--paper)}.details{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid rgba(167,205,236,.4);margin-top:64px;padding-top:32px}.detail strong,.company-item strong{display:block;font:11px Chivo,monospace;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}.detail a{overflow-wrap:anywhere}.company-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.company-item{padding:24px 0;border-top:1px solid var(--blue)}.case-hero h1{max-width:14ch}.case-back{display:block;color:var(--sky);font-size:14px;margin-bottom:48px}.case-back:before{content:'←';margin-right:12px}.case-lead{max-width:45ch;font-size:24px;margin:48px 0 64px auto;color:var(--sky)}.case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;font-size:15px}.case-fact{padding-top:20px;border-top:1px solid rgba(167,205,236,.4)}.case-fact strong{display:block;color:var(--sky);font:11px Chivo,monospace;text-transform:uppercase;margin-bottom:12px}.case-visual{background:var(--cool);padding:32px var(--pad)}.case-visual>img{width:100%;max-height:900px;object-fit:contain}.case-section{padding:var(--section) var(--pad);border-bottom:1px solid var(--rule)}.case-section h2{margin:24px 0 40px;font-size:clamp(42px,5vw,76px)}.case-num{color:var(--muted)}.dark .case-num{color:var(--sky)}.case-section h3{margin:40px 0 24px}.case-diagram{border:1px solid currentColor;padding:24px;display:grid;gap:16px;text-align:center}.case-node{padding:16px;background:rgba(167,205,236,.12);font-size:16px}.case-nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.case-arrow{font-size:28px;line-height:1}.six-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}.six-grid>div{padding:16px 0;border-top:1px solid var(--blue)}.case-triptych,.language-grid,.case-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}.case-compare{grid-template-columns:1fr 1fr}.frame{border:1px solid var(--rule);padding:20px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;background:var(--cool)}.frame-visual{display:flex;align-items:center;justify-content:center;flex:1;text-align:center;color:var(--muted);font-size:16px;min-height:160px}.frame small{font-size:13px;color:var(--muted);margin-top:20px}.year-break{background:var(--blue);color:var(--paper);padding:var(--section) var(--pad)}.year-break .year{font:400 clamp(100px,18vw,260px)/1 Chivo,monospace;letter-spacing:-.08em;color:var(--sky);margin-bottom:64px}.year-break h2{max-width:15ch}.year-break p{max-width:45ch;font-size:24px;margin-top:40px}.case-credits{font-size:14px;padding-top:32px;margin-top:64px;border-top:1px solid var(--rule);color:var(--muted)}
.js.motion-on .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--long) var(--ease),transform var(--long) var(--ease);transition-delay:var(--delay,0ms)}.js.motion-on .reveal.visible{opacity:1;transform:none}.motion-off .slogan{transform:none!important}.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-off .reveal{opacity:1;transform:none}.motion-off .ring-trace{stroke-dashoffset:0}
@media(min-width:1800px){.section,.page-hero,.case-hero,.site-footer,.service-detail,.case-section,.year-break{padding-left:max(var(--pad),calc((100vw - 1640px)/2));padding-right:max(var(--pad),calc((100vw - 1640px)/2))}}
@media(max-width:1100px){.navlinks{gap:24px}.brand{width:135px}.nav-contact{gap:12px}.cover{height:820px;min-height:760px}.slogan{width:100%}.cover-bottom>p{font-size:14px}.cover-location{max-width:20ch}.intro-bottom{padding-left:15%;gap:8%}.portfolio{row-gap:52px}.project-2{margin-top:90px}.project-3 .project-caption{padding:0 0 12px}.project-3 h3{font-size:38px}.project-4,.project-5,.project-6{grid-column:span 6}.project-6{grid-column:1/7}.project-7{grid-column:7/-1}.project-8{grid-column:1/7;margin-top:0}.project-7 .project-media,.project-8 .project-media{aspect-ratio:1.28}.project-7{margin-top:80px}.service-row{grid-template-columns:.6fr 4fr 3fr .5fr}.client-logos{grid-template-columns:repeat(6,1fr);gap:30px}.client-logo{height:70px}.footer-top nav{gap:20px}.footer-info{grid-template-columns:1fr 1fr}.footer-info>div:last-child{grid-column:1/-1}.case-split,.service-detail-grid{grid-template-columns:1fr 1.2fr;gap:5vw}.case-nodes{grid-template-columns:1fr}.deliverables{grid-template-columns:1fr}.section-head{grid-template-columns:1fr 1.6fr}}
@media(max-width:760px){:root{--pad:24px;--gutter:24px;--section:80px;--heading:48px}html{scroll-padding-top:96px}body{font-size:17px}.meta{font-size:10px}.nav{height:88px}.brand{width:130px}.menu{display:flex;z-index:32;font-size:15px}.navlinks{display:none;position:fixed;inset:0;background-color:var(--cover);background-image:var(--grain-blue),var(--mottle),radial-gradient(48% 58% at 50% 50%,#1f4985,rgba(15,55,115,0) 100%);background-size:180px 180px,min(1500px,115%) auto,100% 100%;background-position:0 0,center,center;background-repeat:repeat,no-repeat,no-repeat;background-blend-mode:overlay,normal,normal;padding:140px 24px 64px;z-index:31;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:22px;font-size:32px;overflow:auto}.navlinks.open{display:flex}.navlinks a{width:100%;padding:16px 0;border-bottom:1px solid rgba(167,205,236,.25)}.nav-contact{justify-content:space-between}.menu[aria-expanded=true] i{border-bottom:0;transform:rotate(45deg);height:0}.menu[aria-expanded=true] i:after{content:'';position:absolute;top:-1px;left:0;width:22px;height:1px;background:currentColor;transform:rotate(90deg)}.nav.is-fixed .navlinks{padding-top:110px}.cover{height:720px;min-height:640px;max-height:900px;padding-top:116px;padding-bottom:28px}.slogan{width:115%;max-width:none;margin:-3% -7.5% -2%;flex:1}.slogan svg{width:100%;max-height:450px}.cover-bottom{grid-template-columns:1fr auto;gap:24px}.cover-bottom>p{font-size:15px}.cover-location{display:none}.discover{justify-self:end;gap:12px}.discover .meta{max-width:7ch;line-height:1.5}.arrow-circle{width:36px;height:36px;font-size:22px}.intro-statement{font-size:34px;line-height:1.2}.section-code{margin-bottom:32px}.intro-bottom{grid-template-columns:1fr;padding-left:0;gap:32px;margin-top:36px}.intro-bottom p{font-size:17px}.intro-bottom .text-link{justify-self:start}.work-heading,.client-heading{grid-template-columns:1fr;gap:32px;margin-bottom:40px}.selected-work{padding-top:72px}.work-heading h2,.client-heading h2{margin-top:24px;font-size:48px}.work-intro-copy{justify-self:start;font-size:17px;max-width:45ch}.work-intro-copy p:first-child{font-size:21px}.portfolio{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}.project-card,.project-1,.project-2,.project-3,.project-4,.project-5,.project-6,.project-7,.project-8{grid-column:1/-1;margin-top:0;display:block}.project-1 .project-media{aspect-ratio:1.1}.project-2 .project-media{aspect-ratio:1.4}.project-3 .project-media{aspect-ratio:1.25}.project-4 .project-media,.project-5 .project-media,.project-6 .project-media,.project-7 .project-media,.project-8 .project-media{aspect-ratio:1.4}.project-caption,.project-3 .project-caption{padding:18px 0 0}.project-3 .project-meta{flex-direction:row}.project-caption h3,.project-3 .project-caption h3{font-size:30px;margin:12px 0 10px}.project-meta{font-size:14px}.project-caption>p{font-size:14px}.project-open{bottom:16px;right:16px;font-size:12px;gap:16px;padding:9px 12px}.preview-name{font-size:72px}.typographic-preview>img{max-height:90px}.work-end{margin-top:40px;gap:24px;align-items:flex-start;flex-direction:column}.clarity{padding:72px var(--pad)}.clarity>.meta{margin-bottom:40px}.clarity h2{font-size:46px}.clarity h2 br{display:none}.clarity-bottom{grid-template-columns:1fr;gap:32px;margin-top:40px}.clarity-bottom>div{font-size:21px}.service-heading{grid-template-columns:1fr;gap:24px;margin-bottom:40px}.service-heading h2{font-size:46px}.service-heading>p{grid-column:1;margin-top:0}.service-row{grid-template-columns:24px 1fr 24px;gap:16px;padding:28px 0}.service-row h3{font-size:30px;line-height:1.12}.service-row p{grid-column:2;grid-row:2;font-size:16px;padding:0;max-width:35ch}.service-arrow{grid-row:1;grid-column:3;font-size:28px}.service-row:hover{padding-left:0}.clients{padding-top:72px}.client-heading>p{justify-self:start;font-size:18px;max-width:42ch}.client-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 30px;padding-top:12px}.client-logo{height:64px}.client-logo img{max-height:54px}.borders-heading{grid-template-columns:1fr;gap:48px;margin-top:48px}.years{display:flex;align-items:end;gap:32px}.years>span{font-size:170px;line-height:.85}.years>p{font-size:18px;margin:0}.borders-copy h2{font-size:46px;margin-bottom:28px}.borders-copy>p{font-size:17px}.client-map{margin-top:40px}.hand-note{font-size:28px}.home-cta{padding-top:80px;padding-bottom:80px}.home-cta h2{font-size:clamp(50px,10vw,72px);line-height:1.05}.home-cta>.meta{margin-bottom:32px}.cta-bottom{grid-template-columns:1fr;gap:40px;margin-top:40px}.cta-bottom>div{font-size:18px}.cta-button{font-size:20px;padding:20px 24px;max-width:none;gap:20px}.site-footer{padding-top:48px}.footer-top{align-items:flex-start;gap:36px;flex-direction:column;margin-bottom:36px}.footer-top nav{display:flex;flex-wrap:wrap;gap:18px 24px;font-size:15px}.footer-info{grid-template-columns:1fr;gap:32px;padding:32px 0}.footer-info>div:last-child{grid-column:auto}.footer-info>div>span{margin-bottom:12px}.footer-bottom{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:start;font-size:11px}.footer-bottom>span:nth-child(2){grid-row:2}.motion-toggle{grid-column:2;grid-row:1/3;padding-top:0}.section-head,.prose,.contact-layout,.visit-grid,.manifesto,.service-detail-grid,.case-split{grid-template-columns:1fr;gap:32px}.section-head{margin-bottom:40px}.section-head h2{max-width:16ch}.page-hero,.case-hero{padding:160px var(--pad) 64px;min-height:500px}.page-hero h1,.case-hero h1{font-size:54px;max-width:15ch}[data-page=about] .page-hero h1{font-size:43px;max-width:20ch}.page-hero>p{font-size:20px}.eyebrow{margin-bottom:24px}.prose-copy,.section-intro,.service-description,.contact-copy,.case-copy{font-size:19px}.team-grid{grid-template-columns:1fr 1fr;gap:24px}.person{min-height:220px}.person h3{font-size:25px}.person p{font-size:13px}.manifesto h2{font-size:48px}.manifesto .case-copy{font-size:19px}.cta h2{font-size:50px}.cta-link{font-size:21px}.form{grid-template-columns:1fr}.details,.company-grid{grid-template-columns:1fr}.service-detail h2{font-size:44px;max-width:16ch}.service-description h3{margin-top:40px}.case-facts{grid-template-columns:1fr 1fr;gap:24px;font-size:13px}.case-lead{font-size:21px;margin-top:36px}.case-section h2{font-size:43px}.case-triptych,.case-compare,.language-grid{grid-template-columns:1fr}.case-visual{padding:24px}.six-grid{grid-template-columns:1fr 1fr}.year-break .year{font-size:100px;margin-bottom:40px}.year-break p{font-size:21px}.case-credits{font-size:13px}}
@media(max-width:380px){:root{--pad:20px}.cover{min-height:600px;height:680px}.cover-bottom>p{font-size:13px}.intro-statement{font-size:30px}.team-grid{grid-template-columns:1fr}.home-cta h2{font-size:47px}.years>span{font-size:140px}.years{gap:24px}.nav .brand{width:118px}.client-logos{gap:24px}.work-heading h2{font-size:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body:not(.motion-on) *,body:not(.motion-on) *:before,body:not(.motion-on) *:after{animation:none!important;transition:none!important}body:not(.motion-on).js .reveal{opacity:1!important;transform:none!important}body:not(.motion-on) .slogan{transform:none!important}body:not(.motion-on) .ring-trace{stroke-dashoffset:0!important}}
/* Optical corrections after desktop and phone review. */
.meta,.eyebrow,.case-num{font-size:12px}
.project-card:not(.has-case){cursor:default}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}
@media(max-width:760px){.slogan{width:108%;margin:0 -4%}.cover{height:660px;min-height:620px}.meta,.eyebrow,.case-num{font-size:11px}.preview-caption{font-size:11px}.discover .meta{max-width:8ch}}
@media print{.nav,.menu,.site-footer,.motion-toggle{display:none}.page:not(.active){display:none}.reveal{opacity:1!important;transform:none!important}.section{padding:40px}.cover{height:auto;min-height:500px}.slogan{transform:none!important}}

/* ===== Client map v2: Europe at the heart (one map, no inset, no legend) ===== */
.across-borders{padding-bottom:0}
.client-map{margin:24px calc(-1 * var(--pad)) 0;overflow:hidden;position:relative}
.map-stage{position:relative;height:clamp(560px,74vw,1080px)}
.map-disc{position:absolute;width:min(1120px,80vw);aspect-ratio:1;left:58%;top:50%;transform:translate(-50%,-50%)}
.map-land,.map-pins{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.map-pins{overflow:visible}
.map-pins .pin{fill:var(--paper);stroke:var(--cover);stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:stroke var(--short) var(--ease),stroke-width var(--short) var(--ease)}
.map-pins .pin-home{fill:var(--coral);stroke:var(--cover);stroke-width:1}
.map-pins .pin.is-active{stroke:var(--sky);stroke-width:4}
.map-pins .ring-home{fill:none;stroke:var(--paper);stroke-width:1.5}
.map-pins .ring-start{fill:none;stroke:var(--sky);stroke-width:1.5}
.map-pins .note-arrow{fill:none;stroke:var(--sky);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.client-map .hand-note{position:absolute;margin:0;max-width:none;white-space:nowrap;color:var(--sky);font:34px/1 Reenie,cursive;transform:rotate(-5deg);pointer-events:none}
.map-tip{position:absolute;z-index:3;transform:translate(-50%,calc(-100% - 16px));background:var(--paper);color:var(--ink);font:500 14px/1.2 Hanken,Arial,sans-serif;letter-spacing:-.01em;padding:7px 11px;white-space:nowrap;pointer-events:none}
.map-tip span{color:var(--muted);font-weight:400}
.map-tip[hidden]{display:none}
.map-count{position:absolute;left:var(--pad);bottom:clamp(56px,7vw,112px);z-index:2;display:flex;flex-direction:column;gap:20px;max-width:none}
.map-count p{font-size:clamp(24px,2.1vw,32px);line-height:1.25;letter-spacing:-.02em;color:var(--sky)}
.map-count strong{display:block;font-weight:450;color:var(--paper);white-space:nowrap}
.map-count .meta{line-height:1.8;color:var(--sky)}
/* the pins arrive in the order Penrose's world grew: Amsterdam first, then outwards */
.motion-on .client-map .pin,.motion-on .client-map .ring-start,.motion-on .client-map .ring-home{opacity:0}
.motion-on .client-map.visible .pin{animation:pin-in 600ms var(--ease) both;animation-delay:calc(300ms + var(--i) * 55ms)}
.motion-on .client-map.visible .ring-start{animation:fade-in 600ms var(--ease) 300ms both}
.motion-on .client-map.visible .ring-home{animation:fade-in 600ms var(--ease) 700ms both}
.motion-on .client-map .note-arrow{stroke-dasharray:300;stroke-dashoffset:300}
.motion-on .client-map.visible .note-arrow{transition:stroke-dashoffset 1100ms var(--ease) 500ms;stroke-dashoffset:0}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@media(max-width:1080px){.map-disc{width:96vw;left:56%}.map-count{bottom:40px}}
@media(max-width:760px){
  .client-map{margin-top:32px}
  .map-stage{height:auto;display:flex;flex-direction:column}
  .map-disc{position:relative;left:50%;top:auto;width:120vw;transform:translateX(-50%);margin:-12vw 0 -6vw}
  .map-pins .pin{r:10}.map-pins .pin-home{r:15}.map-pins .ring-start{r:24}.map-pins .ring-home{r:28}
  .map-pins .note-arrow{display:none}
  .client-map .hand-note{font-size:20px}
  .map-count{position:relative;left:auto;bottom:auto;padding:0 var(--pad) 72px;max-width:none}
  .map-count p{font-size:24px}.map-count strong{white-space:normal}
}

/* the paper-coloured project placeholder needs an edge on the paper page */
.typographic-preview.paper{outline:1px solid var(--rule);outline-offset:-1px}

/* ===== Round 3: people and real images ===== */
.ph{margin:0;overflow:hidden;background:var(--cool);position:relative}
.ph img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.clarity-bottom{align-items:center}
.clarity-photo{aspect-ratio:4/3;background:var(--cover)}
.project-media>img.project-image{display:block}
/* the people */

.person img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.02);transition:filter var(--medium) var(--ease);background:var(--cool)}
.person:hover img{filter:none}
/* closing call: a person to talk to */
.cta-side{display:flex;flex-direction:column;gap:28px;justify-self:end;width:100%;max-width:420px}
.cta-person{margin:0;display:flex;gap:20px;align-items:center}
.cta-person img{width:88px;height:110px;object-fit:cover;flex:none}
.cta-person figcaption{display:flex;flex-direction:column;gap:2px;font-size:16px;color:var(--muted)}
.cta-person strong{font-weight:450;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.cta-mail{user-select:all}
/* Our work: the rest of the portfolio */
.more-work{padding-top:0}
.more-work>.meta{margin-bottom:40px;padding-top:56px;border-top:1px solid var(--rule)}
.portfolio.more .project-card{grid-column:span 4}
.portfolio.more .project-card.more-wide{grid-column:span 8}
.portfolio.more .project-media{aspect-ratio:4/3}
.portfolio.more .more-wide .project-media{aspect-ratio:auto;height:calc(100% - 0px);max-height:none}
.portfolio.more .more-wide{display:flex;flex-direction:column}
.portfolio.more .more-wide .project-media{flex:1;min-height:0}
/* IPPF */
.case-visual img{display:block;width:100%;height:auto}
.case-gallery{padding:56px var(--pad) 24px;background:var(--cool)}
.case-gallery>.meta{margin-bottom:24px}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.gallery-grid .ph{aspect-ratio:16/10;background:#fff}
/* About */
.photo-band{display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px;background:var(--paper)}
.photo-band .ph{aspect-ratio:auto;height:clamp(320px,36vw,560px)}
.dream-photo{margin-top:clamp(56px,6vw,96px);aspect-ratio:21/9}
.team-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:56px var(--gutter)}
.person{border-top:0;padding:0;min-height:0;justify-content:flex-start;gap:16px}
.person h3{margin-top:0;font-size:22px}
.person p{font-size:15px;color:var(--muted)}
.manifesto-head{display:flex;flex-direction:column;gap:48px}
.manifesto-photo{aspect-ratio:4/3;background:var(--cover)}
/* Contact */
.visit-photos{display:grid;grid-template-columns:2fr 1fr;gap:var(--gutter);margin-top:64px}
.visit-photos .ph{aspect-ratio:auto;height:clamp(260px,30vw,460px);background:var(--cover)}
@media(max-width:1080px){
  .team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .portfolio.more .project-card,.portfolio.more .project-card.more-wide{grid-column:span 6}
  .portfolio.more .more-wide .project-media{flex:none;aspect-ratio:4/3}
}
@media(max-width:760px){
  .cta-side{justify-self:stretch;max-width:none}
  .portfolio.more .project-card,.portfolio.more .project-card.more-wide{grid-column:1/-1}
  .gallery-grid{grid-template-columns:1fr}
  .case-gallery{padding:32px 24px 8px}
  .photo-band{grid-template-columns:1fr 1fr}
  .photo-band .ph:first-child{grid-column:1/-1;height:300px}
  .photo-band .ph{height:240px}
  .dream-photo{aspect-ratio:4/3}
  .team-grid{grid-template-columns:1fr 1fr;gap:32px 16px}
  .person img{filter:none}
  .person h3{font-size:19px}
  .person p{font-size:13px}
  .visit-photos{grid-template-columns:1fr;gap:16px}
  .visit-photos .ph{height:260px}
}
@media(hover:none){.person img{filter:none}}

/* ===== Round 4: the hand ===== */
.hand{font:400 36px/1 Reenie,"Reenie Beanie",cursive;letter-spacing:.01em;display:inline-block;transform:rotate(-3deg);white-space:nowrap;color:var(--blue)}
.stroke{display:block;overflow:visible;flex:none}
.stroke path{fill:currentColor}
.anno{display:flex;align-items:flex-end;gap:6px;pointer-events:none;color:var(--blue)}
/* on blue the hand is sky */
.clarity .anno,.across-borders .anno,.manifesto .anno,.visit .anno,.page-hero .ul{color:var(--sky)}
.clarity .anno .hand,.across-borders .anno .hand,.manifesto .anno .hand,.visit .anno .hand{color:var(--sky)}
/* drawn on once, when the section arrives */
.motion-on .reveal:not(.visible) .draw{clip-path:inset(0 100% 0 0)}
.motion-on .reveal:not(.visible) .draw-rtl{clip-path:inset(0 0 0 100%)}
.motion-on .reveal:not(.visible) .draw-btt{clip-path:inset(100% 0 0 0)}
.motion-on .reveal:not(.visible) .draw-ttb{clip-path:inset(0 0 100% 0)}
.motion-on .draw{clip-path:inset(0 0 0 0);transition:clip-path 900ms var(--ease) 500ms}
.motion-on .reveal:not(.visible) .anno .hand{opacity:0}
.motion-on .anno .hand{transition:opacity 600ms var(--ease) 900ms}
/* underline under a word */
em.ul{position:relative;display:inline-block}
em.ul .ul-stroke{position:absolute;left:-2%;width:104%;height:.32em;bottom:-.26em;color:var(--blue)}
.page-hero em.ul .ul-stroke{color:var(--sky)}
.motion-on .page.active .page-hero .draw{animation:ul-in 900ms var(--ease) 600ms both}
@keyframes ul-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* placements */

.clarity-media{display:flex;flex-direction:column;gap:14px}
.years{position:relative}
.years>.anno{font:inherit;font-size:16px;line-height:1;letter-spacing:0;margin:0;display:flex}
.anno-14{position:absolute;left:clamp(200px,19vw,280px);top:-54px;align-items:flex-start}
.anno-14 .stroke{margin-top:16px}
.anno-14 .hand{transform:rotate(-4deg)}
.cta-side{position:relative}
.anno-cta{align-self:flex-end;align-items:flex-start;margin:-6px 18px -14px 0}
.anno-cta .stroke{margin-top:14px}
.photo-band{position:relative}
.anno-band{position:absolute;left:calc(var(--pad) + 2%);bottom:-62px;z-index:2}
.anno-band .hand{transform:rotate(-2deg)}
.anno-seat{position:absolute;left:30%;bottom:-58px;z-index:2}
.visit-photos{position:relative;margin-bottom:56px}
@media(max-width:760px){
  .hand{font-size:30px}
  .years>.anno-14{display:none}
  .anno .hand{white-space:normal;max-width:12em;line-height:.95}
  .anno .stroke{width:56px;height:auto}
  .anno-band{bottom:-54px}
  .anno-seat{left:12%}
}
@media(prefers-reduced-motion:reduce){body:not(.motion-on) .draw{clip-path:none!important;transition:none!important}}

/* ===== Round 5 (version B) ===== */
/* the record: facts in mono, under the intro */
.record{list-style:none;margin:clamp(64px,6vw,96px) 0 0;padding:28px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px var(--gutter)}
.record li{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.35;color:var(--muted);max-width:18ch}
.record span{font:400 clamp(34px,3.4vw,52px)/1 Chivo,monospace;letter-spacing:-.04em;color:var(--blue)}
/* captions are the record, not the hand */
.photo-cap{font:400 12px/1.5 Chivo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--sky);margin-top:14px}
/* one project in depth */
.deep{margin-top:clamp(88px,9vw,140px);padding-top:40px;border-top:1px solid var(--rule)}
.deep-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:36px}
.deep-head h3{font-size:clamp(32px,3.2vw,48px);margin:16px 0 8px}
.deep-head p{color:var(--muted);font-size:16px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.step{margin:0;display:flex;flex-direction:column;gap:14px}
.step .ph{aspect-ratio:4/3;background:#fff}
.step figcaption{display:flex;gap:12px;align-items:baseline;font-size:15px;color:var(--ink)}
.step-n{font:400 12px Chivo,monospace;color:var(--muted)}
/* human by design, on the homepage */
.human-home{background-color:var(--cover);background-image:var(--grain-blue),var(--mottle),radial-gradient(48% 58% at 50% 50%,#1f4985,rgba(15,55,115,0) 100%);background-size:180px 180px,min(1500px,115%) auto,100% 100%;background-position:0 0,center,center;background-repeat:repeat,no-repeat,no-repeat;background-blend-mode:overlay,normal,normal;color:var(--paper)}
.human-home>.meta{color:var(--sky)}
.human-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:center;margin-top:56px}
.human-copy h2{color:var(--paper);font-size:clamp(44px,5vw,76px);margin-bottom:40px}
.human-lead{font-size:clamp(24px,2.2vw,32px);line-height:1.25;letter-spacing:-.02em;color:var(--sky);margin-bottom:20px;max-width:20ch}
.human-copy>p:not(.human-lead){font-size:18px;max-width:40ch;margin-bottom:36px}
.human-copy .text-link{color:var(--paper);border-color:currentColor}
.human-media{display:flex;flex-direction:column}
.human-media .ph{aspect-ratio:4/3;background:var(--blue)}
.human-home .anno{color:var(--sky);margin:18px 0 0 8%}
.human-home .anno .hand{color:var(--sky)}
/* Our work filter */
.work-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:56px}
.work-filter button{font:inherit;font-size:15px;padding:10px 18px;border:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:999px;cursor:pointer;transition:background var(--short),color var(--short),border-color var(--short)}
.work-filter button:hover{border-color:var(--blue)}
.work-filter button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.work-filter button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.filter-count{margin-left:auto;font:400 12px Chivo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.project-card[hidden],.more-work[hidden]{display:none!important}
@media(max-width:1080px){.record{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .record{gap:28px 16px;margin-top:48px}
  .deep-head{flex-direction:column;align-items:flex-start;gap:20px}
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 8px;scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 78%;scroll-snap-align:start}
  .human-grid{grid-template-columns:1fr;margin-top:32px}
  .human-copy h2{font-size:46px;margin-bottom:28px}
  .filter-count{margin-left:0;width:100%}
}

/* ===== Round 6: light blue sections, handwritten numbers ===== */
/* sky as a ground: ink for text, penrose-blue for emphasis and the hand (ink on sky 8:1, blue on sky 5.8:1) */
.sky{background:var(--sky);color:var(--ink)}
.sky .meta,.sky .eyebrow{color:var(--blue)}
.clarity.sky h2{color:var(--ink)}
.clarity.sky h2 em{color:var(--blue)}
.clarity.sky .clarity-bottom>div{color:var(--ink)}
.clarity.sky .underlined{background-image:linear-gradient(var(--blue),var(--blue))}
.clarity.sky .photo-cap{color:var(--blue)}
.clarity.sky .clarity-photo{background:var(--blue)}
.team.sky .person p{color:var(--ink)}
.team.sky h2{color:var(--ink)}
.team.sky .person img{background:var(--blue)}
/* What we do: numbers by hand */
.service-row .row-n{font:400 clamp(64px,6vw,92px)/.62 Reenie,"Reenie Beanie",cursive;color:var(--blue);transform:rotate(var(--tilt,-3deg));transform-origin:left center;display:inline-block;margin-top:2px;white-space:nowrap;letter-spacing:.02em}
@media(max-width:760px){.service-row{grid-template-columns:56px 1fr 24px}.service-row .row-n{font-size:56px}}

/* ===== Round 7: orbits and handwritten eyebrows ===== */
/* team on blue grain, portraits in the drawn ring */
.orbit-team{background-color:var(--cover);background-image:var(--grain-blue),var(--mottle),radial-gradient(48% 58% at 50% 50%,#1f4985,rgba(15,55,115,0) 100%);background-size:180px 180px,min(1500px,115%) auto,100% 100%;background-position:0 0,center,center;background-repeat:repeat,no-repeat,no-repeat;background-blend-mode:overlay,normal,normal;color:var(--paper);overflow:hidden}
.orbit-team h2{color:var(--paper)}
.orbit-team .eyebrow{color:var(--sky)}
.orbit-team .team-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:72px var(--gutter);margin-top:16px}
.orbit-team .person{align-items:center;text-align:center;gap:20px}
.orbit-wrap{position:relative;width:min(190px,78%);aspect-ratio:1;margin:0 auto}
.orbit-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:1;background:var(--blue)}
.orbit-face img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 30%;filter:none!important}
.orbit-team .person img.orbit{width:138%;max-width:none;background:none!important;aspect-ratio:auto!important;height:auto!important;object-fit:contain!important;filter:none!important;margin:0!important}
.orbit{position:absolute;max-width:none;left:-16%;top:42%;pointer-events:none;transform:rotate(-17deg) scaleY(.85);transform-origin:50% 50%;transition:transform var(--long) var(--ease)}
.orbit:not(.orbit-front){z-index:0}
.orbit-front{z-index:2;clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%)}
.orbit-team .person:hover .orbit{transform:rotate(-22deg) scaleY(.85)}
.orbit-team .person h3{color:var(--paper);margin-top:12px}
.orbit-team .person p{color:var(--sky)}
/* inner pages: eyebrows and numbers by hand */
.hand-eyebrow{font:400 42px/1 Reenie,"Reenie Beanie",cursive!important;text-transform:none!important;letter-spacing:.01em!important;display:inline-block;transform:rotate(-2deg);transform-origin:left center;color:var(--blue)}
.case-num.hand-eyebrow{color:var(--blue);margin-bottom:14px}
.page-hero .hand-eyebrow,.case-hero .hand-eyebrow,.dark .hand-eyebrow,.orbit-team .hand-eyebrow,.visit .hand-eyebrow,.manifesto .hand-eyebrow,.cta .hand-eyebrow,.case-footer-cta .hand-eyebrow{color:var(--sky)}
.sky .hand-eyebrow,.acid .hand-eyebrow{color:var(--blue)}
@media(max-width:1080px){.orbit-team .team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .orbit-team .team-grid{grid-template-columns:1fr 1fr;gap:48px 16px}
  .orbit-wrap{width:72%}
  .hand-eyebrow{font-size:36px!important}
}

/* ===== Round 8: CONCORD case study ===== */
.cs-hero .case-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
.cs-hero .cs-fact-wide{grid-column:1/-1;max-width:80ch}
.cs-top{position:relative;height:clamp(460px,min(80vh,60vw),900px);background:var(--cover);overflow:hidden}
.cs-top-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.cs-top:before{content:'';position:absolute;inset:0 0 auto;height:150px;z-index:1;background:linear-gradient(180deg,rgba(15,55,115,.7),rgba(15,55,115,0))}
.case-hero.cs-hero{padding-top:clamp(48px,5vw,80px)}
.cs-hinge{padding:clamp(80px,9vw,144px) var(--pad)}
.cs-hinge p{font-size:clamp(30px,3.6vw,56px);line-height:1.15;letter-spacing:-.03em;max-width:24ch;color:var(--ink)}
.cs-body{display:grid;grid-template-columns:minmax(200px,2.6fr) 9fr;gap:var(--gutter);padding:0 var(--pad)}
.cs-rail{position:sticky;top:120px;align-self:start;padding-top:var(--section)}
.cs-rail .eyebrow{margin-bottom:20px}
.cs-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.cs-rail a{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--muted);transition:color var(--short)}
.cs-rail a:hover,.cs-rail a[aria-current]{color:var(--ink)}
.cs-rail a[aria-current] .rail-n{color:var(--blue)}
.rail-n{font:400 11px Chivo,monospace;color:var(--muted);flex:none}
.cs-main{min-width:0}
.cs-chapter{padding:var(--section) 0 0;scroll-margin-top:96px}
.cs-chapter:last-child{padding-bottom:var(--section)}
.cs-head{display:flex;flex-direction:column;gap:6px;margin-bottom:40px}
.cs-num{font:400 clamp(64px,6vw,92px)/.62 Reenie,"Reenie Beanie",cursive;color:var(--blue);display:inline-block;transform:rotate(var(--tilt));transform-origin:left center;letter-spacing:.02em}
.cs-head h2{font-size:clamp(40px,4.6vw,68px);margin:0;max-width:16ch}
.case-footer-cta .hand-eyebrow,.cta.case-footer-cta .hand-eyebrow{color:var(--blue)!important}
.cs-text{max-width:none}
.cs-text>p,.cs-text>h3,.cs-text>.cs-list,.cs-aside>p{font-size:clamp(18px,1.45vw,21px);line-height:1.55;max-width:56ch}
.cs-text>p+p{margin-top:1.1em}
.cs-text>h3{font-size:clamp(24px,2vw,30px);margin:56px 0 20px;line-height:1.2}
.cs-question{font-size:clamp(26px,2.4vw,36px)!important;line-height:1.25!important;color:var(--blue);margin:28px 0;max-width:26ch!important;letter-spacing:-.02em}
.cs-list{margin:28px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:18px}
.cs-list li{padding-left:28px;position:relative}
.cs-list li:before{content:'';position:absolute;left:0;top:.75em;width:14px;height:1px;background:var(--blue)}
.cs-wide{margin:56px 0}
.cs-fig{margin:0;display:flex;flex-direction:column;gap:12px}
.cs-fig img{display:block;width:100%;height:auto;background:var(--cool)}
.cs-fig figcaption{font:400 12px/1.5 Chivo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs-white img{background:#fff;outline:1px solid var(--rule);outline-offset:-1px}
.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.cs-anno-wrap{position:relative}
.anno-cs-year{position:absolute;right:4%;top:-58px}
.anno-cs-year .stroke{order:2;margin-top:24px}
.anno-cs-flow{margin:14px 0 0 30%}
.cs-flow img{background:#4f6b74}
.cs-ideas{list-style:none;margin:40px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.cs-ideas li{border-top:1px solid var(--blue);padding-top:18px;display:flex;flex-direction:column;gap:8px;font-size:16px;color:var(--muted)}
.cs-ideas strong{font-size:clamp(24px,2vw,30px);font-weight:450;color:var(--ink);letter-spacing:-.02em}
.cs-test{margin:48px 0;padding:0}
.cs-test p{font-size:clamp(30px,3.2vw,48px);line-height:1.15;letter-spacing:-.03em;color:var(--blue);max-width:22ch}
.cs-aside{margin:64px 0 0;padding:clamp(28px,3vw,48px);background:var(--warm)}
.cs-aside>p+p{margin-top:1em}
.cs-decision{font-weight:500;color:var(--ink);margin-top:1.4em!important;padding-top:1em;border-top:1px solid var(--rule)}
.cs-client{margin:48px calc(-1 * var(--pad)) 48px 0;padding:clamp(40px,5vw,80px);background:var(--sky)}
.cs-client p{font-size:clamp(24px,2.3vw,34px);line-height:1.3;letter-spacing:-.02em;color:var(--ink);max-width:36ch}
.cs-client footer{margin-top:24px;font:400 12px Chivo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.cs-credits{display:grid;grid-template-columns:2fr 1fr;gap:var(--gutter)}
.cs-credits h3{font:400 12px Chivo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 24px}
.cs-makers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cs-makers li{display:flex;gap:16px;align-items:center}
.cs-makers img,.cs-noface{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 30%;flex:none;background:var(--cool)}
.cs-noface{display:flex;align-items:center;justify-content:center;font:400 14px Chivo,monospace;color:var(--blue)}
.cs-makers span{display:flex;flex-direction:column;font-size:15px;color:var(--muted)}
.cs-makers strong{font-weight:450;font-size:19px;color:var(--ink)}
.cs-client-team{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:19px}
@media(max-width:1080px){
  .cs-body{grid-template-columns:1fr}
  .cs-rail{display:none}
  .cs-hero .case-facts{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .cs-top{height:62vh;min-height:420px}
  .cs-top-img{object-position:28% 45%}
  .case-hero.cs-hero{min-height:0}
  .cs-hero .case-facts{grid-template-columns:1fr}
  .cs-pair,.cs-ideas,.cs-credits,.cs-makers{grid-template-columns:1fr}
  .anno-cs-year{display:none}
  .anno-cs-flow{margin-left:10%}
  .cs-client{margin-right:calc(-1 * var(--pad));margin-left:calc(-1 * var(--pad))}
}

/* ===== Round 9: backgrounds drawn in code (no texture images) ===== */
@media print{*{background-image:none!important}}

/* ===== Round 10: CONCORD, work first ===== */
.cs-hero .case-lead{margin-bottom:48px}
.cs-strip{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid rgba(167,205,236,.4);display:flex;flex-wrap:wrap;gap:16px 56px;font-size:16px;color:var(--paper)}
.cs-strip li{display:flex;flex-direction:column;gap:6px}
.cs-strip span{font:400 11px Chivo,monospace;letter-spacing:.065em;text-transform:uppercase;color:var(--sky)}
.cs-work{display:flex;flex-direction:column;gap:clamp(56px,7vw,112px);padding:clamp(56px,7vw,112px) 0;background:var(--paper)}
.wk{margin:0;display:grid;gap:18px}
.wk-wide,.wk-two{padding:0 var(--pad)}
.wk-two{grid-template-columns:7fr 5fr;column-gap:var(--gutter)}
.wk-two-even{grid-template-columns:1fr 1fr}
.wk-two figcaption{grid-column:1/-1}
.wk-bleed figcaption{padding:0 var(--pad)}
.wk-img{overflow:hidden;background:var(--cool)}
.wk-img img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.r-16x9{aspect-ratio:16/9}
.wk-two .wk-img{height:clamp(380px,46vw,760px)}
.r-strip{background:#fff;aspect-ratio:1920/597;outline:1px solid var(--rule);outline-offset:-1px}
.r-strip img{object-fit:contain}
.wk-bleed .wk-img{width:100%}
.wk-cap{display:flex;gap:14px;align-items:baseline;font-size:clamp(18px,1.5vw,22px);line-height:1.4;letter-spacing:-.01em;color:var(--ink);max-width:48ch}
.wk-n{font:400 12px Chivo,monospace;color:var(--muted);flex:none}
.cs-hinge{padding-top:clamp(64px,7vw,112px);padding-bottom:clamp(64px,7vw,112px)}
.cs-story-head{padding:var(--section) var(--pad) 0;display:flex;flex-direction:column;gap:12px}
.cs-story-head h2{font-size:clamp(46px,5.4vw,84px)}
.cs-story-meta{font:400 12px Chivo,monospace;letter-spacing:.065em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.cs-facts{padding-top:var(--section)}
.cs-facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;color:var(--ink);font-size:16px}
.cs-facts-grid .case-fact{border-top-color:var(--rule)}
.cs-facts-grid .case-fact strong{color:var(--muted)}
.cs-facts-grid .cs-fact-wide{grid-column:1/-1}
.cs-body .cs-rail{padding-top:calc(var(--section) + 8px)}
@media(max-width:760px){
  .wk-two,.wk-two-even{grid-template-columns:1fr;row-gap:12px}
  .wk-two .wk-img{height:auto;aspect-ratio:4/5}
  .wk-bleed .wk-img{max-height:none}
  .cs-strip{gap:16px 32px}
  .cs-facts-grid{grid-template-columns:1fr!important}
}

/* ===== Round 11: illustrated page headers ===== */
.page-hero.has-illo{padding-bottom:0;display:flex;flex-direction:column;overflow:hidden}
/* the illustration ends in its own darker blue; let the next section start cleanly */
.page-hero.has-illo + *{position:relative}
@media(max-width:760px){
  .page-hero.has-illo{min-height:0}
}

/* ===== Round 12: illustrations used as they are, as the whole header (backgrounds set in round 13) ===== */
/* the drawing (bottom 56.25% of the original's width) sits under the text, never behind it */
.page-hero.has-illo{min-height:0;max-height:none}
.page-hero.has-illo .hand-eyebrow,.page-hero.has-illo em,.page-hero.has-illo>p{color:var(--paper)}
.page-hero.has-illo .ul-stroke{color:var(--paper)}

/* ===== Round 13: shorter illustrated headers, text on the picture ===== */
/* one rule for the three headers: --illo is the image, --illo-y how far the drawing drops below the frame,
   --illo-shift the scroll parallax set by app.js (desktop only) */
.page-hero.has-illo{height:clamp(560px,52vw,800px);padding-bottom:64px;justify-content:flex-start;
  background-color:#3e6fa7;background-image:linear-gradient(90deg,rgba(28,62,120,.72) 0,rgba(28,62,120,.45) 32%,rgba(28,62,120,0) 58%),var(--illo);background-repeat:no-repeat;
  background-size:100% 100%,100% auto;background-position:0 0,50% calc(100% + var(--illo-y,8vw) + var(--illo-shift,0px));background-blend-mode:normal}
.illo-our-work{--illo:url('assets/photos/illo-gallery-wall-tall-2000.jpg');--illo-y:8vw}
.illo-services{--illo:url('assets/photos/illo-design-and-code-tall-2000.jpg');--illo-y:9vw}
.illo-about{--illo:url('assets/photos/illo-team-table-tall-2000.jpg');--illo-y:13vw}
@media(max-width:1000px){
  .illo-our-work{--illo:url('assets/photos/illo-gallery-wall-tall-1000.jpg')}
  .illo-services{--illo:url('assets/photos/illo-design-and-code-tall-1000.jpg')}
  .illo-about{--illo:url('assets/photos/illo-team-table-tall-1000.jpg')}
}
.page-hero.has-illo h1,.page-hero.has-illo>p{text-shadow:0 1px 24px rgba(15,40,90,.35)}
@media(max-width:760px){
  .page-hero.has-illo{height:auto;min-height:640px;padding-bottom:48px;--illo-shift:0px;
    background-image:linear-gradient(180deg,rgba(28,62,120,.7) 0,rgba(28,62,120,.45) 45%,rgba(28,62,120,0) 70%),var(--illo);
    background-size:100% 100%,180% auto;background-position:0 0,32% calc(100% + 18vw)}
}

/* Round 14: hero location set like the tagline (Hanken, sentence case) */
.cover-location{font:400 16px/1.4 Hanken,Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;max-width:none!important;text-align:right}
.cover-bottom>p.cover-tagline{font-size:clamp(24px,2.3vw,34px);line-height:1.2;letter-spacing:-.02em;color:var(--paper)}
.cover-bottom{align-items:end}
@media(max-width:760px){.cover-bottom>p.cover-tagline{font-size:22px}}

/* Round 15: handwritten eyebrows everywhere, no numbering */
.section-code.hand-eyebrow{margin-bottom:32px}
.human-home .hand-eyebrow,.across-borders .hand-eyebrow,.cover .hand-eyebrow{color:var(--sky)!important}
.deep-head .hand-eyebrow{margin-bottom:0}
.record li{max-width:24ch}

/* ===== Round 19: About photos inset, away from the header ===== */
.photo-band.band-inset{margin:0 0 calc(var(--section) * 1.1);padding:0;gap:10px;background:none}
.photo-band.band-inset .ph{height:clamp(300px,32vw,520px)}
.photo-band.band-inset .anno-band{bottom:-78px;left:2%}
@media(max-width:760px){.photo-band.band-inset{gap:8px;margin-bottom:120px}.photo-band.band-inset .anno-band{bottom:-70px}}

/* ===== Round 20: contact form ===== */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .check{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--muted);cursor:pointer}
.form .check input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--blue)}
.form .check a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.form.tried :is(input,textarea):invalid{border-color:var(--coral)}
.form.tried .check input:invalid + span{color:#b4552e}
.form-sent{display:flex;flex-direction:column;gap:18px;align-self:start;padding-top:8px}
.form[hidden],.form-sent[hidden]{display:none}
.contact-layout>.form-sent{grid-column:2;grid-row:1}
@media(max-width:760px){.contact-layout>.form-sent{grid-column:1;grid-row:auto}}
.form-sent h2{font-size:clamp(40px,4.4vw,64px);color:var(--ink)}
.form-sent h2 span{color:var(--blue)}
.form-sent p{font-size:19px;max-width:40ch}
.form-sent .form-again{justify-self:start;align-self:flex-start;background:none;border:0;padding:0;font:inherit;color:var(--blue);text-decoration:underline;text-underline-offset:4px;cursor:pointer;margin-top:8px}
.form-sent:focus{outline:none}

/* ===== Round 21: motion ===== */
/* hero: written letter by letter, then the ring */
.js.motion-on .slogan .letters path{animation:letter-write .7s var(--ease) var(--d,.1s) both;transform-box:fill-box}
@keyframes letter-write{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js.motion-on .ring-trace{animation-delay:.9s}
.js.motion-on .cover-bottom{animation:fade-in 800ms var(--ease) 1.6s both}
/* headings rise out of their baseline (a 1px sliver stays unclipped so the observer still sees the element) */
.js.motion-on .rise{clip-path:inset(-25% -6% calc(100% - 1px) -6%);transform:translateY(.45em);transition:clip-path 900ms var(--ease) var(--delay,0ms),transform 900ms var(--ease) var(--delay,0ms)}
.js.motion-on .rise.visible{clip-path:inset(-25% -6% -25% -6%);transform:none}
/* handwriting writes itself on */
.js.motion-on .write{clip-path:inset(-35% calc(100% - 1px) -35% -4%);transition:clip-path 800ms linear var(--wd,80ms)}
.js.motion-on .write.visible,.js.motion-on .reveal.visible .write{clip-path:inset(-35% -4% -35% -4%)}
.js.motion-on .anno .hand{opacity:1!important;--wd:1200ms;transition:clip-path 900ms linear var(--wd)}
.js.motion-on .reveal:not(.visible) .anno .hand{opacity:1}
.js.motion-on .anno.reveal-quiet{opacity:1;transform:none}
.js.motion-on .hand-eyebrow.write{transition:clip-path 800ms linear var(--wd,80ms),opacity var(--long) var(--ease),transform var(--long) var(--ease)}
/* eyebrows that also rise keep their tilt */
.js.motion-on .hand-eyebrow.reveal{transform:translateY(24px) rotate(-2deg)}
.js.motion-on .hand-eyebrow.reveal.visible{transform:rotate(-2deg)}
/* images unmask from the bottom and settle */
.js.motion-on .wipe{clip-path:inset(0);transition:clip-path 1000ms var(--ease) var(--delay,0ms),transform 1200ms var(--ease) var(--delay,0ms)}
.js.motion-on .reveal:not(.visible) .wipe{clip-path:inset(100% 0 0 0)}
.js.motion-on .wipe>img,.js.motion-on .wipe>.project-image{transition:transform 1200ms var(--ease) var(--delay,0ms)}
.js.motion-on .reveal:not(.visible) .wipe>img,.js.motion-on .reveal:not(.visible) img.wipe{transform:translateY(-4%) scale(1.06)}
.js.motion-on .record.reveal{opacity:1;transform:none}
.js.motion-on .cs-top-img{animation:cover-settle 2.2s var(--ease) both;transform-origin:50% 60%}
@keyframes cover-settle{from{transform:scale(1.07)}to{transform:none}}
/* the record counts; keep the digits from jumping */
.record li span,.years>span{font-variant-numeric:tabular-nums}
/* illustrated headers drift slower than the page: app.js sets --illo-shift, round 13's rule uses it */
/* hover */
.project-open span{transition:transform var(--short) var(--ease)}
.project-card:hover .project-open span,.project-card:focus-visible .project-open span{transform:translate(2px,-2px)}
.service-arrow{transition:transform var(--short) var(--ease)}
.service-row:hover .service-arrow,.service-row:focus-visible .service-arrow{transform:translate(3px,-3px)}
.orbit-face img{transition:transform var(--long) var(--ease)}
.orbit-team .person:hover .orbit-face img{transform:scale(1.06)}
.client-logo img{transition:transform var(--medium) var(--ease),opacity var(--medium)}
/* page change: a little lift as well as the fade */
@keyframes page-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.route-enter{animation-duration:650ms}
/* the phone hero keeps the arrow, not the three-line label */
@media(max-width:760px){.discover .meta{display:none}.discover{justify-self:end}}
/* motion off: everything in place */
.motion-off .rise,.motion-off .write,.motion-off .wipe,.motion-off .anno .hand{clip-path:none!important;transform:none!important;opacity:1!important}
.motion-off .wipe>img{transform:none!important}

/* ===== Round 22: evidence beside each service; IPPF cover first ===== */
.service-detail-grid{grid-template-rows:auto 1fr}
.service-detail-grid>.service-description{grid-column:2;grid-row:1/3}
.seen-in{grid-column:1;grid-row:2;align-self:start;display:block;max-width:400px;margin-top:56px;color:inherit;text-decoration:none}
.seen-in-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--cool)}
.seen-in-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--long) var(--ease)}
.seen-in:hover .seen-in-img img,.seen-in:focus-visible .seen-in-img img{transform:scale(1.03)}
.seen-in-cap{display:grid;gap:3px;padding-top:14px;font-size:15px;line-height:1.4;color:var(--muted)}
.seen-in-cap .meta{margin-bottom:6px}
.seen-in-cap strong{font-weight:500;color:var(--ink)}
.service-detail.dark .seen-in-cap{color:var(--sky)}
.service-detail.dark .seen-in-cap strong{color:var(--paper)}
.service-detail.dark .seen-in-cap .meta{color:var(--sky)}
.seen-in-cap .meta:before{content:'';display:inline-block;width:22px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}
@media(max-width:760px){
  .service-detail-grid{grid-template-rows:auto}
  .service-detail-grid>.service-description{grid-column:auto;grid-row:auto}
  .seen-in{grid-column:auto;grid-row:auto;margin-top:8px;max-width:none}
}
[data-page=ippf] .cs-top-img{object-position:50% 50%}

/* ===== Round 23: the ring in one go ===== */
.js.motion-on .ring-trace{animation:draw-ring 2.1s cubic-bezier(.4,.05,.3,1) .9s both}
.js.motion-on .ring-rest{animation:fade-in .5s var(--ease) 2.7s both}
.motion-off .ring-rest{opacity:1}

/* ===== Round 24: review fixes ===== */
/* no label under 12px */
.meta,.eyebrow,.case-num,.preview-caption,.motion-toggle,.rail-n,.cs-strip span,.detail strong,.company-item strong,.case-fact strong,.footer-bottom,.wk-n,.cs-story-meta{font-size:12px}
/* form errors: words as well as colour */
.field-error{margin:2px 0 0;font-size:14px;line-height:1.4;color:#a8431c}
.field-error:before{content:'';display:inline-block;width:12px;height:1px;background:currentColor;vertical-align:middle;margin-right:8px}
.form [aria-invalid=true]{border-bottom-color:#a8431c}
.consent .field-error{margin-left:30px}
.form-error{grid-column:1/-1;margin:0;padding:14px 16px;border-left:3px solid #a8431c;background:rgba(224,136,94,.12);font-size:15px;line-height:1.45;color:var(--ink)}
.submit[disabled]{opacity:.6;cursor:progress}

/* ===== Round 25: textures as custom properties, dead rules pruned, WOFF2 (see build/round25.py) ===== */

/* ===== Round 26: the footer walk ===== */
.footer-walk{position:relative;padding-top:20px}
.walk-track{position:relative;height:124px;border-bottom:1px solid rgba(167,205,236,.45)}
.walk-stop{position:absolute;top:calc(100% + 12px);left:calc(var(--at) * 100%);transform:translateX(calc(var(--at) * -100%));white-space:nowrap;color:var(--sky)}
.walk-stop .meta{font-size:12px}
.walk-year{font:400 12px Chivo,monospace;opacity:.7}
.walk-stop:before{content:'';position:absolute;top:-16px;left:calc(var(--at) * 100%);width:7px;height:7px;margin-left:calc(var(--at) * -7px);border-radius:50%;background:var(--sky)}
.walk-clock{position:absolute;left:50%;top:0;transform:translateX(-12%) rotate(-3deg);font:400 26px/1 Reenie,"Reenie Beanie",cursive;color:var(--sky);white-space:nowrap}
.walker{position:absolute;left:0;bottom:-1px;width:96px;height:88px;color:var(--paper);cursor:default;will-change:transform}
.walker-art{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.walker.left .walker-art{transform:scaleX(-1)}
.walker-art .wf[hidden]{display:none}
.walker-art .w-far{opacity:.55}
.walker-art .w-case{fill:var(--cover)}
.walker-art .w-head{stroke-width:2}
.walker-art .w-steam{stroke-width:1.3;opacity:.8}
.footer-walk + .footer-bottom{border-top:0;padding-top:56px}
@media(max-width:760px){
  .walk-track{height:104px}
  .walker{width:70px;height:64px}
  .walk-clock{font-size:22px;transform:translateX(-50%) rotate(-3deg)}
  .footer-walk + .footer-bottom{padding-top:52px}
}
@media print{.footer-walk{display:none}}

/* ===== Round 27: landmarks behind the stops ===== */
.landmarks{position:absolute;inset:0;pointer-events:none}
.landmark{position:absolute;bottom:0;height:108px;width:auto;overflow:visible;fill:none;stroke:var(--sky);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;opacity:.26;transition:opacity 1.2s var(--ease)}
.landmark .lm-dot{fill:var(--sky);stroke:none}
.lm-amsterdam{left:14px}
.lm-bucharest{left:50%;transform:translateX(-50%)}
.lm-brussels{right:14px}
.walk-track[data-here="0"] .lm-amsterdam,.walk-track[data-here="1"] .lm-bucharest,.walk-track[data-here="2"] .lm-brussels{opacity:.46}
.walker{z-index:1}
.walk-clock{left:calc(50% + 72px);top:10px;transform:rotate(-3deg)}
@media(max-width:760px){
  .landmark{height:62px;stroke-width:1.5}
  .lm-amsterdam{left:0}.lm-brussels{right:0}
  .walk-clock{left:50%;top:-30px;transform:translateX(-50%) rotate(-3deg)}
  .footer-walk{padding-top:44px}
}

/* ===== Round 28: the home map turns ===== */
.map-disc{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.map-disc.is-dragging{cursor:grabbing}
.map-canvas{display:block}
.map-land[hidden]{display:none}
.client-map .hand-note,.map-pins .note-arrow{transition:opacity .5s var(--ease)}
.map-disc.is-turned .hand-note,.map-disc.is-turned .note-arrow{opacity:0}
.map-count .map-hint{font:400 12px/1.6 Chivo,monospace;letter-spacing:.065em;text-transform:uppercase;color:var(--sky);opacity:.8}
.map-reset{background:none;border:0;border-bottom:1px solid currentColor;color:var(--paper);font:inherit;font-size:18px;padding:0 0 8px;gap:20px;cursor:pointer;margin:0;justify-self:start;align-self:flex-start}
.map-reset span{font-size:22px}
.map-reset:hover span{transform:rotate(-90deg)}
.map-reset[hidden],.map-hint[hidden]{display:none}

/* ===== Round 29: What we do, a calmer hover ===== */
/* selectors carry .js .service-rows so they outrank the reveal, rise and write rules from round 21 */
.service-row,.service-row:hover{padding-left:0}
.service-rows .service-row:before{background:var(--sky);opacity:1;transform:scaleX(0);transform-origin:right center;
  transition:transform 520ms cubic-bezier(.65,0,.35,1)}
.js .service-rows .service-row h3{transition:transform 520ms cubic-bezier(.65,0,.35,1),clip-path 900ms var(--ease) var(--delay,0ms)}
.js .service-rows .service-row p,.js .service-rows .service-arrow{transition:transform 520ms cubic-bezier(.65,0,.35,1),color 400ms ease}
.js .service-rows .row-n{transition:transform 520ms cubic-bezier(.65,0,.35,1),clip-path 800ms linear var(--wd,80ms)}
.service-rows .service-row p{color:var(--muted)}
@media(hover:hover){
  .js .service-rows .service-row:hover:before{transform:scaleX(1);transform-origin:left center;transition-duration:760ms;transition-timing-function:cubic-bezier(.22,1,.36,1)}
  .js .service-rows .service-row:hover h3,.js .service-rows .service-row:hover p{transform:translateX(14px);transition-duration:760ms,900ms;transition-timing-function:cubic-bezier(.22,1,.36,1),ease}
  .js .service-rows .service-row:hover p{color:var(--ink)}
  .js .service-rows .service-row:hover .row-n{transform:rotate(0deg) translateX(6px);transition-duration:900ms,800ms;transition-timing-function:cubic-bezier(.22,1,.36,1),linear}
  .js .service-rows .service-row:hover .service-arrow{transform:translate(6px,-6px);transition-duration:760ms;transition-timing-function:cubic-bezier(.22,1,.36,1)}
}
.js .service-rows .service-row:focus-visible:before{transform:scaleX(1);transform-origin:left center}
.js .service-rows .service-row:focus-visible h3,.js .service-rows .service-row:focus-visible p{transform:translateX(14px)}
.js .service-rows .service-row:focus-visible p{color:var(--ink)}
.service-rows .service-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* ===== Round 31: one case study template, two lengths ===== */
.cs-results{padding:var(--section) var(--pad) clamp(56px,6vw,96px)}
.cs-results .cs-record{margin-top:32px;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.cs-made{padding:var(--section) var(--pad);border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:40px}
.cs-roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gutter);border-top:1px solid var(--rule)}
.cs-roles li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:17px}
.cs-made-note{font-size:15px;color:var(--muted)}
.record .np{font-style:normal;margin:0 -.18em}
.cs-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.cs-pair+.cs-pair{margin-top:32px}
.cs-ph{aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:20px;text-align:center;
  background:var(--cool);border:1px dashed rgba(23,67,117,.28);color:var(--blue);font-size:15px;line-height:1.4}
.cs-ph-tag{font:400 11px Chivo,monospace;letter-spacing:.065em;text-transform:uppercase;color:var(--muted)}
.cs-next{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px var(--gutter);padding:clamp(48px,5vw,80px) var(--pad);border-top:1px solid var(--rule);color:var(--ink);text-decoration:none}
.cs-next .eyebrow{grid-column:1/-1;color:var(--muted)}
.cs-next-title{display:flex;flex-direction:column;gap:6px;font-size:clamp(32px,4vw,60px);line-height:1.05;letter-spacing:-.03em}
.cs-next-client{font:400 13px Chivo,monospace;letter-spacing:.065em;text-transform:uppercase;color:var(--blue)}
.cs-next-arrow{font-size:clamp(32px,3vw,48px);line-height:1;transition:transform var(--medium) var(--ease)}
.cs-next:hover .cs-next-arrow,.cs-next:focus-visible .cs-next-arrow{transform:translateX(10px)}
.cs-device{margin:48px 0}
.cs-device .case-triptych,.cs-device .language-grid,.cs-device .case-compare,.cs-device .six-grid{margin-top:0}
.cs-device .case-compare+.case-compare{margin-top:24px}
.cs-device .case-diagram{color:var(--blue)}
.cs-device .case-node{color:var(--ink)}
.cs-year{font:400 clamp(80px,10vw,160px)/1 Chivo,monospace!important;letter-spacing:-.08em;color:var(--blue);margin:0 0 24px!important}
@media(max-width:760px){
  .cs-results .cs-record{grid-template-columns:1fr 1fr}
  .cs-roles{grid-template-columns:1fr}
  .cs-trio{grid-template-columns:1fr}
  .cs-next{grid-template-columns:1fr auto}
}