/* ============================================================
   Kyle Burby — Supply Chain Planning & Analytics
   Shared design system
   ============================================================ */

:root{
  /* ground */
  --ink:#0C0E13;
  --graphite:#151922;
  --graphite-2:#1D222D;

  /* paper */
  --porcelain:#F5F6F8;
  --porcelain-2:#E9EBEF;
  --hairline:#D3D7DE;

  /* text */
  --text:#0C0E13;
  --text-2:#3D4452;
  --muted:#767E8E;
  --on-dark:#EEF0F4;
  --on-dark-2:#A7AFC0;
  --on-dark-3:#6E778A;

  /* signal */
  --blue:#2F6BF0;
  --blue-lt:#7A9BFF;
  --cyan:#3FC8DE;
  --amber:#E0A030;

  --display:"Archivo",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --pad:clamp(1.25rem,5vw,5.5rem);
  --maxw:1180px;
  --readw:70ch;
  --navh:60px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--porcelain);color:var(--text);
  font-family:var(--body);
  font-size:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  line-height:1.62;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;height:auto}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:700;font-stretch:118%;
  line-height:1.03;letter-spacing:-.022em;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.4rem,1.2rem + 5vw,5.3rem)}
h2{font-size:clamp(1.85rem,1.15rem + 2.7vw,3.3rem);margin-bottom:1.4rem}
h3{font-size:1.08rem;font-stretch:112%;font-weight:600;letter-spacing:-.005em;line-height:1.28}
h4{font-size:.95rem;font-stretch:112%;font-weight:600}

.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1.25rem;
}
.lede{
  font-size:clamp(1.08rem,1rem + .55vw,1.38rem);line-height:1.5;
  max-width:56ch;color:var(--text-2);
}
.narrow{max-width:62ch}
.tight{margin-bottom:2.6rem}

/* ---------- layout ---------- */
/* flow-root stops a first/last child's margin escaping the section — without it, a
   section with padding-top:0 lets the child's margin push the whole block down and
   the page background shows through as a stripe between two coloured bands. */
section{padding:clamp(4.5rem,9vw,8.5rem) var(--pad);position:relative;display:flow-root}
section.snug{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.wrap{max-width:var(--maxw);margin:0 auto}

.dark{background:var(--ink);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--on-dark)}
.dark .eyebrow{color:var(--on-dark-3)}
.dark .lede{color:var(--on-dark-2)}
.tinted{background:var(--porcelain-2)}

/* ============================================================
   TOP NAV
   ============================================================ */
.topnav{
  position:sticky;top:0;z-index:60;background:rgba(12,14,19,.94);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(238,240,244,.11);color:var(--on-dark);
}
.topnav-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  min-height:var(--navh);display:flex;align-items:center;gap:.85rem;
}
.brand{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark);text-decoration:none;white-space:nowrap;margin-right:auto;
  display:flex;align-items:center;gap:.6rem;
}
.brand i{width:7px;height:7px;background:var(--blue);border-radius:1px;flex:0 0 auto}
.brand b{font-weight:400}
/* the tagline lives in the hero and footer — the nav needs the room for links */
.brand em{display:none}

