/* ==========================================================================
   White Glove Janitorial, Construction & Placement Agency
   Design system + site styles
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons & links
   6.  Header / navigation
   7.  Hero
   8.  Media (photo slots, figures)
   9.  Cards, pillars, feature grids
   10. Stats band
   11. Tabs
   12. Accordion
   13. Testimonials
   14. Coverage (parish explorer)
   15. Process timeline
   16. Compare slider
   17. Page header (inner pages)
   18. Contact blocks
   19. Footer
   20. Utilities, motion, responsive
   ========================================================================== */

/* 1. TOKENS ============================================================== */
:root {
  /* Brand */
  --ink:          #2E1046;
  --navy:         #4E2172;
  --navy-600:     #5F2E88;
  --navy-050:     #F4EEFA;
  --gold:         #F7CF4A;
  --gold-600:     #8A6A12;
  --gold-050:     #FEF8E4;

  /* Neutrals */
  --white:        #FFFFFF;
  --bg:           #FFFFFF;
  --bg-alt:       #F8F6FB;
  --bg-deep:      #1E0733;
  --line:         #E8E3EF;
  --line-strong:  #CFC6DA;
  --text:         #221630;
  --muted:        #61556E;
  --muted-light:  #8E8599;

  /* Type */
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
                  Palatino, Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.08rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.36vw, 1.42rem);
  --step-2:  clamp(1.48rem, 1.32rem + 0.72vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.35vw, 2.70rem);
  --step-4:  clamp(2.25rem, 1.72rem + 2.35vw, 3.75rem);
  --step-5:  clamp(2.65rem, 1.80rem + 3.70vw, 4.75rem);

  /* Space */
  --gutter:  clamp(1.15rem, 0.9rem + 1.2vw, 2rem);
  --section: clamp(3.75rem, 2.6rem + 5vw, 7rem);
  --maxw:    1200px;
  --maxw-narrow: 780px;

  /* Effects */
  --radius:    14px;
  --radius-lg: 22px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(46,16,70,.06), 0 2px 6px rgba(46,16,70,.05);
  --shadow:    0 4px 10px rgba(46,16,70,.06), 0 14px 34px rgba(46,16,70,.09);
  --shadow-lg: 0 10px 24px rgba(46,16,70,.10), 0 32px 70px rgba(46,16,70,.16);
  --ring:      0 0 0 3px rgba(247,207,74,.45);
  --ease:      cubic-bezier(.22,.61,.36,1);
}

