/* case-studies-page.css — Phase 4 extraction 2026-04-17. */
/* Photo-hero (.sh-hero--photo) reconciliation 2026-06-03 — the page's legacy
   .sh-hero h1 rule forces a dark headline; on the navy photo hero it must be
   white. Extra .sh-hero.sh-hero--photo qualifier wins regardless of order. */
body.case-studies #main-content .sh-hero.sh-hero--photo h1{color:#fff!important;}

/* §1 */
:root{--blue:#1479A3;--blue-dark:#1366A0;--navy:#07192E;--navy-2:#0D2B45;--white:#fff;--off:#F4F8FC;--border:#DCE8F1;--text:#0D1829;--muted:#3D5266;--orange:#F97316;--shadow:0 20px 60px rgba(7,25,46,.12);--shadow-sm:0 10px 28px rgba(7,25,46,.08);--grad-hero:radial-gradient(circle at top left,rgba(41,171,226,.24),transparent 36%),radial-gradient(circle at top right,rgba(249,115,22,.18),transparent 30%),linear-gradient(135deg,#07192E 0%,#0D2B45 100%);--grad:linear-gradient(135deg,#F7D44C 0%,#F07128 28%,#E8125C 62%,#7B21A2 100%);--font-h:'Poppins',system-ui,sans-serif;--font-b:'Inter',system-ui,sans-serif}

    /* Brand gradient accent — canonical 5-stop, applied via .grad-word in hero H1s */
    .grad-word {
      background: linear-gradient(135deg, #F7D44C 0%, #F07128 22%, #E8125C 50%, #7B21A2 78%, #1779B8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }

    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-b);color:var(--text);background:var(--off);line-height:1.6}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
    .skip{position:absolute;left:16px;top:-120%;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 10px 10px;z-index:999}.skip:focus{top:0}
    .shell{max-width:1180px;margin:0 auto;padding:0 24px}
    /* Legacy header/nav overrides DELETED 2026-04-09 — they conflicted
       with the canonical mega-nav styles in assets/site.css and broke
       the dropdown flex layout on this page. Modern nav rendering is
       now inherited from assets/site.css. */
    .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:14px;font-weight:800;font-size:14px;transition:all .18s;white-space:nowrap}
    .cta.primary{background:var(--orange);color:#fff;box-shadow:0 12px 26px rgba(249,115,22,.28)}
    .cta.primary:hover{background:#ea6c0a;box-shadow:0 16px 32px rgba(249,115,22,.36)}
    .cta.ghost{background:#fff;border:1.5px solid var(--border);color:var(--navy)}
    .cta.ghost:hover{border-color:var(--blue);color:var(--blue-dark)}

    /* Hero */
    /* ─── .hero — light canonical (Phase 3 swap 2026-04-09) ───
       Was: dark --grad-hero with white text + frosted stats panel.
       Now: light gradient backdrop matching services-hub .sh-hero,
       with radial glow mesh, dot-grid overlay, and a solid white
       stats card with golden-card chrome. */
    .hero{
      position:relative;
      overflow:hidden;
      padding:88px 0 96px;
      background:linear-gradient(180deg,
        rgba(234,243,252,.94) 0%,
        rgba(220,234,249,.90) 55%,
        rgba(210,226,244,.86) 100%);
      border-bottom:2px solid rgba(41,171,226,.28);
      box-shadow:inset 0 24px 48px rgba(7,25,46,.04), 0 2px 0 rgba(255,255,255,.7);
      color:var(--navy);
    }
    .hero::before{
      content:'';
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse 60% 70% at 15% 10%, rgba(41,171,226,.22) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 85% 30%, rgba(249,115,22,.12) 0%, transparent 55%),
        radial-gradient(rgba(7,25,46,.05) 1px, transparent 1px);
      background-size:100% 100%, 100% 100%, 26px 26px;
      pointer-events:none;
      z-index:0;
    }
    .hero::after{
      content:'';
      position:absolute;
      left:0; right:0; bottom:0;
      height:120px;
      background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.5) 60%, rgba(255,255,255,.85) 100%);
      pointer-events:none;
      z-index:0;
    }
    .hero > *{position:relative; z-index:1}
    .hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(41,171,226,.08);border:1px solid rgba(41,171,226,.22);color:var(--blue-dark);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
    h1,h2,h3,h4{font-family:var(--font-h);line-height:1.1;margin:0}
    h1{font-size:2.4rem;font-size:clamp(2.4rem,5vw,4rem);font-weight:900;color:var(--navy);letter-spacing:-0.02em}
    .lede{font-size:1.08rem;color:var(--muted);max-width:56ch;margin:16px 0 0;line-height:1.7}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
    .hero-stats{padding:28px;border-radius:10px;background:#fff;border:1px solid rgba(13,24,41,.09);box-shadow:0 1px 2px rgba(13,24,41,.04),0 8px 24px -12px rgba(13,24,41,.18),0 16px 40px -20px rgba(13,24,41,.12)}
    .hero-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .hero-stat{text-align:center;padding:14px 10px;border-radius:8px;background:rgba(41,171,226,.04);border:1px solid rgba(13,24,41,.06)}
    .hero-stat-num{font-family:var(--font-h);font-size:1.8rem;font-weight:900;color:var(--navy);display:block;line-height:1}
    .hero-stat-label{font-size:.8rem;color:var(--muted);margin-top:5px;font-weight:600;line-height:1.3;display:block}

    /* Main */
    main{padding:40px 0 80px}
    /* Width control for legacy full-bleed sections (the #cs-hub and #cs-*
       long-form sections). Phase 3b sections (.cases-sec, #role-routing)
       have their own internal max-width, so this targets the .section class
       specifically without affecting them. */
    .section{
      margin-top:28px;
      max-width:1180px;
      margin-left:auto;
      margin-right:auto;
      padding-left:24px;
      padding-right:24px;
    }
    @media (max-width:640px){
      .section{padding-left:18px;padding-right:18px}
    }

    /* Case study card */
    /* ─── .cs-card — golden shell (Phase 4 rebuild 2026-04-09) ───
       Was: 32px radius + flat shadow. Now: 10px hairline shell with
       left-edge accent rule + ghost glow, keyed per industry via
       section id. Preserves .cs-body 2-col content+sidebar grid. */
    .cs-card{
      position:relative;
      background:#fff;
      border:1px solid rgba(13,24,41,.09);
      border-radius:10px;
      overflow:hidden;
      isolation:isolate;
      box-shadow:
        0 1px 2px rgba(13,24,41,.04),
        0 8px 24px -12px rgba(13,24,41,.18),
        0 16px 40px -20px rgba(13,24,41,.12);
      transition:
        border-color 200ms ease-out,
        box-shadow 200ms ease-out,
        transform 200ms ease-out;
      --card-color:#1366A0;
      --card-rgb:23,121,184;
    }
    /* Per-industry accent cycle keyed to section id */
    #cs-construction .cs-card,
    #cs-contractor-78 .cs-card{--card-color:#F97316;--card-rgb:249,115,22}
    #cs-dental-3loc .cs-card{--card-color:#7B21A2;--card-rgb:123,33,162}
    #cs-nonprofit-120 .cs-card{--card-color:#10B981;--card-rgb:16,185,129}
    #cs-ltc-8facility .cs-card{--card-color:#0EA5E9;--card-rgb:14,165,233}
    #cs-mfg-50 .cs-card{--card-color:#1366A0;--card-rgb:23,121,184}
    #cs-lawfirm-85 .cs-card{--card-color:#E8125C;--card-rgb:232,18,92}
    .cs-card::before{
      content:'';
      position:absolute;
      left:0; top:22px; bottom:22px;
      width:3px;
      background:linear-gradient(180deg,
        transparent 0%,
        var(--card-color) 15%,
        var(--card-color) 85%,
        transparent 100%);
      border-radius:0 3px 3px 0;
      transition:width 200ms ease-out, top 200ms ease-out, bottom 200ms ease-out;
      z-index:3;
      pointer-events:none;
    }
    .cs-card::after{
      content:'';
      position:absolute;
      top:-100px; left:-100px;
      width:320px; height:320px;
      background:radial-gradient(circle,
        rgba(var(--card-rgb),.10) 0%,
        transparent 65%);
      pointer-events:none;
      z-index:0;
      opacity:.5;
      transition:opacity 200ms ease-out;
    }
    .cs-card:hover{
      transform:translateY(-2px);
      border-color:rgba(var(--card-rgb),.38);
      box-shadow:
        0 1px 2px rgba(13,24,41,.05),
        0 14px 32px -14px rgba(var(--card-rgb),.22),
        0 18px 36px -18px rgba(13,24,41,.18);
    }
    .cs-card:hover::before{width:4px; top:14px; bottom:14px}
    .cs-card:hover::after{opacity:1}
    .cs-card > *{position:relative; z-index:1}
    @media (prefers-reduced-motion: reduce){
      .cs-card,.cs-card::before,.cs-card::after{
        transition:none !important;
        animation:none !important;
      }
    }
    .cs-card-head{padding:28px 32px 0}
    .cs-tag{display:inline-flex;padding:6px 14px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
    .cs-tag.construction{background:#FEF3C7;color:#92400E}
    .cs-tag.healthcare{background:#EDE9FE;color:#5B21B6}
    .cs-tag.nonprofit{background:#DCFCE7;color:#166534}
    .cs-company-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:4px}
    .cs-company{font-family:var(--font-h);font-size:1.6rem;font-weight:900;color:var(--navy);line-height:1.15}
    .cs-size{display:flex;align-items:center;gap:6px;font-size:.88rem;color:var(--muted);font-weight:600;margin-top:6px;flex-wrap:wrap}
    .cs-size-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0}
    .cs-body{display:grid;grid-template-columns:1fr 320px;align-items:stretch}
    .cs-content{padding:24px 32px 32px}
    .cs-sidebar{padding:24px 28px;background:var(--off);border-left:1px solid var(--border);display:flex;flex-direction:column;gap:18px}
    .cs-section-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:block}
    .cs-prose{font-size:.95rem;color:#2d4459;line-height:1.7;margin:0 0 16px}
    .cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
    .cs-box{padding:16px 18px;border-radius:18px;background:var(--off);border:1px solid var(--border)}
    .cs-box-title{font-family:var(--font-h);font-size:.95rem;color:var(--navy);margin-bottom:10px}
    .cs-list{margin:0;padding-left:18px;color:#2d4459;font-size:.93rem;line-height:1.75}
    .cs-list li{margin-bottom:2px}
    .results-grid{display:grid;gap:10px}
    .result-item{padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--border);display:flex;align-items:flex-start;gap:10px}
    .result-num{font-family:var(--font-h);font-size:1.2rem;font-weight:900;color:var(--blue-dark);white-space:nowrap;line-height:1.1}
    .result-label{font-size:.82rem;color:#3d5466;line-height:1.4;font-weight:600;margin-top:2px}
    .cs-quote{margin-top:20px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,rgba(41,171,226,.06),rgba(7,25,46,.04));border:1px solid rgba(41,171,226,.18)}
    .cs-quote blockquote{margin:0;font-size:.95rem;color:var(--navy);font-style:italic;line-height:1.65}
    .cs-quote cite{display:block;margin-top:10px;font-size:.82rem;font-weight:700;color:var(--muted);font-style:normal}
    .cs-actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}

    /* Bottom CTA band */
    .cta-band{padding:44px 40px;border-radius:32px;background:var(--grad-hero);color:#fff;text-align:center}
    .cta-band h2{font-size:1.6rem;font-size:clamp(1.6rem,3vw,2.4rem);color:#fff;margin-bottom:12px}
    .cta-band p{color:rgba(255,255,255,.78);font-size:1rem;max-width:52ch;margin:0 auto 28px;line-height:1.7}
    .cta-band-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}

    /* Footer */
    footer{padding:30px 0 44px;color:var(--muted)}
    .foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:22px}
    .foot-copy{font-size:.9rem}
    .foot-links{display:flex;gap:16px;flex-wrap:wrap}
    .foot-links a{font-weight:700;font-size:.9rem}
    .foot-links a:hover{color:var(--navy)}

    @media(max-width:960px){
      .hero-inner{grid-template-columns:1fr}
      .cs-body{grid-template-columns:1fr}
      .cs-sidebar{border-left:none;border-top:1px solid var(--border)}
      .cs-cols{grid-template-columns:1fr}
      .shell{padding:0 18px}
      .cta-band{padding:28px 20px}
    }
    @media(max-width:640px){
      .hero-stats-grid{grid-template-columns:1fr 1fr}
      .cs-card-head,.cs-content,.cs-sidebar{padding:20px}
    }
  
    /* ── HEADER ─────────────────────────────────────────── */
    header {
      position: sticky; top: 0; z-index: 300;
      background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 100%);
      backdrop-filter: blur(28px) saturate(1.8) brightness(1.02);
      -webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(1.02);
      border-bottom: 1px solid rgba(226,236,244,.5);
      box-shadow: 0 1px 0 rgba(226,236,244,.5), 0 0 0 0.5px rgba(255,255,255,.8), 0 2px 12px rgba(7,25,46,.04), 0 4px 24px rgba(7,25,46,.03), 0 8px 32px rgba(7,25,46,.04);
      overflow: visible;
    }
    header::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: rgba(255,255,255,.95);
      pointer-events: none;
      z-index: 1;
    }
    header::after {
      content: '';
      position: absolute;
      bottom: -8px; left: 0; right: 0;
      height: 8px;
      background: linear-gradient(180deg, rgba(7,25,46,.04) 0%, transparent 100%);
      pointer-events: none;
      z-index: -1;
    }
