/* ═══════════════════════════════════════════════════════════════════════
   INGONYAMA TRUST — UNIFIED RESPONSIVE LAYOUT SYSTEM
   ----------------------------------------------------------------------
   Single source of truth for: container width, horizontal gutter, vertical
   rhythm, overflow safety, and zoom-stable scaling. Loaded LAST (priority
   9999 from functions.php) so it wins over every other stylesheet AND
   the inline <style> blocks inside each page-*.php template.
   ----------------------------------------------------------------------
   Architecture:
     • One set of design tokens (clamp-based — smooth across zoom).
     • One outer-wrapper rule covers EVERY full-bleed selector that
       different page templates use for their section / strip / banner /
       bottom-CTA / sticky-bar elements (fq-, ct-, ne-, ar-, pr-, rc-,
       ol-, sn-, generic …).
     • One inner-wrapper rule centres content to var(--site-max).
     • Fixed-width hero / sidebar / panel / search overrides forced fluid.
     • Hard overflow safety net (`overflow-x: clip` on html+body, no
       `min-width: 320px`, max-width: 100% on all media).
   ----------------------------------------------------------------------
   Nothing here changes markup; no PHP / ACF / customizer logic is
   affected. Removing this file reverts the site to its previous behaviour.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 1. DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Inner content cap — drives where text + grids stop expanding */
  --site-max:        1320px;

  /* Outer cap on full-bleed backgrounds so header / footer don't extend
     edge-to-edge on >1920 displays */
  --site-outer:      1920px;

  /* Horizontal gutter — clamp() = smooth scaling at 80 / 90 / 100 / 110 / 125 %.
     360 px viewport → 14px. 1024 → 36. 1440 → 50. 1920+ → 60. */
  --gutter:          clamp(14px, 3.2vw, 60px);

  /* Vertical rhythm for sections */
  --gutter-y:        clamp(40px, 6vw, 80px);
  --gutter-y-tight:  clamp(28px, 4vw, 50px);
  --gutter-y-strip:  clamp(14px, 2vw, 26px);

  /* Footer rhythm */
  --gutter-y-footer-top:    clamp(36px, 5vw, 60px);
  --gutter-y-footer-bottom: clamp(20px, 2.5vw, 30px);

  /* Sticky-nav heights — used by scroll-margin so anchor jumps clear nav */
  --nav-h-desktop:   88px;
  --nav-h-tablet:    68px;
  --nav-h-mobile:    62px;
  --nav-h-small:     56px;
}

@media (max-width: 480px) {
  :root {
    --gutter:           clamp(12px, 4vw, 18px);
    --gutter-y:         clamp(28px, 7vw, 44px);
    --gutter-y-tight:   clamp(22px, 6vw, 34px);
  }
}

@media (min-width: 1601px) {
  :root { --gutter: 60px; }
}


/* ─── 2. ROOT OVERFLOW + SIZING HARDENING ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

html, body {
  /* `min-width: 320px` from shared-responsive.css caused horizontal scroll
     at <100 % zoom on tablets. Removed. */
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
  /* `overflow-x: clip` prevents horizontal scroll without breaking
     position: sticky children (which `overflow: hidden` does in some
     browser/zoom combinations). */
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

img, svg, video, picture, iframe, embed, object, canvas {
  max-width: 100%;
  height: auto;
}

iframe { display: block; }

/* Tables — scroll horizontally inside their cell rather than overflowing page.
   .pr-awards-table is excluded: it already ships its own dedicated scroll
   wrapper (.pr-awards-table-wrap) + fixed table-layout for mobile, so this
   generic `display:block` rule fought it and produced a nested double
   scroll-container (one on the wrapper, one on the table itself), breaking
   the mobile column widths and word-wrapping on the Awarded Bids table. */
.section table, .section-alt table,
.fq-section table, .ct-section table, .ne-section table,
.ar-section table, .pr-section table:not(.pr-awards-table), .rc-section table,
.ol-section table, .ol-section-alt table, .ol-section-tight table,
.page-hero table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Long URLs / words must not push horizontal scroll */
p, li, dd, blockquote,
.sec-lead, .ph-sub, .sec-h2,
.fq-sec-lead, .ct-sec-lead, .ne-sec-lead, .ar-sec-lead,
.pr-sec-lead, .rc-sec-lead,
.f-tagline, .f-contact-item span {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}