/* 2. RESET & BASE ======================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gold); color: var(--ink); }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* 3. TYPOGRAPHY ========================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
p  { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-600); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--gold); border-radius: 2px;
}
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: var(--gold); }

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--muted); font-weight: 400; }
.small { font-size: var(--step--1); }
.muted { color: var(--muted); }

/* 4. LAYOUT PRIMITIVES =================================================== */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section); position: relative; }
.section--alt  { background: var(--bg-alt); }
.section--tight { padding-block: calc(var(--section) * .62); }
.section--deep {
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(247,207,74,.16), transparent 60%),
    radial-gradient(760px 420px at 92% 108%, rgba(15,123,108,.20), transparent 62%),
    linear-gradient(160deg, var(--ink), var(--bg-deep));
  color: #E0D6EA;
}
.section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }
.section--deep .lede, .section--deep .muted { color: #B5A8C6; }

.section-head { max-width: 760px; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.4rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: clamp(1.1rem, .8rem + 1.1vw, 1.9rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1.2rem + 3.2vw, 4.5rem);
  align-items: center;
}
.split--wide-left  { grid-template-columns: 1.1fr .9fr; }
.split--wide-right { grid-template-columns: .9fr 1.1fr; }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* 5. BUTTONS ============================================================= */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .92rem 1.55rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .95rem; font-weight: 650; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Format and weight of a download, so nobody clicks blind on mobile data. */
.btn__meta { opacity: .7; font-weight: 500; font-size: .85em; white-space: nowrap; }

.btn--gold  { --btn-bg: var(--gold); --btn-bd: var(--gold); --btn-fg: var(--ink); }
.btn--gold:hover { --btn-bg: var(--gold-600); --btn-bd: var(--gold-600); }
.btn--ghost { --btn-bg: transparent; --btn-bd: var(--line-strong); --btn-fg: var(--ink); }
.btn--ghost:hover { --btn-bd: var(--ink); }
.btn--on-dark { --btn-bg: transparent; --btn-bd: rgba(255,255,255,.42); --btn-fg: #fff; }
.btn--on-dark:hover { --btn-bg: rgba(255,255,255,.10); --btn-bd: #fff; }
.btn--sm { padding: .62rem 1.1rem; font-size: .85rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 650; font-size: .93rem; text-decoration: none;
  color: var(--navy);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }
.section--deep .link-arrow { color: var(--gold); }

/* 6. HEADER / NAV ======================================================== */
.scroll-progress {
  position: fixed; inset: 0 auto auto 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--navy));
  z-index: 120; pointer-events: none;
}

.topbar {
  background: var(--ink); color: #C8BCD8;
  font-size: .8rem; letter-spacing: .01em;
}
.topbar__inner { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: center; justify-content: space-between; padding-block: .55rem; }
.topbar__list { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.topbar__list li { display: inline-flex; align-items: center; gap: .45rem; }
.topbar svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: #fff; }

.header {
  position: sticky; top: 0; z-index: 110;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(46,16,70,.07); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: 78px; }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand__mark { width: 46px; height: 46px; flex: none; object-fit: contain; }
.footer .brand__mark { width: 56px; height: 56px; }
/* If images/logo.png hasn't been added yet, drop the broken-image box and let
   the wordmark stand alone rather than showing a placeholder icon. */
.brand__mark.is-missing { display: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.06rem;
  color: var(--ink); letter-spacing: -.01em;
}
.brand__sub {
  font-size: .58rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  position: relative; display: inline-block;
  padding: .55rem .82rem; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 560; color: var(--text); text-decoration: none;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: .82rem; right: .82rem; bottom: .3rem;
  height: 2px; border-radius: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .28s var(--ease);
}
.nav a:hover { color: var(--navy); background: var(--navy-050); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 680; }

.header__cta { display: flex; align-items: center; gap: .6rem; flex: none; }

.nav-toggle {
  display: none; width: 46px; height: 46px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: #fff; padding: 0; place-items: center;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  position: relative; transition: background .2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: transform .28s var(--ease), top .2s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 115;
  background: rgba(30,7,51,.55);
  /* Clips the closed panel, which is parked off-canvas at translateX(100%). */
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(360px, 88vw);
  background: #fff; padding: 1.4rem var(--gutter) 2rem;
  display: flex; flex-direction: column; gap: .3rem;
  transform: translateX(100%);
  transition: transform .36s var(--ease);
  overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.drawer__close {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; font-size: 1.3rem; line-height: 1; color: var(--ink);
}
.drawer__panel a.drawer__link {
  padding: .85rem .2rem; border-bottom: 1px solid var(--line);
  font-size: 1.05rem; font-weight: 600; color: var(--ink); text-decoration: none;
  display: flex; justify-content: space-between; align-items: center;
}
.drawer__panel a.drawer__link:hover { color: var(--gold-600); }
.drawer__foot { margin-top: auto; padding-top: 1.6rem; display: grid; gap: .6rem; }

/* 7. HERO ================================================================ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 420px at 78% 4%, rgba(247,207,74,.20), transparent 58%),
    radial-gradient(680px 460px at 4% 96%, rgba(15,123,108,.24), transparent 60%),
    linear-gradient(155deg, #3B1659 0%, var(--ink) 45%, var(--bg-deep) 100%);
  color: #DCD2E8;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}
.hero__grid-lines {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(closest-side at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 40%, #000 30%, transparent 100%);
}
.hero__inner {
  position: relative; display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hero h1 { color: #fff; font-size: var(--step-5); margin-bottom: .5em; }
.hero h1 .accent {
  color: var(--gold); font-style: italic;
  position: relative; white-space: nowrap;
}
.hero__lede { font-size: var(--step-1); color: #C9BDD9; max-width: 40ch; margin-bottom: 2rem; }

.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .95rem .45rem .55rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: #E2D8EC; margin-bottom: 1.6rem;
}
.pill__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #3ED598;
  box-shadow: 0 0 0 4px rgba(62,213,152,.18);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(62,213,152,.18); }
  50%     { box-shadow: 0 0 0 8px rgba(62,213,152,.05); }
}

.hero__proof {
  display: flex; flex-wrap: wrap; gap: 1.1rem 2.2rem;
  margin-top: 2.6rem; padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero__proof-item { display: flex; align-items: center; gap: .6rem; font-size: .86rem; color: #B5A8C6; }
.hero__proof-item svg { width: 17px; height: 17px; color: var(--gold); flex: none; }

/* Hero visual: stacked division cards */
.hero__visual { position: relative; }
.hero-stack { display: grid; gap: .9rem; }
.hero-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.2rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  /* No backdrop-filter. Blurring what is behind a translucent panel stops
     abruptly at the panel edge, and against the hero gradient that seam reads
     as a pale stripe — right at the screen edge on narrow phones, where the
     gutter is only 18px. The translucent background alone gives the frosted
     look, costs nothing, and leaves no edge. */
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.hero-card:hover { transform: translateX(8px); background: rgba(255,255,255,.12); border-color: rgba(247,207,74,.5); }
.hero-card__icon {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: rgba(247,207,74,.15); color: var(--gold);
}
.hero-card__icon svg { width: 23px; height: 23px; }
.hero-card__title { display: block; color: #fff; font-weight: 700; font-size: .98rem; }
.hero-card__desc  { display: block; color: #ADA0BF; font-size: .82rem; line-height: 1.45; margin-top: 2px; }

.hero-badge {
  margin-top: 1.4rem; padding: 1.15rem 1.3rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(247,207,74,.22), rgba(247,207,74,.06));
  border: 1px solid rgba(247,207,74,.35);
  display: flex; align-items: center; gap: .9rem;
}
.hero-badge svg { width: 30px; height: 30px; color: var(--gold); flex: none; }
.hero-badge strong { color: #fff; display: block; font-size: .95rem; }
.hero-badge span { color: #B5A8C6; font-size: .8rem; }

/* Marquee trust strip */
.marquee {
  background: var(--bg-alt); border-block: 1px solid var(--line);
  padding-block: 1.15rem; overflow: hidden;
}
.marquee__track {
  display: flex; gap: 3.5rem; width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.marquee__item svg { width: 16px; height: 16px; color: var(--gold-600); flex: none; }

/* 8. MEDIA / PHOTO SLOTS ================================================= */
/* Drop a real image at the given src and the placeholder disappears
   automatically (see js/main.js -> photo slot handler).                    */
.shot {
  position: relative; margin: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--navy-050);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  isolation: isolate;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--tall   { aspect-ratio: 3 / 4; }
.shot--wide   { aspect-ratio: 16 / 9; }
.shot--square { aspect-ratio: 1 / 1; }

.shot__ph {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem; text-align: center; padding: 1.5rem;
  background:
    linear-gradient(135deg, rgba(78,33,114,.06), rgba(247,207,74,.10)),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(78,33,114,.045) 12px 24px),
    var(--navy-050);
  color: var(--navy);
}
.shot.is-empty .shot__ph { display: flex; }
.shot.is-empty img { display: none; }
.shot__ph-icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.75); color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.shot__ph-icon svg { width: 22px; height: 22px; }
.shot__ph-label { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.shot__ph-hint  { font-size: .74rem; color: var(--muted); max-width: 30ch; line-height: 1.45; }

.shot__tag {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  padding: .45rem .9rem; border-radius: 999px;
  background: rgba(30,7,51,.72); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
}

/* Video slot — same self-healing behaviour as .shot: if the file in videos/
   isn't there yet, the styled placeholder shows instead of a broken player. */
.clip {
  position: relative; margin: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
  isolation: isolate;
}
.clip--square { aspect-ratio: 1 / 1; }
.clip--tall   { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }
.clip video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink); }

.clip__ph {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem; text-align: center; padding: 1.5rem;
  background:
    linear-gradient(135deg, rgba(78,33,114,.10), rgba(247,207,74,.12)),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(78,33,114,.05) 12px 24px),
    var(--navy-050);
  color: var(--navy);
}
.clip.is-empty .clip__ph { display: flex; }
.clip.is-empty video { display: none; }
.clip__ph-icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.85); color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.clip__ph-icon svg { width: 26px; height: 26px; }
.clip__ph-label { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.clip__ph-hint  { font-size: .74rem; color: var(--muted); max-width: 34ch; line-height: 1.45; }

.clip-caption {
  margin-top: .9rem; font-size: .82rem; color: var(--muted);
  display: flex; align-items: center; gap: .45rem; justify-content: center;
}
.clip-caption svg { width: 15px; height: 15px; flex: none; color: var(--gold-600); }

.media-stack { position: relative; }
.media-stack .shot + .shot {
  position: absolute; width: 52%; right: -6%; bottom: -12%;
  aspect-ratio: 1/1; border: 6px solid #fff; box-shadow: var(--shadow-lg);
}
.media-note {
  margin-top: 1.1rem; font-size: .78rem; color: var(--muted-light);
  display: flex; align-items: center; gap: .45rem;
}
.media-note svg { width: 14px; height: 14px; flex: none; }

/* 9. CARDS =============================================================== */
.card {
  position: relative;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 1.1rem + .8vw, 2rem);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card__icon {
  width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center; margin-bottom: 1.15rem;
  background: var(--navy-050); color: var(--navy);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.card__icon svg { width: 26px; height: 26px; }
.card:hover .card__icon { background: var(--ink); color: var(--gold); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .94rem; }
.card__foot { margin-top: 1.2rem; }

.card--dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
.card--dark:hover { background: rgba(255,255,255,.09); border-color: rgba(247,207,74,.4); }
.card--dark p { color: #B5A8C6; }
.card--dark .card__icon { background: rgba(247,207,74,.14); color: var(--gold); }

/* Division / pillar card with accent rail */
.pillar {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 1.2rem + 1vw, 2.3rem);
  display: flex; flex-direction: column;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
  height: 100%;
}
.pillar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--accent, var(--navy));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .4s var(--ease);
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pillar:hover::before { transform: scaleX(1); }
.pillar__num {
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  color: var(--line-strong); margin-bottom: .8rem;
}
.pillar__icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent, var(--navy)) 10%, #fff);
  color: var(--accent, var(--navy)); margin-bottom: 1.2rem;
}
.pillar__icon svg { width: 27px; height: 27px; }
.pillar ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.pillar ul li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .9rem; color: var(--muted);
}
.pillar ul li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent, var(--navy)); margin-top: .55em;
}
.pillar .link-arrow { margin-top: auto; padding-top: 1.5rem; color: var(--accent, var(--navy)); }

