/* Newcomb & Boyd — homepage styles
   Sections: fonts, design tokens (:root), base, components, sections, motion.
   Notes: one shared container width (--maxw) drives nav + hero + every section;
   colours come from CSS variables; sizes use clamp() for fluid scaling. */

/* ===== Fonts (self-hosted Gotham) ===== */
@font-face{font-family:'Gotham';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/Gotham-Light.woff2') format('woff2');}
@font-face{font-family:'Gotham';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/Gotham-LightItalic.woff2') format('woff2');}
@font-face{font-family:'Gotham';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Gotham-Book.woff2') format('woff2');}
@font-face{font-family:'Gotham';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Gotham-BookItalic.woff2') format('woff2');}
@font-face{font-family:'Gotham';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Gotham-Medium.woff2') format('woff2');}
@font-face{font-family:'Gotham';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/Gotham-MediumItalic.woff2') format('woff2');}
@font-face{font-family:'Gotham';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Gotham-Bold.woff2') format('woff2');}
@font-face{font-family:'Gotham';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Gotham-BoldItalic.woff2') format('woff2');}

/* ===== Styles ===== */
b,strong {
  font-weight:700;
}

:root {
  --signal:#DA2B1F;
  --signal-700:#A21F16;
  --ink:#222222;
  --graphite:#2A2D31;
  --slate:#4A5058;
  --steel:#8A9099;
  --mist:#DBDEE2;
  --vellum:#F4F2ED;
  --paper:#FAF9F6;
  --white:#FFFFFF;
  --brand-gray:#8F9193;
  --font-display:'Gotham','Helvetica Neue',Arial,sans-serif;
  --font-sans:'Gotham','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  --maxw:1800px;
  --gut:clamp(22px,3.6vw,64px);
  --sp:clamp(96px,13vh,184px);
  --sp-s:clamp(64px,8vh,112px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --d1:.16s;
  --d2:.34s;
  --d3:.66s;
  --d4:1.1s;
}

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

html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body {
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.55;
  color:var(--paper);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.lock {
  overflow:hidden;
  height:100vh;
}

img,svg {
  max-width:100%;
  display:block;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  border:none;
  background:none;
  cursor:pointer;
  color:inherit;
}

::selection {
  background:var(--signal);
  color:#fff;
}

.wrap {
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gut);
  padding-right:var(--gut);
}

.grain {
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress {
  position:fixed;
  top:0;
  left:0;
  height:2px;
  width:0;
  background:var(--signal);
  z-index:300;
}

.mega {
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(46px,8vw,116px);
  line-height:.94;
  letter-spacing:-0.045em;
}

.mega em {
  font-style:italic;
  font-weight:300;
  color:var(--signal);
}

.dxl {
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(40px,7vw,128px);
  line-height:.95;
  letter-spacing:-0.04em;
}

.dl {
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(34px,5.2vw,88px);
  line-height:1;
  letter-spacing:-0.032em;
}

.dm {
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(28px,3.4vw,54px);
  line-height:1.05;
  letter-spacing:-0.025em;
}

.lede {
  font-weight:400;
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.5;
  letter-spacing:-0.01em;
}

.eyebrow {
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.eyebrow .dot {
  color:var(--signal);
}

.mono {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
}

.muted {
  color:rgba(255,255,255,.62);
}

.muted-ink {
  color:var(--slate);
}

.btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:17px 30px;
  border-radius:2px;
  overflow:hidden;
  isolation:isolate;
}

.btn .lbl,.btn .arrow {
  position:relative;
  z-index:2;
  transition:transform var(--d2) var(--ease);
}

.btn .arrow {
  font-family:var(--font-mono);
}

.btn::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--signal);
  transform:translate(var(--tx,0),var(--ty,101%));
  transition:transform var(--dur,.42s) var(--ease);
}

html:not(.jsdir) .btn:hover::before {
  transform:translate(0,0);
}

.btn:hover .arrow {
  transform:translateX(6px);
}

.btn:hover {
  color:#fff;
}

.btn-light {
  background:var(--paper);
  color:var(--ink);
}

.btn-out {
  border:1px solid rgba(255,255,255,.32);
  color:var(--paper);
}

.btn-out-ink {
  border:1px solid rgba(34,34,34,.28);
  color:var(--ink);
}

.btn-out-ink:hover {
  color:#fff;
}

.cur-dot,.cur-ring {
  position:fixed;
  top:0;
  left:0;
  z-index:400;
  pointer-events:none;
  border-radius:50%;
  mix-blend-mode:difference;
  will-change:transform;
}

.cur-dot {
  width:7px;
  height:7px;
  background:#fff;
  transform:translate(-50%,-50%);
}

.cur-ring {
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.7);
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s;
}

.cur-ring.hover {
  width:74px;
  height:74px;
  background:rgba(255,255,255,.08);
  border-color:transparent;
}

.cur-ring .vlabel {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.16em;
  color:#fff;
  opacity:0;
  transform:scale(.6);
  transition:opacity .3s,transform .3s;
  mix-blend-mode:normal;
}

.cur-ring.view .vlabel {
  opacity:1;
  transform:scale(1);
}

@media(hover:none),(pointer:coarse) {
  .cur-dot,.cur-ring {
    display:none;
  }
}

@media(hover:hover) and (pointer:fine) {
  html.curon,html.curon * {
    cursor:none;
  }
}

.notice {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:115;
  background:var(--ink);
  color:var(--paper);
  border-bottom:1px solid rgba(255,255,255,.1);
}

.notice-in {
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:9px var(--gut);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
}

.notice-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper);
}

.notice-link .ntag {
  color:var(--signal);
}

.notice-link .ndiv {
  width:1px;
  height:11px;
  background:rgba(255,255,255,.28);
}

.notice-link .ntxt {
  color:rgba(255,255,255,.9);
}

.notice-link .narr {
  color:var(--signal);
  transition:transform var(--d2);
}

.notice-link:hover .narr {
  transform:translateX(4px);
}

.notice-x {
  position:absolute;
  right:var(--gut);
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.55);
  font-size:15px;
  line-height:1;
  padding:4px;
  transition:color var(--d2);
}

.notice-x:hover {
  color:var(--signal);
}

body.notice-off .notice {
  display:none;
}

@media(max-width:600px) {
  .notice-link {
    gap:9px;
  }
  .notice-link .ntxt {
    max-width:52vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

.nav {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:120;
  opacity:0;
  transition:transform .5s var(--ease),background .4s,border-color .4s,opacity .4s var(--ease);
  border-bottom:1px solid transparent;
}

body.nav-in .nav {
  opacity:1;
}

.nav.hide {
  transform:translateY(-100%);
}

.nav .brand,.navtoggle {
  transition:color .3s var(--ease),border-color var(--d2);
}

.navtoggle .micon i {
  transition:width .35s var(--ease),background-color .3s var(--ease);
}

.nav.on-light .brand {
  color:var(--brand-gray);
}

.nav.on-light .navtoggle {
  color:var(--ink);
  border-color:rgba(0,0,0,.22);
}

.nav.on-light .navtoggle .micon i {
  background:var(--ink);
}

.nav.on-light .navtoggle:hover {
  border-color:var(--signal);
}

.nav .bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px var(--gut);
  max-width:var(--maxw);
  margin:0 auto;
}

.nav .brand {
  color:var(--paper);
  display:flex;
  align-items:center;
}

.nav .brand .lk {
  width:160px;
  height:auto;
}

.navtoggle {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:var(--paper);
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:3px;
  transition:border-color var(--d2);
}

.navtoggle::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--signal);
  transform:translate(var(--tx,0),var(--ty,101%));
  transition:transform var(--dur,.42s) var(--ease);
}

.navtoggle:hover {
  border-color:var(--signal);
}

html:not(.jsdir) .navtoggle:hover::before {
  transform:translate(0,0);
}

.navtoggle .mlabel {
  position:relative;
  z-index:2;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.navtoggle .micon {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:5px;
  width:22px;
  align-items:flex-end;
}

.navtoggle .micon i {
  height:1.5px;
  background:var(--paper);
  transition:width .35s var(--ease);
}

.navtoggle .micon i:nth-child(1) {
  width:22px;
}

.navtoggle .micon i:nth-child(2) {
  width:13px;
}

.navtoggle:hover .micon i:nth-child(2) {
  width:22px;
}

.drawer {
  position:fixed;
  inset:0;
  z-index:130;
  background:var(--ink);
  display:flex;
  flex-direction:column;
  padding:18px var(--gut) 24px;
  transform:translateY(-100%);
  transition:transform .7s var(--ease);
  overflow-y:auto;
}

.drawer.open {
  transform:translateY(0);
}

.drawer .dtop {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:clamp(14px,2.4vh,24px);
}

.drawer .dtop .lk {
  width:160px;
  color:var(--paper);
}

.drawer .dclose {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.28);
  padding:11px 18px;
  border-radius:3px;
  transition:background var(--d2),border-color var(--d2);
}

.drawer .dclose:hover {
  background:var(--signal);
  border-color:var(--signal);
}

.drawer .dgrid {
  display:grid;
  grid-template-columns:0.95fr 1.25fr 0.92fr;
  gap:clamp(26px,3.4vw,60px);
  flex:1;
  align-content:start;
  padding-top:clamp(14px,3.4vh,42px);
}

.drawer .dnav {
  display:flex;
  flex-direction:column;
}

.drawer a.dl {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(22px,2.7vw,36px);
  letter-spacing:-0.028em;
  padding:clamp(7px,1.15vh,13px) 0;
  opacity:0;
  transform:translateY(40px);
  transition-property:opacity,transform,color,padding-left;
  transition-duration:.6s,.6s,.2s,.26s;
  transition-timing-function:var(--ease);
  transition-delay:0s,0s,0s,0s;
  will-change:opacity,transform;
}

.drawer.open a.dl {
  opacity:1;
  transform:none;
}

.drawer.open .dnav a.dl:nth-child(1) {
  transition-delay:.16s,.16s,0s,0s;
}

.drawer.open .dnav a.dl:nth-child(2) {
  transition-delay:.22s,.22s,0s,0s;
}

.drawer.open .dnav a.dl:nth-child(3) {
  transition-delay:.28s,.28s,0s,0s;
}

.drawer.open .dnav a.dl:nth-child(4) {
  transition-delay:.34s,.34s,0s,0s;
}

.drawer.open .dnav a.dl:nth-child(5) {
  transition-delay:.40s,.40s,0s,0s;
}

.drawer.open .dnav a.dl:nth-child(6) {
  transition-delay:.46s,.46s,0s,0s;
}

.drawer.open .dnav a.dl:nth-child(7) {
  transition-delay:.52s,.52s,0s,0s;
}

.drawer a.dl .n {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.16em;
  color:var(--signal);
}

.drawer a.dl:hover {
  color:var(--signal);
  padding-left:14px;
}

.drawer .dsub {
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.6vh,30px);
  border-left:1px solid rgba(255,255,255,.12);
  padding-left:clamp(22px,2.8vw,48px);
  opacity:0;
  transform:translateY(40px);
  transition:opacity .7s var(--ease) .5s,transform .7s var(--ease) .5s;
}

.drawer.open .dsub {
  opacity:1;
  transform:none;
}

.drawer .dcol .dgh {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
  display:block;
  margin-bottom:11px;
}

.drawer .dcol .dgh:hover {
  color:var(--paper);
}

.drawer .dlist {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 22px;
  font-size:13px;
}

.drawer .dlist a {
  color:rgba(255,255,255,.72);
}

.drawer .dlist a:hover {
  color:var(--signal);
}

.drawer .dfeatcol {
  display:flex;
  flex-direction:column;
  gap:12px;
  border-left:1px solid rgba(255,255,255,.12);
  padding-left:clamp(22px,2.8vw,48px);
  opacity:0;
  transform:translateY(40px);
  transition:opacity .7s var(--ease) .6s,transform .7s var(--ease) .6s;
}

.drawer.open .dfeatcol {
  opacity:1;
  transform:none;
}

.drawer .dfc-label {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-bottom:2px;
}

.drawer .dfeature {
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:5px;
  transition:border-color var(--d2),background var(--d2);
}

.drawer .dfeature:hover {
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.04);
}

.drawer .dfeature .df-img {
  flex:none;
  width:86px;
  height:64px;
  border-radius:3px;
  overflow:hidden;
  background:var(--graphite);
}

.drawer .dfeature .df-img img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.drawer .dfeature .df-body {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.drawer .dfeature .df-eye {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--signal);
}

.drawer .dfeature .df-title {
  font-family:var(--font-display);
  font-weight:400;
  font-size:15px;
  line-height:1.14;
  color:var(--paper);
}

.drawer .dfeature .df-arr {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  transition:color var(--d2);
}

.drawer .dfeature:hover .df-arr {
  color:var(--paper);
}

.drawer .dcontact {
  grid-column:1 / -1;
  margin-top:clamp(24px,4vh,48px);
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:clamp(22px,3vh,36px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s var(--ease) .66s,transform .6s var(--ease) .66s;
}

.drawer.open .dcontact {
  opacity:1;
  transform:none;
}

.drawer .dc-main {
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
}

.drawer .dcontact .dquote {
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(18px,1.7vw,24px);
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--paper);
  margin:0;
}

.drawer .dcontact .btn {
  flex:none;
  white-space:nowrap;
}

.drawer .dc-foot .dsoc {
  display:flex;
  gap:20px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

.drawer .dc-foot .dsoc a:hover {
  color:var(--signal);
}

@media(max-width:820px) {
  .drawer .dgrid {
    grid-template-columns:1fr;
    gap:24px;
    align-content:start;
    padding-top:8px;
  }
  .drawer a.dl {
    font-size:clamp(22px,6vw,30px);
  }
  .drawer .dsub {
    border-left:none;
    padding-left:0;
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:2px;
    gap:0;
  }
  .drawer .dsub .dcol .dgh {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:0;
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .drawer .dsub .dcol .dgh::after {
    content:"+";
    font-family:var(--font-mono);
    font-size:17px;
    color:rgba(255,255,255,.55);
    line-height:1;
    transition:color var(--d2);
  }
  .drawer .dsub .dcol.open .dgh::after {
    content:"\2013";
  }
  .drawer .dsub .dcol.open .dgh {
    color:var(--paper);
  }
  .drawer .dsub .dlist {
    max-height:0;
    overflow:hidden;
    opacity:0;
    padding:0;
    transition:max-height .4s var(--ease),opacity .3s var(--ease),padding .4s var(--ease);
  }
  .drawer .dsub .dcol.open .dlist {
    max-height:560px;
    opacity:1;
    padding:10px 0 16px;
  }
  .drawer .dfeatcol {
    border-left:none;
    padding-left:0;
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:18px;
  }
  .drawer .dcontact {
    margin-top:20px;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .drawer .dc-main {
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
}

.hero {
  position:relative;
  height:100svh;
  min-height:640px;
  overflow:hidden;
}

.hero .bg {
  position:absolute;
  inset:-8% 0;
  will-change:transform;
}

.hero .bg img,.hero .bg video {
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.14);
  transition:transform 3.6s var(--ease);
}

body.loaded .hero .bg img,body.loaded .hero .bg video {
  transform:scale(1);
}

.hero .grade {
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,rgba(20,20,20,.5) 0%,rgba(20,20,20,0) 26%), linear-gradient(0deg,rgba(20,20,20,.86) 0%,rgba(20,20,20,.18) 46%,rgba(20,20,20,0) 72%), linear-gradient(90deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,0) 42%);
}

.hero .hwrap {
  position:relative;
  z-index:3;
  height:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gut);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom:clamp(40px,6vh,72px);
}

.hero .topline {
  position:absolute;
  top:clamp(96px,14vh,150px);
  left:var(--gut);
  right:var(--gut);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:rgba(255,255,255,.75);
}

.hero .topline .rule {
  flex:1;
  height:1px;
  background:rgba(255,255,255,.28);
  margin:0 22px;
  max-width:380px;
}

.hero .topline .coord {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.18em;
}

.hero h1 {
  margin:0;
  color:var(--paper);
}

.line {
  display:block;
  overflow:hidden;
  padding-bottom:.16em;
  margin-bottom:-.16em;
}

.line>span {
  display:block;
  white-space:nowrap;
  transform:translateY(125%);
  transition:transform 1.3s var(--ease);
}

.mega .fline {
  display:block;
  white-space:nowrap;
}

.hero .hwrap .mega {
  color:var(--paper);
}

body.loaded .line>span {
  transform:translateY(0);
}

body.loaded .line:nth-child(1)>span {
  transition-delay:.28s;
}

body.loaded .line:nth-child(2)>span {
  transition-delay:.48s;
}

.hero .hfoot {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-top:clamp(28px,4vh,48px);
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.2);
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1.1s var(--ease) .95s,transform 1.1s var(--ease) .95s;
}

