/* ================================================================
   Focus Lab — DEPT-style prototype
   Tokens measured on dept.global/en-nl (15 Oct 2026, 1440 & 390 vw)
   ================================================================ */
:root{
  /* PRISM palette (brand guidelines V1) */
  --navy:#132032; --violet:#5852F4; --lime:#D4F619; --mist:#E8E9F6; --canvas:#F7F7F4; --white:#FFFFFF;
  --black:var(--navy); --accent:var(--violet); --body:#61656E; --lead:#3F434A; --line:rgba(19,32,50,.16);
  --gutter:21px;
  --ease-pill:cubic-bezier(.65,0,.2,1);
  --nav-h:clamp(80px, calc(1.79vw + 54px), 92px);
  --nav-fs:clamp(16px, calc(.714vw + 5.7px), 20px);
  /* fluid type: linear between 390px and 1440px viewport */
  --fs-xl: clamp(40px, calc(6.369vw + 20.29px), 112px);   /* 45.13 → 112 */
  --fs-lg: clamp(44px, calc(4.12vw + 32.67px), 92px);     /* 48.74 → 92 */
  --fs-md: clamp(30px, calc(1.502vw + 26.37px), 48px);    /* 32.23 → 48 */
  --fs-statement: clamp(30px, calc(2.629vw + 22.15px), 60px); /* 32.4 → 60 */
  --fs-body: clamp(19px, calc(.375vw + 18.6px), 24px);    /* 20.06 → 24 */
  --fs-fact: clamp(24px, calc(.76vw + 21px), 32px);
  --ease-out: cubic-bezier(.28,.44,.49,1);
  --ease-ui: cubic-bezier(.4,0,.2,1);
}
@media (max-width:47.999rem){ :root{ --nav-h:92px; } }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
html.no-scroll{overflow:hidden}
body{margin:0;background:var(--canvas);color:var(--navy);font-family:"Inter","Inter Variable",system-ui,sans-serif;font-size:16px;line-height:1.25;letter-spacing:-.05em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
h1,h2,h3,p{margin:0}
.acc{color:var(--accent)}
em{font-style:normal;color:var(--accent)}

/* ---------- type scale ---------- */
.h-xl{font-size:var(--fs-xl);line-height:.86;font-weight:900;letter-spacing:-.03em;text-transform:uppercase}
.h-lg{font-size:var(--fs-lg);line-height:.9;font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
.h-md{font-size:var(--fs-md);line-height:1;font-weight:800;letter-spacing:-.025em;text-transform:uppercase}
.t-statement{font-size:var(--fs-statement);line-height:1.05;font-weight:400;letter-spacing:-.04em}
.t-body{font-size:var(--fs-body);line-height:1.33;font-weight:200;letter-spacing:-.048em}
.t-fact{font-size:var(--fs-fact);line-height:1.05;font-weight:300;letter-spacing:-.04em}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border:1px solid var(--navy);border-radius:999px;font-size:16px;line-height:20px;color:var(--navy);letter-spacing:-.05em;text-transform:uppercase;white-space:nowrap;transition:background-color .3s var(--ease-ui),color .3s var(--ease-ui)}
.pill:hover{background:var(--navy);color:var(--white)}
.pill--solid{background:var(--navy);color:var(--white)}
.pill--solid:hover{background:var(--accent);border-color:var(--accent)}
.pill--white{background:var(--white);color:var(--navy);border-color:var(--white)}
.pill--bold{font-weight:600}

.label-line{font-size:12px;color:var(--body);letter-spacing:-.02em;padding-bottom:12px;border-bottom:1px solid var(--line)}

/* =================== NAV =================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);color:var(--white);
  /* metalab's flat glass under blur(20px), no border, tint or shadow; a little darker than its rgba(186,186,186,.6) so white text reads on light pages */
  background:rgba(128,128,128,.6);border:0;box-shadow:none;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  transition:transform .35s cubic-bezier(.28,.44,.49,1),visibility 0s}