/* Feature list with checks */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; font-size: .95rem; }
/* Ticks take the brand purple on light sections and gold on dark ones. They used
   to be teal, which was a third colour belonging to neither. */
.checklist li svg { width: 20px; height: 20px; flex: none; color: var(--navy-600); margin-top: 2px; }
.section--deep .checklist li svg { color: var(--gold); }

/* Value / mini feature */
.mini { display: flex; gap: 1rem; align-items: flex-start; }
.mini__icon {
  width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--gold-050); color: var(--gold-600);
}
.mini__icon svg { width: 21px; height: 21px; }
.mini h4 { margin-bottom: .25rem; }
.mini p { font-size: .9rem; color: var(--muted); }
.section--deep .mini__icon { background: rgba(247,207,74,.14); color: var(--gold); }

/* Service chip grid */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: .85rem; font-weight: 550; color: var(--text);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.chips li:hover { border-color: var(--gold); background: var(--gold-050); transform: translateY(-2px); }

/* Roadmap — services announced but not yet trading. Deliberately styled apart
   from live services (dashed, muted, badged) so nobody mistakes one for the
   other and calls expecting to book it. */
.soon-list { display: grid; gap: .9rem; }
/* Two-up for longer roadmaps; a single stacked column of six reads as a wall. */
.soon-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 800px) { .soon-list--grid { grid-template-columns: 1fr; } }
.soon-item {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.25rem 1.4rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.soon-item:hover { border-color: var(--gold); transform: translateX(5px); box-shadow: var(--shadow-sm); }
.section--alt .soon-item { background: #fff; }
.soon-item__icon {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--bg-alt); color: var(--muted);
  border: 1px solid var(--line);
}
.section--alt .soon-item__icon { background: var(--navy-050); }
.soon-item__icon svg { width: 22px; height: 22px; }
.soon-item__body { min-width: 0; }
.soon-item h4 { margin-bottom: .3rem; }
.soon-item p { font-size: .9rem; color: var(--muted); margin: 0; }
.soon-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-600); background: var(--gold-050);
  border: 1px solid var(--gold); border-radius: 999px;
  padding: .25rem .65rem; margin-bottom: .5rem;
}
.soon-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex: none;
}

