/* Hammer & Pixel, case study layer.
   Loads after style.css. Never edit style.css from here.
   British English. No em dashes, no en dashes in this file. */

:root{
  --cs-ground:#f3f3f1;
  --cs-ground-2:#eceae6;
  --cs-card:#fcfcfb;
  --cs-ink:#181818;
  --cs-ink-2:#54524e;
  --cs-hair:rgba(24,24,24,.14);
  --cs-hair-soft:rgba(24,24,24,.08);
  --cs-accent-text:#8a6400;
  --cs-r:14px;
}

body.cs{background:var(--cs-ground);color:var(--cs-ink)}
body.cs a{color:inherit}
body.cs a:focus-visible,body.cs button:focus-visible{outline:2px solid var(--cs-accent-text);outline-offset:3px}

/* ---------- light fixed nav ---------- */
.nav-light{
  background:linear-gradient(to bottom,rgba(243,243,241,.94),rgba(243,243,241,.72));
  color:var(--cs-ink);
}
.nav-light.scrolled{background:rgba(252,252,251,.94);border-bottom:1px solid var(--cs-hair-soft)}
.nav-light .brand{color:var(--cs-ink)}
.nav-light .nav-links a{color:var(--cs-ink-2)}
.nav-light .nav-links a:hover{color:var(--cs-ink)}
.nav-light .nav-links a[aria-current="page"]{color:var(--cs-ink);font-weight:700}
.nav-light .nav-toggle span{background:var(--cs-ink)}
.nav-light a:focus-visible,.nav-light button:focus-visible{outline-color:var(--cs-accent-text)}

