/* ============================================================
   GrowCarte — Case Studies Page
   Stylesheet (extracted from inline <style>, aligned with the
   site-wide responsive system: ≥1400 desktop, 1024–1399 laptop,
   768–1023 tablet, 481–767 large phone, ≤480 phone)
   ============================================================ */

/* ============================================
   TOKENS — identical to homepage
   ============================================ */
:root{
  --ink:        #040037;
  --ink-soft:   #4A4776;
  --blue:       #0077FC;
  --blue-deep:  #0058C4;
  --blue-pale:  #E7F0FE;
  --paper:      #F7F8FC;
  --paper-alt:  #FFFFFF;
  --mist:       #EEF2FB;
  --line:       #DEE4F5;
  --lift:       #12995A;
  --lift-pale:  #E4F6EC;
  --danger:     #C0392B;

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --max: 1160px;
  --radius: 14px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 2px rgba(4,0,55,0.06);
  --shadow-md: 0 12px 32px -12px rgba(4,0,55,0.18);
  --shadow-lg: 0 24px 60px -20px rgba(4,0,55,0.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0; line-height:1.15; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
a.inline-link{ color:var(--blue); }
a.inline-link:hover{ color:var(--blue-deep); }
img, svg{ max-width:100%; }
img{ display:block; }
button{ font-family:inherit; cursor:pointer; }

a:focus-visible, button:focus-visible{ outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; width:100%; }

.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--blue-deep); display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:16px; height:2px; background:var(--blue); display:inline-block; flex:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; font-family:var(--font-body); font-weight:600; font-size:0.95rem;
  border:1.5px solid transparent;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -10px rgba(0,119,252,0.55); }
.btn-primary:hover{ background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(0,119,252,0.6); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-deep); transform:translateY(-2px); }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *{ transition-delay:calc(var(--i) * 90ms); }

/* ============================================
   HEADER
   ============================================ */
header.site-header{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease;
  width:100%;
  isolation:isolate;
}
/* Blur lives on a ::before layer instead of directly on the header.
   backdrop-filter on the header itself creates a new CSS containing
   block for position:fixed descendants on most mobile browsers,
   which traps the full-screen mobile nav inside the header's own
   (tiny) box instead of letting it cover the viewport. */
header.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
header.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:78px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; flex:none; }
.brand img{ height:154px; width:auto; object-fit:contain; }
nav.main-nav{ display:flex; align-items:center; gap:6px; }
nav.main-nav a.nav-link{ padding:10px 14px; border-radius:100px; font-size:0.93rem; font-weight:500; color:var(--ink-soft); transition:background .18s ease, color .18s ease; white-space:nowrap; }
nav.main-nav a.nav-link:hover{ background:var(--mist); color:var(--ink); }
nav.main-nav a.nav-link.is-current{ color:var(--blue-deep); background:var(--blue-pale); }
.header-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-cta{ display:none; }
.nav-toggle{
  display:none; width:42px; height:42px; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  align-items:center; justify-content:center; flex-direction:column; gap:4px; flex:none;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================
   SERVICES DROPDOWN (header nav)
   ============================================ */
.nav-dropdown{ position:relative; }
.nav-dropdown > .nav-link{ display:inline-flex; align-items:center; gap:5px; }
.nav-dropdown .caret{ font-size:0.6rem; transition:transform 200ms ease; }
.nav-dropdown-menu{
  position:absolute; top:100%; left:0; padding-top:8px; min-width:230px; z-index:110;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
}
.nav-dropdown-menu-inner{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:8px; display:flex; flex-direction:column; gap:2px;
}
.nav-dropdown-menu a{ padding:10px 12px; border-radius:8px; font-size:0.9rem; font-weight:500; color:var(--ink-soft); transition:background .18s ease, color .18s ease; }
.nav-dropdown-menu a:hover{ background:var(--mist); color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-dropdown:hover .caret{ transform:rotate(180deg); }
}
.nav-dropdown.is-open .nav-dropdown-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav-dropdown.is-open .caret{ transform:rotate(180deg); }

/* ============================================
   FOOTER
   ============================================ */
footer.site-footer{ background:var(--ink); color:rgba(255,255,255,0.72); padding:64px 0 28px; width:100%; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.12); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ height:30px; }
.footer-col p.foot-desc{ font-size:0.88rem; max-width:32ch; color:rgba(255,255,255,0.55); }
.footer-col h4{ color:#fff; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; font-family:var(--font-mono); font-weight:600; margin-bottom:16px; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul a{ font-size:0.9rem; color:rgba(255,255,255,0.72); transition:color .18s ease; }
.footer-col ul a:hover{ color:#fff; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:24px; font-size:0.82rem; color:rgba(255,255,255,0.5); flex-wrap:wrap; gap:12px; }
.footer-legal{ display:flex; gap:20px; }

/* ============================================
   SHARED SECTION / CARD PATTERNS
   ============================================ */
.section{ padding:88px 0; width:100%; }
.section-alt{ background:var(--paper-alt); }
.section-head{ max-width:680px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); margin-top:14px; }
.section-head p{ margin-top:14px; color:var(--ink-soft); font-size:1.02rem; }
.service-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; min-width:0; }

