/* ==========================================================================
   michaelcjenkins.com canonical black/orange design
   Dark, agency-grade, single long page. Real ASC 4x4 footage and stills.
   Reference read: Ross Halfin Photography — near-black, heavy condensed
   uppercase display, minimal chrome, the photograph doing the work.
   ========================================================================== */

@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
}
@font-face{
  font-family:"Martian";
  src:url("fonts/martian-mono-latin.woff2") format("woff2-variations");
  font-weight:300 700; font-display:swap;
}

:root{
  --bk:#080809;
  --bk-2:#0E0F11;
  --bk-3:#16181B;
  --wh:#F6F6F4;
  --dim:rgb(246 246 244 / .58);
  --faint:rgb(246 246 244 / .34);
  --rule:rgb(246 246 244 / .13);
  --hot:#E8562A;          /* single accent — oxide orange, off the Defender */
  --gut:clamp(18px,4.4vw,64px);
  --max:1560px;
  --e:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bk); color:var(--wh);
  font-family:"Archivo",-apple-system,sans-serif;
  font-synthesis-weight:none; line-height:1.5; overflow-x:clip;
}
img,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
::selection{background:var(--hot); color:#fff}

.eyebrow{
  margin:0 0 18px; font-family:"Martian",monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.h2{
  margin:0; font-weight:800; font-stretch:82%;
  font-size:clamp(2rem,5.4vw,4.6rem); line-height:.96; letter-spacing:-.025em;
  text-transform:uppercase;
}
.note{
  margin:clamp(22px,3vw,34px) 0 0; font-family:"Martian",monospace;
  font-size:10px; letter-spacing:.09em; color:var(--faint);
}

/* ============================ BAR ============================ */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:60px; display:flex; align-items:center; gap:18px;
  padding:0 var(--gut);
  background:linear-gradient(180deg,rgb(8 8 9 / .9),rgb(8 8 9 / 0));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.bar__mark{font-weight:900; font-stretch:74%; letter-spacing:.015em; word-spacing:.11em; font-size:16px; white-space:nowrap}
.bar__nav{display:flex; align-items:center; gap:clamp(14px,2vw,30px); margin-left:auto}
.bar__nav a{
  font-family:"Martian",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); transition:color .3s var(--e);
}
.bar__nav a:hover{color:var(--wh)}
.bar__toggle{display:none}
.bar__cta{
  font-family:"Martian",monospace; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; padding:10px 16px; border:1px solid var(--rule);
  border-radius:2px; transition:background .3s var(--e),border-color .3s var(--e);
}
.bar__nav .bar__cta{color:var(--wh)}
.bar__cta:hover{background:var(--hot); border-color:var(--hot)}

/* ============================ HERO ============================ */
/* The bar is fixed at 60px, and the hero justifies its content to the bottom.
   When the headline is tall the block overflows upward and runs underneath
   the bar. Reserving the bar height as top padding keeps text clear of it at
   every size. */
.hero{position:relative; min-height:100svh; padding-top:60px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden}
.hero__v{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgb(8 8 9 / .74) 0%,rgb(8 8 9 / .22) 34%,rgb(8 8 9 / .80) 82%,var(--bk) 100%),
    linear-gradient(90deg,rgb(8 8 9 / .70),transparent 62%);
}
.hero__in{
  position:relative; z-index:2; width:100%; max-width:var(--max);
  margin:0 auto; padding:0 var(--gut) clamp(26px,4vh,48px);
}
.kicker{
  display:flex; align-items:center; gap:9px; margin:0 0 clamp(18px,2.4vw,26px);
  font-family:"Martian",monospace; font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--dim);
}
.live{
  width:6px; height:6px; border-radius:50%; background:var(--hot);
  box-shadow:0 0 0 0 rgb(232 86 42 / .6); animation:p 2.4s var(--e) infinite;
}
@keyframes p{70%{box-shadow:0 0 0 9px rgb(232 86 42 / 0)}100%{box-shadow:0 0 0 0 rgb(232 86 42 / 0)}}

.hero__h{
  margin:0; font-weight:900; font-stretch:70%; text-transform:uppercase;
  max-width:22ch; font-size:clamp(2.6rem,6.2vw,6.6rem); line-height:.88; letter-spacing:-.025em;
  text-wrap:balance; word-spacing:.07em;
}
.hero__h span{display:block; overflow:hidden}
.hero__h .thin{font-weight:300; font-stretch:88%; color:var(--dim)}
.hero__p{
  margin:clamp(20px,2.6vw,30px) 0 0; max-width:48ch;
  font-size:clamp(.95rem,1.15vw,1.1rem); color:var(--dim);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:11px; margin-top:clamp(24px,3vw,34px)}
.btn{
  font-family:"Martian",monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:15px 26px; background:var(--hot); color:#fff; border-radius:2px;
  transition:transform .3s var(--e),filter .3s var(--e);
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.12)}
.btn--g{background:transparent; border:1px solid var(--rule); color:var(--wh)}
.btn--g:hover{border-color:var(--wh); background:rgb(246 246 244 / .06)}

.ticker{
  position:relative; z-index:2; margin:0; padding:14px var(--gut);
  list-style:none; display:flex; gap:clamp(20px,3vw,44px); flex-wrap:wrap;
  border-top:1px solid var(--rule);
  font-family:"Martian",monospace; font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint);
}

/* ============================ SECTIONS ============================ */
.sec{max-width:var(--max); margin:0 auto; padding:clamp(76px,12vh,150px) var(--gut) 0}
.sec__head{max-width:70ch; margin-bottom:clamp(32px,4.6vw,60px)}
.sec__lede{margin:clamp(16px,2vw,24px) 0 0; max-width:60ch; font-size:clamp(.95rem,1.1vw,1.08rem); color:var(--dim)}
.sec__lede a{color:var(--wh); border-bottom:1px solid var(--hot)}
.stats{margin:clamp(16px,2vw,22px) 0 0; font-family:"Martian",monospace; font-size:11px; letter-spacing:.1em; color:var(--dim)}
.stats b{color:var(--wh); font-weight:700}
.stats i{color:var(--faint); font-style:normal; margin:0 6px}

