/* Shared stylesheet for every case study page under case-studies/.

   The root pages (index.html, solutions.html) keep their own inline <style> on
   purpose, so this file only serves the case-study template. The token block,
   header, nav, button and footer rules below are copied from solutions.html;
   if those change there, change them here too.

   The template's blocks, in page order: .cs-hero (kicker, label, headline,
   qualifier, meta row), .cs-stats (four figures), .cs-cols (three short
   columns), .cs-proof (one story with small print, plus the ledger card),
   .cs-band (short titled items for the controller and the IT lead), .close
   (where it stands plus the booking CTA) and .cs-sources (the footnote). See
   _template.html for the skeleton. A new case study needs new content only. */

:root{
  --ink:#1F2421;
  --amber:#C8852B;
  --amber-soft:#E9A94A;
  --paper:#FBFBF8;
  --slate:#787C75;
  --amber-text:#956320; /* amber for small text on light grounds; --amber stays for large type, rules and bars */
  --text-muted:#666A63; /* body text on light grounds; --slate fails AA as text */
  --tint:#F3F1EA;
  --hair:#E4E1D8;
  --serif:"DM Serif Display", Georgia, serif;
  --sans:"DM Sans", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 32px;}

/* top bar */
header{padding:30px 0 0;}
header .wrap{display:flex;justify-content:space-between;align-items:baseline;}
.wordmark{font-family:var(--serif);font-size:25px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;}
.wordmark a{color:inherit;text-decoration:none;}
.wordmark .ai{color:var(--amber);}
.nav{display:flex;gap:26px;align-items:baseline;}
.nav a{font-size:14.5px;color:var(--text-muted);text-decoration:none;letter-spacing:.01em;white-space:nowrap;transition:color .2s ease;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--amber-text);}
@media(max-width:680px){
  /* The booking link drops out of the nav on phones: it cannot sit next to the
     wordmark without wrapping, and every page already carries the real CTA. */
  .nav{gap:16px;}
  .nav a{font-size:13.5px;}
  .nav .cta{display:none;}
}

main{flex:1;}
.eyebrow{font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-text);margin-bottom:16px;}
.cs-h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,36px);line-height:1.2;margin-bottom:40px;max-width:30ch;text-wrap:balance;}

/* hero: kicker, label, headline, qualifier, meta row */
.cs-hero{padding:72px 0 64px;}
.cs-label{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,28px);color:var(--amber);line-height:1.2;margin-bottom:18px;}
.cs-hero h1{
  font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(28px,3.7vw,42px);line-height:1.16;max-width:34ch;margin-bottom:26px;text-wrap:balance;
}
.cs-qual{font-size:clamp(16px,2vw,18.5px);color:var(--text-muted);max-width:56ch;line-height:1.55;text-wrap:pretty;}
.cs-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:52px;padding-top:22px;border-top:1px solid var(--hair);}
.cs-meta dt{font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.cs-meta dd{font-size:15px;line-height:1.45;color:var(--ink);}

/* four stats: same figure style as the homepage proof band */
.cs-stats{background:var(--tint);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.cs-stats .wrap{padding:76px 32px 80px;}
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;}
.fig{border-top:2px solid var(--amber);padding-top:20px;}
.fig .n{font-family:var(--serif);font-size:clamp(30px,3.1vw,38px);line-height:1;color:var(--ink);margin-bottom:14px;white-space:nowrap;}
.fig .l{font-size:14.5px;color:var(--text-muted);line-height:1.5;text-wrap:pretty;}

/* three short columns */
.cs-cols{padding:84px 0 40px;}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;}
.col h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;margin-bottom:16px;padding-top:18px;border-top:1px solid var(--hair);}
.col p{font-size:15.5px;color:var(--text-muted);line-height:1.6;text-wrap:pretty;}
.col p + p{margin-top:14px;}
.col p strong{color:var(--ink);font-weight:500;}
.fn{color:var(--amber-text);text-decoration:none;font-weight:700;padding:0 2px;}
.fn:hover{text-decoration:underline;}

/* proof block: the story beside a ledger card that shows the same numbers,
   in the homepage demo's visual language. It only repeats figures from the
   story text, so it is aria-hidden. */
