/* ============================================================
   KILL LIST. White ground, navy ink, lime as a marker.
   The real ads are the only colour on the page.
   No cards, no bordered boxes, no alternating dark bands.
   ============================================================ */
body{background:#fff;color:var(--navy)}
.wrap{max-width:1500px;margin:0 auto;padding:0 clamp(20px,4vw,64px)}

/* ---------- chrome ----------
   The bar carries the marker stroke A in the accent blue on every page. Below
   860px the links become a panel behind a button, because they used to simply
   vanish and leave no navigation at all. */
.nav{position:fixed;top:0;left:0;right:0;z-index:80}
.nav::before{content:"";position:absolute;inset:0 0 auto;height:108px;pointer-events:none;
  background:linear-gradient(180deg,rgb(255 255 255/.98) 0%,rgb(255 255 255/.9) 45%,rgb(255 255 255/0) 100%);
  transition:opacity .25s}
.nav.stuck::before{opacity:0}
.nav.stuck .nav-in{background:rgb(255 255 255/.86);backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);box-shadow:0 1px 0 var(--line)}
.nav-in{position:relative;max-width:1500px;margin:0 auto;padding:16px clamp(20px,4vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-radius:0 0 14px 14px;transition:background-color .25s,padding .25s}
.nav.stuck .nav-in{padding-top:11px;padding-bottom:11px}
.brand{display:inline-flex;align-items:center;gap:11px;
  font:700 16px/1 var(--f);letter-spacing:.28em;color:var(--navy);white-space:nowrap}
.amark{width:28px;height:28px;flex:none;color:var(--acc-3);transition:color .18s}
.brand:hover .amark{color:var(--acc)}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);
  font:600 15px/1 var(--f);letter-spacing:-.01em}
.nav-links a:not(.btn){color:rgb(21 33 59/.72);transition:color .18s;padding:6px 0}
.nav-links a:not(.btn):hover,.nav-links a[aria-current]{color:var(--navy)}
.nav-links a[aria-current]{box-shadow:inset 0 -2px 0 var(--acc-3)}
.nav-links .btn{font-size:14px;padding:13px 22px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;
  background:var(--navy);color:#fff;font:600 13px/1 var(--f);letter-spacing:0;text-transform:none;
  transition:background-color .18s,transform .18s;white-space:nowrap}
.btn:hover{background:#1b2a49;transform:translateY(-1px)}
.btn-acc{background:var(--acc);color:var(--navy)}
.btn-acc:hover{background:var(--acc-2)}
.btn-line{background:none;color:var(--navy);padding:0 0 6px;border-radius:0;
  font:600 clamp(15px,1.3vw,18px)/1.4 var(--f);border-bottom:2px solid var(--acc-3)}
.btn-line:hover{background:none;transform:none;border-bottom-color:var(--navy)}

.nav-burger{display:none;position:relative;width:42px;height:42px;padding:0;border:0;border-radius:11px;
  background:none;cursor:pointer;color:var(--navy)}
.nav-burger span{position:absolute;left:11px;width:20px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s}
.nav-burger span:first-child{top:18px}
.nav-burger span:last-child{top:24px}
.nav.open .nav-burger span:first-child{transform:translateY(3px) rotate(45deg)}
.nav.open .nav-burger span:last-child{transform:translateY(-3px) rotate(-45deg)}
.nav-menu{display:none}

@media (max-width:940px){
  .nav-links{display:none}
  .nav-burger{display:block}
  .nav.stuck .nav-in,.nav.open .nav-in{background:rgb(255 255 255/.94)}
  .nav-menu{display:block;position:fixed;inset:64px 0 0;background:#fff;
    padding:clamp(18px,5vw,30px) clamp(20px,6vw,40px) 40px;overflow-y:auto}
  .nav-menu[hidden]{display:none}
  .nav-menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .nav-menu a:not(.btn){display:block;width:100%;padding:16px 0;border-bottom:1px solid var(--line);
    font:700 clamp(22px,6vw,30px)/1.1 var(--f);letter-spacing:-.03em;color:var(--navy)}
  .nav-menu a[aria-current]{color:var(--acc-ink)}
  .nav-menu .btn{margin-top:22px;padding:15px 26px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .nav-in,.nav::before,.nav-burger span,.amark{transition:none}
}

/* ---------- the wall of real work ---------- */
.wall{position:absolute;inset:0;overflow:hidden;z-index:0}
.wall .col{position:absolute;top:-12%;height:124%;width:calc(100% / var(--cols));
  display:flex;flex-direction:column;gap:10px;will-change:transform}
.wall figure{flex:none;border-radius:3px;overflow:hidden;background:var(--paper-3);
  aspect-ratio:4/5;transition:filter .7s ease,opacity .7s ease}
.wall img,.wall video{width:100%;height:100%;object-fit:cover}
.wall figure.out{filter:grayscale(1) contrast(.75) brightness(1.22);opacity:.5}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-33.4%)}}

/* The scrim is a wipe from the left, not a pool in the middle. The message
   gets a solid white ground and the work on the right is left alone. */
.scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,#fff 0%,#fff 40%,rgb(255 255 255/.97) 47%,rgb(255 255 255/.7) 56%,rgb(255 255 255/.2) 68%,rgb(255 255 255/.08) 100%),
    linear-gradient(180deg,rgb(255 255 255/.92) 0%,rgb(255 255 255/0) 22%,rgb(255 255 255/0) 80%,#fff 100%)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;min-height:100svh;
  display:grid;grid-template-columns:minmax(0,1fr);align-content:center;
  padding:clamp(100px,11vw,150px) 0 clamp(40px,4.6vw,64px)}
.hero-in{position:relative;z-index:2;width:100%;text-align:left}
.hero-say{max-width:min(46vw,640px)}
.hero h1{font:800 clamp(34px,4.2vw,64px)/1.04 var(--f);letter-spacing:-.045em;
  color:var(--navy);max-width:17ch;margin:0;text-wrap:balance}
.hero h1 em{font-style:normal;
  background-color:transparent;
  background-image:linear-gradient(var(--acc),var(--acc));
  background-repeat:no-repeat;background-position:0 50%;background-size:0% 100%;
  padding:.02em .1em;border-radius:5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .6s cubic-bezier(.2,.8,.2,1) .3s}
.hero h1.lit em{background-size:100% 100%}
.hero p.sub{margin:clamp(20px,2.3vw,30px) 0 0;max-width:46ch;
  font:400 clamp(16px,1.25vw,19px)/1.6 var(--f);color:rgb(21 33 59/.7)}
.hero .acts{margin-top:clamp(24px,2.8vw,34px);display:flex;gap:26px;
  align-items:center;flex-wrap:wrap}
.hero .btn{padding:14px 26px;font-size:15px}

/* the location and platform line under the hero was removed on 16 September */