/* secondary portfolio and capabilities pages */
.page-hero{min-height:68svh; display:flex; align-items:flex-end; max-width:var(--max); margin:0 auto; padding:120px var(--gut) clamp(58px,9vh,110px)}
.page-hero__inner{max-width:1050px}
.page-hero .hero__h{max-width:16ch}
.page-hero .hero__p{max-width:62ch}
.project-list{display:grid; gap:clamp(42px,7vw,90px)}
.project-card{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:clamp(24px,5vw,72px); align-items:center; padding-top:clamp(24px,3vw,38px); border-top:1px solid var(--rule)}
.project-card__media{margin:0; background:var(--bk-2); overflow:hidden}
.project-card__media img,.project-card__media video{width:100%; aspect-ratio:16/9; object-fit:cover}
.project-card__body h2{margin:0; font-size:clamp(2rem,4.8vw,4.4rem); line-height:.92; font-weight:900; font-stretch:72%; text-transform:uppercase}
.project-card__body p{margin:18px 0 0; max-width:48ch; color:var(--dim)}
.project-card__meta{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; font-family:"Martian",monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.project-card--portrait .project-card__media{aspect-ratio:16/9; background:#101012}
.project-card--portrait .project-card__media img{height:100%; object-fit:cover; object-position:center 38%; transition:transform .9s var(--e)}
.project-card--portrait .project-card__media:hover img{transform:scale(1.035)}
.project-card__link{display:inline-flex; gap:12px; align-items:center; margin-top:28px; padding-bottom:6px; border-bottom:1px solid var(--hot); font-family:"Martian",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase}

/* Past work — an editorial current, not a portfolio card grid. The alternating
   chapters push attention diagonally while the progress line and sideways
   still rail preserve forward momentum between projects. */
.portfolio-root,.portfolio-page{overflow-x:clip}
.portfolio-page{background:#060607}
.work-progress{position:fixed; top:0; left:0; right:0; z-index:80; height:2px; background:transparent; pointer-events:none}
.work-progress i{display:block; width:0; height:100%; background:var(--hot); box-shadow:0 0 22px rgb(232 86 42 / .75)}
.work-hero{position:relative; height:100svh; min-height:680px; overflow:hidden; display:flex; align-items:flex-end}
.work-hero__film,.work-hero__shade{position:absolute; inset:0; width:100%; height:100%}
.work-hero__film{object-fit:cover; object-position:center; filter:saturate(.78) contrast(1.06)}
.work-hero__shade{background:linear-gradient(180deg,rgb(6 6 7 / .36),rgb(6 6 7 / .08) 35%,rgb(6 6 7 / .92) 100%),linear-gradient(90deg,rgb(6 6 7 / .8),transparent 67%)}
.work-hero__copy{position:relative; z-index:2; width:100%; max-width:var(--max); margin:0 auto; padding:100px var(--gut) clamp(48px,8vh,90px)}
.work-hero__copy h1{margin:0; max-width:10ch; font-size:clamp(4.3rem,10.3vw,10.5rem); font-weight:900; font-stretch:66%; line-height:.76; letter-spacing:-.05em; text-transform:uppercase}
.work-hero__copy>p:not(.eyebrow){max-width:44ch; margin:clamp(26px,3vw,42px) 0 0; color:var(--dim); font-size:clamp(1rem,1.25vw,1.18rem)}
.work-hero__actions{display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; margin-top:clamp(30px,4vw,48px)}
.work-hero__actions button,.work-hero__actions a{appearance:none; border:0; border-bottom:1px solid var(--hot); border-radius:0; padding:0 0 7px; background:transparent; color:var(--wh); font:600 10px/1.3 "Martian",monospace; letter-spacing:.13em; text-transform:uppercase; cursor:pointer}
.work-hero__actions button span,.work-hero__actions a span{display:inline-block; margin-right:8px; color:var(--hot); transition:transform .35s var(--e)}
.work-hero__actions button:hover span,.work-hero__actions a:hover span{transform:translate(3px,-3px)}
.work-hero__stamp{position:absolute; z-index:2; right:var(--gut); bottom:clamp(48px,8vh,90px); margin:0; writing-mode:vertical-rl; font:500 8px/1 "Martian",monospace; letter-spacing:.25em; color:var(--faint)}
.work-manifesto{max-width:var(--max); min-height:78svh; margin:0 auto; padding:clamp(100px,17vh,210px) var(--gut); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center; border-bottom:1px solid var(--rule)}
.work-manifesto p{margin:0; max-width:19ch; font-size:clamp(2.5rem,6.2vw,6.7rem); font-weight:320; font-stretch:84%; line-height:.95; letter-spacing:-.035em; text-transform:uppercase}
.work-manifesto b{font-weight:900; font-stretch:68%; color:var(--hot)}
.work-manifesto span{align-self:end; font:500 9px/1 "Martian",monospace; letter-spacing:.18em; color:var(--faint)}
.work-stream{position:relative; height:150svh; max-width:none; margin:0; padding:0 var(--gut); overflow:clip; perspective:1400px; perspective-origin:50% 43%; background:radial-gradient(ellipse at 50% 44%,rgb(232 86 42 / .08),transparent 39%),linear-gradient(180deg,#060607,#090707 48%,#060607); border-block:1px solid var(--rule)}
.work-stream::before{content:""; position:absolute; inset:0; opacity:.35; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),rgb(246 246 244 / .035) 12.5%)}
.work-stream__intro{position:sticky; z-index:18; top:74px; height:0; max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; align-items:start; pointer-events:none}
.work-stream__intro p{margin:22px 0 0}
.work-stream__intro>p:last-child{max-width:27ch; color:var(--faint); text-align:right; font:500 8px/1.5 "Martian",monospace; letter-spacing:.12em; text-transform:uppercase}
.work-stream__axis{position:sticky; z-index:20; top:calc(100svh - 28px); height:1px; max-width:var(--max); margin:0 auto; overflow:hidden; background:var(--rule); pointer-events:none}
.work-stream__axis i{display:block; width:100%; height:100%; background:var(--hot); transform:scaleX(var(--room-progress,0)); transform-origin:left; box-shadow:0 0 20px rgb(232 86 42 / .55)}
.work-stream__axis::after{content:""; position:absolute; top:-3px; left:calc(var(--room-phase,0) * 100%); width:7px; height:7px; border-radius:50%; background:var(--wh); box-shadow:0 0 calc(8px + var(--magnet-force,0) * 20px) rgb(232 86 42 / .9); transform:translateX(-50%) scale(calc(1 + var(--magnet-force,0) * .55)); transition:box-shadow .18s linear,transform .18s linear}
.work-stream.is-magnet-moving .work-stream__axis::after{background:var(--hot)}
.work-stream.is-magnet-locked .work-stream__axis::after{box-shadow:0 0 28px rgb(232 86 42 / 1)}
.work-stream__nav{position:absolute; z-index:5; inset:0; width:100%; height:100%; margin:0; overflow:hidden; pointer-events:none}
.work-stream__nav button{position:absolute; top:0; display:grid; place-items:center; width:clamp(52px,6.5vw,92px); height:100%; padding:0; border:0; color:var(--wh); background:transparent; opacity:.22; transition:opacity .16s var(--e),background .16s var(--e); pointer-events:auto; cursor:pointer}
.work-stream__nav button:first-child{left:0; background:linear-gradient(90deg,rgb(232 86 42 / .16),transparent)}
.work-stream__nav button:last-child{right:0; background:linear-gradient(270deg,rgb(232 86 42 / .16),transparent)}
.work-stream__nav button span{display:grid; place-items:center; width:34px; aspect-ratio:1; border:1px solid rgb(246 246 244 / .45); border-radius:50%; background:rgb(6 6 7 / .52); font:500 17px/1 "Martian",monospace; backdrop-filter:blur(8px)}
.work-stream__nav button:hover,.work-stream__nav button:focus-visible,.work-stream.is-orienting .work-stream__nav button{opacity:1}
.work-stream[data-work-direction="previous"] .work-stream__nav button:first-child,.work-stream[data-work-direction="next"] .work-stream__nav button:last-child{opacity:1; background-color:rgb(232 86 42 / .3)}
.work-stream__nav button:disabled{opacity:.06; cursor:default}
.work-chapter{--distance:0; --abs-distance:0; --chapter-top:clamp(96px,11vh,126px); --chapter-copy-height:clamp(168px,22svh,220px); position:sticky; top:0; width:min(calc(100vw - 2 * var(--gut)),1560px); height:100svh; min-height:700px; margin:0 auto; padding:var(--chapter-top) 0 28px; display:grid; grid-template-rows:minmax(0,1fr) var(--chapter-copy-height); row-gap:18px; align-content:center; transform-style:preserve-3d; pointer-events:none}
.work-chapter:not(:first-of-type){margin-top:-100svh}
.work-chapter__media{position:relative; z-index:1; grid-row:1; width:min(100%,1420px,calc((100svh - var(--chapter-top) - var(--chapter-copy-height) - 46px) * 16 / 9)); height:auto; max-height:100%; aspect-ratio:16/9; margin:auto; overflow:hidden; background:var(--bk-2); border:1px solid rgb(246 246 244 / .13); box-shadow:0 55px 140px rgb(0 0 0 / .66),0 0 0 1px rgb(232 86 42 / calc(.18 - min(var(--abs-distance),1) * .12)); transform-origin:center; transform:translate3d(calc(var(--distance) * 76vw),calc(var(--abs-distance) * 2vh),calc(var(--abs-distance) * -380px)) rotateY(calc(var(--distance) * -15deg)) scale(calc(1 - min(var(--abs-distance),1) * .16)); opacity:calc(1 - min(var(--abs-distance),1) * .58); filter:saturate(calc(1 - min(var(--abs-distance),1) * .48)) brightness(calc(1 - min(var(--abs-distance),1) * .33)); transition:filter .35s var(--e),box-shadow .45s var(--e); will-change:transform,opacity; pointer-events:auto}
.work-chapter.is-current{z-index:10}
.work-chapter.is-current .work-chapter__media:hover{box-shadow:0 70px 180px rgb(0 0 0 / .72),0 0 0 1px rgb(232 86 42 / .5)}
.work-chapter__media::before{content:"PLAY"; position:absolute; z-index:3; left:50%; top:50%; display:grid; place-items:center; width:76px; aspect-ratio:1; border:1px solid rgb(246 246 244 / .46); border-radius:50%; background:rgb(6 6 7 / .28); backdrop-filter:blur(8px); color:var(--wh); font:600 9px/1 "Martian",monospace; letter-spacing:.14em; transform:translate(-50%,-50%) scale(.85); opacity:0; transition:opacity .3s var(--e),transform .4s var(--e); pointer-events:none}
.work-chapter__media:hover::before{opacity:1; transform:translate(-50%,-50%) scale(1)}
.work-chapter__media::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 0 1px rgb(246 246 244 / .08),inset 0 -70px 100px rgb(0 0 0 / .2)}
.work-chapter__media video{display:block; width:100%; height:100%; object-fit:cover}
.work-chapter__copy{position:relative; z-index:2; grid-row:2; display:grid; grid-template-columns:minmax(260px,.9fr) minmax(300px,1.15fr) minmax(310px,.8fr); gap:clamp(24px,4vw,72px); align-items:start; width:min(100%,1420px); height:100%; min-height:0; margin:0 auto; padding:4px 0 0; opacity:0; transform:translate3d(calc(var(--distance) * 20vw),14px,0); transition:opacity .24s var(--e),transform .42s var(--e); will-change:transform,opacity; pointer-events:none}
.work-chapter.is-settled .work-chapter__copy{opacity:1; transform:translate3d(0,0,0); pointer-events:auto}
.work-chapter__number{grid-column:1; margin:5px 0 0; font:500 9px/1.4 "Martian",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--hot)}
.work-chapter h2,.work-chapter--left h2{grid-column:1; margin:10px 0 0; max-width:none; font-size:clamp(2.6rem,4.5vw,5.4rem); font-weight:900; font-stretch:65%; line-height:.77; letter-spacing:-.045em; text-transform:uppercase; text-wrap:balance}
.work-chapter__copy>p:not(.work-chapter__number){grid-column:2; grid-row:1 / span 2; max-width:47ch; margin:4px 0 0; color:var(--dim); font-size:clamp(.94rem,1.1vw,1.08rem)}
.work-chapter dl{grid-column:3; grid-row:1 / span 2; margin:0; border-top:1px solid var(--rule)}
.work-chapter dl div{display:grid; grid-template-columns:72px 1fr; gap:18px; padding:11px 0; border-bottom:1px solid var(--rule)}
.work-chapter dt{font:500 8px/1.5 "Martian",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.work-chapter dd{margin:0; font-size:.8rem; color:var(--dim)}
.photo-current{min-height:112svh; padding:clamp(90px,12vh,150px) 0 clamp(80px,11vh,130px); overflow:hidden; border-bottom:1px solid var(--rule)}
.photo-current__head{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.photo-current__head h2{margin:0; max-width:13ch; font-size:clamp(3rem,7.5vw,8rem); line-height:.82; font-weight:900; font-stretch:67%; letter-spacing:-.045em; text-transform:uppercase}
.photo-current__head>p:last-child{max-width:47ch; margin:28px 0 0; color:var(--dim)}
.photo-current__carousel{width:100%; margin-top:clamp(55px,8vw,100px); overflow:hidden; cursor:grab; touch-action:pan-y}
.photo-current__carousel:active{cursor:grabbing}
.photo-current__rail{display:flex; align-items:center; gap:clamp(14px,2vw,32px); width:max-content; padding:0; transform:translate3d(var(--photo-shift,0),0,0); will-change:transform}
.photo-current__image{position:relative; flex:0 0 auto; width:clamp(310px,36vw,620px); height:clamp(310px,52vh,610px); margin:0; overflow:hidden; background:var(--bk-2)}
.photo-current__image--wide{width:clamp(480px,58vw,940px)}
.photo-current__image--portrait{width:clamp(250px,27vw,440px)}
.photo-current__image img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e)}
.photo-current__image:hover img{transform:scale(1.025)}
.photo-current__image figcaption{position:absolute; z-index:2; inset:auto 0 0; display:flex; justify-content:space-between; gap:20px; padding:42px 18px 16px; background:linear-gradient(transparent,rgb(6 6 7 / .82)); color:var(--wh); font:500 8px/1.4 "Martian",monospace; letter-spacing:.1em; text-transform:uppercase; pointer-events:none}
.photo-current__image figcaption b{font:inherit; color:var(--hot)}
.photo-current__image figcaption span{text-align:right}
.kd-portal{max-width:var(--max); min-height:100svh; margin:0 auto; padding:clamp(100px,16vh,190px) var(--gut); display:grid; grid-template-columns:minmax(270px,.58fr) minmax(0,1.2fr); gap:clamp(50px,10vw,160px); align-items:center; overflow:hidden}
.kd-portal figure{position:relative; z-index:2; width:min(100%,520px); margin:0; aspect-ratio:9/16; overflow:hidden; box-shadow:30px 30px 0 rgb(232 86 42 / .13)}
.kd-portal video{width:100%; height:100%; object-fit:cover}
.kd-portal h2{margin:0 0 0 -10vw; font-size:clamp(3.8rem,9vw,9.5rem); line-height:.76; font-weight:900; font-stretch:65%; letter-spacing:-.05em; text-transform:uppercase}
.kd-portal div>p:not(.eyebrow){max-width:42ch; margin:32px 0 0; color:var(--dim)}
.kd-portal a{display:inline-block; margin-top:36px; padding-bottom:7px; border-bottom:1px solid var(--hot); font:600 10px/1.3 "Martian",monospace; letter-spacing:.13em; text-transform:uppercase}
.work-index{max-width:var(--max); margin:0 auto; padding:clamp(100px,16vh,190px) var(--gut)}
.work-index__head{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); gap:clamp(40px,8vw,120px); align-items:end}
.work-index__head h2{margin:0; font-size:clamp(3.3rem,8vw,8.5rem); line-height:.79; font-weight:900; font-stretch:65%; letter-spacing:-.05em; text-transform:uppercase}
.work-index__head>p{max-width:40ch; margin:0; color:var(--dim)}
.work-filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(50px,7vw,90px)}
.work-filters button{appearance:none; padding:10px 14px; border:1px solid var(--rule); background:transparent; color:var(--faint); font:500 8px/1 "Martian",monospace; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:color .25s var(--e),background .25s var(--e),border-color .25s var(--e)}
.work-filters button:hover,.work-filters button.is-active{color:var(--wh); background:var(--hot); border-color:var(--hot)}
.work-index__list{margin:22px 0 0; padding:0; list-style:none; border-top:1px solid var(--rule)}
.work-index__list li{display:grid; grid-template-columns:52px minmax(180px,.7fr) minmax(220px,1fr) auto; gap:clamp(16px,3vw,50px); align-items:center; min-height:66px; padding:14px 0; border-bottom:1px solid var(--rule); transition:opacity .3s var(--e),padding .3s var(--e),background .3s var(--e)}
.work-index__list li:hover{padding-left:12px; background:linear-gradient(90deg,rgb(232 86 42 / .09),transparent 70%)}
.work-index__list li[hidden]{display:none}
.work-index__list span{font:500 8px/1 "Martian",monospace; color:var(--hot)}
.work-index__list b{font-size:clamp(1rem,1.4vw,1.3rem); font-weight:820; font-stretch:82%; text-transform:uppercase}
.work-index__list em{font-style:normal; color:var(--faint); font-size:.86rem}
.work-index__list a{font:500 8px/1 "Martian",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--wh)}

