: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:#a4ceea;--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(164,206,234,.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(164,206,234,.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(164,206,234,.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(164,206,234,.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(164,206,234,.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(164,206,234,.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(164,206,234,.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(164,206,234,.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(164,206,234,.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(164,206,234,.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(164,206,234,.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(164,206,234,.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}
}

/* ===== Round 32: client logos, quieter ===== */
.client-logo img{opacity:.45}
@media(hover:hover){.client-logo:hover img{opacity:1}}

/* ===== Round 33: the figures under the intro, given room ===== */
.reach{list-style:none;margin:clamp(64px,6vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);border-bottom:1px solid var(--rule)}
.reach-item{position:relative;z-index:0;border-top:1px solid var(--rule)}
.reach-cell{position:relative;display:block;padding:28px 0 44px;color:inherit;text-decoration:none}
.reach-top{display:flex;justify-content:space-between;align-items:center;height:20px;gap:16px;font:400 12px/1.4 Chivo,monospace;letter-spacing:.065em;text-transform:uppercase;color:var(--muted)}
.reach-go{font:400 20px/20px 'Hanken Grotesk',sans-serif;letter-spacing:0;color:var(--blue)}
.reach-n{--row:1.04em;position:relative;display:inline-block;margin:26px 0 30px;font:400 clamp(60px,8.8vw,140px)/var(--row) Chivo,monospace;color:var(--blue);white-space:nowrap}
.odo{display:inline-block;vertical-align:top}
.od,.od-x,.od-sp{display:inline-block;vertical-align:top;height:var(--row);line-height:var(--row);margin-right:-.045em}
.od{overflow:hidden}
.od-sp{width:.28em}
.od-strip{display:block;transform:translateY(calc(var(--to) * var(--row) * -1))}
.od-strip span{display:block;height:var(--row)}
.reach-stroke{position:absolute;left:-2%;bottom:-.2em;width:104%;height:.2em;color:var(--sky);transform:rotate(var(--tilt))}
.reach-text{display:block;max-width:34ch;font-size:clamp(17px,1.3vw,19px);line-height:1.45;color:var(--ink)}
/* rolling: from 0, each strip turns to its row; the right-hand digits land last */
.js.motion-on .reach-item:not(.go) .od-strip{transform:none}
.js.motion-on .reach-item.go .od-strip{transition:transform calc(1300ms + var(--d) * 170ms) cubic-bezier(.12,.75,.18,1)}
.js.motion-on .reach-item:not(.landed) .od{-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent)}
.js.motion-on .reach-item .od-x{transition:opacity 500ms var(--ease),transform 700ms var(--ease)}
.js.motion-on .reach-item:not(.landed) .od-x{opacity:0;transform:translateY(-.3em)}
/* the stroke is drawn once the figure has landed */
.motion-on .reach-item .draw{transition-delay:0ms}
.motion-on .reach-item:not(.landed) .draw{clip-path:inset(0 100% 0 0)}
.motion-on .reach-item.landed .draw{clip-path:inset(0 0 0 0);transition:clip-path 900ms var(--ease) 80ms}
/* the two with a case study: light blue band and a small slide, as in What we do */
a.reach-cell:before{content:'';position:absolute;inset:0 calc(var(--gutter) / -2);z-index:-1;background:var(--sky);transform:scaleX(0);transform-origin:right center;transition:transform 520ms cubic-bezier(.65,0,.35,1)}
a.reach-cell .reach-top,a.reach-cell .reach-n,a.reach-cell .reach-text{transition:transform 520ms cubic-bezier(.65,0,.35,1)}
a.reach-cell .reach-go{transition:transform 520ms cubic-bezier(.65,0,.35,1)}
@media(hover:hover){
  a.reach-cell:hover:before{transform:scaleX(1);transform-origin:left center;transition-duration:760ms;transition-timing-function:cubic-bezier(.22,1,.36,1)}
  a.reach-cell:hover .reach-n,a.reach-cell:hover .reach-text,a.reach-cell:hover .reach-client{transform:translateX(14px)}
  a.reach-cell:hover .reach-top,a.reach-cell:hover .reach-n,a.reach-cell:hover .reach-text{transition-duration:760ms;transition-timing-function:cubic-bezier(.22,1,.36,1)}
  a.reach-cell:hover .reach-go{transform:translate(4px,-4px)}
  a.reach-cell:hover .reach-stroke{color:var(--paper)}
}
a.reach-cell:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.reach-client{display:inline-block;transition:transform 520ms cubic-bezier(.65,0,.35,1)}
@media(max-width:900px){
  .reach{grid-template-columns:1fr}
}
@media(max-width:760px){
  .reach-cell{padding:22px 0 34px}
  .reach-n{margin:18px 0 22px}
}
@media print{.reach-stroke{display:none}}