/* ============================================
   SHARED CARD HOVER — applied to who-card,
   problem-item, component-card, process-step,
   proof-snap-card, and the case-study-detail
   related-service card
   ============================================ */
.card-hover{ transition:transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.card-hover:hover{ transform:translateY(-5px) scale(1.02); box-shadow:var(--shadow-md); border-color:var(--blue); }

/* ============================================
   SERVICE HERO
   ============================================ */
.svc-hero{ padding:64px 0 40px; width:100%; }
.svc-hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.svc-hero h1{ font-size:clamp(1.9rem, 3.8vw, 3.1rem); margin-top:16px; }
.svc-hero h1 .accent{ color:var(--blue); }
.svc-hero .lede{ margin-top:18px; font-size:1.06rem; color:var(--ink-soft); max-width:520px; }
.svc-outcomes{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.svc-outcomes li{ display:flex; align-items:flex-start; gap:10px; font-size:0.96rem; color:var(--ink-soft); }
.svc-outcomes li::before{ content:""; width:7px; height:7px; margin-top:8px; border-radius:2px; background:var(--blue); flex:none; }
.svc-hero-actions{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.svc-hero-media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:1402/1122; width:100%; margin:0 auto; display:flex; align-items:center; justify-content:center; background:var(--blue-pale); min-width:0; }
.svc-hero-media img{ width:100%; height:100%; object-fit:cover; }

/* ============================================
   WHO THIS IS FOR
   ============================================ */
.who-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.who-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.who-card .ico{ width:38px; height:38px; border-radius:50%; background:var(--blue-pale); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; flex:none; }
.who-card p{ font-size:0.92rem; color:var(--ink-soft); }

/* ============================================
   PROBLEMS WE SOLVE
   ============================================ */
.problems-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
.problems-list{ display:flex; flex-direction:column; gap:16px; }
.problem-item{ display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; min-width:0; }
.problem-item .ico{ width:34px; height:34px; border-radius:8px; background:#FDEEEC; color:var(--danger); display:flex; align-items:center; justify-content:center; flex:none; }
.problem-item h4{ font-size:0.96rem; }
.problem-item p{ font-size:0.88rem; color:var(--ink-soft); margin-top:4px; }
.problems-media{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); min-width:0; }
.problems-media img{ width:100%; object-fit:cover; }

/* ============================================
   SERVICE COMPONENTS
   ============================================ */
.components-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.component-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.component-card .num{ font-family:var(--font-mono); font-size:0.72rem; font-weight:600; color:var(--blue-deep); }
.component-card h3{ font-size:1.05rem; }
.component-card p{ font-size:0.92rem; color:var(--ink-soft); }

/* ============================================
   PROCESS
   ============================================ */
.process-list{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.process-step{ display:flex; flex-direction:column; gap:10px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; min-width:0; }
.process-step .process-num{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--blue); }
.process-step h3{ font-size:1.05rem; }
.process-step p{ font-size:0.9rem; color:var(--ink-soft); }

/* ============================================
   PROOF / METRICS
   ============================================ */
.metrics-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; }
.metric-tile{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 16px; text-align:center; min-width:0; }
.metric-tile .val{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--blue); }
.metric-tile .lbl{ font-size:0.78rem; color:var(--ink-soft); margin-top:6px; }

