/* ============================================================
   YELLOW METRICS
   Swiss report. One typeface — Archivo — doing every job, with
   hierarchy carried by size, weight and width rather than by a
   second family. IBM Plex Mono holds every number and label.
   Structure is rules and whitespace. There is not one card on
   this page, and not one rounded corner.
   ============================================================ */
:root{
  /* paper, ink, hairline, structural rule, and the one signal colour */
  --paper:#FCFBF8;
  --paper-2:#F3F1E8;
  --ink:#14140F;
  --ink-2:#4C4C42;
  --ink-3:#8A897C;
  --rule:#14140F;
  --hair:#D6D2C3;

  --yellow:#E6B23C;
  --yellow-hover:#F0BF52;
  --yellow-active:#C7962B;
  --yellow-ink:#7A5709;
  --green:#3E7D58;
  --red:#C0492F;

  --focus:#7A5709;
  --gut:66px;            /* the margin column that carries section numbers */
  --col:30px;            /* gutter between ruled columns                   */

  --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:28px;
  --s7:38px; --s8:52px; --s9:76px; --s10:104px;
  --ease:cubic-bezier(.16,.84,.30,1);
  color-scheme:light;
}
*{box-sizing:border-box}
::selection{background:#F6E4B6;color:var(--ink)}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;font-stretch:100%;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;counter-reset:sec;
}
.mono,.eyebrow,.idx,label,.cl,.checkhead,.legend div,.anno,.soon,.tg,.rt,
.aside .ln .n,.aside .dir b,.lightcell h3,.vm h3,.steps li::before{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}

/* display: condensed, heavy, set in capitals and packed tight */
h1,h2,.pull,.closing .big,.foot .st{
  font-family:"Bricolage Grotesque","Archivo",Arial,sans-serif;
  font-weight:700;font-stretch:100%;text-transform:none;
  letter-spacing:-.026em;line-height:1;margin:0;text-wrap:balance;
  font-variation-settings:"opsz" 96}
h1{font-size:clamp(38px,5.4vw,84px);font-weight:800}
h2{font-size:clamp(30px,4vw,56px)}
h3{font-family:"Bricolage Grotesque","Archivo",Arial,sans-serif;font-stretch:100%;
  letter-spacing:-.02em;font-variation-settings:"opsz" 24}
h3{font-size:20px;font-weight:700;font-stretch:96%;letter-spacing:-.012em;
  line-height:1.16;margin:0 0 12px}

.wrap{max-width:1260px;margin:0 auto;padding-inline:30px}
@media(max-width:600px){.wrap{padding-inline:20px}}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---------------- navigation ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;
  padding:calc(14px + env(safe-area-inset-top,0px)) 30px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(252,251,248,.94);backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid transparent;transition:border-color .3s,padding .3s var(--ease)}
.nav.solid{border-bottom-color:var(--rule);
  padding-top:calc(9px + env(safe-area-inset-top,0px));padding-bottom:9px}
.mark{font-weight:800;font-stretch:78%;font-size:16px;letter-spacing:.2em;
  color:var(--ink);text-decoration:none;text-transform:uppercase}
.navr{display:flex;align-items:center;gap:26px}
.navr a:not(.btn){font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;
  text-transform:uppercase;letter-spacing:.09em;transition:color .2s}