/* Kimono Dave project — a vertical, motion-first counterpoint to the automotive site. */
.kd-hero{position:relative; min-height:100svh; max-width:var(--max); margin:0 auto; padding:clamp(110px,14vh,150px) var(--gut) clamp(50px,8vh,90px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(310px,.55fr); gap:clamp(40px,8vw,130px); align-items:center; overflow:hidden}
.kd-hero__copy{position:relative; z-index:2}
.kd-hero h1{margin:0; max-width:9ch; font-size:clamp(4rem,9vw,9.2rem); line-height:.78; letter-spacing:-.045em; font-stretch:66%; font-weight:900; text-transform:uppercase}
.kd-hero__copy>p:not(.eyebrow){max-width:48ch; margin:clamp(26px,3vw,42px) 0 0; color:var(--dim); font-size:clamp(1rem,1.35vw,1.2rem)}
.kd-jump{display:inline-flex; align-items:center; gap:16px; margin-top:clamp(28px,4vw,48px); padding-bottom:7px; border-bottom:1px solid var(--hot); font-family:"Martian",monospace; font-size:10px; letter-spacing:.15em; text-transform:uppercase}
.kd-hero__media{margin:0; justify-self:end; width:min(100%,520px); aspect-ratio:9/16; overflow:hidden; background:var(--bk-2); box-shadow:34px 34px 0 rgb(232 86 42 / .12)}
.kd-hero__media video{width:100%; height:100%; object-fit:cover}
.kd-hero__index{position:absolute; left:var(--gut); bottom:-.16em; margin:0; font-size:clamp(12rem,28vw,31rem); line-height:.6; font-weight:900; font-stretch:65%; color:rgb(232 86 42 / .035); pointer-events:none}
.kd-brief{max-width:var(--max); margin:0 auto; padding:clamp(90px,14vh,170px) var(--gut); display:grid; grid-template-columns:minmax(220px,.5fr) minmax(0,1.25fr); gap:clamp(32px,7vw,120px); border-top:1px solid var(--rule)}
.kd-brief>h2{grid-column:2; margin:0; max-width:14ch; font-size:clamp(2.8rem,6.5vw,6.6rem); font-weight:900; font-stretch:72%; line-height:.89; letter-spacing:-.03em; text-transform:uppercase}
.kd-brief>.eyebrow{grid-column:1; grid-row:1}
.kd-brief__copy{grid-column:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,60px); color:var(--dim); font-size:clamp(1rem,1.2vw,1.15rem)}
.kd-brief__copy p{margin:0}
.kd-facts{grid-column:1/-1; margin:clamp(55px,8vw,100px) 0 0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.kd-facts div{padding:22px 18px 26px 0; border-right:1px solid var(--rule)}
.kd-facts div:not(:first-child){padding-left:18px}
.kd-facts div:last-child{border:0}
.kd-facts dt{font-family:"Martian",monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--hot)}
.kd-facts dd{margin:10px 0 0; font-weight:750; line-height:1.25}
.kd-films{max-width:var(--max); margin:0 auto; padding:clamp(90px,13vh,160px) var(--gut)}
.kd-films__head{display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:clamp(40px,6vw,80px)}
.kd-films__head h2{margin:0; font-size:clamp(3.4rem,8vw,8.2rem); line-height:.8; font-weight:900; font-stretch:68%; text-transform:uppercase}
.kd-film-player{display:grid; grid-template-columns:minmax(300px,.6fr) minmax(300px,.8fr); gap:clamp(32px,8vw,120px); align-items:center}
.kd-film-player__frame{position:relative; justify-self:center; width:min(100%,520px); aspect-ratio:9/16; background:var(--bk-2); overflow:hidden}
.kd-film-player__frame video{width:100%; height:100%; object-fit:cover}
.kd-film-player__number{position:absolute; right:-.02em; bottom:-.18em; font-size:clamp(8rem,17vw,17rem); line-height:1; font-weight:900; font-stretch:65%; color:rgb(246 246 244 / .07); pointer-events:none}
.kd-film-player__copy h3{margin:0; max-width:10ch; font-size:clamp(3rem,7.6vw,7.7rem); line-height:.84; font-weight:900; font-stretch:70%; letter-spacing:-.035em; text-transform:uppercase}
.kd-film-player__copy>p:last-child{max-width:42ch; margin:26px 0 0; color:var(--dim); font-size:clamp(1rem,1.25vw,1.16rem)}
.kd-film-selector{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(55px,8vw,100px); background:var(--rule); border:1px solid var(--rule)}
.kd-film-selector button{appearance:none; display:grid; grid-template-columns:90px 1fr; gap:18px; align-items:center; min-width:0; margin:0; padding:12px; border:0; background:var(--bk); color:var(--dim); text-align:left; cursor:pointer; transition:background .3s var(--e),color .3s var(--e)}
.kd-film-selector button:hover,.kd-film-selector button.is-active{background:var(--bk-3); color:var(--wh)}
.kd-film-selector button.is-active{box-shadow:inset 0 -3px 0 var(--hot)}
.kd-film-selector img{width:90px; aspect-ratio:9/12; object-fit:cover; filter:saturate(.65); transition:filter .3s var(--e)}
.kd-film-selector button:hover img,.kd-film-selector button.is-active img{filter:saturate(1)}
.kd-film-selector span{font-size:clamp(1rem,1.45vw,1.3rem); font-weight:800; text-transform:uppercase}
.kd-film-selector b{display:block; margin-bottom:8px; font-family:"Martian",monospace; font-size:9px; letter-spacing:.14em; color:var(--hot)}
.kd-strip{max-width:var(--max); margin:0 auto; padding:0 var(--gut) clamp(90px,14vh,170px); display:grid; grid-template-columns:minmax(200px,.75fr) minmax(260px,1fr) minmax(200px,.75fr); gap:clamp(18px,4vw,58px); align-items:center}
.kd-strip figure{margin:0; aspect-ratio:9/14; overflow:hidden}
.kd-strip figure:last-child{transform:translateY(10%)}
.kd-strip img{width:100%; height:100%; object-fit:cover}
.kd-strip>p{margin:0; font-size:clamp(2.2rem,5.2vw,5.2rem); line-height:.9; font-weight:900; font-stretch:72%; letter-spacing:-.03em; text-transform:uppercase}
.capability-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.capability-card{padding:clamp(24px,4vw,58px); background:var(--bk-2)}
.capability-card--primary{background:var(--bk-3); box-shadow:inset 3px 0 0 var(--hot)}
.capability-card span{font-family:"Martian",monospace; color:var(--hot); font-size:9px; letter-spacing:.12em; text-transform:uppercase}
.capability-card h2{margin:12px 0 0; font-size:clamp(1.6rem,3.3vw,3.2rem); line-height:.95; font-weight:900; font-stretch:76%; text-transform:uppercase}
.capability-card p{margin:18px 0 0; color:var(--dim); max-width:52ch}
.capability-card ul{margin:22px 0 0; padding:0; list-style:none}
.capability-card li{padding:10px 0; border-top:1px solid var(--rule); color:var(--dim)}