/* ============================================
   PROOF SNAPSHOT — creative 4-card strip
   ============================================ */
.proof-snap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.proof-snap-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 22px; text-align:left; overflow:hidden; cursor:default; min-width:0;
  transition:transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.proof-snap-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, var(--blue), transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity 200ms ease;
}
.proof-snap-card:hover, .proof-snap-card:focus-within{ transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-lg); border-color:transparent; }
.proof-snap-card:hover::before, .proof-snap-card:focus-within::before{ opacity:1; }
.proof-snap-icon{
  width:44px; height:44px; border-radius:12px; background:var(--blue-pale); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  transition:background 200ms ease, transform 200ms ease;
}
.proof-snap-card:hover .proof-snap-icon{ background:var(--blue); color:#fff; transform:rotate(-6deg) scale(1.08); }
.proof-snap-icon svg{ width:22px; height:22px; }
.proof-snap-card .val{ font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--ink); }
.proof-snap-card .lbl{ font-size:0.88rem; color:var(--ink-soft); margin-top:6px; line-height:1.45; }
.proof-snap-card .num{ position:absolute; top:16px; right:20px; font-family:var(--font-mono); font-size:0.72rem; font-weight:600; color:var(--line); letter-spacing:0.04em; }
@media (max-width:980px){ .proof-snap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .proof-snap-grid{ grid-template-columns:1fr; } }

.proof-media{ margin-top:36px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); width:420px; max-width:100%; aspect-ratio:1/1; margin-left:auto; margin-right:auto; background:#fff; }
.proof-media img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ============================================
   FAQ
   ============================================ */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:760px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; overflow:hidden; transition:border-color 200ms ease, box-shadow 200ms ease; }
.faq-item .faq-q{
  width:100%; padding:18px 22px; font-weight:600; font-size:0.98rem; font-family:inherit; text-align:left;
  background:none; border:none; color:var(--ink); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item .faq-q .faq-icon{ color:var(--blue); font-size:1.2rem; flex:none; transition:transform 200ms ease, color 200ms ease; }

/* FAQ hover animation: answer panel animates via max-height + opacity on a wrapper,
   so it can transition smoothly (native <details> can't animate this reliably). */
.faq-item .faq-a-wrap{ max-height:0; opacity:0; overflow:hidden; transition:max-height 220ms ease, opacity 200ms ease; }
.faq-item .faq-a{ padding:0 22px 20px; font-size:0.92rem; color:var(--ink-soft); }

/* Opening is always driven by a click/tap — on every device, no
   feature-detection involved (see script). Detecting "does this
   device support hover" to decide whether JS should even run turned
   out to be unreliable in practice (touch laptops, some Android
   browsers, etc. can misreport it), which was silently disabling the
   accordion on some phones. Hover now only gives desktop pointer
   users a subtle highlight — it no longer opens the panel itself,
   so there's nothing for a touch device to "miss out on". */
@media (hover:hover) and (pointer:fine){
  .faq-item:hover{ border-color:var(--blue); box-shadow:var(--shadow-sm); }
}
.faq-item.is-open{ border-color:var(--blue); box-shadow:var(--shadow-sm); }
.faq-item.is-open .faq-a-wrap{ max-height:320px; opacity:1; }
.faq-item.is-open .faq-q .faq-icon{ transform:rotate(45deg); }

/* ============================================
   CLOSING CTA
   ============================================ */
.svc-cta{ background:var(--ink); border-radius:var(--radius); padding:52px 48px; text-align:center; }
.svc-cta h2{ color:#fff; font-size:clamp(1.5rem, 3vw, 2.1rem); }
.svc-cta p{ color:rgba(255,255,255,0.68); margin-top:14px; max-width:560px; margin-left:auto; margin-right:auto; }
.svc-cta-actions{ display:flex; justify-content:center; gap:12px; margin-top:26px; flex-wrap:wrap; }
.svc-cta .fine{ margin-top:16px; font-size:0.82rem; color:rgba(255,255,255,0.5); }

/* ============================================
   CASE STUDIES — page-specific styles
   ============================================ */
.cs-disclaimer{ font-size:0.86rem; color:var(--ink-soft); font-style:italic; margin-top:10px; max-width:640px; }
.cs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:28px; }
.cs-card{ display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; min-width:0; transition:transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.cs-card:hover, .cs-card:focus-visible{ transform:translateY(-6px) scale(1.01); box-shadow:var(--shadow-lg); border-color:transparent; }
.cs-card[hidden]{ display:none; }
.cs-card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--blue-pale); display:block; }
.cs-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.cs-card:hover .cs-card-media img{ transform:scale(1.04); }
.cs-card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; }
.cs-card-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.cs-tag{ font-size:0.72rem; font-weight:700; letter-spacing:0.02em; padding:4px 10px; border-radius:100px; background:var(--mist); color:var(--ink-soft); transition:background 200ms ease, color 200ms ease; }
.cs-card:hover .cs-tag, .cs-card:focus-visible .cs-tag{ background:var(--blue-pale); color:var(--blue-deep); }
.cs-tag-muted{ background:var(--mist); color:var(--ink-soft); }
.cs-scenario-label{ font-family:var(--font-mono); font-size:0.72rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); }
.cs-card h3{ font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--ink); line-height:1.35; margin:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.cs-arrow{ transition:transform .2s ease; flex:none; color:var(--blue-deep); }
.cs-card:hover .cs-arrow{ transform:translateX(4px); }
.cs-empty-state{ display:none; }