/* ===== Round 34: the figures back on one row ===== */
.reach{grid-template-columns:1.2fr 1.5fr 1fr 1fr;column-gap:var(--gutter);margin-top:clamp(48px,5vw,80px);border-bottom:0}
.reach-cell{padding:22px 0 8px}
.reach-n{font-size:clamp(44px,6.3vw,92px);margin:16px 0 18px}
.reach-text{font-size:16px;line-height:1.45;max-width:26ch}
.reach-stroke{bottom:-.16em;height:.17em}
a.reach-cell:before{inset:0 calc(var(--gutter) / -2) -16px}
@media(max-width:900px){
  .reach{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reach-cell{padding:20px 0 28px}
  .reach-n{font-size:clamp(34px,8.6vw,72px)}
}
@media(max-width:760px){
  .reach{column-gap:16px}
  .reach-cell{padding:16px 0 22px}
  .reach-n{margin:12px 0 14px}
  .reach-text{font-size:15px}
  a.reach-cell:before{inset:0 -8px}
}

/* ===== Round 35: one light blue, the logo's ===== */
.brand img{filter:none}

/* ===== Round 36: "Discover our work" by hand ===== */
.discover{display:flex;align-items:flex-start;gap:6px;justify-self:center;color:var(--sky);text-decoration:none;transform:translateY(10px)}
.discover-hand{font:400 clamp(36px,3.1vw,48px)/.95 'Reenie Beanie',Reenie,cursive;letter-spacing:.02em;transform:rotate(-4deg);transform-origin:left center;white-space:nowrap;margin-top:6px}
.discover-arrow{width:clamp(42px,3.6vw,56px);height:auto;fill:currentColor;flex:none;transition:transform 700ms cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.discover:hover .discover-arrow{transform:translateY(8px)}}
.discover:focus-visible{outline:2px solid var(--sky);outline-offset:6px}
/* motion: the words are written on once the tagline is in, then the arrow is drawn top to bottom */
.js.motion-on .page.active .discover-hand{animation:discover-write 900ms linear 2.1s both}
.js.motion-on .page.active .discover-arrow{animation:discover-draw 800ms cubic-bezier(.45,0,.2,1) 2.9s both}
@keyframes discover-write{from{clip-path:inset(-30% 100% -30% -5%)}to{clip-path:inset(-30% -5% -30% -5%)}}
@keyframes discover-draw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media(max-width:760px){
  .discover{justify-self:end;transform:translateY(10px)}
  .discover{gap:0}
  .discover .discover-hand{font-size:27px;line-height:.85}
  .discover-hand>span{display:block}
  .discover-arrow{width:26px;margin-top:8px}
}

/* ===== Round 37: arrows by hand ===== */
.ha-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ha{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.24em;fill:currentColor;overflow:visible;flex:none}
.case-arrow .ha{width:1.2em;height:1.2em}
.case-back:before{content:'';display:inline-block;width:1.15em;height:1.15em;vertical-align:-.25em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.9%2C10.6%20L20.7%2C10.5%20L20.5%2C10.4%20L20.2%2C10.3%20L19.9%2C10.2%20L19.6%2C10.2%20L19.2%2C10.1%20L18.9%2C10.2%20L18.5%2C10.3%20L18.1%2C10.3%20L17.7%2C10.5%20L17.3%2C10.5%20L16.9%2C10.5%20L16.5%2C10.6%20L16.1%2C10.7%20L15.8%2C10.7%20L15.4%2C10.7%20L15.1%2C10.7%20L14.7%2C10.8%20L14.4%2C10.8%20L14.0%2C10.8%20L13.6%2C10.8%20L13.3%2C10.8%20L12.9%2C10.8%20L12.5%2C10.8%20L12.1%2C10.9%20L11.7%2C10.9%20L11.4%2C10.9%20L11.0%2C10.9%20L10.6%2C10.9%20L10.2%2C10.9%20L9.8%2C11.0%20L9.4%2C11.0%20L9.0%2C11.1%20L8.6%2C11.1%20L8.2%2C11.2%20L7.7%2C11.3%20L7.3%2C11.4%20L6.9%2C11.4%20L6.4%2C11.5%20L6.0%2C11.5%20L5.6%2C11.6%20L5.1%2C11.7%20L4.8%2C11.8%20L4.4%2C11.8%20L4.1%2C11.9%20L3.8%2C11.9%20L3.5%2C12.0%20L3.3%2C12.0%20L3.5%2C13.4%20L3.7%2C13.4%20L4.0%2C13.4%20L4.3%2C13.3%20L4.6%2C13.3%20L5.0%2C13.3%20L5.3%2C13.2%20L5.8%2C13.2%20L6.2%2C13.2%20L6.6%2C13.2%20L7.0%2C13.1%20L7.5%2C13.1%20L7.9%2C13.0%20L8.4%2C13.1%20L8.8%2C13.0%20L9.2%2C13.0%20L9.6%2C13.0%20L9.9%2C12.9%20L10.3%2C12.9%20L10.7%2C13.0%20L11.1%2C12.9%20L11.4%2C12.9%20L11.8%2C12.9%20L12.2%2C12.9%20L12.6%2C12.9%20L12.9%2C12.8%20L13.3%2C12.8%20L13.7%2C12.8%20L14.1%2C12.8%20L14.5%2C12.8%20L14.8%2C12.8%20L15.2%2C12.7%20L15.6%2C12.7%20L16.0%2C12.6%20L16.4%2C12.6%20L16.8%2C12.5%20L17.2%2C12.5%20L17.6%2C12.5%20L18.0%2C12.4%20L18.4%2C12.4%20L18.8%2C12.4%20L19.1%2C12.3%20L19.5%2C12.3%20L19.8%2C12.2%20L20.2%2C12.1%20L20.4%2C11.9%20L20.7%2C11.8%20L20.9%2C11.5%20L21.1%2C11.4ZM10.0%2C15.6%20L9.9%2C15.6%20L9.8%2C15.5%20L9.8%2C15.3%20L9.7%2C15.3%20L9.6%2C15.2%20L9.5%2C15.1%20L9.4%2C15.0%20L9.3%2C15.0%20L9.1%2C14.9%20L9.0%2C14.8%20L8.8%2C14.8%20L8.7%2C14.7%20L8.5%2C14.6%20L8.4%2C14.6%20L8.3%2C14.5%20L8.1%2C14.4%20L7.9%2C14.4%20L7.8%2C14.2%20L7.7%2C14.2%20L7.5%2C14.1%20L7.4%2C14.0%20L7.2%2C13.9%20L7.1%2C13.9%20L7.0%2C13.8%20L6.9%2C13.7%20L6.7%2C13.6%20L6.6%2C13.6%20L6.4%2C13.5%20L6.3%2C13.4%20L6.1%2C13.3%20L6.0%2C13.2%20L5.8%2C13.2%20L5.7%2C13.1%20L5.5%2C13.0%20L5.4%2C12.9%20L5.2%2C12.8%20L5.1%2C12.7%20L4.9%2C12.6%20L4.8%2C12.6%20L4.6%2C12.5%20L4.5%2C12.4%20L4.4%2C12.3%20L4.3%2C12.2%20L4.2%2C12.2%20L4.1%2C12.1%20L4.0%2C12.0%20L3.9%2C11.9%20L3.9%2C11.9%20L2.9%2C13.5%20L3.0%2C13.5%20L3.1%2C13.5%20L3.2%2C13.6%20L3.3%2C13.6%20L3.4%2C13.7%20L3.6%2C13.7%20L3.7%2C13.8%20L3.9%2C13.9%20L4.0%2C13.9%20L4.1%2C14.1%20L4.3%2C14.1%20L4.4%2C14.2%20L4.6%2C14.3%20L4.7%2C14.4%20L4.9%2C14.5%20L5.1%2C14.6%20L5.2%2C14.7%20L5.4%2C14.7%20L5.5%2C14.8%20L5.7%2C14.9%20L5.9%2C15.0%20L6.0%2C15.1%20L6.2%2C15.2%20L6.3%2C15.2%20L6.5%2C15.3%20L6.6%2C15.3%20L6.8%2C15.4%20L6.9%2C15.4%20L7.1%2C15.5%20L7.3%2C15.5%20L7.5%2C15.5%20L7.6%2C15.6%20L7.8%2C15.7%20L7.9%2C15.7%20L8.1%2C15.8%20L8.3%2C15.8%20L8.4%2C15.9%20L8.6%2C15.9%20L8.7%2C15.9%20L8.9%2C16.0%20L9.0%2C16.0%20L9.1%2C16.1%20L9.3%2C16.1%20L9.4%2C16.1%20L9.5%2C16.1%20L9.6%2C16.0%20L9.7%2C16.0%20L9.8%2C16.0ZM9.3%2C8.6%20L9.2%2C8.5%20L9.1%2C8.5%20L9.0%2C8.5%20L8.9%2C8.5%20L8.7%2C8.5%20L8.6%2C8.5%20L8.5%2C8.6%20L8.3%2C8.6%20L8.2%2C8.7%20L8.1%2C8.8%20L7.9%2C8.9%20L7.8%2C9.0%20L7.6%2C9.0%20L7.5%2C9.1%20L7.4%2C9.2%20L7.2%2C9.3%20L7.1%2C9.3%20L6.9%2C9.4%20L6.7%2C9.5%20L6.6%2C9.6%20L6.5%2C9.7%20L6.3%2C9.7%20L6.1%2C9.8%20L6.0%2C9.9%20L5.9%2C9.9%20L5.7%2C10.0%20L5.6%2C10.1%20L5.4%2C10.2%20L5.2%2C10.3%20L5.1%2C10.4%20L4.9%2C10.5%20L4.8%2C10.6%20L4.6%2C10.7%20L4.5%2C10.8%20L4.3%2C10.9%20L4.2%2C11.0%20L4.0%2C11.1%20L3.9%2C11.2%20L3.8%2C11.3%20L3.6%2C11.4%20L3.5%2C11.5%20L3.4%2C11.6%20L3.3%2C11.7%20L3.2%2C11.8%20L3.1%2C11.8%20L3.0%2C11.9%20L2.9%2C11.9%20L2.9%2C12.0%20L3.9%2C13.4%20L4.0%2C13.4%20L4.1%2C13.3%20L4.2%2C13.2%20L4.3%2C13.1%20L4.4%2C13.1%20L4.5%2C13.0%20L4.6%2C12.9%20L4.7%2C12.8%20L4.9%2C12.7%20L5.0%2C12.6%20L5.1%2C12.5%20L5.3%2C12.4%20L5.4%2C12.3%20L5.5%2C12.1%20L5.7%2C12.1%20L5.8%2C12.0%20L5.9%2C11.8%20L6.1%2C11.7%20L6.2%2C11.6%20L6.3%2C11.5%20L6.5%2C11.4%20L6.6%2C11.3%20L6.7%2C11.2%20L6.8%2C11.0%20L6.9%2C11.0%20L7.0%2C10.9%20L7.1%2C10.8%20L7.3%2C10.7%20L7.4%2C10.6%20L7.5%2C10.5%20L7.7%2C10.4%20L7.8%2C10.3%20L8.0%2C10.2%20L8.1%2C10.1%20L8.3%2C10.1%20L8.4%2C10.0%20L8.5%2C9.9%20L8.7%2C9.8%20L8.8%2C9.7%20L8.9%2C9.7%20L9.0%2C9.6%20L9.2%2C9.6%20L9.2%2C9.4%20L9.3%2C9.3%20L9.4%2C9.2%20L9.4%2C9.1%20L9.5%2C9.0%20L9.5%2C8.9Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.9%2C10.6%20L20.7%2C10.5%20L20.5%2C10.4%20L20.2%2C10.3%20L19.9%2C10.2%20L19.6%2C10.2%20L19.2%2C10.1%20L18.9%2C10.2%20L18.5%2C10.3%20L18.1%2C10.3%20L17.7%2C10.5%20L17.3%2C10.5%20L16.9%2C10.5%20L16.5%2C10.6%20L16.1%2C10.7%20L15.8%2C10.7%20L15.4%2C10.7%20L15.1%2C10.7%20L14.7%2C10.8%20L14.4%2C10.8%20L14.0%2C10.8%20L13.6%2C10.8%20L13.3%2C10.8%20L12.9%2C10.8%20L12.5%2C10.8%20L12.1%2C10.9%20L11.7%2C10.9%20L11.4%2C10.9%20L11.0%2C10.9%20L10.6%2C10.9%20L10.2%2C10.9%20L9.8%2C11.0%20L9.4%2C11.0%20L9.0%2C11.1%20L8.6%2C11.1%20L8.2%2C11.2%20L7.7%2C11.3%20L7.3%2C11.4%20L6.9%2C11.4%20L6.4%2C11.5%20L6.0%2C11.5%20L5.6%2C11.6%20L5.1%2C11.7%20L4.8%2C11.8%20L4.4%2C11.8%20L4.1%2C11.9%20L3.8%2C11.9%20L3.5%2C12.0%20L3.3%2C12.0%20L3.5%2C13.4%20L3.7%2C13.4%20L4.0%2C13.4%20L4.3%2C13.3%20L4.6%2C13.3%20L5.0%2C13.3%20L5.3%2C13.2%20L5.8%2C13.2%20L6.2%2C13.2%20L6.6%2C13.2%20L7.0%2C13.1%20L7.5%2C13.1%20L7.9%2C13.0%20L8.4%2C13.1%20L8.8%2C13.0%20L9.2%2C13.0%20L9.6%2C13.0%20L9.9%2C12.9%20L10.3%2C12.9%20L10.7%2C13.0%20L11.1%2C12.9%20L11.4%2C12.9%20L11.8%2C12.9%20L12.2%2C12.9%20L12.6%2C12.9%20L12.9%2C12.8%20L13.3%2C12.8%20L13.7%2C12.8%20L14.1%2C12.8%20L14.5%2C12.8%20L14.8%2C12.8%20L15.2%2C12.7%20L15.6%2C12.7%20L16.0%2C12.6%20L16.4%2C12.6%20L16.8%2C12.5%20L17.2%2C12.5%20L17.6%2C12.5%20L18.0%2C12.4%20L18.4%2C12.4%20L18.8%2C12.4%20L19.1%2C12.3%20L19.5%2C12.3%20L19.8%2C12.2%20L20.2%2C12.1%20L20.4%2C11.9%20L20.7%2C11.8%20L20.9%2C11.5%20L21.1%2C11.4ZM10.0%2C15.6%20L9.9%2C15.6%20L9.8%2C15.5%20L9.8%2C15.3%20L9.7%2C15.3%20L9.6%2C15.2%20L9.5%2C15.1%20L9.4%2C15.0%20L9.3%2C15.0%20L9.1%2C14.9%20L9.0%2C14.8%20L8.8%2C14.8%20L8.7%2C14.7%20L8.5%2C14.6%20L8.4%2C14.6%20L8.3%2C14.5%20L8.1%2C14.4%20L7.9%2C14.4%20L7.8%2C14.2%20L7.7%2C14.2%20L7.5%2C14.1%20L7.4%2C14.0%20L7.2%2C13.9%20L7.1%2C13.9%20L7.0%2C13.8%20L6.9%2C13.7%20L6.7%2C13.6%20L6.6%2C13.6%20L6.4%2C13.5%20L6.3%2C13.4%20L6.1%2C13.3%20L6.0%2C13.2%20L5.8%2C13.2%20L5.7%2C13.1%20L5.5%2C13.0%20L5.4%2C12.9%20L5.2%2C12.8%20L5.1%2C12.7%20L4.9%2C12.6%20L4.8%2C12.6%20L4.6%2C12.5%20L4.5%2C12.4%20L4.4%2C12.3%20L4.3%2C12.2%20L4.2%2C12.2%20L4.1%2C12.1%20L4.0%2C12.0%20L3.9%2C11.9%20L3.9%2C11.9%20L2.9%2C13.5%20L3.0%2C13.5%20L3.1%2C13.5%20L3.2%2C13.6%20L3.3%2C13.6%20L3.4%2C13.7%20L3.6%2C13.7%20L3.7%2C13.8%20L3.9%2C13.9%20L4.0%2C13.9%20L4.1%2C14.1%20L4.3%2C14.1%20L4.4%2C14.2%20L4.6%2C14.3%20L4.7%2C14.4%20L4.9%2C14.5%20L5.1%2C14.6%20L5.2%2C14.7%20L5.4%2C14.7%20L5.5%2C14.8%20L5.7%2C14.9%20L5.9%2C15.0%20L6.0%2C15.1%20L6.2%2C15.2%20L6.3%2C15.2%20L6.5%2C15.3%20L6.6%2C15.3%20L6.8%2C15.4%20L6.9%2C15.4%20L7.1%2C15.5%20L7.3%2C15.5%20L7.5%2C15.5%20L7.6%2C15.6%20L7.8%2C15.7%20L7.9%2C15.7%20L8.1%2C15.8%20L8.3%2C15.8%20L8.4%2C15.9%20L8.6%2C15.9%20L8.7%2C15.9%20L8.9%2C16.0%20L9.0%2C16.0%20L9.1%2C16.1%20L9.3%2C16.1%20L9.4%2C16.1%20L9.5%2C16.1%20L9.6%2C16.0%20L9.7%2C16.0%20L9.8%2C16.0ZM9.3%2C8.6%20L9.2%2C8.5%20L9.1%2C8.5%20L9.0%2C8.5%20L8.9%2C8.5%20L8.7%2C8.5%20L8.6%2C8.5%20L8.5%2C8.6%20L8.3%2C8.6%20L8.2%2C8.7%20L8.1%2C8.8%20L7.9%2C8.9%20L7.8%2C9.0%20L7.6%2C9.0%20L7.5%2C9.1%20L7.4%2C9.2%20L7.2%2C9.3%20L7.1%2C9.3%20L6.9%2C9.4%20L6.7%2C9.5%20L6.6%2C9.6%20L6.5%2C9.7%20L6.3%2C9.7%20L6.1%2C9.8%20L6.0%2C9.9%20L5.9%2C9.9%20L5.7%2C10.0%20L5.6%2C10.1%20L5.4%2C10.2%20L5.2%2C10.3%20L5.1%2C10.4%20L4.9%2C10.5%20L4.8%2C10.6%20L4.6%2C10.7%20L4.5%2C10.8%20L4.3%2C10.9%20L4.2%2C11.0%20L4.0%2C11.1%20L3.9%2C11.2%20L3.8%2C11.3%20L3.6%2C11.4%20L3.5%2C11.5%20L3.4%2C11.6%20L3.3%2C11.7%20L3.2%2C11.8%20L3.1%2C11.8%20L3.0%2C11.9%20L2.9%2C11.9%20L2.9%2C12.0%20L3.9%2C13.4%20L4.0%2C13.4%20L4.1%2C13.3%20L4.2%2C13.2%20L4.3%2C13.1%20L4.4%2C13.1%20L4.5%2C13.0%20L4.6%2C12.9%20L4.7%2C12.8%20L4.9%2C12.7%20L5.0%2C12.6%20L5.1%2C12.5%20L5.3%2C12.4%20L5.4%2C12.3%20L5.5%2C12.1%20L5.7%2C12.1%20L5.8%2C12.0%20L5.9%2C11.8%20L6.1%2C11.7%20L6.2%2C11.6%20L6.3%2C11.5%20L6.5%2C11.4%20L6.6%2C11.3%20L6.7%2C11.2%20L6.8%2C11.0%20L6.9%2C11.0%20L7.0%2C10.9%20L7.1%2C10.8%20L7.3%2C10.7%20L7.4%2C10.6%20L7.5%2C10.5%20L7.7%2C10.4%20L7.8%2C10.3%20L8.0%2C10.2%20L8.1%2C10.1%20L8.3%2C10.1%20L8.4%2C10.0%20L8.5%2C9.9%20L8.7%2C9.8%20L8.8%2C9.7%20L8.9%2C9.7%20L9.0%2C9.6%20L9.2%2C9.6%20L9.2%2C9.4%20L9.3%2C9.3%20L9.4%2C9.2%20L9.4%2C9.1%20L9.5%2C9.0%20L9.5%2C8.9Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}

/* ===== Round 38: one blue for the blue grounds ===== */
.manifesto,.discipline-bridge{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}
/* the handwritten eyebrow here was penrose blue on blue, so it never showed: light blue, as on the other blue grounds */
.discipline-bridge .eyebrow{color:var(--sky)}

/* ===== Round 39: About, the story's map ===== */
.story-head{align-items:start}
.story-side{position:sticky;top:120px}
.story-map{margin:28px 0 0;max-width:470px;color:var(--blue)}
.story-svg{display:block;width:100%;height:auto;overflow:visible}
.story-land{fill:currentColor;fill-opacity:.075;stroke:currentColor;stroke-opacity:.28;stroke-width:.7;stroke-linejoin:round}
.story-go,.story-back{fill:currentColor}
.story-back{opacity:.75}
.story-dot{fill:currentColor}
.story-home{fill:var(--coral)}
.story-home-ring{fill:none;stroke:var(--coral);stroke-width:1.4;opacity:.7}
.story-hand{font:400 30px 'Reenie Beanie',Reenie,cursive;fill:currentColor;letter-spacing:.02em}
/* the strokes draw once the map arrives: out to Bucharest first, then back to Brussels */
.motion-on .story-map .story-go{transition-delay:300ms}
.motion-on .story-map .story-back{transition-delay:1200ms}
.motion-on .story-map .story-hand{transition:opacity 700ms var(--ease) 1.9s}
.motion-on .story-map:not(.visible) .story-hand{opacity:0}
@media(max-width:760px){.story-map{display:none}.story-side{position:static}}

/* ===== Round 40: the footer, completed ===== */
.footer-info{grid-template-columns:1fr 1fr 1.4fr 1.25fr}
.footer-made p{max-width:30ch}
.footer-social{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.footer-social a{display:inline-flex;align-items:center;gap:6px;width:auto;color:inherit;text-decoration:none;line-height:1.8}
.footer-social a .ha{transition:transform 420ms cubic-bezier(.22,1,.36,1)}
.footer-social a[href]:hover{text-decoration:underline;text-underline-offset:6px}
.footer-social a[href]:hover .ha{transform:translate(2px,-2px)}
.footer-social a[aria-disabled]{opacity:.55;cursor:default}
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.footer-legal a{color:inherit;text-decoration:none}
.footer-legal a:hover{text-decoration:underline;text-underline-offset:5px}
.legal-hero{min-height:0}
.legal-body{min-height:40vh}
.legal-text{max-width:62ch}
.legal-note{font-size:18px;color:var(--muted)}
@media(max-width:1100px){.footer-info{grid-template-columns:1fr 1fr}.footer-info>div:last-child{grid-column:auto}}
@media(max-width:760px){.footer-info{grid-template-columns:1fr}.footer-legal{gap:4px 16px}}

/* ===== Round 41: a quiet line between a blue section and the footer ===== */
.site-footer{position:relative}
body:has(.page.active > :is(.discipline-bridge,.manifesto,.across-borders,.visit,.human-home,.orbit-team,.dark):last-child) .site-footer:before{
  content:'';position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:rgba(164,206,234,.3)}

/* ===== Round 42: the two blue sections in the navigation's blue ===== */
.manifesto,.discipline-bridge{background:var(--cover)}

/* ===== Round 43: the mobile menu, with some character ===== */
.menu-n,.menu-ul,.menu-extra,.menu-ring{display:none}
.navlinks a .menu-t{display:inline}
/* the contact link's arrow is sized by .nav-contact span: keep that rule off the new text wrapper */
.nav-contact .menu-t{font-size:inherit;display:inline-flex;align-items:center;gap:32px}
@media(max-width:1100px){.nav-contact .menu-t{gap:12px}}
@media(max-width:760px){
  .navlinks{display:flex;visibility:hidden;clip-path:circle(0 at calc(100% - 44px) 44px);
    background:var(--cover);background-image:var(--grain-blue),radial-gradient(60% 50% at 70% 30%,#1f4985,rgba(15,55,115,0) 100%);background-size:180px 180px,100% 100%;background-blend-mode:overlay,normal;
    padding:128px 24px 40px;gap:0;justify-content:flex-start;overflow-x:hidden;overflow-y:auto;
    transition:clip-path 420ms cubic-bezier(.65,0,.35,1),visibility 0s linear 420ms}
  .navlinks.open{visibility:visible;clip-path:circle(150% at calc(100% - 44px) 44px);transition:clip-path 700ms cubic-bezier(.65,0,.35,1),visibility 0s}
  .nav.is-fixed .navlinks{padding-top:116px}
  body.menu-open .brand{position:relative;z-index:32}
  body.menu-open .nav.is-fixed{box-shadow:none}
  /* the ring behind */
  .menu-ring{display:block;position:absolute;z-index:-1;left:-18%;top:18%;width:150%;aspect-ratio:1292/578;background:var(--sky);opacity:0;
    -webkit-mask:url(assets/orbit-ring.svg) center/contain no-repeat;mask:url(assets/orbit-ring.svg) center/contain no-repeat;
    transform:rotate(-14deg) scale(.86);transition:opacity 500ms ease,transform 1100ms cubic-bezier(.22,1,.36,1)}
  .navlinks.open .menu-ring{opacity:.16;transform:rotate(0) scale(1);transition-delay:180ms}
  /* the links */
  .navlinks a{border:0;width:100%}
  .navlinks>a{display:grid;grid-template-columns:40px 1fr;align-items:baseline;column-gap:6px;padding:10px 0 14px;position:relative;
    font-size:clamp(38px,11.6vw,48px);line-height:1.08;letter-spacing:-.03em;color:var(--paper);overflow:visible}
  .navlinks>a:after{display:none}
  .navlinks>a .menu-t{display:block}
  .menu-n{display:block;font:400 30px/1 'Reenie Beanie',Reenie,cursive;color:var(--sky);transform:rotate(var(--tilt));letter-spacing:.02em;align-self:center;margin-top:4px}
  .menu-ul{display:block;position:absolute;left:46px;bottom:4px;width:min(70%,260px);height:12px;fill:var(--sky);opacity:0}
  .navlinks>a[aria-current=page] .menu-ul{opacity:1}
  .navlinks>a.nav-contact{margin-top:6px;font-size:34px}
  .nav-contact .menu-t{display:inline-flex;gap:14px}
  .nav-contact .menu-t span{font-size:30px}
  /* below the links */
  .menu-extra{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:auto;padding-top:40px;font-size:17px;color:var(--sky)}
  .menu-extra .meta{margin-bottom:10px;color:var(--sky);opacity:.8}
  .menu-extra a{padding:3px 0;font-size:17px;color:var(--paper)}
  .menu-social{display:flex;gap:20px;margin-top:12px}
  .menu-social a{display:inline-flex;align-items:center;gap:6px;color:var(--sky)}
  .menu-clock{margin:22px 0 0;font:400 28px/1 'Reenie Beanie',Reenie,cursive;color:var(--sky);transform:rotate(-3deg);transform-origin:left center;min-height:28px}
  /* motion: links rise out of their baseline in turn, numbers are written on, the rest follows */
  .js.motion-on .navlinks>a .menu-t,.js.motion-on .navlinks>a .menu-n,.js.motion-on .navlinks>a>span[aria-hidden]:not(.menu-n){transition:transform 700ms cubic-bezier(.22,1,.36,1),opacity 500ms ease,clip-path 600ms linear}
  .js.motion-on .navlinks:not(.open)>a .menu-t{transform:translateY(55%);opacity:0}
  .js.motion-on .navlinks:not(.open)>a .menu-n{clip-path:inset(-20% 100% -20% 0)}
  .js.motion-on .navlinks.open>a .menu-n{clip-path:inset(-20% -10% -20% 0)}
  .js.motion-on .navlinks:not(.open)>a>span[aria-hidden]:not(.menu-n){opacity:0;transform:translate(-8px,8px)}
  .js.motion-on .navlinks.open>a .menu-t,.js.motion-on .navlinks.open>a>span[aria-hidden]:not(.menu-n){transition-delay:calc(260ms + var(--i) * 80ms)}
  .js.motion-on .navlinks.open>a .menu-n{transition-delay:calc(420ms + var(--i) * 80ms)}
  .js.motion-on .menu-extra{transition:opacity 600ms ease,transform 700ms cubic-bezier(.22,1,.36,1)}
  .js.motion-on .navlinks:not(.open) .menu-extra{opacity:0;transform:translateY(16px)}
  .js.motion-on .navlinks.open .menu-extra{transition-delay:700ms}
  .js.motion-on .navlinks:not(.open)>a .menu-t,.js.motion-on .navlinks:not(.open) .menu-extra{transition-delay:0ms;transition-duration:200ms}
  /* motion off: it simply appears */
  body:not(.motion-on) .navlinks{clip-path:none;transition:none}
  body:not(.motion-on) .menu-ring{transition:none}
}

/* ===== Round 44: the rest of the case studies ===== */
.r-3x2{aspect-ratio:3/2}
.r-4x3{aspect-ratio:4/3}
/* in a pair the row height sets the size; the ratio only applies to single images */
.wk-two .wk-img{aspect-ratio:auto}
/* image-led cases: the summary sentence is still to come */
.cs-hinge.cs-tocome{background:transparent;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.cs-hinge.cs-tocome p{display:flex;flex-direction:column;gap:10px;padding:28px 32px;border:1px dashed rgba(23,67,117,.32);background:var(--cool);
  font-size:clamp(20px,1.8vw,26px);color:var(--muted);max-width:none}

/* ===== Round 45: EFFAT ===== */
.cs-ideas.cs-ideas-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:760px){.cs-ideas.cs-ideas-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-client-team li{line-height:1.5}

/* ===== Round 46: the policies, and the cookie choices ===== */
.legal-hero{min-height:clamp(320px,34vw,460px)}
.legal-body{padding:clamp(56px,6vw,96px) 0 var(--section)}
.legal-lead{display:grid;grid-template-columns:minmax(200px,2.6fr) 9fr;column-gap:var(--gutter);padding:0 var(--pad)}
.legal-lead-text{grid-column:2;max-width:62ch}
.legal-lead p{font-size:clamp(20px,1.7vw,24px);line-height:1.45;margin:0}
.legal-lead p+p{margin-top:1em}
.legal-grid{margin-top:clamp(24px,3vw,40px)}
.legal-grid .cs-rail{padding-top:clamp(40px,4vw,64px)}
.legal-chapter{padding-top:clamp(48px,5vw,80px)}
.legal-chapter:last-child{padding-bottom:0}
.legal-chapter h2{font-size:clamp(28px,2.6vw,38px);line-height:1.15;letter-spacing:-.02em;margin:0 0 24px;max-width:24ch}
.legal-text{max-width:none;font-size:clamp(17px,1.25vw,19px);line-height:1.6}
.legal-text>:not(.legal-table){max-width:62ch}
.legal-text p{margin:0 0 1em}
.legal-text h3{font-size:clamp(20px,1.6vw,24px);margin:36px 0 12px;line-height:1.25}
.legal-text ul{margin:0 0 1.2em;padding-left:1.1em}
.legal-text li{margin:.35em 0}
.legal-lead a,.legal-text a{color:var(--blue);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.legal-text strong{font-weight:600}
.legal-table{margin:12px 0 1.6em;max-width:960px}
.legal-table table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:16px;line-height:1.5}
.legal-table th{font:400 11px/1.4 Chivo,monospace;letter-spacing:.065em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 24px 12px 0;border-bottom:1px solid var(--rule)}
.legal-table td{vertical-align:top;padding:16px 24px 18px 0;border-bottom:1px solid var(--rule)}
.legal-table td:first-child{font-weight:500}
.legal-table.cols-3 th:nth-child(1){width:28%}.legal-table.cols-3 th:nth-child(2){width:30%}
@media(max-width:760px){
  .legal-table table,.legal-table tbody,.legal-table tr,.legal-table td{display:block;width:auto}
  .legal-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .legal-table tr{padding:16px 0 18px;border-bottom:1px solid var(--rule)}
  .legal-table tr:first-child{border-top:1px solid var(--rule)}
  .legal-table td{border:0;padding:0}
  .legal-table td+td{margin-top:12px}
  .legal-table td+td:before{content:attr(data-label);display:block;font:400 11px/1.4 Chivo,monospace;letter-spacing:.065em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
}
@media(max-width:1080px){.legal-lead{grid-template-columns:1fr}.legal-lead-text{grid-column:1}}
/* footer link */
.footer-cookie{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.footer-cookie:hover{text-decoration:underline;text-underline-offset:5px}
/* the choice panel */
.cookie-panel{position:fixed;left:20px;bottom:20px;z-index:45;width:min(440px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:auto;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);box-shadow:0 18px 50px rgba(15,55,115,.22);padding:24px 24px 20px;
  opacity:0;transform:translateY(16px);transition:opacity 300ms ease,transform 400ms cubic-bezier(.22,1,.36,1)}
.cookie-panel.is-open{opacity:1;transform:none}
.cookie-panel[hidden]{display:none}
.cookie-panel h2{margin:0 0 10px;color:var(--blue)}
.cookie-main p{margin:0;font-size:15px;line-height:1.5}
.cookie-main a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cookie-settings{margin-top:18px;border-top:1px solid var(--rule)}
.cookie-cat:last-child{border-bottom:0}
.cookie-settings[hidden]{display:none}
.cookie-cat{padding:14px 0;border-bottom:1px solid var(--rule)}
.cookie-cat-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cookie-cat p{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.cookie-switch{appearance:none;-webkit-appearance:none;width:40px;height:22px;border-radius:11px;background:rgba(23,67,117,.25);position:relative;cursor:pointer;flex:none;transition:background 200ms}
.cookie-switch:before{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.cookie-switch:checked{background:var(--blue)}
.cookie-switch:checked:before{transform:translateX(18px)}
.cookie-switch:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cookie-panel.is-detail{width:min(540px,calc(100vw - 40px))}
.cookie-list{width:100%;border-collapse:collapse;margin:12px 0 2px;font-size:13px;line-height:1.4}
.cookie-list th{font:400 10.5px/1.4 Chivo,monospace;letter-spacing:.065em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 12px 6px 0;border-bottom:1px solid var(--rule)}
.cookie-list td{vertical-align:top;padding:8px 12px 8px 0;border-bottom:1px solid var(--rule)}
.cookie-list tr:last-child td{border-bottom:0}
.cookie-list td:first-child{font-family:Chivo,monospace;font-size:12px}
.cookie-list td span{display:block;font-family:Hanken,system-ui,sans-serif;font-size:12.5px;color:var(--muted);margin-top:2px}
.cookie-list td:last-child{white-space:nowrap;padding-right:0}
.cookie-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.cookie-panel.is-detail .cookie-actions{position:sticky;bottom:-20px;background:var(--paper);margin:6px 0 -20px;padding:12px 0 20px;border-top:1px solid var(--rule)}
.cookie-btn{flex:1 1 auto;min-width:120px;padding:12px 16px;background:transparent;color:var(--blue);border:1px solid var(--blue);font:inherit;font-size:15px;cursor:pointer;transition:background var(--short),color var(--short)}
.cookie-btn:hover,.cookie-btn:focus-visible{background:var(--blue);color:var(--paper)}
.cookie-btn[hidden],.cookie-more[hidden]{display:none}
.cookie-more{background:none;border:0;padding:8px 2px;font:inherit;font-size:14px;color:var(--blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:760px){.cookie-panel,.cookie-panel.is-detail{left:12px;right:12px;bottom:12px;width:auto;padding:20px}}
@media print{.cookie-panel{display:none!important}}
body:not(.motion-on) .cookie-panel{transition:none}

/* ===== Round 47: one card model, published work only ===== */
.portfolio.selected .project-4,.portfolio.selected .project-5,.portfolio.selected .project-6{grid-column:span 4;margin-top:0}
.portfolio.selected .project-4 .project-media,.portfolio.selected .project-5 .project-media,.portfolio.selected .project-6 .project-media{aspect-ratio:4/3}
@media(max-width:1100px) and (min-width:761px){.portfolio.selected .project-4,.portfolio.selected .project-5,.portfolio.selected .project-6{grid-column:span 4}}
/* filtered: an even grid */
.portfolio.is-filtered>.project-card{grid-column:span 4;margin-top:0;display:block}
.portfolio.is-filtered>.project-card .project-media{aspect-ratio:4/3;height:auto;flex:none}
.portfolio.is-filtered .project-3 .project-caption{padding:20px 0 0}
.portfolio.is-filtered .project-3 h3{font-size:clamp(25px,2.15vw,33px);margin:12px 0 10px}
.portfolio.is-filtered .project-3 .project-meta{flex-direction:row;gap:16px}
@media(max-width:1100px){.portfolio.is-filtered>.project-card{grid-column:span 6}}
@media(max-width:760px){.portfolio.is-filtered>.project-card{grid-column:1/-1}}
/* More work: wide cards keep their captions inside the card once they stack */
@media(max-width:1100px){.portfolio.more .more-wide .project-media{height:auto;flex:none;aspect-ratio:4/3}}
/* Services: the four disciplines, one click away */
.service-jump{margin-top:40px}
.service-jump ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.service-jump a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:clamp(19px,1.5vw,22px);color:var(--ink);transition:color var(--short)}
.service-jump a>span[aria-hidden]{margin-left:auto;color:var(--blue);transition:transform var(--short)}
.service-jump a:hover,.service-jump a:focus-visible{color:var(--blue)}
.service-jump a:hover>span[aria-hidden]{transform:translateY(3px)}
.service-jump-n{font-family:Reenie,cursive;font-size:30px;line-height:.6;color:var(--blue);min-width:34px}

/* ===== Round 48: the opening fits the screen and plays once ===== */
@media(min-width:761px){
  .cover{height:100svh;min-height:560px;max-height:980px;padding-top:clamp(108px,15svh,145px);padding-bottom:clamp(24px,4svh,36px)}
  .slogan svg{max-height:calc(100svh - clamp(108px,15svh,145px) - 190px)}
}
/* shorter sequence */
.js.motion-on .ring-trace{animation:draw-ring 1.5s cubic-bezier(.4,.05,.3,1) .45s both}
.js.motion-on .ring-rest{animation:fade-in .4s var(--ease) 1.6s both}
.js.motion-on .slogan .letters path{animation-duration:.6s}
.js.motion-on .cover-bottom{animation:fade-in 600ms var(--ease) .5s both}
.js.motion-on .page.active .discover-hand{animation:discover-write 700ms linear .9s both}
.js.motion-on .page.active .discover-arrow{animation:discover-draw 600ms cubic-bezier(.45,0,.2,1) 1.5s both}
/* once per visit */
.hero-played .slogan .letters path,.hero-played .ring-trace,.hero-played .ring-rest,.hero-played .cover-bottom,.hero-played .discover-hand,.hero-played .discover-arrow{animation:none!important}
.hero-played .ring-rest{opacity:1}
/* page change and handwritten notes */
.js.motion-on .route-enter{animation-duration:400ms}
.js.motion-on .anno .hand{--wd:700ms;transition:clip-path 700ms linear var(--wd)}
/* the motion state on the root as well */
html.motion-off{scroll-behavior:auto}
.motion-toggle[aria-pressed]:before{background:var(--sky);border:0}
.motion-toggle[aria-checked=false]:before{background:none;border:1px solid var(--sky)}

/* ===== Round 49: the case study opening ===== */
.cs-top{height:clamp(320px,56svh,640px)}
.cs-top .cs-top-img{object-position:var(--focus,50% 45%)}
.cs-top:before{height:180px;background:linear-gradient(180deg,rgba(15,55,115,.86) 0,rgba(15,55,115,.5) 45%,rgba(15,55,115,0))}
.case-hero.cs-hero .case-back{margin-bottom:32px}
@media(max-width:760px){
  .cs-top{height:clamp(300px,50svh,520px);min-height:0}
  .cs-top .cs-top-img{object-position:var(--focus-m,var(--focus,50% 45%))}
}
/* See the work / Read the story */
.cs-jump{display:flex;flex-wrap:wrap;gap:12px 32px;margin:28px 0 0;font-size:16px}
.cs-jump a{display:inline-flex;align-items:center;gap:10px;color:var(--paper);padding:6px 0;border-bottom:1px solid rgba(164,206,234,.5);transition:border-color var(--short),color var(--short)}
.cs-jump a:hover,.cs-jump a:focus-visible{color:var(--sky);border-color:var(--sky)}
.cs-jump .ha{width:16px;height:16px;transition:transform var(--short)}
.cs-jump a:hover .ha{transform:translateY(3px)}
/* chapter jumps: the page's scroll padding only */
.cs-chapter{scroll-margin-top:0}
/* contents on phones and tablets */
.cs-toc{display:none}
@media(max-width:1080px){
  .cs-toc{display:block;margin:32px var(--pad) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .cs-toc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:400 12px Chivo,monospace;letter-spacing:.065em;text-transform:uppercase;color:var(--blue)}
  .cs-toc summary::-webkit-details-marker{display:none}
  .cs-toc summary:after{content:'+';font:300 24px/1 Hanken,Arial,sans-serif;color:var(--blue);transition:transform var(--short)}
  .cs-toc[open] summary:after{transform:rotate(45deg)}
  .cs-toc ol{list-style:none;margin:0;padding:0 0 12px}
  .cs-toc a{display:flex;gap:14px;align-items:baseline;padding:11px 0;border-top:1px solid var(--rule);font-size:17px;color:var(--ink)}
  .cs-toc .rail-n{color:var(--blue);font:400 12px Chivo,monospace}
}

/* ===== Round 50: defects and small screens ===== */
body{overflow-x:clip}
.nw{white-space:nowrap}
.nav-contact .menu-t .nw{font-size:inherit;display:inline;gap:0}
.page-hero h1,.case-hero h1,.cs-hero h1{text-wrap:balance}
.reach-go{font-family:Hanken,Arial,sans-serif}
/* team: two columns from 360px, one below */
@media(max-width:359px){.team-grid,.orbit-team .team-grid{grid-template-columns:1fr}}
/* service rows at the narrowest widths */
@media(max-width:380px){
  .service-row{grid-template-columns:34px 1fr 20px;gap:12px}
  .service-row h3{font-size:25px}
  .service-row .row-n{font-size:44px}
}
/* the closer look on phones: a visible track and a keyboard stop */
@media(max-width:760px){
  .steps{scrollbar-width:thin;scrollbar-color:var(--blue) var(--rule);padding-bottom:14px}
  .steps::-webkit-scrollbar{display:block;height:3px}
  .steps::-webkit-scrollbar-track{background:var(--rule)}
  .steps::-webkit-scrollbar-thumb{background:var(--blue)}
  .steps:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
}
/* footer targets and small labels */
.footer-top nav a,.footer-legal a,.footer-cookie,.footer-social a{display:inline-block;padding:3px 0;min-height:24px}
@media(max-width:760px){.meta,.cs-ph-tag,.footer-bottom,.footer-bottom .motion-toggle{font-size:12px}}
/* contact: a shorter header */
[data-page=contact] .page-hero{min-height:clamp(340px,40svh,460px)}
@media(max-width:760px){[data-page=contact] .page-hero{min-height:0;padding-top:140px;padding-bottom:48px}}
/* human by design: copy from the top of the photo */
.human-grid{align-items:start}

/* round 52: picture placeholders inside The work and the cover */
.wk-ph{display:flex}
.wk-ph .cs-ph{flex:1;width:100%;height:auto;aspect-ratio:auto;box-sizing:border-box}
.wk .wk-img.wk-ph{aspect-ratio:16/9;height:auto}
.wk-two .wk-img.wk-ph{aspect-ratio:auto;height:clamp(380px,46vw,760px)}
@media(max-width:760px){.wk-two .wk-img.wk-ph{height:auto;aspect-ratio:4/5}}
.cs-top-ph .cs-ph{position:absolute;inset:0;aspect-ratio:auto;border:0;background:var(--cover);color:#fff;padding-top:120px}
.cs-top-ph .cs-ph:after{content:'';position:absolute;inset:110px var(--pad) 32px;border:1px dashed rgba(255,255,255,.3);pointer-events:none}
.cs-top-ph .cs-ph-tag{color:rgba(255,255,255,.75)}

/* ===== Round 54: seven selected projects, two rows of two under IPPF ===== */
.portfolio.selected .project-4,.portfolio.selected .project-5,.portfolio.selected .project-6,.portfolio.selected .project-7{grid-column:span 6;margin-top:0;display:block}
.portfolio.selected .project-4 .project-media,.portfolio.selected .project-5 .project-media,.portfolio.selected .project-6 .project-media,.portfolio.selected .project-7 .project-media{aspect-ratio:4/3}
@media(max-width:760px){.portfolio.selected .project-4,.portfolio.selected .project-5,.portfolio.selected .project-6,.portfolio.selected .project-7{grid-column:1/-1}}

/* ===== Round 55: video in a work figure ===== */
.wk-video video{display:block;width:100%;height:100%;object-fit:cover;background:#fff}

/* ===== Round 56: video cover on a project card ===== */
video.project-image{display:block;width:100%;height:100%;object-fit:cover;background:#274880}

/* ===== Round 58: eight selected projects — two Drynet cases in halves, then three in thirds ===== */
.portfolio.selected .project-4,.portfolio.selected .project-5{grid-column:span 6;margin-top:0;display:block}
.portfolio.selected .project-6,.portfolio.selected .project-7,.portfolio.selected .project-8{grid-column:span 4;margin-top:0;display:block}
.portfolio.selected .project-4 .project-media,.portfolio.selected .project-5 .project-media,.portfolio.selected .project-6 .project-media,.portfolio.selected .project-7 .project-media,.portfolio.selected .project-8 .project-media{aspect-ratio:4/3}
@media(max-width:1100px) and (min-width:761px){.portfolio.selected .project-6,.portfolio.selected .project-7,.portfolio.selected .project-8{grid-column:span 6}.portfolio.selected .project-8{grid-column:1/-1}}
@media(max-width:760px){.portfolio.selected .project-4,.portfolio.selected .project-5,.portfolio.selected .project-6,.portfolio.selected .project-7,.portfolio.selected .project-8{grid-column:1/-1}}

/* ===== Round 60: chapter subheads first in a chapter, source footnotes ===== */
.cs-text>h3:first-child{margin-top:0}
.cs-fn{font-size:.62em;line-height:0;margin-left:.08em}
.cs-fn a{color:var(--blue);text-decoration:none;padding:0 .12em}
.cs-fn a:hover,.cs-fn a:focus-visible{text-decoration:underline}

/* ===== Round 62: pairs at their own proportions (no cropping) ===== */
.wk-fit{grid-template-columns:var(--cols)}
.wk-fit .wk-img{height:auto}
@media(max-width:760px){.wk-fit{grid-template-columns:1fr}}

/* r64: wide More work cards follow the row height */
@media(min-width:1081px){.portfolio.more .more-wide .project-media .project-image{position:absolute;inset:0;width:100%;height:100%}}
@media(min-width:761px) and (max-width:1080px){.portfolio.more .project-card.more-wide[href="#map"]{grid-column:1/-1}.portfolio.more .project-card.more-wide[href="#map"] .project-media{aspect-ratio:16/9}}

/* r67: visit the website */
.cs-visit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:32px 0 0;font-size:16px}
.cs-visit-btn{display:inline-flex;align-items:center;gap:14px;background:var(--paper);color:var(--ink);padding:14px 20px;font-size:17px;transition:background var(--short),color var(--short)}
.cs-visit-btn:hover,.cs-visit-btn:focus-visible{background:var(--sky);color:var(--ink)}
.cs-visit-btn .ha{width:18px;height:18px;transition:transform var(--short)}
.cs-visit-btn:hover .ha{transform:translate(2px,-2px)}
.cs-visit-url{color:var(--sky);font-size:15px}
.cs-visit-quiet a{display:inline-flex;align-items:center;gap:10px;color:var(--paper);padding:6px 0;border-bottom:1px solid rgba(164,206,234,.5);transition:border-color var(--short),color var(--short)}
.cs-visit-quiet a:hover,.cs-visit-quiet a:focus-visible{color:var(--sky);border-color:var(--sky)}
.cs-visit-quiet .ha{width:16px;height:16px}
.cs-visit+.cs-jump{margin-top:20px}

/* r68: under the hood + client quote (short form) */
.cs-proof{padding:var(--section) var(--pad);border-top:1px solid var(--rule)}
.cs-proof-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gutter) clamp(40px,6vw,96px);align-items:start}
.cs-proof dl{margin:0;display:grid;gap:0}
.cs-proof dl>div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--rule)}
.cs-proof dt{font:400 12px Chivo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.cs-proof dd{margin:0;font-size:17px;color:var(--ink)}
.cs-proof-quote{margin:0}
.cs-proof-quote p{font-size:clamp(24px,2.3vw,34px);line-height:1.3;letter-spacing:-.02em;color:var(--ink);max-width:30ch}
.cs-proof-quote footer{margin-top:24px;font:400 12px Chivo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.cs-made-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.cs-proof-in{grid-template-columns:1fr}.cs-proof dl>div{grid-template-columns:96px 1fr}}
@media(min-width:761px) and (max-width:1080px){.portfolio.more .project-card[href="#concord-web"]{grid-column:1/-1}.portfolio.more .project-card[href="#concord-web"] .project-media{aspect-ratio:16/9}}

/* r69: a full-width card in More work */
.portfolio.more .project-card.more-full{grid-column:1/-1}
.portfolio.more .more-full .project-media{aspect-ratio:21/9}
@media(max-width:760px){.portfolio.more .more-full .project-media{aspect-ratio:4/3}}

/* ===== Round 71: error pages ===== */
.err{position:relative;min-height:max(660px,100svh);padding:clamp(124px,17svh,170px) var(--pad) clamp(40px,6svh,64px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:1fr auto;column-gap:var(--gutter);row-gap:clamp(24px,4svh,48px);color:var(--paper);overflow:hidden;
  background-color:var(--cover);background-image:var(--grain-blue),var(--mottle),radial-gradient(48% 58% at 50% 42%,#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}
.err-copy{align-self:center;max-width:36rem;position:relative;z-index:2}
.err .hand-eyebrow{color:var(--sky)}
.err h1{font-size:clamp(44px,5.4vw,84px);line-height:1.02;letter-spacing:-.045em;margin:0 0 24px;color:var(--paper);text-wrap:balance;font-weight:450}
.err-lead{font-size:clamp(18px,1.45vw,22px);line-height:1.45;color:var(--sky);max-width:30em;margin:0}
.err-lead a{color:var(--paper);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap}
.err-num{align-self:center;justify-self:center;display:flex;align-items:center;gap:.02em;color:var(--sky);font:750 clamp(150px,min(19vw,30svh),290px)/.78 Hanken,Arial,sans-serif;letter-spacing:-.05em;user-select:none}
.err-num .d{display:block}
.err-ring{display:block;height:1.08em;width:auto;margin:0 .01em;overflow:visible}
.err-scene{grid-column:1/-1;position:relative;height:clamp(200px,min(22vw,32svh),300px);border-bottom:1px solid rgba(164,206,234,.5)}
.err-ground{position:absolute;inset:0;pointer-events:none}
.err-lm{position:absolute;bottom:0;height:clamp(70px,8vw,112px);width:auto;overflow:visible;fill:none;stroke:var(--sky);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;opacity:.26}
.err-lm .lm-dot{fill:var(--sky);stroke:none}
.err-lm.lm-amsterdam{left:1%}.err-lm.lm-brussels{right:1%}.err-lm.lm-bucharest{left:calc(34% + clamp(70px,7vw,110px));height:clamp(90px,10vw,130px);opacity:.3}
.err-scene[data-mode=sit]{height:clamp(160px,min(16vw,24svh),220px)}
.err-sign{position:absolute;left:var(--sign-x,46%);bottom:0;height:94%;width:0;z-index:2}
.err-post{position:absolute;left:-5px;bottom:0;width:10px;max-width:none;height:100%;overflow:visible;fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.err-post path{vector-effect:non-scaling-stroke}
.sign{position:absolute;top:calc(2% + var(--row) * clamp(40px,6.2svh,60px));display:inline-flex;align-items:center;white-space:nowrap;padding:.66em 2.2em .66em 1.7em;font-size:clamp(16px,1.3vw,19px);line-height:1;color:var(--paper);text-decoration:none;transform:rotate(var(--tilt));isolation:isolate;transition:transform 520ms var(--ease),color var(--short)}
.sign-r{left:-12px;transform-origin:12px 50%}
.sign-l{right:-12px;padding:.66em 1.7em .66em 2.2em;transform-origin:calc(100% - 12px) 50%}
.sign-board{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.sign-board path{vector-effect:non-scaling-stroke;stroke:var(--paper);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.sign-fill{fill:var(--cover);transition:fill var(--short)}
.sign-nail{fill:none;opacity:.8}
.sign:hover,.sign:focus-visible{color:var(--cover);transform:rotate(calc(var(--tilt) * -1.4))}
.sign:hover .sign-fill,.sign:focus-visible .sign-fill{fill:var(--sky)}
.sign:focus-visible{outline:2px solid var(--sky);outline-offset:6px}
.err-note{position:absolute;bottom:calc(var(--ww,130px) * .9 + 14px);left:0;font:400 clamp(26px,2.3vw,34px)/1 Reenie,"Reenie Beanie",cursive;color:var(--sky);white-space:nowrap;transform:rotate(-4deg);transform-origin:left bottom;clip-path:inset(-20% 102% -20% -2%);transition:clip-path 900ms linear .2s;z-index:1}
.err-note.on{clip-path:inset(-20% -2% -20% -2%)}
.err-walker{position:absolute;left:0;bottom:-1px;width:clamp(90px,min(10.5vw,14svh),150px);aspect-ratio:76/70;color:var(--paper);z-index:3;will-change:transform}
.err-walker .walker-art{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.err-walker .walker-art path{vector-effect:non-scaling-stroke;stroke-width:2.5}
.err-walker .walker-art .w-head{stroke-width:2.7}
.err-walker .walker-art .w-steam{stroke-width:1.8;opacity:.8}
.err-walker .walker-art .w-route{stroke-width:1.4;stroke-dasharray:2.5 3}
.err-walker .wf[hidden]{display:none}
.err-walker .w-far{opacity:.55}
.err-walker .w-case{fill:var(--cover)}
.err-walker.left .walker-art{transform:scaleX(-1)}
.err-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}
.err-btn{font:inherit;font-size:18px;padding:16px 26px;background:var(--sky);color:var(--cover);border:1px solid var(--sky);cursor:pointer;transition:background var(--short),color var(--short)}
.err-btn:hover,.err-btn:focus-visible{background:transparent;color:var(--sky)}
.err-btn:focus-visible,.err-link:focus-visible{outline:2px solid var(--sky);outline-offset:4px}
.err-link{color:var(--paper);font-size:18px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@property --sweep{syntax:'<angle>';inherits:false;initial-value:360deg}
.err-ring{-webkit-mask:conic-gradient(from 200deg,#000 var(--sweep),transparent 0);mask:conic-gradient(from 200deg,#000 var(--sweep),transparent 0)}
@keyframes err-ring{from{--sweep:0deg}to{--sweep:360deg}}
@keyframes err-rise{from{opacity:0;transform:translateY(.12em)}to{opacity:1;transform:none}}
.motion-on .page.active .err-num .d,.motion-on .err-static .err-num .d{animation:err-rise .7s var(--ease) calc(.15s + var(--i) * .12s) both}
.motion-on .page.active .err-ring,.motion-on .err-static .err-ring{animation:err-ring 1.2s cubic-bezier(.45,.05,.3,1) calc(.3s + var(--i) * .25s) both}
.motion-off .err-note{clip-path:none;transition:none}
@media(max-width:1000px){.err{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}.err-num{order:-1;justify-self:start;font-size:clamp(110px,22vw,190px);margin-bottom:8px}.err-copy{align-self:start}}
@media(max-width:760px){
  .err{padding-top:118px;row-gap:28px;min-height:max(640px,100svh)}
  .err h1{font-size:44px}
  .err-scene{--sign-x:58%;height:230px}
  .err-scene[data-mode=sit]{height:170px}
  .err-lm.lm-amsterdam,.err-lm.lm-brussels{display:none}
  .err-lm.lm-bucharest{left:auto;right:4%;height:84px}
  .sign{font-size:15px;top:calc(2% + var(--row) * 44px)}
  .err-walker{width:96px}
  .err-note{font-size:24px}
  .err-scene.narrow[data-mode=lost] .err-note{bottom:16px;white-space:normal;width:5em;font-size:22px;line-height:.95;transform:rotate(-4deg)}
}
@media(max-width:380px){.err-scene{--sign-x:56%}.sign{font-size:14px}}
@media print{.err-scene{display:none}}

/* the walker has left the footer to look for the page */
body:has(.page.active.err-page) .footer-walk{display:none}
body:has(.page.active.err-page) .footer-walk + .footer-bottom{padding-top:28px}


/* r75: before/after slider (IPPF work 03) */
.wk-compare .cmp{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--cool);touch-action:pan-y;user-select:none}
.wk-compare .cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.wk-compare .cmp-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.wk-compare .cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 0 1px rgba(0,0,0,.12);pointer-events:none}
.wk-compare .cmp-knob{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:2px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.wk-compare .cmp-knob .ha{width:16px;height:16px}
.wk-compare .cmp-tag{position:absolute;top:14px;font:400 12px/1 Chivo,monospace;letter-spacing:.06em;padding:7px 10px;background:rgba(246,244,241,.92);color:var(--ink);pointer-events:none}
.wk-compare .cmp-tag-a{left:14px}.wk-compare .cmp-tag-b{right:14px}
.wk-compare .cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.wk-compare .cmp:has(.cmp-range:focus-visible) .cmp-knob{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:760px){.wk-compare .cmp-knob{width:44px;height:44px;margin:-22px 0 0 -22px}}

/* r78: inline icon set (Cool Heating Coalition) */
.chc-icons{aspect-ratio:16/9;background:#faf9fc;display:flex;align-items:center;justify-content:center}
.chc-icons ul{list-style:none;margin:0;padding:4% 5%;display:grid;grid-template-columns:repeat(5,1fr);gap:8% 4%;width:100%}
.chc-icons li{display:flex;flex-direction:column;align-items:center;gap:.8em;text-align:center}
.chc-icons svg{width:62%;height:auto;max-height:9vw;overflow:visible}
.chc-icons span{font-family:Chivo,monospace;font-size:clamp(9px,.9vw,13px);color:#2c407d;line-height:1.3}
@media(max-width:760px){.chc-icons{aspect-ratio:auto}.chc-icons ul{grid-template-columns:repeat(3,1fr);gap:1.6em 1em;padding:1.6em 1em}.chc-icons svg{max-height:none;width:56%}}

/* r78: hero parallax — the hero sits under the page, which rises over it */
.page>.cover,.page>.cs-top{position:relative;z-index:0;will-change:transform}.page>.cover~*,.page>.cs-top~*{position:relative;z-index:1}

/* round 80: one featured card at the top of More work, at the covers' own 16:9 */
.portfolio.more .more-full .project-media{aspect-ratio:16/9}
@media(max-width:760px){.portfolio.more .more-full .project-media{aspect-ratio:16/9}}
/* round 81: More work after the featured card alternates rows of two and three (wide screens only) */
@media(min-width:1081px){.portfolio.more:not(.is-filtered)>.project-card:not(.more-full):nth-child(5n+2),.portfolio.more:not(.is-filtered)>.project-card:not(.more-full):nth-child(5n+3){grid-column:span 6}.portfolio.more:not(.is-filtered)>.project-card:not(.more-full):nth-child(5n+2) .project-media,.portfolio.more:not(.is-filtered)>.project-card:not(.more-full):nth-child(5n+3) .project-media{aspect-ratio:3/2}}

/* ===== Round 80: the contact form — examples by hand, pen line, ticks, the courier ===== */
.form{gap:38px 28px}
.field{gap:4px}
.field label{font-size:clamp(18px,1.4vw,20px);line-height:1.3;color:var(--ink)}
.field-box{position:relative}
.field input,.field textarea{font-size:21px;line-height:1.3;padding:12px 40px 11px 0;border-bottom:1px solid var(--blue);transition:background var(--short)}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-bottom:1px solid var(--blue);background:rgba(164,206,234,.14)}
.field-box :is(input,textarea)::placeholder{color:transparent}
/* the example answer, pencilled in */
.eg{position:absolute;left:1px;bottom:9px;max-width:calc(100% - 44px);overflow:hidden;font:400 32px/1 Reenie,"Reenie Beanie",cursive;letter-spacing:.01em;color:rgba(23,67,117,.8);white-space:nowrap;transform:rotate(-1.4deg);transform-origin:left bottom;pointer-events:none;transition:opacity var(--short)}
.field-box :is(input,textarea):not(:placeholder-shown) ~ .eg{opacity:0;transition:none}
.field-box:focus-within .eg{opacity:.6}
.js.motion-on .form .eg{clip-path:inset(-30% 104% -30% -2%)}
.js.motion-on .form.eg-on .eg{clip-path:inset(-30% -4% -30% -2%);transition:clip-path 700ms linear calc(260ms + var(--i,0) * 170ms),opacity var(--short)}
/* focus: a pen stroke along the line */
.field-pen{position:absolute;left:-2px;bottom:-6px;width:calc(100% + 4px);height:13px;fill:var(--blue);pointer-events:none;clip-path:inset(0 100% 0 0)}
.field-box:focus-within .field-pen{clip-path:inset(0 0 0 0);transition:clip-path 520ms cubic-bezier(.3,.6,.3,1)}
.motion-off .field-box:focus-within .field-pen{transition:none}
.form [aria-invalid=true] ~ .field-pen{fill:#a8431c}
/* a tick for an answer */
.field-tick{position:absolute;right:4px;bottom:14px;width:24px;height:24px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34;pointer-events:none;opacity:0}
.field.ok .field-tick{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 380ms cubic-bezier(.3,.6,.3,1) 80ms}
.motion-off .field.ok .field-tick{transition:none}
.form [aria-invalid=true] ~ .field-tick{opacity:0}
/* the message: ruled like note paper */
.field textarea{--lh:40px;display:block;line-height:var(--lh);padding:0 40px 0 0;height:calc(var(--lh) * 5 - 1px);min-height:calc(var(--lh) * 3 - 1px);background-image:linear-gradient(transparent calc(var(--lh) - 1px),rgba(23,67,117,.2) calc(var(--lh) - 1px));background-size:100% var(--lh);background-attachment:local}
.field textarea:focus-visible{background-color:rgba(164,206,234,.14)}
.field-box textarea ~ .eg{top:5px;bottom:auto;transform-origin:left top}
.field-box textarea ~ .field-tick{bottom:auto;top:8px}
.field .helper{margin-top:8px}
.field-box:has(textarea){margin-top:6px}
/* consent: a box drawn by hand */
.form .check{position:relative;gap:14px;align-items:flex-start}
.form .check input{position:absolute;left:0;top:0;width:26px;height:26px;margin:0;opacity:0;cursor:pointer}
.check-box{flex:none;width:26px;height:26px;color:var(--blue);margin-top:-2px}
.check-box svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.check-box .cb-tick{stroke-width:2.2;stroke-dasharray:34;stroke-dashoffset:34}
.form .check input:checked + .check-box .cb-tick{stroke-dashoffset:0;transition:stroke-dashoffset 320ms cubic-bezier(.3,.6,.3,1)}
.motion-off .form .check input:checked + .check-box .cb-tick{transition:none}
.form .check input:focus-visible + .check-box{outline:2px solid var(--blue);outline-offset:3px}
.form.tried .check input:invalid + .check-box{color:#a8431c}
.form.tried .check input:invalid ~ .check-text{color:#b4552e}
.consent .field-error{margin-left:40px}
/* send: the button, the envelope, the courier on his line */
.send-row{grid-column:1/-1;position:relative;display:flex;align-items:flex-end;gap:16px;margin-top:6px}
.send-row .submit{flex:none;gap:22px;padding:15px 20px}
.submit-label{display:inline-block;text-align:left}
.submit-label:before{content:'Send message';display:block;height:0;overflow:hidden;visibility:hidden}
.env{display:block;width:26px;height:26px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.submit .env{transition:transform var(--short) var(--ease)}
.submit:hover .env,.submit:focus-visible .env{transform:translateY(-3px) rotate(-8deg)}
.courier-env{position:absolute;left:0;top:0;z-index:4;color:var(--blue);transform-origin:50% 50%;pointer-events:none;will-change:transform}
.courier-env .env-body{fill:#f6f3ee}
.courier-env[hidden]{display:none}
.courier{position:relative;flex:1;min-width:0;height:112px;border-bottom:1px solid rgba(23,67,117,.42);overflow-x:clip}
.courier-walker{--cw:104px;position:absolute;left:0;bottom:-1px;width:var(--cw);aspect-ratio:76/70;color:var(--blue);z-index:2;will-change:transform}
.courier-walker .walker-art{transition:none}
.courier-walker .walker-art path{vector-effect:non-scaling-stroke;stroke-width:2.1}
.courier-walker .walker-art .w-head{stroke-width:2.3}
.courier-walker .w-case{fill:#f6f3ee}
.courier-walker.left .walker-art{transform:scaleX(-1)}
.courier-note{position:absolute;left:128px;bottom:34px;font-size:30px;color:rgba(23,67,117,.9);transform:rotate(-3deg);transform-origin:left bottom;clip-path:inset(-30% 104% -30% -2%);z-index:1}
.courier-note.on{clip-path:inset(-30% -4% -30% -2%);transition:clip-path 620ms linear 120ms}
.motion-off .courier-note{clip-path:none;transition:none}
.send-row.sending .courier-note{left:14px}
/* the sent state: delivered by hand, in front of the Athenaeum */
.sent-scene{position:relative;align-self:stretch;height:132px;margin-top:10px;border-bottom:1px solid rgba(23,67,117,.42);overflow-x:clip}
.sent-lm{position:absolute;right:7%;bottom:0;height:118px;width:auto;overflow:visible;fill:none;stroke:var(--blue);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;opacity:.4}
.sent-lm .lm-dot{fill:var(--blue);stroke:none}
.sent-scene .courier-note{left:auto;right:calc(7% + 121px + 104px + 22px);bottom:44px;transform-origin:right bottom}
/* a narrow form column (tablets, phones): he waits on a line above the button */
.form,.form-sent{container-type:inline-size}
@container (max-width:600px){
  .send-row{flex-direction:column-reverse;align-items:stretch;gap:18px}
  .send-row .submit{align-self:flex-start}
  .courier{flex:none;height:100px}
  .sent-scene{margin-top:24px}
  .sent-scene .courier-note{left:4px;right:auto;bottom:auto;top:0;transform-origin:left bottom}
}
@media(max-width:760px){
  .form{gap:32px}
  .eg{font-size:30px}
  .courier{height:92px}
  .courier-walker{--cw:88px}
  .courier-note{left:106px;bottom:30px;font-size:28px}
  .sent-scene{height:138px}
  .sent-lm{right:3%;height:92px}
}
@media print{.courier,.sent-scene,.courier-env{display:none}}
/* he is up at the form: the footer keeps its line and cities, without the walker */
body:has(.page.active[data-page=contact]) .footer-walk .walker{display:none}

/* ===== Round 82: home cover parallax, the slogan travels (words ahead of the page, ring just behind) ===== */
.cover .supplied-ring,.cover-bottom{will-change:transform}
.motion-off .supplied-ring,.motion-off .cover-bottom,body:not(.motion-on) .supplied-ring,body:not(.motion-on) .cover-bottom{transform:none!important}
@media(max-width:760px){.supplied-ring,.cover-bottom{transform:none!important}}