body.hero-in .hero .hfoot {
  opacity:1;
  transform:none;
}

.hero .hfoot .sub {
  font-size:clamp(16px,1.5vw,20px);
  max-width:32ch;
  color:rgba(255,255,255,.92);
  line-height:1.45;
}

.play {
  align-self:flex-start;
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  margin-bottom:clamp(18px,2.6vh,34px);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s var(--ease) .5s,transform .8s var(--ease) .5s;
}

body.hero-in .play {
  opacity:1;
  transform:none;
}

.play .disc {
  position:relative;
  overflow:hidden;
  width:62px;
  height:62px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  display:grid;
  place-items:center;
  transition:border-color var(--d2),transform var(--d2);
}

.play .disc::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--signal);
  clip-path:circle(var(--r,0%) at var(--px,50%) var(--py,50%));
  transition:clip-path var(--t,.55s) var(--ease);
  z-index:0;
}

.play:hover .disc {
  border-color:var(--signal);
  transform:scale(1.08);
}

html:not(.jsdir) .play:hover .disc::before {
  --r:150%;
}

.play .disc svg {
  position:relative;
  z-index:1;
  width:15px;
  height:15px;
  margin-left:3px;
  fill:var(--paper);
}

.herocards {
  display:flex;
  align-items:stretch;
  gap:14px;
  flex:0 1 auto;
  min-width:0;
}

