/* v2 page styles — case-studies (from 22-July design bundle) */
a { color: var(--green); }
  a:hover { color: var(--green-deep); }
  .site-header__brand img { height: 28px; }

  /* ---------- Announce bar ---------- */
  .announce { background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: 0.04em; }
  .announce__inner { max-width: 1440px; margin: 0 auto; padding: 10px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .announce__left { display: flex; align-items: center; gap: 16px; }
  .announce .pill { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--leaf); padding: 3px 10px; border: 1px solid rgba(124,196,153,0.4); border-radius: 999px; }
  .announce a { color: var(--leaf); border-bottom: 1px solid rgba(124,196,153,0.35); padding-bottom: 1px; }
  .announce a:hover { color: var(--paper); border-bottom-color: var(--paper); }

  /* ---------- Crumbs ---------- */
  .crumbs { background: var(--paper); border-bottom: 1px solid var(--rule-on-paper-soft); }
  .crumbs__inner { max-width: 1440px; margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--fg-on-paper-soft); }
  .crumbs__inner a { color: var(--fg-on-paper-muted); }
  .crumbs__inner a:hover { color: var(--ink); }
  .crumbs__inner .sep { color: var(--paper-500); }
  .crumbs__inner .cur { color: var(--ink); font-weight: 700; }

  /* =========================================================
     HERO — full-bleed image, deck voice
     ========================================================= */
  .cshero { position: relative; overflow: hidden; background: var(--navy); color: var(--paper); min-height: 620px; display: flex; align-items: center; }
  .cshero__bg { position: absolute; inset: 0; background: url("/assets/5cbbf81c794615a3.jpg") center/cover no-repeat; z-index: 0; }
  .cshero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,24,46,0.82) 0%, rgba(6,24,46,0.62) 45%, rgba(6,24,46,0.35) 100%); }
  .cshero__inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 120px 40px; width: 100%; }
  .cshero__pills { display: flex; gap: 12px; margin-bottom: 40px; }
  .cshero__pill { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--leaf); background: rgba(124,196,153,0.14); border: 1px solid rgba(124,196,153,0.5); border-radius: 999px; padding: 8px 18px; }
  .cshero__eyb { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--leaf); margin-bottom: 24px; }
  .cshero__eyb .rule { width: 56px; height: 2px; background: var(--leaf); display: inline-block; }
  .cshero h1 { font-size: 116px; font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; color: var(--white); margin: 0 0 32px; text-wrap: balance; }
  .cshero h1 em { font-style: italic; font-family: var(--font-display); font-weight: 500; color: var(--leaf); letter-spacing: -0.01em; }
  .cshero__lede { font-size: 22px; line-height: 1.5; color: var(--fg-on-navy-muted); margin: 0; max-width: 60ch; font-weight: 300; }

  /* =========================================================
     SUCCESS STORIES GRID
     ========================================================= */
  .stories { background: var(--paper); padding: 140px 0 180px; }
  .stories__head { max-width: 1080px; margin: 0 auto 72px; padding: 0 40px; text-align: center; }
  .stories__eyb { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); margin-bottom: 24px; display: inline-flex; align-items: center; gap: 14px; }
  .stories__eyb .rule { width: 56px; height: 2px; background: var(--green); }
  .stories h2 { font-size: 76px; font-weight: 800; letter-spacing: -0.03em; line-height: 0.96; color: var(--ink); margin: 0; text-wrap: balance; }
  .stories h2 em { font-style: italic; font-family: var(--font-display); font-weight: 500; color: var(--green); }
  .stories__grid { max-width: 1440px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

  .scard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule-on-paper-soft); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 220ms var(--ease-standard), transform 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard); }
  .scard:hover { border-color: var(--rule-on-paper); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(6,24,46,0.10); }
  .scard__media { aspect-ratio: 16 / 10; background-size: cover; background-position: center; position: relative; }
  .scard__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,24,46,0.15) 0%, rgba(6,24,46,0) 40%); }
  .scard__tag { position: absolute; z-index: 1; top: 16px; left: 16px; background: rgba(246,243,236,0.96); color: var(--ink); padding: 6px 12px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 4px; }
  .scard__body { padding: 30px 30px 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
  .scard h3 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); margin: 0; }
  .scard p { font-size: 15px; line-height: 1.6; color: var(--fg-on-paper-muted); margin: 0; }
  .scard__cta { margin-top: auto; padding-top: 20px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 8px; }
  .scard__cta .arr { transition: transform 200ms var(--ease-standard); }
  .scard:hover .scard__cta .arr { transform: translateX(4px); }

  /* =========================================================
     CTA banner — navy
     ========================================================= */
  .csban { position: relative; overflow: hidden; background: var(--navy); color: var(--paper); padding: 130px 0; }
  .csban__bg { position: absolute; inset: 0; z-index: 0; background: url("/assets/ad0aa08f4935e88b.jpg") center/cover no-repeat; opacity: 0.18; }
  .csban::after { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 0%, rgba(124,196,153,0.10), transparent 60%); }
  .csban__inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 40px; text-align: center; }
  .csban__eyb { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(124,196,153,0.9); margin-bottom: 28px; display: inline-flex; align-items: center; gap: 14px; }
  .csban__eyb .rule { width: 56px; height: 2px; background: rgba(124,196,153,0.6); }
  .csban h2 { font-size: 84px; font-weight: 800; letter-spacing: -0.03em; line-height: 0.94; color: var(--white); margin: 0 0 32px; text-wrap: balance; }
  .csban h2 em { font-style: italic; font-family: var(--font-display); font-weight: 500; color: var(--leaf); }
  .csban p { font-size: 20px; color: var(--fg-on-navy-muted); line-height: 1.55; max-width: 56ch; margin: 0 auto 44px; font-weight: 300; }
  .csban__cta { display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; }
  .csban__cta .btn-solid { background: var(--paper); color: var(--green-deep); padding: 18px 32px; font-size: 15px; font-weight: 700; border-radius: 4px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: background 200ms var(--ease-standard); }
  .csban__cta .btn-solid:hover { background: var(--white); color: var(--green-deep); }
  .csban__cta .btn-ghost { background: transparent; color: var(--paper); padding: 18px 0; font-size: 15px; font-weight: 700; border-bottom: 1px solid rgba(246,243,236,0.6); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: color 200ms, border-color 200ms; }
  .csban__cta .btn-ghost:hover { color: var(--leaf); border-bottom-color: var(--leaf); }

  @media (max-width: 1080px) {
    .cshero h1 { font-size: 76px; }
    .stories h2 { font-size: 52px; }
    .csban h2 { font-size: 56px; }
    .stories__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    .cshero h1 { font-size: 52px; }
    .stories__grid { grid-template-columns: 1fr; }
    .cshero__inner { padding: 90px 24px; }
  }