.navr a:not(.btn):hover{color:var(--ink)}
@media(max-width:900px){.navr a:not(.btn){display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  border:1px solid transparent;border-radius:0;
  font-weight:700;font-stretch:88%;font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;padding:12px 22px;background:var(--yellow);color:var(--ink);
  transition:background .2s,transform .16s var(--ease)}
.btn:hover{background:var(--yellow-hover);transform:translateY(-1px)}
.btn:active{background:var(--yellow-active);transform:none}
.btn.lg{font-size:15px;padding:17px 30px}
.btn.line{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.line:hover{background:var(--ink);color:var(--paper)}
.tlink{font-size:13.5px;font-weight:700;font-stretch:88%;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--yellow);padding-bottom:4px;white-space:nowrap}
.tlink:hover{border-color:var(--ink)}

/* ---------------- hero ---------------- */
.cine{position:relative;height:88svh;min-height:620px;max-height:900px}
@media(max-width:900px){.cine{height:94svh;min-height:600px;max-height:none}}
.stage{position:absolute;inset:0;overflow:hidden;background:var(--paper)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .8s ease}
.stage canvas.up{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to right,
    rgba(252,251,248,.98) 0%, rgba(252,251,248,.96) 26%,
    rgba(252,251,248,.72) 40%, rgba(252,251,248,.18) 52%, rgba(252,251,248,0) 62%)}
@media(max-width:900px){
  .scrim{background:linear-gradient(to bottom,
    rgba(252,251,248,.98) 0%, rgba(252,251,248,.95) 40%,
    rgba(252,251,248,.5) 56%, rgba(252,251,248,0) 70%)}
}
.copyside{position:absolute;left:0;top:0;bottom:0;width:52%;z-index:4;
  display:flex;flex-direction:column;justify-content:center;
  padding:96px 30px 40px 58px;min-width:0}
@media(max-width:1100px){.copyside{padding:92px 24px 32px 30px;width:56%}}
@media(max-width:900px){.copyside{width:100%;bottom:auto;justify-content:flex-start;
  padding:calc(82px + env(safe-area-inset-top,0px)) 20px 22px}}

.descriptor{margin:0 0 26px;display:flex;flex-direction:column;align-items:flex-start;gap:0;
  border-top:2px solid var(--ink);padding-top:10px}