.hcard {
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 clamp(220px,21vw,322px);
  min-width:0;
  padding:11px;
  background:rgba(18,18,18,.42);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  transition:border-color .3s,background .3s,transform .45s var(--ease);
}

.hcard:hover {
  border-color:rgba(255,255,255,.42);
  background:rgba(18,18,18,.58);
  transform:translateY(-3px);
}

.hcard .hc-thumb {
  width:52px;
  height:52px;
  flex:none;
  border-radius:3px;
  overflow:hidden;
  background:var(--graphite) center/cover no-repeat;
  background-image:url("../img/card-fallback.jpg");
}

.hcard .hc-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}

.hcard:hover .hc-thumb img {
  transform:scale(1.07);
}

.hcard .hc-body {
  flex:1;
  min-width:0;
}

.hcard .hc-eye {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:6px;
}

.hcard .hc-eye .dot {
  color:transparent;
  font-size:0;
  width:9px;
  height:9px;
  display:inline-block;
  position:relative;
}

.hcard .hc-eye .dot::before {
  content:"";
  position:absolute;
  inset:0;
  background:var(--signal);
  clip-path:polygon(0 0,0 100%,100% 100%);
}

.hcard .hc-title {
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  line-height:1.18;
  letter-spacing:-0.01em;
  color:var(--paper);
  margin:0 0 5px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.hcard:hover .hc-title {
  color:#fff;
}

.hcard .hc-meta {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.6);
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.scrollcue-r {
  flex:none;
  align-self:flex-end;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:3px;
}

.scrollcue-r .bar {
  width:1px;
  height:46px;
  background:rgba(255,255,255,.3);
  position:relative;
  overflow:hidden;
}

.scrollcue-r .bar::after {
  content:"";
  position:absolute;
  top:-46px;
  left:0;
  width:1px;
  height:46px;
  background:var(--signal);
  animation:cue 2s var(--ease-io) infinite;
}

@media(max-width:1024px) {
  .scrollcue-r {
    display:none;
  }
}

@media(max-width:860px) {
  .hero .hfoot {
    flex-wrap:wrap;
    gap:18px;
  }
  .play {
    order:0;
  }
  .herocards {
    order:1;
    flex:1 1 100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .herocards::-webkit-scrollbar {
    display:none;
  }
  .hcard {
    flex:0 0 78%;
    max-width:none;
  }
}

.scrollcue {
  position:absolute;
  bottom:clamp(28px,5vh,46px);
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.6);
}

.scrollcue .bar {
  width:1px;
  height:46px;
  background:rgba(255,255,255,.3);
  position:relative;
  overflow:hidden;
}

.scrollcue .bar::after {
  content:"";
  position:absolute;
  top:-46px;
  left:0;
  width:1px;
  height:46px;
  background:var(--signal);
  animation:cue 2s var(--ease-io) infinite;
}

@keyframes cue {
  0% {
    top:-46px;
  }
  60%,100% {
    top:46px;
  }
}

.scrollcue span {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
}

@media(max-width:760px) {
  .hero .topline .coord:last-child {
    display:none;
  }
  .scrollcue {
    display:none;
  }
}

.marquee {
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:26px 0;
  overflow:hidden;
  background:var(--graphite);
}

.mq-track {
  display:flex;
  gap:0;
  width:max-content;
  animation:mq 38s linear infinite;
}

.marquee:hover .mq-track {
  animation-play-state:paused;
}

.mq-track .it {
  display:inline-flex;
  align-items:center;
  gap:26px;
  padding:0 26px;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(20px,2.4vw,34px);
  letter-spacing:-0.02em;
  color:rgba(255,255,255,.9);
  white-space:nowrap;
}

.mq-track .it svg {
  width:13px;
  height:13px;
  color:var(--signal);
  flex:none;
}

@keyframes mq {
  to {
    transform:translateX(-50%);
  }
}

.bleed {
  position:relative;
  min-height:clamp(620px,92vh,1020px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}

.bleed .bg {
  position:absolute;
  inset:-8% 0;
  will-change:transform;
}

.bleed .bg img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.bleed .grade {
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(20,20,20,.9) 0%,rgba(20,20,20,.25) 50%,rgba(20,20,20,.55) 100%);
}

.bleed .bwrap {
  position:relative;
  z-index:3;
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
  padding:0 var(--gut) clamp(56px,9vh,120px);
}

.head-ix {
  display:flex;
  align-items:baseline;
  gap:18px;
  margin-bottom:26px;
}

.head-ix .ix {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.16em;
  color:var(--signal);
}

.head-ix .eyebrow {
  color:rgba(255,255,255,.78);
}

.bleed h2 {
  color:var(--paper);
  max-width:18ch;
  margin:0 0 26px;
}

.bleed .sub {
  max-width:46ch;
  color:rgba(255,255,255,.82);
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.5;
  margin-bottom:38px;
}

.editorial {
  background:var(--paper);
  color:var(--ink);
  padding:var(--sp) 0;
  position:relative;
}

.editorial .eg {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,110px);
  align-items:center;
}