.navlinks{display:none;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
@media(min-width:1024px){.navlinks{display:flex}}
.navlinks a{
  display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-dark-2);text-decoration:none;
  padding:.5rem .62rem;border-radius:2px;transition:color .2s,background .2s;
  white-space:nowrap;
}
.navlinks a:hover{color:var(--on-dark);background:rgba(238,240,244,.06)}
.navlinks a[aria-current="page"]{color:var(--on-dark)}
.navlinks a[aria-current="page"]::after{
  content:"";display:block;height:2px;background:var(--blue);
  margin-top:.35rem;border-radius:1px;
}
.navcta{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:#fff;background:var(--blue);padding:.6rem .95rem;
  border-radius:2px;white-space:nowrap;transition:background .2s;display:none;
}
@media(min-width:1024px){.navcta{display:block}}
.navcta:hover{background:#255ad6}

.navtoggle{
  display:block;margin-left:auto;background:none;border:1px solid rgba(238,240,244,.2);
  color:var(--on-dark);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.5rem .75rem;border-radius:2px;cursor:pointer;
}
@media(min-width:1024px){.navtoggle{display:none}}
.navdrawer{display:none;border-top:1px solid rgba(238,240,244,.11);background:var(--ink)}
.navdrawer.open{display:block}
@media(min-width:1024px){.navdrawer{display:none!important}}
.navdrawer ul{list-style:none;margin:0;padding:.5rem var(--pad) 1.25rem;
  max-width:var(--maxw);margin:0 auto}
.navdrawer a{
  display:block;padding:.75rem 0;border-bottom:1px solid rgba(238,240,244,.08);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-2);text-decoration:none;
}
.navdrawer a[aria-current="page"]{color:var(--blue-lt)}

/* ============================================================
   BUTTONS / LINKS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;padding:.85rem 1.35rem;border-radius:2px;border:1px solid transparent;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#255ad6}
.btn-ghost{border-color:var(--hairline);color:var(--text)}
.btn-ghost:hover{border-color:var(--text);background:rgba(12,14,19,.03)}
.dark .btn-ghost{border-color:rgba(238,240,244,.28);color:var(--on-dark)}
.dark .btn-ghost:hover{border-color:var(--on-dark);background:rgba(238,240,244,.06)}
.btnrow{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}

.arrowlink{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;
  transition:gap .2s;
}
.arrowlink:hover{gap:.75rem}
.dark .arrowlink{color:var(--blue-lt)}

.linkish{background:none;border:0;padding:0 0 .15rem;font:inherit;cursor:pointer;
  color:var(--blue-lt);border-bottom:1px solid rgba(122,155,255,.4)}
.linkish:hover{border-color:var(--blue-lt)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(2.5rem,6vw,4rem);
}
.hero h1{max-width:13ch}
/* a sentence-length headline needs more measure and less scale than a three-word one */
.hero h1.long{max-width:21ch;font-size:clamp(2.05rem,1.1rem + 3.3vw,3.95rem)}
.hero .lede{margin:1.7rem 0 0}

.ident{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;color:var(--on-dark-2);
  margin:0 0 clamp(1.8rem,4vw,2.8rem);max-width:74ch;line-height:1.7;
  padding-bottom:1rem;border-bottom:1px solid rgba(238,240,244,.14)}
.ident span{color:var(--blue-lt);padding:0 .15rem}
.ident{display:flex;gap:1rem;align-items:center}
.ident .identtext{color:inherit;padding:0}
.mugshot{width:60px;height:60px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  filter:grayscale(100%) contrast(1.04);
  box-shadow:0 0 0 1px rgba(238,240,244,.22)}
@media(min-width:640px){.mugshot{width:72px;height:72px}}

.outcomes{list-style:none;display:grid;gap:1px;padding:0;
  margin:clamp(2.2rem,5vw,3rem) 0 0;background:rgba(238,240,244,.14);
  border:1px solid rgba(238,240,244,.14);border-radius:3px;overflow:hidden}
@media(min-width:720px){.outcomes{grid-template-columns:repeat(3,1fr)}}
.outcomes li{background:var(--ink);padding:1rem 1.15rem}
.outcomes b{display:block;font-family:var(--display);font-stretch:122%;font-weight:700;
  font-size:clamp(1.7rem,1.3rem + 1.3vw,2.3rem);line-height:1;letter-spacing:-.03em;
  color:var(--on-dark)}
.outcomes b em{font-style:normal;font-size:.44em;color:var(--blue-lt);margin-left:.2em}
.outcomes span{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);line-height:1.45}

.caps{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;padding:0;
  margin:clamp(2.2rem,5vw,3.2rem) 0 0}
.caps li{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-2);border:1px solid rgba(238,240,244,.18);border-radius:2px;
  padding:.5rem .8rem;transition:border-color .2s,color .2s}