/* ─── 3. THE UNIFIED OUTER WRAPPER ─────────────────────────────────── */
/* Every full-bleed element (any background-bearing section/strip/banner
   that goes edge-to-edge) shares the SAME horizontal padding so its CONTENT
   edges align with every centred section above and below it.

   The padding-inline trick:
     padding-inline: max(var(--gutter), calc((100% - var(--site-max)) / 2));

   • On narrow viewports (< site-max + 2*gutter): padding = var(--gutter).
     Content fills (viewport - 2*gutter) — same as every section.
   • On wide viewports (>= site-max + 2*gutter): padding = (100% - site-max)/2.
     Content is centred to site-max — same as every section's inner content.

   Net effect: header, sections, footer all have their content edges at the
   EXACT same x-coordinate, regardless of viewport width or zoom level. */
.util-bar,
nav,
.breadcrumb,
.page-hero,
.section,
.section-alt,
/* Index page */
.contact-section,
.newsletter,
.impact,
.bottom-cta,
.cta-banner,
.stats-strip,
.intro-strip,
.audit-strip,
.testimonials-section,
.yt-section,
.heritage-intro,
/* Sticky strips (theme-wide) */
.filter-bar,
.filter-strip,
.search-strip,
.faq-search-bar,
.fq-search-strip,
.fq-chips-strip,
.ar-tabs-strip,
.ct-tabs-strip,
.ne-tabs-strip,
.rc-search-strip,
.pr-tabs-strip,
/* Page: FAQ */
.fq-section,
.fq-section-alt,
.fq-bottom,
/* Page: Contact */
.ct-section,
.ct-section-alt,
.ct-bottom,
/* Page: News & Events */
.ne-section,
.ne-section-alt,
.ne-bottom,
/* Page: Annual Reports */
.ar-section,
.ar-section-alt,
.ar-bottom,
/* Page: Procurement */
.pr-section,
.pr-section-tight,
.pr-section-alt,
/* Page: Resource Centre */
.rc-section,
.rc-section-alt,
.rc-cant-find,
/* Page: Our Leadership */
.ol-section,
.ol-section-alt,
.ol-section-tight,
/* Page: Careers */
.contact-band,
/* Page: generic */
.page-title-bar,
/* Single news article */
.sn-breadcrumb,
.sn-back,
.sn-related,
footer {
  width: 100%;
  max-width: var(--site-outer);
  margin-left: auto !important;
  margin-right: auto !important;
  /* Centring gutter — see section header comment above for the math. */
  padding-left:  max(var(--gutter), calc((100% - var(--site-max)) / 2)) !important;
  padding-right: max(var(--gutter), calc((100% - var(--site-max)) / 2)) !important;
  box-sizing: border-box;
}

/* Notched-device safe area — extend gutter further if device demands it. */
@supports (padding: max(0px, 0px)) {
  .util-bar, nav, .breadcrumb, .page-hero,
  .section, .section-alt,
  .contact-section, .newsletter, .impact,
  .bottom-cta, .cta-banner, .stats-strip, .intro-strip, .audit-strip,
  .testimonials-section, .yt-section, .heritage-intro,
  .filter-bar, .filter-strip, .search-strip, .faq-search-bar,
  .fq-search-strip, .fq-chips-strip, .ar-tabs-strip, .ct-tabs-strip,
  .ne-tabs-strip, .rc-search-strip, .pr-tabs-strip,
  .fq-section, .fq-section-alt, .fq-bottom,
  .ct-section, .ct-section-alt, .ct-bottom,
  .ne-section, .ne-section-alt, .ne-bottom,
  .ar-section, .ar-section-alt, .ar-bottom,
  .pr-section, .pr-section-tight, .pr-section-alt,
  .rc-section, .rc-section-alt, .rc-cant-find,
  .ol-section, .ol-section-alt, .ol-section-tight,
  .contact-band, .page-title-bar,
  .sn-breadcrumb, .sn-back, .sn-related,
  footer {
    padding-left:  max(var(--gutter), calc((100% - var(--site-max)) / 2), env(safe-area-inset-left))  !important;
    padding-right: max(var(--gutter), calc((100% - var(--site-max)) / 2), env(safe-area-inset-right)) !important;
  }
}