.editorial .ecopy .head-ix .eyebrow {
  color:var(--slate);
}

.editorial .ecopy h2 {
  margin:0 0 28px;
  letter-spacing:-0.03em;
}

.editorial .ecopy .lede {
  max-width:34ch;
  color:var(--slate);
  margin-bottom:40px;
}

.editorial .emedia {
  position:relative;
}

.editorial .emedia .fr {
  position:relative;
  overflow:hidden;
  background:var(--mist);
  aspect-ratio:5/6;
}

.editorial .emedia .fr img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:40% center;
  will-change:transform;
}

.editorial .emedia {
  overflow:visible;
}

.editorial .emedia .pcollage {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(14px,1.7vw,28px);
  row-gap:clamp(20px,2.6vw,44px);
  align-items:start;
}

.editorial .emedia .pcollage img {
  width:100%;
  height:auto;
  display:block;
  background:var(--mist);
  border-radius:2px;
  box-shadow:0 16px 38px rgba(20,24,28,.12);
  will-change:transform;
}

.editorial .emedia .pc-a {
  grid-column:1 / 8;
  grid-row:1;
}

.editorial .emedia .pc-b {
  grid-column:8 / 13;
  grid-row:1;
  align-self:end;
}

.editorial .emedia .pc-c {
  grid-column:1 / 6;
  grid-row:2;
}

.editorial .emedia .pc-d {
  grid-column:6 / 13;
  grid-row:2;
}

@media(max-width:520px) {
  .editorial .emedia .pcollage img {
    grid-column:1 / -1 !important;
  }
}

.editorial .emedia .cap {
  position:absolute;
  left:0;
  bottom:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:11px 16px;
}

.editorial .emedia .cap .dot {
  color:var(--signal);
}

.editorial .emedia .tick {
  position:absolute;
  top:-14px;
  right:-14px;
  width:64px;
  height:64px;
  border-top:2px solid var(--signal);
  border-right:2px solid var(--signal);
}

@media(max-width:880px) {
  .editorial .eg {
    grid-template-columns:1fr;
    gap:42px;
  }
  .editorial .emedia .fr {
    aspect-ratio:4/3;
  }
}

.work {
  padding:var(--sp) 0 var(--sp-s);
  position:relative;
}