.caps li:hover{border-color:var(--blue);color:var(--on-dark)}

.hero-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:920px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}}

/* page header (interior pages) */
.pagehead{padding-top:clamp(3.5rem,7vw,6rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.pagehead h1{font-size:clamp(2.1rem,1.2rem + 3.6vw,4rem);max-width:18ch}
.pagehead .lede{margin-top:1.6rem}

/* ============================================================
   SIGNATURE: disagreement panel
   ============================================================ */
.panel{border:1px solid rgba(238,240,244,.13);background:var(--graphite);
  padding:1.15rem 1.15rem 1rem;border-radius:3px}
.panel-head{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;justify-content:space-between;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark-3);padding-bottom:.85rem;border-bottom:1px solid rgba(238,240,244,.11)}
.row{display:grid;grid-template-columns:minmax(0,1fr) 3.6rem;gap:.75rem;align-items:center;
  padding:.72rem 0;border-bottom:1px solid rgba(238,240,244,.06)}
.row .src{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--on-dark-2);
  margin-bottom:.4rem;display:block}
.row .qty{font-family:var(--display);font-stretch:120%;font-weight:600;font-size:1.05rem;
  text-align:right;color:var(--on-dark);font-variant-numeric:tabular-nums}
.bar{height:5px;background:rgba(238,240,244,.08);display:block}
.bar i{display:block;height:100%;background:#4E586D;width:0;border-radius:1px;
  animation:grow .85s cubic-bezier(.3,0,.15,1) forwards}
.row:nth-of-type(2) .bar i{animation-delay:.14s}
.row:nth-of-type(3) .bar i{animation-delay:.26s}
.row:nth-of-type(4) .bar i{animation-delay:.38s}
.row:nth-of-type(5) .bar i{animation-delay:.50s}
@keyframes grow{to{width:var(--w)}}
.spread{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:space-between;
  align-items:baseline;padding-top:.95rem}
.spread b{font-family:var(--display);font-stretch:122%;font-weight:700;font-size:1.6rem;
  color:var(--blue-lt);letter-spacing:-.02em}
.spread span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-3)}
.panel-foot{margin:.9rem 0 0;font-size:.9rem;color:var(--on-dark-2);line-height:1.45;
  border-top:1px solid rgba(238,240,244,.11);padding-top:.9rem}

/* ============================================================
   SIGNATURE: sync board
   ============================================================ */
.thesis{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:960px){.thesis{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center}}
.equation{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:.55rem .8rem;align-items:center;
  margin:2rem 0 0;
}
.equation b{color:var(--text);font-weight:500}
.equation .op{color:var(--blue);font-size:1rem}
.dark .equation{color:var(--on-dark-3)}
.dark .equation b{color:var(--on-dark)}

.sync{border:1px solid var(--hairline);background:#fff;border-radius:3px;overflow:hidden}
.sync-head{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--hairline);font-family:var(--mono);font-size:.64rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.feed{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:1rem;
  align-items:center;padding:.6rem 1.1rem;border-bottom:1px solid #EDEFF3}
.feed:last-of-type{border-bottom:0}
.feed .name{font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;color:var(--text-2);
  display:flex;align-items:center;gap:.5rem;min-width:0}
.feed .name i{width:5px;height:5px;border-radius:50%;flex:0 0 auto;background:var(--blue)}
.feed.ext .name i{background:var(--cyan)}
.feed .name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track{height:12px;position:relative;overflow:hidden}
.track u{position:absolute;top:3px;height:6px;width:2px;border-radius:1px;
  background:var(--blue);opacity:.55}
.feed.ext .track u{background:var(--cyan)}
.sync-foot{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;
  align-items:baseline;padding:.95rem 1.1rem;background:var(--ink);color:var(--on-dark)}
.sync-foot b{font-family:var(--display);font-stretch:118%;font-weight:600;font-size:1rem}
.sync-foot span{font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-dark-3)}
.synckey{display:flex;gap:1.5rem;flex-wrap:wrap;margin:1rem 0 0;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--muted)}
.synckey span{display:inline-flex;align-items:center;gap:.45rem}
.synckey i{width:5px;height:5px;border-radius:50%;display:inline-block}