/* ─── 4. UNIFIED INNER CONTENT WRAPPER ─────────────────────────────── */
/* Inner-content elements cap to var(--site-max) so the text column matches
   the centred footer / banner content on ultra-wide screens. */
.page-hero-content,
.ph-content,
.footer-grid,
.footer-bottom,
.ol-section > *,
.ol-section-alt > *,
.ol-section-tight > * {
  width: 100%;
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Reusable utility — drop on any new custom block for the same width contract */
.site-container,
.u-container {
  width: 100%;
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}


/* ─── 5. SECTION VERTICAL RHYTHM (uniform across every page) ───────── */
/* Only normalise vertical axis — horizontal already handled in section 3. */
.section,
.section-alt,
.fq-section,
.fq-section-alt,
.ct-section,
.ct-section-alt,
.ne-section,
.ne-section-alt,
.ar-section,
.ar-section-alt,
.pr-section,
.pr-section-alt,
.rc-section,
.rc-section-alt,
.ol-section,
.ol-section-alt,
.sn-related {
  padding-top:    var(--gutter-y) !important;
  padding-bottom: var(--gutter-y) !important;
}

.contact-section,
.newsletter,
.impact,
.bottom-cta,
.cta-banner,
.intro-strip,
.audit-strip,
.testimonials-section,
.yt-section,
.stats-strip,
.fq-bottom,
.ct-bottom,
.ne-bottom,
.ar-bottom,
.rc-cant-find,
.pr-section-tight,
.ol-section-tight,
.contact-band,
.page-title-bar,
.sn-back {
  padding-top:    var(--gutter-y-tight) !important;
  padding-bottom: var(--gutter-y-tight) !important;
}

.fq-search-strip,
.fq-chips-strip,
.filter-bar,
.filter-strip,
.search-strip,
.faq-search-bar,
.ar-tabs-strip,
.ct-tabs-strip,
.ne-tabs-strip,
.rc-search-strip,
.pr-tabs-strip,
.sn-breadcrumb,
.breadcrumb {
  padding-top:    var(--gutter-y-strip) !important;
  padding-bottom: var(--gutter-y-strip) !important;
}

footer {
  padding-top:    var(--gutter-y-footer-top) !important;
  padding-bottom: var(--gutter-y-footer-bottom) !important;
}


/* ─── 6. STICKY NAV + ANCHOR SCROLL-MARGIN ─────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

:target,
section[id],
div[id] {
  scroll-margin-top: calc(var(--nav-h-desktop) + 12px);
}

@media (max-width: 1024px) {
  :target, section[id], div[id] {
    scroll-margin-top: calc(var(--nav-h-tablet) + 12px);
  }
}

@media (max-width: 768px) {
  :target, section[id], div[id] {
    scroll-margin-top: calc(var(--nav-h-mobile) + 12px);
  }
}

@media (max-width: 480px) {
  :target, section[id], div[id] {
    scroll-margin-top: calc(var(--nav-h-small) + 12px);
  }
}


/* ─── 7. HOMEPAGE HERO — fluid, no fixed 520px column or 92vh ──────── */
.hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, min(40%, 460px)) !important;
  min-height: auto !important;
}

.hero-left {
  min-width: 0;
  padding-top:    clamp(48px, 7vw, 96px) !important;
  padding-bottom: clamp(48px, 7vw, 96px) !important;
  padding-left:   var(--gutter) !important;
  padding-right:  var(--gutter) !important;
}

.hero-right {
  min-width: 0;
  padding: clamp(40px, 5vw, 60px) clamp(20px, 2.5vw, 40px) !important;
}

.hero-panel {
  width: 100% !important;
  max-width: 380px !important;
}

.hp-stat-row {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr !important; }
  .hero-right { display: none !important; }
}


/* ─── 8. HERO-STATS / PH-STATS — auto-fit, never overflow ──────────── */
.stats-bar {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.ct-hero-stats,
.fq-hero-stats,
.ne-hero-stats,
.ar-hero-stats,
.pr-hero-stats,
.rc-hero-stats {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  /* The per-page `max-width: 820px / 780px / 680px` is intentional design —
     don't override that, just stop fixed column counts. */
}

.ph-quick,
.ph-stats {
  flex-wrap: wrap;
}

.ph-stat {
  flex: 1 1 clamp(140px, 22vw, 200px);
  min-width: 0;
}


/* ─── 9. FOOTER GRID — fluid, no fixed 280px brand column ──────────── */
.footer-grid {
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
}

@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(0, 1fr));
  }
  .footer-grid .f-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .footer-grid .f-brand { grid-column: 1 / -1 !important; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}