/* work grid — asymmetric, images do the work */
.grid{display:grid; gap:clamp(8px,1vw,14px); grid-template-columns:repeat(6,1fr)}
.g{margin:0; position:relative; overflow:hidden; background:var(--bk-2)}
.g img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e)}
.g:hover img{transform:scale(1.035)}
.g figcaption{
  position:absolute; left:0; bottom:0; padding:10px 12px;
  font-family:"Martian",monospace; font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--wh);
  background:linear-gradient(0deg,rgb(8 8 9 / .82),transparent);
  width:100%;
}
.g--a{grid-column:span 4; aspect-ratio:16/9}
.g--b{grid-column:span 2; aspect-ratio:3/4}
.g--c{grid-column:span 2; aspect-ratio:1/1}
.g--d{grid-column:span 2; aspect-ratio:1/1}
.g--e{grid-column:span 2; aspect-ratio:1/1}
.g--f{grid-column:span 6; aspect-ratio:21/9}
.grid--masonry{display:block; columns:2; column-gap:clamp(8px,1vw,14px)}
.grid--masonry .g{break-inside:avoid; margin:0 0 clamp(8px,1vw,14px); aspect-ratio:auto}
.grid--masonry .g img{display:block; width:100%; height:auto; object-fit:contain}
.grid--masonry .g--wide{column-span:all}

