/* ============================================================
   YELLOW METRICS
   Swiss report. One typeface — Calibri (Carlito where Calibri isn't installed) — doing every job, with
   hierarchy carried by size, weight and width rather than by a
   second family. Labels are the same face, set in spaced capitals.
   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:Calibri,"Carlito","Segoe UI",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:Calibri,"Carlito","Segoe UI",Arial,sans-serif}

/* display: condensed, heavy, set in capitals and packed tight */
h1,h2,.pull,.closing .big,.foot .st{
  font-family:Calibri,"Carlito","Segoe UI",Arial,sans-serif;
  font-weight:700;font-stretch:100%;text-transform:none;
  letter-spacing:-.01em;line-height:1;margin:0;text-wrap:balance;
  }
h1{font-size:clamp(38px,5.4vw,84px);font-weight:800}
h2, h1.as-h2{font-size:clamp(30px,4vw,56px)}
h3{font-family:Calibri,"Carlito","Segoe UI",Arial,sans-serif;font-stretch:100%;
  letter-spacing:-.02em;}
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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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, section.blk > .wrap > h1.as-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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;
  font-size:12.5px;color:var(--ink-3)}
/* underline inputs: the rule is the field */
input{font-family:Calibri,"Carlito","Segoe UI",Arial,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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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, .sub section.blk:first-child h1.as-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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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 Calibri,"Carlito","Segoe UI",Arial,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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;font-weight:700;
  font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.01em}
.prose .pq .rd{color:var(--red)} .prose .pq em{font-style:normal;color:var(--yellow-ink)}
.prose .sign{font-family:Calibri,"Carlito","Segoe UI",Arial,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:Calibri,"Carlito","Segoe UI",Arial,sans-serif;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}

/* ---------------- funnel calculator (contact page) ----------------
   Same system as the rest of the site: rules, not cards; square corners;
   mono labels; yellow only where it signals something. */
.skip{display:inline-block;margin-top:14px}
.calc{margin-top:var(--s8);border-top:3px solid var(--ink)}
.ctabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--hair)}
.ctab{font:500 11px/1.2 Calibri,"Carlito","Segoe UI",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:none;border:0;border-left:1px solid var(--hair);border-radius:0;
  padding:16px 12px;cursor:pointer;text-align:left;transition:background .2s,color .2s}
.ctab:first-child{border-left:0;padding-left:0}
.ctab:hover{color:var(--ink)}
.ctab.on{background:var(--yellow);color:var(--ink);font-weight:500;padding-left:12px}
@media(max-width:700px){.ctabs{grid-template-columns:1fr 1fr}
  .ctab:nth-child(3){border-left:0}.ctab:nth-child(n+3){border-top:1px solid var(--hair)}
  .ctab:nth-child(3):not(.on){padding-left:0}}

.cbody{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:start}
@media(max-width:900px){.cbody{grid-template-columns:1fr}}
.cin{padding:var(--s6) var(--s8) 0 0;display:grid;gap:var(--s6)}
.cout{padding:var(--s6) 0 0 var(--s8);border-left:1px solid var(--hair);display:grid;gap:var(--s5)}
@media(max-width:900px){.cin{padding-right:0}.cout{border-left:0;padding-left:0;border-top:1px solid var(--hair);margin-top:var(--s6)}}

.cslide{display:grid;gap:8px}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.shead label{font-size:10px}
.shead output{font-family:Calibri,"Carlito","Segoe UI",Arial,sans-serif;font-weight:700;font-size:22px;
  letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.shint{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.45}
.crange{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;
  border:0;padding:0;margin:0;cursor:pointer;accent-color:var(--yellow-active)}
.crange:focus{outline:none}
.crange:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.crange::-webkit-slider-runnable-track{height:2px;background:var(--ink)}
.crange::-moz-range-track{height:2px;background:var(--ink)}
.crange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-8px;
  background:var(--yellow);border:2px solid var(--ink);border-radius:0}
.crange::-moz-range-thumb{width:16px;height:16px;background:var(--yellow);border:2px solid var(--ink);border-radius:0}
.cprivacy{margin:0;font-size:13px;color:var(--ink-3);border-top:1px solid var(--hair);padding-top:14px}

.cstatus{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 0;
  border-top:3px solid var(--yellow);border-bottom:1px solid var(--hair)}