.pill-contact{background:var(--accent);color:#141004;border-color:transparent}
.pill-contact:hover{background:var(--accent-deep)}
.pill-contact .arrow{background:#141004;color:var(--accent)}

/* ---------- dark header band ---------- */
.cs-head{
  background:var(--page);color:var(--ink);
  padding-block:clamp(6.2rem,14vh,8.5rem) clamp(2.2rem,6vh,3.4rem);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cs-head .eyebrow-pill{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.74rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:#f1f1f1;background:rgba(255,255,255,.06);
  border:1px solid var(--hair);border-radius:999px;padding:.44rem .9rem;
}
.cs-head .eyebrow-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.cs-head h1{
  margin-top:1.05rem;
  font-size:clamp(32px,5vw,58px);
  font-weight:800;letter-spacing:-.03em;line-height:1.05;max-width:18ch;
}
.cs-head h1 .acc{color:var(--accent)}
.cs-head .cs-outcome{
  margin-top:.95rem;max-width:58ch;color:#e2e2e2;
  font-size:clamp(1rem,.96rem + .3vw,1.14rem);line-height:1.55;
}
.cs-head .cs-back{
  display:inline-flex;align-items:center;min-height:44px;
  margin-top:1.3rem;font-size:.9rem;font-weight:650;color:#cfcfcf;
}
.cs-head .cs-back:hover{color:#fff}

/* ---------- warm bands ---------- */
.cs-band{background:var(--cs-ground);padding-block:clamp(2.4rem,7vh,4rem)}
.cs-band-alt{background:var(--cs-ground-2)}
.cs-kicker{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-ink-2);font-weight:700}
.cs-band h2{
  margin-top:.9rem;font-size:clamp(1.45rem,1.2rem + 1.4vw,2.1rem);
  font-weight:780;letter-spacing:-.025em;line-height:1.12;max-width:20ch;color:var(--cs-ink);
}
.cs-body{margin-top:1rem;max-width:66ch;color:var(--cs-ink-2);line-height:1.65}
.cs-body + .cs-body{margin-top:.8rem}

/* ---------- bullet list ---------- */
.cs-list{margin-top:1.4rem;display:grid;gap:.7rem;max-width:72ch}
.cs-list li{
  position:relative;padding-left:1.7rem;color:var(--cs-ink-2);line-height:1.6;
}
.cs-list li::before{
  content:"";position:absolute;left:.1rem;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--accent-deep);
}
.cs-list b{color:var(--cs-ink);font-weight:700}

/* ---------- stat row ---------- */
.cs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.cs-stat{
  background:var(--cs-card);border:1px solid var(--cs-hair);border-radius:var(--cs-r);
  padding:1.15rem 1.15rem 1.25rem;
}
.cs-stat b{display:block;font-size:clamp(1.15rem,1rem + .8vw,1.55rem);font-weight:800;letter-spacing:-.025em;color:var(--cs-ink);line-height:1.15}
.cs-stat span{display:block;margin-top:.45rem;font-size:.92rem;color:var(--cs-ink-2);line-height:1.45}
.cs-stat small{display:block;margin-top:.6rem;font-size:.76rem;color:#6d6a65;line-height:1.4}

/* ---------- screenshots ---------- */
.cs-shots{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,.75fr);gap:1.2rem;margin-top:1.5rem;align-items:start}
.cs-shot{background:var(--cs-card);border:1px solid var(--cs-hair);border-radius:var(--cs-r);overflow:hidden}
.cs-shot img{width:100%;height:auto}
.cs-shot figcaption{padding:.8rem 1rem;font-size:.86rem;color:var(--cs-ink-2)}

.cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.cs-grid .cs-shot img{aspect-ratio:1200/750;object-fit:cover;object-position:top center}
.cs-grid figcaption{font-size:.84rem}

/* ---------- quote ---------- */
.cs-quote{
  margin-top:1.5rem;max-width:60ch;
  border-left:3px solid var(--accent-deep);padding-left:1.3rem;
}
.cs-quote blockquote{font-size:clamp(1.1rem,1rem + .7vw,1.45rem);line-height:1.45;color:var(--cs-ink);font-weight:650;letter-spacing:-.01em}
.cs-quote figcaption{margin-top:.8rem;font-size:.9rem;color:var(--cs-ink-2)}

/* ---------- hub cards ---------- */
.cs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:1.6rem}
.cs-card{
  display:block;background:var(--cs-card);border:1px solid var(--cs-hair);border-radius:var(--cs-r);
  overflow:hidden;transition:border-color .25s,transform .25s var(--ease);
}
.cs-card:hover{border-color:rgba(24,24,24,.3);transform:translateY(-2px)}
.cs-card img{width:100%;height:auto;aspect-ratio:1200/750;object-fit:cover;object-position:top center}
.cs-card-text{padding:1.15rem 1.25rem 1.4rem}
.cs-card-text .cs-kicker{font-size:.72rem}
.cs-card-text h2{margin-top:.55rem;font-size:clamp(1.15rem,1rem + .7vw,1.45rem);font-weight:780;letter-spacing:-.02em;line-height:1.2;color:var(--cs-ink);max-width:none}
.cs-card-text p{margin-top:.6rem;color:var(--cs-ink-2);font-size:.96rem;line-height:1.55}
.cs-card-more{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;font-weight:700;font-size:.92rem;color:var(--cs-accent-text)}

/* ---------- CTA ---------- */
.cs-cta{background:var(--page);color:var(--ink);padding-block:clamp(2.6rem,8vh,4.2rem);text-align:center}
.cs-cta h2{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-inline:auto;max-width:20ch}
.cs-cta p{margin:1rem auto 0;max-width:52ch;color:#d8d8d8;font-size:1.02rem;line-height:1.55}
.cs-btn-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.6rem}
.cs-btn{
  display:inline-flex;align-items:center;gap:.55rem;min-height:48px;
  border-radius:999px;padding:0 1.5rem;font-weight:700;font-size:1rem;
  border:1px solid transparent;transition:background .2s,border-color .2s;
}
.cs-btn-accent{background:var(--accent);color:#141004}
.cs-btn-accent:hover{background:var(--accent-deep)}
.cs-btn-ghost{border-color:rgba(255,255,255,.26);color:#fff}
.cs-btn-ghost:hover{border-color:rgba(255,255,255,.55)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .cs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-shots{grid-template-columns:1fr}
  .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-cards{grid-template-columns:1fr}
}
@media (max-width:700px){
  .nav-light .pill-contact{display:inline-flex;padding:.6rem .6rem .6rem .95rem;font-size:.9rem}
  .cs-head{padding-block:5.6rem 2.2rem}
  .cs-head h1{max-width:none}
  .cs-stats{grid-template-columns:1fr}
  .cs-grid{grid-template-columns:1fr}
  .cs-btn-row .cs-btn{flex:1 1 100%;justify-content:center}
}

/* The header screenshot beside the words. Added with the image wiring,
   15 September 2026. */
.cs .phead-two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.8rem;align-items:center}
.cs .phead-words{min-width:0}
.cs .phead-shot{margin:0;border-radius:14px;overflow:hidden;background:#111;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 40px rgba(0,0,0,.34)}
.cs .phead-shot img{display:block;width:100%;height:auto}
@media (max-width:860px){
  .cs .phead-two{grid-template-columns:1fr;gap:1.1rem}
  .cs .phead-shot{max-width:28rem}
}