/* Case study pages. Loaded AFTER industries.css, which supplies .hero,
         .intro-section, .how-section, .timeline-h, and .final-cta unchanged —
         a case study is built from the industry-page kit so the two cannot
         drift apart. Nothing here declares a color or a font stack; the tokens
         in global.css are already in scope. */

      /* Hero image — industries.css binds these per body class, same pattern. */
      body.case-study-3pl-warehouse .hero {
        background-image: url('../../hero-warehouse-desktop.jpg');
        background-image: url('../../hero-warehouse-desktop.webp');
      }

      /* Borrowing the gas article's hero until a venue-specific image exists. */
      body.case-study-event-center .hero {
        background-image: url('../../blog-business-gas-rates-hero-desktop.webp');
      }

      .case-eyebrow {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-white);
        opacity: 0.85;
        margin-bottom: 1rem;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
      }

      /* Three published figures, not four. */
      .case-study-stats .stats-strip-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      /* Chapter nav. The hero is 100vh, so the navbar has always collapsed to
         its scrolled height by the time this can stick — one offset, no
         two-state bug. Sits under the navbar's z-index: 100. */
      .story-nav {
        position: sticky;
        top: 70px;
        z-index: 40;
        background: var(--color-white);
        border-bottom: 1px solid var(--color-light);
      }

      .story-nav-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      .story-nav a {
        padding: 1rem;
        text-align: center;
        text-decoration: none;
        color: var(--color-slate);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border-left: 1px solid var(--color-light);
        transition: color 0.3s ease;
      }

      .story-nav a:first-child {
        border-left: none;
      }

      .story-nav a:hover {
        color: var(--color-primary);
      }

      /* Anchor targets clear the fixed navbar AND the sticky chapter nav
         stacked beneath it, otherwise a jump hides the heading behind them. */
      #facility,
      #process,
      #result {
        scroll-margin-top: 130px;
      }

      /* Result panel */
      .result-section {
        padding: 6rem 4rem;
        background: #f8f9fb;
        position: relative;
        z-index: 1;
      }

      .result-container {
        max-width: 860px;
        margin: 0 auto;
      }

      .result-panel {
        background: var(--color-midnight);
        border-radius: 14px;
        padding: clamp(2rem, 5vw, 3.5rem);
        color: var(--color-white);
        text-align: center;
      }

      .result-figure {
        display: block;
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 700;
        line-height: 1;
        color: var(--color-accent);
        margin-bottom: 0.75rem;
      }

      .result-caption {
        font-size: 1.05rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.82);
        max-width: 620px;
        margin: 0 auto;
      }

      .result-note {
        margin-top: 2rem;
        color: var(--color-slate);
        font-size: 1.02rem;
        line-height: 1.75;
      }

      /* Methodology. Required on every case study — it is what keeps the
         savings total from reading as a rate we offer. See CONTEXT.md. */
      .disclosure-section {
        padding: 0 4rem 5rem;
        background: #f8f9fb;
      }

      .disclosure {
        max-width: 860px;
        margin: 0 auto;
        background: var(--color-white);
        border: 1px solid rgba(40, 120, 192, 0.14);
        border-left: 4px solid var(--color-primary);
        border-radius: 10px;
        padding: 1.75rem 2rem;
      }

      .disclosure h2 {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--color-midnight);
        margin-bottom: 0.85rem;
      }

      .disclosure ul {
        margin: 0;
        padding-left: 1.15rem;
      }

      .disclosure li {
        color: var(--color-slate);
        font-size: 0.94rem;
        line-height: 1.7;
      }

      .disclosure li + li {
        margin-top: 0.5rem;
      }

      /* Proof card — used on the warehouse industry page and in articles to
         link here. Lives in this file so every entry point stays in step. */
      .case-proof-link {
        display: block;
        max-width: 860px;
        margin: 0 auto;
        padding: 1.75rem 2rem;
        background: var(--color-white);
        border: 1px solid rgba(40, 120, 192, 0.14);
        border-left: 4px solid var(--color-accent);
        border-radius: 10px;
        text-decoration: none;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
      }

      .case-proof-link:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 26px rgba(13, 27, 42, 0.09);
      }

      .case-proof-label {
        display: block;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-accent);
        margin-bottom: 0.5rem;
      }

      .case-proof-title {
        display: block;
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--color-midnight);
        line-height: 1.35;
        margin-bottom: 0.4rem;
      }

      .case-proof-sub {
        display: block;
        color: var(--color-slate);
        font-size: 0.95rem;
        line-height: 1.6;
      }

      .case-proof-cta {
        display: inline-block;
        margin-top: 0.85rem;
        color: var(--color-primary);
        font-weight: 600;
        font-size: 0.95rem;
      }

      @media (max-width: 1024px) {
        .story-nav { top: 64px; }
        #facility, #process, #result { scroll-margin-top: 120px; }
        .result-section { padding: 4rem 2rem; }
        .disclosure-section { padding: 0 2rem 4rem; }
      }

      @media (max-width: 768px) {
        /* Three figures don't fit across a phone — the savings number clips.
           Stack them. Needs the same specificity as the 3-col rule above to
           win, since global.css's own mobile rule is a weaker selector. */
        .case-study-stats .stats-strip-grid {
          grid-template-columns: 1fr;
          gap: 0.5rem;
        }

        .story-nav a { font-size: 0.72rem; padding: 0.85rem 0.4rem; letter-spacing: 0.04em; }
        .result-section { padding: 3rem 1.5rem; }
        .disclosure-section { padding: 0 1.5rem 3rem; }
        .disclosure { padding: 1.5rem 1.35rem; }
        .case-proof-link { padding: 1.5rem 1.35rem; }
      }