.cs-proof{padding:64px 0 92px;}
.proof-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:72px;align-items:center;}
.story{font-family:var(--serif);font-size:clamp(20px,2.1vw,23px);line-height:1.42;color:var(--ink);text-wrap:pretty;}
.small{margin-top:26px;padding-top:20px;border-top:1px solid var(--hair);font-size:14.5px;color:var(--text-muted);line-height:1.6;max-width:62ch;text-wrap:pretty;}
.ledger{
  background:#fff;border:1px solid var(--hair);border-radius:4px;padding:18px 20px 16px;
  box-shadow:0 1px 2px rgba(31,36,33,.05),0 16px 34px -14px rgba(31,36,33,.22);
}
.ledger .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;}
.ledger .row span{font-size:12.5px;color:var(--text-muted);}
.ledger .row b{font-family:var(--serif);font-weight:400;font-size:21px;white-space:nowrap;}
.ledger .row + .row{border-top:1px solid var(--hair);}
.ledger .gap{position:relative;margin-top:4px;padding-left:12px;border-top:1px dashed var(--amber) !important;}
.ledger .gap::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;background:var(--amber);}
.ledger .gap span{color:var(--ink);font-weight:500;}
.ledger .gap b{color:var(--amber);font-size:30px;}

/* band: short titled items for the controller and the IT lead */
.cs-band{background:var(--tint);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.cs-band .wrap{padding:84px 32px 76px;}
.items{border-bottom:1px solid var(--hair);}
.item{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 36px;padding:22px 0;border-top:1px solid var(--hair);}
.item h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.3;color:var(--ink);}
.item p{font-size:15.5px;color:var(--text-muted);line-height:1.6;max-width:66ch;text-wrap:pretty;}

/* close: where it stands, then the standard booking CTA (same dark block as
   solutions.html) */
.close{padding:72px 0 28px;}
.dark{
  background:var(--ink);border-radius:8px;padding:40px 40px 42px;
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
}
.dark .eyebrow{color:var(--amber-soft);margin-bottom:0;}
.dark .line{font-family:var(--serif);font-size:30px;color:var(--paper);line-height:1.22;max-width:36ch;text-wrap:balance;}
.dark .body{font-size:15.5px;color:#c9cbc4;line-height:1.6;max-width:60ch;}
.dark .act{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px;}
.dark .btn{background:var(--paper);color:var(--ink);}
.dark .btn:hover{background:var(--amber);color:var(--paper);}
.dark .cta-note{color:#b9bcb4;}
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-weight:500;font-size:16px;letter-spacing:.01em;
  padding:15px 28px;border-radius:6px;text-decoration:none;white-space:nowrap;
  transition:background .2s ease, transform .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-1px);}
.cta-note{font-size:14.5px;color:var(--text-muted);max-width:30ch;line-height:1.45;}

/* sources footnote */
.cs-sources{padding:0 0 52px;}
.cs-sources p{font-size:13px;color:var(--text-muted);line-height:1.6;max-width:84ch;padding-top:18px;}
.cs-sources:target p,.cs-sources p:target{color:var(--ink);}

/* footer */
footer{border-top:1px solid var(--hair);}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:26px 32px 34px;}
footer .line{font-family:var(--serif);font-size:18px;color:var(--ink);}
footer .contacts{font-size:14px;color:var(--text-muted);text-align:right;line-height:1.7;}
footer .contacts b{color:var(--ink);font-weight:700;}

/* load */
.fade{opacity:0;transform:translateY(12px);animation:rise .7s ease forwards;}
.fade.d1{animation-delay:.10s;}
.fade.d2{animation-delay:.20s;}
.fade.d3{animation-delay:.32s;}
@keyframes rise{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.fade{animation:none;opacity:1;transform:none;}}

@media(max-width:900px){
  .cs-meta{grid-template-columns:1fr 1fr;gap:22px 28px;}
  .figs{grid-template-columns:1fr 1fr;gap:36px 32px;}
  .cols{grid-template-columns:1fr;gap:36px;}
  .col p{max-width:62ch;}
  .proof-grid{grid-template-columns:1fr;gap:40px;}
  .ledger-wrap{max-width:360px;}
  .item{grid-template-columns:1fr;gap:6px;}
}
@media(max-width:680px){
  .cs-hero{padding:48px 0 48px;}
  .cs-meta{margin-top:40px;}
  .cs-stats .wrap,.cs-band .wrap{padding:60px 32px 64px;}
  .cs-cols{padding:64px 0 32px;}
  .cs-proof{padding:48px 0 68px;}
  .close{padding:56px 0 24px;}
  /* The button label is wider than the dark block's inner width on a phone, so
     it has to be allowed to wrap and fill it rather than bleed past the edge. */
  .dark{padding:28px 22px 30px;gap:18px;}
  .dark .line{font-size:24px;}
  .dark .act{display:block;width:100%;}
  .btn{display:block;width:100%;white-space:normal;text-align:center;padding:15px 18px;}
  .dark .cta-note{display:block;max-width:none;margin-top:14px;}
}
@media(max-width:520px){
  .figs{grid-template-columns:1fr;}
  .wrap{padding:0 20px;}
  .cs-stats .wrap,.cs-band .wrap{padding:56px 20px 60px;}
  footer .wrap{padding:26px 20px 34px;}
}