/* On the dark roadmap band */
.section--deep .soon-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); }
.section--deep .soon-item:hover { background: rgba(255,255,255,.09); border-color: var(--gold); }
.section--deep .soon-item__icon {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: var(--gold);
}
.section--deep .soon-item p { color: #B5A8C6; }
.section--deep .soon-badge { color: var(--gold); background: rgba(247,207,74,.12); border-color: rgba(247,207,74,.5); }
.section--deep .editable-flag { color: var(--gold); background: rgba(247,207,74,.10); border-color: rgba(247,207,74,.45); }
.section--deep .soon-item strong, .section--deep strong { color: #fff; }

/* Inline "not yet available" note for a division page. */
.soon-note {
  display: flex; gap: .9rem; align-items: flex-start;
  margin-top: 2rem; padding: 1.1rem 1.3rem;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--bg-alt);
}
.soon-note svg { width: 20px; height: 20px; flex: none; color: var(--gold-600); margin-top: 2px; }
.soon-note p { margin: 0; font-size: .9rem; color: var(--muted); }
.soon-note b { color: var(--ink); }

/* 10. STATS ============================================================== */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  /* Capped and centred: stretched across the full 1200px container this reads
     as a thin ribbon rather than a band of figures. */
  max-width: 900px; margin-inline: auto;
}
.section--deep .stats { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.stat { background: #fff; padding: clamp(1.6rem, 1.2rem + 1.1vw, 2.4rem) 1rem; text-align: center; }
.section--deep .stat { background: rgba(255,255,255,.04); }
.stat__value {
  font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em;
}
.section--deep .stat__value { color: #fff; }
.stat__value .suffix { color: var(--gold); }
.stat__label {
  margin-top: .6rem; font-size: .78rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.section--deep .stat__label { color: #ADA0BF; }

/* 11. TABS =============================================================== */
.tabs__list {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .4rem; border-radius: 999px;
  background: var(--bg-alt); border: 1px solid var(--line);
  width: fit-content; max-width: 100%; margin-bottom: 2.2rem;
}
.section--alt .tabs__list { background: #fff; }
.tabs__btn {
  border: 0; background: transparent; border-radius: 999px;
  padding: .68rem 1.35rem; font-size: .9rem; font-weight: 600; color: var(--muted);
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.tabs__btn:hover { color: var(--ink); }
.tabs__btn[aria-selected="true"] {
  background: var(--ink); color: #fff; box-shadow: var(--shadow-sm);
}
.tabs__panel { display: none; animation: fadeUp .45s var(--ease) both; }
.tabs__panel.is-active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 12. ACCORDION ========================================================== */
.accordion { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.35rem 0; background: none; border: 0; text-align: left;
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 620; color: var(--ink);
  transition: color .2s var(--ease);
}
.acc__btn:hover { color: var(--gold-600); }
.acc__sign {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-strong); position: relative;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
}
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 12px; height: 2px; background: var(--ink); border-radius: 2px;
  transform: translate(-50%,-50%); transition: transform .3s var(--ease), background .25s var(--ease);
}
.acc__sign::after { transform: translate(-50%,-50%) rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign { background: var(--ink); border-color: var(--ink); transform: rotate(180deg); }
.acc__btn[aria-expanded="true"] .acc__sign::before,
.acc__btn[aria-expanded="true"] .acc__sign::after { background: #fff; }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: translate(-50%,-50%) rotate(0deg); }
.acc__panel { overflow: hidden; height: 0; transition: height .35s var(--ease); }
.acc__panel-inner { padding: 0 0 1.5rem; color: var(--muted); max-width: 70ch; font-size: .96rem; }

/* 13. TESTIMONIALS ======================================================= */
.quotes { position: relative; }
.quotes__viewport { overflow: hidden; }
.quotes__track { display: flex; transition: transform .55s var(--ease); }
.quotes__slide { min-width: 100%; padding: .3rem; }
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 1.3rem + 1.6vw, 3rem);
  box-shadow: var(--shadow-sm); position: relative;
}
.quote__mark {
  font-family: var(--font-display); font-size: 4.5rem; line-height: .8;
  color: var(--gold); opacity: .35; margin-bottom: .3rem;
}
.quote__text {
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.5;
  color: var(--ink); margin-bottom: 1.6rem;
}
.quote__who { display: flex; align-items: center; gap: .9rem; }
.quote__avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--navy-050); color: var(--navy);
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
.quote__name { font-weight: 700; font-size: .95rem; }
.quote__role { font-size: .82rem; color: var(--muted); }
.quotes__controls { display: flex; align-items: center; gap: .6rem; margin-top: 1.6rem; justify-content: center; }
.quotes__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: #fff; display: grid; place-items: center; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.quotes__btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.quotes__btn svg { width: 18px; height: 18px; }
.quotes__dots { display: flex; gap: .4rem; margin-inline: .6rem; }
.quotes__dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: var(--line-strong); transition: width .3s var(--ease), background .3s var(--ease);
}
.quotes__dot[aria-selected="true"] { width: 26px; border-radius: 999px; background: var(--gold); }

/* Placeholder state for unfilled testimonials */
.quote--placeholder { border-style: dashed; border-color: var(--line-strong); background: var(--bg-alt); }
.quote--placeholder .quote__text { color: var(--muted); font-style: italic; }
.editable-flag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-body); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-600); background: var(--gold-050);
  border: 1px dashed var(--gold); border-radius: 999px;
  padding: .28rem .7rem; margin-bottom: 1rem;
}