/* ============================================================
   CASE STUDY DETAIL PAGES — shared additions
   Used by case-study-amazon.html, case-study-tiktok-shop.html,
   and case-study-seo-paid-ads.html. These are the handful of
   elements the overview page above doesn't already have —
   everything else on those pages (header, footer, hero, who-grid,
   process-list, faq-item, svc-cta, .card-hover, .reveal) reuses the
   patterns already defined earlier in this file.
   ============================================================ */

/* Breadcrumb — "Home / Case Studies / [Current Case Study]" */
.breadcrumb{
  max-width:var(--max); margin:18px auto 0; padding:0 24px;
  font-family:var(--font-mono); font-size:0.78rem; font-weight:500;
  color:var(--ink-soft); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.breadcrumb a{ color:var(--blue-deep); transition:color 150ms ease; }
.breadcrumb a:hover{ color:var(--blue); text-decoration:underline; }
.breadcrumb .sep{ color:var(--line); }
.breadcrumb .current{ color:var(--ink); font-weight:600; }

/* Illustrative-scenario disclaimer banner, shown just below the hero */
.cs-disclaimer-banner{
  max-width:var(--max); margin:20px auto 0; padding:14px 20px;
  background:var(--blue-pale); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--blue-deep); font-size:0.86rem; line-height:1.55;
}
.cs-disclaimer-banner strong{ color:var(--ink); }

/* Hero meta chips — scenario / channel / engagement timeline */
.csd-meta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.csd-meta-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:100px; background:var(--mist); color:var(--ink-soft);
  font-family:var(--font-mono); font-size:0.72rem; font-weight:600; letter-spacing:0.03em;
}

/* "What we implemented" focus-area list */
.csd-focus-list{ margin-top:16px; display:grid; gap:12px; padding:0; }
.csd-focus-list li{
  list-style:none; padding-left:28px; position:relative;
  color:var(--ink-soft); font-size:0.97rem; line-height:1.55;
}
.csd-focus-list li::before{
  content:""; position:absolute; left:0; top:7px; width:14px; height:14px;
  border-radius:4px; background:var(--blue);
}

/* Related-service card(s) — one on Amazon/TikTok pages, two stacked
   on the SEO + Paid Advertising page via .csd-related-list */