/* instagram embeds */
.embeds{
  display:grid; gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  align-items:start;
}
.embeds .instagram-media{margin:0 !important; min-width:0 !important; max-width:100% !important; width:100% !important}

/* account proof */
.account-proof{margin-bottom:clamp(62px,8vw,110px)}
.account-kpis{display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--rule); background:var(--rule); gap:1px}
.account-kpis>div{background:var(--bk-2); padding:clamp(16px,2.2vw,28px) clamp(12px,1.5vw,20px); min-width:0}
.account-kpis b{display:block; font-size:clamp(1.35rem,2.5vw,2.6rem); font-weight:900; font-stretch:74%; letter-spacing:-.03em; overflow-wrap:anywhere}
.account-kpis span{display:block; margin-top:5px; font-family:"Martian",monospace; color:var(--faint); font-size:9px; letter-spacing:.11em; text-transform:uppercase}
.trend-panel{margin-top:16px; border:1px solid var(--rule); background:var(--bk-2); padding:clamp(18px,2.4vw,34px)}
.trend-panel__head{display:flex; justify-content:space-between; align-items:end; gap:30px}
.trend-panel__head .eyebrow{margin-bottom:8px}
.trend-panel__head h3,.post-intro h3{margin:0; font-size:clamp(1.15rem,2.1vw,1.8rem); font-weight:800; font-stretch:84%; text-transform:uppercase}
.trend-panel__head>p{max-width:44ch; margin:0; color:var(--dim); font-size:.78rem}
.trend{height:250px; display:grid; grid-template-columns:repeat(13,minmax(42px,1fr)); gap:clamp(5px,1vw,14px); align-items:end; margin-top:34px; padding-top:24px; border-bottom:1px solid var(--rule); overflow-x:auto; overflow-y:hidden}
.trend__item{height:100%; min-width:42px; display:flex; flex-direction:column; justify-content:end; align-items:center; position:relative}
.trend__value{font-family:"Martian",monospace; font-size:8px; color:var(--faint); writing-mode:vertical-rl; transform:rotate(180deg); max-height:62px; margin-bottom:7px}
.trend__bar{display:block; width:min(100%,42px); min-height:3px; background:rgb(246 246 244 / .24)}
.trend__item.is-managed .trend__bar{background:var(--hot)}
.trend__item b{font-family:"Martian",monospace; font-size:8px; letter-spacing:.08em; color:var(--faint); margin:8px 0 7px}
.trend__bar--start::before{content:"I started"; position:absolute; left:-1px; top:0; font-family:"Martian",monospace; font-size:8px; letter-spacing:.08em; color:var(--hot); white-space:nowrap; transform:translateX(-15%)}
.comparison{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); margin-top:24px; border:1px solid var(--rule)}
.comparison__period{background:var(--bk); padding:clamp(16px,2vw,26px)}
.comparison__period--managed{box-shadow:inset 3px 0 0 var(--hot)}
.comparison__period>p{margin:0 0 18px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px}
.comparison__period>p b{text-transform:uppercase; font-size:.92rem}
.comparison__period>p span{font-family:"Martian",monospace; font-size:9px; color:var(--faint)}
.comparison dl{margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px 12px}
.comparison dl div{min-width:0}
.comparison dt{font-family:"Martian",monospace; color:var(--faint); font-size:8px; letter-spacing:.08em; text-transform:uppercase}
.comparison dd{margin:4px 0 0; font-weight:800; font-stretch:78%; font-size:clamp(.95rem,1.6vw,1.3rem); overflow-wrap:anywhere}
.comparison dl small{display:block; margin-top:5px; color:var(--faint); font-family:"Martian",monospace; font-size:7px; line-height:1.45; letter-spacing:.02em}
.comparison__note{grid-column:1/-1; margin:0; padding:12px 15px; background:var(--bk-3); color:var(--faint); font-family:"Martian",monospace; font-size:8px; line-height:1.5; letter-spacing:.05em}
.monthly-detail{margin-top:16px; border:1px solid var(--rule); background:var(--bk)}
.monthly-detail summary{cursor:pointer; padding:15px 18px; font-family:"Martian",monospace; font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim)}
.monthly-detail summary::marker{color:var(--hot)}
.monthly-table-wrap{overflow:auto; border-top:1px solid var(--rule)}
.monthly-detail table{border-collapse:collapse; width:100%; min-width:1050px; font-variant-numeric:tabular-nums}
.monthly-detail caption{text-align:left; padding:14px 16px; color:var(--faint); font-size:.76rem}
.monthly-detail th,.monthly-detail td{padding:10px 12px; border-top:1px solid var(--rule); text-align:right; white-space:nowrap; font-size:.76rem}
.monthly-detail thead th{font-family:"Martian",monospace; font-size:7px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); border-top:0}
.monthly-detail th:first-child,.monthly-detail td:nth-child(2){text-align:left}
.monthly-detail tbody tr.is-managed{background:rgb(232 86 42 / .07)}
.monthly-detail tbody tr.is-managed th:first-child{box-shadow:inset 3px 0 0 var(--hot)}
.post-intro{max-width:70ch; margin-bottom:30px; border-top:1px solid var(--rule); padding-top:24px}
.post-intro .eyebrow{margin-bottom:10px}
.post-intro>p:last-child{margin:12px 0 0; color:var(--dim); font-size:.9rem}

/* services */
.service-explorer{position:relative}
/* Three rows, not two: the head and the ownership statements are both pinned,
   and the index/panel row between them is what scrolls. The ownership block
   used to sit outside this container, which left a screen of empty black
   between the last service panel and it. */