/* ============================================================
   week bar
   ============================================================ */
.week{margin-top:2.75rem}
.weekbar{display:flex;height:clamp(56px,7vw,74px);border:1px solid var(--hairline);
  overflow:hidden;border-radius:3px;background:#fff}
.weekbar i{display:block;flex:0 0 auto;width:0;background:#C9CEDA;
  border-right:1px solid var(--hairline)}
.weekbar i:last-child{border-right:0;background:var(--blue)}
.weekbar.go i{animation:widen .9s cubic-bezier(.3,0,.15,1) forwards}
.weekbar.go i:nth-child(2){animation-delay:.1s}
.weekbar.go i:nth-child(3){animation-delay:.2s}
.weekbar.go i:nth-child(4){animation-delay:.3s}
.weekbar.go i:nth-child(5){animation-delay:.4s}
@keyframes widen{to{width:var(--w)}}
.weekkey{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.55rem 2rem;
  font-family:var(--mono);font-size:.76rem}
@media(min-width:760px){.weekkey{grid-template-columns:1fr 1fr}}
.weekkey li{display:flex;gap:.75rem;align-items:baseline;color:var(--text-2);
  padding-bottom:.55rem;border-bottom:1px solid var(--hairline)}
.weekkey b{flex:0 0 2.9rem;color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.weekkey li.hi,.weekkey li.hi b{color:var(--blue)}

/* ============================================================
   ICP / cards / proof / versus / engagements
   ============================================================ */
.icp{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
@media(min-width:860px){.icp{grid-template-columns:repeat(3,1fr)}}
.icp article{background:var(--porcelain);padding:clamp(1.4rem,2.6vw,2rem)}
.tinted .icp article{background:var(--porcelain-2)}
.icp .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--blue);
  display:block;margin-bottom:.8rem}
.icp h3{margin-bottom:.55rem}
.icp .who{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;line-height:1.6;
  color:var(--muted);margin:0 0 .9rem;padding-bottom:.9rem;
  border-bottom:1px solid var(--hairline)}
.icp p{margin:0;color:var(--text-2);font-size:.96rem}

.cards{display:grid;gap:1px;background:rgba(238,240,244,.12);margin-top:1.5rem}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}
  .cards article:last-child:nth-child(odd){grid-column:1 / -1}}
.card{background:var(--ink);padding:clamp(1.5rem,3vw,2.4rem)}
.card p{margin:.7rem 0 0;color:var(--on-dark-2);font-size:.98rem}
.card .tag{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-lt);display:block;margin-bottom:.85rem}

