@font-face{font-family:Anton;src:url('../fonts/anton.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Black';src:url('../fonts/archivo-black.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Narrow';src:url('../fonts/archivo-narrow-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Narrow';src:url('../fonts/archivo-narrow-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}

:root{--dark:#111;--gray:#393939;--green:#3f986d;--cyan:#00c0e8;--white:#fff;--type-gradient:linear-gradient(90deg,#3f986d 5.3%,#00c0e8 40%);--surface-gradient:radial-gradient(ellipse at 100% 100%,#00bde8 0%,#14b5a6 28%,#27ac64 55%,#198d55 100%);--body:clamp(1rem,.9375vw,1.125rem);--title:clamp(1.5rem,1.875vw,2.25rem);--hero:clamp(2rem,2.865vw,3.4375rem);--section-gap:clamp(4rem,6.25vw,7.5rem)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{margin:0;background:var(--dark);color:var(--white);font-family:'Archivo Narrow',Arial,sans-serif;font-size:var(--body);font-weight:500;line-height:1.35}
body,button,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.25em}
button{cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--cyan);outline-offset:6px}
.gradient-surface :focus-visible{outline-color:#111}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
iframe{display:block;border:0}
p,h1,h2,h3,figure{margin:0}
p,h1,h2,h3,h4{overflow-wrap:break-word}
h1,h2,h3{font-weight:400}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:1rem;left:1rem;z-index:100;background:var(--white);color:var(--dark);padding:.8rem 1rem;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.wide{width:87.5%;max-width:1680px;margin-inline:auto}
.work-width{width:66.66667%;max-width:1280px;margin-inline:auto}
.gradient-type{background:var(--type-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.gradient-surface{background:var(--surface-gradient)}
.eyebrow{text-transform:uppercase;font-size:var(--body);color:var(--cyan);line-height:1.2}
.outline-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:2px solid currentColor;border-radius:10px;padding:.65em 1em;font-size:max(.875rem,.83333vw);font-weight:600;text-transform:uppercase;line-height:1.25}
.outline-button:hover{background:rgba(255,255,255,.12);text-decoration:none}
.section-heading{display:flex;gap:clamp(1.2rem,2.35vw,2.8125rem);align-items:center;margin-bottom:clamp(3.5rem,6.25vw,7.5rem)}
.section-heading h2{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:clamp(3rem,5.2083vw,6.25rem);line-height:1;letter-spacing:-.01em}
.section-heading::after{content:'';height:1px;background:linear-gradient(90deg,var(--green),transparent);flex:1;min-width:20px}
.project-heading{margin-bottom:clamp(1.5rem,2.0833vw,2.5rem)}
.project-heading h2{font-family:'Archivo Black',Arial,sans-serif;text-transform:uppercase;font-size:clamp(1.125rem,1.25vw,1.5rem);line-height:1.25}
.project-heading h2 span{color:var(--cyan)}
.project-heading p{text-transform:uppercase;margin-top:.25rem;line-height:1.35}
.project-heading::after{content:'';display:block;margin-top:.45rem;width:min(29.3%,375px);height:10px;background:linear-gradient(90deg,#3f986d,#00c0e8)}
.project{margin-bottom:var(--section-gap)}
.topographic-surface{position:relative;isolation:isolate}
.topographic-surface::before{content:none}

/* Global navigation is loaded from components/nav.html on every route. */
.site-header{position:absolute;top:clamp(1.5rem,3.22917vw,3.875rem);left:6%;width:88%;max-width:1685px;z-index:20}
.primary-nav{display:flex;align-items:center;gap:clamp(1.5rem,2.0833vw,2.5rem);font-size:clamp(1rem,.9375vw,1.125rem);text-transform:uppercase}
.primary-nav a{position:relative;min-height:44px;display:inline-flex;align-items:center}
.primary-nav a[aria-current=page]{color:#68bf96}
.primary-nav a[aria-current=page]::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:3px;background:var(--green)}
.mobile-brand,.menu-toggle{display:none}
.include-error{padding:2rem}

/* Hero: normal page scrolling, with a small scroll-linked fade. */
.hero{position:relative;isolation:isolate;overflow:hidden;height:min(56.25vw,1080px);min-height:600px}
.word-cloud{position:absolute;inset:0;width:85%;height:100%;z-index:-1;background-image:image-set(url('../images/word-cloud.webp') type('image/webp'),url('../images/word-cloud.png') type('image/png'));background-position:left top;background-size:contain;background-repeat:no-repeat;opacity:1;pointer-events:none;user-select:none}
.hero-name{position:absolute;left:6%;top:19.26%;font-family:Anton,Impact,sans-serif;font-size:clamp(6rem,20.8333vw,25rem);line-height:.9;text-transform:uppercase;opacity:.3;letter-spacing:-.025em}
.hero-copy{position:absolute;left:6%;top:33.9%;width:45.57%;z-index:2}
.hero-copy .eyebrow{margin-bottom:clamp(1rem,1vw,1.2rem)}
.hero-copy p:last-child{font-family:'Archivo Black',Arial,sans-serif;font-size:var(--hero);line-height:1.2}
.hero-portrait{position:absolute;right:0;top:0;width:40.34%;height:auto}


.client-logos{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.client-logos img{width:auto;max-width:9%;max-height:56px;object-fit:contain}
.home-hero .client-logos{position:absolute;bottom:9%;left:6.25%;width:87.5%}
.interior-hero .hero-copy{left:auto;right:8.55%;width:49.12%;text-align:right}
.art-hero .hero-copy{width:42.6%;right:6.25%}
.section-nav{position:absolute;bottom:6%;left:6.25%;width:87.5%;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:1rem 2.5rem;padding-bottom:1.25rem;border-bottom:1px solid #295e45;color:#69bb92;text-transform:uppercase;line-height:1.2}
.section-nav a{min-height:44px;display:flex;align-items:center}

/* Capability tabs, intentionally manual and never auto-rotating. */
.capabilities{padding:clamp(3rem,9.25vw,11.125rem) 0 clamp(2rem,3.5vw,4.2rem)}
.cap-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.167vw,5rem);align-items:start}
.cap-layout>*{min-width:0}
.cap-heading{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.8rem}
.cap-heading h2{font-family:Anton,Impact,sans-serif;font-size:clamp(3rem,5.2083vw,6.25rem);line-height:1;text-transform:uppercase;white-space:nowrap;max-width:100%}
.experience{padding:.9rem 1.4rem;background:linear-gradient(100deg,#3f986d,#00c0e8);border-radius:15px;font-family:'Archivo Black',Arial,sans-serif;font-size:clamp(1rem,1.25vw,1.5rem);text-align:right;line-height:1.1;flex:1}
.cap-tabs{display:flex;flex-direction:column}
.cap-tabs button{border:0;border-bottom:1px solid rgba(255,255,255,.16);background:transparent;min-height:clamp(95px,6.5625vw,126px);padding:1rem calc(.55rem + 20px) 1rem .55rem;text-align:right}
.cap-tabs button[aria-selected=true]{background:rgba(0,0,0,.18);box-shadow:inset -4px 0 #fff}
.cap-tabs button:hover{background:rgba(0,0,0,.12)}
.cap-tabs .tab-title{display:block;font-family:'Archivo Black',Arial,sans-serif;font-size:clamp(1.125rem,1.25vw,1.5rem);line-height:1.25}
.cap-tabs .tab-description{display:block;font-size:var(--body);line-height:1.3;text-transform:uppercase;margin-top:.25rem}
.cap-panel img{width:100%;aspect-ratio:860/484;object-fit:cover;border-radius:12px}
.cap-panel p{margin-top:1.5rem;text-transform:uppercase;line-height:1.35}
.cap-panel .outline-button{margin-top:1.4rem}
.capabilities>.client-logos{margin-top:clamp(3rem,6vw,7.25rem)}
.capabilities.can-reveal .cap-layout{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.capabilities.is-revealed .cap-layout{opacity:1;transform:none}
.video-slot{position:relative;aspect-ratio:16/9;min-width:0;width:100%;background:#131d22;border:1px solid #30565c;overflow:hidden}
.video-slot .placeholder-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.6rem;color:#b1c4c8;text-align:center;text-transform:uppercase;padding:1rem}
.video-slot .placeholder-label::before{content:'';width:2.2rem;height:2.2rem;border:1px solid #73939a;border-radius:50%;background:linear-gradient(120deg,transparent 30%,rgba(0,192,232,.12))}
.video-slot:has(iframe)>.placeholder-label,.video-slot:has(video)>.placeholder-label{display:none}
.video-slot iframe,.video-slot video{position:absolute;inset:0;width:100%;height:100%;border:0}
.event-layout{display:grid;grid-template-columns:421.7fr 808.3fr;gap:3.9%;align-items:start}
.event-layout>.video-slot{aspect-ratio:1081/1920}
.event-right{display:grid;gap:clamp(1.25rem,2.08333vw,2.5rem)}
.event-right .video-slot:first-child{aspect-ratio:11/4;border:0}
.event-right .video-slot:last-child{aspect-ratio:808/311}

/* Selected work. */
.selected-work{padding-top:var(--section-gap)}
.tokenization-layout{position:relative;padding-bottom:11.64%}
.tokenization-brochure{width:100%}
.tokenization-mobile{position:absolute;left:1.21%;top:20.83%;width:29.6875%}
.iec-section>.project-heading{width:66.66667%;max-width:1280px;margin-inline:auto}
.iec-development{background:#fff;color:var(--cyan);padding:clamp(2rem,2.604vw,3.125rem) 0 clamp(2rem,2.9vw,3.5rem)}
.iec-development .work-width{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.iec-development figure{display:flex;flex-direction:column;align-items:center;text-align:center}
.iec-development img{width:66.43%;aspect-ratio:1;object-fit:contain}
.iec-development figcaption{text-transform:uppercase;margin-top:.75rem;font-size:clamp(.875rem,.9375vw,1.125rem)}
.iec-hero{position:relative;aspect-ratio:1920/598.5}
.iec-hero>img:first-child,.iec-hero>picture:first-child>img{width:100%;height:100%;object-fit:cover}
.iec-hero .iec-logo{position:absolute;left:12.91%;top:28.2%;width:25.73%}
.case-preview{padding-top:1rem}
.case-preview .section-heading{margin-bottom:clamp(2rem,2.39583vw,2.875rem)}
.case-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.08333%}
.case-card{position:relative;aspect-ratio:300/750;background:#fff;border-radius:12px;overflow:hidden;color:#656565;text-align:center}
.case-card>img,.case-card>picture>img{width:100%;height:100%;object-fit:cover}
.case-card .card-text{position:absolute;top:4%;left:7%;right:7%;font-size:clamp(.875rem,.9375vw,1.125rem);text-transform:uppercase;line-height:1.2}
.case-card h3{font-family:'Archivo Black',Arial,sans-serif;font-size:clamp(1rem,1.25vw,1.5rem);color:#007b95;line-height:1.2;margin-bottom:.3rem}
.case-card .outline-button{position:absolute;top:16.52%;left:13.66%;right:13.66%;color:#21714b;font-size:clamp(.875rem,.83333vw,1rem);min-height:40px;padding:.55em .2em;border-radius:8px}
.case-card:last-child .card-text,.case-card:last-child h3{color:#fff}
.case-card:last-child .outline-button{color:#fff}
.case-card .outline-button:hover,.case-card .outline-button:focus-visible{background:var(--green);color:#fff;border-color:transparent;text-decoration:none}
.case-card .card-logo{position:absolute;left:14.67%;bottom:3.87%;width:71.33%;height:auto;object-fit:contain}

/* Case Studies retains separate layouts rather than a repeating template. */
.case-studies-main .hero{margin-bottom:1.1rem}
.case-block{scroll-margin-top:2rem}
.case-number{font-family:Anton,Impact,sans-serif;font-size:clamp(8rem,20.8333vw,25rem);line-height:.9;opacity:.3;letter-spacing:-.02em}
.case-overview h2{font-family:'Archivo Black',Arial,sans-serif;font-size:var(--title);line-height:1.05;margin:.5rem 0 1rem}
.case-insurance .case-overview h2,.case-xb .case-overview h2{text-transform:uppercase}
.case-overview .eyebrow{margin-bottom:.25rem}
.case-overview>p:last-child{line-height:1.35}
.case-insurance{padding:0 0 clamp(3.5rem,4.79vw,5.75rem)}
.insurance-top{display:grid;grid-template-columns:331fr 1314fr;gap:2.08333%;align-items:start}
.insurance-top .case-overview{text-align:right}
.insurance-details{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,15.58vw,18.7rem);margin-top:clamp(3rem,4vw,4.8rem)}
.challenge{font-family:Anton,Impact,sans-serif;font-size:clamp(2rem,2.8646vw,3.4375rem);line-height:1.1;margin-top:.4rem}
.response h3{font-family:'Archivo Black',Arial,sans-serif;color:var(--cyan);font-size:var(--title);text-align:right;margin-bottom:1.4rem}
.response-item{border:1px solid var(--cyan);border-radius:20px;padding:clamp(1.25rem,2.083vw,2.5rem);margin-top:1.5rem}
.response-item h4{font-family:'Archivo Black',Arial,sans-serif;font-weight:400;font-size:var(--title);line-height:1.1;margin:0 0 .6rem}
.case-xb{padding:clamp(2rem,3.646vw,4.375rem) 0}
.xb-top{display:grid;grid-template-columns:1180fr 412fr;gap:5.24%;align-items:start}
.xb-composition{position:relative;aspect-ratio:1180/960}
.xb-composition .xb-figma{position:absolute;left:3.47%;top:.625%;width:90.42%}
.xb-composition .xb-brochure{position:absolute;right:0;top:31.04%;width:69.49%}
.xb-composition .xb-website{position:absolute;left:0;top:51.67%;width:36.35%}
.case-xb .case-overview{text-align:right}
.case-xb .eyebrow{color:#fff}
.case-xb .pullquote{font-family:Anton,Impact,sans-serif;font-size:clamp(2rem,2.865vw,3.4375rem);line-height:1.1;margin-top:1rem;border-right:8px solid #393939;padding-right:1rem}
.xb-process{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:2rem}
.xb-process h3{font-family:'Archivo Black',Arial,sans-serif;font-size:var(--title);line-height:1.1;margin-bottom:.5rem}
.case-abm{padding:clamp(3rem,4.8vw,5.75rem) 0}
.abm-layout{display:grid;grid-template-columns:655fr 385fr 159fr 337fr;gap:2.8%;align-items:start}
.abm-layout>*{min-width:0}
.abm-layout>img{width:100%}
.abm-impact h3{font-size:var(--body);font-weight:500;color:var(--cyan);text-transform:uppercase;margin:0 0 .35rem}
.abm-impact>div+div{margin-top:1.7rem;border-top:1px solid #2c6556;padding-top:1.7rem}
.impact-stat strong{font-family:Anton,Impact,sans-serif;font-size:clamp(5rem,7.8125vw,9.375rem);line-height:.95;font-weight:400;display:block}
.impact-stat p{font-family:'Archivo Black',Arial,sans-serif;font-size:var(--title);line-height:1}
.abm-timing{color:var(--cyan);margin-top:.9rem;line-height:1.2}
.plane-carousel{display:grid;grid-template-columns:minmax(0,59.33fr) minmax(0,40.67fr);position:relative;align-items:stretch}
.plane-image-panels{position:relative;aspect-ratio:1179/786;background:#1b2022;min-width:0;min-height:0;width:100%;overflow:hidden}
.plane-image-panels>figure{position:absolute;inset:0}
.plane-image-panels img{width:100%;height:100%;object-fit:cover}
.plane-information{padding:clamp(1.5rem,2.8vw,3.375rem) 15% clamp(1.5rem,2.5vw,3rem) 4%;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;min-width:0}
.plane-information .eyebrow{color:#fff}
.plane-information h2{font-family:'Archivo Black',Arial,sans-serif;font-size:var(--title);line-height:1.05;margin:.45rem 0 .5rem}
.plane-information p{line-height:1.3}
.plane-tabs{display:flex;gap:.7rem;border-bottom:1px solid #ffffff55}
.plane-tabs button{border:0;background:transparent;text-transform:uppercase;text-align:left;padding:.5rem 0 .7rem;flex:1;min-width:0;min-height:48px;line-height:1.2;font-size:clamp(.875rem,.9375vw,1.125rem)}
.plane-tabs button[aria-selected=true]{color:#123b35;border-bottom:4px solid #fff}
.plane-tabs button:hover{background:#ffffff12}

/* Expressive art direction compositions remain relative to their project. */
.art-projects{padding-top:1.3rem}
.fuel-composition{position:relative;aspect-ratio:1280/3039.46;margin-bottom:var(--section-gap)}
.fuel-poster{position:absolute;left:0;top:0;width:100%}
.fuel-dirt{position:absolute;left:0;top:57.7%;width:100%;height:28.13%;background:#5f261f url('../images/fuel-fire-dirt.webp') center/cover}
.fuel-mark{position:absolute;left:7.97%;top:56.38%;width:17.19%}
.fuel-icons{position:absolute;left:3.52%;top:73.72%;width:26.09%}
.fuel-hoodie{position:absolute;left:33.36%;top:50.24%;width:87.66%;max-width:none;z-index:2}
.fuel-foundations{position:absolute;left:0;right:0;bottom:0;height:14.16%;display:grid;grid-template-columns:50.445% 49.555%;align-items:center;background:#a28663}
.fuel-colors{display:grid;grid-template-columns:repeat(3,1fr);height:100%}
.fuel-colors span{display:block}
.fuel-colors span:nth-child(1){background:#a28663}.fuel-colors span:nth-child(2){background:#312925}.fuel-colors span:nth-child(3){background:#1b1e20}.fuel-colors span:nth-child(4){background:#e6c074}.fuel-colors span:nth-child(5){background:#772f27}.fuel-colors span:nth-child(6){background:#0c2b2f}
.fuel-type{width:83.2%;margin-inline:auto}
.hey-kid>.project-heading,.amazed>.project-heading{width:66.66667%;max-width:1280px;margin-inline:auto}
.hk-hero{position:relative;aspect-ratio:1920/557}
.hk-hero .hk-photo{width:100%;height:100%;object-fit:cover}
.hk-hero .hk-logo{position:absolute;left:16.51%;top:37.7%;width:25.57%}
.hk-details{display:grid;grid-template-columns:318.5fr 318.5fr 515fr;gap:5%;padding:clamp(2rem,2.917vw,3.5rem) 0 clamp(2rem,2.604vw,3.125rem);align-items:start}
.hk-details>*{min-width:0}
.hk-details h3{font-family:Anton,Impact,sans-serif;font-size:clamp(2.5rem,2.865vw,3.4375rem);line-height:1.1;margin-bottom:1.5rem;text-align:center}
.hk-icons{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hk-icons img{width:18%;height:auto}
.hk-details .hk-grid{width:100%}
.rockreation{position:relative;isolation:isolate}
.rockreation::before{content:'';position:absolute;inset:0;z-index:-1;background:url('../images/rockreation-bg.webp') center/cover;opacity:.65;pointer-events:none}
.rock-composition{position:relative;aspect-ratio:1280/1508}
.rock-swoops{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rock-poster{position:absolute;left:23.52%;top:3.05%;width:43.53%}
.rock-story{position:absolute;left:55.39%;top:28.38%;width:44.61%}
.rock-post{position:absolute;left:3.91%;top:48.74%;width:29.84%}
.amazed-composition{position:relative;aspect-ratio:1919/1398}
.amazed-phone{position:absolute;left:22%;top:9.01%;width:24.7%}
.amazed-album{position:absolute;left:49.14%;top:4.72%;width:29.34%}
.amazed-monitor{position:absolute;left:9.64%;top:47.21%;width:85.56%}
.print-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.print-grid img{width:100%}
.print-grid img:first-child{grid-column:1/-1}

/* Universal contact/footer: oversized type is a backdrop, links stay legible. */
.contact-section{position:relative;isolation:isolate;min-height:clamp(26rem,38.5417vw,46.25rem);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.contact-section::before{content:none}
.contact-background{position:absolute;inset:auto 0;top:50%;transform:translateY(-50%);z-index:-1;opacity:.3;font-family:Anton,Impact,sans-serif;font-size:clamp(6rem,20.8333vw,25rem);text-transform:uppercase;line-height:.9;pointer-events:none}
.contact-details{display:flex;flex-direction:column;gap:.5rem;max-width:90%}
.contact-phone{font-family:'Archivo Black',Arial,sans-serif;font-size:clamp(1rem,1.25vw,1.5rem)}
.contact-email{font-family:'Archivo Black',Arial,sans-serif;font-size:var(--hero);line-height:1.2;overflow-wrap:anywhere}
.copyright{position:absolute;bottom:1.25rem;font-size:var(--body);text-transform:uppercase}

@media(min-width:1921px){.hero-copy{top:366px}.hero-name{top:208px}.hero-portrait{width:775px}.site-header{left:calc((100% - 1685px)/2)}.hero-name,.hero-copy{left:calc((100% - 1690px)/2)}.interior-hero .hero-copy{left:auto;right:calc((100% - 1592px)/2);width:943px}.art-hero .hero-copy{width:818px}.fuel-hoodie{max-width:none}}
@media(max-width:1200px){.cap-heading{flex-wrap:wrap}.cap-heading h2{order:-1}.experience{flex:0 0 auto;text-align:left}.case-card .outline-button{left:8%;right:8%;font-size:.875rem}.case-card h3{font-size:1rem}.plane-information{padding-right:7%}.abm-layout{gap:2%}.case-overview h2{font-size:1.5rem}.hk-details{gap:3%}.contact-email{font-size:clamp(1.5rem,2.865vw,3.4375rem)}}
@media(max-width:900px){
  :root{--section-gap:4.5rem;--hero:clamp(1.75rem,4.5vw,2.5rem);--title:1.75rem}
  .wide,.work-width{width:calc(100% - 3rem)}
  .site-header{left:1.5rem;right:1.5rem;width:auto;top:1.2rem;display:flex;align-items:center;justify-content:space-between}
  .mobile-brand{display:block;font-family:'Archivo Black',Arial,sans-serif;text-transform:uppercase;font-size:1.125rem;min-width:0;overflow-wrap:anywhere;line-height:1.15}
  .menu-toggle{display:flex;flex-shrink:0;flex-direction:column;justify-content:center;gap:6px;background:#1119;border:0;width:48px;height:48px;padding:10px;border-radius:4px}
  .menu-toggle span{height:3px;width:100%;background:#fff}
  .primary-nav{display:none;position:absolute;top:64px;left:0;right:0;padding:1rem 1.25rem;background:#111;border:1px solid #346b5a;flex-direction:column;align-items:stretch;gap:.35rem;box-shadow:0 12px 35px #0007}
  .primary-nav.is-open{display:flex}
  .primary-nav a{padding:.4rem .5rem}
  .primary-nav a[aria-current=page]::after{right:auto;width:4rem;bottom:0}
  .hero{height:auto;min-height:680px;padding:7rem 1.5rem 3rem;display:flex;flex-direction:column}
  .hero-name{font-size:clamp(6rem,16vw,10rem);top:15%;left:1.5rem}
  .home-hero{padding-top:0}
  .home-hero .hero-portrait{position:relative;align-self:flex-end;width:58%;margin-top:0}
  .home-hero .hero-name{top:6rem;font-size:clamp(5rem,15vw,9rem);z-index:1}
  .home-hero .hero-copy{position:relative;left:auto;top:auto;width:100%;margin-top:1.5rem}
  .hero-copy .eyebrow{margin-bottom:1rem}
  .home-hero .client-logos{position:relative;left:auto;bottom:auto;width:100%;margin-top:2.5rem}
  .client-logos{flex-wrap:wrap;justify-content:center;gap:1.5rem 2rem}
  .client-logos img{max-width:18%;max-height:38px}
  .interior-hero{min-height:640px;justify-content:center}
  .interior-hero .hero-name{top:7rem;font-size:clamp(6rem,18vw,10rem)}
  .interior-hero .hero-copy,.art-hero .hero-copy{position:relative;left:auto;right:auto;top:auto;width:min(75%,650px);margin:9rem 0 4rem auto;text-align:right}
  .section-nav{position:relative;bottom:auto;left:auto;width:100%;margin-top:auto;gap:.5rem 1.5rem;font-size:.9375rem;padding-bottom:1rem;justify-content:flex-start}
  .capabilities{padding:3rem 0}
  .cap-layout{grid-template-columns:minmax(0,1fr);gap:2rem}
  .cap-heading{justify-content:center;flex-direction:column;gap:1.5rem}
  .cap-heading h2{font-size:clamp(3rem,8vw,5rem);white-space:normal;overflow-wrap:anywhere;text-align:center}
  .experience{text-align:center;font-size:1.25rem;width:100%}
  .cap-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem}
  .cap-tabs .tab-title{overflow-wrap:anywhere}
  .cap-tabs button{text-align:left;padding:1rem calc(1rem + 20px) 1rem 1rem;min-height:96px;border:1px solid #ffffff55;border-radius:4px}
  .cap-tabs .tab-title{font-size:1rem}
  .cap-tabs .tab-description{display:none}
  .cap-tabs button[aria-selected=true]{box-shadow:inset 0 -4px #fff}
  .cap-panel p{font-size:1.125rem}
  .capabilities>.client-logos{margin-top:3rem}
  .section-heading{margin-bottom:3rem}
  .section-heading h2{font-size:clamp(3rem,7vw,4.5rem)}
  .project-heading h2{font-size:1.125rem}
  .project-heading::after{width:55%;height:6px}
  .iec-section>.project-heading,.hey-kid>.project-heading,.amazed>.project-heading{width:calc(100% - 3rem)}
  .iec-development .work-width{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .iec-development img{width:65%;max-width:190px}
  .iec-hero{aspect-ratio:2/1}
  .iec-hero>img:first-child,.iec-hero>picture:first-child>img{object-position:60% center}
  .iec-hero .iec-logo{left:7%;width:35%;top:30%}
  .case-card-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .case-card .card-text{font-size:1rem}
  .case-card h3{font-size:1.125rem}
  .case-card .outline-button{min-height:44px;font-size:1rem}
  .insurance-top{grid-template-columns:1fr;gap:2rem}
  .insurance-top .case-overview{text-align:left;max-width:650px}
  .case-number{font-size:clamp(9rem,30vw,15rem)}
  .insurance-details{grid-template-columns:1fr;gap:3rem;margin-top:3rem}
  .challenge{font-size:2.5rem}
  .response h3{text-align:left}
  .case-xb{padding:3rem 0}
  .xb-top{display:flex;flex-direction:column;gap:2.5rem}
  .xb-top .case-overview{order:-1;text-align:left}
  .xb-composition{width:100%}
  .case-xb .pullquote{border-right:0;border-left:6px solid #393939;padding-left:1rem;padding-right:0;font-size:2.5rem;max-width:600px}
  .xb-process{grid-template-columns:1fr;gap:2rem}
  .case-overview h2{font-size:1.75rem}
  .abm-layout{grid-template-columns:1fr 1fr;gap:2rem}
  .abm-layout>.case-overview{grid-column:1/-1;grid-row:1}
  .abm-layout>.abm-art{grid-column:1/-1;max-width:655px;margin:auto}
  .abm-layout>.abm-ad{max-width:159px;margin:auto}
  .impact-stat strong{font-size:5.5rem}
  .plane-carousel{grid-template-columns:1fr}
  .plane-image-panels{aspect-ratio:3/2}
  .plane-information{padding:2rem 1.5rem;gap:2rem}
  .plane-information .case-number{font-size:10rem}
  .plane-information h2{font-size:1.75rem}
  .plane-tabs{gap:1rem}
  .plane-tabs button{font-size:.9375rem}
  .fuel-composition{aspect-ratio:auto;display:flex;flex-direction:column;gap:2.5rem}
  .fuel-poster,.fuel-mark,.fuel-icons,.fuel-hoodie,.fuel-foundations{position:relative;inset:auto;height:auto;margin-inline:auto}
  .fuel-poster{width:100%}
  .fuel-dirt{display:none}
  .fuel-mark{width:42%;max-width:220px}
  .fuel-icons{width:80%;max-width:334px}
  .fuel-hoodie{width:100%;max-width:650px;background:url('../images/fuel-fire-dirt.webp') center/cover}
  .fuel-foundations{width:100%;grid-template-columns:1fr 1fr;min-height:160px}
  .fuel-colors{min-height:160px}
  .fuel-type{width:85%}
  .hk-hero{aspect-ratio:402/557}
  .hk-hero .hk-photo{object-fit:cover;object-position:70% center}
  .hk-hero .hk-logo{width:55%;left:8%;top:auto;bottom:8%}
  .hk-details{grid-template-columns:minmax(0,1fr);gap:2.5rem;padding:2.5rem 0}
  .hk-details h3{overflow-wrap:anywhere}
  .hk-details h3{text-align:left}
  .hk-icons{max-width:320px}
  .hk-details .hk-grid{max-width:515px}
  .rock-composition{aspect-ratio:auto;display:flex;flex-direction:column;gap:2.5rem}
  .rock-poster,.rock-story,.rock-post{position:relative;inset:auto;width:100%;max-width:570px;margin-inline:auto}
  .rock-swoops{display:none}
  .rockreation::before{inset:0;opacity:.4}
  .amazed-composition{aspect-ratio:auto;display:flex;flex-direction:column;gap:2rem;padding:2rem 1.25rem}
  .amazed-monitor,.amazed-album,.amazed-phone{position:relative;inset:auto;width:100%;max-width:600px;margin-inline:auto}
  .amazed-monitor{order:-1;max-width:900px}
  .amazed-album{max-width:563px}
  .amazed-phone{max-width:474px}
  .contact-section{min-height:400px}
  .contact-email{font-size:clamp(1.25rem,4vw,2rem)}
}
@media(max-width:540px){
  .wide,.work-width{width:calc(100% - 3rem)}
  .hero{min-height:580px}
  .home-hero .hero-portrait{width:90%;margin-right:-1.5rem}
  .home-hero .hero-name{top:5rem;font-size:22vw;left:1.5rem}
  .home-hero .hero-copy{margin-top:1rem}
  .hero-copy p:last-child{font-size:1.75rem}
  .client-logos{gap:1rem 1.5rem}
  .client-logos img{max-width:23%;max-height:30px}
  .interior-hero{min-height:610px}
  .interior-hero .hero-name{top:6.6rem;font-size:24vw}
  .interior-hero .hero-copy,.art-hero .hero-copy{width:100%;margin-top:14rem;text-align:left;margin-bottom:2rem}
  .section-nav{font-size:.875rem;gap:.3rem 1.1rem}
  .art-hero .hero-copy{margin-top:11rem}
  .section-heading h2{font-size:3rem}
  .cap-heading h2{font-size:clamp(2.5rem,12.5vw,3.125rem)}
  .cap-tabs button{min-height:100px;padding:.9rem calc(.9rem + 20px) .9rem .9rem}
  .event-layout{display:flex;flex-direction:column;gap:2rem}
  .event-layout>.video-slot{width:100%;max-width:422px}
  .event-right{width:100%;gap:2rem}
  .tokenization-layout{display:flex;flex-direction:column;gap:2rem;padding:0}
  .tokenization-mobile{position:relative;inset:auto;width:100%;max-width:380px;margin-inline:auto}
  .iec-section>.project-heading,.hey-kid>.project-heading,.amazed>.project-heading{width:calc(100% - 3rem)}
  .iec-development .work-width{grid-template-columns:1fr;gap:2rem}
  .iec-development img{width:180px}
  .iec-hero{aspect-ratio:1/1}
  .iec-hero>img:first-child,.iec-hero>picture:first-child>img{object-position:68% center}
  .iec-hero .iec-logo{left:6%;top:8%;width:49%}
  .case-card-grid{grid-template-columns:1fr;gap:2rem}
  .case-card{width:100%;max-width:350px;justify-self:center}
  .case-card .card-text{font-size:1.125rem}
  .case-card h3{font-size:1.5rem}
  .case-card .outline-button{font-size:1rem}
  .challenge{font-size:2rem}
  .response-item h4{font-size:1.5rem}
  .abm-layout{grid-template-columns:minmax(0,1fr)}
  .impact-stat strong{font-size:min(5.5rem,28vw)}
  .abm-layout>.abm-art,.abm-layout>.case-overview{grid-column:1}
  .abm-layout>.abm-ad{order:4;max-width:200px;margin-top:1rem}
  .abm-impact{order:3}
  .plane-tabs{flex-direction:column;gap:0;border-bottom:0}
  .plane-tabs button{flex:auto;border-bottom:1px solid #ffffff55;padding:.85rem 0}
  .plane-tabs button[aria-selected=true]{border-bottom:4px solid #fff}
  .plane-information h2{font-size:1.5rem}
  .fuel-foundations{grid-template-columns:1fr;gap:1.5rem;padding-bottom:1.5rem}
  .fuel-colors{min-height:210px}
  .fuel-type{width:82%}
  .print-grid{grid-template-columns:1fr}
  .contact-background{font-size:25vw}
  .contact-section{min-height:340px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.home-hero .hero-copy,.home-hero .hero-portrait{opacity:1;transform:none}.capabilities.can-reveal .cap-layout{opacity:1;transform:none}}

/* Keep enlarged text inside the responsive content grid. */
.section-heading h2{min-width:0;overflow-wrap:anywhere}
.outline-button{max-width:100%;text-align:center}
@media(max-width:900px){
.insurance-top,.insurance-details{grid-template-columns:minmax(0,1fr)}
.insurance-top>*,.insurance-details>*,.xb-top>div{min-width:0;max-width:100%}
.experience{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:540px){.case-number,.plane-information .case-number{font-size:min(10rem,50vw)}}

/* One canvas: intro and capabilities occupy the same coordinates. */
.hero-scroll{position:relative}
.hero-canvas{position:relative}
.hero-scroll.is-scroll-driven .hero-canvas{position:sticky;top:0;isolation:isolate}
.is-scroll-driven .home-hero,.is-scroll-driven .capabilities{position:absolute;inset:0 0 auto;min-height:100svh;width:100%;margin:0}
.is-scroll-driven .home-hero{height:100svh;opacity:1;transform:none;pointer-events:none}
.is-scroll-driven .capabilities{opacity:1;transform:none;clip-path:polygon(var(--wipe-top,100%) 0,100% 0,100% 100%,var(--wipe-bottom,100%) 100%);padding:clamp(3rem,8vh,7rem) 0 3rem;pointer-events:none}
.hero-scroll[data-stage=capabilities] .capabilities{pointer-events:auto}
.is-scroll-driven .home-hero .hero-copy,.is-scroll-driven .home-hero .hero-portrait{opacity:1;transform:none}
@media(max-width:900px){.is-scroll-driven .home-hero{height:auto}.is-scroll-driven .capabilities{padding-top:3rem}}
@media(prefers-reduced-motion:reduce){.is-scroll-driven .capabilities{clip-path:none;opacity:var(--reveal,0)}.is-scroll-driven .home-hero{opacity:var(--intro-opacity,1)}}

/* Shared editorial spacing, identical on all routes and screen sizes. */
:root{--section-gap:80px;--after-hero-gap:100px}
.selected-work,.art-projects{padding-top:var(--after-hero-gap)}
.selected-work{padding-bottom:80px}
.selected-work>.case-preview{margin-bottom:0}
.case-studies-main .hero{margin-bottom:var(--after-hero-gap)}
.section-heading,.case-preview .section-heading{margin-bottom:80px}
.project{margin-bottom:80px}
.fuel-composition{margin-bottom:0}
.case-preview{padding-top:0}
.case-block{margin-bottom:80px}
.case-block:last-child{margin-bottom:0}
.contact-background{top:auto;bottom:-.018em;transform:none}

/* Picture wrappers keep the existing editorial composition. */
.responsive-image{display:contents}
/* Original card images retain the intentional Figma fill positioning. */
.case-card img[src="./assets/images/card-abm.webp"]{position:absolute;width:180.70%;height:auto;max-width:none;left:-51.88%;top:28.54%;object-fit:contain}
.case-card img[src="./assets/images/card-xb.webp"]{position:absolute;width:139.26%;height:auto;max-width:none;left:-19.44%;top:18.80%;object-fit:contain}
.case-card img[src="./assets/images/card-plane.webp"]{position:absolute;width:100%;height:100%;max-width:none;left:0;top:0;object-fit:cover}

/* One viewport-sized backdrop: no tiled edges or section-by-section restarts. */
body{isolation:isolate}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.1;background-image:image-set(url('../images/topographic-1920.avif') type('image/avif'),url('../images/topographic-1920.webp') type('image/webp'));background-position:center;background-size:cover;background-repeat:no-repeat}
.hero-scroll,.interior-hero{background:transparent}
@media(max-width:900px){body::before{background-image:image-set(url('../images/topographic-768.avif') type('image/avif'),url('../images/topographic-768.webp') type('image/webp'))}}
.client-logos img{width:9%;height:56px;max-width:none;object-fit:contain}
@media(max-width:900px){.client-logos img{width:18%;height:38px}}
@media(max-width:540px){.client-logos img{width:23%;height:30px}}

/* Navigation and client logos are shared above both wipe layers. */
.hero-canvas>.hero-shared-logos{position:absolute;left:6.25%;bottom:9%;width:87.5%;margin:0;z-index:4}
.is-scroll-driven .capabilities{display:flex;align-items:center;justify-content:center;padding:clamp(96px,10vh,130px) 0}
.hero-scroll[data-stage=capabilities] .primary-nav a[aria-current=page]{color:#fff}
.hero-scroll[data-stage=capabilities] .primary-nav a[aria-current=page]::after{background:#fff}
@media(max-width:900px){
.hero-canvas>.hero-shared-logos{left:1.5rem;width:calc(100% - 3rem);bottom:2rem}
.is-scroll-driven .capabilities{padding:6rem 0}
}

/* Persistent navigation on every route; logos belong to the hero viewport. */
.site-header{position:fixed;top:0;left:0;right:0;width:100%;max-width:none;height:88px;z-index:50;background:transparent;border-radius:0;padding:0;box-sizing:border-box;border-bottom:1px solid transparent;transition:background-color 320ms ease,border-color 320ms ease}
.nav-inner{position:relative;width:88%;max-width:1685px;height:100%;margin:0 auto;padding:0 .75rem;display:flex;align-items:center;box-sizing:border-box}
.site-header.has-background{background:#0b1116;border-bottom-color:rgba(255,255,255,.10)}
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
 .site-header.has-background{background:rgba(11,17,22,.90);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
html{scroll-padding-top:104px}
.hero-canvas>.hero-shared-logos{left:calc(max(6%,(100% - 1685px)/2) + .75rem);width:calc(min(88%,1685px) - 1.5rem);top:calc(100svh - var(--logos-height,56px) - 64px);bottom:auto}
@media(max-width:900px){
 .site-header{padding:0}
 .nav-inner{width:calc(100% - 3rem);padding:0 .5rem;justify-content:space-between}
 .primary-nav{top:100%;background:#0b1116;border:0;border-bottom:1px solid rgba(255,255,255,.10);box-shadow:none}
 .hero-canvas>.hero-shared-logos{left:2rem;width:calc(100% - 4rem);top:calc(100svh - var(--logos-height,76px) - 60px);bottom:auto}
}

/* Case-study section links share the hero copy's content boundary. */
@media(min-width:901px){.case-studies-main .section-nav{left:auto;right:8.55%;width:82.9%;max-width:1592px}}
@media(min-width:1921px){.case-studies-main .section-nav{right:calc((100% - 1592px)/2)}}
@media(min-width:541px) and (max-width:900px){.case-studies-main .section-nav{justify-content:flex-end}}

/* Figma's Challenge-to-Response connector, painted as a CSS gradient. */
.insurance-details{position:relative;--connector-gap:clamp(3rem,15.58vw,18.7rem);gap:var(--connector-gap)}
.insurance-details::before{content:'';position:absolute;left:calc((100% - var(--connector-gap))/2);top:50%;width:var(--connector-gap);height:2px;background:linear-gradient(90deg,rgba(63,152,109,0),var(--green));pointer-events:none}
@media(max-width:900px){
 .insurance-details{--connector-gap:3rem;row-gap:1.5rem}
 .insurance-details::before{position:static;grid-row:2;width:100%;align-self:center}
 .insurance-details>div:first-child{grid-row:1}
 .insurance-details>.response{grid-row:3}
}

/* Keep the ABM motion banner in its original vertical composition. */
.abm-video{position:relative;width:100%;aspect-ratio:159/600}
.abm-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Equal process-label rhythm and accessible image navigation. */
.plane-tabs{gap:clamp(1rem,2vw,2rem)}
.plane-tabs button{display:flex;flex-direction:column;gap:.4rem;justify-content:flex-start;padding:.75rem .4rem 1rem}
.plane-tab-number{display:block}
.plane-arrows{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:clamp(.75rem,2vw,2rem);pointer-events:none}
.plane-arrows button{pointer-events:auto;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(11,17,22,.85);color:#fff;font-size:1.75rem;line-height:1;transition:background-color 260ms}
.plane-arrows button:hover{background:var(--green)}
.plane-arrows button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
@media(max-width:540px){.plane-tabs{gap:0}.plane-tabs button{flex-direction:row;gap:.75rem;align-items:baseline;padding:.85rem .4rem}}

/* Every process image uses the same source ratio; copy cannot stretch the canvas. */
.plane-image-panels{aspect-ratio:1600/1067;align-self:start}
.plane-image-panels>figure,.plane-image-panels picture{width:100%;height:100%}
.plane-image-panels picture{display:block}
.plane-image-panels picture img{object-fit:contain}
.plane-tabs{gap:.75rem;flex-wrap:wrap}
.plane-tabs button{flex:0 0 auto;flex-direction:row;gap:.25em;white-space:nowrap;padding:.65rem 0 .75rem}
.plane-tabs button>span{white-space:nowrap}
.plane-arrows button{background:transparent;border:0;border-radius:0}
.plane-arrows button:hover{background:transparent;opacity:.7}
.plane-arrows button img{width:auto;height:auto;object-fit:contain}
.plane-arrows button:first-child img{transform:rotate(180deg)}
@media(max-width:1200px){.plane-tabs{flex-direction:column;align-items:stretch;gap:0}}

/* Slim Figma chevrons, with a generous transparent hit area. */
.plane-chevron{display:block;width:14px;height:32px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%,0 94%,84% 50%,0 6%)}
.plane-arrows button:first-child .plane-chevron{transform:rotate(180deg)}

/* Stable process panels reserve the tallest state without changing slide height. */
.plane-panels{display:grid;min-width:0}
.plane-panels>[role=tabpanel]{grid-area:1/1;display:block;min-width:0}
.plane-panels>[role=tabpanel][hidden]{display:block!important;visibility:hidden;pointer-events:none}
.plane-information{justify-content:flex-start;gap:1rem}

.plane-tabs{margin-top:auto;gap:1.25rem;flex-wrap:nowrap}
.plane-tabs button{padding:.65rem 0 .75rem}
@media(min-width:901px){
 .plane-information{padding:clamp(1.25rem,2vw,2.4rem) 5% clamp(1.25rem,2vw,2.4rem) 4%}

 .plane-information h2{font-size:clamp(1.25rem,1.875vw,2.25rem);margin:.25rem 0 .5rem}
 .plane-information [role=tabpanel]>p:last-child{font-size:clamp(.875rem,.9375vw,1.125rem)}
 .plane-tabs{flex-direction:row;justify-content:space-between;align-items:stretch;gap:clamp(.75rem,1.1vw,1.25rem)}
 .plane-tabs button{font-size:clamp(.7rem,.875vw,1.05rem)}
}
@media(max-width:900px){.plane-tabs{flex-direction:column;gap:0}.plane-information{gap:1.5rem}}
@media(min-width:901px) and (max-width:1100px){
 .plane-information{padding:1rem 5% 1rem 4%;gap:.75rem}

}

/* The section label is independent of slide copy and retains the shared scale. */
.plane-section-label{flex:none}
.plane-section-label .case-number{margin:0;line-height:.9}
.plane-information{min-height:39.5657vw;gap:1.25rem}
.plane-information h2{margin:0 0 .75rem}
.case-block.plane-carousel:last-child{margin-bottom:var(--section-gap)}
@media(min-width:901px){.plane-section-label .case-number{font-size:clamp(8rem,20.8333vw,25rem)}}
@media(max-width:900px){.plane-information{min-height:0}}
/* A shared desktop grid row keeps photograph and gradient edges flush. */
@media(min-width:901px){
 .plane-image-panels{align-self:stretch;aspect-ratio:auto;min-height:39.5657vw}
 .plane-image-panels picture img{object-fit:cover;object-position:50% 50%}
}
/* Inset labels from the rollover surface without adding button height. */
.plane-tabs button{padding-left:.5rem;padding-right:.5rem}

/* Art Direction's secondary nav shares the hero's content bounds. */
@media(min-width:901px){.art-hero .section-nav{left:6%;right:6.25%;width:auto;max-width:none}}
@media(min-width:1921px){.art-hero .section-nav{left:calc((100% - 1690px)/2);right:calc((100% - 1592px)/2)}}

/* Responsive replacements retain their original artwork compositions. */
picture.fuel-mark,picture.fuel-type,picture.hk-logo,picture.rock-poster,picture.rock-post{display:block}
.replacement-image{display:block;width:100%;height:auto}

/* Quiet motion: short entrances, manual transitions, and editorial hover detail. */
.motion-reveal{opacity:0;transform:translateY(18px);transition:opacity 700ms cubic-bezier(.22,.68,.36,1) var(--reveal-delay,0ms),transform 700ms cubic-bezier(.22,.68,.36,1) var(--reveal-delay,0ms)}
.motion-reveal.motion-visible{opacity:1;transform:translateY(0)}
.primary-nav a{transition:color 280ms ease-out}
.primary-nav a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 320ms ease-out}
.primary-nav a[aria-current=page]::after{transform:scaleX(1)}
.case-card{isolation:isolate;overflow:hidden}
.case-card img{transition:transform 650ms cubic-bezier(.22,.68,.36,1)}
.case-card:focus-within img{transform:scale(1.02)}
.rock-poster .replacement-image,.rock-post .replacement-image,.amazed-album{transition:transform 650ms cubic-bezier(.22,.68,.36,1)}
@media(hover:hover) and (pointer:fine){
 .case-card:hover img{transform:scale(1.02)}
 .rock-poster:hover .replacement-image,.rock-post:hover .replacement-image,.amazed-album:hover{transform:scale(1.015)}
}
@media(max-width:900px){.motion-reveal{transform:translateY(12px);transition-duration:520ms;transition-delay:0ms}}
@media(prefers-reduced-motion:reduce){.motion-reveal{opacity:1;transform:none}.case-card img,.rock-poster .replacement-image,.rock-post .replacement-image,.amazed-album{transform:none!important;filter:none!important}}

/* Mobile rhythm and a single-line client rail, confined to the intro. */
.logo-marquee-track,.logo-marquee-group{display:contents}
.logo-marquee-copy,.logo-marquee-pause{display:none}
.selected-work{padding-bottom:40px}
.case-block.plane-carousel:last-child{margin-bottom:40px}
.art-projects>.project:last-child{margin-bottom:40px}
.contact-section{min-height:clamp(22rem,32vw,38rem)}
@media(max-width:900px){
 :root{--section-gap:40px;--after-hero-gap:50px}
 .project,.case-block{margin-bottom:40px}
 .section-heading,.case-preview .section-heading{margin-bottom:40px}
 .contact-section{min-height:280px}
 .site-header .mobile-brand{visibility:hidden;pointer-events:none}
 .site-header.past-hero .mobile-brand{visibility:visible;pointer-events:auto}
 .home-hero .hero-name{top:auto;bottom:150px;z-index:0}
 .home-hero .hero-copy{z-index:1}
 .hero-canvas>.hero-shared-logos{height:70px;top:calc(100svh - 130px);overflow:hidden;display:block}
 .hero-scroll:not([data-stage=intro]) .hero-shared-logos{visibility:hidden;pointer-events:none}
 .logo-marquee-track{display:flex;width:max-content;animation:client-marquee 44s linear infinite}
 .logo-marquee-group{display:flex;align-items:center;gap:36px;padding-right:36px;flex-shrink:0;height:38px}
 .logo-marquee-copy{display:flex}
 .client-logos .logo-marquee-group img{width:110px;max-width:none;height:38px;max-height:38px;flex-shrink:0}
 .logo-marquee-pause{display:block;margin:8px 0 0 auto;padding:2px 6px;border:0;background:transparent;color:#ffffffa6;font:inherit;font-size:11px;cursor:pointer}
 .hero-shared-logos:is(:hover,:focus-within,.is-paused) .logo-marquee-track{animation-play-state:paused}
 .iec-development img{width:85%;max-width:280px}
}
@media(max-width:540px){.iec-development img{width:min(75vw,280px);max-width:100%}}
@keyframes client-marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
 .logo-marquee-track{animation:none}
 .logo-marquee-copy,.logo-marquee-pause{display:none}
 .hero-canvas>.hero-shared-logos{overflow-x:auto}
}

/* Mobile intro reads name, role, then statement beneath the portrait. */
@media(max-width:900px){
 .site-header .mobile-brand{opacity:0;transition:opacity 520ms ease-out,visibility 520ms;visibility:hidden}
 .site-header.past-hero .mobile-brand{opacity:1;visibility:visible;transition-delay:0s}
 .home-hero{padding-bottom:160px}
 .home-hero>.responsive-image{display:contents}
 .home-hero .hero-portrait{order:0}
 .home-hero .hero-name{position:relative;order:1;top:auto;bottom:auto;left:auto;margin-top:16px;flex-shrink:0}
 .home-hero .hero-copy{order:2;margin-top:20px}
 .hero-canvas>.hero-shared-logos{top:auto;bottom:60px}
 .event-layout>.video-slot{width:100%;max-width:none}
 .word-cloud{width:127.5%;height:150%}
}

/* Mobile XB imagery reads as three separate, uncropped portfolio pieces. */
@media(max-width:900px){
 .xb-composition{display:flex;flex-direction:column;gap:24px;aspect-ratio:auto}
 .xb-composition :is(.xb-figma,.xb-brochure,.xb-website){position:static;width:100%;height:auto;max-width:none;object-fit:contain}
 .abm-layout>.abm-video{width:100%;max-width:230px;aspect-ratio:230/854}
}

/* Mobile Art Direction follows the approved reading order and Hey Kid stack. */
@media(max-width:900px){
 .art-hero{height:auto;min-height:0;padding-top:112px;justify-content:flex-start}
 .art-hero .hero-name{position:relative;top:auto;left:auto;margin:0;width:100%;flex-shrink:0}
 .art-hero .hero-copy{position:relative;top:auto;left:auto;right:auto;width:100%;margin:32px 0;text-align:left}
 .art-hero .section-nav{margin-top:0}
 .hk-hero{display:flex;flex-direction:column;aspect-ratio:auto;background:#fff}
 .hk-hero .hk-logo{position:static;width:100%;padding:20px 20px 23px;margin:0;background:#fff}
 .hk-hero .hk-logo img{width:100%;height:auto;object-fit:contain}
 .hk-hero .hk-photo{width:100%;height:auto;aspect-ratio:407/313;object-fit:cover;object-position:70% center}
}

/* Stage footage is 1980 × 720: match the source to avoid player letterboxing. */
.event-right .video-slot:last-child{aspect-ratio:11/4;border:0}
/* Leave room for the full oversized heading while retaining bottom alignment. */
@media(min-width:901px){
 .contact-section{min-height:clamp(26rem,40vw,48rem)}
 .contact-background{bottom:0}
}

/* A single quiet entrance; retain the hero type's designed translucency. */
@keyframes hero-title-entrance{from{opacity:0}to{opacity:.3}}
@media(prefers-reduced-motion:no-preference){
 .hero h1.hero-name{animation:hero-title-entrance 750ms cubic-bezier(.22,.68,.36,1) both}
}

/* Contact content has one shared source: /components/contact.html. */
body.contact-open{overflow:hidden}
.contact-dialog{position:fixed;inset:0;margin:auto;width:min(800px,calc(100% - 32px));max-width:none;max-height:calc(100svh - 32px);aspect-ratio:16/9;padding:0;border:0;color:#fff;overflow:hidden}
.contact-dialog::backdrop{background:rgba(0,0,0,.6);animation:contact-backdrop-in 520ms ease-out}
.contact-dialog-background{position:absolute;left:6%;top:10%;font-family:Anton,Impact,sans-serif;font-size:clamp(100px,25vw,200px);line-height:.9;text-transform:uppercase;opacity:.3;pointer-events:none}
.contact-dialog-portrait{position:absolute;right:-1.125%;top:0;width:36.75%;height:auto;pointer-events:none}
.contact-dialog-content{position:absolute;left:6%;right:6%;top:33.8%;display:flex;flex-direction:column;align-items:flex-start;z-index:1}
.contact-dialog-content h2{font-family:Anton,Impact,sans-serif;font-size:clamp(32px,8vw,64px);line-height:.9;text-transform:uppercase;margin-bottom:12px}
.contact-dialog-content a{font-family:'Archivo Black',Arial,sans-serif;font-size:clamp(18px,4.5vw,36px);line-height:1;overflow-wrap:anywhere;max-width:100%}
.contact-dialog-close{position:absolute;right:16px;top:5px;width:48px;height:48px;border:0;background:transparent;color:#fff;cursor:pointer;z-index:2}
.contact-dialog-close span::before,.contact-dialog-close span::after{content:'';position:absolute;top:50%;left:8px;width:32px;height:1px;background:currentColor;transform:rotate(45deg)}
.contact-dialog-close span::after{transform:rotate(-45deg)}
@keyframes contact-backdrop-in{from{opacity:0}to{opacity:1}}
@media(max-width:540px){
 .contact-dialog{aspect-ratio:auto;min-height:400px}
 .contact-dialog-portrait{width:56%;right:0}
 .contact-dialog-background{top:auto;bottom:16px;font-size:25vw}
 .contact-dialog-content{top:auto;bottom:60px}
 .contact-dialog-content h2{font-size:clamp(32px,8vw,44px)}
 .contact-dialog-content a{font-size:clamp(16px,4vw,22px);line-height:1.25}
}

.contact-dialog{border-radius:16px}
.contact-dialog-content h2{background:none;color:var(--cyan);-webkit-text-fill-color:var(--cyan)}

.case-card .watch-case-button{background:var(--surface-gradient);color:#fff;border-color:transparent;transition:color 320ms ease-out,border-color 320ms ease-out}
.case-card .watch-case-button:hover,.case-card .watch-case-button:focus-visible{background:#fff;color:var(--green);border-color:var(--green)}

/* All case-study card actions share a flat fill, with no edge treatment. */
.case-card .outline-button{background:var(--surface-gradient);color:#fff;border:0;outline:0;box-shadow:none;transition:color 320ms ease-out}
.case-card .outline-button:hover,.case-card .outline-button:focus-visible{background:#fff;color:var(--green);border:0;outline:0;box-shadow:none}

/* Inset border appears on interaction without changing button dimensions. */
.case-card .outline-button:hover,.case-card .outline-button:focus-visible{background:#fff;color:var(--green);box-shadow:inset 0 0 0 2px var(--green)}