.work .whead {
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(20px,4vw,64px);
  align-items:end;
  margin-bottom:clamp(40px,6vh,72px);
}

.work .whead .ix {
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(40px,4vw,64px);
  line-height:.8;
  color:rgba(255,255,255,.3);
  letter-spacing:-0.04em;
}

.work .whead .wt .eyebrow {
  display:block;
  margin-bottom:16px;
  color:rgba(255,255,255,.7);
}

.work .whead .wt h2 {
  margin:0 0 18px;
  color:var(--paper);
}

.work .whead .wt .lede {
  max-width:52ch;
  color:rgba(255,255,255,.62);
}

.work .whead .wact {
  align-self:end;
}

@media(max-width:860px) {
  .work .whead {
    grid-template-columns:1fr;
    gap:22px;
  }
  .work .whead .wact {
    align-self:start;
  }
}

.gallery {
  position:relative;
}

.track {
  display:flex;
  gap:clamp(16px,1.6vw,24px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:0;
  padding:4px 1px 8px;
  scrollbar-width:none;
  cursor:grab;
}

.track::-webkit-scrollbar {
  display:none;
}

.track.drag {
  cursor:grabbing;
}

.gcard {
  flex:0 0 clamp(258px,30vw,380px);
  scroll-snap-align:start;
  position:relative;
}

.gcard .ph {
  position:relative;
  overflow:hidden;
  background:var(--graphite);
  aspect-ratio:4/3;
}

.gcard .ph img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease);
}

.gcard:hover .ph img {
  transform:scale(1.06);
}

.gcard .ph .ix {
  position:absolute;
  top:16px;
  left:16px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--paper);
}

.gcard .ph .ph-grade {
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(20,20,20,.62) 0%,rgba(20,20,20,0) 48%);
  opacity:0;
  transition:opacity .5s;
}

.gcard:hover .ph .ph-grade {
  opacity:1;
}

.gcard .meta {
  padding-top:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.gcard .meta h3 {
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(19px,1.5vw,23px);
  line-height:1.2;
  letter-spacing:-0.018em;
  color:var(--paper);
  transition:color var(--d2);
}

.gcard:hover .meta h3 {
  color:var(--signal);
}

.gcard .meta .cats {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.gcard .meta .cats span {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.16);
  border-radius:2px;
  padding:4px 8px;
}

.gbar {
  margin-top:clamp(34px,5vh,56px);
  display:flex;
  align-items:center;
  gap:20px;
}

.gbar .rail {
  flex:1;
  height:1px;
  background:rgba(255,255,255,.14);
  position:relative;
}

.gbar .rail i {
  position:absolute;
  left:0;
  top:-0.5px;
  height:2px;
  width:18%;
  background:var(--signal);
  transition:left .12s linear,width .12s linear;
}

.gbar .hint {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.cta {
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:clamp(120px,20vh,260px) 0;
  background:var(--ink);
}

.cta .tri {
  position:absolute;
  color:var(--signal);
  opacity:.07;
}

.cta .tri.a {
  width:46vw;
  max-width:560px;
  left:-7vw;
  bottom:-12vh;
}

.cta .tri.b {
  width:30vw;
  max-width:340px;
  right:-5vw;
  top:-8vh;
  transform:rotate(180deg);
}

.cta .glow {
  position:absolute;
  left:50%;
  top:50%;
  width:120vw;
  height:120vh;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at center,rgba(218,43,31,.10) 0%,rgba(218,43,31,0) 42%);
}

.cta .ci {
  position:relative;
  z-index:2;
}

.cta .eyebrow {
  display:block;
  margin-bottom:30px;
  color:rgba(255,255,255,.6);
}

.cta h2 {
  margin:0 auto 44px;
  color:var(--paper);
}

.cta .fline {
  margin-left:auto;
  margin-right:auto;
}

.cta .magnet {
  display:inline-block;
}

.footer {
  background:var(--graphite);
  padding:var(--sp-s) 0 36px;
  border-top:1px solid rgba(255,255,255,.08);
}

.footer a {
  color:rgba(255,255,255,.66);
  transition:color var(--d1);
}

.footer a:hover {
  color:var(--signal);
}

.footer .ftop {
  display:grid;
  grid-template-columns:1.6fr repeat(4,1fr);
  gap:clamp(28px,3.5vw,56px);
  padding-bottom:var(--sp-s);
  border-bottom:1px solid rgba(255,255,255,.1);
}

.footer .fb .lk {
  width:210px;
  color:var(--paper);
  margin-bottom:26px;
}

.footer .floc {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.66);
  margin-bottom:26px;
}

.footer .fnav {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.footer h4 {
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin:0 0 22px;
}

.footer .cset {
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(20px,3vw,48px);
}

.footer .cset ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:13px;
  font-size:14px;
}

.footer .cset li {
  color:var(--slate);
}

.footer .fbot {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding-top:30px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.5);
}

.footer .fbot .soc {
  display:flex;
  gap:20px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

@media(max-width:880px) {
  .footer .ftop {
    grid-template-columns:1fr 1fr;
    gap:34px 24px;
  }
  .footer .fb {
    grid-column:1 / -1;
  }
}

.rv {
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease);
}

.rv.in {
  opacity:1;
  transform:none;
}

.rv.x1 {
  transition-delay:.08s;
}

.rv.x2 {
  transition-delay:.18s;
}

.rv.x3 {
  transition-delay:.28s;
}

.clip {
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--d4) var(--ease);
}

.clip.in {
  clip-path:inset(0 0 0 0);
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration:.001s!important;
    animation-iteration-count:1!important;
  }
  .rv,.clip {
    opacity:1;
    transform:none;
    clip-path:none;
  }
  .line>span {
    transform:none;
  }
  .hero .bg img,.hero .bg video {
    transform:none;
  }
  html {
    scroll-behavior:auto;
  }
}

.section {
  padding:var(--sp) 0;
}

.sec-eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.sec-eyebrow .dot {
  color:transparent;
  width:10px;
  height:10px;
  display:inline-block;
  position:relative;
  font-size:0;
}

.sec-eyebrow .dot::before {
  content:"";
  position:absolute;
  inset:0;
  background:var(--signal);
  clip-path:polygon(0 0,0 100%,100% 100%);
}

.statement {
  background:var(--ink);
  padding:clamp(78px,12vh,160px) 0;
  border-top:1px solid rgba(255,255,255,.07);
}

