/* boutique-system.css — niche-neutral hub-and-spoke boutique layer
 * ================================================================
 * Structure + interaction for the editorial boutique template (homepage
 * sections, immersive <dialog> overlays, scroll-snap carousels, sticky mobile
 * bottom bar, IntersectionObserver reveal states, config-driven image slots).
 *
 * Layers ON TOP of funnel-system.css — reuses its tokens (--phi, --sp*, --accent,
 * --line, --line-gold, --card, --text, --muted, --serif, --sans). Adds only NEW
 * class namespaces (.b-*, .overlay, .reveal) so there is zero collision with the
 * funnel shell. A niche skin (e.g. wedding.css) only changes palette + motifs.
 *
 * No ASCII/emoji art — all graphics CSS/SVG. Image slots use the
 * var(--img-*, <svg fallback>) pattern: empty config ⇒ engineered SVG renders.
 * Device-agnostic: golden-ratio desktop → single-column < 880px, swipe carousels
 * + sticky action bar on touch. code-style.md: class-based state only.
 */

/* ── One-page nav anchor scroll (shared across every face — fixes the anchor
   landing under the ~60px sticky topbar; benign/beneficial everywhere) ───── */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.b-sec, #apply { scroll-margin-top: 76px; }

/* ── Section scaffold (rule-of-thirds rhythm) ───────────────────────────── */
.b-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp4); }
.b-sec { max-width: var(--maxw); margin: 0 auto; padding: var(--sp6) var(--sp4); }
.b-sec--tight { padding-top: var(--sp5); padding-bottom: var(--sp5); }
.b-sec-head { max-width: 34em; margin: 0 auto var(--sp5); text-align: center; }
.b-eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp2); }
.b-sec-head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 5vw, 46px); line-height: 1.08; margin-bottom: var(--sp2); }
.b-sec-head p { color: var(--muted); font-size: 16px; }
.b-rule { width: 56px; height: 1px; background: var(--line-gold); margin: var(--sp2) auto 0; }

/* ── Hero image-slot art (editorial gown-in-arch, config-overridable) ───── */
.b-hero-art {
  position: relative; aspect-ratio: 3 / 4; width: 100%; max-width: 420px; margin: 0 auto;
  border-radius: 240px 240px 18px 18px; overflow: hidden;
  background:
    var(--img-hero, none),
    radial-gradient(120% 80% at 50% 0%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, var(--card-hi), var(--card));
  background-size: cover; background-position: center;
  border: 1px solid var(--line-gold);
  box-shadow: 0 30px 70px color-mix(in srgb, var(--accent) 16%, transparent);
}
.b-hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* No configured hero image — collapse to a single centered column instead of
   rendering an empty gradient box next to the copy. */
.hero.hero--noart { grid-template-columns: 1fr; max-width: 42em; }
/* When a real image is slotted, hide the SVG fallback gracefully. */
body[style*="--img-hero"] .b-hero-art .b-art-fallback { opacity: 0; }

/* ── Value props (rule-of-thirds 3-col) ─────────────────────────────────── */
.b-vprops { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp3); }
.b-vprop {
  border: 1px solid var(--line); border-radius: 16px; padding: var(--sp4);
  background: var(--card); text-align: center; transition: border-color .2s, transform .14s, box-shadow .2s;
}
.b-vprop:hover { border-color: var(--line-gold); transform: translateY(-2px); box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 10%, transparent); }
.b-vprop .ico { width: 30px; height: 30px; color: var(--accent); margin: 0 auto var(--sp2); display: block; }
.b-vprop .stat { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--text); }
.b-vprop .lab { font-size: 14px; font-weight: 600; letter-spacing: .02em; margin-top: 6px; }
.b-vprop .note { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ── Designer / brand row (hairline-divided, scroll-snap on touch) ───────── */
.b-designers {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.b-designer {
  flex: 1 1 auto; min-width: 0; text-align: center; padding: var(--sp3) var(--sp4);
  font-family: var(--serif); font-size: clamp(18px, 2.4vw, 24px); color: var(--text);
  background: transparent; border: 0; border-left: 1px solid var(--line); cursor: pointer;
  transition: color .2s, background .2s; white-space: nowrap;
}
.b-designer:first-child { border-left: 0; }
.b-designer:hover { color: var(--accent); background: var(--accent-soft); }
.b-designer .sub { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }

/* ── Collection gallery (cards w/ wishlist heart + overlay trigger) ──────── */
.b-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp3); }
.b-gcard {
  position: relative; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: var(--card); cursor: pointer; transition: border-color .2s, transform .16s, box-shadow .2s;
}
.b-gcard:hover { transform: translateY(-3px); border-color: var(--line-gold); box-shadow: 0 22px 50px color-mix(in srgb, var(--accent) 14%, transparent); }
.b-gart {
  position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden;
  background:
    var(--img-card, none),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
  background-size: cover; background-position: center;
}
.b-gart svg.b-gown { width: 54%; height: 82%; filter: drop-shadow(0 8px 16px rgba(0,0,0,.18)); }
.b-gart img { width: 100%; height: 100%; object-fit: cover; }
.b-gmeta { padding: var(--sp3); }
.b-gmeta .d { font-family: var(--serif); font-size: 21px; line-height: 1.1; }
.b-gmeta .l { font-size: 12px; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.b-gmeta .sig { font-size: 13px; color: var(--muted); margin-top: 8px; }
.b-gsw { display: flex; gap: 5px; margin-top: var(--sp2); }
.b-gsw span { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); }
.b-open { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: var(--sp2); display: inline-flex; align-items: center; gap: 6px; }
.b-open svg { width: 13px; height: 13px; }