/* NAV CSS extracted to assets/site.css — see _scripts/extract_nav_css.py */

    /* ── FOOTER ─────────────────────────────────────────── */
    footer { background: #040E1A; padding: 64px 32px 32px; color: rgba(255,255,255,.72); }
    .ft { max-width: 1200px; margin: 0 auto; }
    .ft-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
    .ft-logo img { height: 36px; width: auto; display: block; margin-bottom: 14px; }
    .ft-tagline { font-family: var(--font-b); font-size: 13.5px; color: rgba(255,255,255,.30); line-height: 1.65; margin-bottom: 20px; }
    .ft-phone {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-b); font-size: 14.5px; font-weight: 700;
      color: var(--blue); text-decoration: none; transition: color .15s;
    }
    .ft-phone:hover { color: #7DD4F5; }
    .ft-col h3 {
      font-family: var(--font-b); font-size: 11px; font-weight: 700;
      letter-spacing: 1.4px; text-transform: uppercase;
      color: rgba(255,255,255,.70); margin-bottom: 16px;
    }
    .ft-col a {
      display: block; font-family: var(--font-b); font-size: 14px;
      color: rgba(255,255,255,.88); text-decoration: none;
      margin-bottom: 10px; transition: color .15s;
    }
    .ft-col a:hover { color: #fff; }
    .ft-bottom {
      border-top: 1px solid rgba(255,255,255,.06);
      padding-top: 28px; display: flex;
      justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px;
      font-family: var(--font-b); font-size: 12.5px;
    }
    .ft-legal { display: flex; gap: 20px; }
    .ft-legal a { color: rgba(255,255,255,.26); text-decoration: none; transition: color .15s; }
    .ft-legal a:hover { color: #fff; }
    @media (max-width: 1024px) {
      footer { padding: 48px 20px 24px; }
      .ft-top { grid-template-columns: 1fr; gap: 32px; }
    }

    /* ── MOBILE STICKY CTA BAR ─────────────────────────── */
    .mob-sticky-cta {
      display: none;
      position: fixed; bottom: 0; left: 0; right: 0;
      z-index: 400;
      background: rgba(255,255,255,.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid var(--border);
      padding: 12px 16px;
      box-shadow: 0 -4px 20px rgba(7,25,46,.08);
    }
    @media (max-width: 1024px) {
      .mob-sticky-cta { display: flex; gap: 10px; align-items: center; }
      body { padding-bottom: 72px; }
    }
    .mob-sticky-cta .mob-cta-btn {
      flex: 1; padding: 14px 20px; border-radius: 12px;
      font-family: var(--font-h); font-size: 15px; font-weight: 700;
      text-align: center; text-decoration: none;
      transition: transform 0.15s ease;
    }
    .mob-sticky-cta .mob-cta-btn:active { transform: scale(0.97); }
    .mob-sticky-cta .mob-cta-primary {
      background: var(--orange); color: #fff;
      box-shadow: 0 4px 14px rgba(249,115,22,.18);
    }
    .mob-sticky-cta .mob-cta-secondary {
      background: transparent; color: var(--navy);
      border: 1.5px solid var(--border);
    }

  /* reduced-motion-v1 */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}
/* mobile-qa-v1 */
@media (max-width: 767px) {
  .btn, button, .btn-primary, .btn-secondary, .btn-outline, .cta, [class*="btn-"], a.button, input[type="submit"], input[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 18px !important;
  }
  p, li, span, a, td, th, label, input, select, textarea, button, .small, .tag, .badge, .meta, .label, .desc, [class*="-desc"], [class*="-meta"], [class*="-label"], [class*="-tag"], [class*="-badge"], [class*="-time"], [class*="-name"], [class*="-val"], [class*="-num"], [class*="-txt"], [class*="-trend"], [class*="-sub"], [class*="-item"], [class*="-sep"] {
    font-size: max(14px, 1em) !important;
  }
  body, main, section, div, table, .container, .wrap, [class*="-wrap"], [class*="-grid"] {
    max-width: 100% !important;
  }
  img, video, iframe, svg { max-width: 100% !important; height: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mob-drawer, [class*="drawer"], .nav-drawer { width: 88vw !important; max-width: 320px !important; }
  html { overflow-x: hidden !important; }
}
@media (max-width: 359px) {
  .mob-drawer, [class*="drawer"], .nav-drawer { width: 96vw !important; max-width: 100vw !important; }
}
/* scroll-margin-anchor-v2 */
[id], section[id], h1[id], h2[id], h3[id], h4[id] { scroll-margin-top: 130px; }

/* ─── PHASE 3b: CROSS-PAGE CONNECTIVITY (2026-04-09) ──────────
   Ports two components into case-studies so it speaks the same
   visual vocabulary as home (Real outcomes) and services-hub
   (Pick Your Path):
     1. .cases-sec / .cases-grid / .case-card  (at-a-glance index)
     2. .shr-role-grid / .shr-role-card         (persona router)
   Both render below the light hero and above the #cs-hub browse
   table so visitors can either scan the 3 hero stories or self-
   select by role before diving into long-form cases.           */

/* 1. AT-A-GLANCE (mirrors index.html:1262-1359) */
.cases-sec { background: var(--off); padding: 64px 24px 48px; }
.cases-sec .sec-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.cases-sec .sec-label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-dark); margin-bottom: 8px; }
.cases-sec .sec-h2 { font-family: var(--font-h); font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 900; color: var(--navy); margin: 0 0 12px; letter-spacing: -.02em; }
.cases-sec .sec-p { font-family: var(--font-b); font-size: 1rem; color: var(--muted); line-height: 1.65; max-width: 60ch; margin: 0 auto; }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; }
.cases-grid .case-card {
  position: relative; isolation: isolate; overflow: hidden;
  background: #fff;
  border: 1px solid rgba(13,24,41,.09);
  border-radius: 10px;
  padding: 34px 30px 28px 38px;
  box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 8px 24px -12px rgba(13,24,41,.18), 0 16px 40px -20px rgba(13,24,41,.12);
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
  display: flex; flex-direction: column;
  --card-color:#1366A0; --card-rgb: 23,121,184;
}
.cases-grid .case-card:nth-child(3n+1) { --card-color: #0EA5E9; --card-rgb: 14,165,233; }  /* healthcare */
.cases-grid .case-card:nth-child(3n+2) { --card-color:#1366A0; --card-rgb: 23,121,184; }  /* manufacturing */
.cases-grid .case-card:nth-child(3n+3) { --card-color: #E8125C; --card-rgb: 232,18,92; }   /* professional services */
.cases-grid .case-card::before {
  content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px;
  background: linear-gradient(180deg, transparent 0%, var(--card-color) 15%, var(--card-color) 85%, transparent 100%);
  border-radius: 0 3px 3px 0;
  transition: width 180ms ease-out, top 180ms ease-out, bottom 180ms ease-out;
  z-index: 2; pointer-events: none;
}
.cases-grid .case-card::after {
  content: ''; position: absolute; top: -80px; left: -80px; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(var(--card-rgb),.12) 0%, transparent 65%);
  pointer-events: none; z-index: 0; opacity: .55;
  transition: opacity 180ms ease-out;
}
.cases-grid .case-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--card-rgb), .42);
  box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 14px 32px -14px rgba(var(--card-rgb), .22), 0 18px 36px -18px rgba(13,24,41,.18);
}
.cases-grid .case-card:hover::before { width: 4px; top: 12px; bottom: 12px; }
.cases-grid .case-card:hover::after { opacity: 1; }
.cases-grid .case-card > * { position: relative; z-index: 1; }
.case-industry { display: flex; align-items: center; gap: 8px; font-family: var(--font-h); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--card-color); margin-bottom: 18px; }
.case-industry svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.cases-grid .case-card h3 { font-family: var(--font-h); font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 12px; line-height: 1.3; }
.case-challenge { font-family: var(--font-b); font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0 0 22px; }
.case-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 18px; border-top: 1px solid rgba(13,24,41,.08); margin-bottom: 20px; }
.case-metric { display: flex; flex-direction: column; }
.cm-val { font-family: var(--font-h); font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1; }
.cm-label { font-family: var(--font-b); font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.3; }
.case-link { font-family: var(--font-b); font-size: 13.5px; font-weight: 700; color: var(--card-color); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; transition: gap .2s ease-out; }
.case-link .arr { transition: transform .2s ease-out; }
.case-link:hover .arr { transform: translateX(4px); }
@media (max-width: 960px) { .cases-grid { grid-template-columns: 1fr; gap: 18px; } }

