/* Case-study pages (/work/<client>/). Self-contained per the site's page-CSS convention:
     reset + :root + shared header-band/wrap, then the case-study-specific blocks. */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --ink: #1A1A1A;
    --ink-soft: #3a3d42;
    --ink-muted: #7a7e87;
    --surface: #F8F7F4;
    --white: #ffffff;
    --accent: #E8A435;
    --accent-light: #fdf3e0;
    --accent-dark: #c98a1a;
    --navy: #0F2540;
    --navy-soft: #1B2A4A;
    --border: #e2e3e6;
    --success: #0ea86b;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;
  }

  html { scroll-behavior: smooth; }

  body {
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    background: var(--surface);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  /* ---- shared page furniture (matches clinics/barbershops) ---- */
  .header-band {
    background: var(--navy);
    padding: 130px 40px 100px;
    text-align: center;
    position: relative; overflow: hidden;
  }
  .header-band::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(232,164,53,0.14) 0%, transparent 55%);
  }
  .header-eyebrow {
    position: relative; display: inline-block;
    font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
  }
  .header-band h1 {
    position: relative; font-family: 'DM Serif Display', serif;
    font-size: clamp(34px, 5vw, 52px); color: #fff;
    letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.15;
  }
  .header-band h1 em { font-style: italic; color: var(--accent); }
  .header-band p { position: relative; color: rgba(255,255,255,0.62); font-size: 17px; max-width: 620px; margin: 0 auto; }

  .wrap { max-width: 1020px; margin: -64px auto 0; padding: 0 24px 30px; position: relative; }

  /* ---- sections ---- */
  .cs-section {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 42px;
    margin-bottom: 20px;
    box-shadow: 0 16px 44px -30px rgba(27,42,74,0.35);
  }
  .cs-section h2 {
    font-family: 'DM Serif Display', serif; font-size: clamp(24px, 3vw, 31px);
    color: var(--navy); letter-spacing: -0.01em; margin-bottom: 16px;
  }
  .cs-section > p { color: var(--ink-soft); font-size: 16px; margin-bottom: 12px; }
  .cs-section > p:last-child { margin-bottom: 0; }
  .cs-lede { font-size: 17px !important; color: var(--ink) !important; }

  /* ---- what-we-built grid ---- */
  .cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 6px; }
  .cs-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 24px 20px;
    display: flex; flex-direction: column;
  }
  .cs-card h3 {
    font-family: 'DM Serif Display', serif; font-size: 20px;
    color: var(--navy); margin-bottom: 8px; letter-spacing: -0.01em;
  }
  /* No .cs-when / date line by design — case studies never carry built-or-verified dates
     (Gus, 2026-07-30). Dating the work advertises how recently 406 started. */
  .cs-card p { font-size: 15px; color: var(--ink-soft); flex: 1; margin-bottom: 0; }

  /* ---- numbered moments ---- */
  .cs-moment {
    display: grid; grid-template-columns: 56px 1fr; gap: 20px;
    padding: 26px 0; border-top: 1px solid var(--border);
  }
  .cs-moment:first-of-type { border-top: none; padding-top: 8px; }
  .cs-moment-mark {
    font-family: 'DM Serif Display', serif; font-size: 30px;
    color: var(--accent); line-height: 1;
  }
  .cs-moment h3 {
    font-family: 'DM Serif Display', serif; font-size: 21px;
    color: var(--navy); margin-bottom: 10px; letter-spacing: -0.01em; line-height: 1.3;
  }
  .cs-moment p { font-size: 16px; color: var(--ink-soft); margin-bottom: 10px; }
  .cs-moment p:last-child { margin-bottom: 0; }
  .cs-note {
    font-size: 15px !important; color: var(--ink) !important;
    border-left: 3px solid var(--accent); padding-left: 14px;
  }

  /* ---- the review ---- */
  .cs-quote-card {
    margin: 6px 0 0; padding: 32px 34px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .cs-quote-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
  .cs-stars { color: var(--accent); font-size: 17px; letter-spacing: 2px; }
  .cs-source {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-muted); background: var(--white);
    border: 1px solid var(--border); border-radius: 100px; padding: 4px 11px;
  }
  .cs-quote-card blockquote { margin: 0; }
  .cs-quote-card blockquote p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
  .cs-quote-card figcaption {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border);
  }
  .cs-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--accent-light); color: var(--accent-dark);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px; flex-shrink: 0;
  }
  .cs-quote-meta strong { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
  .cs-quote-meta span { font-size: 13px; color: var(--ink-muted); }
  .cs-verify {
    margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent-dark);
    text-decoration: none; white-space: nowrap;
  }
  .cs-verify:hover { text-decoration: underline; }
  .cs-quote-foot { font-size: 14px; color: var(--ink-muted); margin-top: 16px !important; }
  .cs-ellipsis { color: var(--accent-dark); font-weight: 600; }

  /* ---- outbound link to the client ---- */
  .cs-outlink {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 15px; font-weight: 600; color: var(--navy);
    background: var(--white); border: 1px solid var(--border);
    border-radius: 100px; padding: 11px 22px; text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease;
  }
  .cs-outlink:hover, .cs-outlink:focus-visible {
    border-color: var(--accent); transform: translateY(-2px);
  }
  .cs-outlink:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; }

  /* ---- closing CTA ---- */
  .cs-cta {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
    border-radius: var(--radius-lg);
    padding: 44px 42px; margin-bottom: 20px; text-align: center;
  }
  .cs-cta h2 {
    font-family: 'DM Serif Display', serif; font-size: clamp(24px, 3vw, 32px);
    color: #fff; margin-bottom: 12px; letter-spacing: -0.01em;
  }
  .cs-cta p { color: rgba(255,255,255,0.62); font-size: 16px; max-width: 560px; margin: 0 auto 26px; }
  .cs-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .cs-btn-primary, .cs-btn-ghost {
    display: inline-block; font-size: 15px; font-weight: 600;
    border-radius: 100px; padding: 13px 26px; text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease;
  }
  .cs-btn-primary { background: var(--accent); color: var(--navy); }
  .cs-btn-ghost { border: 1px solid rgba(255,255,255,0.3); color: #fff; }
  .cs-btn-primary:hover, .cs-btn-ghost:hover { transform: translateY(-2px); }
  .cs-btn-ghost:hover { border-color: var(--accent); }
  .cs-btn-primary:focus-visible, .cs-btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    .cs-outlink, .cs-btn-primary, .cs-btn-ghost { transition: none; }
    .cs-outlink:hover, .cs-outlink:focus-visible,
    .cs-btn-primary:hover, .cs-btn-ghost:hover { transform: none; }
  }

  @media (max-width: 820px) {
    .header-band { padding: 110px 20px 90px; }
    .cs-section { padding: 30px 24px; }
    .cs-grid { grid-template-columns: 1fr; }
    .cs-quote-card { padding: 26px 22px; }
    .cs-quote-card blockquote p { font-size: 16px; }
    .cs-verify { margin-left: 0; width: 100%; margin-top: 12px; }
    .cs-moment { grid-template-columns: 40px 1fr; gap: 14px; }
    .cs-moment-mark { font-size: 24px; }
    .cs-cta { padding: 34px 24px; }
  }