.service-explorer__sticky{
  position:sticky; top:60px; height:calc(100svh - 60px); min-height:620px;
  display:grid; grid-template-rows:auto 1fr auto; gap:clamp(18px,2.2vh,28px);
  align-content:start; align-items:stretch; padding:clamp(14px,2vh,22px) 0 clamp(20px,2.6vh,30px);
}
/* Pinned to the bottom of the sticky frame, separated by a rule rather than by
   a gap of empty space. */
.service-explorer__sticky .ownership{
  align-self:end; margin:0; padding-top:clamp(14px,1.8vh,22px);
  border-top:1px solid var(--rule);
}
/* Slightly smaller here than it was as a standalone section: it is a pinned
   footer inside a fixed-height frame now, sharing the viewport with the head
   and the panel row. */
.service-explorer__sticky .ownership p{font-size:clamp(.95rem,1.35vw,1.28rem)}
/* The middle row is the only one allowed to give: on a short laptop the head
   and the pinned footer would otherwise squeeze it into overflow. */
.service-explorer__body{min-height:0; overflow:auto; scrollbar-width:none}
.service-explorer__body::-webkit-scrollbar{display:none}
/* Same column template and gap as __body below, so the lede sits in exactly
   the same column as the service panel. They previously used different
   ratios (.8/1.2 vs .62/1.38), which put the lede 94px to the right of the
   panel it sits above. */
.service-explorer__head{display:grid; grid-template-columns:minmax(250px,.62fr) minmax(420px,1.38fr); grid-template-rows:auto auto; column-gap:clamp(42px,7vw,120px); row-gap:10px; align-items:start}
.service-explorer__head .eyebrow{grid-column:1 / -1; grid-row:1; margin:0}
.service-explorer__head .h2{grid-column:1; grid-row:2; max-width:12ch; font-size:clamp(2rem,3.8vw,3.65rem)}
/* The headline is four lines tall and sets this row's height, so a
   start-aligned lede floated at the top with a large gap above the panel
   below. Bottom-aligning it puts the lede directly above the body row,
   separated by the sticky grid's own gap — the same rhythm as everything
   else in this section. */
.service-explorer__head .sec__lede{grid-column:2; grid-row:2; align-self:end; margin:0; max-width:56ch}
/* start, not center: a centred panel floated 61px below the lede while the
   service index beside it sat 22px below. Both columns now begin on the
   same line, one gap under the head. */
.service-explorer__body{display:grid; grid-template-columns:minmax(250px,.62fr) minmax(420px,1.38fr); gap:clamp(42px,7vw,120px); min-height:0; align-items:start}
.service-index{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.service-index li{border-bottom:1px solid var(--rule)}
.service-index button{
  width:100%; display:grid; grid-template-columns:2.8rem 1fr; align-items:center; gap:.5rem;
  padding:clamp(6px,.78vh,10px) 0; border:0; background:transparent; color:var(--faint);
  font-family:"Archivo",sans-serif; font-size:clamp(.86rem,1.12vw,1.08rem); font-weight:760;
  font-stretch:82%; line-height:1.05; letter-spacing:.005em; text-align:left; text-transform:uppercase;
  cursor:pointer; transition:color .3s var(--e),padding-left .3s var(--e);
}
.service-index button span{font-family:"Martian",monospace; font-size:8px; letter-spacing:.12em; color:var(--faint); transition:color .3s var(--e)}
.service-index button:hover{color:var(--dim); padding-left:5px}
.service-index button:focus-visible{outline:2px solid var(--hot); outline-offset:-2px; color:var(--wh)}
.service-index button[data-active="true"]{color:var(--wh); padding-left:12px}
.service-index button[data-active="true"] span{color:var(--hot)}
/* start, not center: this wrapper sits in column two beside the service
   index, and centring it pushed the panel 61px below the lede while the
   index beside it sat 22px below. Both columns now start on the same line. */
.service-stage{position:relative; min-height:0; align-self:start; display:flex; flex-direction:column; justify-content:flex-start; overflow:hidden}
.service-stage::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 65% 45%,rgb(232 86 42 / .09),transparent 44%)}
.service-stage__count{position:absolute; z-index:2; top:1px; right:0; margin:0; font-family:"Martian",monospace; font-size:10px; letter-spacing:.15em; color:var(--faint)}
.service-stage__count span{color:var(--hot)}
.service-panels{position:relative; flex:none; min-height:0; height:var(--service-panel-height,300px); transition:height .45s var(--e)}
.service-panel{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-start;
  opacity:0; visibility:hidden; transform:translateY(34px); transition:opacity .5s var(--e),transform .5s var(--e),visibility 0s linear .5s;
}
.service-panel.is-active{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.service-panel__type{font-family:"Martian",monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--hot)}
.service-panel__number{
  position:absolute; top:50%; right:-.03em; transform:translateY(-54%); z-index:-1;
  font-size:clamp(12rem,23vw,24rem); font-weight:900; font-stretch:70%; line-height:.7;
  letter-spacing:-.09em; color:rgb(246 246 244 / .025); user-select:none;
}
.service-panel h3{max-width:11ch; margin:clamp(12px,1.5vw,20px) 0 0; font-size:clamp(2.65rem,5.1vw,5rem); font-weight:900; font-stretch:70%; line-height:.86; letter-spacing:-.035em; text-transform:uppercase; text-wrap:balance}
.service-panel p{max-width:58ch; margin:clamp(16px,2vw,26px) 0 0; color:var(--dim); font-size:clamp(.92rem,1.08vw,1.08rem); line-height:1.58}
.service-stage__progress{position:relative; flex:none; width:100%; height:1px; margin-top:clamp(16px,2vh,24px); background:var(--rule)}
.service-stage__progress i{display:block; width:10%; height:100%; background:var(--hot); transition:width .4s var(--e)}
/* The extra runway holds panel 10 for one complete trigger step before the sticky frame releases. */
.service-triggers{height:calc(12.75 * 40svh - 120px); margin-top:calc(-100svh + 60px); pointer-events:none; scroll-snap-type:y proximity}
.service-triggers i{display:block; height:40svh; scroll-snap-align:center}
.own,.ownership{
  margin:clamp(38px,5vw,64px) 0 0; padding-top:20px; border-top:1px solid var(--rule);
  font-size:clamp(1.05rem,1.8vw,1.5rem); font-weight:800; font-stretch:86%; text-transform:uppercase; letter-spacing:-.015em;
}
.ownership{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,70px)}
.ownership p{margin:0}
.ownership b{color:var(--hot)}

/* pricing */
.tiers{display:grid; gap:clamp(10px,1.2vw,16px); grid-template-columns:repeat(3,1fr)}
.tier{border:1px solid var(--rule); padding:clamp(18px,1.8vw,26px); background:var(--bk-2); display:flex; flex-direction:column}
.tier--hi{border-color:var(--hot); background:var(--bk-3)}
.tier h3{margin:0; font-size:.95rem; font-weight:800; font-stretch:88%; text-transform:uppercase; letter-spacing:-.005em}
.tier__p{margin:.7em 0 .6em; font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:900; font-stretch:76%; letter-spacing:-.03em}
.tier__p i{font-style:normal; font-size:.42em; font-weight:500; color:var(--faint); letter-spacing:0}
/* :last-of-type, not :last-child. The ASC case-study cards end with a "View the
   scope" link, so :last-child matched the <a> and never the description — those
   four descriptions were rendering at the inherited 16px full-strength white
   while the packages cards got the intended 13.44px at 58%. Same component, two
   different looks on one page. */
.tier p:last-of-type{margin:0; font-size:.84rem; color:var(--dim); line-height:1.5}
.tier>a{margin-top:auto; padding-top:18px; font-family:"Martian",monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--hot)}