.descriptor b{font-weight:700;font-stretch:88%;font-size:clamp(11.5px,1.02vw,13.5px);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);border:0;padding:0}
.descriptor span{font-family:"IBM Plex Mono",monospace;font-size:clamp(9.5px,.88vw,11px);
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
h1 .y{color:var(--yellow-ink)}
.hsub{font-size:clamp(15.5px,1.3vw,19px);color:var(--ink-2);margin:22px 0 32px;
  line-height:1.5;max-width:52ch}
.hctas{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
@media(max-width:600px){
  .descriptor{margin-bottom:18px}
  .hsub{margin:16px 0 24px}
  .hctas{gap:18px;width:100%}.hctas .btn{width:100%}.hctas .tlink{width:auto;text-align:left}
}
.poster{position:absolute;inset:0;transition:opacity .8s ease}
.poster svg{width:100%;height:100%;display:block}
.poster.down{opacity:0}

.legend{position:absolute;right:30px;bottom:24px;z-index:3;display:grid;gap:0;
  border-top:2px solid var(--ink);padding-top:9px;background:none}
@media(max-width:900px){.legend{right:20px;left:20px;bottom:76px;
    grid-auto-flow:column;justify-content:space-between;align-items:center;padding-top:7px}
  .legend div span{display:none}}
.legend div{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;padding:3px 0}
.legend i{width:16px;height:9px;flex:none}
.legend b{color:var(--ink);font-weight:500}
.legend .g i{background:var(--green)}
.legend .y i{background:var(--yellow)}
.legend .r i{background:var(--red)}

.anno{position:absolute;left:-9999px;top:-9999px;transform:translate(-50%,-50%);
  pointer-events:none;font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;opacity:0;
  background:var(--paper);padding:5px 9px 4px;border:1px solid var(--ink);
  border-radius:0;transition:opacity .45s ease;z-index:3}
.anno.on{opacity:1}
.anno.hot{background:var(--yellow);border-color:var(--yellow)}
.anno.red{color:var(--paper);background:var(--red);border-color:var(--red)}
.anno.green{color:var(--paper);background:var(--green);border-color:var(--green)}
.hint{display:none}

/* ---------------- inverted sections ----------------
   The approach and the close are set in reverse. Tokens are redefined on
   the section itself, so every rule, label and link inside follows. */
.dark{--ink:#F4F2EA;--ink-2:#C6C3B6;--ink-3:#8E8C80;--rule:#F4F2EA;--hair:#3A3A32;
  --yellow-ink:#E6B23C;--paper-2:#24241E;background:#14140F;color:var(--ink)}
.tint{background:#FBF1DA;--hair:#E3CF9E}
.dark ::selection{background:#E6B23C;color:#14140F}
.dark .btn{color:#14140F}

/* ---------------- the section grid ----------------
   Every section is a two-column frame: a narrow margin carrying the
   section number and label, and the body. The rule across the top is
   the only thing separating one section from the next. */
section.blk{padding:var(--s10) 0 var(--s10);border-top:1px solid var(--rule);
  counter-increment:sec}
section.blk > .wrap{display:grid;grid-template-columns:var(--gut) minmax(0,1fr);align-items:start}
section.blk > .wrap > *{grid-column:2}
section.blk > .wrap > .eyebrow{grid-column:1;grid-row:1;margin:0;padding:6px 16px 0 0}
section.blk > .wrap > .headrow{grid-row:1}
@media(max-width:820px){
  section.blk > .wrap{grid-template-columns:minmax(0,1fr)}
  section.blk > .wrap > *{grid-column:1}
  section.blk > .wrap > .eyebrow{grid-row:auto;padding:0 0 14px}
}
.eyebrow{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3)}
.eyebrow::before{content:counter(sec,decimal-leading-zero);display:block;
  font-size:15px;letter-spacing:.04em;color:var(--ink);margin-bottom:7px}
@media(max-width:820px){.eyebrow::before{display:inline;margin:0 10px 0 0}}

.headrow{display:grid;grid-template-columns:1.32fr 1fr;gap:var(--s8);align-items:end}
@media(max-width:1000px){.headrow{grid-template-columns:1fr;gap:var(--s5)}}
.lead{font-size:18px;color:var(--ink-2);margin:0;line-height:1.55;max-width:46ch}
section.blk > .wrap > h2 + .lead{margin-top:var(--s5)}

/* ---------------- services ---------------- */
#services{position:relative;overflow:hidden}
#services > .wrap{position:relative;z-index:1}
/* the converging streams live in the lower half, never behind running text */
#swarm{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.4s ease;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 46%,#000 78%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 46%,#000 78%)}
#swarm.up{opacity:.6}

.svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:var(--s9)}
@media(max-width:1000px){.svcs{grid-template-columns:minmax(0,1fr)}}
.svc{background:none;border:0;border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-top:3px solid var(--ink);padding:18px var(--col) 0 0;
  display:flex;flex-direction:column;min-width:0}
.svc + .svc{border-left:1px solid var(--hair);padding-left:var(--col)}
@media(max-width:1000px){
  .svc{padding-right:0}
  .svc + .svc{border-left:0;padding-left:0;margin-top:var(--s7)}
}
.svc:hover{transform:none;box-shadow:none;background:none}
/* the agency is named after the measurement, so that column gets the signal */
.svc.feat{border-top-color:var(--yellow)}
.svc .idx{font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 20px}
.svc.feat .idx{color:var(--yellow-ink)}
.svc h3{font-size:23px}
.svc.feat h3{font-size:26px}
/* a fixed measure for the standfirst, so the hairline above the sub-service
   list runs unbroken across all three columns — the point of a ruled grid */
.svc .oneline{font-size:15.5px;color:var(--ink-2);margin:0 0 26px;line-height:1.55;
  min-height:calc(4 * 1.55em)}
@media(max-width:1000px){.svc .oneline{min-height:0}}
.items{display:grid;gap:0;margin-top:0;padding:0}
.items div{display:grid;gap:2px;min-width:0;padding:12px 0;border-top:1px solid var(--hair)}
.items b{font-size:14.5px;font-weight:700;letter-spacing:-.008em}
.items span{font-size:13.5px;color:var(--ink-3);line-height:1.45}
.new,.flag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:9px;
  letter-spacing:.12em;padding:2px 6px 1px;border-radius:0;margin-left:7px;
  vertical-align:middle;font-weight:500;text-transform:uppercase}
.new{border:1px solid var(--ink);color:var(--ink)}
.flag{background:var(--yellow);color:var(--ink)}

.caps{margin-top:var(--s8);padding-top:0;border-top:0}
.caps .cl{margin:0 0 2px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.caps ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
@media(max-width:900px){.caps ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.caps li{font-size:14px;color:var(--ink-2);background:none;border:0;border-radius:0;
  border-top:1px solid var(--hair);padding:11px var(--s5) 11px 0;line-height:1.3}

/* ---------------- approach ---------------- */
.appgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:var(--s9)}
@media(max-width:900px){.appgrid{grid-template-columns:1fr}}
.watch{background:none;border:0;border-radius:0;box-shadow:none;
  border-top:3px solid var(--yellow);padding:18px var(--s8) 0 0}
.watch h3{font-size:clamp(23px,2.4vw,32px);font-stretch:88%;margin-bottom:16px}
.watch p{margin:0;font-size:17px;line-height:1.55;color:var(--ink)}
.checkhead{font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.steps{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:0;
  border-top:3px solid var(--ink)}
@media(min-width:901px){.steps{border-left:1px solid var(--hair);padding-left:var(--s8)}}
@media(max-width:900px){.steps{margin-top:var(--s7)}}
.steps li{counter-increment:st;display:grid;grid-template-columns:auto 1fr;
  column-gap:18px;row-gap:3px;align-items:baseline;padding:18px 0;
  border-top:1px solid var(--hair)}
.steps li:first-child{border-top:0;padding-top:20px}
.steps li::before{content:counter(st,decimal-leading-zero);grid-row:1 / span 2;
  font-size:10px;letter-spacing:.14em;color:var(--ink-3);padding-top:5px}
.steps b{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.steps span{font-size:15.5px;color:var(--ink-2);line-height:1.55}

/* ---------------- who we are ---------------- */
.band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:var(--s9)}
@media(max-width:860px){.band{grid-template-columns:1fr}}
.lightcell{background:none;border:0;border-radius:0;box-shadow:none;transform:none;
  opacity:1;padding:0 var(--col) 0 0;position:static}
.lightcell + .lightcell{border-left:1px solid var(--hair);padding-left:var(--col)}
@media(max-width:860px){
  .lightcell{padding-right:0}
  .lightcell + .lightcell{border-left:0;padding-left:0;margin-top:var(--s6)}
}
.lightcell .dot{width:100%;height:9px;border-radius:0;margin:0 0 18px}
.lightcell h3{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 10px}
.lightcell p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.lightcell p b{display:block;color:var(--ink);font-weight:700;margin-bottom:4px;font-size:17px}
.lightcell.g .dot{background:var(--green)} .lightcell.g h3{color:var(--green)}
.lightcell.r .dot{background:var(--red)}   .lightcell.r h3{color:var(--red)}
.lightcell.y .dot{height:20px;background:var(--yellow)}
.lightcell.y h3{color:var(--yellow-ink)}
.lightcell.y p{color:var(--ink)}
.lightcell.y p b{font-size:19px}
.lightcell::before{content:"";position:static;display:block;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;background:none;color:transparent;
  padding:0;margin-bottom:8px;border-radius:0;line-height:14px;min-height:14px}
.lightcell.y::before{content:"This is us";color:var(--yellow-ink)}

.cred{margin:var(--s9) 0 0;border-left:0;padding:22px 0;max-width:none;
  border-top:3px solid var(--ink);border-bottom:1px solid var(--hair);
  font-size:clamp(19px,2.2vw,28px);line-height:1.34;font-weight:500;font-stretch:92%}

.vm{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:var(--s8)}
@media(max-width:760px){.vm{grid-template-columns:1fr}}
.vm div{border-left:0;padding:18px var(--s8) 0 0;border-top:1px solid var(--hair)}
.vm div + div{border-left:1px solid var(--hair);padding-left:var(--s8)}
@media(max-width:760px){.vm div + div{border-left:0;padding-left:0}}
.vm h3{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px}
.vm p{margin:0;font-size:18px;line-height:1.45}
.pull{margin:var(--s10) 0 0;max-width:none;text-align:left;
  font-size:clamp(30px,5.4vw,78px);line-height:.94}
.pull .rd{color:var(--red)}
/* the real brand yellow as a block, not as text: yellow text on paper fails contrast */
.pull em{font-style:normal;background:var(--yellow);color:var(--ink);padding:0 .12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------------- who we work with ---------------- */
.verts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:var(--s9)}
@media(max-width:760px){.verts{grid-template-columns:1fr}}
.vert{background:none;border:0;border-radius:0;box-shadow:none;
  border-top:3px solid var(--ink);padding:18px var(--s8) 0 0}
.vert + .vert{border-left:1px solid var(--hair);padding-left:var(--s8)}
@media(max-width:760px){
  .vert{padding-right:0}
  .vert + .vert{border-left:0;padding-left:0;margin-top:var(--s7)}
}
.vert h3{font-size:22px}
.vert p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.55}

/* ---------------- insights ---------------- */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:var(--s8)}
@media(max-width:900px){.posts{grid-template-columns:1fr}}
.post{background:none;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid var(--rule);padding:16px var(--col) 0 0;
  display:flex;flex-direction:column;min-width:0}
.post + .post{border-left:1px solid var(--hair);padding-left:var(--col)}
@media(max-width:900px){
  .post{padding-right:0}
  .post + .post{border-left:0;padding-left:0;margin-top:var(--s6)}
}
.post:hover{transform:none;box-shadow:none}
.post.pending{background:none}
.post .tg{font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px}
.post h3{font-size:19px;line-height:1.28;margin:0 0 22px;font-weight:700}
.post .rt{margin:auto 0 0}
.soon{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:9px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--hair);color:var(--ink-3);background:none;
  padding:3px 8px 2px;border-radius:0}

/* ---------------- the audit ---------------- */
.cgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--s9);
  align-items:start;margin-top:var(--s8)}