/* Wishlist heart — keyboard reachable, top-layer of card. */
.b-heart {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; z-index: 2;
  display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--card-hi) 70%, transparent);
  border: 1px solid var(--line); color: var(--muted);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: color .2s, transform .18s, border-color .2s, background .2s;
}
.b-heart svg { width: 18px; height: 18px; pointer-events: none; }
.b-heart:hover { color: var(--accent); border-color: var(--line-gold); }
.b-heart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.b-heart.saved { color: var(--accent); border-color: var(--accent); transform: scale(1.05); }
.b-heart.saved svg path { fill: var(--accent); }

/* ── Editorial feature split (services / value) ─────────────────────────── */
.b-split { display: grid; grid-template-columns: var(--phi, 1.618)fr 1fr; gap: var(--sp5); align-items: center; }
.b-split.rev { grid-template-columns: 1fr var(--phi, 1.618)fr; }
.b-split.rev .b-split-art { order: -1; }
/* No configured services image — collapse to single column (no empty box). */
.b-split.b-split--noart { grid-template-columns: 1fr; max-width: 42em; margin: 0 auto; }
.b-split h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin-bottom: var(--sp2); }
.b-split p { color: var(--muted); margin-bottom: var(--sp3); }
.b-points { list-style: none; margin: 0 0 var(--sp4); padding: 0; }
.b-points li { position: relative; padding-left: 30px; margin-bottom: var(--sp2); color: var(--text); }
.b-points li svg { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; color: var(--accent); }
.b-split-art {
  position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line-gold);
  /* Engineered CSS visual so the panel is never blank even with no config image:
     accent glows + a hairline grid over a card gradient. --img-services overrides. */
  background:
    var(--img-services, none),
    radial-gradient(62% 58% at 74% 26%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    radial-gradient(54% 54% at 20% 84%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 66%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(135deg, var(--card-hi), var(--card));
  background-size: cover, auto, auto, 32px 32px, 32px 32px, cover;
  background-position: center;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Centered lens/orb focal mark (CSS only — no ASCII/emoji art). */
.b-split-art::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46%; aspect-ratio: 1; border-radius: 999px; pointer-events: none;
  border: 1px solid var(--line-gold);
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 8%, transparent),
              inset 0 0 46px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* When a real image is slotted, drop the engineered focal mark. */
body[style*="--img-services"] .b-split-art::after { display: none; }
.b-split-art svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.b-split-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* ── Brand story (centered, generous whitespace) ────────────────────────── */
.b-story { max-width: 40em; margin: 0 auto; text-align: center; }
.b-story h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.12; margin-bottom: var(--sp3); }
.b-story p { color: var(--muted); font-size: 17px; }