.versus{border:1px solid var(--hairline);background:#fff;border-radius:3px;overflow:hidden}
.vh,.vr{display:grid;gap:0;align-items:start}
@media(min-width:820px){.vh,.vr{grid-template-columns:11rem 1fr 1fr}}
.vh{background:var(--ink);color:var(--on-dark);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase}
.vh span,.vh b{padding:.85rem 1.05rem;font-weight:500}
.vh b{color:var(--on-dark-2)}
.vh b.me{color:var(--blue-lt)}
.vr{border-top:1px solid var(--hairline)}
.vr span{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:1rem 1.05rem .35rem}
@media(min-width:820px){.vr span{padding:1rem 1.05rem;border-right:1px solid var(--hairline)}}
.vr i{font-style:normal;font-size:.95rem;color:var(--text-2);padding:.35rem 1.05rem 1rem}
@media(min-width:820px){.vr i{padding:1rem 1.05rem;border-right:1px solid var(--hairline)}}
.vr i.me{color:var(--text);background:rgba(47,107,240,.05);border-right:0}

.proof{display:grid;gap:1px;background:var(--hairline)}
@media(min-width:640px){.proof{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.proof{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--porcelain);padding:clamp(1.4rem,3vw,2.1rem)}
.tinted .stat{background:var(--porcelain-2)}
.stat .num{font-family:var(--display);font-stretch:122%;font-weight:700;
  font-size:clamp(2.1rem,1.4rem + 2.2vw,3.1rem);line-height:1;color:var(--text);
  letter-spacing:-.03em;display:block}
.stat .num em{font-style:normal;font-size:.5em;color:var(--blue);margin-left:.15em}
.stat p{margin:.75rem 0 0;font-size:.94rem;color:var(--text-2);line-height:1.5}

.eng{border-top:1px solid var(--hairline)}
.eng-row{display:grid;gap:.6rem 2rem;padding:1.9rem 0;border-bottom:1px solid var(--hairline)}
@media(min-width:860px){.eng-row{grid-template-columns:8rem minmax(0,1fr) 13rem;align-items:baseline}}
.eng-row .when{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding-top:.35rem}
.eng-row p{margin:.5rem 0 0;color:var(--text-2);font-size:.98rem;max-width:58ch}
.eng-row .out{font-family:var(--mono);font-size:.74rem;line-height:1.55;color:var(--blue)}

.portrait{margin:0 0 2rem;max-width:280px}
.portrait img{width:100%;height:auto;display:block;border-radius:3px;
  filter:grayscale(100%) contrast(1.04);border:1px solid var(--hairline)}
.portrait figcaption{margin-top:.75rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.facts{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.8rem;line-height:1.5}
.facts li{padding:.85rem 0;border-bottom:1px solid var(--hairline);display:flex;gap:1rem}
.facts li span:first-child{color:var(--muted);flex:0 0 5.5rem;letter-spacing:.06em}
.bio{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:900px){.bio{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}

/* ============================================================
   TEASER GRID (index → interior pages)
   ============================================================ */
.teasers{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  margin-top:2.4rem}
@media(min-width:760px){.teasers{grid-template-columns:1fr 1fr}}
.teaser{background:var(--porcelain);padding:clamp(1.5rem,3vw,2.3rem);
  display:flex;flex-direction:column;gap:.8rem;text-decoration:none;
  transition:background .2s}
.tinted .teaser{background:var(--porcelain-2)}
.teaser:hover{background:#fff}
.teaser .tag{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue)}
.teaser p{margin:0;color:var(--text-2);font-size:.96rem;flex:1}
.teaser .go{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text);display:inline-flex;gap:.45rem;
  align-items:center;transition:gap .2s}
.teaser:hover .go{gap:.75rem;color:var(--blue)}

/* ============================================================
   CASE STUDY INDEX + ARTICLE
   ============================================================ */
.caselist{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.caseitem{background:var(--porcelain);padding:clamp(1.6rem,3.4vw,2.6rem);
  display:grid;gap:1rem 2.5rem;text-decoration:none;transition:background .2s}
@media(min-width:900px){.caseitem{grid-template-columns:minmax(0,1fr) 15rem;align-items:start}}
.caseitem:hover{background:#fff}
.caseitem .kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);display:block;margin-bottom:.7rem}
.caseitem h3{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);margin-bottom:.7rem}
.caseitem p{margin:0;color:var(--text-2);font-size:.98rem;max-width:60ch}
.caseitem .metrics{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.74rem;
  line-height:1.6;color:var(--muted)}
.caseitem .metrics li{padding:.4rem 0;border-bottom:1px solid var(--hairline)}
.caseitem .metrics li:last-child{border-bottom:0}
.caseitem .metrics b{color:var(--text);font-weight:500}

.article{max-width:var(--readw);margin:0 auto}
.article p{margin:0 0 1.35rem;color:var(--text-2)}
.article p.first{font-size:clamp(1.05rem,1rem + .4vw,1.22rem);color:var(--text)}
.article h2{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.1rem);margin:3rem 0 1.1rem}
.article h3{margin:2.2rem 0 .7rem}
.article ul,.article ol{margin:0 0 1.35rem;padding-left:1.2rem;color:var(--text-2)}
.article li{margin-bottom:.55rem}
.article blockquote{margin:2rem 0;padding:0 0 0 1.3rem;border-left:2px solid var(--blue);
  font-size:1.08rem;color:var(--text)}
.article hr{border:0;border-top:1px solid var(--hairline);margin:3rem 0}
.article .pull{font-family:var(--display);font-stretch:114%;font-weight:600;
  font-size:clamp(1.2rem,1rem + 1vw,1.65rem);line-height:1.25;letter-spacing:-.015em;
  color:var(--text);margin:2.4rem 0;padding:1.4rem 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.article .note{font-family:var(--mono);font-size:.78rem;line-height:1.65;color:var(--muted);
  background:var(--porcelain-2);padding:1.1rem 1.25rem;border-radius:3px;margin:2rem 0}
.meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1.5rem 0 0}

/* case study fact strip */
.factstrip{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  margin:0 auto clamp(2.5rem,5vw,3.5rem);max-width:var(--maxw)}
@media(min-width:700px){.factstrip{grid-template-columns:repeat(4,1fr)}}
.factstrip div{background:var(--porcelain);padding:1.1rem 1.25rem}
.factstrip dt{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.factstrip dd{margin:0;font-family:var(--display);font-stretch:114%;font-weight:600;
  font-size:.98rem;letter-spacing:-.01em;line-height:1.3}

/* result grid inside a case */
.results{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  margin:2.2rem 0}
@media(min-width:640px){.results{grid-template-columns:1fr 1fr}}
.results div{background:var(--porcelain);padding:1.3rem 1.4rem}
.results b{display:block;font-family:var(--display);font-stretch:122%;font-weight:700;
  font-size:1.9rem;line-height:1;letter-spacing:-.03em;color:var(--text)}
.results b em{font-style:normal;font-size:.5em;color:var(--blue);margin-left:.15em}
.results span{display:block;margin-top:.6rem;font-size:.92rem;color:var(--text-2);line-height:1.5}

/* ============================================================
   DEMOS
   ============================================================ */
.demogrid{display:grid;gap:1px;background:rgba(238,240,244,.13);
  border:1px solid rgba(238,240,244,.13);border-radius:3px;overflow:hidden;margin-top:2.4rem}
@media(min-width:820px){.demogrid{grid-template-columns:repeat(2,1fr)}}
.demogrid article{background:var(--graphite);padding:clamp(1.4rem,2.8vw,2rem);
  display:flex;flex-direction:column;gap:.85rem}
.demogrid .n{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;color:var(--blue-lt)}
.demogrid .dhead{display:flex;justify-content:space-between;align-items:center;gap:.75rem 1rem;flex-wrap:wrap}
.dstatus{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.3rem .58rem;border-radius:2px;white-space:nowrap;border:1px solid;display:inline-flex;
  align-items:center;gap:.45rem}
.dstatus::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.dstatus.live{color:var(--blue-lt);border-color:rgba(122,155,255,.34);background:rgba(47,107,240,.10)}
.dstatus.ref{color:var(--on-dark-2);border-color:rgba(238,240,244,.20);background:rgba(238,240,244,.04)}
.demogrid p{margin:0;color:var(--on-dark-2);font-size:.95rem;flex:1}
.demogrid ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.06em;color:var(--on-dark-3);line-height:1.7}
.demogrid ul li::before{content:"— ";color:var(--blue-lt)}
.demorow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
.demorow .btn{padding:.7rem 1rem;font-size:.66rem}

.demo-tabs{display:grid;gap:1px;background:rgba(238,240,244,.14);margin-top:2.4rem;
  border:1px solid rgba(238,240,244,.14);border-radius:3px;overflow:hidden}
@media(min-width:560px){.demo-tabs{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.demo-tabs{grid-template-columns:repeat(4,1fr)}}
.dt{background:var(--graphite);border:0;cursor:pointer;text-align:left;
  padding:1.05rem 1.2rem;color:var(--on-dark-2);font-family:var(--body);
  display:grid;grid-template-columns:auto 1fr;gap:.15rem .85rem;align-items:baseline;
  transition:background .2s,color .2s;position:relative}
.dt:hover{background:var(--graphite-2);color:var(--on-dark)}
.dt b{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--on-dark-3);
  grid-row:1 / span 2}
.dt span{font-family:var(--display);font-stretch:114%;font-weight:600;font-size:1rem;
  letter-spacing:-.01em;color:var(--on-dark)}
.dt em{font-style:normal;font-family:var(--mono);font-size:.63rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-dark-3)}
.dt[aria-selected="true"]{background:var(--graphite-2)}
.dt[aria-selected="true"] b{color:var(--blue-lt)}
.dt[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--blue)}
.demo-bespoke{margin-top:1.15rem;padding-left:1rem;border-left:2px solid var(--blue);
  color:var(--on-dark-2);font-size:clamp(1rem,.96rem + .3vw,1.12rem)}
