/* ---------------------------------------------------------------------------
   Case study page. Loads the site stylesheet first for the brand tokens, the
   fonts, the header and the footer, then everything below is this page only.
   Class names are prefixed cs- so nothing here can reach the homepage.
--------------------------------------------------------------------------- */

/* The homepage header sits over a full-bleed canvas, so it is absolute there.
   Here it sits over the hero, which is given the matching top padding. */
.cs-back{font-size:13px;letter-spacing:.4px;color:#c9d3c3;display:inline-flex;
  align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid #ffffff35}
.cs-back:hover{border-color:var(--orange);color:var(--paper)}

.cs-wrap{max-width:1180px;margin:0 auto}

/* ---- hero ---------------------------------------------------------------
   #20382c is the green of the EAS card on the homepage. Carrying it over is
   what makes this read as that card opened up rather than a separate page. */
.cs-hero{background:linear-gradient(170deg,#20382c,#16281f 62%,#101812);
  padding:150px 7% 0}
.cs-hero .eyebrow{color:var(--orange);margin:0}
.cs-hero h1{font-size:clamp(37px,5vw,74px);line-height:1.04;letter-spacing:-.055em;
  font-weight:500;margin:26px 0 0;max-width:15ch}
.cs-lede{font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:#cdd6c6;
  max-width:60ch;margin:30px 0 0}

.cs-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  margin:60px 0 0;padding-bottom:66px}
.cs-meta div{border-top:1px solid #a9bda440;padding-top:16px}
.cs-meta dt{font-size:11px;letter-spacing:1.6px;color:#9db094;margin-bottom:9px}
.cs-meta dd{font-size:16px;line-height:1.45;margin:0;color:var(--paper)}

/* ---- screenshots --------------------------------------------------------
   The shots are bright UI on a dark page, so they need a frame or they float.
   A 1px light edge plus a soft drop does it without looking like a device
   mockup, which would date the page. */
.cs-shot{margin:0}
.cs-shot img{display:block;width:100%;height:auto;border-radius:5px;
  border:1px solid #ffffff1f;box-shadow:0 24px 60px -22px #00000090}
.cs-shot figcaption{font-size:13px;line-height:1.5;color:#8d9a86;margin-top:16px;
  max-width:62ch}
.cs-shot--lead{margin:0 7%;transform:translateY(-46px)}

/* Light sections need the caption colour flipped. */
.cs-light .cs-shot figcaption{color:#66735f}
.cs-light .cs-shot img{border-color:#19301c26;box-shadow:0 20px 50px -24px #1a2c1e55}

/* ---- generic section furniture, borrowed from the homepage's rhythm ---- */
.cs-section{padding:76px 7%}
.cs-light{background:var(--paper);color:var(--ink)}
.cs-dark{background:#0d1510}
.cs-section > .cs-wrap > .eyebrow{margin:0 0 22px}
.cs-light .eyebrow{color:#5d6a58}
.cs-dark .eyebrow{color:var(--orange)}
.cs-h2{font-size:clamp(31px,3.9vw,58px);line-height:1.1;letter-spacing:-.055em;
  font-weight:500;margin:0}
.cs-h2 span{color:#768071}
.cs-dark .cs-h2 span{color:#6f7d69}

/* ---- the problem --------------------------------------------------------- */
.cs-split{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}
.cs-split > p{font-size:17px;line-height:1.65;color:#5d695b;margin:0;max-width:46ch}
.cs-pain{list-style:none;margin:0;padding:0}
.cs-pain li{border-top:1px solid #19301c33;padding:19px 0;font-size:17px;
  line-height:1.55;display:flex;gap:18px}
.cs-pain li:last-child{border-bottom:1px solid #19301c33}
.cs-pain b{font-weight:500;color:#8a9683;font-size:13px;padding-top:4px;flex:none}

/* ---- what we built ------------------------------------------------------- */
.cs-built{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;
  margin-top:56px}
.cs-built article{border-top:1px solid #ffffff26;padding:22px 0 0}
.cs-built .number{font-size:13px;color:#7c8a74}
.cs-built h3{font-size:22px;font-weight:500;letter-spacing:-.7px;margin:26px 0 13px}
.cs-built p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}

/* ---- how it works -------------------------------------------------------- */
.cs-steps{margin-top:52px;display:grid;gap:64px}
.cs-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:6%;align-items:center}
.cs-step .cs-step-copy{grid-column:1}
.cs-step .cs-shot{grid-column:2}
/* Mirror the alternating rows by swapping the TRACKS as well as the cells.
   Reordering the cells alone hands the screenshot the narrow column on every
   other row, and the shots visibly change size as you scroll. */
.cs-step:nth-child(even){grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.cs-step:nth-child(even) .cs-step-copy{grid-column:2}
.cs-step:nth-child(even) .cs-shot{grid-column:1}
.cs-step h3{font-size:26px;font-weight:500;letter-spacing:-.9px;margin:14px 0 15px}
.cs-step p{font-size:17px;line-height:1.65;color:#5d695b;margin:0}
.cs-step .number{font-size:13px;color:#8a9683}

/* The plain-English query is the whole pitch, so it gets to be typography
   rather than another paragraph. */
.cs-query{font-family:'Manrope',sans-serif;font-size:clamp(21px,2.3vw,31px);
  line-height:1.35;letter-spacing:-.035em;font-weight:500;color:#1d3324;
  border-left:3px solid var(--orange);padding:4px 0 4px 26px;margin:26px 0 0}
.cs-query + .cs-query{margin-top:18px}

/* ---- results ------------------------------------------------------------- */
.cs-results{background:var(--orange);color:var(--ink);padding:76px 7%}
.cs-results .eyebrow{color:#3d2a17}
.cs-results .cs-h2{margin-bottom:56px}
.cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.cs-stats div{border-top:1px solid #10201455;padding-top:22px}
.cs-stats dt{font-family:'Manrope',sans-serif;font-size:clamp(44px,5.6vw,86px);
  line-height:1;letter-spacing:-.06em;font-weight:500}
.cs-stats dd{margin:16px 0 0;font-size:16px;line-height:1.5;color:#2b3f2e;max-width:26ch}
.cs-outcomes{list-style:none;margin:52px 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:0 8%}
.cs-outcomes li{border-top:1px solid #10201455;padding:19px 0;font-size:17px;
  line-height:1.5}

/* ---- stack + cta --------------------------------------------------------- */
.cs-stack-list{display:flex;flex-wrap:wrap;gap:11px;margin:30px 0 0;padding:0;
  list-style:none}
.cs-stack-list li{border:1px solid #ffffff2e;border-radius:20px;padding:9px 16px;
  font-size:14px;color:#d3dbcb}
.cs-note{font-size:13px;line-height:1.6;color:#7d8a76;margin:34px 0 0;max-width:70ch}

.cs-cta{background:#101c15;padding:82px 7%;text-align:center}
.cs-cta h2{font-size:clamp(34px,4.6vw,68px);font-weight:500;letter-spacing:-.055em;
  line-height:1.06;margin:0 0 34px}
.cs-cta-row{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cs-btn{display:inline-flex;align-items:center;gap:10px;padding:19px 26px;
  font-size:16px;border-radius:3px;background:var(--orange);color:var(--ink);
  font-weight:500}
.cs-btn:hover{background:#ffa464}
.cs-btn--ghost{background:none;color:var(--paper);box-shadow:inset 0 0 0 1px #ffffff2e}
.cs-btn--ghost:hover{background:#1b2c22}

.cs-foot{background:#101c15;padding:0 7%}
.cs-foot footer{border-top:1px solid #aebca24d;display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding:25px 0 30px}
.cs-foot footer .brand{font-size:23px}
.cs-foot footer > span,.cs-foot footer > a:last-child{font-size:13px;color:#acbaa3}

/* ---- narrow --------------------------------------------------------------
   One column below 860. The two-up screenshot steps in particular go to mush
   long before that, because the UI in them has its own columns. */
@media(max-width:860px){
  .cs-hero{padding:118px 7% 0}
  .cs-meta{grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;padding-bottom:52px}
  .cs-shot--lead{margin:0 7%;transform:translateY(-30px)}
  .cs-section{padding:56px 7%}
  .cs-split{grid-template-columns:1fr;gap:34px}
  .cs-built{grid-template-columns:1fr;gap:0;margin-top:38px}
  .cs-built article{padding-bottom:26px}
  .cs-built h3{margin-top:18px}
  .cs-steps{gap:46px;margin-top:38px}
  .cs-step,.cs-step:nth-child(even){grid-template-columns:1fr;gap:26px}
  .cs-step .cs-step-copy,.cs-step:nth-child(even) .cs-step-copy{grid-column:1}
  .cs-step .cs-shot,.cs-step:nth-child(even) .cs-shot{grid-column:1}
  .cs-stats{grid-template-columns:1fr;gap:0}
  .cs-stats div{padding:22px 0 0}
  .cs-outcomes{grid-template-columns:1fr;margin-top:36px}
  .cs-results{padding:56px 7%}
  .cs-cta{padding:58px 7%}
}
@media(max-width:430px){
  .cs-meta{grid-template-columns:1fr}
  .cs-hero h1{max-width:none}
  .cs-btn{width:100%;justify-content:space-between}
  .cs-cta-row{display:flex;width:100%}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
.cs-lede + .cs-lede{margin-top:18px}