/* ============================================================
   Case study pages.

   Deliberately a separate stylesheet rather than an extraction of
   index.html's inline <style>. The homepage keeps its CSS inline so its
   first paint stays a single request — that is the whole point of a
   one-page site. These pages are secondary, arrive via a click, and
   share one cached file between them, so the trade runs the other way.

   Tokens below are copied from index.html rather than imported. That is
   duplication, but it is forty lines of constants against the risk of
   touching a live homepage, and the two files are only ever edited
   together when the brand changes.
   ============================================================ */
:root{
  --page:#FFFFFF; --canvas:#F4F4F5; --surface:#FFFFFF; --surface-2:#FAFAFB; --band:#F7F7F8;
  --text:#0F1115; --text-muted:#5B6470; --text-soft:#7C838C;
  --primary:#1A63E8; --accent:#2979FF;
  --logo-ink:var(--text); --logo-bar:var(--primary); --logo-tile:#EAF1FE;
  --hair:#E7E8EC; --hair-strong:#DADCE2;
  --sh-1:0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.06);
  --sh-2:0 4px 10px rgba(16,24,40,.05), 0 14px 36px rgba(16,24,40,.09);
  --sh-blue:0 6px 16px rgba(26,99,232,.24), 0 16px 40px rgba(26,99,232,.18);
  --ff-head:"Plus Jakarta Sans",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
  --maxw:1200px; --nav-h:76px; --r-card:22px; --r-tile:16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--ff-body);background:var(--page);color:var(--text);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--ff-head);font-weight:800;line-height:1.08;letter-spacing:-.03em}
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
.nav .shell{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--ff-head);font-weight:800;font-size:19px;letter-spacing:-.03em}
.logo .mark{
  width:34px;height:34px;border-radius:10px;background:var(--logo-tile);
  display:grid;place-content:center;gap:3px;flex:none;
}
.logo .mark i{display:block;height:3px;border-radius:2px;background:var(--logo-bar)}
.logo .mark i:nth-child(1){width:16px}
.logo .mark i:nth-child(2){width:11px}
.logo .mark i:nth-child(3){width:14px}
.btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:100px;
  padding:13px 26px;font-weight:600;font-size:15px;border:1px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.btn-fill{background:var(--primary);color:#fff;box-shadow:var(--sh-blue)}
.btn-fill:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--surface);border-color:var(--hair-strong);box-shadow:var(--sh-1)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-sm{padding:11px 22px;font-size:14px}
.btn svg{width:16px;height:16px;flex:none}

/* ---------- case hero ---------- */
.case-hero{padding:clamp(48px,7vw,84px) 0 0}
.crumb{font-size:14px;color:var(--text-muted);margin-bottom:22px}
.crumb a:hover{color:var(--primary)}
.case-hero h1{font-size:clamp(34px,5.4vw,60px);margin-top:12px}
.case-lede{color:var(--text-muted);font-size:clamp(17px,2vw,20px);max-width:60ch;margin-top:18px}

/* Facts sit in a bordered strip rather than cards: it reads as a spec
   sheet, which is what it is, and keeps the screenshot the loudest thing
   on the page. */
.facts{
  margin-top:40px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:24px 0;
}
.fact dt{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft)}
.fact dd{margin-top:6px;font-weight:600;font-size:15.5px}
.fact dd a{color:var(--primary)}
.fact dd a:hover{text-decoration:underline}

.shot{
  margin-top:40px;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--hair);box-shadow:var(--sh-2);background:var(--surface-2);
}

/* ---------- body ---------- */
.case-body{padding:clamp(56px,8vw,96px) 0}
.case-body .shell{max-width:760px}
.case-body section + section{margin-top:52px}
.case-body h2{font-size:clamp(24px,3.2vw,32px);margin-bottom:16px}
.case-body p{color:var(--text-muted);font-size:17px}
.case-body p + p{margin-top:14px}
.bullets{margin-top:18px;display:grid;gap:12px}
.bullets li{list-style:none;padding-left:30px;position:relative;color:var(--text-muted);font-size:16.5px}
.bullets li::before{
  content:"";position:absolute;left:0;top:.55em;width:16px;height:16px;border-radius:50%;
  background:var(--logo-tile);
  box-shadow:inset 0 0 0 1px rgba(26,99,232,.28);
}
.bullets li::after{
  content:"";position:absolute;left:5px;top:calc(.55em + 5px);width:6px;height:6px;
  border-radius:50%;background:var(--primary);
}
.bullets strong{color:var(--text);font-weight:600}

/* ---------- cta ---------- */
.case-cta{background:var(--band);border-top:1px solid var(--hair);padding:clamp(48px,7vw,80px) 0;text-align:center}
.case-cta h2{font-size:clamp(26px,3.6vw,38px)}
.case-cta p{color:var(--text-muted);margin-top:14px;max-width:52ch;margin-inline:auto}
.cta-row{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- more work ---------- */
.more{padding:clamp(48px,7vw,80px) 0}
.more h2{font-size:clamp(22px,3vw,28px);margin-bottom:28px}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.more-card{
  border:1px solid var(--hair);border-radius:var(--r-tile);padding:24px;background:var(--surface);
  box-shadow:var(--sh-1);transition:transform .2s ease,box-shadow .2s ease;
}
.more-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.more-card span{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft)}
.more-card h3{font-size:19px;margin-top:8px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hair);padding:34px 0;font-size:14px;color:var(--text-muted)}
.foot .shell{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot a:hover{color:var(--primary)}

@media (max-width:860px){
  .facts{grid-template-columns:1fr 1fr;gap:20px}
  .more-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .facts{grid-template-columns:1fr}
  .nav .btn{display:none}
}