/* ============================================================
   DIGITUM FINAL EXPERIENCE PASS
   Loaded last on every page.
   ============================================================ */

.article-body .btn-primary,
.blog-final-cta-box .btn-primary {
  color: #080a06 !important;
  text-decoration: none !important;
}
.blog-index-hero h1 {
  max-width: 1020px;
  font-size: clamp(2.8rem, 4.35vw, 4.2rem);
  line-height: 1.03;
  text-wrap: balance;
}

@media (max-width: 980px) {
  .container { width: min(var(--container), calc(100% - 40px)); }
  .section,
  .case-section { padding-top: 72px; padding-bottom: 72px; }
  .blog-index-hero { padding-top: 112px; padding-bottom: 54px; }
}

@media (max-width: 720px) {
  html, body { overflow-x: clip; }

  .container {
    width: min(var(--container), calc(100% - 36px)) !important;
  }

  .section,
  .section-sm,
  .section-tight,
  .case-section,
  .case-section.compact {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  .section-head {
    gap: 16px !important;
    margin-bottom: 30px !important;
  }

  .section-head h2,
  .editorial-intro h2,
  .results-head h2,
  .commercial-copy h2 {
    font-size: clamp(1.9rem, 9vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  .lede {
    font-size: .98rem !important;
    line-height: 1.7 !important;
  }

  .hero,
  .services-hero,
  .ads-hero,
  .seo-hero,
  .website-hero,
  .automation-hero,
  .about-hero,
  .contact-hero,
  .work-hero,
  .portfolio-hero,
  .library-hero,
  .automation-library-hero,
  .case-hero,
  .ads-case-hero,
  .automation-case-hero,
  .blog-hero,
  .blog-index-hero {
    min-height: 0 !important;
    padding-top: 104px !important;
    padding-bottom: 48px !important;
  }

  .hero-copy h1,
  .services-hero-copy h1,
  .ads-hero-copy h1,
  .seo-hero-copy h1,
  .website-hero-copy h1,
  .automation-hero-copy h1,
  .about-hero-copy h1,
  .contact-hero-copy h1,
  .work-hero-copy h1,
  .portfolio-hero-copy h1,
  .library-hero h1,
  .automation-library-hero h1,
  .case-hero-copy h1,
  .ads-case-copy h1,
  .automation-case-copy h1,
  .blog-hero-copy h1,
  .blog-index-hero h1 {
    max-width: none !important;
    font-size: clamp(2.25rem, 10.4vw, 2.95rem) !important;
    line-height: 1.055 !important;
    letter-spacing: -.043em !important;
    text-wrap: balance;
  }

  .hero-copy .lede,
  .services-hero-copy .lede,
  .ads-hero-copy .lede,
  .seo-hero-copy .lede,
  .website-hero-copy .lede,
  .automation-hero-copy .lede,
  .about-hero-copy .lede,
  .contact-hero-copy .lede,
  .blog-hero-copy .lede,
  .blog-index-hero .lede {
    margin-top: 18px !important;
  }

  .hero .btn-row,
  .services-hero .btn-row,
  .ads-hero .btn-row,
  .seo-hero .btn-row,
  .website-hero .btn-row,
  .automation-hero .btn-row,
  .contact-hero .btn-row,
  .case-cta-box .btn-row,
  .blog-final-cta-box .btn-row,
  .cta-box .btn-row,
  .final-cta-box .btn-row,
  .close-box .btn-row,
  .work-close-box .btn-row,
  .portfolio-close-box .btn-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    gap: 10px !important;
  }

  .hero .btn-row .btn,
  .services-hero .btn-row .btn,
  .ads-hero .btn-row .btn,
  .seo-hero .btn-row .btn,
  .website-hero .btn-row .btn,
  .automation-hero .btn-row .btn,
  .contact-hero .btn-row .btn,
  .case-cta-box .btn,
  .blog-final-cta-box .btn,
  .cta-box .btn,
  .final-cta-box .btn,
  .close-box .btn,
  .work-close-box .btn,
  .portfolio-close-box .btn {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding-inline: 19px !important;
    font-size: .82rem !important;
    white-space: nowrap;
  }

  /* Mobile gets its own hierarchy: complex desktop hero diagrams are removed. */
  .owner-pulse,
  .system-visual,
  .service-map,
  .account-visual,
  .search-visual,
  .browser-visual,
  .ops-visual,
  .identity-visual,
  .work-visual,
  .portfolio-stack,
  .hero-brief {
    display: none !important;
  }

  .hero-grid,
  .services-hero-grid,
  .ads-hero-grid,
  .seo-hero-grid,
  .website-hero-grid,
  .automation-hero-grid,
  .about-hero-grid,
  .blog-hero-grid {
    display: block !important;
  }

  .service-card,
  .audience-card,
  .working-card,
  .pain-card,
  .story-panel,
  .diagnostic-card,
  .strategy-card,
  .result-card,
  .rail-card,
  .blog-card,
  .commercial-copy,
  .commercial-note,
  .journey-panel {
    border-radius: 17px !important;
  }

  .home-page .proof-wrap {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .home-page .proof-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .home-page .proof-stat {
    min-height: 132px !important;
    padding: 20px 12px !important;
    border-radius: 16px !important;
  }
  .home-page .proof-stat strong {
    font-size: clamp(1.65rem, 9vw, 2.15rem) !important;
  }
      .home-page .proof-note {
    margin-top: 18px !important;
    text-align: left !important;
    font-size: .82rem !important;
    line-height: 1.6 !important;
  }

  .cta-box,
  .case-cta-box,
  .blog-final-cta-box,
  .final-cta-box,
  .close-box,
  .work-close-box,
  .portfolio-close-box {
    padding: 34px 22px !important;
    border-radius: 19px !important;
    text-align: left !important;
  }
  .cta-box::after,
  .case-cta-box::before,
  .blog-final-cta-box::before,
  .final-cta-box::after,
  .close-box::after,
  .work-close-box::after,
  .portfolio-close-box::after {
    display: none !important;
  }
  .case-cta-box h2,
  .blog-final-cta-box h2,
  .cta-box h2,
  .final-cta-box h2 {
    margin-inline: 0 !important;
    font-size: clamp(1.85rem, 8.5vw, 2.25rem) !important;
    line-height: 1.08 !important;
  }
  .case-cta-box p,
  .blog-final-cta-box p { margin-inline: 0 !important; }

  .case-hero-grid,
  .ads-case-hero-grid,
  .automation-case-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  .case-outcome,
  .ads-outcome,
  .automation-outcome {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    padding: 20px !important;
    border-radius: 18px !important;
  }
  .outcome-secondary,
  .result-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .result-card {
    min-height: 126px !important;
    padding: 15px !important;
  }
  .result-card strong {
    font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
  }
  .case-meta { gap: 7px !important; }
  .case-meta span {
    min-height: 31px !important;
    padding: 0 9px !important;
    font-size: .64rem !important;
  }
  .case-nav-wrap { top: 70px !important; }

  .blog-hero { padding-bottom: 40px !important; }
  .blog-breadcrumb {
    margin-bottom: 20px !important;
    font-size: .66rem !important;
  }
  .article-shell {
    padding-top: 18px !important;
    padding-bottom: 56px !important;
  }
  .article-layout { max-width: none !important; }
  .mobile-outline { margin-bottom: 24px !important; }
  .mobile-outline details { border-radius: 14px !important; }
  .article-body h2 {
    margin-top: 50px !important;
    font-size: clamp(1.75rem, 8vw, 2.05rem) !important;
    line-height: 1.11 !important;
  }
  .article-body h3 {
    margin-top: 30px !important;
    font-size: 1.27rem !important;
  }
  .article-body p,
  .article-body ul,
  .article-body ol {
    font-size: .96rem !important;
    line-height: 1.76 !important;
  }
  .article-insight {
    margin: 28px 0 !important;
    padding: 20px !important;
    border-radius: 15px !important;
  }
  .article-table-wrap {
    margin: 26px -2px !important;
    border-radius: 14px !important;
  }
  .article-table { min-width: 560px !important; }
  .blog-final-cta { padding-bottom: 58px !important; }

  .blog-index-hero { padding-bottom: 46px !important; }
  .blog-category-tabs {
    gap: 7px !important;
    margin-top: 22px !important;
  }
  .blog-category-tabs a {
    min-height: 33px !important;
    padding-inline: 10px !important;
    font-size: .68rem !important;
  }
  .blog-list-section { padding-bottom: 60px !important; }
  .blog-category-block + .blog-category-block { margin-top: 52px !important; }
  .blog-card {
    min-height: 0 !important;
    padding: 21px !important;
  }
  .blog-card .eyebrow { margin-bottom: 20px !important; }
  .blog-card h3 { font-size: 1.28rem !important; }

  .footer { padding-top: 30px !important; }
  .footer-surface {
    padding: 26px 20px !important;
    gap: 28px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 430px) {
  .container { width: min(var(--container), calc(100% - 30px)) !important; }

  .hero-copy h1,
  .services-hero-copy h1,
  .ads-hero-copy h1,
  .seo-hero-copy h1,
  .website-hero-copy h1,
  .automation-hero-copy h1,
  .about-hero-copy h1,
  .contact-hero-copy h1,
  .work-hero-copy h1,
  .portfolio-hero-copy h1,
  .library-hero h1,
  .automation-library-hero h1,
  .case-hero-copy h1,
  .ads-case-copy h1,
  .automation-case-copy h1,
  .blog-hero-copy h1,
  .blog-index-hero h1 {
    font-size: clamp(2.15rem, 10.6vw, 2.7rem) !important;
  }

  .home-page .proof-grid,
  .outcome-secondary,
  .result-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}