.demo-blurb{margin:1.5rem 0 0;color:var(--on-dark-2);font-size:1rem;max-width:70ch}
.demo-frame{margin-top:1.7rem;border:1px solid rgba(238,240,244,.14);border-radius:3px;
  overflow:hidden;background:#0B0E13;aspect-ratio:16/10}
.demo-frame iframe{width:100%;height:100%;border:0;display:block}
.demo-frame:fullscreen{aspect-ratio:auto;height:100%;border:0;border-radius:0}
.demo-play{
  width:100%;height:100%;border:0;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  background:radial-gradient(900px 480px at 50% 22%,rgba(47,107,240,.20),transparent 62%),
             linear-gradient(160deg,#0B0E13,#131B27);
  color:var(--on-dark);font-family:var(--body);transition:background .3s;
}
.demo-play:hover{background:radial-gradient(900px 480px at 50% 22%,rgba(47,107,240,.32),transparent 62%),
             linear-gradient(160deg,#0B0E13,#151F2E)}
.demo-play .pi{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-size:1.05rem;padding-left:4px;
  box-shadow:0 0 0 0 rgba(47,107,240,.55);transition:transform .25s,box-shadow .25s;
}
.demo-play:hover .pi{transform:scale(1.06);box-shadow:0 0 0 14px rgba(47,107,240,.13)}
.demo-play .pt{font-family:var(--display);font-stretch:116%;font-weight:600;
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);letter-spacing:-.01em;margin-top:.5rem}
.demo-play .ps{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-3);text-align:center;padding:0 1rem}
.demo-note{margin:1rem 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-3);display:flex;flex-wrap:wrap;gap:.4rem 1rem;
  align-items:center}
.demo-note a{color:var(--blue-lt);text-decoration:none;border-bottom:1px solid rgba(122,155,255,.4);
  padding-bottom:.15rem}
.demo-note a:hover{border-color:var(--blue-lt)}

/* ============================================================
   FORMS
   ============================================================ */
.form{max-width:44rem}
.field{margin-bottom:1.5rem}
.field label,.qlabel{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.55rem;
}
.dark .field label,.dark .qlabel{color:var(--on-dark-3)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--text);
  background:#fff;border:1px solid var(--hairline);border-radius:2px;
  padding:.8rem .95rem;transition:border-color .2s,box-shadow .2s;
}
.dark .field input,.dark .field select,.dark .field textarea{
  background:var(--graphite);border-color:rgba(238,240,244,.18);color:var(--on-dark);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,240,.14);
}
.field textarea{min-height:9rem;resize:vertical}
.field .hint{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin:.5rem 0 0;
  line-height:1.55}