/* 2. PERSONA ROUTER (mirrors page-services-hub.html:3262-3334) */
#role-routing { background: var(--off); padding: 0 24px 56px; }
#role-routing .rr-inner { max-width: 1200px; margin: 0 auto; }
#role-routing .rr-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
#role-routing .rr-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-dark); margin-bottom: 8px; }
#role-routing .rr-h2 { font-family: var(--font-h); font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 900; color: var(--navy); margin: 0 0 10px; letter-spacing: -.02em; }
#role-routing .rr-sub { font-family: var(--font-b); font-size: .98rem; color: var(--muted); line-height: 1.6; margin: 0; }
.shr-role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.shr-role-card {
  position: relative; padding: 28px 28px 24px 32px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  backdrop-filter: blur(20px) saturate(1.05);
  border: 1px solid rgba(13,24,41,.10);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms ease-out;
  box-shadow: 0 1px 2px rgba(13,24,41,.04), 0 6px 18px -10px rgba(13,24,41,.14);
  display: flex; flex-direction: column;
}
.shr-role-card::before {
  content: ''; position: absolute; left: 0; top: 20px; bottom: 20px;
  width: 2px; border-radius: 0 2px 2px 0;
  transition: width 140ms ease-out, top 140ms ease-out, bottom 140ms ease-out;
}
.shr-role-card.role--ceo::before    { background: #EA580C; }
.shr-role-card.role--hr::before     { background: #1779B8; }
.shr-role-card.role--office::before { background: #0D2B45; }
.shr-role-card.role--cfo::before    { background: #16A34A; }
.shr-role-card:hover {
  transform: translateY(-1px);
  border-color: rgba(13,24,41,.22);
  box-shadow: 0 1px 2px rgba(13,24,41,.05), 0 12px 28px -14px rgba(13,24,41,.22);
}
.shr-role-card:hover::before { width: 3px; top: 14px; bottom: 14px; }
.shr-role-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.shr-role-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: #5B6B7E; transition: color 140ms ease-out; }
.shr-role-card.role--ceo:hover    .shr-role-icon svg { color: #EA580C; }
.shr-role-card.role--hr:hover     .shr-role-icon svg { color:#1366A0; }
.shr-role-card.role--office:hover .shr-role-icon svg { color: #0D2B45; }
.shr-role-card.role--cfo:hover    .shr-role-icon svg { color: #16A34A; }
.shr-role-card h3 { font-family: var(--font-h); font-size: 17px; font-weight: 800; color: var(--navy); margin: 0 0 6px; letter-spacing: -.2px; }
.shr-role-card .role-pain { font-family: var(--font-b); font-size: 13px; color: var(--muted); font-style: italic; margin: 0 0 14px; }
.shr-role-card ul { list-style: none; padding: 0; margin: 0 0 16px; font-family: var(--font-b); font-size: 13px; color: var(--text, #0D1829); }
.shr-role-card ul li { padding-left: 18px; position: relative; line-height: 1.5; margin-bottom: 5px; }
.shr-role-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--orange, #F97316); font-weight: 800; }
.shr-role-card .role-link { margin-top: auto; font-family: var(--font-b); font-size: 13px; font-weight: 700; color: var(--blue-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.shr-role-card .role-link::after { content: '→'; transition: transform .2s; }
.shr-role-card:hover .role-link::after { transform: translateX(3px); }
@media (max-width: 960px) { .shr-role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .shr-role-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .cases-grid .case-card, .cases-grid .case-card::before, .cases-grid .case-card::after,
  .shr-role-card, .shr-role-card::before, .case-link .arr {
    transition: none !important;
  }
}
/* ─── END PHASE 3b CROSS-PAGE CONNECTIVITY ─────────────────── */

/* ─── POLISH 2026-04-09: #cs-hub browse table cleanup ─────────
   Extracts 22 inline-style attributes from the browse table into
   proper classes. Applies a golden-shell aesthetic consistent
   with the rest of the page, and color-matches each hub link to
   the per-industry accent color used on the long-form .cs-card
   (Phase 4) so hover + scroll creates visual continuity. */
.cs-hub-card {
  background: #fff;
  border: 1px solid rgba(13,24,41,.09);
  border-radius: 10px;
  padding: 40px 36px 36px;
  box-shadow:
    0 1px 2px rgba(13,24,41,.04),
    0 8px 24px -12px rgba(13,24,41,.18),
    0 16px 40px -20px rgba(13,24,41,.12);
}
.cs-hub-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
}
.cs-hub-eyebrow {
  display: inline-block;
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 10px;
}
.cs-hub-head h2 {
  font-family: var(--font-h);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px;
  letter-spacing: -.015em;
}
.cs-hub-head p {
  color: var(--muted);
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
}
.cs-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.cs-hub-link {
  position: relative;
  isolation: isolate;
  display: block;
  padding: 20px 22px 20px 28px;
  background: #fff;
  border: 1px solid rgba(13,24,41,.09);
  border-radius: 10px;
  text-decoration: none;
  color: var(--navy);
  transition:
    border-color 180ms ease-out,
    box-shadow 180ms ease-out,
    transform 180ms ease-out;
  --card-color:#1366A0;
  --card-rgb: 23,121,184;
}
.cs-hub-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--card-color) 15%,
    var(--card-color) 85%,
    transparent 100%);
  border-radius: 0 2px 2px 0;
  transition: width 180ms ease-out, top 180ms ease-out, bottom 180ms ease-out;
}
.cs-hub-link:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--card-rgb), .32);
  box-shadow:
    0 1px 2px rgba(13,24,41,.05),
    0 10px 24px -12px rgba(var(--card-rgb), .22),
    0 14px 32px -16px rgba(13,24,41,.14);
}
.cs-hub-link:hover::before {
  width: 3px;
  top: 10px;
  bottom: 10px;
}
/* Per-industry color cycle — matches Phase 4 .cs-card accents */
.cs-hub-link[href="#cs-construction"],
.cs-hub-link[href="#cs-contractor-78"] { --card-color: #F97316; --card-rgb: 249,115,22; }
.cs-hub-link[href="#cs-dental-3loc"]   { --card-color: #7B21A2; --card-rgb: 123,33,162; }
.cs-hub-link[href="#cs-nonprofit-120"] { --card-color: #10B981; --card-rgb: 16,185,129; }
.cs-hub-link[href="#cs-ltc-8facility"] { --card-color: #0EA5E9; --card-rgb: 14,165,233; }
.cs-hub-link[href="#cs-mfg-50"]        { --card-color:#1366A0; --card-rgb: 23,121,184; }
.cs-hub-link[href="#cs-lawfirm-85"]    { --card-color: #E8125C; --card-rgb: 232,18,92; }
.cs-hub-link-industry {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--card-color);
  margin-bottom: 6px;
}
.cs-hub-link-title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 6px;
}
.cs-hub-link-meta {
  font-family: var(--font-b);
  font-size: 13px;
  color: var(--muted);
}
.cs-hub-foot {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: 28px 0 0;
  font-style: italic;
}
.cs-hub-foot a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cs-hub-link,
  .cs-hub-link::before {
    transition: none !important;
  }
}
/* ─── END POLISH 2026-04-09 ────────────────────────────────── */

/* §2 */
@media (max-width: 1024px) {
  .cb-fab, .callback-trigger { bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }
  .cb-panel, .callback-panel { bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important; width: min(320px, 90vw) !important; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .mob-sticky-cta { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ─── POLISH 2026-05-24: page-scoped token fix + hero rescue ──
   Root cause: the <x-sh-hero> + <x-content-split> components
   reference --ts-hero, --ts-h1, --ts-h2, --mute, --line, --spacing-*
   tokens that are scoped under `body.premium` in premium.css.
   The case-studies page is NOT in the premium slug list, so the
   hero H1 collapsed to a default 18px / 600 and section paddings
   evaporated. Re-declare the tokens scoped to body.case-studies so
   the components render with the intended scale.                 */
body.case-studies {
  --ts-hero:    clamp(36px, 3.2vw + 1rem, 56px);
  --ts-h1:      clamp(30px, 2.4vw + 1rem, 44px);
  --ts-h2:      clamp(24px, 1.8vw + 1rem, 36px);
  --ts-h3:      clamp(20px, 1.2vw + 1rem, 26px);
  --ts-lead:    clamp(17px, 0.4vw + 1rem, 20px);
  --ts-body:    16px;
  --tr-hero:    -0.028em;
  --tr-h1:      -0.024em;
  --tr-h2:      -0.02em;
  --lh-tight:   1.08;
  --lh-heading: 1.15;
  --lh-body:    1.65;
  --mute:       #3D5266;
  --line:       #DCE8F1;
  --spacing-7:  48px;
  --spacing-8:  64px;
}

/* Hero — restore tracking and line-height so the headline reads
   like a hero, not a sub-section label. The sh-hero component
   only sets font-size via --ts-hero; tracking and line-height
   depend on these explicit overrides. Specificity is bumped via
   `#main-content` to beat a sitewide `[class*="hero"]:not(...)`
   reset in site.css that uses ~12 :not() qualifiers + !important. */
body.case-studies #main-content .sh-hero {
  padding: 88px 0 72px !important;
}
body.case-studies #main-content .sh-hero h1 {
  font-size: var(--ts-hero) !important;
  font-weight: 800 !important;
  letter-spacing: var(--tr-hero) !important;
  line-height: var(--lh-tight) !important;
  color: var(--navy) !important;
  max-width: 22ch;
  margin: 0 0 18px !important;
}
body.case-studies #main-content .sh-hero .sec-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
  padding: 6px 14px;
  background: rgba(20,121,163,.08);
  border: 1px solid rgba(20,121,163,.18);
  border-radius: 999px;
}
body.case-studies #main-content .sh-hero .sec-p {
  font-size: var(--ts-lead);
  line-height: 1.55;
  color: #2D4459;
  max-width: 58ch;
  margin: 0 0 12px;
}

/* Hero CTA pair — replace inline style hard-codes with proper
   button anatomy. The template still passes inline style but our
   overrides win the cascade with specificity + !important. */
body.case-studies #main-content .sh-hero .btn-primary,
body.case-studies #main-content .sh-hero .btn-ghost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  min-height: 48px !important;
  padding: 0 22px !important;
  border-radius: 12px;
  font-family: var(--font-b);
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: transform 180ms cubic-bezier(.4,0,.2,1), box-shadow 180ms cubic-bezier(.4,0,.2,1);
}
/* Case-studies hero .btn-primary now uses canonical buttons-v2.css
   (sitewide VSHR gradient reveal + shimmer sweep). Removed the
   page-scoped cs-shimmer override that was clobbering the canonical
   ::after gradient reveal. */
body.case-studies #main-content .sh-hero .btn-ghost {
  color: var(--navy) !important;
  background: #fff !important;
  border: 1.5px solid rgba(13,24,41,.12);
  box-shadow: 0 1px 2px rgba(13,24,41,.04);
}
body.case-studies #main-content .sh-hero .btn-ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(20,121,163,.45);
  color: var(--blue) !important;
  box-shadow: 0 6px 16px -8px rgba(13,24,41,.18);
}
@media (prefers-reduced-motion: reduce) {
  body.case-studies #main-content .sh-hero .btn-ghost {
    transition: none !important;
    animation: none !important;
  }
}

/* Filter chips — premium hover (subtle lift + accent border). */
body.case-studies .case-filter-chips a {
  transition: transform 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, box-shadow 160ms ease-out;
}
body.case-studies .case-filter-chips a:hover,
body.case-studies .case-filter-chips a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(20,121,163,.45) !important;
  color: var(--blue) !important;
  box-shadow: 0 6px 14px -8px rgba(20,121,163,.32);
  background: #fff !important;
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  body.case-studies .case-filter-chips a { transition: none !important; }
}

/* Content-split body prose — give Challenge/What we did/Outcome
   labels a chip treatment so each case scans cleanly. */
body.case-studies .content-split__prose p strong:first-child {
  display: inline-block;
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(20,121,163,.08);
  padding: 3px 10px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: 2px;
}

/* Mobile: ensure hero buttons stack cleanly and headline doesn't
   feel cramped against the sub. */
@media (max-width: 640px) {
  body.case-studies #main-content .sh-hero { padding: 56px 0 44px !important; }
  body.case-studies #main-content .sh-hero h1 { max-width: none; }
  body.case-studies #main-content .sh-hero .btn-primary,
  body.case-studies #main-content .sh-hero .btn-ghost {
    width: 100%;
    justify-content: center;
  }
  body.case-studies .content-split__prose p strong:first-child {
    margin-bottom: 4px;
    vertical-align: 0;
  }
}
/* ─── END POLISH 2026-05-24 ──────────────────────────────────── */

/* ─── MOBILE OPTIMISE 2026-06-01 (390px pass) ──────────────────
   Page-local fixes identified by the mobile audit brief.
   All rules are scoped to max-width:767.98px so desktop is
   untouched. Shared files (site.css, svc-components.css, etc.)
   are NOT modified here — systemic issues logged separately.   */
@media (max-width: 767.98px) {

  /* 1. Hero CTA buttons — bump 15px → 16px on mobile.
        The desktop rule locks these at 15px !important;
        this overrides that within the mobile breakpoint. */
  body.case-studies #main-content .sh-hero .btn-primary,
  body.case-studies #main-content .sh-hero .btn-ghost {
    font-size: 16px !important;
  }

  /* 2. Content-split CTA link (btn-orange-solid) — 14.5px → 16px.
        Targets the "Read the full engagement detail →" link
        rendered by the content-split component. */
  body.case-studies .content-split__cta.btn-orange-solid {
    font-size: 16px !important;
  }

  /* 3. Long-form <details> prose — 15px divs/paragraphs/blockquotes → 16px.
        The detail body div is set to font-size:15px inline. */
  body.case-studies details > div {
    font-size: 16px !important;
  }
  body.case-studies details > div p,
  body.case-studies details > div blockquote {
    font-size: 16px !important;
  }
  /* Attribution spans inside blockquotes — 15px → 16px. */
  body.case-studies details > div blockquote span {
    font-size: 16px !important;
  }

  /* 4. Inline prose strong chip labels — floor raised to 12px.
        The .content-split__prose p strong:first-child pill is
        set to 11px which is below the 12px micro-label floor. */
  body.case-studies .content-split__prose p strong:first-child {
    font-size: 12px !important;
  }

  /* 5. Metric card sub-labels — 13px inline divs raised to 14px.
        These are the contextual labels under the big stat numbers
        in each case study's 2×2 metric grid (e.g. "WC spend reduction").
        Classified as data display labels → 14px floor. */
  body.case-studies .content-split__image > div > div > div:last-child {
    font-size: 14px !important;
  }

  /* 6. Metric 2×2 mini-grids — collapse to single column on mobile.
        Each case study's image slot contains a 2-column metric grid
        (`grid-template-columns:1fr 1fr`) which renders at ~149px per cell
        inside the content-split column. Collapse to 1-column so each
        metric card has full width and labels are comfortably readable. */
  body.case-studies .content-split__image > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

}
/* ─── END MOBILE OPTIMISE 2026-06-01 ────────────────────────── */