/* hidden while scrolling down; visibility also spares the browser the blur while it is off screen */
.nav.is-invisible{transform:translateY(-100%);visibility:hidden;transition:transform .35s cubic-bezier(.28,.44,.49,1),visibility 0s .35s}
/* over the dark Prism hero the glass turns smoky and the content goes white */
/* over the hero: clear, neutral glass, no colour tint, so the visual shows through */
/* at the top of the page the full-width header wears the same smoky glass as the scrolled pill */
.nav .nav__contact{background:var(--lime);color:var(--navy);border-color:var(--lime)}
.nav__items{display:flex;gap:clamp(40px, 2.78vw, 52px);list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__link{display:flex;align-items:center;gap:8px;font-size:var(--nav-fs);line-height:1.25;letter-spacing:-.05em;transition:color .3s var(--ease-ui)}
.nav__link:hover{color:var(--lime)}
.chev{width:10px;height:10px;transition:scale .3s linear(0 0%,.0018 .58%,.0069 1.16%,.0151 1.74%,.0277 2.4%,.062 3.7%,.1115 5.15%,.2211 7.77%,.4778 13.21%,.5912 15.75%,.6987 18.44%,.7862 20.98%,.861 23.59%,.8926 24.8967%,.9205 26.2033%,.945 27.51%,.9671 28.89%,.9868 30.34%,1.003 31.79%,1.0224 34.11%,1.0358 36.58%,1.0436 39.27%,1.046 42.31%,1.0446 44.71%,1.0406 47.47%,1.0118 61.84%,1.0027 69.53%,.9981 80.49%,.9991 99.94%)}
[aria-expanded="true"] .chev{scale:1 -1}
/* logo on the left, the links in the middle, search and contact on the right */
.nav__items{grid-column:2;grid-row:1}
.nav__right{grid-column:3;grid-row:1}
.nav__logo{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;color:var(--navy)}
.nav__word{width:clamp(86px, 5.97vw, 110px);height:auto}
.mark{width:76px;height:76px}
.wordmark{font-weight:900;font-size:24px;letter-spacing:-.05em;line-height:1}
.wordmark sup{font-size:7px;font-weight:600;vertical-align:top}
.nav__right{display:flex;justify-content:flex-end;align-items:center;gap:14px}
/* search: the circle opens to the left into a field on hover or focus, as on dept.global (42 to 342px, 1s spring) */
.nav__search{--sb:clamp(38px, 2.64vw, 46px);position:relative;width:var(--sb);height:var(--sb)}
.nav__search-form{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:flex-end;width:var(--sb);height:var(--sb);border:1px solid currentColor;border-radius:999px;overflow:hidden;transition:width 1s linear(0 0%,.0014 .51%,.0053 1.02%,.0126 1.6%,.0227 2.18%,.0517 3.41%,.094 4.79%,.1865 7.26%,.4182 12.77%,.5246 15.46%,.6249 18.29%,.7112 21.12%,.7831 23.95%,.8146 25.4%,.844 26.925%,.8699 28.45%,.8935 30.045%,.9139 31.64%,.932 33.31%,.9473 34.98%,.9601 36.65%,.9714 38.47%,.9808 40.35%,.9948 44.49%,1.0031 49.43%,1.0057 53.35%,1.0063 58.14%,1.0014 80.78%,1.0001 99.94%)}
.nav__search:hover .nav__search-form,.nav__search-form:focus-within{width:min(342px, 24vw)}
.nav__search-input{flex:1;min-width:0;width:100%;height:100%;padding:0 0 0 14px;border:0;background:none;outline:0;color:inherit;font:inherit;font-size:16px;letter-spacing:-.05em;text-transform:uppercase}
.nav__search-input::placeholder{color:currentColor;opacity:.6}
.nav__search-btn{flex:none;width:calc(var(--sb) - 2px);height:100%;display:grid;place-items:center}
.nav__search-btn svg{width:46%;height:46%;transition:scale .3s linear(0 0%,.0018 .58%,.0069 1.16%,.0151 1.74%,.0277 2.4%,.062 3.7%,.1115 5.15%,.2211 7.77%,.4778 13.21%,.5912 15.75%,.6987 18.44%,.7862 20.98%,.861 23.59%,.8926 24.8967%,.9205 26.2033%,.945 27.51%,.9671 28.89%,.9868 30.34%,1.003 31.79%,1.0224 34.11%,1.0358 36.58%,1.0436 39.27%,1.046 42.31%,1.0446 44.71%,1.0406 47.47%,1.0118 61.84%,1.0027 69.53%,.9981 80.49%,.9991 99.94%)}
.nav__search:hover .nav__search-btn svg{scale:1.15}
.nav__time{transition:opacity .3s var(--ease-ui)}
.nav__right:has(.nav__search:hover, .nav__search-form:focus-within) .nav__time{opacity:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* "what we do": a white popover with four columns, measured from dept.global at 1440px */
.dd{position:fixed;z-index:60;display:flex;gap:44px;max-width:calc(100vw - 10px);padding:32px;overflow:auto;background:#fff;color:var(--navy);border:1px solid #767676;border-radius:8px;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease}
.dd.is-open{opacity:1;transform:none}
.dd__col{display:flex;flex-direction:column;gap:24px;max-width:200px;padding-right:32px;border-right:1px solid #767676}
.dd__col:last-child{padding-right:0;border-right:0}
.dd__title,.dd a{font-size:14px;line-height:19.6px;letter-spacing:-.8px;text-transform:uppercase}
.dd__title{color:#767676}
.dd__links{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.dd__more{margin-top:auto}
.nav__contact{height:clamp(40px, 2.78vw, 48px);padding:0 clamp(22px, 1.53vw, 28px);font-size:calc(var(--nav-fs) * .88)}

/* the AMS clock sits next to the search button */
.nav__time{display:block;font-size:calc(var(--nav-fs) * .8);letter-spacing:-.02em;opacity:.85;margin-right:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:47.999rem){.nav__time{font-size:13px;margin-right:4px}}

@media (min-width:48rem) and (max-width:61.999rem){
  .nav__items{gap:24px}
  .nav__right{gap:10px}
}
@media (max-width:47.999rem){
  /* links stay visible on narrow screens: they move to a second row under the logo */
  .nav{grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;row-gap:12px;align-content:start;padding:14px var(--gutter) 0}
  .nav__logo{grid-row:1}
  .nav__right{grid-row:1}
  .nav__items{grid-row:2;grid-column:1 / -1;justify-content:center;gap:22px;padding:0;overflow-x:auto;scrollbar-width:none}
  .nav__items::-webkit-scrollbar{display:none}
  .nav__link{font-size:15px;white-space:nowrap}
  .nav__contact{display:none}
  .nav__search{--sb:34px}
  .nav__search:hover .nav__search-form,.nav__search-form:focus-within{width:calc(100vw - 2 * var(--gutter))}
  /* the open field covers the logo, so the logo steps aside */
  .nav__logo{transition:opacity .3s var(--ease-ui)}
  .nav:has(.nav__search-form:focus-within) .nav__logo{opacity:0}
  .dd{left:16px;right:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding:24px}
  .dd__col,.dd__col:last-child{max-width:none;padding-right:0;border-right:0}
  .nav__word{width:70px}
  .nav__right{padding-top:2px}
}

/* =================== HERO =================== */
.b-hero{position:relative;padding:100px var(--gutter) 0;min-height:1499px}
.hero__title{text-align:center;margin-top:72px}
.hero__cta{display:flex;justify-content:center;margin-top:196px}
.hero__cta .pill{height:56px;width:240px}
.hero__video{position:relative;margin-top:60px;aspect-ratio:16/9;border-radius:0;overflow:hidden;background:#05060d;transform-origin:50% 0;will-change:transform}
.hero__video-bar{position:absolute;left:16px;top:14px;color:#fff;font-size:12px;font-weight:600;display:flex;gap:8px;align-items:center}
.hero__video-bar .dot{width:22px;height:22px;border-radius:50%;background:#fff}
.reel{position:absolute;inset:0;overflow:hidden}
.reel__orb{position:absolute;left:50%;top:18%;width:34%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff8a3a,#b23a07 55%,#3a0d02 75%,transparent 76%);filter:saturate(1.1);animation:orb 18s linear infinite}
.reel__cards{position:absolute;left:0;right:0;top:38%;display:flex;justify-content:center;gap:2.2%}
.reel__cards i{display:block;width:5.5%;aspect-ratio:3/4;border-radius:3px;background:linear-gradient(160deg,#e9e3dc,#7a6c64);animation:float 6s ease-in-out infinite}
.reel__cards i:nth-child(2n){background:linear-gradient(160deg,#5d4bff,#1d1660);animation-delay:-2s}
.reel__cards i:nth-child(3n){background:linear-gradient(160deg,#ff6a2a,#30120a);animation-delay:-4s;width:7.5%}
.reel__sub{position:absolute;bottom:9%;left:0;right:0;text-align:center;color:#fff;font-size:clamp(10px,1.4vw,20px);letter-spacing:-.03em}
@keyframes orb{to{rotate:360deg}}
@keyframes float{50%{translate:0 -10%}}
@media (max-width:47.999rem){
  .b-hero{min-height:0;padding:72px var(--gutter) 8px}
  .hero__title{margin-top:0;padding-top:0}
  .hero__cta{margin-top:88px}
  .hero__cta .pill{height:44px;width:168px}
  .hero__video{margin-top:20px}
}

/* =================== STATEMENT =================== */
.b-statement{padding:40px var(--gutter) 200px}
.b-statement .t-statement{max-width:689px}
@media (max-width:47.999rem){.b-statement{padding:20px var(--gutter) 136px}}

/* =================== ASSETS + COPY =================== */
.b-assets{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);padding:160px var(--gutter) 40px;align-items:center}
.assets__media{grid-column:1 / span 5;aspect-ratio:.8;overflow:hidden}
.assets__copy{grid-column:7 / span 5;display:flex;flex-direction:column;gap:0;align-items:flex-start}
.assets__copy .h-md{font-weight:700;margin-bottom:28px}
.assets__copy .t-body{margin-bottom:16px}
.b-assets--tall .assets__media{aspect-ratio:.72}
@media (max-width:47.999rem){
  .b-assets{display:flex;flex-direction:column;align-items:stretch;gap:78px;padding:40px var(--gutter) 40px}
  .assets__copy .h-md{margin-bottom:22px}
}

/* =================== TALKING POINTS =================== */
.b-talking{padding:40px var(--gutter)}
.b-talking>.h-xl{line-height:.86}
.talking__intro{max-width:768px;margin-top:32px;font-size:clamp(24px,calc(.375vw + 22.6px),28px);line-height:31.92px;font-weight:400;letter-spacing:-.05em}
/* rows measured on dept.global: title leaves upward, the coloured line rises in, the image rises again inside its own frame */
.points{--spring:linear(0 0%,.0014 .51%,.0053 1.02%,.0126 1.6%,.0227 2.18%,.0517 3.41%,.094 4.79%,.1865 7.26%,.4182 12.77%,.5246 15.46%,.6249 18.29%,.7112 21.12%,.7831 23.95%,.8146 25.4%,.844 26.925%,.8699 28.45%,.8935 30.045%,.9139 31.64%,.932 33.31%,.9473 34.98%,.9601 36.65%,.9714 38.47%,.9808 40.35%,.9948 44.49%,1.0031 49.43%,1.0057 53.35%,1.0063 58.14%,1.0014 80.78%,1.0001 99.94%);list-style:none;margin:64px 0 0;padding:0;border-top:1px solid rgba(19,32,50,.5)}
.points li{border-bottom:1px solid rgba(19,32,50,.5)}
/* services fall into two groups: projects that build, plans that grow */
.points__group{display:flex;align-items:baseline;gap:16px;padding:48px 0 12px;scroll-margin-top:var(--nav-h)}
.points__group b{font-size:12px;font-weight:400;letter-spacing:-.02em;text-transform:uppercase;color:var(--navy)}
.points__group span{font-size:16px;letter-spacing:-.02em;color:var(--body)}
.points>.points__group:first-child{padding-top:24px}
.points li>a{display:grid;grid-template-columns:58px minmax(0,976px) 49px minmax(0,1fr);align-items:center;height:146px;overflow:clip}
.num{font-size:24px;line-height:32px;font-weight:900;letter-spacing:-.04em;color:var(--body)}
.pcell{display:grid;align-items:center;min-width:0}
.pt,.phov{grid-area:1 / 1;transition:transform .3s var(--spring)}
.pt{font-size:32px;line-height:40px;font-weight:400;letter-spacing:-.05em;color:var(--body)}
.phov{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:80px;transform:translateY(180px)}
.pd{min-width:0;font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.05em;color:var(--accent)}
.thumb{flex:0 0 142px;width:142px;height:80px;overflow:clip}
.thumb img{transform:translateY(100%);transition:transform .45s var(--spring)}
.arr{width:17px;height:16px;margin-left:32px;opacity:0;transform:translateX(-17px);color:var(--navy);transition:transform .45s var(--spring),opacity .45s var(--spring)}
@media (hover:hover) and (pointer:fine){
  .points a:hover .pt,.points a:focus-visible .pt{transform:translateY(-180px)}
  .points a:hover .phov,.points a:focus-visible .phov{transform:none}
  .points a:hover .thumb img,.points a:focus-visible .thumb img{transform:none}
  .points a:hover .arr,.points a:focus-visible .arr{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.pt,.phov,.thumb img,.arr{transition-duration:.01s}}
@media (max-width:47.999rem){
  .talking__intro{margin-top:30px}
  .points{margin-top:80px}
  .points li>a{grid-template-columns:41px minmax(0,1fr) 29px;height:auto;min-height:122px;padding:24px 0}
  .num{font-size:20px}
  .pt{font-size:24px;line-height:32px;color:var(--navy)}
  .phov{display:none}
  .arr{margin-left:12px;opacity:1;transform:none}
}

/* =================== WORK =================== */
.b-work{padding:20px var(--gutter) 148px}
.work__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.work__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:72px 20px;align-items:start}
.card{display:block}
.card__media{position:relative;overflow:hidden;aspect-ratio:1.5}
.work__grid .card:nth-child(1){grid-column:span 5}.work__grid .card:nth-child(1) .card__media{aspect-ratio:4/3}
.work__grid .card:nth-child(2){grid-column:span 4}.work__grid .card:nth-child(2) .card__media{aspect-ratio:4/5}
.work__grid .card:nth-child(3){grid-column:span 3}.work__grid .card:nth-child(3) .card__media{aspect-ratio:3/4}
.work__grid .card:nth-child(4){grid-column:span 3}.work__grid .card:nth-child(4) .card__media{aspect-ratio:3/4}
.work__grid .card:nth-child(5){grid-column:span 5}.work__grid .card:nth-child(5) .card__media{aspect-ratio:4/5}
.work__grid .card:nth-child(6){grid-column:span 4}.work__grid .card:nth-child(6) .card__media{aspect-ratio:16/9}
.card__hover{position:absolute;inset:0;background:var(--bg);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:8%;text-align:center;opacity:0;scale:1.05;transition:opacity .15s var(--ease-ui),scale .3s var(--ease-ui)}
.card__hover p{font-weight:700;text-transform:uppercase;font-size:clamp(32px,calc(.89vw + 28.5px),41.3px);line-height:.85;letter-spacing:-.03em;max-width:14ch}
@media (hover:hover) and (pointer:fine){.card:hover .card__hover{opacity:1;scale:1}}
.card__meta{display:flex;justify-content:space-between;gap:12px;padding-top:12px}
.b-work{position:relative}
.card__meta b{font-size:20px;line-height:21px;font-weight:700;letter-spacing:-.04em}
.card__meta span{color:var(--body);font-size:16px;line-height:24px}
.plus{display:none;font-style:normal;width:22px;height:22px;border:1px solid var(--body);border-radius:50%;place-items:center;color:var(--body);font-size:16px;line-height:1}
.work__more{display:none}
@media (max-width:47.999rem){
  .b-work{padding-bottom:80px}
  .work__head .pill{display:none}
  .work__more{display:flex;margin-top:56px}
  .work__grid{grid-template-columns:minmax(0,1fr);row-gap:52px}
  .work__grid .card:nth-child(n){grid-column:auto}
  .card__meta{flex-direction:column;gap:4px;position:relative;padding-right:30px}
  .plus{display:grid;position:absolute;right:0;top:12px}
}

/* =================== TITLE + FACTS =================== */
.b-title{padding:108px var(--gutter) 80px}
.b-title .h-xl{margin-top:20px}
.fact{display:grid;grid-template-columns:1fr 642px;column-gap:var(--gutter);min-height:454px;padding:34px 34px 34px var(--gutter);border-top:1px solid var(--line);background:var(--white)}
.fact__copy{display:flex;flex-direction:column;align-items:flex-start;max-width:420px}
.t-fact{font-size:var(--fs-md);line-height:1;font-weight:400;color:var(--navy);letter-spacing:-.05em}
.fact__copy p{margin-top:28px;font-size:clamp(24px,calc(.375vw + 22.6px),28px);line-height:31.92px;letter-spacing:-.05em;color:var(--lead)}
.fact__copy .pill{margin-top:auto;font-weight:600}
.fact__img{aspect-ratio:1.667;overflow:hidden;align-self:start}
@media (max-width:61.999rem){.fact{grid-template-columns:1fr 46%}}
@media (max-width:47.999rem){
  .b-title{padding:70px var(--gutter) 40px}
  .fact{grid-template-columns:1fr;min-height:0;padding:34px var(--gutter)}
  .fact__copy{max-width:none}
  .fact__copy p{margin-top:20px}
  .fact__copy .pill{margin-top:54px}
  .fact__img{width:323px;max-width:92%;margin:78px auto 0}
}

/* =================== TURNTABLE (measured on dept.global: 50% slides, title flush above the image, looping) =================== */
.b-turn{padding:0;overflow:hidden;-webkit-user-select:none;user-select:none}
.turn__viewport{overflow:hidden;cursor:grab;touch-action:pan-y;-webkit-touch-callout:none}
.turn__viewport.is-dragging{cursor:grabbing}
.turn__track{display:flex;will-change:transform}
.turn__slide{flex:0 0 50%;min-width:0;display:flex;padding:clamp(48px,7vw,100px) 0}
.turn__item{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:50% 50%;will-change:scale,opacity}
.h-turn{font-size:clamp(48.7px,calc(4.88vw + 29.7px),100px);line-height:1.025;font-weight:900;letter-spacing:-.03em;text-transform:uppercase;text-align:center;white-space:nowrap}
.turn__item img{display:block;width:min(100%,64vh);aspect-ratio:1;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.turn__cap{font-size:16px;text-align:center;line-height:1.5;margin-top:10px;letter-spacing:-.02em}
.turn__dots{display:flex;align-items:center;width:min(662px,calc(100% - 42px));margin:0 auto 40px}
.turn__dots button{flex:1;height:24px;display:flex;align-items:center;cursor:pointer}
.turn__dots button::before{content:"";display:block;width:100%;height:3px;background:var(--navy);transition:height .3s var(--ease-ui),border-radius .3s var(--ease-ui)}
.turn__dots button.active::before{height:7px;border-radius:8px}
.turn__dots button:first-child:not(.active)::before{border-radius:4px 0 0 4px}
.turn__dots button:last-child:not(.active)::before{border-radius:0 4px 4px 0}
@media (max-width:47.999rem){
  .turn__slide{flex-basis:58%}
  .turn__item img{width:100%}
}

/* =================== LISTING =================== */
.b-listing{padding:40px var(--gutter) 296px}
.listing__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:59px}
.listing__head .h-lg{font-weight:900}
.listing__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px}
.ins .art{aspect-ratio:.8;height:auto}
.ins__tags{font-size:16px;line-height:20px;color:var(--body);margin:24px 0 14px;display:flex;align-items:center;gap:12px}
.ytag{background:var(--lime);color:var(--navy);font-size:14px;padding:0 6px}
.ins h3{font-size:clamp(20px,calc(.375vw + 18.6px),24px);font-weight:400;line-height:1.33;letter-spacing:-.05em;color:var(--navy)}
.listing__more{display:none}
@media (max-width:47.999rem){
  .b-listing{padding-bottom:80px}
  .listing__head{margin-bottom:33px}
  .listing__head .pill{display:none}
  .listing__more{display:flex;justify-content:center;margin-top:60px}
  .listing__grid{grid-template-columns:minmax(0,1fr);row-gap:56px}
}

/* =================== FOOTER (measured on dept.global: rule on top, ruled columns, full-width strip) =================== */
.foot{margin:clamp(40px,5vw,72px) var(--gutter) 0;padding:53px 0 24px;border-top:1px solid rgba(19,32,50,.5)}
.foot__top{display:grid;grid-template-columns:minmax(0,1fr) 204px 204px minmax(0,389px);column-gap:20px;align-items:stretch}
.foot__brand{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:16px}
.foot__logo{display:flex;flex-direction:column;gap:12px;width:100px}
.foot__logo img{display:block;width:100%;height:auto}
.foot__loc{font-size:16px;line-height:20px;text-transform:uppercase;letter-spacing:-.05em}
.foot__col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:176px;font-size:16px;line-height:36px;text-transform:uppercase;letter-spacing:-.05em;border-right:1px solid rgba(19,32,50,.5)}
.foot__col--wide{justify-content:flex-start;line-height:20px;border-right:0}
.foot__col--wide li{border-bottom:1px solid rgba(19,32,50,.5);padding:0 0 28px;margin-bottom:29px}
.foot__col--wide li:last-child{border:0;padding:0;margin:0}
.foot__soc{display:flex;gap:32px}
.foot__strip{display:grid;grid-template-columns:minmax(0,354px) minmax(0,245px) 264px minmax(0,1fr) auto;align-items:center;min-height:118px;margin:48px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);background:var(--lime);color:var(--navy);text-transform:uppercase}
.strip__lead,.strip__cta{font-family:ui-monospace,Menlo,monospace;font-size:clamp(17px,1.53vw,22px);line-height:1;font-weight:500;letter-spacing:.06em;white-space:nowrap}
.strip__meta{display:flex;gap:32px;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.02em;white-space:nowrap}
.strip__thumbs{display:block;width:264px;height:38px}
.strip__meta:nth-of-type(n){justify-self:start}
.strip__thumbs + .strip__meta{justify-self:center}
.strip__cta{display:flex;align-items:center;gap:8px;transition:gap .3s var(--ease-ui)}
.strip__cta svg{width:.75em;height:.75em}
.foot__strip:hover .strip__cta{gap:14px}
.foot__legal{display:flex;justify-content:space-between;font-size:16px;line-height:20px;padding-top:44px;color:var(--body)}
@media (max-width:74.999rem){
  .foot__top{grid-template-columns:minmax(0,1fr) 170px 170px minmax(0,300px)}
  .foot__strip{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;column-gap:24px}
  .strip__thumbs{display:none}
}
@media (max-width:61.999rem){
  .foot__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);row-gap:40px}
  .foot__brand{grid-column:1 / -1}
  .foot__strip{grid-template-columns:minmax(0,1fr) auto;row-gap:12px;padding-top:28px;padding-bottom:28px}
  .strip__meta{grid-column:1 / -1;grid-row:2;flex-wrap:wrap;gap:6px 24px}
  .strip__thumbs + .strip__meta{grid-row:3;justify-self:start}
  .strip__cta{grid-column:2;grid-row:1}
}
@media (max-width:47.999rem){
  .foot__top{display:flex;flex-direction:column;row-gap:0}
  .foot__col{order:2;min-height:0;border-right:0}
  .foot__col:first-of-type{display:none}
  .foot__col--wide{order:1;margin-bottom:29px}
  .foot__brand{order:9;align-items:center;margin-top:40px}
  .foot__legal{font-size:14px;gap:16px}
}

/* =================== ART PLACEHOLDERS (PRISM palette only, no stock images) =================== */
.art{width:100%;height:100%;position:relative;overflow:hidden}
.art--orbs{background:radial-gradient(circle at 32% 46%,#D4F619 0 16%,#a9c80f 26%,transparent 40%),radial-gradient(circle at 70% 52%,#8F8AFF 0 14%,#5852F4 28%,transparent 42%),linear-gradient(180deg,#E8E9F6,#cfd1ea 70%,#F7F7F4);filter:blur(6px);transform:scale(1.08)}
.art--violet{background:radial-gradient(ellipse 18% 32% at 50% 55%,#F7F7F4,#cfd1ea 60%,transparent 62%),radial-gradient(circle at 50% 20%,#FFFFFF 0 7%,transparent 8%),linear-gradient(180deg,#4a44e6,#5852F4 70%,#8F8AFF)}
.art--portrait{background:radial-gradient(ellipse 22% 26% at 52% 38%,#E8E9F6,#8F8AFF 60%,transparent 62%),radial-gradient(ellipse 40% 45% at 50% 85%,#1A2A40,transparent 70%),linear-gradient(180deg,#1A2A40,#132032);filter:blur(1px)}
.art--room{background:radial-gradient(ellipse 9% 30% at 52% 55%,#D4F619,#a9c80f 70%,transparent 72%),repeating-linear-gradient(90deg,#5852F4 0 18px,#132032 18px 30px,#E8E9F6 30px 44px)}
.art--pop{background:conic-gradient(from 200deg at 45% 55%,#5852F4,#D4F619,#E8E9F6,#132032,#5852F4)}
.art--chipblue{background:repeating-radial-gradient(circle at 50% 50%,#8F8AFF 0 3px,#5852F4 4px 9px),#132032;-webkit-mask:radial-gradient(circle at 50% 50%,#000 38%,rgba(0,0,0,.35) 39%)}
.art--blue{background:radial-gradient(ellipse 40% 60% at 60% 50%,#FFFFFF,#8F8AFF 30%,transparent 60%),linear-gradient(135deg,#5852F4,#E8E9F6);filter:blur(10px);transform:scale(1.1)}
.art--ball{background:radial-gradient(circle at 50% 120%,#5852F4 0 45%,#2b2780 60%,transparent 61%),radial-gradient(circle at 50% -40%,#D4F619 0 45%,#7f9410 60%,transparent 61%),#E8E9F6}
.art--hands{background:radial-gradient(ellipse 50% 22% at 45% 50%,#8F8AFF,#5852F4 75%),#4a44e6}
.art--phone{background:radial-gradient(ellipse 18% 36% at 45% 55%,#132032 60%,transparent 62%),radial-gradient(circle at 50% 85%,#D4F619,transparent 40%),#E8E9F6}
.art--rings{background:repeating-radial-gradient(circle at 75% 120%,transparent 0 30px,#D4F619 31px 36px,transparent 37px 60px),#132032}
.art--chip{background:repeating-linear-gradient(90deg,#5852F4 0 10px,#4a44e6 10px 13px),radial-gradient(#5852F4,#2b2780)}
.art--crowd{background:linear-gradient(120deg,#E8E9F6,#1A2A40);filter:blur(2px)}
.art--flowers{background:radial-gradient(circle at 40% 45%,#FFFFFF 0 12%,transparent 25%),radial-gradient(circle at 62% 55%,#D4F619 0 10%,transparent 24%),linear-gradient(180deg,#8F8AFF,#5852F4 60%,#132032);filter:blur(4px)}
.art--mono{background:linear-gradient(90deg,#132032,#E8E9F6 50%,#132032)}
.art--orange{background:radial-gradient(circle at 50% 40%,#D4F619,#5852F4 60%,#132032)}
.art--street{background:linear-gradient(180deg,#cfd1ea,#1A2A40)}
.art--mirror{background:linear-gradient(160deg,#5852F4,#2b2780 60%,#D4F619 61%,#a9c80f)}
.art--laptop{background:radial-gradient(ellipse 35% 25% at 45% 30%,#D4F619,transparent 70%),linear-gradient(180deg,#cfd1ea,#F7F7F4)}
.art--agent{background:radial-gradient(circle at 50% 55%,#5852F4,#2b2780 50%,#132032 80%);display:grid;place-items:center;color:#FFFFFF;font-weight:900;font-size:13px;letter-spacing:-.02em}

/* =================== MOTION FALLBACKS =================== */
.line-mask{padding-bottom:.08em;margin-bottom:-.08em}
.word{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .reel__orb,.reel__cards i{animation:none}
  .mmodal.is-open{transition-duration:.2s}
}

/* =================== PRISM HERO + OPENING (measured from metalab.com) =================== */
:root{--serif:"Fraunces","Times New Roman",serif}
/* the hero is a pale prismatic light texture now, so its copy is navy */
.b-prism{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#F6F6F8;color:var(--navy);letter-spacing:-.01em}
.prism-stage{position:absolute;inset:0;overflow:hidden;background:#F6F6F8}
.prism-stage.is-intro{position:fixed}
.prism-canvas{display:block;width:100%;height:100%}
.prism-stage.no-webgl{background:#F6F6F8 url("hero-fallback.jpg") center/cover no-repeat}
@media (max-aspect-ratio:9/10){.prism-stage.no-webgl{background-image:url("hero-fallback-portrait.jpg")}}
/* without WebGL a recorded loop of the same texture plays instead (same drift, same grain) */
.prism-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.prism-stage.no-webgl .prism-video{display:block}
/* the loop itself is grain-free (video compression smears grain into blur); the crisp CSS grain sits on top */
.prism-stage.has-video::before{display:none}
/* no WebGL (hardware acceleration off): show a still frame of the live visual, drifting slowly */
.prism-stage.no-webgl .prism-canvas{display:none}
.prism-stage.no-webgl::before{content:"";position:absolute;inset:-4%;background:inherit;animation:prism-drift 24s ease-in-out infinite alternate}
@keyframes prism-drift{from{transform:scale(1.02) translate3d(-1%,0,0)}to{transform:scale(1.08) translate3d(1.5%,-1%,0)}}
/* without WebGL the still still shimmers: a noise tile jumps around in steps, like film grain */
/* without WebGL: a crisp, zero-mean grain tile (grain.png) jumps around 24 times a second over the loop */
.prism-stage.no-webgl::after{content:"";position:absolute;inset:-60px;background:url("grain.png?v=2") 0 0/218px 218px;pointer-events:none;z-index:1;animation:prism-grain .25s steps(6) infinite}
@keyframes prism-grain{0%{transform:translate(0,0)}17%{transform:translate(-31px,17px)}33%{transform:translate(23px,-41px)}50%{transform:translate(-47px,-12px)}67%{transform:translate(13px,37px)}83%{transform:translate(41px,-23px)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.prism-stage.no-webgl::before,.prism-stage.no-webgl::after{animation:none}}
/* only a light shade on the left for the copy, so the glass keeps its deep blacks */
.ph-overlay{position:absolute;inset:0;background:none;pointer-events:none}

.ph-top{position:absolute;z-index:3;top:16px;left:24px;right:24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.ph-pill{display:inline-flex;align-items:center;height:32px;padding:0 17px;border-radius:999px;background:rgba(48,48,52,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:16px;letter-spacing:-.01em;transition:background-color .3s var(--ease-ui),color .3s var(--ease-ui)}
.ph-pill:hover{background:rgba(255,255,255,.9);color:#000}
.ph-top .ph-pill{height:22px;padding:0 16px;font-size:12px;justify-self:start}
.ph-logo{display:flex;align-items:center;gap:7px;font-weight:500;font-size:21px;letter-spacing:-.04em}
.ph-logo svg{width:20px;height:18px}
.ph-right{justify-self:end;display:flex;align-items:center;gap:14px;font-size:12px}
.ph-mail{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(48,48,52,.62)}
.ph-mail svg{width:12px;height:12px}
.ph-clients{position:absolute;z-index:3;left:24px;top:263px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
/* hero type measured on metalab.com (1440, 2000, 1024, 390 wide): title 88px/88px, -0.02em, light; copy 16px/22.4px, 250px wide */
.ph-copy{will-change:transform;-webkit-font-smoothing:antialiased;position:absolute;z-index:3;left:60%;top:25%;width:250px;font-size:16px;line-height:22.4px;letter-spacing:-.01em}
.ph-title{position:absolute;z-index:3;left:33.9%;top:49%;font-family:var(--serif);font-weight:240;font-variation-settings:"opsz" 144;font-size:88px;line-height:88px;letter-spacing:-.02em}
.ph-line{display:block;will-change:transform}
.ph-title{will-change:transform}
.ph-line>span{display:inline-block;will-change:transform,opacity}
.ph-copy__in{display:block;will-change:opacity}
.ph-line--2{padding-left:200px}
/* while the opening runs, the hero UI sits above the growing card */
html.intro-pending .ph-overlay{z-index:202}
html.intro-pending .ph-top,html.intro-pending .ph-clients,html.intro-pending .ph-copy,html.intro-pending .ph-title{z-index:203}
html.intro-pending .ph-top>*,html.intro-pending .ph-clients li,html.intro-pending .ph-copy,html.intro-pending .ph-title,html.intro-pending .ph-overlay{opacity:0}

/* the white opening stage: a wrapping tile of words and labels */
.intro{position:fixed;inset:0;z-index:200;background:var(--canvas);color:var(--navy);overflow:hidden;cursor:pointer}
.intro [data-k]{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform;opacity:0}
.ii-copy{position:absolute;left:0;top:0}
.iw{font-family:var(--serif);font-weight:260;font-variation-settings:"opsz" 144;font-size:clamp(56px,7.78vw,112px);line-height:.625;letter-spacing:-.02em}
.im{font-size:16px;line-height:1.2;letter-spacing:-.01em}
html:not(.intro-pending) .intro{display:none}

@media (max-width:47.999rem){
  .ph-top{left:16px;right:16px;top:12px}
  .ph-right>span{display:none}
  .ph-copy{display:none}
  .ph-title{left:16px;top:167px;font-size:44px;line-height:44px}
  .ph-line--2{padding-left:0}
  .ph-clients{left:16px;top:52%;gap:4px}
  .ph-pill{height:32px;padding:0 14px;font-size:14px}
}

/* in-page links land below the fixed header */
#services,#work,#approach,#about,#insights{scroll-margin-top:96px}

/* =================== PRIVACY PAGE =================== */
.legal{background:var(--canvas);color:var(--navy)}
.legal__top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px var(--gutter);border-bottom:1px solid var(--line)}
.legal__top img{display:block;width:96px;height:auto}
.legal__main{max-width:720px;margin:0 auto;padding:clamp(56px,8vw,112px) var(--gutter)}
.legal__main h1{margin:0;font-family:var(--serif);font-weight:240;font-variation-settings:"opsz" 144;font-size:clamp(44px,6vw,88px);line-height:1;letter-spacing:-.02em}
.legal__date{margin:20px 0 0;color:var(--body);font-size:14px}
.legal__main h2{margin:48px 0 12px;font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.legal__main p,.legal__main li{color:var(--lead);font-size:17px;line-height:1.55;letter-spacing:-.01em}
.legal__main p{margin:0 0 14px}
.legal__main ul{margin:0 0 14px;padding-left:20px}
.legal__main li{margin-bottom:6px}
.legal__main strong{font-weight:500;color:var(--navy)}
.legal__main a{text-decoration:underline;text-underline-offset:3px}
.legal__main a:hover{color:var(--accent)}
.legal__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:24px var(--gutter);border-top:1px solid var(--line);color:var(--body);font-size:14px}

/* =================== SUBPAGES (block sizes measured on dept.global, content is PRISM's) =================== */
[id]{scroll-margin-top:96px}
.page main{padding-top:var(--nav-h)}
.crumb{font-size:14px;color:var(--body);letter-spacing:-.02em;margin-bottom:24px}
.crumb a:hover{color:var(--accent)}
.h-page{font-size:clamp(38px,calc(5.15vw + 20px),100px);line-height:1.025;font-weight:900;letter-spacing:-.03em;text-transform:uppercase}
.t-lead{font-size:clamp(22px,calc(.57vw + 19.8px),28px);line-height:1.15;font-weight:400;letter-spacing:-.05em;color:var(--lead);max-width:768px}
.t-high{font-size:clamp(34px,calc(5.15vw + 14px),88px);line-height:1;font-weight:400;letter-spacing:-.04em}
.pill{cursor:pointer}

/* title block + image and fact rows */
.b-titleblock{padding:clamp(56px,11vw,155px) var(--gutter) clamp(48px,6vw,88px)}
.b-titleblock .t-lead{margin-top:clamp(24px,3vw,40px)}
.fact__copy h2{font-weight:400}
.b-high{padding:clamp(88px,11vw,160px) var(--gutter) clamp(48px,6vw,88px)}
.b-high .t-high{max-width:1180px}
.b-steps{display:flex;flex-direction:column;align-items:flex-start;gap:36px;padding:clamp(88px,11vw,160px) var(--gutter) clamp(48px,6vw,88px)}
.b-steps .t-high{max-width:1180px}
.b-talking--page{padding-top:clamp(56px,8vw,120px)}
.b-work--sub{padding:40px var(--gutter) 88px}
.work__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.work__pair .card .card__media{aspect-ratio:1.5}
.b-listing--sub{padding:40px var(--gutter) 120px}
.b-cta{display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding:clamp(72px,9vw,140px) var(--gutter);border-top:1px solid var(--line)}
.b-cta .t-high{max-width:1100px}

/* homepage and services rows are real links */
a.ins{display:block}
a.ins:hover h3{color:var(--accent)}
.ins h3{transition:color .25s var(--ease-ui)}
.foot__loc:hover,.foot__col a:hover,.foot__legal a:hover{color:var(--accent)}

/* work listing: filters, grid and list views */
.b-worklist{padding:clamp(56px,8vw,120px) var(--gutter) 88px}
.worklist__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:clamp(32px,4vw,56px) 0 28px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.worklist__filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filter{position:relative}
.filter__btn{display:flex;align-items:center;gap:8px;height:40px;padding:0 18px;border:1px solid var(--navy);border-radius:999px;font-size:16px;text-transform:uppercase;transition:background-color .3s var(--ease-ui),color .3s var(--ease-ui)}
.filter__btn:hover,.filter.is-set .filter__btn{background:var(--navy);color:var(--white)}
.filter__menu{position:absolute;z-index:5;left:0;top:calc(100% + 8px);min-width:200px;padding:8px;background:var(--white);border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column}
.filter__menu button{text-align:left;padding:10px 12px;font-size:15px;border-radius:6px}
.filter__menu button:hover{background:var(--mist)}
.filter__menu button.is-active{color:var(--accent);font-weight:600}
.worklist__clear{font-size:15px;text-decoration:underline;text-underline-offset:3px;padding:0 8px}
.worklist__view{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--body);white-space:nowrap}
.worklist__view span{margin-right:8px}
.view-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--navy)}
.view-btn svg{width:14px;height:14px}
.view-btn.is-active{background:var(--navy);border-color:var(--navy);color:var(--white)}
.worklist__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:68px 20px;align-items:start}
.worklist__grid .card__media{aspect-ratio:1.5}
.worklist__grid .card.is-full{grid-column:1 / -1}
.worklist__grid .card.is-full .card__media{aspect-ratio:2.1}
.worklist__grid.is-list{display:block;border-top:1px solid var(--line)}
.is-list .card{display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:center;column-gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.is-list .card .card__media,.is-list .card.is-full .card__media{grid-column:2;grid-row:1;aspect-ratio:1.75}
.is-list .card__hover{display:none}
.is-list .card__meta{grid-column:1;grid-row:1;padding:0;align-items:center;justify-content:flex-start;gap:28px}
.is-list .card__meta b{font-size:clamp(20px,2.3vw,32px);line-height:1.1;font-weight:400;transition:color .25s var(--ease-ui)}
.is-list .card:hover .card__meta b{color:var(--accent)}
.worklist__empty{padding:80px 0;font-size:var(--fs-body);color:var(--body)}

/* case page */
.c-title{padding:clamp(40px,6vw,88px) var(--gutter) clamp(32px,4vw,56px)}
.c-h{font-size:clamp(34px,8.9vw,128px);line-height:.92;font-weight:700;letter-spacing:-.04em;text-transform:uppercase}
.c-sub{margin-top:clamp(20px,2.4vw,32px);font-size:var(--fs-md);line-height:1.05;font-weight:400;letter-spacing:-.05em;max-width:1000px;color:var(--lead)}
.c-full{padding:0 var(--gutter)}
.c-full .art,.c-full img{display:block;width:100%;aspect-ratio:2.1;height:auto;object-fit:cover}
.c-two img{display:block;width:100%;aspect-ratio:1.2;height:auto;object-fit:cover}
.c-detail{padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.c-cap{margin-top:10px;font-size:14px;line-height:1.3;letter-spacing:-.02em;color:var(--body)}
.card__media>img,.fact__img img,.assets__media img,.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ins>img{display:block;width:100%;aspect-ratio:.8;object-fit:cover}
.insights__grid .ins>img{aspect-ratio:1.1}
.ins--big>img,.insights__grid .ins--big>img{aspect-ratio:1.5}
.a-hero img{display:block;width:100%;max-width:1398px;margin:0 auto;aspect-ratio:2.1;object-fit:cover}
.c-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:clamp(56px,7vw,104px) var(--gutter)}
.c-meta{grid-column:1 / span 3;display:flex;flex-direction:column;align-items:flex-start;font-size:16px;line-height:1.35}
.c-meta__l{font-size:12px;color:var(--body);text-transform:uppercase;letter-spacing:-.02em;margin-top:18px;padding-top:12px;border-top:1px solid var(--line);align-self:stretch}
.c-meta__l:first-child{margin-top:0}
.c-meta .pill{margin-top:28px}
.c-state{grid-column:5 / -1;font-size:var(--fs-md);line-height:1.05;font-weight:400;letter-spacing:-.05em}
.c-copy{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:clamp(32px,4vw,56px) var(--gutter)}
.c-copy h2{grid-column:1 / span 3;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.02em;color:var(--accent)}
.c-copy p{grid-column:5 / span 7;font-size:clamp(22px,calc(.57vw + 19.8px),28px);line-height:1.15;letter-spacing:-.05em;color:var(--lead)}
.c-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:clamp(32px,4vw,56px) var(--gutter)}
.c-two .art{aspect-ratio:1.2;height:auto}
.c-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.c-stats{padding:clamp(32px,4vw,56px) var(--gutter) clamp(72px,8vw,120px)}
.stat{display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:clamp(180px,20vw,290px);padding:24px;background:var(--white);border:1px solid var(--line)}
.stat b{font-size:clamp(40px,4.7vw,68px);line-height:1;font-weight:400;letter-spacing:-.05em;color:var(--accent)}
.stat span{font-size:16px;line-height:1.3;color:var(--lead)}
.c-next{display:flex;flex-direction:column;align-items:flex-start;gap:28px;min-height:clamp(420px,56vw,814px);padding:clamp(40px,5vw,72px) var(--gutter);margin-top:clamp(32px,4vw,56px);background:var(--bg);color:var(--white)}
.c-next__l{font-size:16px}
.c-next__t{font-size:clamp(34px,8.9vw,128px);line-height:.92;font-weight:700;letter-spacing:-.04em}
.c-next .pill{margin-top:auto}
.c-next:hover .pill{background:var(--lime);border-color:var(--lime)}
.c-next + *{margin-top:0}
.c-next ~ .foot,main:has(.c-next) + .foot{padding-top:53px}

/* insights listing and article */
.b-insights{padding:clamp(56px,8vw,120px) var(--gutter) 88px}
.tabs{display:flex;flex-wrap:wrap;gap:8px 28px;margin:clamp(28px,3.5vw,48px) 0 clamp(32px,4vw,56px);padding-bottom:16px;border-bottom:1px solid var(--line)}
.tab{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.05em;color:var(--body);transition:color .25s var(--ease-ui)}
.tab sup{font-size:.55em;vertical-align:super;margin-left:2px}
.tab:hover,.tab.is-active{color:var(--navy)}
.tab.is-active{font-weight:600}
.insights__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 20px}
.insights__grid .art{aspect-ratio:1.1;height:auto}
.ins--big{grid-column:1 / -1;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:center}
.ins--big .art{aspect-ratio:1.5}
.ins--big h3{font-size:clamp(30px,3.3vw,48px);line-height:1.05}
.a-intro{max-width:900px;margin:0 auto;padding:clamp(48px,7vw,104px) var(--gutter) clamp(32px,4vw,56px)}
.a-intro .ins__tags{margin:0 0 24px}
.a-intro h1{font-size:clamp(36px,calc(2.3vw + 27px),60px);line-height:1.05;font-weight:400;letter-spacing:-.045em}
.a-meta{margin-top:24px;font-size:16px;color:var(--body)}
.a-hero{padding:0 var(--gutter)}
.a-hero .art{aspect-ratio:2.1;height:auto;max-width:1398px;margin:0 auto}
.a-body{max-width:900px;margin:0 auto;padding:clamp(48px,6vw,88px) var(--gutter) clamp(72px,8vw,120px)}
.a-lede{font-size:clamp(24px,calc(.76vw + 21px),32px);line-height:1.15;letter-spacing:-.05em;margin-bottom:24px}
.a-body h2{margin:44px 0 14px;font-size:clamp(22px,1.9vw,28px);line-height:1.15;font-weight:600;letter-spacing:-.04em}
.a-body p{letter-spacing:-.02em}
.a-body h2 + p{font-size:clamp(18px,1.4vw,20px);line-height:1.5;color:var(--lead)}

/* about */
.ab-intro{padding:clamp(56px,8vw,120px) var(--gutter) 0;text-align:center}
.ab-intro .h-page{max-width:1200px;margin:0 auto}
.ab-video{margin-top:clamp(40px,5vw,72px);aspect-ratio:2.1;overflow:hidden;background:#F6F6F8}
.ab-video video{display:block;width:100%;height:100%;object-fit:cover}
.ab-stats{padding:clamp(88px,10vw,160px) var(--gutter) 60px}
.ab-stats .t-high{max-width:1180px;margin-bottom:clamp(48px,6vw,88px)}
/* a new studio states plain facts, not big numbers */
.ab-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gutter);margin:0;border-top:1px solid var(--navy)}
.ab-fact{padding:20px 0 0}
.ab-fact dt{font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--body)}
.ab-fact dd{margin:10px 0 0;font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.04em;color:var(--navy)}
.b-pillars{padding:clamp(88px,10vw,160px) var(--gutter) 100px}
.pillars{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;border-top:1px solid var(--line)}
.pillars li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:28px 0;border-bottom:1px solid var(--line)}
.pillars h3{grid-column:1 / span 5;font-size:clamp(24px,calc(.76vw + 21px),32px);font-weight:400;letter-spacing:-.05em}
.pillars p{grid-column:7 / -1;font-size:clamp(19px,1.5vw,22px);line-height:1.3;letter-spacing:-.04em;color:var(--lead)}

/* contact */
/* contact: measured from DEPT's form at 1440px */
.ct{padding:clamp(56px,6.5vw,96px) clamp(var(--gutter),9.65vw,160px) clamp(72px,8vw,120px)}
.ct .h-page{max-width:1200px}
.ct__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 46px;margin-top:clamp(40px,5.5vw,80px)}
.ct__wide{grid-column:1 / -1}
.fld{display:block;height:58px;padding:10px 21px 0;border:1px solid var(--navy);border-radius:30px;transition:border-color .2s var(--ease-ui),box-shadow .2s var(--ease-ui)}
.fld:focus-within{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet)}
.fld>span{display:block;font-size:10px;line-height:16px;color:var(--navy)}
.fld input,.fld select,.fld textarea{display:block;width:100%;height:20px;padding:0;border:0;outline:0;background:transparent;color:var(--navy);font:inherit;font-size:16px;letter-spacing:-.01em;appearance:none;-webkit-appearance:none}
.fld select{padding-right:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23132032' stroke-width='1.2'/%3E%3C/svg%3E") right center/12px no-repeat}
.fld--area{height:auto;padding-bottom:12px}
.fld textarea{height:184px;resize:vertical}
.ct__trap{position:absolute;left:-9999px}
.ct__check{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:16px;letter-spacing:-.01em}
.ct__check input{flex:none;width:14px;height:14px;margin:0;accent-color:var(--navy)}
.ct__check a{text-decoration:underline;text-underline-offset:3px}
.ct__submit{height:58px;border-radius:100px;background:var(--navy);color:#fff;font-size:16px;text-transform:uppercase;letter-spacing:-.01em;transition:background .2s var(--ease-ui)}
.ct__submit:hover{background:var(--accent)}
.ct__submit:disabled{opacity:.6;cursor:default}
.fld,.ct__check{position:relative}
.fld.is-invalid{border-color:#D6453D}
.fld.is-invalid:focus-within{box-shadow:0 0 0 1px #D6453D}
.fld-err,.fld>.fld-err{position:absolute;left:21px;top:calc(100% + 3px);font-size:10px;line-height:14px;color:#D6453D;letter-spacing:0}
.ct__check .fld-err{left:24px}
.ct__thanks{margin-top:clamp(40px,5.5vw,80px);font-size:16px;letter-spacing:-.01em;color:var(--navy);outline:0}
.ct__status{font-size:16px;letter-spacing:-.01em;color:var(--navy)}
.ct__status:empty{display:none}
.office{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:clamp(40px,5vw,72px) var(--gutter);background:var(--navy);color:var(--white)}
.office__copy{grid-column:1 / span 4;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.office .h-lg{font-size:clamp(40px,4.45vw,64px)}
.office__l{font-size:12px;text-transform:uppercase;letter-spacing:-.02em;opacity:.75}
.office__a{font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-.04em}
.office__m{font-size:13px;opacity:.75;letter-spacing:-.02em}
.office__copy .pill{margin-top:auto}
.office__copy .pill:hover{background:var(--lime);border-color:var(--lime);color:var(--navy)}
.office__map{position:relative;grid-column:5 / -1;aspect-ratio:2.26;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.office__map{isolation:isolate;background:var(--mist)}
.office__map .leaflet-container{font:inherit;letter-spacing:0}
.office__pin{width:22px;height:22px;border-radius:50%;background:var(--violet);border:4px solid var(--white);box-shadow:0 0 0 6px rgba(88,82,244,.25),0 4px 12px rgba(19,32,50,.4)}
.office__map .leaflet-control-attribution{font-size:11px}

/* privacy on the shared layout */
.page.legal .legal__main{padding-top:clamp(48px,6vw,88px)}

/* search results page, measured from dept.global/search at 1440px */
.sr{padding:clamp(40px,4.5vw,64px) var(--gutter) clamp(72px,8vw,120px)}
.sr__bar{display:flex;align-items:center;gap:12px}
.sr__icon,.sr__clear{flex:none;width:32px;height:32px;display:grid;place-items:center;color:var(--navy)}
.sr__icon svg{width:30px;height:30px}
.sr__clear svg{width:22px;height:22px}
.sr__input{flex:1;min-width:0;height:73px;padding:0;border:0;border-bottom:1px solid var(--navy);border-radius:0;background:none;outline:0;font:inherit;font-size:clamp(36px,4.17vw,60px);font-weight:700;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--navy);-webkit-appearance:none}
.sr__input::placeholder{color:var(--navy);opacity:.25}
.sr__tools{position:relative;display:flex;justify-content:flex-end;margin-top:16px}
.sr__sort{display:flex;align-items:center;gap:10px;height:40px;padding:0 8px;font-size:16px;letter-spacing:-.02em}
.sr__sort svg{width:18px;height:12px}
.sr__sortmenu{position:absolute;top:44px;right:0;z-index:5;display:flex;flex-direction:column;min-width:160px;padding:8px;background:#fff;border:1px solid #767676;border-radius:8px}
.sr__sortmenu button{padding:8px;text-align:left;font-size:14px;text-transform:uppercase;letter-spacing:-.8px}
.sr__sortmenu .is-active{color:var(--accent)}
.sr__body{display:grid;grid-template-columns:350px minmax(0,1fr);column-gap:76px;margin-top:56px}
.sr__filters{align-self:start;padding:8px 20px;background:#fff;border:1px solid #d9d9d9;border-radius:8px}
.sr__filter summary{display:flex;align-items:center;gap:10px;padding:14px 0;font-size:16px;text-transform:uppercase;letter-spacing:-.8px;cursor:pointer;list-style:none}
.sr__filter summary::-webkit-details-marker{display:none}
.sr__filter[open] .chev{scale:1 -1}
.sr__options{display:flex;flex-direction:column;gap:12px;padding:4px 0 16px}
.sr__options label{display:flex;align-items:center;gap:10px;font-size:14px;text-transform:uppercase;letter-spacing:-.8px;cursor:pointer}
.sr__options input{width:14px;height:14px;margin:0;accent-color:var(--navy)}
.sr__list{margin:0;padding:0;list-style:none}
.sr__row>a{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}
.sr__row:first-child>a{padding-top:0}
.sr__media{aspect-ratio:340/191;overflow:hidden;background:var(--line)}
.sr__media img{width:100%;height:100%;object-fit:cover}
.sr__text{display:flex;flex-direction:column;min-width:0}
.sr__meta{display:flex;align-items:center;gap:22px}
.sr__tag{display:inline-flex;align-items:center;height:38px;padding:8px 8px 6px;background:var(--lime);color:var(--navy);border-radius:4px;font-size:16px}
.sr__cat{font-size:16px;color:#767676}
.sr__title{margin-top:8px;font-size:clamp(24px,2.22vw,32px);line-height:1.25;letter-spacing:-.042em;transition:color .2s var(--ease-ui)}
.sr__row>a:hover .sr__title{color:var(--accent)}
.sr__excerpt{margin-top:14px;font-size:16px;line-height:1.35;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr__none{padding:8px 0;font-size:var(--fs-body);color:var(--body)}
.sr__none a{text-decoration:underline;text-underline-offset:3px}

@media (max-width:61.999rem){
  .office__copy,.office__map{grid-column:1 / -1}
  .office__map{margin-top:32px;aspect-ratio:1.6}
  .office__copy .pill{margin-top:8px}
  .c-meta{grid-column:1 / -1;margin-bottom:40px}
  .c-state,.c-copy p,.c-copy h2{grid-column:1 / -1}
  .c-copy h2{margin-bottom:10px}
}
@media (max-width:47.999rem){
  .page main{padding-top:92px}
  .work__pair,.worklist__grid,.c-two{grid-template-columns:minmax(0,1fr)}
  .worklist__grid{row-gap:44px}
  .worklist__grid .card.is-full .card__media{aspect-ratio:1.5}
  .worklist__bar{flex-direction:column;align-items:flex-start}
  .worklist__view{width:100%;justify-content:space-between}
  .worklist__view span{margin-right:auto}
  .is-list .card{grid-template-columns:minmax(0,1fr) 84px;column-gap:14px}
  .is-list .card__meta{flex-direction:column;align-items:flex-start;gap:2px;padding-right:0}
  .is-list .plus{display:none}
  .c-stats{grid-template-columns:minmax(0,1fr)}
  .ab-facts{grid-template-columns:minmax(0,1fr);border-top:0}
  .ab-fact{padding:16px 0;border-top:1px solid var(--navy)}
  .stat{min-height:150px}
  .insights__grid{grid-template-columns:minmax(0,1fr)}
  .ins--big{grid-template-columns:minmax(0,1fr)}
  .pillars h3,.pillars p{grid-column:1 / -1}
  .pillars p{margin-top:8px}
  .ct{padding-left:var(--gutter);padding-right:var(--gutter)}
  .ct__form{grid-template-columns:minmax(0,1fr)}
  .sr__body{grid-template-columns:minmax(0,1fr);row-gap:24px;margin-top:24px}
  .sr__row>a{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .sr__excerpt{white-space:normal}
  .sr__input{height:56px}
  .ab-video{aspect-ratio:1.2}
}

/* =================== HOMEPAGE, dept.global's current order and measurements =================== */
.b-sol{padding:40px calc(var(--gutter) + clamp(0px,7.78vw,112px)) 148px}
.sol__sub{max-width:881px;margin-top:24px;font-size:clamp(16px,calc(1.9vw + 8.6px),36px);line-height:1.25;font-weight:400;letter-spacing:-.05em}
.sol__row{display:grid;gap:20px;margin-top:71px}
.sol__sub + .sol__row{margin-top:48px}
.sol__row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sol__row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.scard{display:flex;flex-direction:column;align-items:flex-start}
.scard__media{display:block;width:100%;aspect-ratio:4/5;overflow:hidden}
.scard--wide .scard__media{aspect-ratio:5/4}
.scard__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.scard:hover .scard__media img{transform:scale(1.03)}
.scard__title{display:flex;justify-content:space-between;width:100%;margin-top:11px;font-size:24px;line-height:30px;font-weight:900;letter-spacing:-.03em;text-transform:uppercase;color:var(--accent)}
.scard__title .plus{display:none}
.scard__pill{margin-top:21px}
.pill--acc{border-color:var(--accent);color:var(--accent)}
.scard:hover .pill--acc{background:var(--accent);color:var(--white)}
/* blurred ring of type drifting behind the sections */
.dec{position:relative;height:0;pointer-events:none}
.dec img{position:absolute;left:calc(68.5% - 107px);top:-560px;width:1120px;height:1120px;max-width:none;z-index:-1;opacity:.5;will-change:transform}
@media (max-width:47.999rem){
  .b-sol{padding:40px var(--gutter) 90px}
  .sol__sub{font-size:16px;line-height:20px;margin-top:20px}
  .sol__row{grid-template-columns:minmax(0,1fr);gap:52px;margin-top:52px}
  .sol__sub + .sol__row{margin-top:40px}
  .scard__media,.scard--wide .scard__media{aspect-ratio:1.5}
  .scard__title{font-size:20px;line-height:20px;margin-top:12px}
  .scard__title .plus{display:grid;position:static;border-color:var(--accent);color:var(--accent)}
  .scard__pill{display:none}
  .dec img{left:calc(60% - 47px);top:-247px;width:494px;height:494px}
}

/* =================== SCROLL-LINKED MOTION THAT RUNS OFF THE MAIN THREAD (main.js falls back to GSAP where unsupported) =================== */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .ph-title,.ph-copy,.ph-copy__in,.ph-line>span{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:0 100vh}
    .ph-title{animation-name:hero-title}
    .ph-copy{animation-name:hero-copy}
    .ph-copy__in{animation-name:hero-copy-fade}
    .ph-line>span{animation-name:hero-line-1}
    .ph-line--2>span{animation-name:hero-line-2}
    @keyframes hero-title{to{transform:translateY(34vh)}}
    @keyframes hero-copy{to{transform:translateY(60vh)}}
    @keyframes hero-copy-fade{0%,4%{opacity:1}30%,100%{opacity:0}}
    @keyframes hero-line-1{0%,10%{opacity:1}46%,100%{opacity:0}100%{transform:translateX(-10vw)}}
    @keyframes hero-line-2{0%,15%{opacity:1}51%,100%{opacity:0}100%{transform:translate(14vw,-20vh)}}
    .dec{view-timeline-name:--dec}
    .dec img{animation:dec-turn linear both;animation-timeline:--dec}
    @keyframes dec-turn{from{transform:rotate(-40deg)}to{transform:rotate(80deg)}}
  }
}
/* the recorded fallback's grain stops when the hero is off screen */
.prism-stage.no-webgl::after{will-change:transform}
.prism-stage.is-off::before,.prism-stage.is-off::after{animation-play-state:paused}
.nf__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,44px)}

/* phones: small text links get a taller touch area (at least 24px) without moving the layout */
@media (max-width:47.999rem){
  .nav__link,.foot__loc,.foot__legal a,.crumb a{padding-block:8px;margin-block:-8px}
}