/* ── Testimonials ───────────────────────────────────────────────────────── */
.b-testi-agg { text-align: center; margin-bottom: var(--sp5); }
.b-stars { display: inline-flex; gap: 3px; color: var(--accent); }
.b-stars svg { width: 18px; height: 18px; }
.b-testi-agg .n { font-family: var(--serif); font-size: 28px; margin-left: var(--sp1); }
.b-testi-agg .c { color: var(--muted); font-size: 14px; display: block; margin-top: 4px; }
.b-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp3); }
.b-quote {
  border: 1px solid var(--line); border-left: 2px solid var(--line-gold); border-radius: 14px;
  padding: var(--sp4); background: var(--card);
}
.b-quote p { font-family: var(--serif); font-size: 19px; line-height: 1.4; font-style: italic; color: var(--text); margin-bottom: var(--sp2); }
.b-quote .who { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* ── FAQ / progressive disclosure ───────────────────────────────────────── */
.b-faq { max-width: 40em; margin: 0 auto; }
.b-faq details {
  border-bottom: 1px solid var(--line); padding: var(--sp3) 0;
}
.b-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp2);
  cursor: pointer; list-style: none; font-family: var(--serif); font-size: 20px; color: var(--text);
}
.b-faq summary::-webkit-details-marker { display: none; }
.b-faq summary .pm { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; transition: transform .25s; }
.b-faq details[open] summary .pm { transform: rotate(45deg); }
.b-faq .a { color: var(--muted); padding-top: var(--sp2); max-width: 36em; }

/* ── Secondary CTA band ─────────────────────────────────────────────────── */
.b-cta-band {
  max-width: var(--maxw); margin: 0 auto var(--sp6); padding: var(--sp6) var(--sp4);
  text-align: center; border: 1px solid var(--line-gold); border-radius: 24px;
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.b-cta-band h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4.4vw, 44px); margin-bottom: var(--sp2); }
.b-cta-band p { color: var(--muted); margin-bottom: var(--sp4); }

/* ── Multi-column footer ────────────────────────────────────────────────── */
.b-foot {
  border-top: 1px solid var(--line); margin-top: var(--sp5);
}
.b-foot-grid {
  max-width: var(--maxw); margin: 0 auto; padding: var(--sp5) var(--sp4) var(--sp4);
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp4);
}
.b-foot-grid h4 { font-family: var(--serif); font-size: 21px; margin-bottom: var(--sp2); }
.b-foot-grid .col-h { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp2); }
.b-foot-grid p, .b-foot-grid a { color: var(--muted); font-size: 14px; text-decoration: none; display: block; margin-bottom: 7px; }
.b-foot-grid a:hover { color: var(--accent); }
.b-foot-base { text-align: center; padding: var(--sp3) var(--sp4); border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; }
.b-foot-base a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line-gold); }
.b-foot-base a:hover { color: var(--accent); }

/* ── Topbar additions (nav anchors + vault chip) ────────────────────────── */
.b-nav { display: flex; align-items: center; gap: var(--sp3); }
.b-nav a { color: var(--muted); font-size: 13px; letter-spacing: .04em; text-decoration: none; transition: color .2s; }
.b-nav a:hover { color: var(--accent); }
.b-vault-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12px; color: var(--text); padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-gold); background: transparent; transition: background .2s, color .2s;
}
.b-vault-chip:hover { background: var(--accent-soft); color: var(--accent); }
.b-vault-chip svg { width: 15px; height: 15px; color: var(--accent); }
.b-vault-chip .vn { font-variant-numeric: tabular-nums; font-weight: 600; }
.b-vault-chip[hidden] { display: none; }

/* ── Immersive overlay (<dialog>) — app-like full-screen sub-view ───────── */
.overlay {
  width: min(960px, 100vw); max-width: 100vw; max-height: 100vh; height: auto;
  margin: auto; padding: 0; border: 0; border-radius: 20px; overflow: hidden;
  background: var(--bg); color: var(--text);
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
}
.overlay::backdrop { background: rgba(8, 6, 10, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* GPU-accelerated fade/slide — only transform + opacity on the paint path. */
.overlay[open] { animation: overlay-in .32s cubic-bezier(.2,.7,.2,1); }
@keyframes overlay-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.overlay-scroll { max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.overlay-hero {
  position: relative; padding: var(--sp6) var(--sp5) var(--sp5); display: grid;
  grid-template-columns: 1fr 1fr; gap: var(--sp5); align-items: center;
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.overlay-hero .eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp2); }
.overlay-hero h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin-bottom: var(--sp2); }
.overlay-hero .line { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--accent); margin-bottom: var(--sp3); }
.overlay-hero p { color: var(--muted); }
.overlay-art { position: relative; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-gold); display: grid; place-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent); }
.overlay-art svg.b-gown { width: 56%; height: 84%; filter: drop-shadow(0 10px 20px rgba(0,0,0,.2)); }
.overlay-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.overlay-body { padding: 0 var(--sp5) var(--sp5); }
.overlay-actions { display: flex; flex-wrap: wrap; gap: var(--sp2); padding: var(--sp4) var(--sp5) var(--sp6); }
.overlay-close {
  position: absolute; top: var(--sp3); right: var(--sp3); z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card-hi); color: var(--text);
  transition: color .2s, border-color .2s;
}
.overlay-close:hover { color: var(--accent); border-color: var(--line-gold); }
.overlay-close svg { width: 18px; height: 18px; }