/* 14. COVERAGE / PARISH EXPLORER ========================================= */
.coverage { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.8rem, 1rem + 3vw, 3.5rem); align-items: start; }
.parish-groups { display: grid; gap: 1.6rem; }
.parish-group__title {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .8rem;
}
.parish-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.parish {
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  color: #DCD2E8; border-radius: 999px; padding: .5rem 1rem;
  font-size: .85rem; font-weight: 550;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.parish:hover { transform: translateY(-2px); border-color: var(--gold); color: #fff; }
.parish[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 700; }

.parish-detail {
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.parish-detail__name { font-family: var(--font-display); font-size: var(--step-2); color: #fff; margin-bottom: .3rem; }
.parish-detail__meta { font-size: .82rem; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; font-weight: 650; margin-bottom: 1.3rem; }
.parish-detail__body { color: #B5A8C6; font-size: .95rem; margin-bottom: 1.6rem; }
.parish-detail__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.parish-stat { padding: .9rem 1rem; border-radius: var(--radius); background: rgba(255,255,255,.05); }
.parish-stat b { display: block; color: #fff; font-size: 1.1rem; font-family: var(--font-display); }
.parish-stat span { font-size: .74rem; color: #ADA0BF; letter-spacing: .06em; text-transform: uppercase; }

/* 14b. REQUEST BUILDER ===================================================
   Interactive enquiry builder. Assembles the visitor's answers into a
   pre-filled WhatsApp message so the first contact already contains the
   detail we would otherwise spend a phone call extracting. */
/* Hairline rule for separating blocks inside a single dark section. */
.rule-soft {
  height: 1px; border: 0; margin: clamp(2.6rem, 2rem + 2vw, 4rem) 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 15%,
                              rgba(255,255,255,.18) 85%, transparent);
}

.builder { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.8rem, 1rem + 3vw, 3.2rem); align-items: start; }
@media (max-width: 900px) { .builder { grid-template-columns: 1fr; } }

.builder__step { margin-bottom: 1.6rem; }
.builder__step:last-of-type { margin-bottom: 0; }
.builder__q {
  display: flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .8rem;
}
.builder__num {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(247,207,74,.15); border: 1px solid rgba(247,207,74,.5);
  font-size: .7rem; letter-spacing: 0;
}
.builder__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt {
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  color: #DCD2E8; border-radius: 999px; padding: .55rem 1.05rem;
  font-size: .87rem; font-weight: 550; font-family: inherit;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.opt:hover { transform: translateY(-2px); border-color: var(--gold); color: #fff; }
.opt[aria-pressed="true"] {
  background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 700;
}
.opt[aria-pressed="true"]::before { content: "\2713\00a0"; }

.builder__panel {
  position: sticky; top: 96px;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  /* Same reason as .hero-card — no backdrop-filter, so no seam at the edge. */
}
@media (max-width: 900px) { .builder__panel { position: static; } }
.builder__panel h3 { color: #fff; font-size: var(--step-1); margin-bottom: 1rem; }
.builder__summary { display: grid; gap: .7rem; margin-bottom: 1.4rem; }
.builder__line { display: grid; grid-template-columns: 88px 1fr; gap: .8rem; font-size: .9rem; align-items: baseline; }
.builder__label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #A294B4; }
.builder__value { color: #fff; }
.builder__value.is-empty { color: #8E82A0; font-style: italic; font-weight: 400; }
.builder__hint { font-size: .78rem; color: #A294B4; margin: 1rem 0 0; }
.builder__actions { display: grid; gap: .6rem; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.builder__reset {
  background: none; border: 0; color: #A294B4; font-size: .78rem;
  text-decoration: underline; text-underline-offset: 3px; padding: 0; margin-top: .9rem;
  font-family: inherit;
}
.builder__reset:hover { color: var(--gold); }

/* 15. PROCESS TIMELINE =================================================== */
.timeline { position: relative; display: grid; gap: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.timeline::before {
  content: ""; position: absolute; left: 27px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(var(--gold), var(--line));
}
.tl-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.4rem; align-items: start; }
.tl-step__dot {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: #fff; border: 2px solid var(--line);
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--navy);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.tl-step:hover .tl-step__dot { background: var(--ink); color: var(--gold); border-color: var(--ink); transform: scale(1.06); }
.tl-step h4 { margin-bottom: .35rem; font-size: 1.05rem; }
.tl-step p { color: var(--muted); font-size: .94rem; }
.section--alt .tl-step__dot { background: #fff; }

/* Horizontal variant */
.timeline--row { grid-template-columns: repeat(4, 1fr); }
.timeline--row::before { left: 12%; right: 12%; top: 27px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--gold), var(--line)); }
.timeline--row .tl-step { grid-template-columns: 1fr; gap: 1rem; text-align: center; justify-items: center; }

/* 16. COMPARE SLIDER ===================================================== */
.compare {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  /* 4:3 to match the supplied before/after pair, which were shot portrait. */
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); user-select: none;
  background: var(--navy-050); touch-action: pan-y;
}
.compare__pane { position: absolute; inset: 0; }
.compare__pane img { width: 100%; height: 100%; object-fit: cover; }
.compare__pane--after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare__ph {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: .5rem; text-align: center; padding: 1.5rem;
}
.compare__ph--before { background: linear-gradient(135deg, #9E8FAE, #6E5F7E); color: #fff; }
.compare__ph--after  { background: linear-gradient(135deg, #F7F3FB, #E2D8EC); color: var(--navy); }
.compare__ph b { font-family: var(--font-display); font-size: 1.6rem; }
.compare__ph span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(46,16,70,.15); z-index: 3;
  transform: translateX(-50%);
}
.compare__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 48px; height: 48px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow);
  cursor: ew-resize; color: var(--ink);
}
.compare__grip svg { width: 22px; height: 22px; }
.compare__label {
  position: absolute; top: 1rem; z-index: 4; padding: .35rem .8rem; border-radius: 999px;
  background: rgba(30,7,51,.7); color: #fff; font-size: .72rem;
  font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.compare__label--l { left: 1rem; }
.compare__label--r { right: 1rem; }
.compare input[type="range"] {
  position: absolute; inset: auto 0 0 0; width: 100%; opacity: 0; height: 100%;
  margin: 0; cursor: ew-resize; z-index: 5;
}

/* 17. PAGE HEADER (inner pages) ========================================== */
.page-head {
  position: relative; overflow: hidden;
  background:
    radial-gradient(620px 340px at 88% 0%, rgba(247,207,74,.18), transparent 60%),
    linear-gradient(150deg, #3B1659, var(--ink));
  color: #D6CBE4;
  padding-block: clamp(3rem, 2rem + 3.5vw, 5.2rem);
}
.page-head__inner { position: relative; max-width: 760px; }
.page-head h1 { color: #fff; margin-bottom: .45em; }
.page-head p { color: #B5A8C6; font-size: var(--step-1); }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .82rem; margin-bottom: 1.2rem; color: #9E92B0; }
.crumbs a { color: #B5A8C6; text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs span { opacity: .5; }

/* Scroll cue — tells the reader the details they came for are just below,
   rather than leaving them to guess. */
.scroll-cue {
  display: inline-flex; align-items: center; gap: .8rem;
  margin-top: 1.8rem; padding: .6rem 1.1rem .6rem 1.3rem;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.07);
  border-radius: 999px; text-decoration: none;
  color: #E2D8EC; font-size: .88rem; font-weight: 600;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.scroll-cue:hover {
  background: rgba(247,207,74,.14); border-color: var(--gold);
  color: #fff; transform: translateY(-2px);
}
.scroll-cue__arrow {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink);
  animation: cueBob 1.9s var(--ease) infinite;
}
.scroll-cue__arrow svg { width: 16px; height: 16px; }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
.scroll-cue:hover .scroll-cue__arrow { animation-play-state: paused; }

/* Briefly highlights the contact block when arrived at via the cue. */
@keyframes detailsFlash {
  0%   { box-shadow: 0 0 0 0 rgba(247,207,74,.55); }
  100% { box-shadow: 0 0 0 18px rgba(247,207,74,0); }
}
.contact-card.is-flagged {
  border-color: var(--gold);
  animation: detailsFlash 1.5s var(--ease) 1;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue__arrow { animation: none !important; }
  .contact-card.is-flagged { animation: none !important; }
}

/* 18. CONTACT ============================================================ */
.contact-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  display: flex; gap: 1.1rem; align-items: flex-start; height: 100%;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* The whole card is an anchor, so without this every line inside it inherits
   the default underline and the card reads as a wall of links. */
.contact-card, .contact-card:hover { text-decoration: none; }
.contact-card * { text-decoration: none; }
.contact-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow); }
.contact-card__value {
  display: block; font-weight: 700; color: var(--ink); line-height: 1.35;
  /* Phone numbers must never break across lines — "876-830-044 / 0" is worse
     than a slightly cramped card. */
  white-space: nowrap;
}
/* The email is the one value too long to hold on one line. Let it wrap, but
   only at the <wbr> placed before the @, so it splits name / domain. */
.contact-card--email .contact-card__value {
  white-space: normal; font-size: .82rem; letter-spacing: -.005em;
}
.contact-card__icon {
  width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center;
  background: var(--navy-050); color: var(--navy);
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card h4 { margin-bottom: .3rem; }
.contact-card a { font-weight: 620; color: var(--ink); text-decoration: none; }
.contact-card a:hover { color: var(--gold-600); }
.contact-card p { font-size: .9rem; color: var(--muted); margin: .2rem 0 0; }

/* Live Google Maps embed rather than a screenshot: always current, and it
   pans and zooms. Lazy-loaded so it costs nothing until scrolled to. */
.mapframe {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3; background: var(--navy-050);
}
.mapframe iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Sits under the map. There is no walk-in office, so the map needs saying
   what it is — a base address, not somewhere to turn up. */
.basecard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  display: grid; gap: 1.4rem; box-shadow: var(--shadow-sm);
}
.basecard__row { display: flex; gap: 1rem; align-items: flex-start; }
.basecard__icon {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--navy-050); color: var(--navy);
}
.basecard__icon svg { width: 22px; height: 22px; }
.basecard h4 { margin-bottom: .25rem; }
.basecard p { margin: 0; font-size: .9rem; color: var(--muted); }

.hours-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.hours-table th, .hours-table td { padding: .85rem .2rem; text-align: left; border-bottom: 1px solid var(--line); }
.hours-table th { font-weight: 600; color: var(--text); }
.hours-table td { color: var(--muted); text-align: right; }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--gold-600); font-weight: 700; }

.cta-band {
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background:
    radial-gradient(700px 380px at 82% 8%, rgba(247,207,74,.22), transparent 60%),
    linear-gradient(140deg, #3B1659, var(--bg-deep));
  color: #D6CBE4;
  padding: clamp(2.2rem, 1.6rem + 2.6vw, 4rem);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #B5A8C6; max-width: 58ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.8rem; }

/* 19. FOOTER ============================================================= */
.footer { background: var(--bg-deep); color: #A294B4; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(1.8rem, 1rem + 3vw, 3.5rem); }
.footer .brand__name { color: #fff; }
.footer .brand__sub { color: #8E82A0; }
.footer__about { margin-top: 1.2rem; font-size: .9rem; max-width: 34ch; }
.footer h4 {
  color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.footer a { color: #A294B4; text-decoration: none; font-size: .92rem; transition: color .2s var(--ease), padding-left .2s var(--ease); }
.footer ul a:hover { color: var(--gold); padding-left: 4px; }
.footer__contact li { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; }
.footer__contact svg { width: 17px; height: 17px; color: var(--gold); flex: none; margin-top: 3px; }

.socials { display: flex; gap: .55rem; margin-top: 1.5rem; }
.socials a {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.14); color: #C8BCD8;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.socials a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); transform: translateY(-3px); }
.socials svg { width: 19px; height: 19px; }

.footer__bottom {
  margin-top: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  justify-content: space-between; align-items: center;
  font-size: .82rem; color: #8E82A0;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
/* Statutory line: present for anyone verifying us, quiet for everyone else. */
.footer__reg { display: inline-block; margin-top: .3rem; font-size: .95em; opacity: .72; }

/* Floating call button */
.fab {
  position: fixed; right: clamp(1rem, .6rem + 1vw, 1.6rem); bottom: clamp(1rem, .6rem + 1vw, 1.6rem);
  z-index: 90; display: flex; flex-direction: column; gap: .6rem; align-items: flex-end;
}
.fab__btn {
  width: 54px; height: 54px; border-radius: 50%; border: 0;
  display: grid; place-items: center; color: #fff;
  box-shadow: var(--shadow-lg); text-decoration: none;
  transition: transform .25s var(--ease), opacity .25s var(--ease), visibility .25s var(--ease);
}
.fab__btn svg { width: 24px; height: 24px; }
.fab__btn:hover { transform: scale(1.08); color: #fff; }
.fab__btn--call { background: var(--gold); color: var(--ink); }
.fab__btn--call:hover { color: var(--ink); }
/* WhatsApp's own green: the point of this button is instant recognition, and
   it distinguishes the messaging channel from the call-only number above it. */
.fab__btn--wa { background: #25D366; color: #fff; }
.fab__btn--wa:hover { background: #1EBE5A; color: #fff; }
.fab__btn--top { background: var(--ink); opacity: 0; visibility: hidden; }
.fab__btn--top.is-visible { opacity: 1; visibility: visible; }

/* 18b. LEGAL PAGES =======================================================
   Long-form reading: narrower measure, clear heading rhythm, no card chrome. */
.legal h2 {
  font-size: var(--step-1);
  margin-top: clamp(2.2rem, 1.8rem + 1.4vw, 3rem);
  padding-top: clamp(1.4rem, 1.1rem + .8vw, 2rem);
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 1.6rem; }
.legal p { max-width: 68ch; }
.legal .checklist { margin-top: 1.1rem; }
.legal .checklist li { align-items: flex-start; }
.legal a { color: var(--navy); font-weight: 560; }
.legal a:hover { color: var(--gold-600); }

/* 19b. TOASTS ============================================================
   Used when a tel: or WhatsApp hand-off finds nothing to hand off to, so the
   visitor is told what happened instead of the click appearing to do nothing. */
.toast-wrap {
  position: fixed; left: 50%; bottom: clamp(1rem, .6rem + 1.4vw, 1.8rem);
  transform: translateX(-50%);
  width: min(460px, calc(100vw - 2rem));
  z-index: 200; display: grid; gap: .6rem;
}
.toast {
  position: relative;
  background: var(--ink); color: #E0D6EA;
  border: 1px solid rgba(247,207,74,.45);
  border-radius: var(--radius);
  padding: 1.05rem 2.4rem 1.05rem 1.15rem;
  box-shadow: var(--shadow-lg);
  display: grid; gap: .8rem;
  animation: toastIn .35s var(--ease) both;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.toast.is-going { animation: toastOut .3s var(--ease) both; }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

.toast__head { display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 700; font-size: .95rem; }
.toast__head svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
.toast__msg { font-size: .87rem; line-height: 1.55; margin: 0; }
.toast__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.toast__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: transparent;
  color: #fff; font-family: inherit; font-size: .82rem; font-weight: 620;
  text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.toast__btn:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.toast__btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.toast__btn--gold:hover { background: var(--gold-600); border-color: var(--gold-600); color: var(--ink); }
.toast__close {
  position: absolute; top: .5rem; right: .5rem;
  width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: transparent; color: #A294B4;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.toast__close:hover { color: #fff; background: rgba(255,255,255,.1); }

/* 20. MOTION / UTILITIES ================================================= */
/* Scoped to .js so content is never hidden when JavaScript is unavailable.
   The offset is driven by custom properties, so direction variants below only
   need to set --rx / --ry / --rs and never fight this rule on specificity. */
.js [data-reveal] {
  opacity: 0;
  transform: translate(var(--rx, 0), var(--ry, 26px)) scale(var(--rs, 1));
}
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease), transform .85s var(--ease);
  transition-delay: var(--delay, 0ms);
}

/* Two-column sections converge from their own side rather than all rising. */
.js .split > [data-reveal]:first-child  { --rx: -38px; --ry: 0; }
.js .split > [data-reveal]:last-child   { --rx:  38px; --ry: 0; }
.js .coverage > [data-reveal]:first-child { --rx: -38px; --ry: 0; }
.js .coverage > [data-reveal]:last-child  { --rx:  38px; --ry: 0; }
@media (max-width: 900px) {
  /* Once stacked, sideways motion reads as a glitch — go back to rising. */
  .js .split > [data-reveal],
  .js .coverage > [data-reveal] { --rx: 0; --ry: 26px; }
}

/* Opt-in variants */
.js [data-reveal="left"]  { --rx: -38px; --ry: 0; }
.js [data-reveal="right"] { --rx:  38px; --ry: 0; }
.js [data-reveal="scale"] { --rx: 0; --ry: 14px; --rs: .94; }

/* Photographs settle out of a slow push-in as their block arrives. Written as
   a :not() on the unrevealed state so there is no override to lose a cascade
   fight with — the resting state is simply "no transform". */
.js .shot img { transition: transform 1.4s var(--ease); }
.js [data-reveal]:not(.is-in) .shot img { transform: scale(1.07); }

/* The little gold rule in front of a section eyebrow draws itself in. */
.js [data-reveal] .eyebrow::before { width: 0; transition: width .7s var(--ease) .3s; }
.js [data-reveal].is-in .eyebrow::before { width: 26px; }

/* Process timelines draw their spine downward (or across, when horizontal). */
.js .timeline[data-reveal]::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.2s var(--ease) .15s; }
.js .timeline[data-reveal].is-in::before { transform: scaleY(1); }
.js .timeline--row[data-reveal]::before { transform: scaleX(0); transform-origin: 0 50%; }
.js .timeline--row[data-reveal].is-in::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee__track, .pill__dot { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- Hero entrance -------------------------------------------------------
   The hero is above the fold, so it animates on load rather than on scroll. */
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes heroSlide { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }

.js .hero__copy > *,
.js .hero-stack > *,
.js .hero-badge,
.js .page-head__inner > * {
  opacity: 0;
  animation: heroRise .9s var(--ease) forwards;
}
.js .hero__copy > *:nth-child(1) { animation-delay: .08s; }
.js .hero__copy > *:nth-child(2) { animation-delay: .18s; }
.js .hero__copy > *:nth-child(3) { animation-delay: .28s; }
.js .hero__copy > *:nth-child(4) { animation-delay: .38s; }
.js .hero__copy > *:nth-child(5) { animation-delay: .48s; }
.js .hero-stack > * { animation-name: heroSlide; }
.js .hero-stack > *:nth-child(1) { animation-delay: .34s; }
.js .hero-stack > *:nth-child(2) { animation-delay: .46s; }
.js .hero-stack > *:nth-child(3) { animation-delay: .58s; }
.js .hero-badge { animation-delay: .7s; }
.js .page-head__inner > *:nth-child(1) { animation-delay: .06s; }
.js .page-head__inner > *:nth-child(2) { animation-delay: .16s; }
.js .page-head__inner > *:nth-child(3) { animation-delay: .26s; }
.js .page-head__inner > *:nth-child(4) { animation-delay: .36s; }

/* Parallax layers are oversized so drifting never exposes an edge. */
.hero__grid-lines { inset: -30% 0; will-change: transform; }

/* --- Micro-interactions --------------------------------------------------- */
.brand__mark { transition: transform .55s var(--ease), width .3s var(--ease), height .3s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-10deg) scale(1.07); }

/* Header tightens as you scroll away from the top. */
.header__inner { transition: min-height .3s var(--ease); }
.header.is-stuck .header__inner { min-height: 64px; }
.header.is-stuck .brand__mark { width: 40px; height: 40px; }

/* Light sweep across buttons on hover. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-160%); pointer-events: none; z-index: -1;
  transition: transform .75s var(--ease);
}
.btn:hover::after { transform: translateX(420%); }
.btn--gold::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); }

/* Icons respond to their card, not just the card border. */
.card__icon { transition: background .3s var(--ease), color .3s var(--ease), transform .4s var(--ease); }
.card:hover .card__icon { transform: rotate(-7deg) scale(1.09); }
.pillar__icon { transition: transform .4s var(--ease); }
.pillar:hover .pillar__icon { transform: translateY(-5px) rotate(-5deg); }
.contact-card__icon { transition: background .3s var(--ease), color .3s var(--ease), transform .4s var(--ease); }
.contact-card:hover .contact-card__icon { background: var(--ink); color: var(--gold); transform: scale(1.08); }
.mini__icon { transition: transform .4s var(--ease); }
.mini:hover .mini__icon { transform: rotate(-8deg) scale(1.08); }

/* Chips lift in a soft ripple as the pointer crosses them. */
.chips li { transition: border-color .22s var(--ease), background .22s var(--ease),
                        transform .22s var(--ease), box-shadow .22s var(--ease); }
.chips li:hover { box-shadow: var(--shadow-sm); }

/* Marquee edges dissolve instead of cutting off mid-word. */
.marquee {
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* Accordion body eases in with the panel rather than appearing instantly. */
.acc__panel-inner { opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease) .1s, transform .4s var(--ease) .1s; }
.acc__btn[aria-expanded="true"] + .acc__panel .acc__panel-inner { opacity: 1; transform: none; }

/* Compare-slider grip invites the drag. */
.compare__grip { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.compare:hover .compare__grip { transform: translate(-50%,-50%) scale(1.12); box-shadow: var(--shadow-lg); }

/* Footer + timeline dots */
.tl-step__dot { transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease); }
.socials a svg { transition: transform .3s var(--ease); }
.socials a:hover svg { transform: scale(1.15); }
.quotes__btn svg { transition: transform .3s var(--ease); }
.quotes__btn:hover svg { transform: scale(1.15); }

@media (prefers-reduced-motion: reduce) {
  .js .hero__copy > *, .js .hero-stack > *, .js .hero-badge, .js .page-head__inner > * {
    opacity: 1 !important; animation: none !important;
  }
  .js .shot img { transform: none !important; }
  .js [data-reveal] .eyebrow::before { width: 26px !important; }
  .js .timeline[data-reveal]::before { transform: none !important; }
  .hero__grid-lines { transform: none !important; }
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .8rem; } .mt-2 { margin-top: 1.6rem; }
.mt-3 { margin-top: 2.4rem; } .mb-2 { margin-bottom: 1.6rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* RESPONSIVE ------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .timeline--row { grid-template-columns: repeat(2, 1fr); }
  .timeline--row::before { display: none; }
}
/* Header sizing is driven by how much room brand + nav + call button need,
   which is independent of where the page content switches to one column. */
@media (max-width: 1140px) {
  /* The company name stays readable at every width — it tightens, never hides. */
  .header .brand__sub { font-size: .5rem; letter-spacing: .09em; }
  .nav a { padding-inline: .6rem; }
}
@media (max-width: 1023px) {
  .nav, .header__cta .btn { display: none; }
  .nav-toggle { display: grid; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
  .split, .split--wide-left, .split--wide-right, .coverage { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .media-stack .shot + .shot { position: relative; width: 100%; right: 0; bottom: 0; margin-top: 1rem; border-width: 0; aspect-ratio: 16/9; }
}
@media (max-width: 640px) {
  .header .brand__sub { font-size: .47rem; letter-spacing: .06em; }
  .header .brand__name { font-size: .95rem; }
  .header .brand__mark { width: 38px; height: 38px; }
  .header.is-stuck .brand__mark { width: 34px; height: 34px; }
  .header__inner { min-height: 66px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .timeline--row { grid-template-columns: 1fr; }
  .topbar__inner { justify-content: center; text-align: center; }
  .topbar__list { justify-content: center; }
  .hero__proof { gap: .8rem 1.4rem; }
  .quotes__slide { padding: 0; }
  .footer__grid { grid-template-columns: 1fr; }
  .tabs__list { width: 100%; border-radius: var(--radius); }
  .tabs__btn { flex: 1 1 auto; }
}

/* PRINT ------------------------------------------------------------------ */
@media print {
  .header, .topbar, .footer, .fab, .drawer, .scroll-progress, .marquee { display: none !important; }
  body { color: #000; }
  .section { padding-block: 1.2rem; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* 21. CONSENT BANNER ======================================================= */
/* Injected by js/main.js only when a live analytics tag is present, so it
   never appears on preview builds. Sits above the floating call buttons. */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 200;
  background: var(--bg-deep); color: #E9E2F2;
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 1rem clamp(1rem, 4vw, 2rem) calc(1rem + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .35s ease;
  box-shadow: 0 -10px 30px rgba(0,0,0,.25);
}
.consent.is-in { transform: translateY(0); }
.consent__inner {
  max-width: 1200px; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: .9rem 1.6rem;
  align-items: center; justify-content: space-between;
}
.consent__text { margin: 0; font-size: .88rem; line-height: 1.5; max-width: 68ch; }
.consent__text a { color: var(--gold); text-decoration: underline; }
.consent__actions { display: flex; gap: .6rem; flex: none; }
.consent__actions .btn { padding: .6rem 1.2rem; font-size: .86rem; }
/* The ghost button is built for light sections; on this dark bar it needs
   its own border and text colour or it reads as a hole. */
.consent__no { --btn-bd: rgba(255,255,255,.35); --btn-fg: #E9E2F2; --btn-bg: transparent; }

@media (max-width: 620px) {
  .consent__inner { flex-direction: column; align-items: stretch; }
  .consent__actions { justify-content: stretch; }
  .consent__actions .btn { flex: 1; justify-content: center; }
}
/* The floating call/WhatsApp stack must not sit under the banner. */
body:has(.consent:not([hidden])) .fab-stack { bottom: calc(9rem + env(safe-area-inset-bottom)); }