@media(max-width:900px){.cgrid{grid-template-columns:1fr;gap:var(--s7)}}
form{display:grid;gap:var(--s6);background:none;border:0;border-radius:0;
  padding:0;box-shadow:none}
.field{display:grid;gap:4px}
label{font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
label .opt{text-transform:none;letter-spacing:0;font-family:"Archivo",sans-serif;
  font-size:12.5px;color:var(--ink-3)}
/* underline inputs: the rule is the field */
input{font-family:"Archivo",sans-serif;font-size:19px;color:var(--ink);
  background:transparent;border:0;border-bottom:1.5px solid var(--hair);
  border-radius:0;padding:9px 0;min-width:0;transition:border-color .2s}
input:focus{outline:none;border-bottom-color:var(--yellow);border-bottom-width:2px}
input::placeholder{color:var(--ink-3)}
.err{border-bottom-color:var(--red)!important}
.under{font-size:13.5px;color:var(--ink-3);margin:14px 0 0}
.ok{border:0;border-top:3px solid var(--green);background:none;border-radius:0;
  padding:22px 0 0;font-size:18px;line-height:1.5}
.warn{border:0;border-top:3px solid var(--yellow);background:none;border-radius:0;
  padding:22px 0 0;font-size:16px;line-height:1.55}
.warn b{display:block;margin-bottom:6px}
.warn code{font-family:"IBM Plex Mono",monospace;font-size:13.5px;
  background:var(--paper-2);padding:2px 6px;border-radius:0;word-break:break-all}
.formerr{margin:12px 0 0;font-size:14px;color:var(--red);line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
button[disabled]{opacity:.55;cursor:progress}

.aside .ln{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--hair);font-size:15px;color:var(--ink-2);line-height:1.45}
.aside .ln:first-of-type{border-top:1px solid var(--rule)}
.aside .ln .n{font-size:10px;letter-spacing:.12em;color:var(--ink-3);padding-top:4px}
.aside .dir{margin-top:var(--s6)}
.aside .dir b{display:block;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;font-weight:500}
.aside .dir p{margin:0 0 16px;font-size:16px}

/* ---------------- closing ---------------- */
.closing{padding:var(--s10) 0;border-top:1px solid var(--rule);text-align:left}
.closing .motif{display:block;width:100%;max-width:560px;margin:0 0 var(--s6);height:auto}
.closing .big{font-size:clamp(26px,4.4vw,62px);line-height:.96;max-width:22ch}
.closing .big em{font-style:normal;color:var(--yellow-ink)}

footer{border-top:1px solid var(--rule);padding:var(--s7) 0 var(--s9);
  font-size:14px;color:var(--ink-3)}
.foot{display:flex;justify-content:space-between;gap:var(--s7);flex-wrap:wrap;align-items:flex-start}
.foot .st{font-weight:800;font-stretch:74%;text-transform:uppercase;font-size:22px;
  letter-spacing:0;color:var(--ink);display:block;margin-bottom:10px;line-height:1}
.foot p{margin:0;max-width:52ch;line-height:1.6}

.mbar{display:none}
@media(max-width:900px){
  .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(252,251,248,.97);backdrop-filter:blur(10px);border-top:1px solid var(--rule);
    transform:translateY(110%);transition:transform .35s var(--ease)}
  .mbar.up{transform:translateY(0)}
  .mbar .btn{width:100%}
  body{padding-bottom:74px}
}

