/* ── PARTNER LOGOS WITH WHITE BACKGROUNDS ──────────────────────────────────
   mban.png, redan.png, family-homes-funds.png have opaque white backgrounds.
   brightness(0)+invert(1) turns everything white → invisible grey box.
   invert(1)+grayscale(1) instead: white bg → black (disappears on dark
   marquee), logo shapes → white/grey — consistent with the transparent logos.
   !important overrides the per-page filter rule. ------------------------- */
.partners__logo img.logo--has-bg {
  filter: invert(1) grayscale(1) !important;
}

/* ── HERO ENTRANCE — initial hidden state ──────────────────────────────────
   ALL hero entrance elements start at opacity:0 so nothing flashes before
   JS/cascade animation fires. Cascade pages: cascade-run class triggers
   agmbFadeUp/agmbFadeIn which animate from 0→1. Non-cascade pages: site.js
   uses gsap.to/fromTo to reveal. Fallback: applyFallback() shows all. ----- */
.hero .h1, .hero .h1--centered,
.hero .hero__lede, .hero .hero__lede--centered,
.hero .hero__viz,
.hero .ctas, .hero .ctas--centered, .hero .hero-ctas,
.hero .hero-stat-bar, .hero .hero__stat-bar, .hero .fact-strip,
.hero .hero__col-calc, .hero .form-shell, .hero .contact-twin,
.hero .hero__squircle {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hero .h1, .hero .h1--centered,
  .hero .hero__lede, .hero .hero__lede--centered,
  .hero .hero__viz,
  .hero .ctas, .hero .ctas--centered, .hero .hero-ctas,
  .hero .hero-stat-bar, .hero .hero__stat-bar, .hero .fact-strip,
  .hero .hero__col-calc, .hero .form-shell, .hero .contact-twin,
  .hero .hero__squircle {
    opacity: 1 !important;
  }
}

/* ── HEADING WORD SPANS (created by line-reveal JS) ───────────────────────
   display:inline-block lets getBoundingClientRect() return the correct
   visual top per word so JS can group them into lines. Natural wrapping
   is preserved — this doesn't change the visual layout of headings. ----- */
.agmb-w { display: inline-block; }

/* ── PAGE TRANSITIONS ─────────────────────────────────────────────────────
   Cross-page: native View Transitions API fade-to-black in Chrome/Edge/Safari.
   html background:#000 is set inline in header.njk so it applies before this
   file loads. ---------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: agmb-vt-out 220ms ease-in both;
}
::view-transition-new(root) {
  animation: agmb-vt-in 360ms 220ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes agmb-vt-out { to { opacity: 0; } }
@keyframes agmb-vt-in  { from { opacity: 0; } to { opacity: 1; } }

/* ── SCROLL REVEAL ─────────────────────────────────────────────────────────
   Initial hidden state. JS (site.js via GSAP ScrollTrigger, or the per-page
   IntersectionObserver) adds .in-view to make the element visible.
   Pages with a stronger per-page rule (body .reveal) override as needed. ----- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.2,0,0,1), transform 0.55s cubic-bezier(0.2,0,0,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ── NAV: hamburger always pinned right ────────────────────────────────────
   Site-wide guarantee — every viewport, every scroll state. */