/* ─── 10. CARD GRIDS — auto-fit safety + min-width: 0 on children ──── */
.services-grid, .mv-grid, .events-grid, .news-grid, .res-grid,
.pillars-grid, .committees-grid, .fw-grid, .pol-grid, .steps-grid,
.notice-grid, .docs-grid, .featured-grid, .gallery-grid, .videos-grid,
.facts-grid, .reports-grid, .fs-grid, .progress-grid, .districts-grid,
.value-grid, .process-grid, .projects-grid, .devtypes-grid, .partners-grid,
.fund-grid, .bursary-grid, .ts-grid, .app-grid, .lease-grid, .info-cards,
.channels-grid, .faq-grid, .step-cards, .doc-checklist, .project-types,
.info-panel, .action-cards, .yt-grid, .board-grid, .sec-grid, .dept-grid,
.timeline-strip, .dev-grid, .flow-grid, .partner-grid,
.ol-board-grid, .ol-sec-grid, .ol-pillars, .ol-stats {
  grid-auto-columns: minmax(0, 1fr);
}

/* min-width: 0 escape hatch so flex/text children can never overflow grid cells */
.services-grid > *, .mv-grid > *, .events-grid > *, .news-grid > *,
.res-grid > *, .pillars-grid > *, .committees-grid > *, .fw-grid > *,
.pol-grid > *, .steps-grid > *, .notice-grid > *, .docs-grid > *,
.featured-grid > *, .gallery-grid > *, .videos-grid > *, .facts-grid > *,
.reports-grid > *, .fs-grid > *, .progress-grid > *, .districts-grid > *,
.value-grid > *, .process-grid > *, .projects-grid > *, .devtypes-grid > *,
.partners-grid > *, .fund-grid > *, .bursary-grid > *, .ts-grid > *,
.app-grid > *, .lease-grid > *, .info-cards > *, .channels-grid > *,
.faq-grid > *, .step-cards > *, .doc-checklist > *, .project-types > *,
.info-panel > *, .action-cards > *, .yt-grid > *, .board-grid > *,
.sec-grid > *, .dept-grid > *, .timeline-strip > *, .dev-grid > *,
.flow-grid > *, .partner-grid > *,
.ol-board-grid > *, .ol-sec-grid > *, .ol-pillars > *, .ol-stats > *,
.stats-bar > *, .footer-grid > *, .hp-stat-row > *,
.hero-stats > *, .ct-hero-stats > *, .fq-hero-stats > *,
.ne-hero-stats > *, .ar-hero-stats > *, .pr-hero-stats > *,
.rc-hero-stats > *,
.ph-quick > *, .ph-stats > * {
  min-width: 0;
}

/* Round-photo team images — never push column wider than its cell */
#board .ol-member-img,
#secretariat .ol-sec-img,
.mc-img-wrap, .sc-img-wrap {
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}


/* ─── 11. PAGE-HERO TITLES — zoom-safe ─────────────────────────────── */
/* Same clamp-based height on every inner page, whether it's built via
   template-parts/page-banner.php or template-parts/dummy-page.php — both
   share the .page-hero markup, so this is the single source of truth.
   Matches the homepage .hero min-height (index.php) so every page's hero
   is the same size. */
.page-hero {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: block !important;
  overflow: hidden !important;
  padding: clamp(90px, 10vw, 130px) clamp(20px, 5vw, 80px) !important;
  min-height: clamp(560px, 68vh, 720px) !important;
}

.page-hero h1,
.page-hero .ph-h1 {
  font-size: clamp(1.6rem, 3.8vw, 3.4rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  word-break: normal;
}

.page-hero .ph-sub,
.page-hero p.lead {
  max-width: min(720px, 100%);
}

/* No colour wash over the hero photo anymore — these shadows are what keep the
   white heading/eyebrow/sub text readable against whatever the photo shows. */
.page-hero .ph-h1,
.page-hero h1,
.la-h1,
.pp-hero h1 {
  text-shadow: 0 2px 4px rgba(0,0,0,.7), 0 8px 30px rgba(0,0,0,.6), 0 2px 20px rgba(0,0,0,.45);
}

.page-hero .ph-sub,
.page-hero p.lead,
.la-lead,
.pp-hero-sub {
  text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.5);
}