/* mobile rhythm — last, so it overrides the component rules above */
@media(max-width:820px){
  :root{--s8:38px;--s9:46px;--s10:52px;--col:0px}
  section.blk{padding:46px 0}
  .headrow{gap:16px}
  .lead{font-size:17px}
  .svcs,.posts{margin-top:34px}
  .band,.verts,.appgrid{margin-top:34px}
  .caps{margin-top:34px}
  .cred{margin-top:40px;padding:18px 0}
  .vm{margin-top:34px}
  .vm div{padding-right:0}
  .vm div + div{padding-left:0;margin-top:22px}
  .pull{margin-top:48px}
  .cgrid{margin-top:30px}
  .watch{padding-right:0}
  .closing{padding:52px 0}
  footer{padding:30px 0 42px}
  .aside .ln{padding:12px 0;font-size:14.5px}
  .under{margin-top:10px}
  .eyebrow::before{font-size:13px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------------- multi-page additions ---------------- */
.navr a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--yellow)}
.mark[aria-current="page"]{box-shadow:none}
/* sub-pages: clear the fixed nav, open with a page masthead */
.sub main{padding-top:64px}
.sub section.blk:first-child{border-top:0;padding-top:calc(var(--s10) * .8)}
.sub section.blk:first-child h2{font-size:clamp(34px,4.6vw,64px)}
/* the next-step band that closes every sub-page */
.next{display:flex;justify-content:space-between;align-items:center;gap:var(--s6);flex-wrap:wrap;
  padding:var(--s8) 0;border-top:1px solid var(--rule)}
