/* Preserve existing header geometry; only raise it above the menu. */
#aa header,#portfolio header{z-index:60}.aa-nav-open header{color:#fff!important}.aa-nav-open .overlay-close,.aa-nav-open .close-nav{display:none}.menu-button span,.burger span{transition:transform .35s ease,opacity .2s ease;transform-origin:center}.aa-nav-open .menu-button span:nth-child(1),.aa-nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}.aa-nav-open .menu-button span:nth-child(2),.aa-nav-open .burger span:nth-child(2){opacity:0}.aa-nav-open .menu-button span:nth-child(3),.aa-nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}header .mark{display:inline-block;transform-origin:center;transform-style:preserve-3d}.aa-nav-open #menu,.aa-nav-open #navigation{padding-top:100px;padding-bottom:40px}.aa-work-zoom{position:fixed;z-index:1000;overflow:hidden;pointer-events:none;background:#000}.aa-work-zoom img,.aa-work-zoom video{width:100%;height:100%;object-fit:cover;display:block}@media(prefers-reduced-motion:reduce){.menu-button span,.burger span{transition:none}}



/* Same physical 4:5 box for every source; perspective alone shapes the neighbours. */
#work .wheel-stage{perspective:1500px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 76%,transparent 100%)}
#work .wheel-band{backface-visibility:visible}
#work .wheel-frame{width:min(57.6cqw,30.8svh);height:min(72cqw,38.5svh);min-width:0;min-height:0;aspect-ratio:4/5;margin:12px auto;flex:none;isolation:isolate;background:#fff}
#work .wheel-frame:after{content:none}
#work .wheel-frame img,#work .wheel-frame video{width:100%;height:100%;max-width:none;object-fit:cover;background:transparent}
#work .wheel-frame video{transition:opacity .18s linear}
#work .wheel-footer button{color:#000}

#work .wheel-frame.wheel-more{background:#fe0000;color:#000;display:grid;place-items:center;padding:18px;text-align:center}#work .wheel-more>span{font:600 12cqw/.85 Degular,sans-serif;letter-spacing:-.04em}#work .wheel-more>span{max-width:100%;overflow-wrap:normal}

/* Same centered label geometry and type as the Work header. */
header .home-page-heading{position:absolute;left:19.76744%;right:19.76744%;top:0;height:44px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:2.8cqw;font-weight:400;letter-spacing:.08em;line-height:1.1;pointer-events:none;color:inherit}#work .work-label,#clients .clients-label,#people .people-note{visibility:hidden}#aa #pages{overflow-y:hidden;scroll-snap-type:none;scroll-behavior:auto;overscroll-behavior:none;touch-action:pan-x pinch-zoom}

/* Text safe area mirrors the existing header: 7% sides and 20px minimum vertically. */
#aa .motion-control,#portfolio .agency{right:7%;bottom:max(20px,env(safe-area-inset-bottom));margin:0;padding:0;border:0;min-height:0;line-height:1.15}#clients .clients-foot{left:7%;right:7%;bottom:max(20px,env(safe-area-inset-bottom));margin:0;line-height:1.15}#aa .contact-mail{left:7%;bottom:max(20px,env(safe-area-inset-bottom))}#aa .contact-city{right:7%;bottom:max(20px,env(safe-area-inset-bottom))}#aa .vertical-label{left:7%;bottom:max(20px,env(safe-area-inset-bottom))}#aa .immersive-caption{left:7%}#people .person{pointer-events:none;will-change:transform}#people .person.team-front{z-index:5}#people .people-copy{z-index:6}

/* V35: raise lower labels, preserving the carousel layout. */
#aa .motion-control,#portfolio .agency{right:9%;bottom:max(40px,calc(env(safe-area-inset-bottom) + 20px))}
#aa[data-footer-screen="work"] .motion-control{right:7%;bottom:max(20px,env(safe-area-inset-bottom))}
#clients .clients-foot,#aa .vertical-label,#aa .contact-mail,#aa .contact-city{bottom:max(40px,calc(env(safe-area-inset-bottom) + 20px))}
#aa[data-footer-screen="experience"] .motion-control{visibility:hidden!important}
#aa #experience .immersive-caption{bottom:5%}
#aa #experience .film-open{bottom:3.5%}

