:root{
  --red:#EB0004;
  --fs-display:11.9vw;
  --fs-stat:6.8027vw;
  --fs-work:max(24px,3.4014vw);
  --fs-ui:max(13px,2.0408vw);
  --fs-micro:max(11px,1.0204vw);
  --fs-tag:max(11px,1.7vw);
  --gap-title:max(8px,1.1vw);
  --pad-header:max(16px,2.7211vw);
  --top-header:max(16px,2.1769vw);
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --runway:900vh;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{background:#000;overscroll-behavior:none}
body{
  font-family:'Inter Tight',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- stage ---------- */
.stage{
  position:fixed;inset:0;z-index:0;
  opacity:calc(1 - var(--stage-out,0));
  background:#000;
}
.stage video,.stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- reveals ---------- */
.reveal{
  --rot:calc(var(--reveal,0) * var(--angle));
  position:fixed;top:50%;left:50%;
  width:calc(var(--reveal,0) * var(--span-w));
  height:var(--span-h);
  transform:translate(-50%,-50%) rotate(var(--rot));
  overflow:hidden;pointer-events:none;background:#000;
}
.reveal--a{z-index:5;--angle:-45deg;--span-w:calc(72vw + 72vh);--span-h:calc(72vw + 72vh)}
.reveal--b{z-index:7;--angle:0deg;--span-w:102vw;--span-h:102vh}
.reveal video,.reveal canvas{
  position:absolute;top:50%;left:50%;
  width:102vw;height:102vh;height:102dvh;object-fit:cover;
  transform:translate(-50%,-50%) rotate(calc(var(--rot) * -1));
}

canvas.plate{opacity:0;transition:opacity 240ms linear}
canvas.plate.is-live{opacity:1}
.is-covered{visibility:hidden}

/* ---------- chrome ---------- */
.chrome{position:fixed;inset:0;z-index:10;pointer-events:none;perspective:1200px}

.header{
  position:absolute;left:0;right:0;
  top:calc(var(--top-header) + env(safe-area-inset-top));
  display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--pad-header);
}
.header__brand{
  pointer-events:auto;display:block;line-height:0;
  transition:opacity 200ms var(--ease-expo),transform 200ms var(--ease-expo);
}
.header__brand img,
.about-page .header.is-fixed .header__brand img{
  display:block;width:max(38px,3.4vw);height:auto;
}
.header__nav{display:flex;align-items:center;gap:max(18px,2.4vw)}
.header a{
  font-family:'BBH Bartle','Inter Tight',sans-serif;
  text-transform:uppercase;
  font-size:var(--fs-ui);
  line-height:100%;
  white-space:nowrap;
  color:#fff;text-decoration:none;
  pointer-events:auto;
  transition:opacity 200ms var(--ease-expo),transform 200ms var(--ease-expo);
}
@media (hover:hover) and (pointer:fine){.header a:hover,.header__brand:hover{opacity:.65}}
.header a:active,.header__brand:active{transform:scale(.97)}
.header a:focus-visible,.header__brand:focus-visible{outline:2px solid var(--red);outline-offset:4px;box-shadow:0 0 0 6px rgba(0,0,0,.9)}

.title{
  position:absolute;left:0;right:0;
  bottom:env(safe-area-inset-bottom);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:var(--gap-title);
  padding-bottom:max(32px,4vh);
}
.title__tag{
  font-family:'Inter Tight',sans-serif;font-weight:400;
  font-size:var(--fs-tag);text-transform:uppercase;text-align:center;line-height:100%;letter-spacing:0.08em;
}
.title__logo{
  display:block;width:min(72vw,74vh);height:auto;
  margin-bottom:max(12px,2vh);
}
.title__mark{
  font-family:'BBH Bartle','Inter Tight',sans-serif;font-weight:400;
  font-size:var(--fs-display);line-height:100%;white-space:nowrap;
}
.title__script{font-family:'Alex Brush',cursive;line-height:0}

.about-hero__logo{
  display:block;width:min(56vw,58vh);height:auto;
  margin-bottom:max(16px,3vh);
}
.work-hero__logo{
  display:block;width:min(46vw,42vh);height:auto;
  margin-bottom:max(12px,2vh);
}

@media (max-width:768px){
  .title__logo{width:min(86vw,60vh)}
  .about-hero__logo{width:min(72vw,52vh)}
  .work-hero__logo{width:min(56vw,38vh);margin-bottom:max(16px,2vh)}
  .header__nav{gap:max(14px,4vw)}
}


/* ---------- exit-3d ---------- */
.exit-3d{
  transform:translate3d(0,0,calc(var(--exit,0) * var(--exit-z,680px)));
  opacity:calc(1 - var(--exit,0) * var(--exit,0));
}
.exit-3d.is-exiting{filter:blur(calc(var(--exit) * var(--exit) * var(--exit-blur,8px)))}
.exit-3d.is-gone{visibility:hidden;filter:none}

/* ---------- rise ---------- */
.rise{
  opacity:var(--in,0);
  transform:translateY(calc((1 - var(--in,0)) * var(--rise-y,2em)));
}
.rise.is-anim{filter:blur(calc((1 - var(--in)) * (1 - var(--in)) * var(--rise-blur,5px)))}
.rise.is-hidden{visibility:hidden}

.about{
  position:absolute;
  left:max(20px,3.9456vw);
  bottom:max(16px,6.9038vh);
  width:max(260px,46.0544vw);
  font-family:'Inter Tight',sans-serif;font-weight:500;
  font-size:var(--fs-ui);line-height:100%;
}

.stat{
  position:absolute;left:0;right:0;
  bottom:calc(env(safe-area-inset-bottom) + max(12px,2.0921vh));
  display:flex;flex-direction:column;align-items:center;
  gap:var(--gap-title);
  --exit:1;--exit-z:464px;
}
.stat__label{font-family:'Inter Tight',sans-serif;font-size:var(--fs-ui);text-transform:uppercase;line-height:100%}
.stat__num{font-family:'Alex Brush',cursive;font-size:var(--fs-stat);line-height:100%}

/* ---------- sec2 ---------- */
.sec2{
  position:fixed;inset:0;z-index:6;overflow:hidden;pointer-events:none;
  font-family:'Inter Tight',sans-serif;font-weight:500;
}
.sec2.is-hidden{visibility:hidden}
.strip{position:absolute;top:0;left:0;width:100vw;transform:translateY(var(--s2y,0));will-change:transform}
.strip > *{opacity:var(--o,0)}

.w-title{
  position:absolute;left:3.5374vw;top:22.9252vw;width:38.3673vw;
  display:flex;flex-direction:column;gap:1.6327vw;
}
.w-title.is-entering{filter:blur(var(--wb,0))}
.w-eyebrow{font-size:var(--fs-micro);text-transform:uppercase}
.w-mark{font-family:'BBH Bartle','Inter Tight',sans-serif;font-weight:400;font-size:var(--fs-work);line-height:100%}
.w-script{font-family:'Alex Brush',cursive;line-height:0}

.w-desc1{position:absolute;left:50%;top:58.7755vw;width:calc(50% - var(--pad-header));font-size:var(--fs-ui);line-height:110%}

.w-list{
  position:absolute;top:110.2041vw;left:50%;width:64.2857vw;
  transform:translateX(-50%);
  display:flex;flex-direction:row;gap:2.7211vw;
}
.w-col{display:flex;flex-direction:column;gap:2.6531vw}
.w-col--l{width:32.7891vw;align-items:flex-end;text-align:right}
.w-col--r{width:28.7755vw;align-items:flex-start}
.w-row{
  display:flex;flex-direction:row;align-items:baseline;gap:1.3605vw;
  transform:translateX(calc(var(--dir,1) * var(--fly,0) * var(--fly-x,62vw)));
  opacity:calc(1 - var(--fly,0) * var(--fly,0));
}
.w-row.is-flying{filter:blur(calc(var(--fly) * var(--fly) * var(--fly-blur,12px)))}
.w-col--l .w-row{--dir:-1}
.w-col--r .w-row{--dir:1}
.w-year{font-size:var(--fs-micro);white-space:nowrap}
.w-brand{font-size:var(--fs-ui);text-decoration:underline;white-space:nowrap}
.w-name{font-size:var(--fs-ui);white-space:nowrap}

.w-desc2{position:absolute;top:125.8503vw;left:50%;width:38.2993vw;transform:translateX(-50%);font-size:var(--fs-micro);text-align:center;line-height:130%}

.runway{height:var(--runway)}

/* ---------- entrance ---------- */
.js .title__mark{opacity:0;filter:blur(14px)}
.js .title__logo{opacity:0;filter:blur(14px)}
.js .title__tag{opacity:0}
.js .header a,.js .header__brand{opacity:0;filter:blur(8px);transform:translateY(12px)}

.js .about-hero__logo{opacity:0;filter:blur(14px)}
.js .work-hero__logo{opacity:0;filter:blur(14px)}
.js .about-hero__eyebrow,.js .about-hero__title{opacity:0;transform:translateY(18px)}
.js .about-page .header.is-fixed .header__brand,
.js .about-page .header.is-fixed .header__nav a{opacity:0;filter:blur(8px);transform:translateY(12px)}

.js.is-ready .title__mark{opacity:1;filter:blur(0);transition:opacity 1400ms var(--ease-expo),filter 1400ms var(--ease-expo)}
.js.is-ready .title__logo{opacity:1;filter:blur(0);transition:opacity 1400ms var(--ease-expo),filter 1400ms var(--ease-expo)}

.js.is-ready .title__tag{opacity:1;transition:opacity 700ms var(--ease-expo) 380ms}
.js.is-ready .header a,.js.is-ready .header__brand{
  opacity:1;filter:blur(0);transform:translateY(0);
  transition:opacity 700ms var(--ease-expo),filter 700ms var(--ease-expo),transform 700ms var(--ease-expo);
}
.js.is-ready .header__brand{transition-delay:260ms}
.js.is-ready .header__nav a:nth-child(1){transition-delay:300ms}
.js.is-ready .header__nav a:nth-child(2){transition-delay:360ms}
.js.is-ready .header__nav a:nth-child(3){transition-delay:420ms}

.js.is-ready .about-hero__logo{opacity:1;filter:blur(0);transition:opacity 1400ms var(--ease-expo),filter 1400ms var(--ease-expo)}
.js.is-ready .work-hero__logo{opacity:1;filter:blur(0);transition:opacity 1400ms var(--ease-expo),filter 1400ms var(--ease-expo)}
.js.is-ready .about-hero__eyebrow,
.js.is-ready .about-hero__title{opacity:1;transform:translateY(0);transition:opacity 900ms var(--ease-expo),transform 900ms var(--ease-expo)}
.js.is-ready .about-hero__eyebrow{transition-delay:380ms}
.js.is-ready .about-hero__title{transition-delay:520ms}
.js.is-ready .about-page .header.is-fixed .header__brand,
.js.is-ready .about-page .header.is-fixed .header__nav a{
  opacity:1;filter:blur(0);transform:translateY(0);
  transition:opacity 700ms var(--ease-expo),filter 700ms var(--ease-expo),transform 700ms var(--ease-expo);
}
.js.is-ready .about-page .header.is-fixed .header__brand{transition-delay:260ms}
.js.is-ready .about-page .header.is-fixed .header__nav a:nth-child(1){transition-delay:300ms}
.js.is-ready .about-page .header.is-fixed .header__nav a:nth-child(2){transition-delay:360ms}
.js.is-ready .about-page .header.is-fixed .header__nav a:nth-child(3){transition-delay:420ms}


@media (prefers-reduced-motion:reduce){
  .exit-3d,.exit-3d.is-exiting,.rise.is-anim,.w-row.is-flying,.w-title.is-entering{filter:none !important}
  .rise{transform:none}
  .w-row{transform:none}
  .js.is-ready .title__mark,
  .js.is-ready .title__tag,
  .js.is-ready .header a,
  .js.is-ready .about-hero__logo,
  .js.is-ready .work-hero__logo,
  .js.is-ready .about-hero__eyebrow,
  .js.is-ready .about-hero__title,
  .js.is-ready .about-page .header.is-fixed .header__brand,
  .js.is-ready .about-page .header.is-fixed .header__nav a{transition:opacity 200ms linear;filter:none;transform:none}
  canvas.plate{transition:none}
}

/* ---------- about page (same design language as the index composition) ---------- */
.about-page{
  position:relative;
  min-height:100vh;
  background:#000;
  color:#fff;
  font-family:'Inter Tight',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* header — identical contract to the index header */
.about-page .header.is-fixed{
  position:fixed;
  top:calc(var(--top-header) + env(safe-area-inset-top));
  left:0;right:0;
  z-index:100;
  pointer-events:none;
}
.about-page .header.is-fixed .header__brand,
.about-page .header.is-fixed .header__nav a{
  pointer-events:auto;
  color:#fff;text-decoration:none;
  font-family:'BBH Bartle','Inter Tight',sans-serif;
  text-transform:uppercase;
  font-size:var(--fs-ui);
  line-height:100%;
  white-space:nowrap;
  transition:opacity 200ms var(--ease-expo),transform 200ms var(--ease-expo);
}
.about-page .header__nav a.is-active{opacity:.55}
@media (hover:hover) and (pointer:fine){
  .about-page .header.is-fixed .header__brand:hover,
  .about-page .header.is-fixed .header__nav a:hover{opacity:.65}
}
.about-page .header.is-fixed .header__brand:active,
.about-page .header.is-fixed .header__nav a:active{transform:scale(.97)}
.about-page .header.is-fixed .header__brand:focus-visible,
.about-page .header.is-fixed .header__nav a:focus-visible{outline:2px solid var(--red);outline-offset:4px}

.about-main{position:relative;z-index:1}

/* --- hero: index .title composition, centered, bottom-weighted --- */
.about-hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:var(--gap-title);
  padding:calc(var(--top-header) * 5 + env(safe-area-inset-top)) var(--pad-header) max(48px,12vh);
  text-align:center;
}
.about-hero__eyebrow{
  font-family:'Inter Tight',sans-serif;font-weight:400;
  font-size:var(--fs-tag);
  text-transform:uppercase;line-height:100%;letter-spacing:0.08em;
}
.about-hero__title{
  font-family:'BBH Bartle','Inter Tight',sans-serif;font-weight:400;
  font-size:var(--fs-work);
  line-height:100%;
  text-transform:uppercase;
}

/* --- section shell: centered blocks, no rules --- */
.about-section{
  width:100%;
  padding:max(72px,16vh) var(--pad-header);
  display:flex;flex-direction:column;align-items:center;
  gap:max(28px,4.5vh);
  text-align:center;
}
.about-section__title{
  font-family:'Inter Tight',sans-serif;font-weight:500;
  font-size:var(--fs-micro);
  line-height:100%;
  text-transform:uppercase;
  letter-spacing:0.16em;
  opacity:.5;
}
.about-section__body{width:min(56.4626vw,760px);max-width:100%}

/* intro */
.about-intro .about-lead{
  font-family:'BBH Bartle','Inter Tight',sans-serif;font-weight:400;
  font-size:var(--fs-work);
  line-height:100%;
  text-transform:uppercase;
  margin-bottom:max(24px,3.5vh);
}
.about-intro p{
  font-family:'Inter Tight',sans-serif;font-weight:500;
  font-size:var(--fs-ui);
  line-height:120%;
  margin-bottom:1em;
}
.about-intro p:last-child{margin-bottom:0}

/* what we create — index .w-list two-column mirror */
.about-create__list{
  display:flex;flex-direction:row;
  gap:2.7211vw;
  width:64.2857vw;max-width:100%;
  margin:0 auto;
}
.about-create__col{display:flex;flex-direction:column;gap:2.6531vw;flex:1 1 0;min-width:0}
.about-create__col--l{align-items:flex-end;text-align:right}
.about-create__col--r{align-items:flex-start;text-align:left}
.about-card{display:flex;flex-direction:column;gap:0.8vw;max-width:26ch}
.about-card h3{
  font-family:'BBH Bartle','Inter Tight',sans-serif;font-weight:400;
  font-size:var(--fs-ui);
  line-height:100%;
  text-transform:uppercase;
}
.about-card p{
  font-family:'Inter Tight',sans-serif;font-weight:500;
  font-size:var(--fs-micro);
  line-height:130%;
}

/* approach */
.about-approach .about-approach__lead{
  font-family:'BBH Bartle','Inter Tight',sans-serif;font-weight:400;
  font-size:var(--fs-work);
  line-height:100%;
  text-transform:uppercase;
  margin-bottom:max(24px,3.5vh);
}
.about-approach p{
  font-family:'Inter Tight',sans-serif;font-weight:500;
  font-size:var(--fs-ui);
  line-height:120%;
  margin-bottom:1em;
}
.about-approach .about-tagline{
  font-family:'BBH Bartle','Inter Tight',sans-serif;font-weight:400;
  font-size:var(--fs-work);
  line-height:100%;
  text-transform:uppercase;
  margin-top:max(32px,5vh);
}

/* closing — the index logo slot */
.about-closing{
  min-height:80vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--gap-title);
  padding:max(64px,12vh) var(--pad-header) max(64px,14vh);
  text-align:center;
}
.about-closing__title{
  font-family:'BBH Bartle','Inter Tight',sans-serif;font-weight:400;
  font-size:var(--fs-display);
  line-height:100%;
  white-space:nowrap;
}
.about-closing__sub{
  font-family:'Inter Tight',sans-serif;font-weight:400;
  font-size:var(--fs-tag);
  text-transform:uppercase;line-height:100%;letter-spacing:0.08em;
}
.about-closing__manifesto{
  font-family:'Alex Brush',cursive;
  font-size:var(--fs-stat);
  line-height:100%;
}

.about-footer{
  display:flex;justify-content:space-between;gap:16px;
  padding:0 var(--pad-header) calc(max(16px,2.1769vh) + env(safe-area-inset-bottom));
  font-size:var(--fs-micro);
  text-transform:uppercase;
  letter-spacing:0.1em;
  opacity:.45;
}

@media (max-width:820px){
  
  .about-hero{
    min-height:86vh;
    padding:calc(var(--top-header) * 8 + env(safe-area-inset-top)) max(18px,var(--pad-header)) max(40px,9vh);
  }
  .about-hero__title{font-size:max(22px,6.6vw)}

  .about-section{padding:max(56px,10vh) max(18px,var(--pad-header));gap:max(20px,3vh)}
  .about-section__body{width:100%}
  .about-intro .about-lead,
  .about-approach__lead,
  .about-tagline{font-size:max(20px,6vw)}
  .about-intro p,.about-approach p{font-size:max(14px,4vw);line-height:132%}

  .about-create__list{flex-direction:column;width:100%;gap:6vw}
  .about-create__col{gap:5vw;align-items:center;text-align:center}
  .about-create__col--l,.about-create__col--r{align-items:center;text-align:center}
  .about-card{max-width:34ch}
  .about-card h3{font-size:max(15px,4.6vw)}
  .about-card p{font-size:max(12px,3.4vw)}

  .about-closing{min-height:64vh;padding:max(56px,10vh) max(18px,var(--pad-header)) max(48px,9vh)}
  .about-closing__sub{font-size:max(11px,3vw)}
  .about-closing__manifesto{font-size:max(28px,11vw)}
  .about-footer{flex-direction:column;gap:6px;padding:0 max(18px,var(--pad-header)) calc(18px + env(safe-area-inset-bottom));font-size:max(10px,2.8vw)}
}

/* ---------- mobile: works section ---------- */
@media (max-width:820px){
  .w-title{left:var(--pad-header);right:var(--pad-header);width:auto;top:34vw;gap:4vw}
  .w-desc1{left:var(--pad-header);right:var(--pad-header);width:auto;top:96vw;font-size:max(13px,3.6vw);line-height:135%}
  .w-list{
    top:150vw;left:var(--pad-header);right:var(--pad-header);width:auto;
    transform:none;flex-direction:column;gap:6vw;
  }
  .w-col{gap:5vw;width:100%}
  .w-col--l,.w-col--r{width:100%;align-items:flex-start;text-align:left}
  .w-row{gap:3vw;flex-wrap:wrap}
  .w-brand,.w-name{font-size:max(15px,4.4vw)}
  .w-desc2{
    top:225vw;left:var(--pad-header);right:var(--pad-header);
    width:auto;transform:none;font-size:max(12px,3.2vw);
  }
}

/* ---------- mobile: no blur passes (they read as permanent haze) ---------- */
@media (max-width:820px){
  .rise,.rise.is-anim{filter:none !important}
  .exit-3d.is-exiting{filter:none !important}
  .w-row.is-flying,.w-title.is-entering{filter:none !important}
}

/* ---------- iOS Safari / WebKit consistency ---------- */
@supports (-webkit-touch-callout:none){
  /* WebKit re-rasterizes blurred composited layers every frame during a
     scroll-driven animation, which reads as permanent haze on iPhone/iPad. */
  .rise,.rise.is-anim,
  .exit-3d.is-exiting,
  .w-row.is-flying,.w-title.is-entering{filter:none !important}
  /* Fixed layers must not resize with the collapsing URL bar. */
  .stage,.reveal{height:100dvh;min-height:-webkit-fill-available}
  .stage video,.reveal video{height:102dvh}
  /* Keep the 3D exit stable in WebKit's compositor. */
  .exit-3d{-webkit-transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden}
  /* Momentum scrolling can detach fixed chrome without this hint. */
  .chrome,.stage,.reveal{will-change:transform}
}
html.is-ios .rise,
html.is-ios .rise.is-anim,
html.is-ios .exit-3d.is-exiting,
html.is-ios .w-row.is-flying,
html.is-ios .w-title.is-entering{filter:none !important}
html.is-ios body{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}

/* ---------- work / contact pages ---------- */
.header a.is-active{opacity:.55}
.link-underline{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color 240ms var(--ease-expo),opacity 240ms var(--ease-expo)}
@media (hover:hover) and (pointer:fine){.link-underline:hover{border-color:#fff;opacity:.8}}
.link-underline:focus-visible{outline:2px solid var(--red);outline-offset:4px}

.work-queue{display:flex;flex-direction:column}
.work-queue__item{
  display:grid;grid-template-columns:auto 1fr auto;gap:0 max(16px,2vw);align-items:baseline;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.16);
}
.work-queue__item:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.work-queue__no,.work-queue__state,.contact-row__k{
  font-family:'Inter Tight',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.5;
}
.work-queue__item h3{
  font-family:'BBH Bartle','Inter Tight',sans-serif;font-size:clamp(20px,2.4vw,30px);line-height:110%;margin:0 0 6px;
}
.work-queue__item p{font-family:'Inter Tight',sans-serif;font-size:clamp(13px,1.1vw,15px);line-height:150%;opacity:.72;margin:0}

.contact-list{display:flex;flex-direction:column}
.contact-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:18px 0;border-top:1px solid rgba(255,255,255,.16);
  font-family:'Inter Tight',sans-serif;font-size:clamp(14px,1.2vw,17px);
}
.contact-row:last-child{border-bottom:1px solid rgba(255,255,255,.16)}

@media (max-width:820px){
  .work-queue__item{grid-template-columns:auto 1fr;row-gap:8px}
  .work-queue__state{grid-column:2}
  .contact-row{flex-direction:column;gap:6px}
}