/* ── Process band (numbered journey; connector rule) ────────────────────── */
.b-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp3); position: relative; }
.b-step {
  position: relative; border: 1px solid var(--line); border-radius: 16px; padding: var(--sp4) var(--sp3);
  background: var(--card); transition: border-color .2s, transform .14s, box-shadow .2s;
}
.b-step:hover { border-color: var(--line-gold); transform: translateY(-2px); box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 10%, transparent); }
.b-step-n {
  width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: var(--sp2);
  border-radius: 999px; border: 1px solid var(--line-gold); background: var(--accent-soft);
  color: var(--accent); font-family: var(--serif); font-size: 20px; font-variant-numeric: tabular-nums;
}
.b-step h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.1; margin-bottom: 6px; color: var(--text); }
.b-step p { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ── Outcomes / ROI band (stat grid) ────────────────────────────────────── */
.b-outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp3); }
.b-metric {
  border: 1px solid var(--line); border-radius: 16px; padding: var(--sp4) var(--sp3);
  background: var(--card); text-align: center; transition: border-color .2s, transform .14s, box-shadow .2s;
}
.b-metric:hover { border-color: var(--line-gold); transform: translateY(-2px); box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 10%, transparent); }
.b-metric .stat {
  font-family: var(--serif); font-size: clamp(34px, 4vw, 46px); line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.b-metric .lab { font-size: 14px; font-weight: 600; letter-spacing: .02em; margin-top: 8px; color: var(--text); }
.b-metric .note { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* ── IntersectionObserver scroll-reveal ─────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .overlay[open] { animation: none; }
}

/* ── Sticky mobile bottom action bar (≤ 880px) ──────────────────────────── */
.b-bottombar { display: none; }
@media (max-width: 880px) {
  .b-bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 0;
    background: rgba(8,7,10,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .b-bb-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: transparent; border: 0; color: var(--muted); cursor: pointer;
    font-size: 11px; letter-spacing: .04em; padding: 8px 6px; border-radius: 12px;
    min-height: 48px; /* touch target */
  }
  .b-bb-btn svg { width: 20px; height: 20px; }
  .b-bb-btn .bb-badge {
    position: absolute; transform: translate(14px, -10px); min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--accent); color: #1a1505; font-size: 10px; font-weight: 700;
    display: grid; place-items: center; font-variant-numeric: tabular-nums;
  }
  .b-bb-btn.book {
    color: #1a1505; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 62%, #fff), var(--accent));
    font-weight: 700; border-radius: 12px;
  }
  body { padding-bottom: 76px; } /* clear the fixed bar */
}

/* ── Responsive: golden-ratio → single column, swipe carousels ──────────── */
@media (max-width: 880px) {
  .b-vprops { grid-template-columns: 1fr; }
  .b-gallery {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: var(--sp2); padding-bottom: var(--sp2); scrollbar-width: none;
  }
  .b-gallery::-webkit-scrollbar { display: none; }
  .b-gcard { scroll-snap-align: center; }
  .b-quotes { grid-template-columns: 1fr; }
  .b-process { grid-template-columns: 1fr 1fr; }
  .b-outcomes { grid-template-columns: 1fr 1fr; }
  .b-split, .b-split.rev { grid-template-columns: 1fr; }
  .b-split.rev .b-split-art { order: 0; }
  .b-designers {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .b-designers::-webkit-scrollbar { display: none; }
  .b-designer { flex: 0 0 auto; scroll-snap-align: center; }
  .b-foot-grid { grid-template-columns: 1fr 1fr; }
  .overlay { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .overlay-hero { grid-template-columns: 1fr; padding: var(--sp6) var(--sp4) var(--sp4); }
  .overlay-art { max-width: 280px; }
  .overlay-actions { flex-direction: column; }
  .overlay-actions .btn { width: 100%; }
  .b-nav { display: none; }
}
@media (max-width: 520px) {
  .b-foot-grid { grid-template-columns: 1fr; }
  .b-sec { padding-left: var(--sp3); padding-right: var(--sp3); }
  .b-process { grid-template-columns: 1fr; }
  .b-outcomes { grid-template-columns: 1fr 1fr; }
}