.csd-related-list{ display:flex; flex-direction:column; gap:16px; }
.csd-related-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px 26px; border-radius:var(--radius); border:1px solid var(--line); background:var(--paper);
}
.csd-related-card .csd-related-label{
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--blue-deep); margin-bottom:4px; display:block;
}
.csd-related-card h4{ font-size:1.1rem; }
.csd-related-links{ display:flex; gap:10px; flex-wrap:wrap; }

/* ============================================================
   RESPONSIVE
   Breakpoints: 1080 (case-study grids), 1024 (laptop/tablet),
   980 (grid stacking, matches homepage), 720 (mobile nav +
   single-column), 700 (case-study grids), 600 / 480 / 360
   (progressive phone tightening).
   ============================================================ */

@media (max-width: 1080px){
  .cs-grid{ grid-template-columns:repeat(2,1fr); }
  .who-grid[style]{ grid-template-columns:repeat(2,1fr) !important; }
}

@media (max-width: 1024px){
  .wrap{ padding:0 20px; }
  .section{ padding:76px 0; }
  .section-head{ margin-bottom:38px; }
}

@media (max-width: 980px){
  .svc-hero-grid{ grid-template-columns:1fr; gap:36px; }
  .svc-hero .lede{ max-width:none; }
  .who-grid{ grid-template-columns:repeat(2,1fr); }
  .problems-grid{ grid-template-columns:1fr; gap:32px; }
  .problems-grid .problems-media{ order:-1; }
  .components-grid{ grid-template-columns:repeat(2,1fr); }
  .process-list{ grid-template-columns:repeat(2,1fr); }
  .metrics-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:36px; }
}

@media (max-width: 720px){
  .header-inner{ height:64px; }

  /* Full-screen mobile dropdown. Sized with dvh (falls back to vh
     on older browsers) so mobile browser toolbars showing/hiding
     never leave part of the menu unreachable. Paired with
     header::before above (blur off the header itself) so this
     fixed panel isn't trapped inside the header's own small box. */
  nav.main-nav{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    height:calc(100vh - 64px);
    height:calc(100dvh - 64px);
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    gap:2px;
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    border-top:1px solid var(--line);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:99;
  }
  nav.main-nav.is-open{
    opacity:1;
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
  }
  nav.main-nav a.nav-link{
    padding:16px 14px;
    font-size:1.05rem;
    border-bottom:1px solid var(--mist);
  }
  .nav-toggle{ display:flex; }
  .header-actions .btn-primary{ display:none; }
  nav.main-nav .nav-cta{ display:inline-flex; justify-content:center; margin-top:18px; width:100%; }

  /* Services dropdown becomes an inline expandable section on mobile.
     max-height raised from 220px to 420px — the 8 service links need
     roughly 330px to show in full; 220px was silently clipping the
     last few with no way to reach them. */
  .nav-dropdown-menu{
    position:static; opacity:1; transform:none; pointer-events:auto; padding-top:0;
    max-height:0; overflow:hidden;
    transition:max-height 260ms ease;
  }
  .nav-dropdown-menu-inner{ background:var(--paper); border:none; box-shadow:none; padding:0 8px; border-radius:var(--radius-sm); }
  .nav-dropdown-menu a{ padding:13px 12px; font-size:0.98rem; }
  .nav-dropdown.is-open .nav-dropdown-menu{ max-height:420px; }
  .nav-dropdown.is-open .nav-dropdown-menu-inner{ padding:8px; margin:4px 0 6px; }
  .nav-dropdown > .nav-link{ width:100%; justify-content:space-between; border-bottom:1px solid var(--mist); }
  .nav-dropdown.is-open > .nav-link{ border-bottom-color:transparent; }

  .who-grid{ grid-template-columns:1fr; }
  .components-grid{ grid-template-columns:1fr; }
  .process-list{ grid-template-columns:1fr; }
  .metrics-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .svc-hero{ padding:40px 0 32px; }
  .svc-cta{ padding:40px 24px; }
  .svc-cta-actions{ flex-direction:column; }
  .svc-cta-actions .btn{ width:100%; }

  .csd-meta-row{ gap:8px; }
}