.cstatus .cdot{width:12px;height:12px;flex:none;background:var(--yellow)}
.cstatus b{font:500 11px/1.3 Calibri,"Carlito","Segoe UI",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.cstatus span:last-child{margin-left:auto;font-size:14px;color:var(--ink-2)}
.cstatus.g{border-top-color:var(--green)}.cstatus.g .cdot{background:var(--green)}
.cstatus.r{border-top-color:var(--red)}.cstatus.r .cdot{background:var(--red)}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:0}
.kpi{padding:14px 18px 14px 0;border-bottom:1px solid var(--hair);min-width:0}
.kpi:nth-child(even){padding-left:18px;border-left:1px solid var(--hair)}
.kpi.big{grid-column:1 / -1;padding:16px 18px;border-left:0;background:#FBF1DA}
.kpi p{margin:0}
.klab{font:500 10px/1.4 Calibri,"Carlito","Segoe UI",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.knum{font-family:Calibri,"Carlito","Segoe UI",Arial,sans-serif;font-weight:700;font-size:26px;
  letter-spacing:-.02em;line-height:1.15;margin:6px 0 2px!important;color:var(--ink);overflow-wrap:anywhere}
.kpi.big .knum{font-size:32px;color:var(--yellow-ink)}
.ksub{font-size:13px;color:var(--ink-2);line-height:1.4}
.cfix p:last-child{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.cfix .checkhead{margin-bottom:6px}

.cattach{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  border-top:3px solid var(--yellow);padding:14px 0 0;font-size:14px;color:var(--ink-2)}
.cattach[hidden]{display:none}
.cattach p{margin:0;line-height:1.5}
.cattach b{display:block;color:var(--ink)}
.cattach .tlink{background:none;border:0;border-bottom:2px solid var(--yellow);cursor:pointer;font-family:inherit;padding:0 0 3px}

/* phones: keep the section number above its heading (was landing below it) */
@media(max-width:820px){section.blk > .wrap > .headrow{grid-row:auto}}

/* industry picker and slider scales */
.csel{display:grid;gap:6px;padding:18px 0 4px;max-width:520px}
.csel select{font:500 18px/1.3 Calibri,"Carlito","Segoe UI",Arial,sans-serif;color:var(--ink);background:transparent;
  border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:8px 28px 8px 0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.csel select:focus{outline:none;border-bottom-color:var(--yellow);border-bottom-width:2px}
.cticks{position:relative;height:16px;margin:-2px 9px 0;font:500 10px/1 Calibri,"Carlito","Segoe UI",Arial,sans-serif;color:var(--ink-3)}
.cticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.cticks span::before{content:"";position:absolute;left:50%;top:-7px;width:1px;height:5px;background:var(--ink-3)}
.cticks span:first-child{transform:none}.cticks span:first-child::before{left:0}
.cticks span:last-child{transform:translateX(-100%)}.cticks span:last-child::before{left:auto;right:0}

/* one face everywhere: form controls do not inherit fonts by default */
button,input,select,textarea,output{font-family:inherit}

/* ================================================================
   ONE DARK SCROLL (Oct 2026)
   Every page uses the home page's dark palette. No section divider
   lines, no white or cream bands, no white/yellow top rules:
   sections flow into each other and space does the separating.
   ================================================================ */
:root{--paper:#14140F;--paper-2:#1E1D17;--ink:#F4F2EA;--ink-2:#C6C3B6;--ink-3:#8E8C80;
  --rule:transparent;--hair:#2C2B24;--yellow-ink:#FFC928;--focus:#FFC928;color-scheme:dark}
body,body.home,body.sub{background:#14140F;color:var(--ink)}
::selection{background:#FFC928;color:#14140F}
.nav,body.home .nav{background:rgba(20,20,15,.94)}
.mnav{background:#14140F;border-bottom-color:var(--hair)}
.mbar{background:rgba(20,20,15,.97);border-top-color:var(--hair)}
.tint,.dark,.closing,body.home .tint{background:transparent;--hair:#2C2B24}
.btn,.dark .btn{color:#14140F}
.btn.line{color:var(--ink);border-color:#4A493F}
.menu{border-color:#4A493F}
input,.csel select{border-bottom-color:#4A493F}

/* no divider lines between sections or above blocks */
section.blk,.closing,footer{border-top:0}
section.blk{padding:var(--s9) 0}
.svc,.svc.feat,.watch,.steps,.vert,.path,.ahead,.calc,.descriptor,.legend,.cred,.post,
.acta,.ok,.warn,.cstatus,.cattach,.prose h2,.sources h2,.next,.aside .ln:first-of-type,
.lightcell,.vm div{border-top:0}
.hubk,.hubk.sub{border-bottom:0;padding-bottom:0}
.cred{border-bottom:0}
.cstatus{padding-top:0}
.path:hover{border-top:0}
@media(max-width:820px){section.blk{padding:40px 0}}

/* soft dark panels instead of cream ones */
.kpi.big{background:rgba(255,201,40,.07)}
.prose .ysig{background:rgba(255,201,40,.07)}
.pull em{background:var(--yellow);color:#14140F}

/* traffic-light cells: a small colour square instead of a full-width bar */
.lightcell .dot,.lightcell.y .dot{width:14px;height:14px;margin-bottom:14px}

/* home page: tighter rhythm between sections */
body.home section.blk{padding:56px 0}
body.home .closing{padding:40px 0 48px}
body.home .paths{margin-top:var(--s7)}
body.home footer{padding-top:var(--s6)}
@media(max-width:820px){body.home section.blk{padding:36px 0}body.home .closing{padding:28px 0 36px}}

/* services: the heading on one line at (close to) its original size,
   the sub-line underneath on one line at the usual lead size */
.sub section.blk:first-child h2.h1line, .sub section.blk:first-child h1.as-h2.h1line{grid-row:1;max-width:none;white-space:nowrap;
  font-size:min(54px,calc((100vw - 140px) / 20.9))}
section.blk > .wrap > .oneline-lead{max-width:none;margin-top:14px;white-space:nowrap}
@media(max-width:900px){
  .sub section.blk:first-child h2.h1line, .sub section.blk:first-child h1.as-h2.h1line{white-space:normal;font-size:clamp(30px,6.5vw,44px)}
  section.blk > .wrap > .oneline-lead{white-space:normal}}
/* the h1line / oneline-lead pair also works on pages whose first block is dark (approach) */
.sub section.blk:first-child h2.h1line, .sub section.blk:first-child h1.as-h2.h1line{grid-row:1}
/* footer email on every page */
.foot .fmail{display:block;margin-top:12px;font-size:16px;color:var(--yellow-ink);text-decoration:none;
  border-bottom:2px solid var(--yellow);width:max-content;padding-bottom:2px}
.foot .fmail:hover{color:var(--ink);border-color:var(--ink)}
/* approach: short enough to keep the original heading size on one line */
.sub section.blk:first-child h2.h1line.full, .sub section.blk:first-child h1.as-h2.h1line.full{font-size:clamp(34px,4.6vw,64px)}

/* headings that must sit on one line: site.js shrinks them only as much as needed */
section.blk > .wrap > h2.fitline, section.blk > .wrap > h1.as-h2.fitline{grid-row:1;max-width:none}
section.blk > .wrap > .below-lead{max-width:70ch;margin-top:16px}
@media(min-width:901px){
  .oneline-block{max-width:none}
  .oneline-block .cs-h,.oneline-block p{white-space:nowrap}
}
/* about: the pull line a little smaller */
.pull{font-size:clamp(26px,4.2vw,60px)}

/* about: two columns to shorten the scroll
   left = green/yellow/red stacked, right = who builds it
   left = vision then mission,      right = the pull line */
section.blk > .wrap > .below-lead.wide{max-width:none}
.agrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start;margin-top:var(--s8)}
.band.stack{grid-template-columns:1fr;margin-top:0;gap:22px}
.band.stack .lightcell,.band.stack .lightcell + .lightcell{border-left:0;padding:0;margin:0}
.band.stack .lightcell::before{display:none}
.band.stack .lightcell .dot{display:inline-block;vertical-align:middle;margin:0 10px 0 0}
.band.stack .lightcell h3{display:inline-block;vertical-align:middle;margin:0 0 6px}
.agrid .cred{margin:0;padding:0;font-size:clamp(20px,2vw,26px)}
.vm.stack{grid-template-columns:1fr;margin-top:0;gap:22px}
.vm.stack div,.vm.stack div + div{border-left:0;padding:0;margin:0}
.agrid .pull{margin:0;font-size:clamp(26px,3.3vw,46px);line-height:1.05}
@media(max-width:820px){.agrid{grid-template-columns:1fr;gap:var(--s6);margin-top:var(--s6)}}

/* about, round 2: pull line under the credentials, vision + mission full width */
.aright{display:grid;gap:var(--s6);align-content:start}
.aright .pull{margin:0}
.vm.stack.wide{margin-top:var(--s7);gap:16px}
.vm.stack h3{font-weight:700;color:var(--yellow-ink);font-size:12px;letter-spacing:.2em}
@media(min-width:901px){.vm.stack.wide p{white-space:nowrap}}
/* less space between the end of "who we are" and "who we work with" */
#about{padding-bottom:var(--s7)}
section.blk.tight{padding-top:var(--s5)}
section.blk.tight .verts{margin-top:var(--s6)}
/* about, round 3 */
.agrid .cred{font-size:18px;line-height:1.55;font-weight:400}
.vm.stack h3{font-size:16px;letter-spacing:.16em;margin-bottom:6px}
@media(max-width:820px){.agrid .cred{font-size:17px}}

/* ---------------- contact: 4-tap self-check + audit form ----------------
   Same rules as the rest of the site: no cards, no rounded corners, no
   shadows. Choices are flat tiles on hairlines; the chosen one goes yellow. */
.qflow{margin-top:var(--s8);display:grid;gap:var(--s7)}
.qstep{font:500 11px/1.3 Calibri,"Carlito","Segoe UI",Arial,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow-ink);margin:0}
.qblk{display:grid;gap:14px}
.qhead{display:flex;align-items:baseline;gap:12px;margin:0;font-size:19px;font-weight:700;color:var(--ink)}
.qnum{font-size:13px;font-weight:700;color:var(--yellow-ink);min-width:14px}
.qopts{display:grid;gap:8px}
.qopts.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.qopts.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.qopts.list{grid-template-columns:1fr}
.qbtn{font:500 15.5px/1.35 Calibri,"Carlito","Segoe UI",Arial,sans-serif;color:var(--ink-2);
  background:#1C1B16;border:1px solid var(--hair);border-radius:0;padding:14px 14px;cursor:pointer;
  text-align:left;transition:background .18s,color .18s,border-color .18s}
.qbtn:hover{border-color:#5A584C;color:var(--ink)}
.qbtn.on{background:var(--yellow);border-color:var(--yellow);color:#14140F;font-weight:700}
.qopts.list .qbtn{display:flex;align-items:center;gap:14px;font-size:16.5px}
.qopts.list .qbtn i{width:12px;height:12px;flex:none;border:1.5px solid var(--ink-3)}
.qopts.list .qbtn.on{background:rgba(255,201,40,.09);border-color:var(--yellow);color:var(--ink);font-weight:500}
.qopts.list .qbtn.on i{background:var(--yellow);border-color:var(--yellow)}

.qdiag{display:grid;gap:var(--s5);padding:var(--s6) 0 0}
.qdiag .cstatus span:last-child{font-size:16px;color:var(--ink)}
.knum.sm{font-size:21px;line-height:1.2}
.qwhy p:last-child{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink)}
.qwhy .checkhead{margin-bottom:6px}
.qnote{margin:0;font-size:15px;color:var(--ink-2);border-left:3px solid var(--yellow);padding-left:14px}
.qdiag .under{margin:0}

.qform{margin-top:var(--s9)}
.qtitle{font-size:clamp(24px,2.6vw,34px);margin:10px 0 18px}
.qchips{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase}
.qchips b{color:var(--ink);text-transform:none;letter-spacing:0;font-size:15px;margin-left:6px}
.qform .cgrid{margin-top:var(--s7)}
.fpair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
textarea{font-size:18px;line-height:1.5;color:var(--ink);background:transparent;border:0;
  border-bottom:1.5px solid #4A493F;border-radius:0;padding:9px 0;resize:vertical;min-height:84px}
textarea:focus{outline:none;border-bottom-color:var(--yellow);border-bottom-width:2px}

@media(max-width:900px){
  .qopts.g4{grid-template-columns:1fr 1fr}
  .qopts.g3,.fpair{grid-template-columns:1fr}
}
/* industry picker in the self-check: one dropdown instead of eight tiles */
.qsel{padding:0;max-width:420px}
.qhead .qlab{font:inherit;letter-spacing:0;text-transform:none;color:inherit}

/* ---------------- contact, round 2: one-screen steps ----------------
   Step 1: answers left, instant read right. Step 2: form left, checks right.
   Tighter spacing so each step sits on roughly one screen on a laptop. */
section.qsec{padding:44px 0 56px}
.qsec .lead.oneline-lead{font-size:17px;margin-top:12px}
.qview{margin-top:var(--s7)}
.qview[hidden]{display:none}
.qgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;align-items:start}
.qask{display:grid;gap:22px;padding-right:var(--s8)}
.qgrid .qdiag{padding:0 0 0 var(--s8);border-left:1px solid var(--hair);gap:16px}
.qblk{gap:10px}
.qhead{font-size:17px}
.qbtn{font-size:14.5px;padding:10px 12px}
.qopts{gap:6px}
.qopts.list .qbtn{font-size:15px;padding:10px 12px;gap:12px}
/* round radio buttons for question 3 */
.qopts.list .qbtn i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink-3);
  background:transparent;position:relative}
.qopts.list .qbtn.on i{border-color:var(--yellow);background:transparent}
.qopts.list .qbtn.on i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--yellow)}
.qsel select{font-size:17px;padding:6px 28px 6px 0}
.qgrid .knum.sm{font-size:19px}
.qgrid .kpi{padding-top:10px;padding-bottom:10px}
.qwhy p:last-child{font-size:15px}
.qnote{font-size:14px}
.qdiag .under{margin:10px 0 0;font-size:12.5px}

.qform{margin-top:var(--s6)}
.qtop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 28px}
.qback{background:none;border:0;cursor:pointer;font-family:inherit;padding:0 0 3px}
.qform .cgrid{margin-top:var(--s6);gap:var(--s8)}
.qform form{gap:20px}
.qform .aside .ln{padding:9px 0}

@media(max-width:900px){
  .qgrid{grid-template-columns:1fr}
  .qask{padding-right:0}
  .qgrid .qdiag{padding:24px 0 0;border-left:0;border-top:1px solid var(--hair);margin-top:24px}
}
@media(max-width:820px){section.qsec{padding:32px 0 40px}}
#q-title:focus{outline:none}

/* ---------------- footer: the same block closes every page ----------------
   A hairline and a little tint mark where the page ends; on short pages the
   footer sits at the bottom of the screen instead of floating mid-page. */
body{min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
footer.sitefoot{border-top:1px solid #2C2B24!important;background:#100F0B;padding:40px 0 0;margin-top:var(--s7)}
body.home footer.sitefoot{padding-top:40px}
.sitefoot .foot{align-items:flex-start}
.sitefoot .foot .st{font-size:20px}
.sitefoot .foot p{font-size:15px;color:var(--ink-2)}
.flinks{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:6px}
.flinks a{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.flinks a:hover{color:var(--ink)}
.fbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-top:32px;
  padding-top:16px;padding-bottom:22px;border-top:1px solid #2C2B24;font-size:12.5px;color:var(--ink-3)}
@media(max-width:820px){
  footer.sitefoot{padding-top:30px}
}
/* currency picker beside question 2 */
.qhrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.qcur{display:flex;align-items:baseline;gap:10px}
.qcur label{font-size:10px}
.qcur select{font:500 15px/1.3 Calibri,"Carlito","Segoe UI",Arial,sans-serif;color:var(--ink);background:transparent;
  border:0;border-bottom:1.5px solid #4A493F;border-radius:0;padding:3px 22px 3px 0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.qcur select:focus{outline:none;border-bottom-color:var(--yellow)}
.qcur select option,.qsel select option{background:#14140F;color:#F4F2EA}
#q-spend .qbtn{padding:10px 8px;text-align:center;white-space:nowrap;font-size:14px;overflow:hidden;text-overflow:clip}
#q-spend.qopts.g4{grid-template-columns:1fr 1fr}
/* copyright and domain sit on the right of the footer, level with the email */
footer.sitefoot{padding:40px 0 44px}
.sitefoot .foot{align-items:flex-end}
.sitefoot .foot p.fmeta{display:grid;gap:4px;text-align:right;font-size:13px;color:var(--ink-3);max-width:none}
@media(max-width:820px){
  footer.sitefoot{padding:30px 0 34px}
  .sitefoot .foot p.fmeta{text-align:left;margin-top:6px}
}

/* ================================================================
   FUNNEL-LEAK TOOL v2 (contact page) — layout only; copy lives in
   funnel-read-config.json. Reuses .qbtn / .qopts / .cstatus / .kpi.
   ================================================================ */
.qopts.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
#fr-spend .qbtn{text-align:center;white-space:nowrap;padding:10px 6px}
.frsec .qask{gap:24px}
.frsec .qblk[hidden]{display:none}
.fr-other{margin-top:8px;max-width:420px}
.fr-other input{font-size:17px;padding:6px 0}

/* optional numbers */
.fr-toggle{justify-self:start;background:none;border:0;cursor:pointer;font-family:inherit;padding:0 0 3px;
  text-transform:none;letter-spacing:0;font-size:15px;font-weight:500}
#fr-numbers .fpair{margin-top:12px}
#fr-numbers input{font-size:18px;padding:6px 0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* severity: square + words, never colour alone */
.cstatus.g .cdot{background:#4E9A6B}
.cstatus.r .cdot{background:#D0563A}
.cstatus.empty .cdot{background:transparent;border:1.5px solid var(--ink-3)}
.fr-read .cstatus span:last-child{font-size:16px;color:var(--ink)}
.fr-head{display:grid;gap:6px}
.fr-headline{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:var(--ink);letter-spacing:-.01em}
.fr-cost{margin:0;font-size:15.5px;color:var(--ink-2)}
#fr-readbody{display:grid;gap:16px}
#fr-readbody[hidden]{display:none}
.fr-today{border-left:3px solid var(--yellow);padding-left:14px}
.fr-checks{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.fr-checks li{font-size:15px;color:var(--ink);padding-left:16px;position:relative}
.fr-checks li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--yellow)}
#fr-next[disabled]{opacity:.45;cursor:not-allowed;transform:none}
@media(min-width:901px) and (min-height:760px){
  .frsec .qgrid .fr-read{position:sticky;top:86px}
}

/* step 2 */
.qchips .sev b{font-weight:700}
.qchips .sev.green b{color:#6FBF8E}
.qchips .sev.yellow b{color:var(--yellow)}
.qchips .sev.red b{color:#E8765A}
.fr-check{display:flex;align-items:center;gap:9px;margin-top:10px;cursor:pointer;
  font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.fr-check input{width:16px;height:16px;margin:0;accent-color:#E6B23C;flex:none}
input:disabled{opacity:.4}
.fr-phone{display:flex;align-items:flex-end;gap:10px}
.fr-phone input{flex:1;min-width:0}
.fr-cc{font-size:19px;color:var(--ink-2);padding:9px 0;border-bottom:1.5px solid #4A493F}
.fr-cc[hidden],#f2-cc[hidden]{display:none}
#f2-cc{font:500 16px/1.3 Calibri,"Carlito","Segoe UI",Arial,sans-serif;color:var(--ink);background:transparent;
  border:0;border-bottom:1.5px solid #4A493F;border-radius:0;padding:9px 4px 9px 0;max-width:150px;cursor:pointer}
#f2-cc option{background:#14140F;color:#F4F2EA}
.fr-consent{font-size:12.5px;margin-top:6px}
.fr-aside .ln{grid-template-columns:1fr}
.fr-aside .ln.off{opacity:.5}
.fr-tag{font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#14140F;
  background:var(--yellow);padding:2px 6px;margin-left:6px;white-space:nowrap;vertical-align:1px}
.fr-also{margin-top:var(--s5)}
.fr-next-steps{margin-top:var(--s6)}
.fr-next-steps ol{margin:8px 0 14px;padding-left:20px;display:grid;gap:4px;font-size:15px;color:var(--ink-2)}
.fr-next-steps ol li::marker{color:var(--yellow);font-weight:700}
@media(max-width:900px){
  .qopts.g2{grid-template-columns:1fr 1fr}
  #fr-spend.qopts.g4{grid-template-columns:1fr 1fr}
}
.fr-other[hidden]{display:none}
.frsec .fpair{align-items:start}
.frsec .field{align-content:start}
.fr-phone{align-items:baseline}

/* ---------------- funnel tool v4 ---------------- */
/* section numbers are a shared counter; data-no-index hides the number on one label */
.eyebrow[data-no-index]::before{content:none;display:none}
/* pending read: grey square + neutral copy */
.cstatus.pending .cdot{background:#5E5D55;border:0}
.fr-pending{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.fr-pending[hidden]{display:none}
/* "what's really happening" as three short paragraphs */
.fr-happening{display:grid;gap:8px}
.fr-happening p{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
/* six spend bands: 3 x 2 on desktop, 2 x 3 on phones */
#fr-spend.qopts.g4{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){#fr-spend.qopts.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* sticky read: header height + 24px, desktop only */
.frsec .qgrid .fr-read{position:static}
@media(min-width:901px){
  .frsec .qgrid{align-items:start}
  .frsec .qgrid .fr-read{position:sticky;top:calc(var(--navh,64px) + 24px)}
}
/* programmatic focus on the step heading: no ring (keyboard rings elsewhere untouched) */
#fr-title:focus,#fr-title:focus-visible{outline:none}
/* phone code selector is always shown */
#f2-cc{max-width:170px}
#f2-cc.err{border-bottom-color:var(--red)!important}
/* the read can only stick while the questions column is still on screen: give the
   column room below Q6 so the read stays fully visible while Q4–Q6 are answered */
@media(min-width:901px){.frsec .qask{padding-bottom:28vh}}
.frsec .fpair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#f2-cc{flex:0 0 auto;width:118px}
@media(max-width:900px){.frsec .fpair{grid-template-columns:1fr}}

/* ---------------- contact, shorter step 1 + numbered checks ---------------- */
.fr-aside .ln{grid-template-columns:auto 1fr}
.fr-aside .ln .n{font-size:11px;letter-spacing:.12em;color:var(--yellow-ink);padding-top:3px;min-width:18px}
.fr-aside .ln.off .n{color:var(--ink-3)}
.fr-next-steps ol{margin-bottom:0}
@media(min-width:901px){
  .frsec .qask{gap:18px;padding-bottom:12vh}
  .frsec .qblk{gap:8px}
  .frsec .qhead{font-size:16.5px}
  .frsec .qbtn{padding:8px 11px;font-size:14.5px;line-height:1.3}
  .frsec .qopts{gap:6px}
  /* radio lists in two columns, follow-up in three: far fewer rows */
  #fr-conv.qopts.list,#fr-sym.qopts.list{grid-template-columns:repeat(2,minmax(0,1fr))}
  #fr-follow.qopts.g2{grid-template-columns:repeat(3,minmax(0,1fr))}
  .frsec .qopts.list .qbtn{font-size:14px;padding:8px 10px;gap:10px}
  .frsec .qopts.list .qbtn i{width:14px;height:14px}
  .frsec .qopts.list .qbtn.on i::after{inset:2.5px}
  .frsec .qview{margin-top:26px}
  .frsec .fr-read{gap:14px}
  #fr-readbody{gap:12px}
  .fr-headline{font-size:22px}
  .fr-happening{gap:5px}
  .fr-happening p,.qwhy p:last-child{font-size:14.5px;line-height:1.5}
}
@media(max-width:900px){
  .frsec .qask{gap:20px}
  .frsec .qbtn{padding:9px 11px;font-size:14.5px}
  .frsec .qopts.list .qbtn{font-size:14.5px;padding:9px 11px}
}
.fr-phone{min-width:0}.fr-phone input{width:0;flex:1 1 auto;min-width:0}
@media(min-width:901px){.frsec .qask{padding-bottom:17vh}}

/* headings promoted to <h1> for SEO keep their old <h2> look */
h1.as-h2{font-weight:700}
form[hidden],#ymAuditForm[hidden],.ok[hidden],.warn[hidden]{display:none!important}
.cgrid > div{min-width:0}.ok .tlink,.fr-noscript .tlink{white-space:normal;display:inline}.ok p{overflow-wrap:anywhere}

/* ================================================================
   HOMEPAGE HERO: animated logo (replaces the 3D graph)
   The logo's final still state is the default. html.ym-anim (set by
   the tiny script in <head>, first view only, motion allowed) hides
   the layers until the animation draws them, so there is never a
   flash of the finished logo and never a blank one without JS.
   ================================================================ */
.ymh{position:absolute;top:0;bottom:0;right:30px;width:44%;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:96px 0 34px}
.ymh-cap{position:relative;margin:0 0 18px;width:100%;height:1.35em;text-align:center;
  font-size:20px;line-height:1.35;font-weight:500;color:#F4F2EA}
.ymh-cap span{position:absolute;left:0;right:0;top:0;opacity:0}
/* the box is reserved from the viewBox before anything loads: zero layout shift */
.ymh-logo{width:min(100%, calc((min(88svh,900px) - 230px) * 1.0634));aspect-ratio:1510 / 1420;flex:none}
.ymh-svg{display:block;width:100%;height:100%;overflow:visible}
.ym-struct{opacity:.55}
.ymh .legend{position:static;margin-top:14px;align-self:flex-end}
#ym-curve-left,#ym-curve-right,#ym-dot,#ym-ring,#ym-halo,
#ym-bar-1,#ym-bar-2,#ym-bar-3{transform-box:fill-box}
#ym-bar-1,#ym-bar-2,#ym-bar-3{transform-origin:50% 100%}
#ym-dot,#ym-ring,#ym-halo{transform-origin:50% 50%}
#ym-ring,#ym-halo{vector-effect:non-scaling-stroke}
.ym-guide{stroke-dasharray:1 2;stroke-dashoffset:0}

/* hidden starting states: only for an animated first view */
.ym-anim .ym-guide{stroke-dashoffset:1}
.ym-anim #ym-arrows,.ym-anim #ym-label-signal,.ym-anim #ym-label-data,
.ym-anim #ym-hatch-1,.ym-anim #ym-hatch-2,.ym-anim #ym-hatch-3{opacity:0}
.ym-anim #ym-bar-1,.ym-anim #ym-bar-2,.ym-anim #ym-bar-3{transform:scaleY(0)}
.ym-anim #ym-dot{transform:scale(0)}
.ym-anim #ym-curve-left{fill:#5FA36A}

/* tablets and phones: the logo sits in the flow, below the buttons */
@media(max-width:900px){
  .cine{height:auto;min-height:0;max-height:none}
  .stage{position:relative;inset:auto;overflow:visible}
  .copyside{position:relative;bottom:auto}
  .ymh{position:relative;top:auto;bottom:auto;right:auto;width:100%;padding:8px 20px 40px}
  .ymh-logo{width:100%}
  .ymh .legend{position:static;left:auto;right:auto;bottom:auto;align-self:stretch;margin-top:10px}
}
@media(max-width:600px){ .ymh-cap{font-size:17px;height:2.7em} }

/* brand lockup in the header: the mark + the wordmark, both from the logo artwork.
   Wordmark and axes follow the text colour; curve, bars and dot stay yellow. */
.mark.brand{display:inline-flex;align-items:center;letter-spacing:0;line-height:0;color:var(--ink)}
.mark.brand svg{display:block;height:54px;width:auto}
.nav.solid .mark.brand svg{height:50px}
@media(max-width:600px){.mark.brand svg,.nav.solid .mark.brand svg{height:40px}}
@media(max-width:360px){.mark.brand svg,.nav.solid .mark.brand svg{height:31px}}

/* ---------- service & industry landing pages (/services/…, /industries/…) ---------- */
.lp-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin:28px 0 0}
.prose .lp-ctas{margin:1.4em 0 0}
.prose h3{font-size:clamp(19px,1.7vw,22px);line-height:1.25;letter-spacing:-.01em;margin:1.6em 0 .45em}
.prose h3 a{text-decoration:none;border-bottom:2px solid var(--yellow)}
.prose h2 + h3{margin-top:.6em}
.prose ul{margin:0 0 1.2em;padding-left:1.15em}
.prose li{margin:0 0 .45em}
.prose li::marker{color:var(--yellow)}
.prose .lp-ctas .btn{text-decoration:none;color:#14140F}
.prose .lp-ctas .tlink{text-decoration:none}
.lp-related{max-width:66ch;margin:var(--s9) 0 0;padding-top:16px;border-top:1px solid var(--hair)}
.lp-related ul{list-style:none;margin:0;padding:0}
.lp-related li{margin:0 0 10px;font-size:18px;line-height:1.4}
.lp-related a{color:var(--ink);text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.svc .more,.vert .more{display:inline-block;margin-top:14px}
@media(max-width:600px){.lp-ctas .btn{width:100%}}
.lp-label{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}

/* homepage explore row with five hubs: one row on wide screens, a single column below 900px */
.paths.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(min-width:901px){.paths.five .path + .path{padding-left:22px;border-left:1px solid var(--hair)}.paths.five .path{padding-right:18px}}
@media(max-width:900px){.paths.five{grid-template-columns:1fr}
  .paths.five .path,.paths.five .path + .path{border-left:0;padding-left:0;padding-right:0}
  .paths.five .path + .path{border-top:1px solid var(--hair);margin-top:var(--s5);padding-top:var(--s5)}}
/* industries hub */
.ind-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:var(--s8);border-top:1px solid var(--hair)}
.ind{padding:26px 26px 26px 0;display:flex;flex-direction:column;gap:10px;min-width:0}
.ind + .ind{border-left:1px solid var(--hair);padding-left:26px}
.ind h2{margin:0;font-size:clamp(24px,2.4vw,30px)}
.ind h2 a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--yellow)}
.ind p{margin:0;color:var(--ink-2);font-size:17px;line-height:1.55;max-width:46ch}
.ind .soon{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:700px){.ind-list{grid-template-columns:1fr}.ind + .ind{border-left:0;padding-left:0;border-top:1px solid var(--hair)}}
.ind-list .ind{align-items:flex-start}
.ind-list .ind h2{font-size:clamp(24px,2.3vw,30px)!important;line-height:1.15;letter-spacing:-.01em;max-width:none}
.ind-list.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.ind-list.three{grid-template-columns:1fr}.ind-list.three .ind + .ind{border-left:0;padding-left:0;border-top:1px solid var(--hair)}}