.nav { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
.nav__hamburger { margin-left: auto !important; }

@media (max-width: 1024px) {
  .nav__hamburger {
    display: block !important;
    position: relative;
    width: 44px !important; height: 44px !important;
    padding: 0; background: transparent; border: 0; cursor: pointer; z-index: 60;
  }
  .nav__hamburger-bar {
    position: absolute; left: 10px; right: 10px; height: 2px;
    background: var(--cream-warm, #FAF3E8); border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease, background-color 0.2s ease;
  }
  .nav__hamburger-bar:nth-child(1) { top: 14px; }
  .nav__hamburger-bar:nth-child(2) { top: 21px; }
  .nav__hamburger-bar:nth-child(3) { top: 28px; }
  .nav__hamburger.is-open .nav__hamburger-bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .nav__hamburger.is-open .nav__hamburger-bar:nth-child(2) { opacity: 0; }
  .nav__hamburger.is-open .nav__hamburger-bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }
  /* When menu is open: pin the X to the top-right of the viewport so it stays
     visible even if the page scroll-bounces or the nav scrolls out of view. */
  .nav__hamburger.is-open {
    position: fixed !important;
    top: 14px !important;
    right: 16px !important;
    z-index: 70 !important;
  }
  .nav .nav__links { display: none !important; }
  .nav--scrolled { margin: 0 12px !important; padding: 10px 16px !important; }

  /* When the mobile drawer is open (z-index:55), the nav (with the X
     hamburger inside) must paint ABOVE it. Per-page nav z-index is
     only 5–50; raise it explicitly so the X stays visible and clickable. */
  .nav { z-index: 60 !important; }

  /* ── LOGO: consistent sizing across all pages on mobile.
     Per-page CSS sometimes overrides .logo__icon with width:44px which
     squashes the wordmark (SVG is wider than tall). Force height-based
     sizing so the wordmark stays readable on every page. ----------------- */
  .logo__icon {
    width: auto !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }
  .logo {
    gap: 10px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
}

/* ── HERO: unify mobile text/CTA positioning across all pages.
   Reference is the contact page (image #24): H1 starts at ~260px from
   top via padding-top:80px, content stacked from the top with a 28px
   gap. Most other pages had justify-content:center which pushed text
   to the middle of a tall hero.
   We only touch text-position properties — NOT min-height. Pages with
   a viz (home, products, mortgages) keep their tall hero so the viz
   has room to display below the text. Contact has min-height:auto
   natively so it stays compact regardless. -------------------------- */
@media (max-width: 768px) {
  .hero,
  .hero--centered {
    padding-top: 80px !important;
    padding-left: clamp(20px, 6vw, 32px) !important;
    padding-right: clamp(20px, 6vw, 32px) !important;
    justify-content: flex-start !important;
  }
  .hero__content,
  .hero__content--centered {
    gap: 28px !important;
    margin: 0 auto !important;
  }
  /* Mortgages page viz has height:88vh hard-coded in its base CSS, which
     makes the building canvas ~700px tall at mobile. Positioned bottom:
     -24px of the hero, it overlaps the H1/lede/CTAs. The page's own
     mobile rule sets aspect-ratio but never overrides height, so aspect
     ratio is ignored. Force height:auto so aspect-ratio governs. */
  .hero__viz--mortgages,
  .hero--centered .hero__viz.hero__viz--mortgages {
    height: auto !important;
  }

  /* Clip any viz that's positioned with negative bottom values so it
     can't bleed into the next section. Mortgages, products all use
     position:absolute viz that hangs below the hero. */
  .hero,
  .hero--centered {
    overflow: hidden !important;
  }

  /* ── STATS CARD: pill/squircle container with 3 columns + dividers ────
     Product pages (commercial, NHF, M-REIF, construction, REIF) all use
     this stat bar. Wrap in a rounded pill with subtle border, vertical
     dividers between cells, value on top + label below per Figma. ----- */
  .hero__stat-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    gap: 0 !important;
    border: 1px solid rgba(250,243,232,0.22) !important;
    border-radius: 18px !important;
    padding: 14px 8px !important;
    margin: 16px auto 0 !important;
    width: fit-content !important;
    max-width: calc(100% - 32px) !important;
  }
  .hero__stat-cell {
    align-items: center !important;
    text-align: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    border-left: 1px solid rgba(250,243,232,0.18) !important;
    border-top: none !important;
    gap: 4px !important;
  }
  .hero__stat-cell:first-child {
    border-left: none !important;
    border-top: none !important;
    padding-top: 0 !important;
  }
  .hero__stat-cell .stat-num,
  .hero__stat-cell .hero__stat-cell__num {
    font-size: clamp(15px, 4vw, 20px) !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }
  .hero__stat-cell .stat-lbl,
  .hero__stat-cell .hero__stat-cell__label {
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
  }
  .hero__stat-sep { display: none !important; }

  /* ── ABOUT HERO SQUIRCLE: edge-to-edge, bottom-cropped by viewport ──
     Default desktop CSS gives it width: calc(100% − clamp(48,8vw,160px))
     + aspect-ratio: 21/9 → tiny landscape band on mobile + huge empty
     black space below before partners. Make it a full-width portrait
     hero image with only the top corners rounded so the bottom can
     extend through the section transition. */
  .hero__squircle {
    width: 100vw !important;
    max-width: 100vw !important;
    /* Break out of hero's horizontal padding to reach viewport edges */
    margin-left: calc(-1 * clamp(20px, 6vw, 32px)) !important;
    margin-right: calc(-1 * clamp(20px, 6vw, 32px)) !important;
    margin-top: 32px !important;
    margin-bottom: 0 !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 0 !important;
  }
  .hero__squircle-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
  }
}