.fieldrow{display:grid;gap:0 1.25rem}
@media(min-width:640px){.fieldrow{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contactgrid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media(min-width:1000px){.contactgrid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.contactgrid .form{max-width:none}

/* ============================================================
   DIAGNOSTIC
   ============================================================ */
.dx{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(min-width:1000px){.dx{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.dxq{border-top:1px solid var(--hairline);padding:1.5rem 0}
.dxq:first-of-type{border-top:0;padding-top:0}
.dxq .qn{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--blue);
  display:block;margin-bottom:.6rem}
.dxq h3{margin-bottom:1rem;font-size:1.12rem}
.opts{display:grid;gap:.5rem}
.opt{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem .95rem;
  border:1px solid var(--hairline);border-radius:2px;background:#fff;cursor:pointer;
  transition:border-color .2s,background .2s}
.opt:hover{border-color:var(--blue-lt)}
.opt input{margin:.35rem 0 0;accent-color:var(--blue);flex:0 0 auto}
.opt span{font-size:.95rem;color:var(--text-2);line-height:1.45}
.opt.sel{border-color:var(--blue);background:rgba(47,107,240,.05)}
.opt.sel span{color:var(--text)}

.dxout{position:sticky;top:calc(var(--navh) + 1.25rem);
  border:1px solid var(--hairline);background:#fff;border-radius:3px;overflow:hidden}
.dxout-head{padding:1rem 1.25rem;border-bottom:1px solid var(--hairline);
  font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);display:flex;justify-content:space-between;gap:1rem}
.dxout-body{padding:1.4rem 1.25rem}
.dxscore{font-family:var(--display);font-stretch:122%;font-weight:700;
  font-size:clamp(2.4rem,2rem + 2vw,3.4rem);line-height:1;letter-spacing:-.03em}
.dxscore em{font-style:normal;font-size:.35em;color:var(--muted);margin-left:.3em;
  letter-spacing:0}
.dxband{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  margin:.8rem 0 0;color:var(--blue)}
.dxmeter{height:8px;background:var(--porcelain-2);border-radius:2px;overflow:hidden;
  margin:1.1rem 0 1.3rem}
.dxmeter i{display:block;height:100%;width:0;background:var(--blue);
  transition:width .45s cubic-bezier(.3,0,.15,1),background .45s}
.dxread{font-size:.96rem;color:var(--text-2);margin:0 0 1.2rem;line-height:1.55}
.dxlines{list-style:none;margin:0 0 1.3rem;padding:0;font-family:var(--mono);font-size:.75rem;
  line-height:1.6}
.dxlines li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--hairline);color:var(--muted)}
.dxlines li b{color:var(--text);font-weight:500;text-align:right}
.dxempty{font-family:var(--mono);font-size:.78rem;color:var(--muted);line-height:1.6}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta h2{max-width:17ch}
.contact{display:flex;flex-wrap:wrap;gap:1.75rem 3rem;margin-top:2.5rem;
  font-family:var(--mono);font-size:.85rem}
.contact a{color:var(--on-dark);text-decoration:none;
  border-bottom:1px solid rgba(238,240,244,.3);padding-bottom:.25rem;
  transition:border-color .2s,color .2s}
.contact a:hover{color:var(--blue-lt);border-color:var(--blue-lt)}
.contact .lbl{display:block;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:.55rem;border:0}

.sitefoot{background:var(--ink);color:var(--on-dark-3);padding:clamp(2.5rem,5vw,3.5rem) var(--pad) 2.5rem}
.sitefoot-in{max-width:var(--maxw);margin:0 auto;display:grid;gap:2rem}
@media(min-width:760px){.sitefoot-in{grid-template-columns:minmax(0,1fr) auto;align-items:start}}
.sitefoot .fnav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
.sitefoot .fnav a{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-dark-2);text-decoration:none}
.sitefoot .fnav a:hover{color:var(--on-dark)}
.sitefoot .fline{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;margin:1.5rem 0 0}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.dark :focus-visible{outline-color:var(--blue-lt)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bar i,.weekbar i{animation:none!important;width:var(--w)!important}
}
@media print{
  .topnav,.navdrawer{display:none}
  section{page-break-inside:avoid;padding:2rem 0}
  .hero{min-height:auto}
  .bar i,.weekbar i{width:var(--w)!important;animation:none!important}
}