.statement .big {
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(23px,3vw,46px);
  line-height:1.3;
  letter-spacing:-0.02em;
  color:rgba(255,255,255,.72);
  max-width:26ch;
  margin:0;
  text-wrap:pretty;
}

.statement .big b {
  font-weight:500;
  color:var(--paper);
}

.statement .big .accent {
  color:var(--signal);
  font-style:italic;
}

.locstrip {
  background:var(--graphite);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.locstrip .wrap {
  display:flex;
  align-items:center;
  gap:24px;
  padding-top:20px;
  padding-bottom:20px;
  flex-wrap:wrap;
}

.locstrip .lbl {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.locstrip .cities {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(16px,1.7vw,21px);
  letter-spacing:-0.01em;
  color:var(--paper);
}

.locstrip .cities .sep {
  color:var(--signal);
}

.positioning {
  background:var(--paper);
  color:var(--ink);
}

.positioning .grid {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(36px,6vw,96px);
  align-items:start;
}

.positioning h2 {
  margin:0 0 26px;
}

.positioning p {
  color:var(--slate);
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.66;
  margin:0 0 18px;
  max-width:48ch;
}

.positioning .suptag {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
  margin-top:6px;
}

.stats {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  background:transparent;
}

.stat {
  background:transparent;
  padding:clamp(22px,3vw,40px);
  border:1px solid var(--mist);
  margin:0 -1px -1px 0;
}

.stat .n {
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(40px,4.8vw,76px);
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--ink);
}

.stat .n .plus {
  color:var(--signal);
}

.stat .l {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  margin-top:12px;
}

@media(max-width:860px) {
  .positioning .grid {
    grid-template-columns:1fr;
    gap:40px;
  }
}

.approach {
  background:var(--ink);
}

.approach .ahead {
  max-width:64ch;
  margin-bottom:clamp(40px,6vh,72px);
}

.approach .ahead h2 {
  color:var(--paper);
  margin:0 0 18px;
}

.approach .ahead p {
  color:rgba(255,255,255,.6);
  font-size:clamp(15px,1.3vw,19px);
  max-width:54ch;
  margin:0;
}

.acards {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1);
}

.acard {
  grid-column:span 2;
  background:var(--ink);
  padding:clamp(26px,2.3vw,40px);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:background var(--d2);
}

.acard:nth-child(4),.acard:nth-child(5) {
  grid-column:span 3;
}

.acard:hover {
  background:#262a2e;
}

.acard .num {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.16em;
  color:var(--signal);
}

.acard h3 {
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(19px,1.5vw,25px);
  line-height:1.12;
  letter-spacing:-0.015em;
  color:var(--paper);
  margin:0;
}

.acard p {
  color:rgba(255,255,255,.62);
  font-size:14px;
  line-height:1.58;
  margin:0;
}

.acard .gain {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
}

.acard .gain b {
  color:var(--signal);
  font-weight:500;
}

@media(max-width:980px) {
  .acards {
    grid-template-columns:repeat(2,1fr);
  }
  .acard,.acard:nth-child(4),.acard:nth-child(5) {
    grid-column:auto;
  }
  .acard:nth-child(5) {
    grid-column:1 / -1;
  }
}

@media(max-width:600px) {
  .acards {
    grid-template-columns:1fr;
  }
  .acard,.acard:nth-child(4),.acard:nth-child(5) {
    grid-column:auto;
  }
}

.markets {
  background:var(--paper);
  color:var(--ink);
}

.markets .mhead {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:end;
  margin-bottom:clamp(28px,4vh,48px);
}

.markets .mhead h2 {
  margin:0;
}

.markets .mhead p {
  color:var(--slate);
  max-width:42ch;
  margin:0;
  font-size:clamp(15px,1.2vw,18px);
}

.mlist {
  border-top:1px solid var(--mist);
}

.mlist a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(15px,1.7vw,25px) 4px;
  border-bottom:1px solid var(--mist);
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(23px,3.3vw,46px);
  letter-spacing:-0.025em;
  color:var(--ink);
  transition:padding-left var(--d2),color var(--d2);
}

.mlist a:hover {
  color:var(--signal);
}

.mlist a .ar {
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--steel);
  opacity:0;
  transition:opacity var(--d2),transform var(--d2),color var(--d2);
}

.mlist a:hover .ar {
  opacity:1;
  color:var(--signal);
  transform:translateX(4px);
}

@media(max-width:760px) {
  .markets .mhead {
    grid-template-columns:1fr;
    gap:14px;
  }
}

.studios {
  background:var(--ink);
}

.studios .shead {
  margin-bottom:clamp(40px,6vh,68px);
  max-width:62ch;
}

.studios .shead h2 {
  color:var(--paper);
  margin:0 0 18px;
}

.studios .shead p {
  color:rgba(255,255,255,.6);
  max-width:56ch;
  margin:0;
  font-size:clamp(15px,1.3vw,19px);
}

.scards {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1);
}

.scard {
  background:var(--ink);
  padding:clamp(22px,1.7vw,30px);
  display:flex;
  flex-direction:column;
  gap:15px;
  min-height:296px;
  transition:background var(--d2);
}

.scard:hover {
  background:#262a2e;
}

.scard .dot {
  width:12px;
  height:12px;
  background:var(--studio,var(--signal));
  clip-path:polygon(0 0,0 100%,100% 100%);
}

.scard h3 {
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(18px,1.35vw,22px);
  line-height:1.12;
  letter-spacing:-0.015em;
  color:var(--paper);
  margin:0;
}

.scard .focus {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}

.scard .promise {
  font-family:var(--font-display);
  font-weight:300;
  font-style:italic;
  font-size:15px;
  line-height:1.42;
  color:rgba(255,255,255,.86);
  margin-top:auto;
}

@media(max-width:1100px) {
  .scards {
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:560px) {
  .scards {
    grid-template-columns:1fr;
  }
}

.services {
  background:var(--paper);
  color:var(--ink);
}

.services .shead {
  margin-bottom:clamp(28px,4vh,46px);
  max-width:62ch;
}

.services .shead h2 {
  margin:0 0 18px;
}

.services .shead p {
  color:var(--slate);
  max-width:50ch;
  margin:0;
  font-size:clamp(15px,1.2vw,18px);
}

.sindex {
  display:block;
  border-top:1px solid var(--mist);
}

.sindex a {
  display:flex;
  align-items:baseline;
  gap:clamp(14px,1.6vw,26px);
  padding:clamp(16px,1.9vw,30px) 4px;
  border-bottom:1px solid var(--mist);
  transition:color var(--d2);
}

.sindex a:hover {
  color:var(--signal);
}

.sindex a .si-n {
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--steel);
  flex:none;
  width:26px;
}

