/* ============================================================================
   Better Devices — MOBILE SYSTEM  (isolated; must never affect desktop)
   ----------------------------------------------------------------------------
   TWO independent guarantees keep desktop untouched:

     1. <link> gating — functions.php enqueues this file with
        media="screen and (max-width: 900px)". The browser only APPLIES the
        file below 900px. Above 900px the whole file is inert, so nothing here
        can enter the desktop cascade — even a top-level rule.

     2. @media wrapping — every rule below is ALSO wrapped in
        @media (max-width: 900px). So even if this file were ever loaded
        without the media attribute (a mistake), desktop still wouldn't change.

   Because of (1)+(2), rules here may use !important freely and target the
   theme's brand classes without fear of leaking upward.

   Mobile-only DOM (hamburger, drawer) is default-hidden inline in the markup
   (style="display:none") and revealed here. So on desktop, where this file is
   inert, those elements simply stay hidden. Nothing to hide-on-desktop.

   Breakpoint: 900px. Design imagery/type tuned for ~360–430px phones.
   ========================================================================== */

@media (max-width: 900px) {

  /* Never allow the page to scroll sideways on a phone. Scoped to mobile only. */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, iframe, svg, canvas { max-width: 100%; height: auto; }

  /* ── Navigation ───────────────────────────────────────────────────────── */

  /* Collapse the desktop nav + top-bar CTA; show the hamburger instead. */
  #bd-nav .bd-nav-desktop { display: none !important; }
  #bd-nav .bd-cta { display: none !important; }
  #bd-nav > div { padding-left: 20px !important; padding-right: 20px !important; }

  .bd-burger {
    display: inline-flex !important; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px; padding: 0; margin: 0; flex-shrink: 0;
    background: transparent; border: 0; cursor: pointer;
  }
  .bd-burger span {
    display: block; width: 24px; height: 2px; border-radius: 2px; background: #fff;
    transition: transform .3s ease, opacity .2s ease;
  }
  .bd-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .bd-burger.is-open span:nth-child(2) { opacity: 0; }
  .bd-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* When the drawer is open, solidify the bar so it reads over the panel. */
  #bd-nav.bd-nav-open { background: #0B0C0E !important; }

  /* Drawer: full-height slide-down panel under the fixed bar. */
  .bd-drawer {
    position: fixed; left: 0; right: 0; top: 74px; z-index: 199;
    height: calc(100dvh - 74px); overflow-y: auto;
    background: #0B0C0E; border-top: 1px solid rgba(255,255,255,0.08);
    -webkit-overflow-scrolling: touch;
    transform: translateY(-8px); opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
  }
  .bd-drawer.is-open { display: block !important; transform: translateY(0); opacity: 1; }
  .bd-drawer-inner { display: flex; flex-direction: column; padding: 10px 22px 48px; }

  .bd-drawer a, .bd-acc summary {
    font-family: 'Hanken Grotesk', sans-serif; color: #F2F1ED; text-decoration: none;
    font-size: 17px; font-weight: 500; padding: 16px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.08); display: block;
  }
  .bd-drawer a:active { color: #ffbe0b; }

  .bd-acc summary {
    list-style: none; cursor: pointer; font-weight: 600; color: #fff;
    display: flex; align-items: center; justify-content: space-between;
  }
  .bd-acc summary::-webkit-details-marker { display: none; }
  .bd-acc summary::after { content: '+'; color: #ffbe0b; font-size: 22px; line-height: 1; }
  .bd-acc[open] summary::after { content: '\2013'; }
  .bd-acc a { padding-left: 16px; font-size: 15px; font-weight: 400; color: #c9ccd1; }

  .bd-drawer-cta {
    margin-top: 22px; background: #ffbe0b; color: #0B0C0E !important; font-weight: 700;
    text-align: center; border-radius: 6px; border-bottom: 0 !important; padding: 16px !important;
  }

  body.bd-drawer-open { overflow: hidden; }

  /* ── Content layer (shared across pages WITHOUT a dedicated mobile block) ──
     Pages with a purpose-built .bd-m-svc block (feasibility, development,
     testing, investigation, about, careers, …) hide their entire desktop
     markup on mobile (see the swap rule below) and replace it with hand-tuned
     mobile markup — so this generic sweep must never touch them. Scoping every
     rule's ancestor to `main:not(:has(.bd-m-svc))` — rather than excluding the
     block with :not(.bd-m-svc *) on every single rule — means a page either
     gets the generic sweep (unconverted pages) or the dedicated block (this
     sweep is a no-op there), never a mix of both fighting over the same
     inline styles. */

  /* 1. Gutters: every centred section wrapper uses a 40px desktop gutter.
        Collapse it to a 20px phone gutter in one rule. */
  main:not(:has(.bd-m-svc)) [style*="margin:0 auto"],
  main:not(:has(.bd-m-svc)) [style*="margin: 0 auto"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* 2. Vertical rhythm: the design's large section padding is too tall on a
        phone. Reduce the common values (keep horizontal at 20px). */
  main:not(:has(.bd-m-svc)) [style*="padding:160px 40px"], main:not(:has(.bd-m-svc)) [style*="padding:150px 40px"],
  main:not(:has(.bd-m-svc)) [style*="padding:140px 40px"], main:not(:has(.bd-m-svc)) [style*="padding:130px 40px"],
  main:not(:has(.bd-m-svc)) [style*="padding:120px 40px"], main:not(:has(.bd-m-svc)) [style*="padding:112px 40px"],
  main:not(:has(.bd-m-svc)) [style*="padding:104px 40px"], main:not(:has(.bd-m-svc)) [style*="padding:100px 40px"],
  main:not(:has(.bd-m-svc)) [style*="padding:96px 40px"],  main:not(:has(.bd-m-svc)) [style*="padding:84px 40px"],
  main:not(:has(.bd-m-svc)) [style*="padding:80px 40px"],  main:not(:has(.bd-m-svc)) [style*="padding:72px 40px"],
  main:not(:has(.bd-m-svc)) [style*="padding:60px 40px"] {
    padding-top: 60px !important; padding-bottom: 60px !important;
    padding-left: 20px !important; padding-right: 20px !important;
  }

  /* 2b. Large UNIFORM paddings (cards/panels: padding:48px / 56px …) nest and
        squeeze content into a sliver on a phone. Shrink them to a tight card pad.
        Both spacings covered. */
  main:not(:has(.bd-m-svc)) [style*="padding:40px"], main:not(:has(.bd-m-svc)) [style*="padding: 40px"],
  main:not(:has(.bd-m-svc)) [style*="padding:44px"], main:not(:has(.bd-m-svc)) [style*="padding: 44px"],
  main:not(:has(.bd-m-svc)) [style*="padding:48px"], main:not(:has(.bd-m-svc)) [style*="padding: 48px"],
  main:not(:has(.bd-m-svc)) [style*="padding:54px"], main:not(:has(.bd-m-svc)) [style*="padding: 54px"],
  main:not(:has(.bd-m-svc)) [style*="padding:56px"], main:not(:has(.bd-m-svc)) [style*="padding: 56px"],
  main:not(:has(.bd-m-svc)) [style*="padding:60px"], main:not(:has(.bd-m-svc)) [style*="padding: 60px"],
  main:not(:has(.bd-m-svc)) [style*="padding:64px"], main:not(:has(.bd-m-svc)) [style*="padding: 64px"],
  main:not(:has(.bd-m-svc)) [style*="padding:72px"], main:not(:has(.bd-m-svc)) [style*="padding: 72px"] { padding: 22px !important; }

  /* 3. Never let an explicitly-sized box exceed the viewport. Caps fixed pixel
        widths (width:570px etc.) at 100% without having to enumerate them. */
  main:not(:has(.bd-m-svc)) [style*="width:"] { max-width: 100% !important; }

  /* 4. Stack multi-column inline grids into a single column. Covers fraction,
        repeat(), minmax(), and the STAGE|arrow|SERVICE (1fr 72px 1fr) rows. */
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:1fr 1fr"],
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:repeat(2"],
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:repeat(3"],
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:repeat(4"],
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:minmax"],
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:0."],
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:1."],
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:2."],
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:1fr 2fr"],
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:2fr 1fr"],
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:1fr 72px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Drop the middle arrow cell of the STAGE|arrow|SERVICE rows once stacked. */
  main:not(:has(.bd-m-svc)) [style*="grid-template-columns:1fr 72px 1fr"] > *:nth-child(2) { display: none !important; }

  /* 5. Scale the oversized display type down to fit a phone column.
        Headings are capped STRUCTURALLY (h1/h2/h3) so it works regardless of
        how the inline font-size is formatted. Non-heading display numbers are
        matched by value, allowing for both "font-size:Npx" and "font-size: Npx"
        (the source mixes both spacings). */
  /* Exclude the dedicated mobile blocks (.bd-m-svc) — they carry exact design
     font-sizes inline and should not be re-capped by these structural rules. */
  main h1:not(.bd-m-svc *) { font-size: clamp(38px, 12vw, 56px) !important; line-height: 1.04 !important; }
  main h2:not(.bd-m-svc *) { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.1 !important; }
  main h3:not(.bd-m-svc *) { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.15 !important; }

  /* Big non-heading display type (giant stat numbers, hero-style spans). */
  main:not(:has(.bd-m-svc)) [style*="font-size:90px"], main:not(:has(.bd-m-svc)) [style*="font-size: 90px"],
  main:not(:has(.bd-m-svc)) [style*="font-size:80px"], main:not(:has(.bd-m-svc)) [style*="font-size: 80px"],
  main:not(:has(.bd-m-svc)) [style*="font-size:72px"], main:not(:has(.bd-m-svc)) [style*="font-size: 72px"],
  main:not(:has(.bd-m-svc)) [style*="font-size:64px"], main:not(:has(.bd-m-svc)) [style*="font-size: 64px"],
  main:not(:has(.bd-m-svc)) [style*="font-size:60px"], main:not(:has(.bd-m-svc)) [style*="font-size: 60px"],
  main:not(:has(.bd-m-svc)) [style*="font-size:56px"], main:not(:has(.bd-m-svc)) [style*="font-size: 56px"],
  main:not(:has(.bd-m-svc)) [style*="font-size:55px"], main:not(:has(.bd-m-svc)) [style*="font-size: 55px"],
  main:not(:has(.bd-m-svc)) [style*="font-size:48px"], main:not(:has(.bd-m-svc)) [style*="font-size: 48px"] { font-size: clamp(32px, 9vw, 46px) !important; line-height: 1.06 !important; }
  main:not(:has(.bd-m-svc)) [style*="font-size:230px"], main:not(:has(.bd-m-svc)) [style*="font-size: 230px"],
  main:not(:has(.bd-m-svc)) [style*="font-size:200px"], main:not(:has(.bd-m-svc)) [style*="font-size: 200px"],
  main:not(:has(.bd-m-svc)) [style*="font-size:150px"], main:not(:has(.bd-m-svc)) [style*="font-size: 150px"],
  main:not(:has(.bd-m-svc)) [style*="font-size:120px"], main:not(:has(.bd-m-svc)) [style*="font-size: 120px"] { font-size: 84px !important; line-height: 1 !important; }

  /* ── Homepage hero: bottom-aligned, design sizing (matches design) ─────── */
  /* Desktop centres the hero copy in a 2-col grid; the mobile design bottom-
     aligns a single column with a 48px headline. The section itself is forced
     to fill the screen (desktop's 92vh falls short once mobile browser chrome
     is accounted for), and the play/pause toggle is hidden — a video-scrubbing
     control adds little on a phone-sized hero and was crowding the corner. */
  /* svh (smallest viewport height), not dvh — guarantees the hero (and its
     bottom-aligned CTA) fits even when the browser chrome is fully expanded,
     rather than sizing to the larger, chrome-collapsed viewport and risking a
     cut-off CTA when the address bar is showing.
     The extra "- 24px" corrects a small, consistently-reproduced gap between
     the top of the page and its first block (measured identically across
     every template, so it isn't page content — some fixed chrome/inset in the
     rendering environment) that otherwise pushes the section's bottom edge
     that far past the visible fold. */
  main > section:first-child { min-height: calc(100vh - 24px) !important; min-height: calc(100svh - 24px) !important; }
  main > section:first-child > div { min-height: calc(100vh - 24px) !important; min-height: calc(100svh - 24px) !important; }
  main > section:first-child [style*="align-items:center"] { align-items: flex-end !important; }
  #bd-playtoggle { display: none !important; }
  /* Also tighten the copy block itself a little, both to "move the text up"
     per feedback and as a safety margin on real devices where the inset above
     may differ. Selectors match (or exceed) the specificity of the generic
     content-layer sweep rules they need to beat — a plain class/attribute
     selector loses to
     `main:not(:has(.bd-m-svc)) […]`, which counts as two class-level selectors. */
  main:not(:has(.bd-m-svc)) h1.hi { font-size: 42px !important; line-height: 1.0 !important; }
  main:not(:has(.bd-m-svc)) .bd-hero-grid { padding: 16px 20px 20px !important; }
  .bd-hero-grid p { line-height: 1.5 !important; }
  main #bd-explore { margin-top: 18px !important; }

  /* ── Homepage testimonials: shrink the pull-quote for a phone column ────── */
  /* Desktop's 25px quote reads oversized once it's a single narrow column
     instead of sharing a 2-col row with the heading; min-height:140px (set to
     stop desktop's layout jumping between shorter/longer quotes) just adds
     empty space here since mobile has nothing beside it to line up with. */
  #bd-quote-text { font-size: 19px !important; line-height: 1.45 !important; min-height: 0 !important; }

  /* ── Homepage services: de-pinned vertical card stack (matches design) ──── */
  /* The desktop scroll-film pins and cross-fades 4 cards over a device animation.
     Per the Homepage Mobile design, present the same 4 cards (with their service
     item lists) as a simple vertical stack on the light services background. */
  #services { height: auto !important; min-height: 0 !important; }
  #services > div { position: static !important; height: auto !important; min-height: 0 !important; display: block !important; padding: 52px 0 !important; }
  /* Undo the desktop heading-overlap trick and add a gap before the first card. */
  #services [style*="margin-bottom:-105px"] { margin-bottom: 28px !important; padding-right: 0 !important; }
  #services .bd-film-row { flex-direction: column !important; max-width: none !important; margin: 0 !important; gap: 16px !important; align-items: stretch !important; flex-grow: 0 !important; }
  #services .bd-film-row > div:first-child { display: none !important; }   /* device-assembly animation column */
  #services .bd-film-row > div:last-child {
    position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important; gap: 16px !important; top: 0 !important;
  }
  #services [data-ref^="card"] {
    position: static !important; inset: auto !important; top: 0 !important; left: 0 !important;
    opacity: 1 !important; transform: none !important; width: 100% !important; height: auto !important;
    min-height: 0 !important; margin: 0 !important; pointer-events: auto !important;
    padding: 28px 24px !important; border-radius: 20px !important;
  }
  #services .bd-film-nav { display: none !important; }

  /* ── Insights: horizontal poster carousel (matches design) ─────────────── */
  main .bd-live-insights {
    display: flex !important; grid-template-columns: none !important;
    flex-direction: row !important; flex-wrap: nowrap !important;
    gap: 14px !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    margin-left: -20px !important; margin-right: -20px !important; padding: 4px 20px 10px !important;
  }
  main .bd-live-insights > * {
    scroll-snap-align: start; flex: 0 0 262px !important; width: 262px !important;
    max-width: 262px !important; margin: 0 !important;
  }
  main .bd-live-insights .icard,
  main .bd-live-insights .bd-ins-card { min-height: 350px !important; height: 350px !important; }
  main .bd-live-insights::-webkit-scrollbar { height: 0; }

  /* ── Case Studies: vertical image-top card stack (matches design) ──────── */
  /* Drop the desktop chrome that breaks on a phone: the outer rounded/bordered
     box and the "pill" capsule around the heading (the 2-line mobile heading
     overflowed the pill's border). The design uses a plain heading on black. */
  main .reveal:has(.bd-cases-grid) { border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: none !important; }
  main .reveal:has(.bd-cases-grid) [style*="border-radius:999px"] { border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
  main .reveal:has(.bd-cases-grid) [style*="font-size:32px"] { font-size: 28px !important; }

  main .bd-cases-grid { display: flex !important; grid-template-columns: none !important; flex-direction: column !important; gap: 16px !important; margin: 28px 0 0 !important; }
  main .bd-cases-grid > * { width: 100% !important; max-width: 100% !important; margin: 0 !important; grid-column: auto !important; }
  main .bd-cases-grid .icard { min-height: 0 !important; }
  /* Ensure the case-study image panels keep height when stacked. */
  main .bd-cases-grid .icard > div[style*="radial-gradient"],
  main .bd-cases-grid .icard > div:has(> img) { min-height: 176px !important; }
  /* The featured (first) card is text|image on desktop; put its image on top to
     match the design's image-first case cards. */
  main .bd-cases-grid .icard[style*="grid-template-columns:1fr 1fr"] > div:last-child { order: -1 !important; }

  /* ── Homepage: "Build the next big thing" CTA scroll-reveal ────────────── */
  /* Desktop pins this and reveals the headline + button over a tall scroll
     track. On mobile, de-pin and show everything at once. */
  /* TODO(mobile CTA animation): de-pinned, so home.js's scroll-progress reveal
     (ctaReveal, which measures position along the tall 230vh pinned track) has
     no track left to measure. It was replaced with a scroll-into-view fade-up
     via IntersectionObserver in mobile.js, but that reveal isn't firing yet
     (still under investigation) — reverted to "always visible" here so the
     copy is never stuck invisible. Revisit the observer wiring before re-
     enabling the animated version. */
  #cta-track { height: auto !important; min-height: 0 !important; }
  #cta-track > div { position: static !important; height: auto !important; min-height: 60vh !important; overflow: visible !important; padding: 72px 0 !important; }
  #cta-headline { opacity: 1 !important; transform: none !important; }
  #cta-btnwrap { max-height: none !important; opacity: 1 !important; transform: none !important; overflow: visible !important; }

  /* ── Service pages (feasibility / development / testing / investigation) ── */

  /* Accordion header rows use grids like "120px minmax(0,1fr) 300px 40px" that
     don't start with a token my grid sweep matches. Catch ANY grid that uses
     minmax() and stack it; hide the oversized outlined index number. */
  main [style*="minmax"] { grid-template-columns: 1fr !important; gap: 6px !important; }
  main [class*="svc-num"] { display: none !important; }

  /* Horizontal lifecycle timelines / sticky stage navigators are desktop-only
     devices that overflow on a phone. The accordion below already lists every
     service, so hide the timeline chrome. Covers all four page prefixes. */
  main [class*="stagelabel"] { display: none !important; }
  /* Hide the desktop central vertical connector line in the use-case timeline
     (it runs down the middle once the 3-col stage rows stack). */
  main section:has([class*="uc-stage"]) [style*="left:50%"][style*="width:2px"] { display: none !important; }
  main [id*="-tl-"], main [class*="-tl-"] { display: none !important; }
  main div:has(> div > [class*="stagelabel"]) { display: none !important; }
  /* Also hide the sticky wrapper around the timeline (its padding/border left a
     gap once the timeline inside was hidden). Covers stagelabel + stagelink. */
  main .reveal:has([class*="stagelabel"]),
  main .reveal:has([class*="stagelink"]) { display: none !important; }

  /* ── Feasibility: swap the desktop sections for the dedicated mobile layout ─ */
  /* On the feasibility page (main contains .bd-m-svc) hide every desktop section
     except the final CTA (#cta-track), and show the mobile layout instead. The
     mobile layout reproduces the Feasibility Mobile design faithfully. */
  main:has(.bd-m-svc) > section { display: none !important; }
  main:has(.bd-m-svc) > #cta-track { display: block !important; }
  .bd-m-svc { display: block !important; }
  /* The design relies on a global a{text-decoration:none}; the WP theme has no
     such rule, so links in this block would otherwise show browser underlines
     (visible under the button labels). Reset it here. */
  .bd-m-svc a { text-decoration: none; }

  /* Every section fills at least one screen, so the layout has room to breathe
     and each section reads as its own "page" while scrolling — except the cost-
     calculator CTA ("Price the build before it begins."), which stays compact.
     100vh first as a fallback for browsers without dvh support. */
  .bd-m-svc .bmf-fill { min-height: 100vh; min-height: 100dvh; }
  /* Sections shorter than one screen (not the hero, which manages its own
     bottom-aligned layout) centre their content vertically instead of leaving
     it stranded at the top with empty space below. Sections whose content is
     already taller than the viewport (services, uncertainty, FAQ) are
     unaffected — centering is a no-op once content exceeds the min-height. */
  .bd-m-svc section.bmf-fill:not(.bmf-hero) {
    display: flex; flex-direction: column; justify-content: center;
  }

  /* Services accordion (mobile): open/closed states. */
  .bd-m-svc .bmf-acc-num { color: rgba(255,255,255,0.28); transition: color .35s; }
  .bd-m-svc .bmf-acc.is-open .bmf-acc-num { color: #ffbe0b; }
  .bd-m-svc .bmf-acc.is-open { background: rgba(255,255,255,0.03); }
  .bd-m-svc .bmf-acc.is-open .bmf-acc-body { grid-template-rows: 1fr !important; }
  .bd-m-svc .bmf-acc-v { transition: transform .35s; }
  .bd-m-svc .bmf-acc.is-open .bmf-acc-v { transform: translate(-50%,-50%) scaleY(0) !important; }

  /* FAQ accordion (mobile): open/closed states. */
  .bd-m-svc .bmf-faq.is-open .bmf-faq-body { grid-template-rows: 1fr !important; }
  .bd-m-svc .bmf-faq-v { transition: transform .3s; }
  .bd-m-svc .bmf-faq.is-open .bmf-faq-v { transform: translate(-50%,-50%) scaleY(0) !important; }

  /* Insights rail inside the mobile layout: poster cards + hidden scrollbar.
     Override the generic .bd-live-insights edge-bleed (this rail's section has no
     gutter of its own, so keep its 22px inset instead of pulling out -20px). */
  .bd-m-svc .bmf-insights { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-left: 0 !important; margin-right: 0 !important; padding: 4px 22px 8px !important; }
  .bd-m-svc .bmf-insights > * { scroll-snap-align: start; flex: 0 0 262px !important; width: 262px !important; max-width: 262px !important; margin: 0 !important; }
  .bd-m-svc .bmf-insights .icard, .bd-m-svc .bmf-insights .bd-ins-card { min-height: 342px !important; height: 342px !important; }
  .bd-m-svc .bmf-insights::-webkit-scrollbar { height: 0; }

  /* ── Footer (kept as the site's own, made responsive) ──────────────────── */
  /* The content layer above is scoped to `main`; the footer lives outside it,
     so it needs its own stacking pass. The footer holds the contact form,
     newsletter, and link columns as multi-column grids that must collapse. */
  .bd-footer [style*="max-width:1280px"] {
    padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important;
  }
  /* Collapse every footer grid to a single column … */
  .bd-footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* … except the bottom link block, which stays 2-up for density. */
  .bd-footer [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 22px 20px !important; }
  /* Tighten the large desktop rhythm between footer blocks. */
  .bd-footer [style*="margin-top:120px"] { margin-top: 56px !important; }
  .bd-footer [style*="margin-top:64px"] { margin-top: 40px !important; }
  .bd-footer [style*="margin-top:56px"] { margin-top: 40px !important; }
  /* Contact card + image panel: shrink desktop padding, cap the image height. */
  .bd-footer [style*="padding:48px"] { padding: 26px 22px !important; }
  .bd-footer [style*="min-height:440px"] { min-height: 300px !important; }
  .bd-footer [style*="padding:60px 34px 32px"] { padding: 40px 22px 26px !important; }
  /* Never let a footer field/box exceed the viewport. */
  .bd-footer [style*="width:"], .bd-footer input, .bd-footer textarea { max-width: 100% !important; }
  /* Scale the footer's big heading. */
  .bd-footer h2 { font-size: 32px !important; line-height: 1.05 !important; }

}