/* ─── Responsive System ───────────────────────────────────────────────────
   Desktop-first breakpoints (matching existing code direction):

   ≥ 1920px  Ultrawide guard
   ≤ 1280px  Standard laptop
   ≤ 1024px  Tablet landscape / small laptop  [nav collapses]
   ≤  768px  Tablet portrait
   ≤  640px  Large phone
   ≤  480px  Modern phone
   ≤  360px  Small phone
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Global overflow guard ──────────────────────────────────────────────── */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* ── Hamburger — hidden by default (desktop shows desktop nav) ────────── */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--t-ink);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0;
  flex-shrink: 0;
  transition: background var(--tr-fast);
}
.nav-hamburger:hover { background: var(--t-chip); }

/* ── Mobile nav drawer — hidden by default ──────────────────────────────── */
.nav-mobile {
  background: var(--t-bg);
  border-top: 1px solid var(--t-line);
  padding: 12px var(--sp-7) 20px;
  display: none;
}

.nav-mobile--open { display: block; }

.nav-mobile__menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-mobile__btn {
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--t-ink-dim);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  width: 100%;
  transition: color var(--tr-fast), background var(--tr-fast);
}
.nav-mobile__btn:hover { color: var(--t-ink); background: var(--t-chip); }

.nav-mobile__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--t-line);
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   ≥ 1920px — Ultrawide: containers already max-width capped, fine as-is
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  /* Slightly enlarge body text on very wide screens */
  .new-hero__sub,
  .hero-big-type__sub,
  .hero-spec__sub,
  .hero-matrix__sub,
  .section-head__sub,
  .wwdo-intro__sub,
  .solutions-sub,
  .case-sub,
  .about-sub { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ≤ 1280px — Standard laptop
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* Tighten hero two-col grid slightly */
  .new-hero__columns { grid-template-columns: 1fr 1.15fr; }

  /* Scale down glow to avoid clipping on smaller containers */
  .new-hero__glow { width: 900px; height: 580px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ≤ 1024px — Tablet landscape / small laptop
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Section padding ───────────────────────────────────────────────── */
  .section-pad       { padding: 64px var(--sp-6); }
  .section-pad--sm   { padding: 48px var(--sp-6); }
  .section-pad--lg   { padding: 80px var(--sp-6); }
  .section-pad--hero { padding: 80px var(--sp-6) 72px; }
  .section-pad--cta  { padding: 64px var(--sp-6); }

  /* ── Standard grids ────────────────────────────────────────────────── */
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }

  /* ── Mosaic grids ──────────────────────────────────────────────────── */
  .mosaic--3 { grid-template-columns: repeat(2, 1fr); }
  .mosaic--4 { grid-template-columns: repeat(2, 1fr); }
  .mosaic--6 { grid-template-columns: repeat(3, 1fr); }

  /* ── Navbar ────────────────────────────────────────────────────────── */
  .nav-menu { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile { padding: 12px var(--sp-6) 20px; }

  /* ── New hero: stack columns ───────────────────────────────────────── */
  .new-hero { padding: 72px var(--sp-6) 64px; }
  .new-hero__columns {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .new-hero__animation-surface {
    margin-right: 0;
    max-width: 600px;
    margin-inline: auto;
  }
  .new-hero__glow { width: 700px; height: 480px; top: -140px; }

  /* Hero metrics: 5→3 columns */
  .new-hero__metrics {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 48px;
  }
  /* Reset all right borders, re-apply for 3-col layout */
  .new-hero__metric { border-right: 1px solid var(--t-line); }
  .new-hero__metric:last-child { border-right: none; }
  .new-hero__metric:nth-child(3) { border-right: none; }
  .new-hero__metric:nth-child(4),
  .new-hero__metric:nth-child(5) {
    border-top: 1px solid var(--t-line);
  }

  /* ── Hero big type ─────────────────────────────────────────────────── */
  .hero-big-type { padding: 72px var(--sp-6) 56px; }
  .hero-big-type__body-grid { grid-template-columns: 1fr; gap: 32px; }
  .spec-strip { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }

  /* ── Hero spec / editorial ─────────────────────────────────────────── */
  .hero-spec { padding: 64px var(--sp-6) 48px; }
  .hero-spec__grid { grid-template-columns: 1fr; gap: 32px; }

  /* ── Hero matrix ───────────────────────────────────────────────────── */
  .hero-matrix { padding: 72px var(--sp-6) 56px; }

  /* ── Capabilities ──────────────────────────────────────────────────── */
  .capabilities-section { padding: 72px var(--sp-6); }
  .capabilities-grid { grid-template-columns: 1fr; gap: 40px; }
  .capability-row { grid-template-columns: 52px 1fr 1.5fr; gap: 16px; }

  /* ── Who We Are pillars: 3→2 columns ──────────────────────────────── */
  .who-pillars { grid-template-columns: repeat(2, 1fr); }

  /* ── WWDO grid: 3→2 columns ───────────────────────────────────────── */
  .wwdo-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Contact cards: 3→2 columns ───────────────────────────────────── */
  .contact-cards { grid-template-columns: repeat(2, 1fr); }

  /* ── WWDO / Who / Contact section padding ──────────────────────────── */
  .wwdo-section   { padding: 80px var(--sp-6); }
  .who-section    { padding: 80px var(--sp-6); }
  .contact-section { padding: 80px var(--sp-6); }

  /* ── Solutions ─────────────────────────────────────────────────────── */
  .solutions-hero           { padding: 64px var(--sp-6) 48px; }
  .solutions-section        { padding: 64px var(--sp-6); }
  .solutions-section--alt   { padding: 64px var(--sp-6); }
  .solutions-section--narrow { padding: 64px var(--sp-6); }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .journey-rail { grid-template-columns: repeat(3, 1fr); }
  .metrics-grid { grid-template-columns: repeat(3, 1fr); }

  /* ── Home cases grid: 3→2 columns ─────────────────────────────────── */
  .home-cases__grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Home sections ─────────────────────────────────────────────────── */
  .home-section          { padding: 80px var(--sp-6); }
  .home-section--compact { padding: 60px var(--sp-6); }
  .home-section--security { padding: 52px var(--sp-6); }

  /* ── Articles grid: 3→2 columns ────────────────────────────────────── */
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  /* Reset 3-col borders, apply 2-col borders */
  .article-card:nth-child(3n+1),
  .article-card:nth-child(3n+2) { border-right: none; }
  .article-card:nth-child(2n+1) { border-right: 1px solid var(--t-line); }

  /* ── Site footer: 4→2 columns ──────────────────────────────────────── */
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* ── Case / About ──────────────────────────────────────────────────── */
  .case-hero     { padding: 56px var(--sp-6) 44px; }
  .about-hero    { padding: 64px var(--sp-6) 48px; }
  .case-section  { padding: 56px var(--sp-6); }
  .about-section { padding: 56px var(--sp-6); }
  .case-section--alt { padding: 56px var(--sp-6); }

  /* ── Insights / Flows ──────────────────────────────────────────────── */
  .insights-header  { padding: 60px var(--sp-6) 24px; }
  .topic-filter     { padding: 20px var(--sp-6) 0; }
  .featured-section { padding: 44px var(--sp-6) 0; }
  .articles-section { padding: 48px var(--sp-6) 0; }
  .newsletter-section { padding: 0 var(--sp-6) 64px; }
  .flows-header     { padding: 56px var(--sp-6) 24px; }
  .flows-explainer  { padding: 28px var(--sp-6) 64px; }

  /* ── CTA sections ──────────────────────────────────────────────────── */
  .cta-section             { padding: 72px var(--sp-6); }
  .solutions-cta-section   { padding: 56px var(--sp-6); }
  .quote-section,
  .case-quote-section      { padding: 64px var(--sp-6); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ≤ 768px — Tablet portrait
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Section padding ───────────────────────────────────────────────── */
  .section-pad       { padding: 48px var(--sp-5); }
  .section-pad--sm   { padding: 36px var(--sp-5); }
  .section-pad--lg   { padding: 64px var(--sp-5); }
  .section-pad--hero { padding: 64px var(--sp-5) 52px; }
  .section-pad--cta  { padding: 48px var(--sp-5); }

  /* ── Navbar padding ────────────────────────────────────────────────── */
  .nav-inner { padding: 14px var(--sp-5); gap: 12px; }
  .nav-mobile { padding: 12px var(--sp-5) 20px; }

  /* ── Standard grids ────────────────────────────────────────────────── */
  .grid-2 { grid-template-columns: 1fr; }

  /* ── Spec strip: 5→3 columns ───────────────────────────────────────── */
  .spec-strip {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 40px;
    gap: 16px;
  }

  /* ── Hero big type ─────────────────────────────────────────────────── */
  .hero-big-type { padding: 60px var(--sp-5) 44px; }

  /* ── Hero matrix ───────────────────────────────────────────────────── */
  .hero-matrix { padding: 60px var(--sp-5) 48px; }

  /* ── Hero spec ─────────────────────────────────────────────────────── */
  .hero-spec { padding: 48px var(--sp-5) 36px; }

  /* ── Security badge: 3→2 columns ──────────────────────────────────── */
  .security-badge__grid { grid-template-columns: repeat(2, 1fr); }

  /* ── CTA sections: 2-col → 1-col ──────────────────────────────────── */
  .cta-section__inner  { grid-template-columns: 1fr; gap: 24px; }
  .solutions-cta-inner { grid-template-columns: 1fr; gap: 24px; }
  .cta-section               { padding: 56px var(--sp-5); }
  .solutions-cta-section     { padding: 48px var(--sp-5); }

  /* ── New hero ──────────────────────────────────────────────────────── */
  .new-hero { padding: 60px var(--sp-5) 52px; }

  /* Hero metrics: 3→2 columns */
  .new-hero__metrics { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
  .new-hero__metric { border-right: 1px solid var(--t-line); }
  .new-hero__metric:nth-child(2)  { border-right: none; }
  .new-hero__metric:nth-child(3)  { border-top: 1px solid var(--t-line); border-right: 1px solid var(--t-line); }
  .new-hero__metric:nth-child(4)  { border-top: 1px solid var(--t-line); border-right: none; }
  .new-hero__metric:nth-child(5)  { border-top: 1px solid var(--t-line); border-right: none; }

  /* ── WWDO section ──────────────────────────────────────────────────── */
  .wwdo-section  { padding: 60px var(--sp-5); }
  .who-section   { padding: 60px var(--sp-5); }
  .contact-section { padding: 60px var(--sp-5); }

  /* WWDO grid: 2→1 column */
  .wwdo-grid { grid-template-columns: 1fr; }

  /* ── Featured article: 2-col → 1-col ──────────────────────────────── */
  .featured-article { grid-template-columns: 1fr; }
  .featured-visual {
    min-height: 240px;
    border-right: none;
    border-bottom: 1px solid var(--t-line);
  }
  .featured-content { padding: 28px; gap: 12px; }

  /* ── Newsletter: 2→1 column ────────────────────────────────────────── */
  .newsletter-box { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }

  /* ── Flow explainer: side panel → stacked ──────────────────────────── */
  .flow-body { grid-template-columns: 1fr; }
  .flow-panel { border-left: none; border-top: 1px solid var(--t-line); }

  /* ── Timeline / Work rows: multi-col → 1-col ───────────────────────── */
  .timeline-item,
  .work-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 18px 0;
  }

  /* ── Case brief: 2-col → 1-col ─────────────────────────────────────── */
  .case-brief { grid-template-columns: 1fr; padding: 48px var(--sp-5); gap: 14px; }

  /* ── Capability row ────────────────────────────────────────────────── */
  .capability-row { grid-template-columns: 1fr; gap: 6px; }
  .capability-key { font-size: 11px; }

  /* ── Site footer: 2→1 column ────────────────────────────────────────── */
  .site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__bottom {
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
  }

  /* ── New footer ─────────────────────────────────────────────────────── */
  .new-footer__inner { flex-direction: column; gap: 10px; align-items: flex-start; }
  .new-footer__right { margin-left: 0; }

  /* ── Section head ───────────────────────────────────────────────────── */
  .section-head { margin-bottom: 28px; }
  .section-head__sub { font-size: 15px; }

  /* ── Home sections ──────────────────────────────────────────────────── */
  .home-section           { padding: 56px var(--sp-5); }
  .home-section--compact  { padding: 40px var(--sp-5); }
  .home-section--security { padding: 40px var(--sp-5); }

  /* ── Case / About ───────────────────────────────────────────────────── */
  .case-hero     { padding: 48px var(--sp-5) 36px; }
  .about-hero    { padding: 56px var(--sp-5) 40px; }
  .case-section  { padding: 44px var(--sp-5); }
  .about-section { padding: 44px var(--sp-5); }
  .case-section--alt { padding: 44px var(--sp-5); }
  .capabilities-section { padding: 56px var(--sp-5); }

  /* ── Quote ──────────────────────────────────────────────────────────── */
  .quote-section, .case-quote-section { padding: 48px var(--sp-5); }
  .case-blockquote, .case-quote { font-size: 22px; }

  /* ── Solutions ──────────────────────────────────────────────────────── */
  .solutions-hero           { padding: 56px var(--sp-5) 44px; }
  .solutions-section        { padding: 56px var(--sp-5); }
  .solutions-section--alt   { padding: 56px var(--sp-5); }
  .solutions-section--narrow { padding: 56px var(--sp-5); }

  /* ── Insights / Flows ───────────────────────────────────────────────── */
  .insights-header { padding: 48px var(--sp-5) 20px; }
  .insights-title  { font-size: 40px; letter-spacing: -0.8px; }
  .insights-sub    { font-size: 16px; }
  .topic-filter    { padding: 16px var(--sp-5) 0; }
  .featured-section { padding: 32px var(--sp-5) 0; }
  .articles-section { padding: 40px var(--sp-5) 0; }
  .newsletter-section { padding: 0 var(--sp-5) 56px; }
  .flows-header    { padding: 48px var(--sp-5) 20px; }
  .flows-title     { font-size: 40px; letter-spacing: -0.8px; }
  .flows-sub       { font-size: 16px; }
  .flows-explainer { padding: 20px var(--sp-5) 56px; }

  /* ── Form grid: 2→1 column ──────────────────────────────────────────── */
  .form-grid { grid-template-columns: 1fr; }

  /* ── Review panel ───────────────────────────────────────────────────── */
  .review-panel { grid-template-columns: 110px 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ≤ 640px — Large phone
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Section padding ───────────────────────────────────────────────── */
  .section-pad       { padding: 40px var(--sp-4); }
  .section-pad--sm   { padding: 28px var(--sp-4); }
  .section-pad--lg   { padding: 56px var(--sp-4); }
  .section-pad--hero { padding: 52px var(--sp-4) 40px; }
  .section-pad--cta  { padding: 40px var(--sp-4); }

  /* ── Navbar ────────────────────────────────────────────────────────── */
  .nav-inner  { padding: 12px var(--sp-4); gap: 10px; }
  .nav-mobile { padding: 10px var(--sp-4) 18px; }

  /* ── All remaining multi-col grids → 1 col ─────────────────────────── */
  .grid-3    { grid-template-columns: 1fr; }
  .grid-4    { grid-template-columns: 1fr; }
  .mosaic--2 { grid-template-columns: 1fr; }
  .mosaic--3 { grid-template-columns: 1fr; }
  .mosaic--4 { grid-template-columns: 1fr; }

  /* ── Who pillars: 2→1 column ───────────────────────────────────────── */
  .who-pillars { grid-template-columns: 1fr; }

  /* ── Contact cards: 2→1 column ─────────────────────────────────────── */
  .contact-cards { grid-template-columns: 1fr; }

  /* ── Solutions ─────────────────────────────────────────────────────── */
  .pillars-grid { grid-template-columns: 1fr; }
  .journey-rail { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Home cases: 2→1 column ────────────────────────────────────────── */
  .home-cases__grid { grid-template-columns: 1fr; }

  /* ── Articles: 2→1 column ──────────────────────────────────────────── */
  .articles-grid { grid-template-columns: 1fr; }
  .article-card:nth-child(2n+1) { border-right: none; }

  /* ── Case metrics: 3→2 columns ─────────────────────────────────────── */
  .case-card__metrics { grid-template-columns: repeat(2, 1fr); }

  /* ── Security badge: 2→1 column ────────────────────────────────────── */
  .security-badge__grid { grid-template-columns: 1fr; }
  .security-badge { padding: 24px 20px; }

  /* ── Compliance map: 2→1 column ────────────────────────────────────── */
  .compliance-map { grid-template-columns: 1fr; }

  /* ── Outcomes: 3→2 columns ─────────────────────────────────────────── */
  .outcomes-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Principles: 2→1 column ────────────────────────────────────────── */
  .principles-grid { grid-template-columns: 1fr; }

  /* ── Spec strip: 3→2 columns ───────────────────────────────────────── */
  .spec-strip { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* ── Hero metrics: 2 columns (kept) ───────────────────────────────── */
  .new-hero__metrics { grid-template-columns: repeat(2, 1fr); }

  /* ── Section-level padding reductions ──────────────────────────────── */
  .new-hero        { padding: 52px var(--sp-4) 44px; }
  .wwdo-section    { padding: 52px var(--sp-4); }
  .who-section     { padding: 52px var(--sp-4); }
  .contact-section { padding: 52px var(--sp-4); }
  .home-section           { padding: 44px var(--sp-4); }
  .home-section--compact  { padding: 32px var(--sp-4); }
  .home-section--security { padding: 32px var(--sp-4); }
  .case-section    { padding: 36px var(--sp-4); }
  .about-section   { padding: 36px var(--sp-4); }
  .case-section--alt { padding: 36px var(--sp-4); }
  .case-hero       { padding: 40px var(--sp-4) 28px; }
  .about-hero      { padding: 44px var(--sp-4) 32px; }
  .hero-big-type   { padding: 48px var(--sp-4) 36px; }
  .hero-spec       { padding: 40px var(--sp-4) 28px; }
  .hero-matrix     { padding: 48px var(--sp-4) 36px; }
  .capabilities-section   { padding: 44px var(--sp-4); }
  .solutions-hero          { padding: 44px var(--sp-4) 32px; }
  .solutions-section       { padding: 44px var(--sp-4); }
  .solutions-section--alt  { padding: 44px var(--sp-4); }
  .solutions-section--narrow { padding: 44px var(--sp-4); }
  .cta-section             { padding: 44px var(--sp-4); }
  .solutions-cta-section   { padding: 40px var(--sp-4); }
  .quote-section,
  .case-quote-section      { padding: 40px var(--sp-4); }
  .insights-header         { padding: 40px var(--sp-4) 18px; }
  .topic-filter            { padding: 14px var(--sp-4) 0; }
  .featured-section        { padding: 28px var(--sp-4) 0; }
  .articles-section        { padding: 32px var(--sp-4) 0; }
  .newsletter-section      { padding: 0 var(--sp-4) 44px; }
  .flows-header            { padding: 40px var(--sp-4) 18px; }
  .flows-explainer         { padding: 18px var(--sp-4) 44px; }
  .case-brief              { padding: 36px var(--sp-4); }
  .site-footer             { padding: 36px var(--sp-4) 24px; }
  .new-footer              { padding: 14px var(--sp-4); }

  /* ── Content padding within cards ──────────────────────────────────── */
  .wwdo-col       { padding: 28px 20px; }
  .pillar-card    { padding: 24px 20px; }
  .pillar-item    { padding: 22px 18px; }
  .contact-card   { padding: 26px 22px; }
  .featured-content { padding: 24px 20px; }
  .newsletter-box { padding: 28px 20px; }

  /* ── Typography ─────────────────────────────────────────────────────── */
  .insights-title { font-size: 34px; letter-spacing: -0.6px; }
  .flows-title    { font-size: 34px; letter-spacing: -0.6px; }
  .cta-section__heading { font-size: 28px; }
  .case-blockquote, .case-quote { font-size: 20px; }
  .section-head__sub { font-size: 14px; }
  .hero-big-type__body-grid { gap: 24px; margin-top: 36px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ≤ 480px — Modern phone
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Grid-5 → 2 columns ────────────────────────────────────────────── */
  .grid-5    { grid-template-columns: repeat(2, 1fr); }
  .mosaic--6 { grid-template-columns: repeat(2, 1fr); }

  /* ── Hide locale toggle from main nav (it lives in mobile menu) ─────── */
  .nav-actions .locale-toggle { display: none; }

  /* ── Hero CTA buttons: stack to full width ──────────────────────────── */
  .hero-big-type__cta,
  .hero-spec__cta,
  .hero-matrix__cta,
  .new-hero__cta,
  .solutions-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-big-type__cta .btn,
  .hero-spec__cta .btn,
  .hero-matrix__cta .btn,
  .solutions-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .new-hero__cta-btn { width: 100%; justify-content: center; }

  /* ── CTA section button ─────────────────────────────────────────────── */
  .cta-section__btn { width: 100%; justify-content: center; }
  .solutions-cta-btn { width: 100%; justify-content: center; }

  /* ── Contact card buttons ───────────────────────────────────────────── */
  .contact-card__cta-btn,
  .contact-card__cta-link { width: 100%; justify-content: center; }

  /* ── Case metrics: 2→1 column ──────────────────────────────────────── */
  .case-card__metrics { grid-template-columns: 1fr; }

  /* ── Spec strip: 2→1 column ────────────────────────────────────────── */
  .spec-strip { grid-template-columns: 1fr; gap: 12px; }

  /* ── Outcomes: 2→1 column ───────────────────────────────────────────── */
  .outcomes-grid { grid-template-columns: 1fr; }

  /* ── Hero metrics: keep 2 columns ──────────────────────────────────── */
  .new-hero__metrics { grid-template-columns: repeat(2, 1fr); }

  /* ── Journey / Metrics: keep 2 columns ─────────────────────────────── */
  .journey-rail { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Typography caps ────────────────────────────────────────────────── */
  .about-title  { font-size: clamp(28px, 8vw, 44px); }
  .featured-title { font-size: 24px; }
  .insights-title { font-size: 28px; }
  .flows-title    { font-size: 28px; }
  .newsletter-heading { font-size: 22px; }
  .cta-section__heading { font-size: 24px; }
  .solutions-cta-heading { font-size: 24px; }
  .case-blockquote, .case-quote { font-size: 18px; }

  /* ── Body text slightly smaller on phones ───────────────────────────── */
  .new-hero__sub,
  .hero-big-type__sub,
  .hero-spec__sub,
  .hero-matrix__sub     { font-size: 15px; }
  .section-head__sub    { font-size: 14px; }
  .wwdo-intro__sub      { font-size: 15px; }
  .contact-section__sub { font-size: 15px; }
  .who-heading          { font-size: clamp(24px, 7vw, 38px); }
  .wwdo-intro           { margin-bottom: 32px; }

  /* ── Flow tabs ──────────────────────────────────────────────────────── */
  .flow-tab       { flex: 1 1 140px; padding: 12px 14px; }
  .flow-tab__name { font-size: 13px; }

  /* ── Review panel: compact ──────────────────────────────────────────── */
  .review-panel {
    grid-template-columns: 1fr;
    row-gap: 3px;
  }
  .review-panel__key {
    color: var(--t-ink-muted);
    font-size: 11px;
    margin-top: 8px;
  }
  .review-panel__key:first-child { margin-top: 0; }

  /* ── Modal ──────────────────────────────────────────────────────────── */
  .modal-container { border-radius: var(--radius-xl); }
  .modal-header    { padding: 18px 18px 12px; }
  .modal-body      { padding: 18px; }

  /* ── Section-level padding for phones ──────────────────────────────── */
  .new-hero        { padding: 44px var(--sp-4) 36px; }
  .wwdo-section    { padding: 44px var(--sp-4); }
  .who-section     { padding: 44px var(--sp-4); }
  .contact-section { padding: 44px var(--sp-4); }
  .solutions-hero  { padding: 36px var(--sp-4) 28px; }

  /* ── Reduce animation glow on mobile (GPU savings) ──────────────────── */
  .new-hero__glow { filter: blur(12px); opacity: 0.7; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ≤ 360px — Small phone
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

  /* ── Grids → 1 column ───────────────────────────────────────────────── */
  .grid-5       { grid-template-columns: 1fr; }
  .mosaic--6    { grid-template-columns: 1fr; }
  .journey-rail { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: 1fr; }
  .new-hero__metrics { grid-template-columns: 1fr; }
  .new-hero__metric  { border-right: none; }

  /* ── Navbar: tightest padding ───────────────────────────────────────── */
  .nav-inner { padding: 10px 14px; gap: 8px; }

  /* ── Hide contact button from header (only in mobile menu) ─────────── */
  .nav-actions .btn { display: none; }

  /* ── Section padding ────────────────────────────────────────────────── */
  .section-pad       { padding: 32px 14px; }
  .section-pad--sm   { padding: 22px 14px; }
  .section-pad--lg   { padding: 44px 14px; }
  .section-pad--hero { padding: 40px 14px 32px; }
  .section-pad--cta  { padding: 32px 14px; }

  /* ── Smallest section paddings ──────────────────────────────────────── */
  .new-hero, .wwdo-section, .who-section, .contact-section { padding-inline: 14px; }
  .home-section, .case-section, .about-section { padding-inline: 14px; }
  .hero-big-type, .hero-spec, .hero-matrix { padding-inline: 14px; }
  .solutions-hero, .solutions-section,
  .solutions-section--alt, .solutions-section--narrow { padding-inline: 14px; }
  .case-hero, .about-hero { padding-inline: 14px; }
  .capabilities-section { padding-inline: 14px; }
  .cta-section { padding-inline: 14px; }
  .solutions-cta-section { padding-inline: 14px; }
  .quote-section, .case-quote-section { padding-inline: 14px; }
  .insights-header, .topic-filter { padding-inline: 14px; }
  .featured-section, .articles-section { padding-inline: 14px; }
  .newsletter-section { padding-inline: 14px; }
  .flows-header, .flows-explainer { padding-inline: 14px; }
  .case-brief { padding-inline: 14px; }
  .site-footer  { padding-inline: 14px; }
  .new-footer   { padding-inline: 14px; }
  .nav-mobile   { padding-inline: 14px; }

  /* ── Body text further reduction ────────────────────────────────────── */
  .insights-title, .flows-title { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive utilities (screen-size-specific show/hide)
   ══════════════════════════════════════════════════════════════════════════ */

/* Use these classes to conditionally show/hide elements at breakpoints */
@media (max-width: 1024px) {
  .hide-below-lg { display: none !important; }
}
@media (min-width: 1025px) {
  .hide-above-lg { display: none !important; }
}
@media (max-width: 768px) {
  .hide-below-md { display: none !important; }
}
@media (min-width: 769px) {
  .hide-above-md { display: none !important; }
}
@media (max-width: 480px) {
  .hide-below-sm { display: none !important; }
}
@media (min-width: 481px) {
  .hide-above-sm { display: none !important; }
}