@media (max-width:1000px){
  .hero{min-height:0;padding-top:clamp(92px,22vw,120px);padding-bottom:clamp(230px,56vw,340px)}
  .hero-say{max-width:none}
  .hero h1{max-width:none}
  /* on a phone the work shows underneath the message instead of beside it */
  .scrim{background:
    linear-gradient(180deg,#fff 0%,#fff 75%,rgb(255 255 255/.96) 80%,rgb(255 255 255/.25) 88%,rgb(255 255 255/.1) 96%,#fff 100%)}
  /* the location line would sit on the frames here, and it is decoration */
  .tick{display:none}
}

/* ---------- the result ----------
   The number on the left, the argument on the right. It used to be a centred
   stack, which read as a lonely statistic after a left aligned hero. */
.result{padding:clamp(56px,7vw,100px) 0;border-top:1px solid var(--line)}
.result .wrap{text-align:left}
.resgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,90px);align-items:center;margin-top:clamp(28px,3.4vw,48px)}
.result .big{font:800 clamp(96px,15vw,220px)/.82 var(--f);letter-spacing:-.06em;color:var(--navy);margin:0}
.result .big span{display:inline-block;background:var(--acc);padding:.04em .05em .02em;
  border-radius:.06em;margin-left:.04em;font-size:.5em;vertical-align:.5em;letter-spacing:-.03em}
.result .cap{margin-top:clamp(18px,2vw,26px);font:500 12px/1.8 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:rgb(21 33 59/.7)}
.result .src{margin-top:10px;max-width:38ch}
.result h2{font:800 clamp(30px,4.6vw,66px)/.98 var(--f);letter-spacing:-.045em;max-width:15ch;margin:0}
.ressay p{margin:0;max-width:54ch;
  font:400 clamp(16px,1.25vw,19px)/1.6 var(--f);color:rgb(21 33 59/.68)}
@media (max-width:900px){.resgrid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}}

/* ---------- proof: every ad, and what happened to it ---------- */
.proof{padding:clamp(52px,6.5vw,88px) 0;background:var(--bone);border-top:1px solid var(--line)}
.proof h2{font:800 clamp(32px,5.2vw,78px)/.96 var(--f);letter-spacing:-.045em;max-width:17ch}
.proof h2 em{font-style:normal}
.proof .lede{margin-top:18px;max-width:54ch;font:400 clamp(16px,1.25vw,19px)/1.6 var(--f);
  color:rgb(21 33 59/.66)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:clamp(28px,3.4vw,44px) 0 clamp(20px,2.4vw,30px)}
.chip{padding:9px 15px;border-radius:999px;border:1px solid rgb(21 33 59/.18);
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgb(21 33 59/.62);transition:background-color .15s,border-color .15s,color .15s;background:#fff}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.evidence{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,.9vw,13px)}
@media (max-width:1180px){.evidence{grid-template-columns:repeat(4,1fr)}}
@media (max-width:720px){.evidence{grid-template-columns:repeat(2,1fr)}}
.ev{position:relative;border-radius:4px;overflow:hidden;background:#fff;
  aspect-ratio:4/5;cursor:pointer;box-shadow:0 1px 3px rgb(21 33 59/.1)}
.ev img,.ev video{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .4s}
.ev:hover img,.ev:hover video{transform:scale(1.04)}
.ev.killed img,.ev.killed video{filter:grayscale(1) brightness(1.06) contrast(.9)}
.ev .state{position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:2px;
  font:600 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--acc);color:var(--navy)}