/* Three recurring programs, then the one-time build as a full-width band.
   Four equal cards in a three-column grid left the fourth stranded beside two
   empty cells. The band closes that hole and says something true while doing
   it: the website build is a one-off project, not a fourth subscription, so it
   reads as a footer to the programs rather than a peer of them.

   Laid out sideways — kicker and headline left, detail right — so spanning the
   full width makes it short rather than tall. */
.tier--band{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  column-gap:clamp(24px,5vw,72px);
  align-items:center;
}
.tier--band h3{grid-column:1; grid-row:1}
.tier--band .tier__p{grid-column:1; grid-row:2; margin:.35em 0 0}
.tier--band p:last-of-type{grid-column:2; grid-row:1/3; margin:0}

/* The case-study band carries a trailing link, so its description gives up the
   second row to it. .tier>a normally uses margin-top:auto to sink to the bottom
   of a flex column; in a grid that would push it away from the text it belongs
   to, so it is reset and placed directly under the description instead. */
.tiers--case .tier--band p:last-of-type{grid-row:1}
.tiers--case .tier--band>a{grid-column:2; grid-row:2; margin-top:0; padding-top:12px; justify-self:start}

/* how */
.how{display:grid; gap:clamp(22px,3vw,44px); grid-template-columns:repeat(3,1fr)}
.how h3{margin:0 0 .5em; font-size:clamp(1rem,1.5vw,1.26rem); font-weight:800; font-stretch:88%; text-transform:uppercase}
.how p{margin:0; font-size:.92rem; color:var(--dim); line-height:1.55}

/* about + owner questions */
.about .sec__head{max-width:78ch}
.questions{margin-top:clamp(48px,7vw,90px); max-width:980px}
.questions>h3{margin:0 0 28px; font-size:clamp(1.7rem,3.6vw,3.2rem); font-weight:850; font-stretch:78%; text-transform:uppercase}
.questions details{border-top:1px solid var(--rule)}
.questions details:last-child{border-bottom:1px solid var(--rule)}
.questions summary{list-style:none; cursor:pointer; position:relative; padding:20px 46px 20px 0; font-size:clamp(1rem,1.35vw,1.18rem); font-weight:800; font-stretch:86%; text-transform:uppercase}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+"; position:absolute; right:3px; top:15px; color:var(--hot); font-family:"Martian",monospace; font-size:20px}
.questions details[open] summary::after{content:"−"}
.questions details p{max-width:68ch; margin:0; padding:0 46px 22px 0; color:var(--dim)}

/* contact */
.end{max-width:var(--max); margin:0 auto; padding:clamp(90px,15vh,180px) var(--gut) clamp(50px,8vh,90px)}
.end__h{margin:0; font-weight:900; font-stretch:70%; text-transform:uppercase; font-size:clamp(2.6rem,10vw,9rem); line-height:.86; letter-spacing:-.03em}
.end__p{margin:clamp(20px,2.4vw,28px) 0 0; max-width:46ch; color:var(--dim); font-size:clamp(.95rem,1.15vw,1.1rem)}
.end__l{display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,44px); margin-top:clamp(30px,4vw,46px)}
.end__l a{font-size:clamp(1.1rem,2.2vw,1.9rem); font-weight:800; font-stretch:84%; border-bottom:2px solid var(--hot); padding-bottom:3px}
.end__f{margin:clamp(46px,7vw,80px) 0 0; padding-top:20px; border-top:1px solid var(--rule); font-family:"Martian",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}