.next p{margin:0;font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.25;max-width:34ch}
/* home: the four routes into the site */
.paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:var(--s8)}
@media(max-width:1000px){.paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.paths{grid-template-columns:1fr}}
.path{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);
  border-top:3px solid var(--ink);padding:18px 26px 26px 0;min-width:0;transition:border-color .2s}
.path + .path{border-left:1px solid var(--hair);padding-left:26px}
@media(max-width:1000px){.path:nth-child(odd){border-left:0;padding-left:0}}
@media(max-width:560px){.path + .path{border-left:0;padding-left:0}.path{padding-right:0}}
.path:hover{border-top-color:var(--yellow)}
.path .k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.path h3{margin:0;font-size:24px}
.path p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.5}
.path .go{margin-top:auto;padding-top:8px;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase}
.path:hover .go{color:var(--yellow-ink)}

/* phone menu: the nav links are hidden below 900px, so pages need a way in */
.menu{display:none;align-items:center;cursor:pointer;background:none;color:var(--ink);
  border:1px solid var(--rule);border-radius:0;font:700 12px/1 "Archivo",sans-serif;
  letter-spacing:.12em;text-transform:uppercase;padding:13px 14px}
.mnav{position:fixed;left:0;right:0;top:64px;z-index:89;background:var(--paper);
  border-bottom:1px solid var(--rule);padding:6px 20px 22px;display:grid}