.page-hero .ph-eyebrow,
.la-eyebrow {
  text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.45);
}


/* ─── 12. BUTTONS / FORMS / SEARCH INPUTS — never overflow ─────────── */
button, input, select, textarea, a.btn,
.btn-hero-p, .btn-hero-s,
.btn-ph-p, .btn-ph-s,
.btn-bc-p, .btn-bc-s,
.cta-btn-p, .cta-btn-s,
.btn-cta-p, .btn-cta-s,
.btn-apply, .btn-download,
.cf-btn, .nl-btn {
  max-width: 100%;
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="search"], input[type="number"],
input[type="password"], input[type="date"],
select, textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Page-specific search controls had hard `min-width: 220–260px` which
   blew out filter bars at narrow zoom widths. Make them flexible. */
.ne-search, .pr-search, .ar-filter, .ne-filter, .filter-search {
  min-width: 0 !important;
  flex: 1 1 200px;
  max-width: 100%;
}

.ne-search input, .pr-search input,
.ar-filter input, .ne-filter input,
.filter-search input {
  width: 100% !important;
  min-width: 0 !important;
}


/* ─── 13. SECTION HEADER — wrap cleanly ────────────────────────────── */
.sec-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(12px, 2vw, 30px);
  margin-bottom: clamp(20px, 3vw, 40px);
}

.sec-header > * {
  min-width: 0;
}


/* ─── 14. BREADCRUMB — wrap on narrow, single-line on wide ─────────── */
.breadcrumb,
.sn-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════
   HEADER PRECISION FIX
   ───────────────────────────────────────────────────────────────────────
   Goal: header content edges line up EXACTLY with every section/footer
   content edge at every viewport and every zoom (80–125 %), the language
   dropdown never gets clipped, the row never overflows, and the sticky
   behaviour is reliable.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 15a. UTIL BAR (top brand strip) ──────────────────────────────── */
.util-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  width: 100%;
  /* full-bleed bg + centred content already handled by section 3 padding */
}
/* News & Events page only — nudge the util bar up (body class added in
   page-news-and-events.php). Does not affect any other page. */
body.page-news-and-events .util-bar {
  margin-top: -15px;
}
.util-bar span,
.util-bar .util-links {
  min-width: 0;
}
.util-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}
.util-item {
  min-width: 0;
}
.util-sep {
  opacity: 0.55;
}
.util-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

/* ─── 15b. STICKY NAV (main header) ────────────────────────────────── */
nav {
  display: flex !important;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  /* CRITICAL: nav must NOT clip — the language dropdown and any nav-item
     dropdown rely on this. mobile-responsive.css set `overflow:hidden` here
     which hid the language switcher menu on phones. Forced visible. */
  overflow: visible !important;
  flex-wrap: nowrap !important;
  position: sticky;
  top: 0;
  z-index: 100;
  /* Background must always reach the viewport edge so the sticky shadow
     looks correct on ultra-wide screens. Section 3 already caps the wrapper
     to --site-outer; the bg is whatever main.css sets (white). */
}

/* Brand always on the left, never shrinks past its content */
.brand {
  margin-right: auto;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
}
.brand-txt {
  min-width: 0;
}
.brand-txt .bn,
.brand-txt .bs {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Nav links can shrink horizontally but never wrap to a 2nd row on desktop */
.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  /* allow gap to compress before triggering ham menu */
  gap: clamp(0px, 0.2vw, 4px);
}

/* Nav links text must not overflow */
.nl-a {
  white-space: nowrap;
  min-width: 0;
}

/* CTA, language, hamburger never shrink */
.nav-cta,
.itb-lang,
.ham {
  flex-shrink: 0;
}

/* Language dropdown must be allowed to escape the nav row */
.itb-lang { position: relative; z-index: 110; }
.itb-lang-menu { z-index: 120; }

/* Mobile-side overrides — keep the height ladder consistent with the rest
   of the theme but DO NOT inherit the broken overflow:hidden. */