/* reveal */
[data-r]{opacity:0; transform:translateY(24px); transition:opacity .9s var(--e),transform .9s var(--e)}
[data-r].in{opacity:1; transform:none}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1100px){
  .tiers{grid-template-columns:repeat(2,1fr)}
  /* The generic two-column fallback would strand the third program the same way
     four cards stranded the fourth. Three programs need three columns or one;
     they hold up narrow because each is a heading and two lines. */
  /* Both of these grids are three cards plus a full-width band. The generic
     two-column fallback would stand the third card up alone and move the hole
     rather than close it. */
  .tiers--programs,
  .tiers--case{grid-template-columns:repeat(3,1fr)}
  .service-explorer__head,.service-explorer__body{grid-template-columns:minmax(220px,.7fr) minmax(360px,1.3fr); gap:clamp(30px,5vw,70px)}
  .how{grid-template-columns:1fr}
  .account-kpis{grid-template-columns:repeat(3,1fr)}
  .comparison dl{grid-template-columns:repeat(3,1fr)}
  .work-chapter__copy{grid-template-columns:minmax(220px,.8fr) minmax(280px,1.2fr)}
  .work-chapter dl{grid-column:1/-1; grid-row:3; display:grid; grid-template-columns:repeat(2,1fr); margin-top:4px}
  .work-chapter dl div{padding:8px 0}
}
@media (max-width:980px){
  .bar{height:64px; padding:0 var(--gut); background:rgb(8 8 9 / .94)}
  .bar__toggle{position:relative; display:grid; place-content:center; gap:4px; width:42px; height:42px; margin-left:auto; padding:0; color:var(--wh); background:rgb(255 255 255 / .025); border:1px solid var(--rule); border-radius:2px; cursor:pointer}
  .bar__toggle span{display:block; width:18px; height:1px; background:currentColor; transform-origin:center; transition:transform .25s var(--e),opacity .2s var(--e)}
  .bar__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .bar__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .bar__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .bar__nav{position:absolute; top:64px; left:var(--gut); right:var(--gut); display:flex; align-items:stretch; flex-direction:column; gap:0; margin:0; padding:10px 18px 18px; background:rgb(12 12 13 / .98); border:1px solid var(--rule); box-shadow:0 24px 70px rgb(0 0 0 / .55); opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none; transition:opacity .22s var(--e),transform .22s var(--e),visibility .22s}
  .bar__nav.is-open{opacity:1; visibility:visible; transform:none; pointer-events:auto}
  .bar__nav a{display:flex; align-items:center; min-height:46px; border-bottom:1px solid var(--rule); color:var(--dim)}
  .bar__nav a[aria-current="page"]{color:var(--wh)}
  .bar__nav .bar__cta{justify-content:center; min-height:48px; margin-top:12px; padding:0 12px; color:var(--wh); background:var(--hot); border:1px solid var(--hot)}
}
@media (max-width:760px){
  .hero{min-height:auto; justify-content:flex-start; padding-top:92px}
  .hero__in{padding-top:22px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .g--a,.g--f{grid-column:span 2; aspect-ratio:16/10}
  .g--b,.g--c,.g--d,.g--e{grid-column:span 1; aspect-ratio:1/1}
  .grid--masonry{display:block; columns:1}
  .tiers{grid-template-columns:1fr}
  /* Single column here, so the band has no width to lay out sideways in and
     stacks like every other card. This rule sits after the 1100px override on
     purpose: both selectors carry the same specificity, so source order is what
     lets one column win on a phone. */
  /* Scoped with .tiers--case rather than left on .tier--band alone. The
     desktop rules that place the case band's description and link are
     two-class selectors, so a one-class override loses to them even inside
     this media query and the band stayed in two columns on a phone. */
  .tier--band{grid-template-columns:1fr}
  .tier--band h3,
  .tier--band .tier__p,
  .tier--band p:last-of-type,
  .tier--band>a{grid-column:1}
  .tier--band p:last-of-type{grid-row:auto; margin-top:.7em}
  .tiers--case .tier--band p:last-of-type{grid-column:1; grid-row:auto}
  .tiers--case .tier--band>a{grid-column:1; grid-row:auto; padding-top:18px}
  .service-explorer__sticky{position:static; height:auto; min-height:0; display:block; padding:0}
  .service-explorer__head{display:block; margin-bottom:clamp(30px,8vw,48px)}
  .service-explorer__head .h2{max-width:none; font-size:clamp(2rem,10vw,3.5rem)}
  .service-explorer__head .sec__lede{margin-top:18px}
  .service-explorer__body{display:block}
  .service-index{display:none}
  .service-stage{min-height:0; overflow:visible}
  .service-stage::before,.service-stage__count,.service-stage__progress,.service-panel__number{display:none}
  .service-panels{min-height:0}
  .service-panel{position:relative; inset:auto; display:block; padding:24px 0 30px; border-top:1px solid var(--rule); opacity:1; visibility:visible; transform:none}
  .service-panel:last-child{border-bottom:1px solid var(--rule)}
  .service-panel h3{max-width:none; margin:10px 0 0; font-size:clamp(1.35rem,7vw,2rem); line-height:.95}
  .service-panel p{margin:14px 0 0; font-size:.94rem; line-height:1.55}
  .service-triggers{display:none}
  .account-kpis{grid-template-columns:repeat(2,1fr)}
  .trend-panel__head{display:block}
  .trend-panel__head>p{margin-top:12px}
  .comparison,.ownership{grid-template-columns:1fr}
  .page-hero{min-height:auto; padding-top:112px}
  .project-card{grid-template-columns:1fr}
  .work-hero{height:auto; min-height:100svh}
  .work-hero__copy{padding-top:130px}
  .work-hero__copy h1{font-size:clamp(4rem,18vw,6.7rem)}
  .work-hero__stamp{display:none}
  .work-manifesto{min-height:auto; grid-template-columns:1fr; padding-top:110px; padding-bottom:110px}
  .work-manifesto p{font-size:clamp(2.4rem,11vw,4.6rem)}
  .work-stream{height:auto; padding:90px var(--gut); perspective:none; background:#060607}
  .work-stream::before,.work-stream__axis,.work-stream__nav{display:none}
  .work-stream__intro{position:relative; top:auto; height:auto; display:block; margin-bottom:68px}
  .work-stream__intro>p:last-child{margin-top:12px; max-width:none; text-align:left}
  .work-chapter,.work-chapter--left{position:relative; top:auto; width:100%; height:auto; min-height:0; display:grid; grid-template-rows:auto auto; gap:0; margin:0; padding:0 0 100px; transform:none}
  .work-chapter:not(:first-of-type){margin-top:0}
  .work-chapter__media{grid-row:1; width:100%; height:auto; aspect-ratio:16/9; transform:none; opacity:1; filter:none; box-shadow:0 22px 70px rgb(0 0 0 / .5)}
  .work-chapter__copy,.work-chapter.is-settled .work-chapter__copy{grid-row:2; display:block; width:100%; min-height:0; padding-top:20px; opacity:1; transform:none; pointer-events:auto}
  .work-chapter__number{margin:0 0 9px}
  .work-chapter h2,.work-chapter--left h2{margin:0; font-size:clamp(3rem,15vw,5.5rem)}
  .work-chapter__copy>p:not(.work-chapter__number){margin:18px 0 0}
  .work-chapter dl{display:block; margin-top:24px}
  .work-chapter dl div{display:grid}
  .photo-current__head h2{font-size:clamp(3.3rem,15vw,6rem)}
  .photo-current{min-height:auto}
  .photo-current__carousel{overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; touch-action:pan-x pan-y}
  .photo-current__carousel::-webkit-scrollbar{display:none}
  .photo-current__rail{width:max-content; transform:none}
  .photo-current__image{width:78vw; height:58vh; scroll-snap-align:center}
  .photo-current__image--wide{width:88vw}
  .photo-current__image--portrait{width:68vw}
  .kd-portal{min-height:auto; grid-template-columns:1fr; padding-top:100px; padding-bottom:100px}
  .kd-portal figure{justify-self:center; width:min(78vw,420px)}
  .kd-portal h2{margin:0; font-size:clamp(3.8rem,17vw,6.6rem)}
  .work-index__head{grid-template-columns:1fr}
  .work-index__head h2{font-size:clamp(3.4rem,16vw,6.2rem)}
  .work-index__list li{grid-template-columns:34px 1fr auto; gap:12px}
  .work-index__list em{grid-column:2 / -1; grid-row:2}
  .work-index__list a{grid-column:3; grid-row:1}
  .kd-hero{min-height:auto; grid-template-columns:1fr; padding-top:110px}
  .kd-hero h1{font-size:clamp(3.7rem,20vw,6.5rem)}
  .kd-hero__media{justify-self:center; width:min(82vw,440px)}
  .kd-hero__index{display:none}
  .kd-brief{grid-template-columns:1fr}
  .kd-brief>.eyebrow,.kd-brief>h2,.kd-brief__copy{grid-column:1}
  .kd-brief>.eyebrow{grid-row:auto}
  .kd-brief__copy{grid-template-columns:1fr}
  .kd-facts{grid-column:1; grid-template-columns:repeat(2,1fr)}
  .kd-facts div:nth-child(2){border-right:0}
  .kd-facts div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .kd-film-player{grid-template-columns:1fr}
  .kd-film-player__frame{width:min(82vw,440px)}
  .kd-film-selector{grid-template-columns:1fr}
  .kd-film-selector button{grid-template-columns:64px 1fr}
  .kd-film-selector img{width:64px; aspect-ratio:1}
  .kd-strip{grid-template-columns:1fr 1fr}
  .kd-strip>p{grid-column:1/-1; grid-row:1}
  .kd-strip figure:last-child{transform:translateY(0)}
  .capability-grid{grid-template-columns:1fr}
  .comparison dl{grid-template-columns:repeat(2,1fr)}
  .bar__mark{font-size:14px}
  .hero__h{max-width:100%; font-size:clamp(2.35rem,11.4vw,4.25rem); line-height:.92; letter-spacing:-.015em; word-spacing:.08em; text-wrap:pretty}
  .hero__p{max-width:38ch}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  [data-r]{opacity:1; transform:none}
  html{scroll-behavior:auto}
  .service-panel{transition:none}
  .work-chapter__media{opacity:1; transform:none}
  .photo-current__rail{transform:none !important}
}
:focus-visible{outline:2px solid var(--hot); outline-offset:3px}

/* per-post metrics strip -------------------------------------------------- */
.post{margin:0; display:flex; flex-direction:column; min-width:0}
.metrics{background:var(--rule); border:1px solid var(--rule); border-top:0}
.metrics__head{display:block; background:var(--bk-3); padding:13px 12px}
.metrics__head>b{display:block; font-size:.82rem; font-weight:800; text-transform:uppercase}
.metrics__head>span{display:block; margin-top:3px; font-family:"Martian",monospace; font-size:8px; line-height:1.5; letter-spacing:.07em; text-transform:uppercase; color:var(--faint)}
.metrics__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border-top:1px solid var(--rule)}
.metrics__grid span{
  background:var(--bk-2); padding:12px 8px; text-align:center;
  font-family:"Martian",monospace; font-size:9px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
  display:flex; flex-direction:column; gap:5px;
}
.metrics__grid b{
  font-family:"Archivo",sans-serif; font-size:clamp(1rem,1.5vw,1.35rem);
  font-weight:900; font-stretch:76%; letter-spacing:-.02em; color:var(--wh); overflow-wrap:anywhere;
}
.metrics-error{grid-column:1/-1; margin:0; padding:16px; color:var(--dim)}
@media (max-width:560px){.metrics__grid{grid-template-columns:repeat(2,1fr)}}