.sindex a:hover .si-n {
  color:var(--signal);
}

.sindex a .si-t {
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(22px,3vw,44px);
  letter-spacing:-0.022em;
}

.sindex a .si-pj {
  display:none;
}

.services .sindex {
  position:relative;
}

.svc-preview {
  position:absolute;
  right:0;
  top:0;
  z-index:5;
  width:clamp(178px,15vw,222px);
  aspect-ratio:4/5;
  border-radius:6px;
  overflow:hidden;
  pointer-events:none;
  background:#101010;
  opacity:0;
  transform:translateY(-50%) scale(.96);
  transition:opacity .3s var(--ease),transform .45s var(--ease),top .5s var(--ease);
  box-shadow:0 24px 56px rgba(0,0,0,.5);
}

.svc-preview.show {
  opacity:1;
  transform:translateY(-50%) scale(1);
}

.svc-preview img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.svc-preview .svc-cap {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  padding:18px 16px 15px;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0));
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.2;
}

.svc-preview .svc-cap .ar {
  color:var(--signal);
  font-size:13px;
}

@media(max-width:760px) {
  .sindex a .si-pj {
    display:none;
  }
}

.gcard .ph {
  background-image:url("../img/card-fallback.jpg");
  background-size:cover;
  background-position:center;
}

.gcard .meta .cats span {
  cursor:default;
}

.videofeature {
  position:relative;
  min-height:clamp(480px,82vh,840px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--ink);
  text-align:center;
}

.videofeature .bg {
  position:absolute;
  inset:0;
}

.videofeature .bg img {
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.5;
}

.videofeature .grade {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,rgba(20,20,20,.28),rgba(20,20,20,.85));
}

.videofeature .vf {
  position:relative;
  z-index:2;
  padding:0 var(--gut);
  max-width:760px;
}

.videofeature .vf .eyebrow {
  display:block;
  margin-bottom:26px;
  color:rgba(255,255,255,.72);
}

.videofeature .vplaywrap {
  display:inline-block;
}

.videofeature .vplay {
  position:relative;
  overflow:hidden;
  width:86px;
  height:86px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  display:grid;
  place-items:center;
  margin:0 auto 32px;
  transition:border-color var(--d2),transform var(--d2);
}

.videofeature .vplay::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--signal);
  clip-path:circle(var(--r,0%) at var(--px,50%) var(--py,50%));
  transition:clip-path var(--t,.55s) var(--ease);
  z-index:0;
}

.videofeature .vplaywrap:hover .vplay {
  border-color:var(--signal);
  transform:scale(1.07);
}

html:not(.jsdir) .videofeature .vplaywrap:hover .vplay::before {
  --r:150%;
}

.videofeature .vplay svg {
  position:relative;
  z-index:1;
  width:21px;
  height:21px;
  margin-left:4px;
  fill:var(--paper);
}

.videofeature h2 {
  color:var(--paper);
  margin:0 0 18px;
}

.videofeature p {
  color:rgba(255,255,255,.74);
  max-width:48ch;
  margin:0 auto 32px;
  font-size:clamp(15px,1.3vw,18px);
}

.trustband {
  background:var(--graphite);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.trustband .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-top:clamp(28px,4vh,46px);
  padding-bottom:clamp(28px,4vh,46px);
  flex-wrap:wrap;
}

.trustband .tb-lbl {
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.trustband .creds {
  display:flex;
  flex-wrap:wrap;
  gap:13px;
}

.trustband .creds span {
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(15px,1.5vw,21px);
  letter-spacing:.02em;
  color:var(--paper);
  padding:7px 15px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:3px;
}

.footer .ftop {
  grid-template-columns:1.5fr repeat(4,1fr);
}

.footer .fbrand {
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.45;
  color:rgba(255,255,255,.78);
  max-width:32ch;
  margin:22px 0 22px;
}

@media(max-width:980px) {
  .footer .ftop {
    grid-template-columns:1fr 1fr;
  }
  .footer .fb {
    grid-column:1 / -1;
  }
}

.gcard .ph {
  display:block;
}

.gcard .meta {
  display:block;
}

.statement {
  padding:clamp(72px,11vh,140px) 0;
}

.statement .big {
  font-size:clamp(26px,3.4vw,52px);
  line-height:1.26;
  max-width:30ch;
  color:rgba(255,255,255,.82);
}

.acard {
  position:relative;
}

.acard::after {
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  height:2px;
  width:0;
  background:var(--signal);
  transition:width .5s var(--ease);
}

.acard:hover::after {
  width:100%;
}

.scard {
  position:relative;
  transition:background var(--d2);
}

.scard::after {
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  height:2px;
  width:0;
  background:var(--studio,var(--signal));
  transition:width .5s var(--ease);
  z-index:2;
}

.scard:hover::after {
  width:100%;
}

.mlist a {
  position:relative;
}

.mlist a::after {
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  height:2px;
  width:0;
  background:var(--signal);
  transition:width .5s var(--ease);
}

.mlist a:hover::after {
  width:100%;
}

.sindex a {
  position:relative;
  justify-content:flex-start;
}

.sindex a .si-go {
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--signal);
  opacity:0;
  transform:translateX(-6px);
  transition:opacity var(--d2),transform var(--d2);
}

.sindex a:hover .si-go {
  opacity:1;
  transform:translateX(0);
}

.stat {
  position:relative;
  transition:border-color var(--d2);
}

.stat:hover {
  border-color:var(--slate);
  z-index:2;
}

.section h2, .work .whead h2, .editorial h2 {
  margin-top:0;
}

.sindex a::after {
  content:"\2192";
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--signal);
  opacity:0;
  transform:translateX(-6px);
  transition:opacity var(--d2),transform var(--d2);
  align-self:center;
}

.sindex a:hover::after {
  opacity:1;
  transform:translateX(0);
}

.sindex a::before {
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  height:2px;
  width:0;
  background:var(--signal);
  transition:width .5s var(--ease);
}

.sindex a:hover::before {
  width:100%;
}

:root {
  --sp:clamp(70px,9vh,124px);
  --sp-s:clamp(46px,6vh,82px);
}