@media (max-width: 1024px) {
  .util-bar { display: none !important; }
  nav { height: var(--nav-h-tablet); min-height: var(--nav-h-tablet); }

  .bottom-cta,
  .ct-bottom,
  .cta-banner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: center !important;
  }
  .bc-btns,
  .ct-bottom-actions,
  .cta-banner-btns {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .btn-bc-p,
  .btn-bc-s,
  .ct-bottom-btn-p,
  .ct-bottom-btn-s,
  .btn-cta-p,
  .btn-cta-s {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
}
@media (max-width: 768px) {
  nav {
    height: var(--nav-h-mobile) !important;
    min-height: var(--nav-h-mobile) !important;
    overflow: visible !important;
  }
  /* mob-nav drawer sits below the sticky nav */
  .mob-nav {
    top: var(--nav-h-mobile) !important;
    height: calc(100dvh - var(--nav-h-mobile)) !important;
    max-height: calc(100dvh - var(--nav-h-mobile)) !important;
  }
}
@media (max-width: 480px) {
  nav {
    height: var(--nav-h-small) !important;
    min-height: var(--nav-h-small) !important;
  }
  .mob-nav { top: var(--nav-h-small) !important; }
}

@media (max-width: 768px) {
  .util-bar {
    display: none !important;
  }

  .hero-btns {
    align-items: flex-start !important;
  }
  .hero-btns a {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .hero-btns .btn-hero-p,
  .hero-btns .btn-hero-s {
    width: auto !important;
    min-width: 0 !important;
    padding: 5px 12px !important;
    font-size: 10.5px !important;
    min-height: 28px !important;
    line-height: 1.1 !important;
  }

  .bottom-cta,
  .ct-bottom,
  .cta-banner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center !important;
    padding: 28px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 18px !important;
  }
  .bc-h,
  .ct-bottom-h,
  .cta-banner-text h2 {
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
  }
  .bc-sub,
  .ct-bottom-p,
  .cta-banner-text p {
    font-size: 13px !important;
  }
  .bc-btns,
  .ct-bottom-actions,
  .cta-banner-btns {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  .btn-bc-p,
  .btn-bc-s,
  .ct-bottom-btn-p,
  .ct-bottom-btn-s,
  .btn-cta-p,
  .btn-cta-s {
    width: 100% !important;
    justify-content: center !important;
    min-height: 40px !important;
  }

@media (max-width: 1024px) {
  .mob-nav {
    padding: 16px 16px 48px !important;
    gap: 0 !important;
    top: var(--nav-h-tablet) !important;
    height: calc(100dvh - var(--nav-h-tablet)) !important;
    max-height: calc(100dvh - var(--nav-h-tablet)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .mob-nl-a,
  .mob-dd-trigger {
    padding: 10px 12px !important;
    font-size: 13px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
  }
  .mob-dropdown {
    padding: 2px 0 2px 12px !important;
    gap: 0 !important;
  }
  .mob-dropdown a {
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    min-height: 36px !important;
  }
  .mob-cta {
    margin-top: 10px !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 480px) {
  .util-bar {
    padding: 6px 12px !important;
    font-size: 10px;
  }

  .bottom-cta,
  .ct-bottom,
  .cta-banner {
    padding: 22px 14px !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  .bc-btns,
  .ct-bottom-actions,
  .cta-banner-btns {
    max-width: 260px !important;
  }
  .btn-bc-p,
  .btn-bc-s,
  .ct-bottom-btn-p,
  .ct-bottom-btn-s,
  .btn-cta-p,
  .btn-cta-s {
    max-width: 240px !important;
    padding: 7px 10px !important;
    font-size: 0.68rem !important;
    min-height: 30px !important;
  }
  .bc-h,
  .ct-bottom-h,
  .cta-banner-text h2 {
    font-size: 1.3rem !important;
  }
  .bc-sub,
  .ct-bottom-p,
  .cta-banner-text p {
    font-size: 12.5px !important;
  }

  .mob-nav {
    padding: 14px 12px 44px !important;
    top: var(--nav-h-small) !important;
    height: calc(100dvh - var(--nav-h-small)) !important;
    max-height: calc(100dvh - var(--nav-h-small)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .mob-nl-a,
  .mob-dd-trigger {
    padding: 9px 10px !important;
    font-size: 12.5px !important;
    min-height: 38px !important;
  }
  .mob-dropdown a {
    padding: 7px 9px !important;
    font-size: 12px !important;
    min-height: 34px !important;
  }
  .mob-cta {
    padding: 9px 12px !important;
    font-size: 12px !important;
    min-height: 38px !important;
  }
}

/* Hide brand subtitle below 1100px so the nav row stays single-line */
@media (max-width: 1100px) {
  .brand-txt .bs { display: none !important; }
}

/* Mobile nav drawer — never wider than viewport, never overflows */
.mob-nav {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════════════
   FOOTER PRECISION FIX
   ───────────────────────────────────────────────────────────────────────
   Goal: footer columns scale fluidly, brand block never crowds the link
   columns, social row + contact items never overflow, copyright + legal
   links wrap cleanly on narrow viewports — and the whole footer's content
   edges line up with every section above it.
   ═══════════════════════════════════════════════════════════════════════ */

footer {
  display: block;
  width: 100%;
  /* horizontal padding already handled in section 3 */
}

/* The grid that holds brand + 4 link columns */
.footer-grid {
  display: grid;
  width: 100%;
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
  padding-bottom: clamp(24px, 3vw, 50px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(0, 1fr));
  }
  .footer-grid .f-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .footer-grid .f-brand { grid-column: 1 / -1 !important; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* Every footer column gets a min-width:0 escape so long text/links never
   push the column wider than its allotted track. */
.footer-grid > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Brand block — image, name, tagline, socials never overflow */
.f-brand {
  min-width: 0;
}
.f-brand img {
  height: 130px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.f-tagline {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.f-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.f-soc { flex-shrink: 0; }

/* Link columns — links never overflow, never wrap mid-word weirdly */
.f-col {
  min-width: 0;
}
.f-col h5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f-col a,
.f-contact-item a,
.f-contact-item span {
  display: block;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}

/* Footer bottom — copyright + legal links — wraps cleanly */
.footer-bottom {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  width: 100%;
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(16px, 2vw, 24px);
  box-sizing: border-box;
}
.footer-bottom > * {
  min-width: 0;
  max-width: 100%;
}
.footer-bottom p {
  overflow-wrap: anywhere;
  word-break: normal;
}
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.footer-bottom-links a { flex-shrink: 0; }

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ─── 16. SECTION CHILDREN — never exceed their column ─────────────── */
.section > *, .section-alt > *,
.fq-section > *, .fq-section-alt > *,
.ct-section > *,
.ne-section > *,
.ar-section > *,
.pr-section > *, .pr-section-tight > *,
.rc-section > *,
.ol-section > *, .ol-section-alt > *, .ol-section-tight > * {
  max-width: 100%;
}


/* ─── 17. STICKY-STRIP TOP OFFSET (matches sticky nav heights) ─────── */
/* Sticky bars under the sticky nav must align with current nav height. */
.fq-search-strip { top: var(--nav-h-desktop); }
.fq-chips-strip  { top: calc(var(--nav-h-desktop) + 87px); }

@media (max-width: 1024px) {
  .fq-search-strip { top: var(--nav-h-tablet); }
  .fq-chips-strip  { top: calc(var(--nav-h-tablet) + 78px); }
}

@media (max-width: 768px) {
  /* Page-specific inline CSS sets these to `position: static` on mobile —
     don't override that. */
}


/* ─── 18. PER-PAGE BACKGROUND-ALT TINT (preserve existing) ─────────── */
/* The `.xx-section-alt` selectors get the same gutter as `.xx-section`
   from section 3. Just make sure their background tint survives. */
.fq-section-alt, .ct-section-alt, .ne-section-alt,
.ar-section-alt, .pr-section-alt, .rc-section-alt,
.ol-section-alt {
  background: var(--off);
}


/* ─── 19. PRINT — clean container, no oversized backgrounds ────────── */
@media print {
  .util-bar, nav, .mob-nav, .ham,
  .ticker, .bottom-cta, .newsletter,
  .contact-section, footer .f-socials,
  .fq-search-strip, .fq-chips-strip,
  .ar-tabs-strip, .ct-tabs-strip, .ne-tabs-strip,
  .rc-search-strip, .pr-tabs-strip {
    display: none !important;
  }

  body { font-size: 12pt; color: #000; }
  a    { color: #000; text-decoration: underline; }

  .section, .section-alt,
  .fq-section, .ct-section, .ne-section, .ar-section,
  .pr-section, .rc-section, .ol-section, .ol-section-alt {
    padding: 16px 0 !important;
    max-width: 100% !important;
  }

  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}


/* ─── 20. END — single source of truth ─────────────────────────────── */