/* ── QA BATCH FIXES (mobile only) ─────────────────────────────────────────
   All rules in @media (max-width:768px). Desktop unchanged. -------------- */

@media (max-width: 768px) {

  /* A — Advisory card: exact width match to footer panel (32px margins each side) */
  .advisory-wrap { padding: 40px 32px !important; }
  .advisory {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 32px 24px !important;
    gap: 24px !important;
    border-radius: 24px !important;
    width: 100% !important;
  }
  .advisory__inner { width: 100% !important; max-width: none !important; }
  .advisory__aside { width: 100% !important; align-items: center !important; }
  .advisory__stat { justify-content: center !important; }
  .advisory__cta {
    align-self: center !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* B — About hero: html-prefixed to beat per-page min-height clamp */
  html .hero--about { min-height: auto !important; padding-bottom: 0 !important; }
  .hero--about + .partners { padding-top: 16px !important; }

  /* C — About offices: centre text + layout on mobile */
  .branches { align-items: center !important; text-align: center !important; gap: 24px !important; }
  .branches__head { text-align: center !important; }
  .branches__head .lede { text-align: center !important; }
  .branches__layout { gap: 16px !important; }

  /* D — Calculator affordability: collapse empty white space */
  .afford-section { padding-top: 40px !important; padding-bottom: 40px !important; }
  .afford-results { min-height: 0 !important; }

  /* E — Calculator results: 2-up grid */
  .afford-results {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .afford-cell {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    padding: 18px 14px !important;
  }
  .afford-cell:last-child { flex: 1 1 100% !important; }

  /* F — M-REIF stats: html-prefixed to beat per-page flex-direction:column */
  html .hero-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-radius: 16px !important;
  }
  html .hero-stat {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    padding: 16px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html .hero-stat__num { font-size: clamp(18px, 4vw, 26px) !important; white-space: nowrap !important; }
  html .hero-stat__label { font-size: 9px !important; letter-spacing: 0.12em !important; }

  /* G — Construction stats: html-prefixed to beat per-page flex-direction:column */
  html .con-stat-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-radius: 16px !important;
  }
  html .con-stat-cell {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    padding: 14px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html .con-stat-num { font-size: clamp(16px, 3.8vw, 24px) !important; white-space: nowrap !important; }
  html .con-stat-label { font-size: 9px !important; letter-spacing: 0.1em !important; }

  /* [Fix H removed] — horizontal CTAs broke home page button text. CTAs
     revert to per-page CSS which stacks them as full-width column. */

  /* I — Product viz: move up ~15px */
  .hero--centered .hero__viz[data-viz] { bottom: -48px !important; }

  /* K — Apply page: form shell full-width */
  .hero--apply { padding-left: 20px !important; padding-right: 20px !important; }
  .form-shell { width: 100% !important; border-radius: 24px !important; }

  /* Community panel art: scale the 88px stat text DOWN for mobile.
     Use html prefix so it beats the per-page 56-64px override.
     em element has its own font: shorthand — must override separately. */
  html .community__panel-art-stat {
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.05 !important;
    margin-top: 12px !important;
  }
  html .community__panel-art-stat em {
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.05 !important;
  }
  html .community__panel-art-cap {
    font-size: 12px !important;
    line-height: 1.45 !important;
    max-width: 160px !important;
  }
  html .community__panel-art { column-gap: 16px !important; padding: 28px !important; }
}

/* ── PRODUCT TILES: 445px height + scaled viz (Figma spec) ───────────────
   At ≤900px the bento rows go column. ≤768px each tile is exactly 445px
   (matching the Figma reference) with the tile-viz filling the remaining
   space after the text/link content. Desktop unchanged. ------------------ */
@media (max-width: 900px) {
  html .bento__top,
  html .bento__bot { align-items: stretch !important; }
  html .tile { min-height: 0 !important; }
  html .tile--flagship { min-height: 0 !important; }
}
@media (max-width: 768px) {
  html .tile {
    width: 100% !important;
    min-height: 445px !important;
    height: auto !important;
    overflow: hidden !important;
  }
  /* Tile-viz: fixed height at mobile so the canvas viz is visible.
     Text content takes ~420px; tile grows to fit viz+content together. */
  html .tile-viz,
  html .tile--flagship .tile-viz {
    height: 200px !important;
    min-height: 200px !important;
    flex: none !important;
    width: 100% !important;
  }
}
@media (max-width: 480px) {
  html .tile-viz,
  html .tile--flagship .tile-viz {
    height: 180px !important;
    min-height: 180px !important;
  }
}

/* ── MORTGAGES HERO VIZ: flow below content, don't overlap text ──────────
   The mortgages viz is position:absolute;bottom:-24px which makes it
   overlap H1/lede/CTAs at mobile. Convert to relative flow so it appears
   below the content stack where there's space. Desktop unchanged. -------- */
@media (max-width: 768px) {
  html .hero__viz--mortgages,
  html .hero--centered .hero__viz.hero__viz--mortgages {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 20px auto 0 !important;
    width: 100% !important;
    transform: none !important;
  }
}

/* ── HOME HERO VIZ: give the container height so canvas renders ──────────
   The .hero__viz on home is position:relative with only abs children →
   collapses to 0px. Explicit height makes the canvas fill the space
   and the particle building renders visibly below the CTAs.
   Excludes [data-viz] (product pages: commercial/nhf/mreif/construction/reif)
   which use their own absolute positioning + aspect-ratio. -------------- */
@media (max-width: 768px) {
  .hero .hero__viz:not(.hero__viz--mortgages):not([data-viz]) {
    height: 55vh !important;
    display: block !important;
  }
}

/* ── PRODUCT HERO VIZ: enforce aspect-ratio sizing at mobile ────────────
   Product pages (commercial, NHF, M-REIF, construction, REIF) have
   absolute-positioned viz with bottom:-48px. Without an explicit top,
   the height should follow aspect-ratio 16/9, but Safari/some engines
   compute based on inset. Force the height explicitly so the building
   silhouette reads at a clean rectangle, not overstretched. ------------- */
@media (max-width: 768px) {
  .hero--centered .hero__viz[data-viz] {
    height: 340px !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    bottom: -40px !important;  /* was -48px — pulled UP 8px */
  }
}
@media (max-width: 480px) {
  .hero--centered .hero__viz[data-viz] {
    height: 280px !important;
    bottom: -40px !important;
  }
}

/* ── FOOTER: unify mobile layout across all pages.
   Most pages have decent footer CSS at ≤1024px but a few (contact, etc.)
   are missing the column-width rule that makes the 4-up nav columns
   stack into a clean 2-up grid. Home page's settings are the reference. */
@media (max-width: 1024px) {
  .footer { padding: 56px 32px !important; }
  .footer__panel { padding: 48px 36px !important; gap: 40px !important; border-radius: 24px !important; }
  .footer__top { flex-direction: column !important; gap: 40px !important; }
  .footer__cols { flex-wrap: wrap !important; gap: 32px 48px !important; }
  .footer__col { width: calc(50% - 24px) !important; }
  .footer__bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .footer__name { font-size: 24px !important; }
  /* Hide the disclosures strip on mobile — long regulatory link list
     stacks awkwardly and bloats vertical space. Available on desktop. */
  .footer__disclosures,
  .footer__rule { display: none !important; }
}
@media (max-width: 480px) {
  .footer { padding: 40px 20px !important; }
  .footer__panel { padding: 32px 22px !important; gap: 28px !important; border-radius: 20px !important; }
  .footer__cols { gap: 24px 20px !important; }
  /* Keep 2-up grid at phone widths — was width:100% which forced 1-up stack */
  .footer__col { width: calc(50% - 10px) !important; }
  /* Slightly smaller list text so 'Commercial Mortgage' fits one line */
  .footer__col li { font-size: 14px !important; line-height: 175% !important; }
  .footer__disclosures { flex-direction: column !important; gap: 10px !important; }
  .footer__disclosures .sep { display: none !important; }
  /* Advisory wrap: tightest phone padding — overrides 768px rule above */
  .advisory-wrap { padding: 16px !important; }
}

/* ── MOBILE DRAWER ─────────────────────────────────────────────────────── */
.mobile-nav {
  position: fixed; inset: 0;
  background: rgba(6,26,46,0.95);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  z-index: 55; opacity: 0; pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; align-items: center; justify-content: center;
}
.mobile-nav.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav__panel {
  display: flex; flex-direction: column; gap: 24px;
  padding: 48px; width: min(100%, 480px); align-items: stretch;
}
.mobile-nav__panel > a {
  font: 500 28px/1.1 'Inter', sans-serif; letter-spacing: -0.025em;
  color: var(--cream-warm, #FAF3E8); text-decoration: none;
  padding: 12px 0; border-bottom: 1px solid rgba(250,243,232,0.10);
  text-align: center;
}
.mobile-nav__panel > .mobile-nav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 24px; padding: 18px 28px;
  background: var(--cream-warm, #FAF3E8); color: var(--navy-deep, #061A2E);
  border-radius: 999px; border: 0;
  font: 500 16px/1 'Inter', sans-serif; letter-spacing: -0.005em; text-align: center;
}

/* ── REDUCED MOTION ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   BREAKPOINT CONTRACT (2026-05-15)
   ──────────────────────────────────────────────────────────────────────────
   Mobile  : ≤ 767px  (phones, all orientations — `@media (max-width: 767px)`)
   Tablet  : 768–1023 (iPad portrait, small laptops — `@media (min-width: 768px) and (max-width: 1023px)`)
   Desktop : ≥ 1024px (`@media (min-width: 1024px)`)
   Desktop visual max-width: 1920px (canvas centers on ultra-wide monitors)

   Legacy 480px rules still in per-page CSS act as fine-grained mobile refinements.

   Desktop visual cap = 1920 visual px (Adewale, 2026-05-15). The site uses a
   2377px design canvas scaled by `body { zoom: 0.8 }` (and 0.6 at ≤1440
   viewport). To cap visual width at 1920, body CSS max-width = 1920 / 0.8 =
   2400px. Gated to `min-width: 1024px` to match the BREAKPOINT CONTRACT
   above. The cap is inert in the 1024–1440 zoom-0.6 range (natural body CSS
   = viewport/0.6, which only reaches 2400 at viewport 1440 — i.e. exactly
   the edge of that range), so it functionally engages only in the zoom-0.8
   regime at viewport > 1920.
   - 1024–1440 (zoom 0.6): natural body ≤ 2400 CSS, cap dormant.
   - 1441–1920 (zoom 0.8): natural body ≤ 2400 CSS, cap dormant.
   - >1920 (zoom 0.8): body caps at 2400 CSS = 1920 visual, auto margins
     center the canvas with side gutters on ultra-wide monitors.

   ── Apple silicon laptop reference (Desktop tier, no special handling) ──
   13″ MBP        1440 × 900   zoom 0.6 — body CSS 2400 (cap edge)
   14″ MBP        1512 × 982   zoom 0.8 — body CSS 1890
   14″ MBP tight  1296 × 841   zoom 0.6 — body CSS 2160
   16″ MBP        1728 × 1117  zoom 0.8 — body CSS 2160
   16″ MBP large  1536 × 992   zoom 0.8 — body CSS 1920

   Note the zoom regime crossover at 1440↔1441: body CSS drops from 2400
   (zoom 0.6) to ~1890 (zoom 0.8). Audit MUST spot-check viewport 1512
   (14″ default) and 1728 (16″ default) for any layout that breaks across
   that inflection. Existing per-page inline rules `@media (max-width:
   1440px) { body { zoom: 0.6 } }` define the crossover.
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  body {
    max-width: 2400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── UNIFIED ADVISORY COMPONENT @ MOBILE ───────────────────────────────────
   Mortgages + 5 product pages were rendering `.advisory` with left-aligned
   content / smaller cards. Home page version is centered with specific
   typography. This single block forces all pages to match the home
   pattern at ≤480px. `html body` prefix beats per-page inline rules. */
@media (max-width: 480px) {
  /* Section wrapping .advisory has inline style="padding:80px" on product pages.
     At mobile that eats ~160px of viewport (leaving advisory at ~230px).
     Override the inline padding using `section:has(.advisory)` selector. */
  html body section:has(> .advisory),
  html body section:has(> .advisory-wrap) {
    padding: 20px !important;
  }
  html body .advisory {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 32px 24px !important;
    gap: 24px !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
  }
  html body .advisory__inner {
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    max-width: 100% !important;
  }
  html body .advisory__cat { text-align: center !important; }
  html body .advisory__title {
    font-size: 30px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
    text-align: center !important;
  }
  html body .advisory__copy {
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }
  html body .advisory__aside {
    align-items: center !important;
    width: 100% !important;
    gap: 16px !important;
  }
  html body .advisory__stat {
    text-align: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  html body .advisory__stat-num {
    font-size: 56px !important;
    line-height: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    width: 100% !important;
    align-items: baseline !important;
    gap: 6px !important;
  }
  html body .advisory__stat-num em { font-size: 64px !important; }
  html body .advisory__stat-sub {
    font-size: 13px !important;
    text-align: center !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .advisory__cta {
    width: 100% !important;
    height: 51px !important;
    border-radius: 999px !important;
    justify-content: center !important;
    font-size: 15px !important;
    padding: 0 28px !important;
  }
}

/* ── BENTO TILE VISIBILITY (≤1024px) ───────────────────────────────────────
   At mobile/tablet, GSAP ScrollTrigger doesn't reliably add `.in-view` to
   `.products.reveal` containers, leaving bento tiles invisible (opacity:0)
   via the `body .reveal:not(.in-view) .stagger > *` rule. Bumping
   specificity with `html` prefix to beat the per-page motion CSS. */
@media (max-width: 1024px) {
  html body .reveal:not(.in-view) .stagger > *,
  html body .products .tile,
  html body .products .tile--flagship,
  html body .products .tile__stack,
  html body .products .bento,
  html body .products .bento__top,
  html body .products .bento__bot,
  html body .bento .tile,
  html body .bento__top .tile,
  html body .bento__bot .tile {
    opacity: 1 !important;
    transform: none !important;
  }
}