/* When the mobile nav is open, body scroll is locked via JS
   (position:fixed technique) — see the inline script. This class
   supplies the fixed positioning so the lock can't leave the page
   scrolled to the wrong spot when it's released. */
body.nav-open{
  position:fixed;
  inset:0;
  overflow:hidden;
  width:100%;
}

@media (max-width: 700px){
  .cs-grid{ grid-template-columns:1fr; gap:18px; }
  .who-grid[style]{ grid-template-columns:1fr !important; }
}

/* ---- Large phones / small tablets (600px) ---- */
@media (max-width: 600px){
  .wrap{ padding:0 18px; }
  .section{ padding:56px 0; }
  .section-head{ margin-bottom:30px; }
  .section-head p{ font-size:0.96rem; }

  .brand img{ height:112px; }
  .btn{ padding:13px 22px; font-size:0.92rem; }

  .svc-hero h1{ font-size:clamp(1.6rem, 7vw, 2.1rem); }
  .svc-hero .lede{ font-size:0.98rem; }
  .svc-hero-actions .btn{ width:100%; }

  .proof-snap-card{ padding:22px 18px; }
  .proof-snap-card .val{ font-size:1.08rem; }

  .who-card, .process-step, .component-card{ padding:20px; }

  .cs-card-body{ padding:18px 18px 20px; }
  .cs-card h3{ font-size:1.05rem; }

  .faq-item .faq-q{ padding:16px 18px; font-size:0.94rem; }
  .faq-item .faq-a{ padding:0 18px 18px; font-size:0.9rem; }

  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-legal{ gap:16px; }

  .breadcrumb{ font-size:0.74rem; gap:6px; }
  .cs-disclaimer-banner{ padding:12px 16px; font-size:0.82rem; border-radius:8px; }
  .csd-meta-chip{ font-size:0.68rem; padding:5px 10px; }
  .csd-focus-list li{ font-size:0.92rem; padding-left:24px; }
  .csd-related-card{ padding:18px 20px; flex-direction:column; align-items:flex-start; }
  .csd-related-links, .csd-related-links .btn{ width:100%; }
}

/* ---- Small phones (≤480px) ---- */
@media (max-width: 480px){
  html{ font-size:15px; }
  .wrap{ padding:0 16px; }
  .header-inner{ gap:10px; }

  .svc-hero h1{ font-size:clamp(1.5rem, 8vw, 1.9rem); }
  .section-head h2{ font-size:clamp(1.5rem, 8vw, 1.9rem); }

  .metrics-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .metric-tile{ padding:16px 12px; }
  .metric-tile .val{ font-size:1.25rem; }

  .cs-card-tags{ gap:5px; }
  .cs-tag{ font-size:0.68rem; padding:3px 9px; }

  .svc-cta{ padding:32px 20px; border-radius:var(--radius-sm); }
  .svc-cta h2{ font-size:1.35rem; }
  .svc-cta p{ font-size:0.92rem; }

  .footer-top{ gap:28px; }
  .footer-col p.foot-desc{ max-width:none; }

  .breadcrumb{ padding:0 16px; }
  .cs-disclaimer-banner{ margin:16px auto 0; padding:11px 14px; }
  .csd-related-card{ padding:16px 18px; border-radius:var(--radius-sm); }
}

/* ---- Very small phones (≤360px) ---- */
@media (max-width: 360px){
  html{ font-size:14px; }
  .wrap{ padding:0 14px; }
  .btn{ padding:12px 18px; font-size:0.88rem; }
  .svc-hero h1{ font-size:1.4rem; }
  .metrics-grid{ grid-template-columns:1fr; }
  .csd-meta-chip{ font-size:0.64rem; padding:4px 9px; }
}

/* ---- Landscape phones (short height) ---- */
@media (max-height: 480px) and (orientation: landscape){
  .svc-hero{ padding:28px 0; }
}

/* ---- Guard against any accidental horizontal scroll ---- */
img, svg, video, canvas, iframe, table{ max-width:100%; height:auto; }
.wrap, .section, header.site-header, footer.site-footer{ max-width:100%; }