/* V36: regular body copy, depth on manifesto rows and a small media bleed. */
#aa .vision-copy,#aa #people .people-copy{font-family:Degular,Arial,sans-serif;font-size:3.45cqw;font-weight:400;font-synthesis:none;line-height:1.18;letter-spacing:0;-webkit-font-smoothing:auto}
#manifesto .manifesto-text{perspective:750px;transform-style:preserve-3d}#manifesto .manifesto-text .row{transform-style:preserve-3d;will-change:transform;transform-origin:50% 50%}
#aa .contact-note{left:auto;right:12%;top:39%;text-align:left}
#work .wheel-frame video,.work-tile video,.hero-media{transform:scale(1.035);transform-origin:center}#work .wheel-frame img,.work-tile img{transform:scale(1.015);transform-origin:center}
@media(prefers-reduced-motion:reduce){#manifesto .manifesto-text .row{will-change:auto}}

/* V38: the word cover owns the transition; no second browser crossfade. */
@view-transition{navigation:none}
/* V41 — phone: team portraits half again as large. */
@media(max-width:759px){
#people .team-behrad{width:27%}
#people .team-anais{width:28.5%}
#people .team-tommy{width:33%}
#people .team-greg{width:27%}
#people .team-charles{width:28.5%}
}
/* V42 — blur lens following the mouse over text (lens.js). */
.aa-lens{position:fixed;left:0;top:0;width:160px;height:160px;border-radius:50%;pointer-events:none;z-index:2147483000;opacity:0;transform-origin:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:radial-gradient(closest-side,#000 45%,rgba(0,0,0,.55) 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,rgba(0,0,0,.55) 72%,transparent 100%);will-change:transform,opacity}
@media(hover:none),(pointer:coarse){.aa-lens{display:none}}
/* V44 — say hello: central CONTACT US pill and the message bubble. */
#contact .contact-cta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;margin:0;padding:.42em 1.5em .38em;border:2px solid #000;border-radius:999px;background:var(--red,#fe0000);color:#000;font:600 5.2cqw/1 Degular,Arial,sans-serif;letter-spacing:.02em;white-space:nowrap;transition:background .35s ease,color .35s ease,transform .5s cubic-bezier(.22,.7,.15,1)}
#contact .contact-cta:hover,#contact .contact-cta:focus-visible{background:#000;color:var(--red,#fe0000);transform:translate(-50%,-50%) scale(1.04)}
.contact-layer{position:absolute;inset:0;z-index:70;display:grid;place-items:center;padding:20px}
.contact-layer[hidden]{display:none}
.contact-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.contact-bubble{position:relative;width:min(100%,560px);background:#000;color:#fff;border-radius:28px;padding:30px 28px 26px;box-shadow:0 30px 80px rgba(0,0,0,.35);transform-origin:center}
.contact-close{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;background:none;color:var(--red,#fe0000);font-size:34px;line-height:1;padding:0}
.contact-bubble-title{margin:0 0 22px;font:600 clamp(40px,11cqw,64px)/.85 Degular,Arial,sans-serif;letter-spacing:-.045em;color:var(--red,#fe0000)}
.contact-bubble-title i{font-family:Instrument,Georgia,serif;font-weight:400;letter-spacing:-.02em;color:#fff}
.contact-form{display:flex;flex-direction:column;gap:18px}
.contact-field{display:flex;flex-direction:column;gap:8px}
.contact-field span{font-size:11px;letter-spacing:.16em;color:#fff9}
.contact-field input,.contact-field textarea{width:100%;border:0;border-bottom:1px solid #fff5;background:transparent;color:#fff;font:400 18px/1.35 Degular,Arial,sans-serif;padding:8px 0;border-radius:0;outline:none;resize:vertical;transition:border-color .3s}
.contact-field textarea{min-height:120px}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:#fff4}
.contact-field input:focus,.contact-field textarea:focus{border-bottom-color:var(--red,#fe0000)}
.contact-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.contact-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.contact-status{margin:0;font-size:13px;line-height:1.3;color:#fffb;min-height:1.3em}
.contact-layer.is-error .contact-status{color:var(--red,#fe0000)}
.contact-layer.is-sent .contact-status{color:#fff}
.contact-send{flex:none;border:2px solid var(--red,#fe0000);border-radius:999px;background:var(--red,#fe0000);color:#000;font:600 16px/1 Degular,Arial,sans-serif;letter-spacing:.06em;padding:13px 26px;transition:background .3s,color .3s}
.contact-send:hover,.contact-send:focus-visible{background:transparent;color:var(--red,#fe0000)}
.contact-send:disabled{opacity:.5}
.contact-send span{display:inline-block;transition:transform .4s cubic-bezier(.22,.7,.15,1)}
.contact-send:hover span{transform:translateX(5px)}
@media(min-width:760px){#contact .contact-cta{font-size:clamp(20px,1.8cqw,38px);border-width:3px}.contact-bubble{padding:40px 40px 34px}.contact-bubble-title{font-size:clamp(56px,4.6cqw,84px)}}
@media(prefers-reduced-motion:reduce){#contact .contact-cta,.contact-send,.contact-send span{transition:none}}
/* V46 — Strategy bubble: intro, chips, booking calendar. */
.contact-bubble.is-strategy .contact-bubble-title{font-size:clamp(36px,10cqw,58px)}
.contact-intro{margin:-8px 0 14px;font-size:15px;line-height:1.35;color:#fffc}
.contact-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0}
.contact-chips li{border:1px solid #fff4;border-radius:999px;padding:6px 12px;font-size:12px;letter-spacing:.06em}
.contact-small{margin:14px 0 0;font-size:12px;line-height:1.4;color:#fff9}
.contact-small a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.contact-bubble.has-calendar{width:min(100%,820px);max-height:calc(100% - 20px);overflow:auto}
.contact-calendar{border-radius:14px;overflow:hidden;background:#fff;height:min(62dvh,620px)}
.contact-calendar iframe{width:100%;height:100%;border:0;display:block}
@media(min-width:760px){.contact-bubble.is-strategy .contact-bubble-title{font-size:clamp(48px,3.8cqw,72px)}}
/* V47 — contact: lighter button, no "ready to work" line, contact details. */
#aa .contact-note{display:none!important}
#contact .contact-cta{border-width:1px;font-weight:400;letter-spacing:.06em;padding:.5em 1.6em .46em}
.contact-links{position:absolute;left:7%;right:7%;bottom:calc(max(40px,env(safe-area-inset-bottom) + 20px) + 30px);z-index:4;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:2.9cqw;letter-spacing:.1em}
.contact-links a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.contact-links a:hover,.contact-links a:focus-visible{border-bottom-color:currentColor}
@media(min-width:760px){
 #contact .contact-cta{border-width:1.5px}
 .contact-links{left:50%;right:auto;bottom:var(--inset);transform:translateX(-50%);gap:0 32px;font-size:12px;white-space:nowrap}
}
/* V47 — phone: partner logos much smaller in their cells. */
@media(max-width:759px){#clients .client-cell img{max-width:60%;max-height:44%}}
/* V49 — text for search engines and screen readers only. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
#aa h1.hero-words{margin:0;font-size:inherit;line-height:normal;letter-spacing:normal;font-weight:600}
.work-noscript{list-style:none;padding:120px 7%;margin:0;color:#fff;font-size:18px;line-height:1.8}
/* ===== V51 — one typographic system for the whole site =====
   Titles: Degular (display). Everything small: one clean text face, three sizes only.
   P  = paragraphs · L = labels (uppercase) · B = buttons. Swap --font-text for Degular Text once supplied. */
:root{--font-text:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--p:15px;--p-lh:1.42;--l:11px;--b:14px}
@media(min-width:760px){:root{--p:clamp(15px,1.05vw,18px);--l:12px;--b:clamp(14px,.95vw,16px)}}
/* P — paragraphs */
#aa .intro-block .copy,#aa .vision-copy,#aa .vision-copy p,#aa #people .people-copy,.hw-lead,.bk-lead,.bk-note,.fq-item p,.sb-text,.contact-intro,.contact-small,.bk-done-text,.bk-privacy,#portfolio .about-copy,#portfolio .about-copy p,.work-empty,.bk-empty,.bk-loading,.contact-status,.bk-status,.sb-list li,.contact-field input,.contact-field textarea,.bk-form input,.bk-form textarea,.fq-item summary{font-family:var(--font-text)!important;font-weight:400!important;font-size:var(--p)!important;line-height:var(--p-lh)!important;letter-spacing:0!important;-webkit-font-smoothing:auto}
.fq-item summary{font-weight:500!important}
/* L — labels */
#aa header .home-page-heading,.work-heading,#clients .clients-foot,#aa .vertical-label,#aa .motion-control,#portfolio .agency,#aa .contact-city,.contact-links,#aa .immersive-caption,#aa .film-open,.aa-case-meta,#work .wheel-meta,.work-tile strong,.bk-eyebrow,.hw-eyebrow,.fq-eyebrow,.bk-chips li,.contact-chips li,.hw-num,.hw-sub,.contact-field span,.bk-form label span,.bk-tz,.bk-when,.bk-head,.work-contact p,.work-contact-bottom,#portfolio .eyebrow,#portfolio .tags,#portfolio .back-link,#portfolio .all-projects,#portfolio .related-note,#portfolio .gallery-controls,#portfolio figcaption,#portfolio .related-card strong,#portfolio .related-card small,#portfolio .hero-meta,#aa .people-note,#aa .overlay-foot,.bk-host span,.bk-day .bk-dow,.bk-day .bk-mon{font-family:var(--font-text)!important;font-size:var(--l)!important;line-height:1.3!important;letter-spacing:.12em!important;font-weight:500!important;text-transform:uppercase}
.bk-host span strong{letter-spacing:.04em}
/* B — buttons */
#contact .contact-cta,#aa .intro-cta,.vt-pills button,.sb-cta a,.bk-confirm,.contact-send,.bk-slot,.work-more,.bk-back,.bk-topic label{font-family:var(--font-text)!important;font-size:var(--b)!important;font-weight:500!important;letter-spacing:.04em!important}
#aa .contact-mail{font-family:var(--font-text)!important;font-size:var(--p)!important;letter-spacing:0!important}
@media(max-width:759px){#clients .client-cell{padding:12% 10%}}
/* ===== V52 — phones: native swipe (the phone scrolls, one page per swipe), no play buttons ===== */
@media(max-width:759px){
 #aa #pages{overflow-y:auto!important;scroll-snap-type:y mandatory!important;scroll-behavior:auto!important;overscroll-behavior-y:contain;touch-action:pan-y pinch-zoom!important;-webkit-overflow-scrolling:touch}
 #aa #pages>.screen{scroll-snap-align:start;scroll-snap-stop:always}
 #aa .screen-surface{transform:none;will-change:auto!important}
 #manifesto .manifesto-text .row{will-change:auto}
}
/* Never show the phone's big play button on decorative videos: the still image stays until playback starts. */
video:not([controls])::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video:not([controls])::-webkit-media-controls{display:none!important}
video:not([controls])::-webkit-media-controls-overlay-play-button{display:none!important}
.work-tile video{opacity:1!important}
/* V53 — a video the phone refuses to start (low-power mode) is hidden; the still image underneath shows, never a play button. */
video.aa-blocked{visibility:hidden!important}
.showreel-still{z-index:-3}
.hero-still{z-index:-4}
.work-tile img{opacity:1!important}

/* ===== V55 — phones: three full-screen case pages instead of the wheel; the next page waits behind ===== */
.aa-case-screen,.cs-more{display:none}
@media(max-width:759px){
 #aa:has(.aa-case-screen) #work{display:none!important}
 #aa .aa-case-screen{display:block}
 .aa-case-screen .cs{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 74px) 5% calc(env(safe-area-inset-bottom) + 92px);color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
 .aa-case-screen.white .cs{color:#000}.aa-case-screen.black .cs{color:#fff}.aa-case-screen.red .cs{color:#fff}
 .cs-meta{display:flex;justify-content:space-between;gap:12px;border-top:1px solid currentColor;padding:9px 0 12px;font-family:var(--font-text);font-size:var(--l);font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
 .cs-meta span:last-child{overflow:hidden;text-overflow:ellipsis}
 .cs-media{position:relative;flex:1;min-height:0;overflow:hidden;background:#0000000d}
 .cs-media img,.cs-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
 .cs-media.is-contain img,.cs-media.is-contain video{object-fit:contain}
 .cs-title{display:block;margin-top:14px;font-size:clamp(34px,11vw,52px);font-weight:600;line-height:.9;letter-spacing:-.04em;text-transform:none}
 #aa .cs-more{display:inline-flex;align-items:center;gap:10px;position:absolute;z-index:30;left:50%;bottom:calc(env(safe-area-inset-bottom) + 26px);transform:translate(-50%,14px);padding:15px 26px;border-radius:999px;background:#000;color:#fff;font-family:var(--font-text);font-size:var(--b);font-weight:500;letter-spacing:.04em;text-decoration:none;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.22,.7,.15,1)}
 #aa .cs-more span{font-size:1.15em}
 #aa.aa-cases-on .cs-more{opacity:1;transform:translate(-50%,0);pointer-events:auto}
 #aa.aa-cases-dark .cs-more{background:#fff;color:#000}
 #aa:is(.aa-contact-open) .cs-more,#aa:has(#menu:not([hidden])) .cs-more{opacity:0!important;pointer-events:none!important}
}
/* The browser itself moves each page while the finger swipes: the coming page stays in place behind the one leaving. */
@supports (animation-timeline:view()){
 @media(max-width:759px) and (prefers-reduced-motion:no-preference){
  #aa #pages>.screen{view-timeline:--aa-screen block}
  #aa #pages>.screen>.screen-surface{animation:aa-reveal linear both;animation-timeline:--aa-screen;animation-range:entry 0% entry 100%}
 }
}
@keyframes aa-reveal{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,0,0)}}
/* ===== V56 — phones: native page transitions (View Transitions). The tapped picture grows into the project's opening screen. ===== */
@media(max-width:759px) and (prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 #portfolio #project-intro{view-transition-name:aa-hero}
}
::view-transition-group(aa-hero){animation-duration:.62s;animation-timing-function:cubic-bezier(.76,0,.24,1);overflow:clip}
::view-transition-old(aa-hero),::view-transition-new(aa-hero){height:100%;width:100%;object-fit:cover}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:aa-vt-in .42s .12s ease both}
@keyframes aa-vt-out{to{opacity:0}}
@keyframes aa-vt-in{from{opacity:0}}

/* V57 — big words lead to the next page */
#aa [data-aa-next]{pointer-events:auto!important;-webkit-tap-highlight-color:transparent}
#aa [data-aa-next]:focus-visible{outline:1px solid currentColor;outline-offset:6px}
/* ===== V65 — partner logos that open a case ===== */
#clients .client-cell.is-link{position:relative;cursor:pointer;transition:background-color .35s ease}
#clients .client-cell.is-link img{transition:transform .5s cubic-bezier(.22,.7,.15,1),opacity .25s ease}
#clients .cell-ink{position:absolute;inset:0;margin:auto;background:var(--red,#fe0000);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
#clients .cell-go{position:absolute;top:8px;right:10px;font-size:13px;line-height:1;opacity:0;transform:translate(-4px,4px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,.7,.15,1);pointer-events:none}
@media(hover:hover) and (pointer:fine){
 #clients .client-cell.is-link:hover{background-color:#0000000f}
 #aa.aa-exp #clients .client-cell.is-link:hover{background-color:#ffffff12}
 #clients .client-cell.is-link:hover img{transform:scale(1.08)}
 #clients .client-cell.is-link:hover .cell-go{opacity:1;transform:none}
}
@media(max-width:759px){#clients .cell-go{display:none}}
#clients .client-cell.is-picked{background-color:#000!important}
#clients .client-cell.is-picked img{opacity:0!important}
#clients .client-cell.is-picked .cell-ink{opacity:1}
#clients .client-cell.is-picked .cell-go{opacity:0}
/* ===== V66 — case pages (computer): the opening video keeps its own 1080×1350 format, full height, against the right edge.
   Black background, white text (V67). 16:9 films stay full screen. ===== */
@media(min-width:760px){
 #portfolio .hero:not(.hero-wide){background:#000;color:#fff}
 #portfolio .hero:not(.hero-wide) .hero-media{inset:0 0 0 auto;width:auto;height:100%;max-width:62%;aspect-ratio:1080/1350;object-fit:cover;transform:none}
 #portfolio .hero:not(.hero-wide) .hero-shade{display:none}
}

/* V67 — the short sentence beside a 16:9 opening film (computer), and the CASE STUDY label. */
#portfolio .hero-tagline{display:none}
@media(min-width:760px){
 #portfolio .hero .hero-tagline{display:block;position:absolute;z-index:2;left:var(--edge,7%);top:24%;max-width:min(32ch,38%);margin:0;font-family:var(--font-text);font-size:var(--p);line-height:1.42;color:#fff}
}
/* V68 — manifesto: words come from the depth, pictures unroll to the right */
#manifesto .mf-w{display:inline-block;transform-origin:50% 60%}
#manifesto.mf-armed .mf-w{opacity:0}
#manifesto.mf-armed .mf-img{clip-path:inset(0 100% 0 0)}
/* ===== V68 — case gallery: no "The Branding" title, big pictures centred, gliding on their own ===== */
#portfolio .gallery-heading{display:none!important}
#portfolio .gallery-region{left:0!important;right:0!important;top:17%!important;bottom:9%!important}
#portfolio .gallery-track{scroll-snap-type:none!important;gap:18px!important;padding:8px calc(50% - min(38vw,23.2svh))!important;cursor:grab}
#portfolio .gallery-item{flex:0 0 min(76vw,58svh * .8)!important;scroll-snap-align:none}
#portfolio .gallery-item img,#portfolio .gallery-item video{max-height:58svh}
#portfolio .gallery-controls{margin:14px 7% 0!important}
@media(min-width:760px){
 #portfolio .gallery-region{top:19%!important;bottom:11%!important}
 #portfolio .gallery-track{gap:28px!important;padding:8px calc(50% - 25dvh)!important}
 #portfolio .gallery-item{flex:0 0 50dvh!important}
 #portfolio .gallery-item img,#portfolio .gallery-item video{max-height:62.5dvh}
}
#portfolio .gallery-item video::-webkit-media-controls,#portfolio .gallery-item video::-webkit-media-controls-start-playback-button{display:none!important}
/* V68 — Similar cases: the 4:5 film plays in each card */
#portfolio .related-media{position:relative;display:block;overflow:hidden;background:#161616}
#portfolio .related-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#portfolio .related-media video::-webkit-media-controls,#portfolio .related-media video::-webkit-media-controls-start-playback-button{display:none!important}
/* V68 — long case text (computer): no grey/white scroll bar, like on phones; a soft fade shows there is more below. */
#portfolio .about-copy{scrollbar-width:none;-ms-overflow-style:none}
#portfolio .about-copy::-webkit-scrollbar{display:none;width:0;height:0}
#portfolio .about-copy.has-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 64px),transparent);mask-image:linear-gradient(#000 calc(100% - 64px),transparent)}
/* V68 — burger → ( keyword ) on hover (computer) */
.menu-button,#portfolio .burger{position:relative}
.aa-bw{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:baseline;white-space:nowrap;pointer-events:none;opacity:0;font-family:Instrument,'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:30px;line-height:1;color:currentColor;transition:opacity .25s ease}
.aa-bw i{font-style:italic;font-size:1.12em;transform:translateY(.04em)}
.aa-bw b{font-weight:400;padding:0 .08em;letter-spacing:-.01em}
.aa-bw-on .aa-bw{opacity:1}
.menu-button>span:not(.aa-bw),#portfolio .burger>span:not(.aa-bw){transition:opacity .2s ease,transform .3s cubic-bezier(.22,.7,.15,1)}
.aa-bw-on>span:not(.aa-bw){opacity:0!important;transform:scaleX(.2)}
@media(hover:none),(pointer:coarse){.aa-bw{display:none}}
.menu-button .aa-bw,#portfolio .burger .aa-bw{height:auto!important;width:auto!important;min-width:0!important;background:none!important;border-radius:0!important;margin:0!important}
/* ===== V74 — EN · FR · NL ===== */
.aa-langs{display:flex;gap:18px;justify-content:center;margin:26px 0 0;font-family:var(--font-text,-apple-system,Arial,sans-serif);font-size:12px;font-weight:500;letter-spacing:.12em}
.aa-langs a{color:inherit;text-decoration:none;opacity:.5;padding:6px 2px;border-bottom:1px solid transparent;transition:opacity .25s,border-color .25s}
.aa-langs a:hover,.aa-langs a.is-on{opacity:1;border-bottom-color:currentColor}
#aa #menu .aa-langs{position:absolute;left:0;right:0;bottom:calc(max(40px,env(safe-area-inset-bottom) + 20px) + 34px)}
#portfolio #navigation .aa-langs{position:absolute;left:0;right:0;bottom:calc(max(40px,env(safe-area-inset-bottom) + 20px) + 10px);flex-direction:row}
/* ===== V76 — "The case" screen in each case page ===== */
#portfolio #project-case .surface{background:#000;color:#fff}
#project-case .cs-private{position:absolute;top:calc(env(safe-area-inset-top) + 64px);right:7%;z-index:3;margin:0;padding:5px 10px;border-radius:999px;background:var(--red,#fe0000);color:#fff;font:500 10px/1 var(--font-text,Arial,sans-serif);letter-spacing:.1em;text-transform:uppercase}
#project-case .cs-heading{position:absolute;left:5%;right:5%;top:17%;margin:0;line-height:.85;font-weight:600}
#project-case .cs-heading span{display:block;font-size:19cqw}
#project-case .cs-heading i{display:block;font-size:16cqw;letter-spacing:-.045em;margin:2cqw 0 0 9%;color:var(--red,#fe0000)}
#project-case .cs-label{display:block;font:500 var(--l,11px)/1.2 var(--font-text,Arial,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--red,#fe0000);margin-bottom:8px}
#project-case .cs-body{position:absolute;left:7%;right:7%;top:40%;bottom:9%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;font-family:var(--font-text,Arial,sans-serif);font-size:var(--p,15px);line-height:1.42;-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent);padding-bottom:40px}
#project-case .cs-body::-webkit-scrollbar{display:none}
#project-case .cs-body p{margin:0 0 .7em}
#project-case .cs-body ul{margin:0;padding:0;list-style:none}
#project-case .cs-body li{padding:7px 0;border-top:1px solid #ffffff2e}
#project-case .cs-step,#project-case .cs-body .cs-result{padding:16px 0;border-top:1px solid #ffffff59}
#project-case .cs-figure{display:block;font:600 clamp(54px,17cqw,150px)/.9 Degular,Arial,sans-serif;letter-spacing:-.05em;color:var(--red,#fe0000)}
#project-case .cs-figure-label{display:block;font-family:Instrument,'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(20px,6cqw,34px);line-height:1.05;margin:6px 0 10px}
#project-case .cs-quote{margin:18px 0 0;padding:20px 0 0;border-top:1px solid #ffffff59}
#project-case .cs-quote p{font-family:Instrument,'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(22px,6.4cqw,40px);line-height:1.08;margin:0 0 12px}
#project-case .cs-quote cite{font:500 var(--l,11px)/1.3 var(--font-text,Arial,sans-serif);letter-spacing:.1em;text-transform:uppercase;font-style:normal;opacity:.75}
#project-case .cs-side{display:none}
@media(min-width:760px){
 #project-case .cs-heading{left:7%;right:auto;width:36%;top:20%}
 #project-case .cs-heading span{font-size:min(9cqw,16dvh)}
 #project-case .cs-heading i{font-size:min(8cqw,14dvh);margin:2dvh 0 0 9%}
 #project-case .cs-side{display:block;position:absolute;left:7%;width:34%;bottom:13%}
 #project-case .cs-side .cs-figure{font-size:min(9cqw,17dvh)}
 #project-case .cs-side .cs-figure-label{font-size:min(2.4cqw,30px)}
 #project-case .cs-side p{font-family:var(--font-text,Arial,sans-serif);font-size:var(--p,16px);line-height:1.42;max-width:34ch;margin:0}
 #project-case .cs-body{left:50%;right:7%;top:17%;bottom:11%}
 #project-case .cs-body .cs-result{display:none}
 #project-case .cs-step:first-child,#project-case .cs-body .cs-result+.cs-step{border-top:1px solid #ffffff59}
 #project-case .cs-quote p{font-size:min(2.6cqw,36px)}
}
/* V81/V82 — the case: four small blocks in a 2×2 grid, black on red (hairline, label + number, text, key words in bold). */
#project-case{display:none!important}
#portfolio .organic.is-ink path{fill:currentColor;stroke:none;animation:none}
#project-about.has-case .about-copy{left:7%;right:7%;top:33%;bottom:9%;overflow:visible;-webkit-mask-image:none!important;mask-image:none!important;display:flex;flex-direction:column;justify-content:flex-end}
#project-about.has-case .about-heading{top:17%;left:7%}
#project-about.has-case .about-heading span{font-size:14cqw;white-space:nowrap}
#project-about.has-case .about-heading i{font-size:12.5cqw}
#project-about .case-grid{display:flex;flex-direction:column;color:#000;font-family:var(--font-text);min-height:0}
#portfolio #project-about .case-grid p,#portfolio #project-about .case-grid li{font-family:var(--font-text)!important;font-size:11.5px!important;line-height:1.3!important;letter-spacing:0!important;margin:0}
#project-about .case-grid strong{font-weight:700}
#project-about .cg-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:16px}
#project-about .cg-row{border-top:1px solid #000;padding-top:6px;min-width:0}
#project-about .cg-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
#project-about .cg-n,#project-about .cg-label{font:500 9.5px/1.25 var(--font-text);letter-spacing:.1em;text-transform:uppercase}
#project-about .cg-body p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
#project-about .cg-list{list-style:none;margin:0;padding:0}
#project-about .cg-list li{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#project-about .cs-figure{display:block;font:600 30px/.85 Degular,Arial,sans-serif;letter-spacing:-.035em;margin:0 0 3px;white-space:nowrap}
#project-about .cs-figure-label{display:block;font-family:Instrument,'Instrument Serif',Georgia,serif;font-style:italic;font-size:14px;line-height:1.05;margin:0 0 4px}
#project-about .cc-result .cg-body p{-webkit-line-clamp:3}
#project-about .cg-quote{margin:0 0 18px;padding:0}
#portfolio #project-about .cg-quote p{font-family:Degular,Arial,sans-serif!important;font-weight:500!important;font-size:19px!important;line-height:1.02!important;letter-spacing:-.02em!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#project-about .cg-quote cite{display:block;margin-top:6px;font:500 9.5px/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase;font-style:normal}
#project-about .cg-quote.is-draft p{opacity:.55}
#project-about .cs-private{display:inline-block;align-self:flex-start;margin:0 0 6px;padding:3px 8px;border-radius:99px;background:#000;color:#fff;font:600 9px/1.2 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
#project-about.has-case .tags{flex-direction:row;flex-wrap:wrap;gap:4px 16px;bottom:4%}
@media(max-height:700px){
 #project-about.has-case .about-copy{top:30%;bottom:8.5%}
 #project-about.has-case .about-heading{top:15%}
 #project-about.has-case .about-heading span{font-size:12cqw}
 #project-about.has-case .about-heading i{font-size:11cqw}
 #portfolio #project-about .case-grid p,#portfolio #project-about .case-grid li{font-size:10.5px!important}
 #project-about .cg-rows{row-gap:10px}
 #project-about .cg-body p{-webkit-line-clamp:5}
 #portfolio #project-about .cg-quote p{font-size:16px!important;-webkit-line-clamp:2}
 #project-about .cg-quote{margin-bottom:12px}
 #project-about .cs-figure{font-size:24px}
}
@media(min-width:760px){
 #portfolio #project-about.has-case .about-heading{top:21%;left:7%;width:42%}
 #portfolio #project-about.has-case .about-heading span,#portfolio #project-about.has-case .about-heading i{white-space:nowrap;width:max-content;max-width:none}
 #portfolio #project-about.has-case .about-heading span{font-size:min(7.4cqw,12dvh)}
 #portfolio #project-about.has-case .about-heading i{font-size:min(6.4cqw,10.5dvh)}
 #portfolio #project-about.has-case .about-copy{left:53%;right:6%;top:15%;bottom:12%}
 #project-about .cg-rows{column-gap:clamp(18px,2vw,34px);row-gap:clamp(18px,3.5dvh,38px)}
 #project-about .cg-row{padding-top:8px}
 #project-about .cg-head{margin-bottom:10px}
 #project-about .cg-n,#project-about .cg-label{font-size:10.5px}
 #portfolio #project-about .case-grid p,#portfolio #project-about .case-grid li{font-size:clamp(13px,.95vw,15.5px)!important;line-height:1.32!important}
 #project-about .cg-body p{-webkit-line-clamp:5}
 #project-about .cs-figure{font-size:min(3.6cqw,7dvh);margin-bottom:6px}
 #project-about .cs-figure-label{font-size:clamp(16px,1.2vw,20px)}
 #project-about .cg-quote{margin-bottom:clamp(22px,5dvh,48px)}
 #portfolio #project-about .cg-quote p{font-size:min(2.2cqw,4.2dvh)!important;line-height:1!important;-webkit-line-clamp:4}
 #project-about .cg-quote cite{margin-top:12px;font-size:10.5px}
 #project-about .cs-private{font-size:10px}
 #portfolio #project-about.has-case .tags{left:7%;right:6%;justify-content:flex-start;bottom:4.5%}
}
@media(min-width:760px) and (max-height:720px){
 #portfolio #project-about.has-case .about-copy{top:13%;bottom:11%}
 #portfolio #project-about .case-grid p,#portfolio #project-about .case-grid li{font-size:12.5px!important}
 #project-about .cg-body p{-webkit-line-clamp:4}
 #project-about .cg-head{margin-bottom:6px}
 #portfolio #project-about .cg-quote p{-webkit-line-clamp:3}
}
/* V82 — WHAT WE DID as small rounded labels; plain result, no quote. */
#project-about .cg-pills{display:flex;flex-wrap:wrap;gap:5px}
#portfolio #project-about .cg-pills li{display:inline-block;-webkit-line-clamp:unset;overflow:visible;border:1px solid #000;border-radius:14px;padding:3px 9px 3px;font-size:10.5px!important;line-height:1.2!important;white-space:normal;max-width:100%}
@media(min-width:760px){#project-about .cg-pills{gap:6px}#portfolio #project-about .cg-pills li{font-size:clamp(11.5px,.8vw,13px)!important;padding:4px 11px}}