.ev.killed .state{background:var(--navy);color:#fff}
.ev .card{position:absolute;inset:auto 0 0 0;max-height:100%;overflow:hidden;
  padding:13px 14px 15px;background:rgb(21 33 59/.96);color:#fff;
  transform:translateY(101%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.ev:hover .card,.ev:focus-within .card,.ev.open .card{transform:none}
.ev .card b{display:block;font:600 9px/1.45 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc);margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev .card p{font:400 13.5px/1.4 var(--f);color:rgb(255 255 255/.86);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:720px){.ev .card p{-webkit-line-clamp:3}}
.evnote{margin-top:22px;font:400 14px/1.6 var(--f);color:rgb(21 33 59/.5);max-width:66ch}

/* ---------- survivors marquee ---------- */
.alive-strip{padding:clamp(50px,6vw,82px) 0;border-top:1px solid var(--line)}
.alive-strip h2{font:800 clamp(32px,5.2vw,78px)/.96 var(--f);letter-spacing:-.045em}
.marquee{margin-top:clamp(30px,3.6vw,52px);overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-in{display:flex;gap:12px;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee-in{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee figure{flex:none;width:clamp(170px,15vw,230px);aspect-ratio:4/5;
  border-radius:4px;overflow:hidden;background:var(--paper-3);position:relative;
  box-shadow:0 1px 3px rgb(21 33 59/.1)}
.marquee img,.marquee video{width:100%;height:100%;object-fit:cover}
.marquee figcaption{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:2px;
  background:var(--acc);color:var(--navy);font:600 9px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase}

/* ---------- statements ---------- */
.say{padding:clamp(52px,6.5vw,90px) 0;border-top:1px solid var(--line)}
.say p{font:700 clamp(26px,4.2vw,66px)/1.08 var(--f);letter-spacing:-.04em;max-width:19ch;
  color:var(--navy)}
.say p em{font-style:normal}
.say .after{margin-top:clamp(20px,2.2vw,30px);max-width:54ch;
  font:400 clamp(16px,1.25vw,19px)/1.62 var(--f);color:rgb(21 33 59/.66)}
.say .go{margin-top:clamp(26px,2.8vw,38px);font:inherit;letter-spacing:0;max-width:none}

/* ---------- them and us ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(30px,4vw,52px)}
@media (max-width:760px){.vs{grid-template-columns:1fr}}
.vs .side{border:1px solid var(--line);border-radius:6px;padding:clamp(20px,2.4vw,32px);
  background:#fff}
.vs .side.us{background:var(--navy);border-color:var(--navy)}
.vs h3{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgb(21 33 59/.5);padding-bottom:16px;border-bottom:1px solid var(--line)}
.vs .side.us h3{color:var(--acc);border-bottom-color:rgb(255 255 255/.16)}
.vs ul{list-style:none}
.vs li{padding:14px 0;border-bottom:1px solid var(--line);
  font:400 clamp(15px,1.25vw,17.5px)/1.4 var(--f);color:rgb(21 33 59/.78);
  display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:baseline}
.vs li:last-child{border-bottom:0}
.vs li::before{content:"×";font:400 15px/1 var(--f);color:#c05a46}
.vs .side.us li{color:#fff;border-bottom-color:rgb(255 255 255/.14)}
.vs .side.us li::before{content:"✓";color:var(--acc)}

/* ---------- the guarantees ---------- */
.safe{padding:clamp(52px,6.5vw,88px) 0;background:var(--bone);border-top:1px solid var(--line)}
.safe h2{font:800 clamp(32px,5.2vw,78px)/.96 var(--f);letter-spacing:-.045em;max-width:16ch}
.safe h2 em{font-style:normal}
.guards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(32px,4vw,56px)}
@media (max-width:980px){.guards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.guards{grid-template-columns:1fr}}
.guard{padding-top:18px;border-top:2px solid var(--navy)}
.guard b{display:block;font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:rgb(21 33 59/.5);margin-bottom:12px}
.guard h3{font:700 clamp(18px,1.7vw,23px)/1.2 var(--f);letter-spacing:-.025em;margin-bottom:10px}
.guard p{font:400 15px/1.55 var(--f);color:rgb(21 33 59/.66)}

/* ---------- the readout, shown as a document ---------- */
.readout{margin-top:clamp(30px,4vw,52px);border-radius:8px;overflow:hidden;max-width:840px;
  background:var(--navy);box-shadow:0 18px 50px rgb(21 33 59/.16)}
.readout .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 22px;border-bottom:1px solid rgb(255 255 255/.14);
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgb(255 255 255/.5)}
.readout .bar b{color:var(--acc)}
.readout .row{display:grid;grid-template-columns:clamp(88px,11vw,128px) 1fr;gap:clamp(14px,2vw,28px);
  padding:clamp(15px,1.8vw,21px) 22px;border-bottom:1px solid rgb(255 255 255/.1);align-items:baseline}
.readout .k{font:500 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.readout .v{font:400 clamp(15px,1.25vw,17.5px)/1.5 var(--f);color:rgb(255 255 255/.86)}
.readout .sign{display:flex;align-items:center;gap:12px;padding:16px 22px;
  border-top:1px solid rgb(255 255 255/.14);font:400 14px/1.4 var(--f);color:rgb(255 255 255/.56)}
.readout .sign i{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}

/* ---------- credentials ---------- */
.who{padding:clamp(52px,6.5vw,88px) 0;border-top:1px solid var(--line)}
.who h2{font:800 clamp(32px,5.2vw,78px)/.96 var(--f);letter-spacing:-.045em;max-width:16ch}
.who h2 em{font-style:normal}
.creds{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);
  margin-top:clamp(30px,3.6vw,50px)}
@media (max-width:820px){.creds{grid-template-columns:1fr}}
.cred{padding:clamp(20px,2.2vw,28px);border:1px solid var(--line);border-radius:6px}
.cred b{display:block;font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:rgb(21 33 59/.5);margin-bottom:12px}
.cred p{font:400 clamp(16px,1.3vw,19px)/1.5 var(--f)}
.refuse{margin-top:clamp(30px,3.6vw,50px);display:flex;gap:8px;flex-wrap:wrap}
.refuse span{padding:9px 14px;border-radius:999px;background:var(--paper-3);
  font:500 11px/1 var(--mono);letter-spacing:.1em;color:rgb(21 33 59/.62)}

/* ---------- close ---------- */
.close{padding:clamp(58px,6.4vw,90px) 0 clamp(38px,4vw,54px);text-align:center;
  background:var(--navy);color:#fff}
.close h2{font:800 clamp(36px,6.2vw,92px)/1.02 var(--f);letter-spacing:-.05em}
.close h2 em{font-style:normal;color:#fff;
  background-color:transparent;
  background-image:linear-gradient(var(--acc),var(--acc));
  background-repeat:no-repeat;background-position:0 50%;background-size:0% 100%;
  padding:.02em .12em;border-radius:6px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .6s cubic-bezier(.2,.8,.2,1) .18s,color .18s .5s}
.close h2.lit em{background-size:100% 100%;color:var(--navy)}
.close .cact{margin:clamp(26px,3vw,36px) 0 0}
.close > .wrap > p:not(.cact){margin-top:clamp(18px,2vw,26px)}
.close .btn{background:var(--acc);color:var(--navy)}
.close .btn:hover{background:var(--acc-2)}

/* ---------- footer ----------
   Shorter than it was. The four equal columns became one statement with the
   call to action, and two compact lists. Los Angeles used to appear twice. */
/* the close band above is navy too, so the footer needs its own edge */
.foot{background:var(--navy);color:#fff;padding:clamp(38px,4.4vw,58px) 0 clamp(26px,3vw,38px);
  position:relative}
/* Not .close + .foot: site.js appends the footer after the page's script tags,
   so the two are never adjacent siblings and that selector never matched. */
.foot::before{content:"";position:absolute;top:0;left:clamp(20px,4vw,64px);
  right:clamp(20px,4vw,64px);height:1px;background:rgb(255 255 255/.16)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.foot-say .brand{color:#fff;margin-bottom:16px}
.foot-say .amark{color:var(--acc)}
.foot-say p{max-width:34ch;font:400 clamp(15px,1.2vw,17px)/1.55 var(--f);color:rgb(255 255 255/.66)}
.foot-say .btn{margin-top:22px}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.foot h4{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc);margin-bottom:14px}
.foot-cols a,.foot-cols p{display:block;font:400 14px/1.95 var(--f);color:rgb(255 255 255/.58);
  overflow-wrap:anywhere}
.foot-cols a:hover{color:#fff}
.foot-bot{margin-top:clamp(30px,3.6vw,48px);padding-top:20px;border-top:1px solid rgb(255 255 255/.14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:500 10px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgb(255 255 255/.4)}
@media (max-width:760px){
  .foot-top{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}
  .foot-say p{max-width:none}
}

/* ---------- page furniture for subpages ---------- */
.phead{padding:clamp(120px,13vw,175px) 0 clamp(38px,4.4vw,64px)}
.phead h1{font:800 clamp(40px,7vw,104px)/1.02 var(--f);letter-spacing:-.05em;max-width:15ch}
.phead h1 em{font-style:normal;
  background-color:transparent;
  background-image:linear-gradient(var(--acc),var(--acc));
  background-repeat:no-repeat;background-position:0 50%;background-size:0% 100%;
  padding:.02em .1em;border-radius:5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .6s cubic-bezier(.2,.8,.2,1) .3s}
.phead h1.lit em{background-size:100% 100%}
.phead .lede{margin-top:clamp(20px,2.2vw,30px);max-width:58ch;
  font:400 clamp(16px,1.35vw,20px)/1.6 var(--f);color:rgb(21 33 59/.68)}
.phead .meta{margin-top:24px;font:500 10px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:rgb(21 33 59/.45)}
.run{counter-reset:r;border-top:1px solid var(--line)}
.run li{counter-increment:r;list-style:none;display:grid;
  grid-template-columns:clamp(54px,7vw,104px) 1fr;gap:clamp(18px,3vw,50px);
  padding:clamp(24px,3.2vw,42px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.run li::before{content:counter(r,decimal-leading-zero);
  font:500 11px/1 var(--mono);letter-spacing:.14em;color:rgb(21 33 59/.4)}
.run h3{font:700 clamp(21px,2.9vw,42px)/1.08 var(--f);letter-spacing:-.035em}
.run p{margin-top:11px;max-width:58ch;font:400 clamp(15px,1.15vw,17.5px)/1.62 var(--f);
  color:rgb(21 33 59/.66)}
.run .k{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:rgb(21 33 59/.45);display:block;margin-bottom:10px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px)}
@media (max-width:840px){.pair{grid-template-columns:1fr}}
.pair h3{font:700 clamp(20px,2.2vw,30px)/1.1 var(--f);letter-spacing:-.03em;
  padding-bottom:14px;border-bottom:2px solid var(--acc)}
.pair ul{list-style:none;margin-top:16px}
.pair li{padding:12px 0;border-bottom:1px solid var(--line);
  font:400 16px/1.5 var(--f);color:rgb(21 33 59/.72)}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:24px;padding:clamp(18px,2.2vw,28px) 0;
  font:600 clamp(17px,1.6vw,23px)/1.3 var(--f);letter-spacing:-.025em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:400 24px/1 var(--f);color:rgb(21 33 59/.45);transition:transform .25s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 0 clamp(20px,2.2vw,30px);max-width:70ch;
  font:400 16px/1.65 var(--f);color:rgb(21 33 59/.66)}
.deadgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,.9vw,14px)}
@media (max-width:1180px){.deadgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.deadgrid{grid-template-columns:repeat(2,1fr)}}
.dg{position:relative;border-radius:4px;overflow:hidden;background:#fff;
  box-shadow:0 1px 3px rgb(21 33 59/.1)}
.dg .shot{aspect-ratio:4/5;overflow:hidden}
.dg .shot img,.dg .shot video{width:100%;height:100%;object-fit:cover}
.dg.gone .shot img,.dg.gone .shot video{filter:grayscale(1) brightness(1.06) contrast(.9)}
.dg .tag{position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:2px;
  font:600 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--acc);color:var(--navy)}
.dg.gone .tag{background:var(--navy);color:#fff}
.dg .why{padding:12px 13px 15px;font:400 13px/1.45 var(--f);color:rgb(21 33 59/.62)}
.dg .why b{display:block;color:var(--navy);font-weight:600;margin-bottom:5px}

/* ---------- the application page ---------- */
/* One centred column since the aside was removed. A form is a single task and
   should sit on the page's centre line, not in the right hand track of a grid
   whose left hand track is now empty. */
.formwrap{display:block;max-width:660px;margin:0 auto;
  padding-bottom:clamp(70px,9vw,120px)}
.formwrap aside h4{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgb(21 33 59/.5);margin-bottom:18px}
.formwrap aside ul{list-style:none}
.formwrap aside li{padding:13px 0;border-bottom:1px solid var(--line);
  font:400 15px/1.55 var(--f);color:rgb(21 33 59/.7)}
.formwrap .note{margin-top:20px;font:400 13px/1.55 var(--f);color:rgb(21 33 59/.5)}
.form{max-width:none}
.fstep h2{font:700 clamp(22px,2.6vw,36px)/1.12 var(--f);letter-spacing:-.03em;margin-bottom:22px}
.fcount{color:rgb(21 33 59/.5)}
.field input,.field textarea{border-color:rgb(21 33 59/.22);background:#fff}
.field input::placeholder,.field textarea::placeholder{color:rgb(21 33 59/.34)}
.field input:focus,.field textarea:focus{border-color:var(--navy)}
.opt{border-color:rgb(21 33 59/.22);color:var(--navy);opacity:1}
.fprog i{color:var(--navy)}
.fdone h2{font:800 clamp(30px,4vw,56px)/1 var(--f);letter-spacing:-.04em;margin-bottom:18px}
.fdone p{max-width:54ch;font:400 16px/1.6 var(--f);color:rgb(21 33 59/.7);margin-bottom:14px}
.doors{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(26px,5vw,76px);
  align-items:center;padding-top:clamp(50px,7vw,92px);padding-bottom:clamp(50px,7vw,92px);
  border-top:1px solid var(--line)}
@media (max-width:820px){.doors{grid-template-columns:1fr}}
.doors h3{font:700 clamp(22px,2.6vw,36px)/1.1 var(--f);letter-spacing:-.03em}
.doors p{margin-top:12px;font:400 15px/1.55 var(--f);color:rgb(21 33 59/.6)}
.doorlist{list-style:none}
.doorlist li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--line);font:400 15px/1.4 var(--f)}
.doorlist li:first-child{border-top:1px solid var(--line)}
.doorlist a{color:rgb(21 33 59/.6)}
.doorlist a:hover{color:var(--navy)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- cited sources, never decorative ---------- */
.src{display:block;margin-top:14px;font:500 10px/1.6 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:rgb(21 33 59/.45)}
.facts{padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line)}
.factrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,50px)}
@media (max-width:860px){.factrow{grid-template-columns:1fr}}
.fact{padding-top:20px;border-top:2px solid var(--navy)}
.fact b{display:block;font:800 clamp(44px,5.4vw,80px)/.92 var(--f);letter-spacing:-.05em;
  color:var(--navy);font-variant-numeric:tabular-nums;margin-bottom:14px}
.fact p{font:400 clamp(15px,1.2vw,17.5px)/1.55 var(--f);color:rgb(21 33 59/.7);max-width:34ch}
.fact .src{margin-top:12px}
.factnote{margin-top:clamp(32px,4vw,54px);max-width:62ch;
  font:400 clamp(16px,1.25vw,19px)/1.6 var(--f);color:rgb(21 33 59/.66)}

/* the hero list of three promises was removed on 16 September */
.moreline{display:flex;align-items:baseline;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
  margin-top:clamp(22px,2.6vw,34px)}
.moreline .evnote{margin:0;flex:1 1 320px}

/* ---------- which business are you ---------- */
.pick{padding:clamp(52px,6.5vw,88px) 0;background:var(--bone);border-top:1px solid var(--line)}
.pickhead{font:800 clamp(30px,4.6vw,66px)/.98 var(--f);letter-spacing:-.045em;max-width:16ch}
.pickhead em{font-style:normal}
.switch{display:inline-flex;gap:4px;padding:4px;margin-top:clamp(24px,3vw,36px);
  border:1px solid rgb(21 33 59/.18);border-radius:999px;background:#fff}
.sw{padding:11px 20px;border-radius:999px;font:600 14px/1 var(--f);color:rgb(21 33 59/.6);
  transition:background-color .18s,color .18s}
.sw:hover{color:var(--navy)}
.sw[aria-pressed=true]{background:var(--navy);color:#fff}
.chain{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(26px,3.2vw,40px)}
@media (max-width:760px){.chain{grid-template-columns:1fr}}
.link{padding:20px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.link b{display:block;font:600 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:rgb(21 33 59/.45);margin-bottom:10px}
.link h3{font:700 clamp(18px,1.9vw,26px)/1.14 var(--f);letter-spacing:-.03em}
.link p{margin-top:8px;font:400 14.5px/1.5 var(--f);color:rgb(21 33 59/.62)}
.link:last-child{border-color:var(--navy);box-shadow:inset 0 -3px 0 var(--acc)}
.picknote{margin-top:clamp(22px,2.6vw,32px);max-width:60ch;
  font:400 clamp(16px,1.25vw,18.5px)/1.6 var(--f);color:rgb(21 33 59/.68)}
.pick .chain,.pick .picknote{transition:opacity .28s}
.pick.swapping .chain,.pick.swapping .picknote{opacity:0}
.safe .creds{margin-top:clamp(30px,3.6vw,48px)}


/* ---------- where the accent is allowed to be loud ----------
   The hero and the closing line carry the solid marker. Every mid page heading
   gets a rule underneath instead, so the eye is pulled once on the way in and
   once on the way out rather than seven times. Sections added later have to be
   added here too, which is what went wrong before. ---------- */
.proof h2 em,.safe h2 em,.how h2 em,.who h2 em,.say p em,.pickhead em,
.can h2 em,.result h2 em,.services h2 em,.fit h2 em,
.video-work h2 em,.blog-head h1 em,.post-head h1 em{
  background-color:transparent;
  background-image:linear-gradient(var(--acc),var(--acc));
  background-repeat:no-repeat;
  background-position:0 88%;background-size:0% .16em;padding:0 .04em;border-radius:0}
.proof h2[data-ink].lit em,.safe h2[data-ink].lit em,.who h2[data-ink].lit em,
.how h2[data-ink].lit em,.say p[data-ink].lit em,.pickhead[data-ink].lit em,
.can h2[data-ink].lit em,.result h2[data-ink].lit em,.services h2[data-ink].lit em,
.fit h2[data-ink].lit em,.video-work h2[data-ink].lit em,
.blog-head h1[data-ink].lit em,.post-head h1[data-ink].lit em{
  background-size:100% .16em}

/* ---------- how a round works ---------- */
.how{padding:clamp(52px,6.5vw,90px) 0;border-top:1px solid var(--line)}
.how h2{font:800 clamp(30px,4.6vw,66px)/.98 var(--f);letter-spacing:-.045em;max-width:14ch}
.how .lede{margin-top:16px;max-width:52ch;font:400 clamp(16px,1.25vw,19px)/1.6 var(--f);
  color:rgb(21 33 59/.66)}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,30px);margin-top:clamp(30px,3.6vw,50px)}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps li{padding-top:18px;border-top:2px solid var(--navy)}
.steps b{display:block;font:600 10px/1 var(--mono);letter-spacing:.2em;
  color:rgb(21 33 59/.42);margin-bottom:12px}
.steps h3{font:700 clamp(18px,1.8vw,24px)/1.18 var(--f);letter-spacing:-.025em;margin-bottom:10px}
.steps p{font:400 15px/1.55 var(--f);color:rgb(21 33 59/.64)}
.howcta{margin-top:clamp(28px,3.4vw,44px)}
.ev .card b{color:var(--acc)}


/* ---------- centred rhythm ----------
   Every section reads down the middle of the page, so the eye never has to
   re-find the left edge after a full bleed row of work. */
.proof .wrap,.safe .wrap,.how .wrap,.pick .wrap{text-align:center}
.can .wrap{text-align:left}
.proof h2,.safe h2,.how h2,.pickhead{margin-left:auto;margin-right:auto}
.proof .lede,.how .lede{margin-left:auto;margin-right:auto}
.chips,.switch,.howcta,.moreline{justify-content:center}
.moreline{flex-direction:column;align-items:center;gap:14px}
.moreline .evnote{flex:none;max-width:70ch;text-align:center}
.guards,.steps,.week,.chain,.creds{text-align:left}
.refuse{justify-content:center}
.evidence{text-align:left}
.picknote{margin-left:auto;margin-right:auto}
.ev .card{text-align:left}
@media (max-width:720px){
  .guards,.steps,.chain,.creds{text-align:center}
  .steps li,.guard{border-top-width:2px}
}

/* ---------- which numbers we move for you ----------
   Pulled out of a longer section and given its own slim band. It answers the
   only question a visitor has this early, which is whether we work on things
   like theirs, and its shape breaks up four grids in a row. */
.fit{padding:clamp(34px,4vw,54px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.switchrow{text-align:center}
.swlabel{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgb(21 33 59/.45);margin-bottom:16px}
.switchrow .switch{margin:0 auto}
.switchrow .picknote{margin:clamp(18px,2.2vw,26px) auto 0;max-width:62ch;
  font:400 clamp(15px,1.2vw,17.5px)/1.6 var(--f);color:rgb(21 33 59/.68);transition:opacity .28s}
.switchrow.swapping .picknote{opacity:0}

/* ---------- what we make ----------
   A list, not a card grid. Left aligned on purpose: it is the one section that
   does not read down the middle, which is what stops the page from turning
   into the same block four times. */
.can{padding:clamp(52px,6.5vw,90px) 0;background:var(--bone);border-top:1px solid var(--line)}
.canhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.can h2{font:800 clamp(30px,4.6vw,66px)/.98 var(--f);letter-spacing:-.045em;max-width:12ch;margin:0}
.canhead .btn-line{margin-bottom:6px}
.makes{list-style:none;margin:clamp(30px,3.6vw,50px) 0 0;max-width:1120px;border-top:2px solid var(--navy)}
.makes li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(12px,3vw,56px);align-items:baseline;
  padding:clamp(20px,2.5vw,34px) 0;border-bottom:1px solid var(--line)}
.makes span{font:700 clamp(24px,3.6vw,50px)/1.02 var(--f);letter-spacing:-.04em;color:var(--navy)}
.makes p{font:400 clamp(15px,1.2vw,17.5px)/1.62 var(--f);color:rgb(21 33 59/.68);max-width:48ch}
@media (max-width:760px){.makes li{grid-template-columns:1fr;gap:10px}}

.platrow{margin-top:clamp(30px,3.6vw,48px);text-align:center}
.platlabel{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgb(21 33 59/.45);margin-bottom:16px}
.plats{list-style:none;display:flex;gap:clamp(10px,1.6vw,20px);flex-wrap:wrap;justify-content:center}
.plats li{padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font:600 14px/1 var(--f);color:var(--navy)}
.platnote{margin:clamp(20px,2.2vw,28px) auto 0;max-width:60ch;
  font:400 15px/1.6 var(--f);color:rgb(21 33 59/.6)}

/* ---------- the week ----------
   Numbers would be arbitrary here. Days are not: the round really does run on
   a week, so the labels carry information instead of decoration. */
.how{padding:clamp(52px,6.5vw,90px) 0;border-top:1px solid var(--line)}
.how h2{font:800 clamp(30px,4.6vw,66px)/.98 var(--f);letter-spacing:-.045em;max-width:14ch}
.how .lede{margin-top:16px;max-width:52ch;font:400 clamp(16px,1.25vw,19px)/1.6 var(--f);
  color:rgb(21 33 59/.66)}
.week{--wgap:clamp(16px,2.2vw,36px);list-style:none;margin:clamp(40px,4.6vw,64px) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--wgap);text-align:left}
.week li{position:relative;padding-top:38px}
.week li::after{content:"";position:absolute;left:24px;right:calc(var(--wgap) * -1);top:7px;
  height:2px;background:var(--line)}
.week li:last-child::after{display:none}
.week li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 5px #fff}
.week b{display:block;font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgb(21 33 59/.45);margin-bottom:12px}
.week h3{font:700 clamp(18px,1.8vw,24px)/1.18 var(--f);letter-spacing:-.025em;margin-bottom:10px}
.week p{font:400 15px/1.55 var(--f);color:rgb(21 33 59/.64)}
.howcta{margin-top:clamp(32px,3.8vw,50px)}
@media (max-width:820px){
  .week{grid-template-columns:1fr;gap:0}
  .week li::after{left:7px;right:auto;top:24px;bottom:-2px;width:2px;height:auto}
  .week li{padding:0 0 clamp(24px,4vw,34px) clamp(32px,5vw,44px)}
  .week li:last-child{padding-bottom:0}
  .week li::before{left:0;top:1px}
}

/* ---------- one heading scale ----------
   Section headings share a size, sub headings share a size. The hero and the
   close are the only two that step outside it, deliberately. */
.can h2,.how h2,.safe h2,.proof h2,.result h2,.say p{
  font-size:clamp(30px,4.6vw,66px);line-height:.98;letter-spacing:-.045em;
  text-wrap:balance}
.hero h1,.phead h1,.close h2{text-wrap:balance}
.week h3,.steps h3,.guard h3{
  font-size:clamp(18px,1.85vw,25px);line-height:1.2;letter-spacing:-.028em}

/* ---------- platform marks ---------- */
.plats li{display:inline-flex;align-items:center;gap:9px;padding:10px 18px 10px 14px}
.plats svg{width:18px;height:18px;flex:none;fill:var(--navy);opacity:.82}
.plats li:hover svg{opacity:1}

/* ---------- the wall bursts open on first paint ----------
   Every frame starts small and clear, then lands on a delay set by how far it
   sits from the message, so the work blooms outward from the headline. The
   class is stripped once it is over and the greyout transition takes over. */
.wall.burst figure{opacity:0;transform:scale(.86);transform-origin:50% 50%}
.wall.burst.lit figure{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms),
             transform .78s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.hero.burst .hero-say{opacity:0;transform:translateY(14px)}
.hero.burst.lit .hero-say{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.8,.2,1) .1s,transform .7s cubic-bezier(.2,.8,.2,1) .1s}
@media (prefers-reduced-motion:reduce){
  .wall.burst figure,.hero.burst .hero-say{opacity:1;transform:none}
  .wall .col{animation:none!important}
}

/* ---------- the form is one screen now ---------- */
.form-1 .fstep{display:block}
.form-1 .field + .field{margin-top:clamp(18px,2vw,26px)}
.form-1 .opts{margin-top:10px}
.form-1 .frow{margin-top:clamp(26px,3vw,36px)}

/* ---------- markers do not break across lines ----------
   The data-ink splitter turns every word into its own inline-block, so a two
   word marker can wrap and paint as two separate blocks on two lines. A
   non-breaking space cannot help, because the splitter treats it as whitespace
   like any other. Hold the whole marker together here instead. */
.hero h1 em,.close h2 em,.phead h1 em,.services h2 em,
.can h2 em,.how h2 em,.safe h2 em{white-space:nowrap}
/* a nowrap marker must never push the page wider than the phone it is on */
@media (max-width:560px){.services h2 em,.can h2 em,.how h2 em{white-space:normal}}

/* Clear offer, short scan paths, and buyer questions. */
.eyebrow{font:600 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-ink);margin-bottom:20px}
.home .hero h1{max-width:18ch;font-size:clamp(38px,4.6vw,66px)}
.home .hero h1 em{white-space:normal}
.hero-credential{margin-top:18px;max-width:44ch;font:600 15px/1.5 var(--f);color:var(--navy)}
.home .hero p.sub{max-width:43ch}
.home .fit{padding:80px 0;background:var(--bone)}
.home .fit h2,.benefits h2,.objections h2{font:800 clamp(32px,4.6vw,66px)/1.03 var(--f);letter-spacing:-.045em;margin-bottom:30px}
.home .switchrow .switch{margin-bottom:32px}
.audience-copy h3{font:600 clamp(22px,2vw,28px)/1.2 var(--f);letter-spacing:-.025em}
.home .switchrow .picknote,.home #picknote{max-width:58ch;margin:16px auto 0;font:400 18px/1.55 var(--f);color:#596278}
.fit-note{font:400 14px/1.5 var(--f);color:#596278}
.home .can h2{max-width:20ch}
.home .can,.home .how,.home .safe,.benefits,.objections{padding:84px 0}
.section-link{display:inline-block;margin-top:32px}
.home .week{margin-top:42px}
.benefits{background:var(--bone);border-top:1px solid var(--line)}
.benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:48px}
.benefit-grid article{border-top:1px solid #c5c9cc;padding-top:20px}
.benefit-grid article>span{font:500 12px/1 var(--mono);color:#596278}
.benefit-grid h3{font:700 24px/1.15 var(--f);letter-spacing:-.03em;margin:22px 0 12px}
.benefit-grid p{font:400 16px/1.55 var(--f);color:#596278;max-width:25ch}
.home .safe{text-align:left}
.home .safe h2{max-width:20ch;margin-left:0}
.objections{border-top:1px solid var(--line)}
.objection-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.objections .qa{margin-top:0;min-width:0}
.objections .qa summary{font:600 20px/1.35 var(--f);padding:24px 36px 24px 0}
.objections .qa .a p{font:400 17px/1.6 var(--f);color:#596278;max-width:52ch}
.objections .qa .a a{text-decoration:underline}
.home .close> .wrap>p:not(.eyebrow):not(.cact){font:400 18px/1.6 var(--f);max-width:48ch;margin:24px auto}
.home .close h2 em{white-space:normal}
.email-direct{margin-top:24px;display:inline-block}
.fdone .btn{margin-top:24px}
@media(max-width:860px){
  .nav-links a.btn{display:inline-flex;font-size:12px;padding:12px 15px;letter-spacing:0;text-transform:none}
  .nav-in{gap:10px}
  .brand{letter-spacing:.16em;font-size:13px}
  .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .objection-layout{grid-template-columns:1fr;gap:34px}
  .home .can,.home .how,.home .safe,.home .fit,.benefits,.objections{padding:56px 0}
  .home .hero h1{max-width:19ch}
  .home .hero-say{max-width:100%}
}
@media(max-width:420px){
  .nav-in{padding-left:16px;padding-right:16px}
  .brand{gap:6px;font-size:11px}
  .nav-links a.btn{font-size:11px;padding:11px 13px}
  .home .switch{display:flex;width:100%;min-width:0}
  .home .switch .sw{flex:1;white-space:normal;padding:12px;font-size:13px}
      .benefit-grid h3{font-size:21px}
}
.home .safe .wrap{text-align:left}
.close .eyebrow,.foot .eyebrow{color:var(--acc)}
@media(min-width:861px){
  .home .hero{min-height:800px}
  .home .can,.home .how,.home .safe,.home .fit,.home .benefits,.home .objections{padding-top:62px;padding-bottom:62px}
}
.buyer-example{margin:22px auto 0;font:500 15px/1.5 var(--f);color:var(--navy)}
.home .fit-note{margin-top:24px}
@media(max-width:420px){.home .switch .sw{padding:12px 8px;font-size:12px}}
/* Video-led homepage: six playable examples and short supporting copy. */
.video-work{padding:56px 0 36px}
.video-work h2{font:800 clamp(34px,4.6vw,66px)/1 var(--f);letter-spacing:-.045em}
.video-reel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}
.video-reel figure{min-width:0;overflow:hidden;border-radius:12px;background:var(--navy);aspect-ratio:4/5}
.video-reel video{display:block;width:100%;height:100%;object-fit:contain}
.home .fit{padding:48px 0}
.home .fit h2{margin-bottom:24px}
.home .switchrow .switch{margin-bottom:22px}
.home .audience-copy h3{font-size:24px}
.home .process-layout{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:70px;text-align:left}
.process-reel{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;gap:16px}
.home .visual-process h2{margin-left:0}
.compact-process{list-style:none;margin-top:30px}
.compact-process li{display:flex;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.compact-process li>span{font:500 12px/1 var(--mono);color:#596278}
.compact-process h3{font:700 23px/1.2 var(--f);letter-spacing:-.025em}
.compact-process p{font:400 16px/1.55 var(--f);color:#596278;margin-top:6px;max-width:62ch}
.home .compact-benefits{padding:52px 0}
.compact-benefits .benefit-grid{margin-top:32px}
.compact-benefits h2{margin-bottom:0}
.compact-benefits .benefit-grid h3{margin-bottom:0}
.phead h1 em{white-space:normal}
@media(min-width:861px){.home .hero{min-height:740px}}
@media(max-width:860px){
  .video-reel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;gap:14px}
  .video-reel figure{flex:0 0 42%;scroll-snap-align:start}
  .home .process-layout{display:flex;flex-direction:column-reverse;align-items:stretch;gap:32px}
    .home .compact-benefits{padding:44px 0}
}
@media(max-width:480px){.home .audience-copy h3{font-size:21px}}

/* ---------- how it runs: spacing ----------
   The week gets one clear block. Who does what is its own band with a heading
   instead of a bare two column list floating between two statements. */
.week-run{padding:0 0 clamp(56px,7vw,100px)}
.whodoes{padding:clamp(56px,7vw,100px) 0;border-top:1px solid var(--line);background:var(--bone)}
.whodoes h2{font:800 clamp(30px,4.6vw,66px)/.98 var(--f);letter-spacing:-.045em;max-width:14ch}
.whodoes .lede{margin-top:16px;max-width:54ch;font:400 clamp(16px,1.25vw,19px)/1.6 var(--f);color:rgb(21 33 59/.66)}
.whodoes .pair{margin-top:clamp(30px,3.6vw,50px)}
.whodoes h2 em{font-style:normal;background-color:transparent;
  background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;
  background-position:0 88%;background-size:0% .16em;padding:0 .04em;border-radius:0}
.whodoes h2[data-ink].lit em{background-size:100% .16em}

/* ---------- spacing pass, 15 September ----------
   One rhythm for every home section instead of six paddings between 36 and
   88px. One h2 size and one h3 size on the home page instead of seven. The
   week list on How it runs is tightened so five steps do not run 1300px. */
:root{--sec:clamp(48px,5.8vw,84px)}
.home .video-work,.home .fit,.home .how,.home .benefits,.home .compact-benefits,
.home .objections,.home .close{padding:var(--sec) 0}
.home .video-work h2,.home .fit h2,.home .how h2,.home .benefits h2,.home .objections h2{
  font-size:clamp(30px,4.6vw,66px);line-height:1.02;letter-spacing:-.045em}
.home .benefit-grid h3,.home .compact-process h3,.home .audience-copy h3{
  font-size:clamp(20px,1.9vw,24px);line-height:1.2}
.home .video-work h2{margin-bottom:0}
/* the UGC is 9:16 and the frame is 4:5. Fill it the way a feed does rather than
   pillarboxing it on navy. */
.video-reel video{object-fit:cover}
.video-reel figure{background:var(--paper-3)}
/* how it runs */
.run li{padding:clamp(24px,3vw,34px) 0}
.run h3{font-size:clamp(24px,2.5vw,34px)}

/* ---------- services ----------
   Eight concrete deliverables. A grid rather than a list because the point is
   coverage: the reader should see the whole job in one glance. */
.services{padding:var(--sec) 0;background:var(--bone);border-top:1px solid var(--line)}
.services h2{font-size:clamp(30px,4.6vw,66px);line-height:1.02;letter-spacing:-.045em;max-width:16ch}
.services .lede{margin-top:16px;max-width:56ch;
  font:400 clamp(16px,1.25vw,19px)/1.6 var(--f);color:rgb(21 33 59/.66)}
.svc-grid{margin-top:clamp(32px,4vw,56px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.svc-grid article{background:#fff;padding:clamp(20px,2.2vw,28px)}
.svc-grid h3{font:700 clamp(17px,1.5vw,20px)/1.2 var(--f);letter-spacing:-.025em;margin-bottom:9px}
.svc-grid h3::before{content:"";display:block;width:22px;height:3px;border-radius:2px;
  background:var(--acc);margin-bottom:13px}
.svc-grid p{font:400 14.5px/1.6 var(--f);color:rgb(21 33 59/.66)}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* the home rhythm now covers the two new bands */
.home .services{padding:var(--sec) 0}
.home .services h2{font-size:clamp(30px,4.6vw,66px);line-height:1.02}

/* ---------- blog ---------- */
.blog-head{padding-bottom:clamp(26px,3vw,40px);text-align:center}
.blog-head h1,.blog-head .lede{margin-left:auto;margin-right:auto}
.blog-head .lede{max-width:62ch}
.blog-head .eyebrow{margin-bottom:14px}
.bloglist{padding:0 0 clamp(50px,6vw,84px)}
.bloglist .wrap{max-width:1180px;display:grid;justify-content:center;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.2vw,46px) clamp(20px,2.4vw,34px)}
.bloglist article.lead{grid-column:1 / -1;max-width:860px;margin:0 auto;text-align:center}
.lead .card p{margin-left:auto;margin-right:auto}
.lead .card .meta{justify-content:center}
.card{display:block;color:inherit}
.card .shot{display:block;border-radius:12px;overflow:hidden;background:var(--paper-3);
  aspect-ratio:3/2}
.lead .card .shot{aspect-ratio:21/9}
.card img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover img{transform:scale(1.03)}
.card .meta{display:flex;align-items:center;gap:10px;margin-top:16px;
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgb(21 33 59/.45)}
.card .meta i{width:3px;height:3px;border-radius:50%;background:var(--acc-3)}
.card h2{margin-top:11px;font:700 clamp(19px,1.8vw,24px)/1.2 var(--f);letter-spacing:-.03em}
.lead .card h2{font-size:clamp(26px,3.4vw,44px);line-height:1.08}
.card p{margin-top:9px;font:400 15px/1.6 var(--f);color:rgb(21 33 59/.62);max-width:56ch}
.card:hover h2{color:var(--acc-ink)}
@media (max-width:900px){.bloglist .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.bloglist .wrap{grid-template-columns:1fr}.lead .card .shot{aspect-ratio:3/2}}

/* ---------- a post ---------- */
.post-head{padding-bottom:clamp(22px,2.6vw,34px)}
.post-head .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px;text-transform:uppercase}
.post-head .eyebrow i{width:3px;height:3px;border-radius:50%;background:var(--acc-3)}
.post-head .eyebrow a{color:var(--acc-ink)}
.post-head h1{font:800 clamp(32px,4.8vw,68px)/1.04 var(--f);letter-spacing:-.045em;max-width:20ch}
.post-head .lede{max-width:60ch}
.post-shot{margin:0 0 clamp(34px,4vw,56px)}
.post-shot img{width:100%;border-radius:14px;aspect-ratio:3/2;object-fit:cover;background:var(--paper-3)}
.prose{max-width:66ch;margin:0 auto}
.prose p{font:400 clamp(17px,1.35vw,19.5px)/1.72 var(--f);color:rgb(21 33 59/.82)}
.prose p + p{margin-top:1.15em}
.prose h2{margin:clamp(34px,3.6vw,52px) 0 .5em;
  font:700 clamp(22px,2.2vw,30px)/1.2 var(--f);letter-spacing:-.03em;color:var(--navy)}
.prose blockquote{margin:clamp(30px,3.4vw,46px) 0;padding-left:clamp(18px,2vw,26px);
  border-left:3px solid var(--acc);
  font:600 clamp(20px,2vw,27px)/1.35 var(--f);letter-spacing:-.025em;color:var(--navy)}
.prose ul{margin:1.2em 0;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:26px;margin-top:.6em;
  font:400 clamp(16px,1.3vw,18.5px)/1.65 var(--f);color:rgb(21 33 59/.82)}
.prose li::before{content:"";position:absolute;left:4px;top:.65em;width:7px;height:7px;
  border-radius:2px;background:var(--acc)}
.post-next{max-width:66ch;margin:clamp(44px,5vw,72px) auto clamp(50px,6vw,84px);
  padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line)}
.post-next span{display:block;font:500 10px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:rgb(21 33 59/.45);margin-bottom:10px}
.post-next b{font:700 clamp(19px,1.9vw,26px)/1.2 var(--f);letter-spacing:-.03em;color:var(--navy)}
.post-next a:hover b{color:var(--acc-ink)}

/* ---------- sources ----------
   Every figure in these posts is somebody else's published research, so the
   list of where it came from is part of the argument, not an afterthought. */
.sources{max-width:66ch;margin:clamp(38px,4.4vw,60px) auto 0;
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,30px);
  background:var(--bone);border:1px solid var(--line);border-radius:12px}
.sources h2{margin:0 0 14px;font:600 10px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:rgb(21 33 59/.5)}
.sources ol{margin:0;padding-left:1.2em}
.sources li{font:400 14px/1.7 var(--f);color:rgb(21 33 59/.66);padding-left:4px}
.sources a{color:var(--acc-ink);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.sources a:hover{color:var(--navy)}

/* ---------- the creative carousel ----------
   Full bleed so the work runs past both edges, which is what makes it read as
   a feed rather than a gallery of four. The track is the real list twice over,
   so translating it by exactly half returns it to its starting frame. */
.reel{margin-top:clamp(28px,3.4vw,44px);overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
/* The spacing is margin on each frame, not flex gap. With gap, the two halves
   of the track get one extra gap between them, so translating by half the width
   lands a few pixels short of the first frame and the loop visibly jumps. With
   a trailing margin on every frame, half the track is exactly one list. */
.reel-track{display:flex;width:max-content;
  animation:reelslide 60s linear infinite;will-change:transform}
.reel:hover .reel-track,.reel:focus-within .reel-track{animation-play-state:paused}
@keyframes reelslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reel figure{flex:none;width:clamp(190px,17vw,280px);aspect-ratio:4/5;
  margin-right:clamp(12px,1.3vw,20px);
  border-radius:12px;overflow:hidden;background:var(--paper-3)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){
  /* no drift, so the row becomes something the reader scrolls themselves */
  .reel{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .reel-track{animation:none}
  .reel-track figure[aria-hidden]{display:none}
  .reel figure{scroll-snap-align:start}
}

/* ---------- the application page, centred ---------- */
.start-head{text-align:center}
.start-head h1,.start-head .lede{margin-left:auto;margin-right:auto}
.start-head h1{max-width:18ch}
.start-head .lede{max-width:58ch}
.formwrap .field{text-align:left}
.formwrap .opts{justify-content:flex-start}
.formwrap .frow{justify-content:center;flex-direction:column;align-items:center;gap:12px}
.formwrap .frow .note{margin:0;text-align:center}
.fdone{text-align:center}
.fdone h2,.fdone p{margin-left:auto;margin-right:auto}
.fdone p{max-width:52ch}

/* ---------- the goal panel ----------
   Two columns: what we would build on the left, what we would read on the
   right. The metrics are a description list because each one is a term and its
   meaning, and a screen reader should hear them as a pair. */
.audience-copy{max-width:1000px;margin:0 auto}
.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,56px);
  margin-top:clamp(26px,3vw,40px);text-align:left}
.fitcol h4{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-ink);padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.fitcol ul{list-style:none;margin:0}
.fitcol li{position:relative;padding:0 0 0 20px;margin-bottom:11px;
  font:400 15px/1.55 var(--f);color:rgb(21 33 59/.72)}
.fitcol li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;
  border-radius:2px;background:var(--acc-3)}
.fitcol dl{margin:0}
.fitcol dt{font:600 15px/1.4 var(--f);color:var(--navy);margin-bottom:2px}
.fitcol dd{margin:0 0 13px;font:400 14px/1.5 var(--f);color:rgb(21 33 59/.6)}
.fitq{margin:clamp(24px,2.8vw,36px) auto 0;max-width:46ch;
  font:600 clamp(17px,1.6vw,21px)/1.4 var(--f);letter-spacing:-.02em;color:var(--navy)}
.fitcaveat{margin:14px auto 0;max-width:60ch;
  font:400 13.5px/1.6 var(--f);color:rgb(21 33 59/.55)}
.fitcaveat[hidden]{display:none}
@media (max-width:760px){.fitgrid{grid-template-columns:1fr;gap:clamp(22px,5vw,32px)}}