.clip {
  clip-path:none;
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease);
}

.clip.in {
  opacity:1;
  transform:none;
  clip-path:none;
}

.dl {
  font-size:clamp(31px,3.9vw,62px);
  line-height:1.06;
  letter-spacing:-0.022em;
}

.dxl {
  font-size:clamp(37px,5.1vw,78px);
  line-height:1.03;
  letter-spacing:-0.03em;
}

.dm {
  font-size:clamp(25px,2.8vw,42px);
  line-height:1.1;
}

.statement .big {
  font-size:clamp(21px,2.5vw,38px);
  line-height:1.34;
  max-width:40ch;
}

.markets .mlist a {
  font-size:clamp(20px,2.3vw,38px);
}

.stat .n {
  font-size:clamp(34px,3.8vw,60px);
}

.sindex a .si-t {
  font-size:clamp(21px,2.8vw,42px);
}

.acard h3 {
  font-size:clamp(17px,1.3vw,21px);
  line-height:1.15;
}

.scard h3 {
  font-size:clamp(16px,1.2vw,20px);
}

.videofeature h2 {
  font-size:clamp(26px,3vw,46px);
}

.dl,.dxl,.dm,.statement .big,.markets .mlist a,.stat .n {
  padding-bottom:.08em;
}

#wash {
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--paper);
}

body {
  background:transparent;
}

.statement,.locstrip,.positioning,.approach,.markets,.studios,.services, #projects,#insights,.cta,.footer,#people,.trustband {
  background:transparent!important;
}

.xfade::before {
  display:none!important;
}

.approach {
  color:var(--ink);
}

.approach .sec-eyebrow {
  color:var(--slate);
}

.approach .ahead h2 {
  color:var(--ink);
}

.approach .ahead p {
  color:var(--slate);
}

.acards {
  background:transparent;
  border:none;
  gap:0;
}

.acard {
  background:transparent;
  border:1px solid var(--mist);
  margin:0 -1px -1px 0;
}

.acard:hover {
  background:rgba(20,20,20,.03);
}

.acard h3 {
  color:var(--ink);
}

.acard p {
  color:var(--slate);
}

.acard .gain {
  color:var(--slate);
  border-top-color:var(--mist);
}

.acard .gain b {
  color:var(--signal);
}

.studios {
  color:var(--ink);
}

.studios .sec-eyebrow {
  color:var(--slate);
}

.studios .shead h2 {
  color:var(--ink);
}

.studios .shead p {
  color:var(--slate);
}

.scards {
  background:transparent;
  border:none;
  gap:0;
}

.scard {
  background:transparent;
  border:1px solid var(--mist);
  margin:0 -1px -1px 0;
}

.scard:hover {
  background:rgba(20,20,20,.03);
}

.scard h3 {
  color:var(--ink);
}

.scard .focus {
  color:var(--slate);
}

.scard .promise {
  color:var(--slate);
}

.trustband .tb-lbl {
  color:var(--slate);
}

.trustband .creds span {
  color:var(--ink);
  border-color:var(--mist);
}

.statement .big {
  color:var(--slate);
}

.statement .big b {
  color:var(--ink);
}

.statement {
  border-top-color:rgba(0,0,0,.06);
}

.locstrip {
  border-top-color:rgba(0,0,0,.08);
  border-bottom-color:rgba(0,0,0,.08);
}

.locstrip .lbl {
  color:var(--slate);
}

.locstrip .cities {
  color:var(--ink);
}

.approach .ag {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,110px);
  align-items:center;
}

.approach .amedia .fr {
  position:relative;
  overflow:hidden;
  aspect-ratio:5/6;
  background:var(--mist);
}

.approach .amedia .fr img {
  width:100%;
  height:100%;
  object-fit:cover;
  will-change:transform;
}

.approach .ahead {
  max-width:none;
  margin-bottom:0;
}

@media(max-width:880px) {
  .approach .ag {
    grid-template-columns:1fr;
    gap:42px;
  }
  .approach .amedia {
    order:-1;
  }
  .approach .amedia .fr {
    aspect-ratio:4/3;
  }
}

.services {
  color:var(--paper);
}

.services .shead p {
  color:rgba(255,255,255,.62);
}

.sindex {
  border-top-color:rgba(255,255,255,.14);
}

.sindex a {
  border-bottom-color:rgba(255,255,255,.14);
  color:var(--paper);
}

.sindex a .si-n {
  color:rgba(255,255,255,.5);
}

.sindex a:hover {
  color:var(--signal);
}

.sindex a:hover .si-n {
  color:var(--signal);
}

.dl,.dxl,.dm {
  font-weight:500;
}

.gcard .meta h3 {
  font-weight:500;
}

#casestudy .grade {
  background:linear-gradient(0deg,rgba(18,18,18,.95) 0%,rgba(18,18,18,.88) 24%,rgba(18,18,18,.62) 52%,rgba(18,18,18,.34) 78%,rgba(18,18,18,.42) 100%);
}

#casestudy h2,.cta h2 {
  font-weight:300;
  font-size:clamp(46px,8vw,116px);
  line-height:.92;
  letter-spacing:-0.045em;
  padding-bottom:.1em;
}

#casestudy h2 {
  max-width:none;
}

#casestudy .sub {
  font-size:clamp(16px,1.2vw,18px);
  line-height:1.55;
  color:rgba(255,255,255,.85);
}

#casestudy .sub:first-of-type {
  max-width:48ch;
}

#casestudy .bwrap {
  text-shadow:0 1px 34px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.35);
}

.cta h2 {
  color:var(--ink);
}

.footer {
  border-top-color:var(--mist);
}

.footer a {
  color:var(--slate);
}

.footer a:hover {
  color:var(--signal);
}

.footer .fb .lk {
  color:var(--brand-gray);
}

.footer .fbrand {
  color:var(--slate);
}

.footer .floc {
  color:var(--slate);
}

.footer h4 {
  color:var(--steel);
}

.footer .ftop {
  border-bottom-color:var(--mist);
}

.footer .fbot {
  color:var(--steel);
}

.rv,.clip {
  opacity:0;
  translate:0 26px;
  transition:opacity .5s var(--ease),translate .5s var(--ease);
}

.rv.in,.clip.in {
  opacity:1;
  translate:0 0;
}

@media(prefers-reduced-motion:reduce) {
  .rv,.clip {
    opacity:1;
    translate:none;
    transition:none;
  }
}

.vh {
  position:absolute!important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}