.mnav[hidden]{display:none}
.mnav a:not(.btn){display:block;padding:15px 0;border-bottom:1px solid var(--hair);
  font-size:17px;font-weight:600;text-decoration:none;color:var(--ink)}
.mnav a[aria-current="page"]{color:var(--yellow-ink)}
.mnav .btn{margin-top:18px}
@media(max-width:900px){.menu{display:inline-flex}.navr{gap:10px}}
@media(min-width:901px){.mnav{display:none!important}}

.mark,.nav .btn,.menu{white-space:nowrap}
@media(max-width:420px){.mark{font-size:13.5px;letter-spacing:.14em}.nav .btn{padding:11px 12px;font-size:12px}.menu{padding:12px 10px}}

/* ---------------- insights hub ---------------- */
.hubsec{margin-top:var(--s9)}
.hubk{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);margin:0 0 16px;padding-bottom:10px;border-bottom:3px solid var(--ink)}
.hubk.sub{margin-top:var(--s8);border-bottom:1px solid var(--rule);color:var(--ink-3)}
.feat-posts{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:860px){.feat-posts{grid-template-columns:1fr}}
.feat-post{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);
  padding:22px 30px 30px 0;min-width:0}
.feat-post + .feat-post{border-left:1px solid var(--hair);padding-left:30px}
@media(max-width:860px){.feat-post{padding-right:0}.feat-post + .feat-post{border-left:0;padding-left:0;border-top:1px solid var(--hair)}}
.feat-post .tg{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--yellow-ink);margin:0}
.feat-post h3{font-size:clamp(23px,2.4vw,32px);line-height:1.12;margin:0}
.feat-post p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55;max-width:52ch}
.feat-post .go{margin-top:6px;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  border-bottom:2px solid var(--yellow);align-self:flex-start;padding-bottom:3px}
.feat-post:hover h3{color:var(--yellow-ink)}
.cs-empty{border-top:0;padding:6px 0 0;max-width:60ch}
.cs-empty .cs-h{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.02em;margin:0 0 10px;line-height:1.25}
.cs-empty p{margin:0 0 20px;color:var(--ink-2)}

/* ---------------- article ---------------- */
.post-page{padding:calc(64px + var(--s8)) 0 var(--s9)}
.post-page .wrap{max-width:820px}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s7)}
.crumb a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--hair)}
.crumb a:hover{color:var(--ink)}
.crumb.back{margin:var(--s9) 0 0}
.ahead{border-top:3px solid var(--ink);padding-top:16px;margin-bottom:var(--s8)}
.ameta{display:flex;gap:18px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 22px}
.ameta span:first-child{color:var(--yellow-ink)}
.atitle{max-width:none;font-size:clamp(34px,5vw,62px);line-height:1.02;margin:0 0 22px}
.astand{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink-2);margin:0;max-width:56ch}
.prose{font-size:18px;line-height:1.72;max-width:66ch}
.prose p{margin:0 0 1.15em}
.prose h2{max-width:none;font-size:clamp(24px,2.6vw,32px);line-height:1.12;margin:2em 0 .7em;padding-top:16px;border-top:1px solid var(--rule)}
.prose a{color:var(--ink);text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.prose strong{font-weight:700}
.prose .lens{padding-left:18px;border-left:3px solid var(--hair)}
.prose .habits{margin:0 0 1.2em;padding:0;list-style:none;border-top:1px solid var(--hair)}
.prose .habits li{padding:14px 0 14px 34px;border-bottom:1px solid var(--hair);position:relative;counter-increment:hb}
.prose .habits{counter-reset:hb}
.prose .habits li::before{content:counter(hb,decimal-leading-zero);position:absolute;left:0;top:18px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--yellow-ink)}
.prose .ysig{background:var(--yellow-subtle,#FBF1DA);border-left:4px solid var(--yellow);padding:14px 18px;font-size:16.5px;line-height:1.55}
.prose .ysig b{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--yellow-ink);margin-bottom:4px}
.prose .zl{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;color:var(--ink-2);
  padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.prose .zl span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:7px;margin-right:6px}
.prose .zl span::before{content:"";width:14px;height:8px;display:inline-block}
.prose .zl .g::before{background:var(--green)} .prose .zl .y::before{background:var(--yellow)} .prose .zl .r::before{background:var(--red)}
.prose .pq{margin:1.6em 0;font-family:"Bricolage Grotesque","Archivo",sans-serif;font-weight:700;
  font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.026em}
.prose .pq .rd{color:var(--red)} .prose .pq em{font-style:normal;color:var(--yellow-ink)}
.prose .sign{font-family:"Bricolage Grotesque","Archivo",sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;margin-top:1.6em}
.acta{margin:2em 0;padding:24px 0;border-top:3px solid var(--yellow);border-bottom:1px solid var(--hair);
  display:grid;gap:16px;justify-items:start}
.acta p{margin:0;font-size:18px;line-height:1.5}
.sources{margin-top:2.4em;font-size:14.5px;color:var(--ink-2)}
.sources h2{font-size:13px;font-family:"IBM Plex Mono",monospace;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  border-top:1px solid var(--rule);padding-top:14px;margin:0 0 12px}
.sources ol{margin:0;padding-left:20px;display:grid;gap:8px}
@media(max-width:820px){.post-page{padding-top:calc(64px + 30px)}.prose{font-size:17px}}

/* ---------------- home page: dark ----------------
   Same tokens as the approach page. Applied only while the home page is shown. */
body.home{--paper:#14140F;--paper-2:#24241E;--ink:#F4F2EA;--ink-2:#C6C3B6;--ink-3:#8E8C80;
  --rule:#F4F2EA;--hair:#3A3A32;--focus:#FFC928;--yellow-ink:#FFC928;
  background:#14140F;color:var(--ink)}
body.home .nav{background:rgba(20,20,15,.94)}
body.home .stage{background:#14140F}
body.home .scrim{background:linear-gradient(to right,
  rgba(20,20,15,.98) 0%, rgba(20,20,15,.96) 26%,
  rgba(20,20,15,.72) 40%, rgba(20,20,15,.18) 52%, rgba(20,20,15,0) 62%)}
@media(max-width:900px){
  body.home .scrim{background:linear-gradient(to bottom,
    rgba(20,20,15,.98) 0%, rgba(20,20,15,.95) 40%,
    rgba(20,20,15,.5) 56%, rgba(20,20,15,0) 70%)}
}
body.home .tint{background:#1E1D17;--hair:#3A3A32}
body.home .btn{color:#14140F}
body.home .btn.line{color:var(--ink)}
body.home .btn.line:hover{color:#14140F}
body.home .anno.hot{color:#14140F}
body.home .flag{color:#14140F}
body.home .mnav{background:#14140F}
body.home ::selection{background:#FFC928;color:#14140F}