/* ══════════════════════════════════════════════════════════════════════════════
   Tech Mounting Pros — styles.css
   Brand palette: Mounting Red · Industrial Gold · Carbon Black · Off-White
   Fonts: Barlow Condensed (headings) · Barlow (body) — single-family system
   Mobile-first · CSS custom properties · OKLCH colors
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── TOKENS ─────────────────────────────────────────────────────────────────── */
:root {
  /* Brand colors (OKLCH — perceptually accurate to client hex values) */
  --red:         oklch(41% 0.152 22);     /* #A8242A Mounting Red      */
  --red-deep:    oklch(35% 0.145 22);     /* hover / pressed state     */
  --gold:        oklch(69% 0.108 66);     /* #D4A04D Industrial Gold   */
  --gold-deep:   oklch(61% 0.100 66);     /* hover / pressed state     */
  --black:       oklch(14% 0.005 80);     /* #1F1F1F Carbon Black      */
  --black-mid:   oklch(19% 0.006 80);     /* slightly lifted dark      */
  --offwhite:    oklch(96% 0.004 98);     /* #F5F5F0 Off-White base    */
  --offwhite-2:  oklch(93% 0.006 98);     /* slightly deeper surface   */

  /* Semantic text */
  --text-primary:   oklch(14% 0.005 80);
  --text-secondary: oklch(42% 0.010 80);
  --text-on-dark:   oklch(95% 0.004 98);
  --text-on-gold:   oklch(12% 0.005 80);

  /* Semi-transparent overlays — avoids oklch(from ...) for broader compat */
  --black-a10:   oklch(14% 0.005 80 / 0.10);
  --black-a15:   oklch(14% 0.005 80 / 0.15);
  --red-a12:     oklch(41% 0.152 22 / 0.12);
  --red-a30:     oklch(41% 0.152 22 / 0.30);
  --gold-a15:    oklch(69% 0.108 66 / 0.15);
  --white-a10:   oklch(95% 0.004 98 / 0.10);
  --white-a45:   oklch(95% 0.004 98 / 0.45);

  /* Spacing — 4pt scale with semantic names */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Section vertical rhythm */
  --section-pad:     clamp(var(--space-12), 9vw, var(--space-24));
  --container-width: 1180px;
  --container-pad:   clamp(var(--space-6), 5vw, var(--space-12));

  /* Typography */
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;

  /* Letter-spacing tokens */
  --letter-label:  0.1em;    /* wide-tracked uppercase small labels */
  --letter-head:  -0.015em;  /* large display headings */
  --letter-ui:     0.02em;   /* subtle tracking for normal-case UI */

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Motion */
  --ease-out:  cubic-bezier(0.16, 1, 0.32, 1);
  --t-fast:    150ms;
  --t-med:     300ms;
  --t-slow:    600ms;
}


/* ── RESET ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family:              var(--font-body);
  font-size:                1rem;
  line-height:              1.6;
  color:                    var(--text-primary);
  background-color:         var(--offwhite);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
  font-kerning:             normal;
}

img   { display: block; max-width: 100%; height: auto; }
a     { color: inherit; }
ol, ul { list-style: none; }
strong { font-weight: 600; }


/* ── SCROLL REVEAL ──────────────────────────────────────────────────────────── */
.reveal-section {
  opacity:    0;
  transform:  translateY(22px);
  transition:
    opacity   var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}

.reveal-section.is-visible {
  opacity:   1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-section {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}


/* ── STAGGER ANIMATIONS ──────────────────────────────────────────────────────
   Child items start invisible within their reveal-section parent.
   When parent gets .is-visible, children cascade in with nth-child delays.
   All use transform + opacity only (GPU-accelerated).
   ────────────────────────────────────────────────────────────────────────── */

/* Trust bar items */
.trust-bar .trust-item {
  opacity:    0;
  transform:  translateY(10px);
  transition:
    opacity   500ms var(--ease-out),
    transform 500ms var(--ease-out);
}
.trust-bar.is-visible .trust-item:nth-child(1) { opacity: 1; transform: none; transition-delay:   0ms; }
.trust-bar.is-visible .trust-item:nth-child(2) { opacity: 1; transform: none; transition-delay:  80ms; }
.trust-bar.is-visible .trust-item:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
.trust-bar.is-visible .trust-item:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.trust-bar.is-visible .trust-item:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }

/* How It Works steps */
.how-it-works .step {
  opacity:    0;
  transform:  translateY(14px);
  transition:
    opacity   var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}
.how-it-works.is-visible .step:nth-child(1) { opacity: 1; transform: none; transition-delay:  80ms; }
.how-it-works.is-visible .step:nth-child(2) { opacity: 1; transform: none; transition-delay: 180ms; }
.how-it-works.is-visible .step:nth-child(3) { opacity: 1; transform: none; transition-delay: 280ms; }

/* Reviews supporting cards */
.reviews-supporting .review {
  opacity:    0;
  transform:  translateY(14px);
  transition:
    opacity   var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}
.reviews.is-visible .reviews-supporting .review:nth-child(1) { opacity: 1; transform: none; transition-delay: 100ms; }
.reviews.is-visible .reviews-supporting .review:nth-child(2) { opacity: 1; transform: none; transition-delay: 200ms; }
.reviews.is-visible .reviews-supporting .review:nth-child(3) { opacity: 1; transform: none; transition-delay: 300ms; }

/* Service addon cards */
.service-addons-grid .svc-addon {
  opacity:    0;
  transform:  translateY(10px);
  transition:
    opacity   500ms var(--ease-out),
    transform 500ms var(--ease-out);
}
.services.is-visible .svc-addon:nth-child(1) { opacity: 1; transform: none; transition-delay:  60ms; }
.services.is-visible .svc-addon:nth-child(2) { opacity: 1; transform: none; transition-delay: 120ms; }
.services.is-visible .svc-addon:nth-child(3) { opacity: 1; transform: none; transition-delay: 180ms; }
.services.is-visible .svc-addon:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.services.is-visible .svc-addon:nth-child(5) { opacity: 1; transform: none; transition-delay: 300ms; }
.services.is-visible .svc-addon:nth-child(6) { opacity: 1; transform: none; transition-delay: 360ms; }
.services.is-visible .svc-addon:nth-child(7) { opacity: 1; transform: none; transition-delay: 420ms; }

/* Gallery items */
.gallery-strip .gallery-item {
  opacity:    0;
  transform:  translateY(12px);
  transition:
    opacity   500ms var(--ease-out),
    transform 500ms var(--ease-out);
}
.work-gallery.is-visible .gallery-item:nth-child(1) { opacity: 1; transform: none; transition-delay:  60ms; }
.work-gallery.is-visible .gallery-item:nth-child(2) { opacity: 1; transform: none; transition-delay: 140ms; }
.work-gallery.is-visible .gallery-item:nth-child(3) { opacity: 1; transform: none; transition-delay: 220ms; }
.work-gallery.is-visible .gallery-item:nth-child(4) { opacity: 1; transform: none; transition-delay: 300ms; }
.work-gallery.is-visible .gallery-item:nth-child(5) { opacity: 1; transform: none; transition-delay: 380ms; }
.work-gallery.is-visible .gallery-item:nth-child(6) { opacity: 1; transform: none; transition-delay: 460ms; }

/* City chips — wave entrance */
.area-chips li {
  opacity:    0;
  transform:  translateY(8px);
  transition:
    opacity   400ms var(--ease-out),
    transform 400ms var(--ease-out);
}
.service-area.is-visible .area-chips li:nth-child(1)  { opacity: 1; transform: none; transition-delay:  40ms; }
.service-area.is-visible .area-chips li:nth-child(2)  { opacity: 1; transform: none; transition-delay:  80ms; }
.service-area.is-visible .area-chips li:nth-child(3)  { opacity: 1; transform: none; transition-delay: 120ms; }
.service-area.is-visible .area-chips li:nth-child(4)  { opacity: 1; transform: none; transition-delay: 160ms; }
.service-area.is-visible .area-chips li:nth-child(5)  { opacity: 1; transform: none; transition-delay: 200ms; }
.service-area.is-visible .area-chips li:nth-child(6)  { opacity: 1; transform: none; transition-delay: 240ms; }
.service-area.is-visible .area-chips li:nth-child(7)  { opacity: 1; transform: none; transition-delay: 280ms; }
.service-area.is-visible .area-chips li:nth-child(8)  { opacity: 1; transform: none; transition-delay: 320ms; }
.service-area.is-visible .area-chips li:nth-child(9)  { opacity: 1; transform: none; transition-delay: 360ms; }
.service-area.is-visible .area-chips li:nth-child(10) { opacity: 1; transform: none; transition-delay: 400ms; }
.service-area.is-visible .area-chips li:nth-child(11) { opacity: 1; transform: none; transition-delay: 440ms; }
.service-area.is-visible .area-chips li:nth-child(12) { opacity: 1; transform: none; transition-delay: 480ms; }
.service-area.is-visible .area-chips li:nth-child(13) { opacity: 1; transform: none; transition-delay: 520ms; }
.service-area.is-visible .area-chips li:nth-child(14) { opacity: 1; transform: none; transition-delay: 560ms; }

/* Luxury icon items */
.luxury-icon-grid .luxury-icon-item {
  opacity:    0;
  transform:  translateY(10px);
  transition:
    opacity   500ms var(--ease-out),
    transform 500ms var(--ease-out);
}
.luxury-seed.is-visible .luxury-icon-item:nth-child(1) { opacity: 1; transform: none; transition-delay:  80ms; }
.luxury-seed.is-visible .luxury-icon-item:nth-child(2) { opacity: 1; transform: none; transition-delay: 160ms; }
.luxury-seed.is-visible .luxury-icon-item:nth-child(3) { opacity: 1; transform: none; transition-delay: 240ms; }
.luxury-seed.is-visible .luxury-icon-item:nth-child(4) { opacity: 1; transform: none; transition-delay: 320ms; }

/* Why Us comparison table rows */
.comparison-table tbody tr {
  opacity:    0;
  transform:  translateY(8px);
  transition:
    opacity   450ms var(--ease-out),
    transform 450ms var(--ease-out);
}
.why-us.is-visible .comparison-table tbody tr:nth-child(1) { opacity: 1; transform: none; transition-delay:  80ms; }
.why-us.is-visible .comparison-table tbody tr:nth-child(2) { opacity: 1; transform: none; transition-delay: 140ms; }
.why-us.is-visible .comparison-table tbody tr:nth-child(3) { opacity: 1; transform: none; transition-delay: 200ms; }
.why-us.is-visible .comparison-table tbody tr:nth-child(4) { opacity: 1; transform: none; transition-delay: 260ms; }
.why-us.is-visible .comparison-table tbody tr:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
.why-us.is-visible .comparison-table tbody tr:nth-child(6) { opacity: 1; transform: none; transition-delay: 380ms; }
.why-us.is-visible .comparison-table tbody tr:nth-child(7) { opacity: 1; transform: none; transition-delay: 440ms; }

@media (prefers-reduced-motion: reduce) {
  .trust-bar .trust-item,
  .how-it-works .step,
  .reviews-supporting .review,
  .service-addons-grid .svc-addon,
  .gallery-strip .gallery-item,
  .area-chips li,
  .luxury-icon-grid .luxury-icon-item,
  .comparison-table tbody tr {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}


/* ── LAYOUT UTILITIES ───────────────────────────────────────────────────────── */
.container {
  width:      100%;
  max-width:  var(--container-width);
  margin:     0 auto;
  padding:    0 var(--container-pad);
}

.section-pad {
  padding-block: var(--section-pad);
}


/* ── TYPOGRAPHY SCALE ───────────────────────────────────────────────────────── */
.section-title {
  font-family:    var(--font-head);
  font-weight:    800;
  font-size:      clamp(1.75rem, 3.5vw, 2.5rem);
  line-height:    1.1;
  letter-spacing: var(--letter-head);
  margin-bottom:  var(--space-8);
  color:          var(--text-primary);
}


/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-6);
  font-family:     var(--font-head);
  font-size:       0.9375rem;
  font-weight:     700;
  text-decoration: none;
  border-radius:   var(--radius-md);
  transition:
    background-color var(--t-fast) ease,
    color            var(--t-fast) ease,
    transform        var(--t-fast) ease,
    outline-color    var(--t-fast) ease;
  cursor:          pointer;
  white-space:     nowrap;
  line-height:     1;
  min-height:      44px;    /* tap target */
}

.btn:active { transform: translateY(1px) scale(0.97); transition-duration: 80ms; }

/* Red — primary CTA */
.btn-red {
  background-color: var(--red);
  color:            var(--text-on-dark);
}
.btn-red:hover {
  background-color: var(--red-deep);
  transform:        translateY(-1px);
}

/* Gold — secondary CTA */
.btn-gold {
  background-color: var(--gold);
  color:            var(--text-on-gold);
}
.btn-gold:hover {
  background-color: var(--gold-deep);
  transform:        translateY(-1px);
}
.btn-red:focus-visible {
  outline-color: var(--gold);
}

.btn-gold:focus-visible {
  outline-color: var(--black);
}

/* Outline white — ghost on dark backgrounds */
.btn-outline-white {
  background-color: transparent;
  color:            var(--text-on-dark);
  outline:          2px solid var(--white-a45);
  outline-offset:   -2px;
}
.btn-outline-white:hover {
  background-color: var(--white-a10);
  outline-color:    var(--text-on-dark);
}
.btn-outline-white:focus-visible {
  outline-color: var(--text-on-dark);
  outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════ STICKY HEADER */
.site-header {
  position:         sticky;
  top:              0;
  z-index:          100;
  background-color: var(--black);
  box-shadow:       0 1px 0 oklch(100% 0 0 / 0.06);
  transition:       box-shadow 200ms var(--ease-out);
}

.site-header.is-scrolled {
  box-shadow: 0 2px 16px oklch(0% 0 0 / 0.30);
}

/* ── HEADER ANNOUNCEMENT BAR ─────────────────────────────────────────────────── */
.header-announce {
  background:      var(--red);
  color:           var(--text-on-dark);
  text-align:      center;
  padding:         7px var(--container-pad);
  font-family:     var(--font-head);
  font-size:       0.8125rem;
  font-weight:     700;
  letter-spacing:  0.025em;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
  flex-wrap:       wrap;
  line-height:     1.4;
}

/* Pulsing live-status dot */
.announce-indicator {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--gold);
  flex-shrink:   0;
  animation:     announce-pulse 1.8s ease-in-out infinite;
}

@keyframes announce-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    box-shadow: 0 0 0 0   oklch(69% 0.108 66 / 0.6); }
  50%       { opacity: 0.6; transform: scale(0.80); box-shadow: 0 0 0 5px oklch(69% 0.108 66 / 0); }
}

.announce-link {
  color:            oklch(88% 0.12 66); /* lightened gold for 4.5:1 contrast on red bg (WCAG AA) */
  text-decoration:  none;
  font-weight:      700;
  border-bottom:    1px solid oklch(88% 0.12 66 / 0.55);
  transition:       color var(--t-fast) ease, border-color var(--t-fast) ease;
  padding-bottom:   1px;
  white-space:      nowrap;
}
.announce-link:hover {
  color:         oklch(82% 0.12 66);
  border-color:  oklch(82% 0.12 66 / 0.7);
}

@media (max-width: 540px) {
  .header-announce { font-size: 0.75rem; gap: var(--space-2); }
  .announce-link { display: none; }
}

/* ── HEADER BOOK BUTTON URGENCY ANIMATION ────────────────────────────────────── */
/* Repeating glow-ring attention pulse — fires every 4s after initial 2s settle */
@keyframes btn-gold-attention {
  0%, 80%, 100% { box-shadow: none; }
  88%           { box-shadow: 0 0 0 3px oklch(69% 0.108 66 / 0.55), 0 0 0 7px oklch(69% 0.108 66 / 0.15); }
}

.header-book-btn {
  animation: btn-gold-attention 4.5s ease-in-out infinite;
  animation-delay: 2s;
}

@media (prefers-reduced-motion: reduce) {
  .announce-indicator { animation: none; }
  .header-book-btn { animation: none; }
}

.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  max-width:       var(--container-width);
  margin:          0 auto;
  padding:         var(--space-3) var(--container-pad);
  gap:             var(--space-4);
}

.logo-link {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  text-decoration: none;
  flex-shrink:     0;
}

/* Logo wrapper — white circle clips badge emblem to circle */
.logo-wrap {
  position:         relative;
  width:            40px;
  height:           40px;
  border-radius:    50%;
  background-color: oklch(98% 0 0);
  flex-shrink:      0;
  overflow:         hidden;
}

.logo-fallback {
  position:    absolute;
  inset:       0;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size:   0.6875rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color:       var(--text-on-dark);
  user-select: none;
}

.logo {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
}

.logo-wordmark {
  font-family:    var(--font-head);
  font-weight:    900;
  font-size:      0.9375rem;
  color:          var(--text-on-dark);
  letter-spacing: 0.01em;
  line-height:    1.2;
}

@media (max-width: 460px) {
  .logo-wordmark { display: none; }
}

.header-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
}

.phone-link {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  color:           var(--text-on-dark);
  font-family:     var(--font-head);
  font-weight:     700;
  font-size:       0.875rem;
  text-decoration: none;
  transition:      color var(--t-fast) ease;
  min-height:      44px;
}
.phone-link:hover { color: var(--gold); }

@media (max-width: 380px) {
  .phone-text { font-size: 0.75rem; }
}


/* ══════════════════════════════════════════════════════════════════════ HERO */
.hero {
  background-color: var(--black);
  color:            var(--text-on-dark);
  padding-top:      clamp(var(--space-10), 8vw, var(--space-16));
  padding-bottom:   clamp(var(--space-16), 10vw, var(--space-24));
  position:         relative;
  overflow:         hidden;
}

/* Industrial dot-grid texture — depth without decoration */
.hero::before {
  content:             '';
  position:            absolute;
  inset:               0;
  background-image:    radial-gradient(circle, oklch(30% 0.010 80) 1.5px, transparent 1.5px);
  background-size:     28px 28px;
  background-position: 0 0;
  opacity:             0.45;
  pointer-events:      none;
}

.hero-inner {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-10);
  max-width:             var(--container-width);
  margin:                0 auto;
  padding:               0 var(--container-pad);
  align-items:           center;
  position:              relative;
  z-index:               1;
}

@media (min-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr 260px;
    gap:                   clamp(var(--space-12), 6vw, var(--space-16));
  }
}

.hero-urgency {
  display:        block;
  font-family:    var(--font-body);
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  color:          var(--red);
  text-transform: uppercase;
  margin-bottom:  var(--space-2);
}

/* Hero badge */
.hero-badge {
  display:          inline-block;
  font-family:      var(--font-head);
  font-size:        0.6875rem;
  font-weight:      700;
  letter-spacing:   var(--letter-label);
  text-transform:   uppercase;
  color:            var(--gold);
  background-color: var(--gold-a15);
  padding:          var(--space-1) var(--space-3);
  border-radius:    var(--radius-sm);
  margin-bottom:    var(--space-5);
}

/* H1 */
.hero h1 {
  font-family:    var(--font-head);
  font-weight:    900;
  font-size:      clamp(2.8rem, 9vw, 6.5rem);
  line-height:    0.95;
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-3);
}

/* Red rule that sweeps in from left after the headline lands */
.h1-rule {
  display:          block;
  height:           3px;
  width:            clamp(100px, 28%, 180px);
  background:       var(--red);
  margin-bottom:    var(--space-6);
  transform-origin: left center;
}

.hero-sub {
  font-size:     clamp(1rem, 1.8vw, 1.1875rem);
  line-height:   1.6;
  color:         oklch(82% 0.008 98);
  max-width:     52ch;
  margin-bottom: var(--space-6);
}

.hero-sub strong {
  color:        var(--gold);
  font-weight:  600;
}

/* Star rating */
.hero-stars {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  margin-bottom: var(--space-8);
  flex-wrap:     wrap;
}

.stars {
  color:          var(--gold);
  font-size:      1.0625rem;
  letter-spacing: 3px;
  line-height:    1;
}

.review-count {
  font-family: var(--font-head);
  font-size:   0.8125rem;
  font-weight: 600;
  color:       oklch(68% 0.008 98);
}

/* CTA row */
.hero-ctas {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-3);
}

/* Below ~520px both buttons stack full-width — Book CTA (red) first for visual priority */
@media (max-width: 519px) {
  .hero-ctas {
    flex-direction: column-reverse; /* primary red CTA appears topmost */
  }

  .hero-ctas .btn {
    width:           100%;
    justify-content: center;
  }
}

/* ─── Price anchor block (desktop only) */
.hero-price-block {
  display: none;
}

@media (min-width: 768px) {
  .hero-price-block {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
  }
}

.price-anchor {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  padding:          var(--space-10) var(--space-8);
  background-color: oklch(11% 0.006 80);
  border:           2px solid var(--gold);
  border-radius:    var(--radius-xl);
  text-align:       center;
  gap:              var(--space-2);
  box-shadow:
    0 0 80px oklch(69% 0.108 66 / 0.16),
    0 20px 60px oklch(0% 0 0 / 0.50),
    inset 0 1px 0 oklch(69% 0.108 66 / 0.35);
}

.price-anchor-eyebrow {
  font-family:    var(--font-head);
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  color:          var(--gold);
  background:     oklch(69% 0.108 66 / 0.15);
  padding:        3px 10px;
  border-radius:  999px;
  margin-bottom:  var(--space-1);
}

.price-label {
  font-family:    var(--font-head);
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  color:          oklch(65% 0.010 98);
}

.price-amount {
  font-family:         var(--font-head);
  font-size:           clamp(3.5rem, 8vw, 5.5rem);
  font-weight:         900;
  letter-spacing:      var(--letter-head);
  line-height:         1;
  color:               var(--gold);
  font-variant-numeric: tabular-nums;
}

.price-tag {
  font-family:    var(--font-head);
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          oklch(68% 0.010 98); /* boosted from 55% for better readability on dark */
}


/* ── HERO ENTRY CHOREOGRAPHY ────────────────────────────────────────────────── */
/* Each hero element enters with its own timing via @starting-style.             */
/* Unsupported browsers (rare in 2026): elements render immediately, no         */
/* animation — a correct and clean fallback.                                    */

.h1-line { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* Urgency label: fades in first, before the badge */
  .hero-urgency {
    transition: opacity 250ms var(--ease-out) 0ms;
  }
  @starting-style {
    .hero-urgency { opacity: 0; }
  }

  /* Badge: sweeps in from left */
  .hero-badge {
    transition:
      opacity   320ms var(--ease-out) 30ms,
      transform 320ms var(--ease-out) 30ms;
  }
  @starting-style {
    .hero-badge { opacity: 0; transform: translateX(-24px); }
  }

  /* H1 lines: increasing Y travel per line — each line stamps harder than the last */
  .h1-line:nth-child(1) {
    transition:
      opacity   560ms var(--ease-out)  80ms,
      transform 560ms var(--ease-out)  80ms;
  }
  @starting-style {
    .h1-line:nth-child(1) { opacity: 0; transform: translateY(44px); }
  }

  .h1-line:nth-child(2) {
    transition:
      opacity   560ms var(--ease-out) 210ms,
      transform 560ms var(--ease-out) 210ms;
  }
  @starting-style {
    .h1-line:nth-child(2) { opacity: 0; transform: translateY(56px); }
  }

  .h1-line:nth-child(3) {
    transition:
      opacity   560ms var(--ease-out) 340ms,
      transform 560ms var(--ease-out) 340ms;
  }
  @starting-style {
    .h1-line:nth-child(3) { opacity: 0; transform: translateY(68px); }
  }

  /* Red rule: slides in from left after headline lands */
  .h1-rule {
    transition:
      transform 420ms var(--ease-out) 520ms,
      opacity   420ms var(--ease-out) 520ms;
  }
  @starting-style {
    .h1-rule { transform: scaleX(0); opacity: 0; }
  }

  /* Subheading */
  .hero-sub {
    transition:
      opacity   380ms var(--ease-out) 600ms,
      transform 380ms var(--ease-out) 600ms;
  }
  @starting-style {
    .hero-sub { opacity: 0; transform: translateY(16px); }
  }

  /* Stars */
  .hero-stars {
    transition: opacity 360ms var(--ease-out) 680ms;
  }
  @starting-style {
    .hero-stars { opacity: 0; }
  }

  /* CTA row */
  .hero-ctas {
    transition:
      opacity   360ms var(--ease-out) 760ms,
      transform 360ms var(--ease-out) 760ms;
  }
  @starting-style {
    .hero-ctas { opacity: 0; transform: translateY(12px); }
  }

  /* Price anchor block: clean scale entrance, no bounce */
  .hero-price-block {
    transition:
      opacity   500ms var(--ease-out)  900ms,
      transform 500ms var(--ease-out)  900ms;
  }
  @starting-style {
    .hero-price-block { opacity: 0; transform: translateY(28px) scale(0.94); }
  }
}

/* CTA attention pulse — clean deceleration, no bounce */
@keyframes hero-cta-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}

.hero-ctas .btn-red.is-pulsing {
  animation: hero-cta-pulse 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ── HERO: LANDSCAPE MOBILE ─────────────────────────────────────────────────── */
/* Compact the hero so CTAs land above the fold on landscape-orientation phones  */
@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    padding-top:    var(--space-5);
    padding-bottom: var(--space-6);
  }

  .hero h1 {
    font-size:     clamp(1.75rem, 6vw, 3rem);
    margin-bottom: var(--space-2);
  }

  .hero-badge {
    margin-bottom: var(--space-2);
  }

  .h1-rule {
    margin-bottom: var(--space-4);
  }

  .hero-sub {
    font-size:     0.9375rem;
    margin-bottom: var(--space-4);
  }

  .hero-stars {
    display: none;
  }
}


/* ══════════════════════════════════════════════════════════════ TRUST BAR */
.trust-bar {
  background-color: var(--gold);
  padding-block:    0; /* height controlled by items' padding */
  overflow:         hidden;
  /* Thin rules above and below to define the strip cleanly */
  box-shadow:
    inset 0 2px 0 oklch(14% 0.005 80 / 0.14),
    inset 0 -2px 0 oklch(14% 0.005 80 / 0.14);
}

/* Horizontal scroll on all sizes — items never wrap */
.trust-bar-inner {
  display:     flex;
  align-items: stretch; /* items fill full height so dividers span edge-to-edge */
  gap:         0;
  max-width:   var(--container-width);
  margin:      0 auto;
  /* Full-bleed horizontal scroll — no padding clips the first/last item */
  overflow-x:  auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Fade edges on desktop to hint scrollability */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.trust-bar-inner::-webkit-scrollbar { display: none; }

/* First item gets left padding to clear the fade */
.trust-item:first-child { padding-left: clamp(var(--space-8), 5vw, var(--space-12)); }
.trust-item:last-child  { padding-right: clamp(var(--space-8), 5vw, var(--space-12)); }

.trust-item {
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  font-family:    var(--font-head);
  font-size:      0.875rem;
  font-weight:    700;
  color:          oklch(14% 0.008 70); /* warm dark on gold */
  letter-spacing: 0.025em;
  white-space:    nowrap;
  /* Generous vertical padding — gives the strip real height/presence */
  padding-block:  var(--space-5);
  padding-inline: clamp(var(--space-5), 3vw, var(--space-8));
  flex-shrink:    0;
  position:       relative;
  transition:     background var(--t-fast) ease;
  background:     transparent; /* no pill box */
  border-radius:  0;
}

.trust-item:hover {
  background: oklch(14% 0.005 80 / 0.07);
}

/* Thin vertical rule between each item — no rule before the first */
.trust-item + .trust-item::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        20%;
  height:     60%;
  width:      1px;
  background: oklch(14% 0.005 80 / 0.22);
}

.trust-item svg {
  width:      18px;
  height:     18px;
  flex-shrink: 0;
  opacity:    0.65; /* subordinate — text is the primary signal */
}


/* ════════════════════════════════════════════════════════ HOW IT WORKS */
.how-it-works {
  background-color: var(--offwhite);
}

/* Mobile: vertical stack */
.steps {
  display: grid;
  gap:     var(--space-8);
}

/* Desktop: horizontal timeline */
@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap:       var(--space-6);
    position:  relative;
  }

  /* Connector line running through the circles */
  .steps::before {
    content:          '';
    position:         absolute;
    top:              22px;   /* vertically centered on the 44px circle */
    left:             calc(50% / 3 + 22px);
    right:            calc(50% / 3 + 22px);
    height:           2px;
    background:       linear-gradient(to right, var(--red), oklch(41% 0.152 22 / 0.3));
    pointer-events:   none;
    z-index:          0;
  }
}

/* Mobile: side-by-side circle + body */
.step {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   var(--space-4);
  align-items:           start;
}

/* Desktop: stacked circle above body */
@media (min-width: 768px) {
  .step {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-5);
    position:       relative;
    z-index:        1;
  }
}

.step-circle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      var(--red);
  color:           oklch(96% 0.004 98);
  font-family:     var(--font-head);
  font-size:       1.125rem;
  font-weight:     900;
  flex-shrink:     0;
  line-height:     1;
  box-shadow:      0 2px 12px oklch(41% 0.152 22 / 0.30);
}

.step-body h3 {
  font-family:    var(--font-head);
  font-size:      clamp(1.125rem, 2vw, 1.3125rem);
  font-weight:    800;
  margin-bottom:  var(--space-2);
  letter-spacing: -0.01em;
  line-height:    1.2;
  color:          var(--text-primary);
}

.step-body p {
  font-size:   1rem;
  color:       var(--text-secondary);
  max-width:   32ch;
  line-height: 1.6;
}

.step-body strong { color: var(--text-primary); }


/* ════════════════════════════════════════════════════════════ SERVICES */
.services {
  background-color: var(--offwhite-2);
}

/* ─── Featured: full-width horizontal strip ─────────────────────────────────── */
.service-featured {
  display:          grid;
  grid-template-columns: 1fr;
  gap:              var(--space-8);
  background-color: var(--black);
  color:            var(--text-on-dark);
  border-radius:    var(--radius-xl);
  padding:          clamp(var(--space-8), 5vw, var(--space-12));
  margin-bottom:    clamp(var(--space-8), 5vw, var(--space-10));
  position:         relative;
  overflow:         hidden;
}

/* Dot-grid texture for depth */
.service-featured::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background-image: radial-gradient(circle, oklch(30% 0.010 80) 1px, transparent 1px);
  background-size:  24px 24px;
  opacity:          0.35;
  pointer-events:   none;
}

@media (min-width: 768px) {
  .service-featured {
    grid-template-columns: 1fr auto auto;
    align-items:           center;
    gap:                   clamp(var(--space-8), 5vw, var(--space-12));
  }
}

.svc-info {
  position: relative;
  z-index:  1;
}

.svc-badge {
  display:          inline-block;
  font-family:      var(--font-head);
  font-size:        0.625rem;
  font-weight:      700;
  letter-spacing:   var(--letter-label);
  text-transform:   uppercase;
  color:            oklch(14% 0.008 70);
  background:       var(--gold);
  padding:          4px 12px;
  border-radius:    999px;
  margin-bottom:    var(--space-4);
}

.svc-name {
  font-family:    var(--font-head);
  font-size:      clamp(1.625rem, 3vw, 2.25rem);
  font-weight:    900;
  letter-spacing: var(--letter-head);
  line-height:    1.05;
  margin-bottom:  var(--space-4);
  color:          var(--text-on-dark);
}

.svc-desc {
  font-size:  1rem;
  color:      oklch(78% 0.008 98);
  max-width:  42ch;
  line-height: 1.65;
}

.svc-cta-mobile {
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .svc-cta-mobile { display: none; }
}

/* "What's included" feature list — middle column */
.svc-includes {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  flex-shrink:    0;
  position:       relative;
  z-index:        1;
}

@media (min-width: 768px) {
  .svc-includes {
    border-inline: 1px solid oklch(95% 0.004 98 / 0.12);
    padding-inline: clamp(var(--space-8), 4vw, var(--space-10));
  }
}

@media (max-width: 767px) {
  .svc-includes {
    padding-top: var(--space-4);
    border-top:  1px solid oklch(95% 0.004 98 / 0.12);
  }
}

.svc-includes li {
  display:        flex;
  align-items:    center;
  gap:            var(--space-3);
  font-family:    var(--font-head);
  font-size:      0.875rem;
  font-weight:    700;
  color:          oklch(82% 0.008 98);
  letter-spacing: 0.01em;
  white-space:    nowrap;
}

.svc-includes li::before {
  content:       '';
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--red);
  flex-shrink:   0;
}

/* Price + CTA — right column */
.svc-price-col {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-3);
  flex-shrink:    0;
  position:       relative;
  z-index:        1;
}

@media (min-width: 768px) {
  .svc-price-col {
    align-items: center;
    text-align:  center;
    min-width:   160px;
  }
}

@media (max-width: 767px) {
  .svc-price-col .btn { display: none; }
}

.svc-price {
  display:              block;
  font-family:          var(--font-head);
  font-size:            clamp(3rem, 7vw, 4.5rem);
  font-weight:          900;
  letter-spacing:       var(--letter-head);
  color:                var(--gold);
  line-height:          1;
  font-variant-numeric: tabular-nums;
}

.svc-price-label {
  display:        block;
  font-family:    var(--font-head);
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          oklch(68% 0.010 98);
  line-height:    1.5;
}

/* ─── Additional services ────────────────────────────────────────────────────── */
.service-addons-header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             var(--space-4);
  padding-bottom:  var(--space-4);
  border-bottom:   2px solid var(--black-a10);
  flex-wrap:       wrap;
}

.service-addons-label {
  font-family:    var(--font-head);
  font-size:      0.6875rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--letter-label);
  color:          var(--text-primary);
}

.service-addons-note {
  font-family:    var(--font-head);
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: 0.02em;
  color:          var(--text-secondary);
}

.service-addons-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr); /* mobile: 2 columns avoids orphaned single-item rows */
  border-inline:         1px solid var(--black-a10);
}

@media (min-width: 640px) {
  .service-addons-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (min-width: 1024px) {
  .service-addons-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.svc-addon {
  padding:    var(--space-5);
  border-top: 1px solid var(--black-a10);
  transition: background var(--t-fast) ease;
}

.svc-addon:hover {
  background: oklch(14% 0.005 80 / 0.04);
}

.svc-addon-name {
  font-family:   var(--font-head);
  font-size:     0.9375rem;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: var(--space-2);
  line-height:   1.2;
}

.svc-addon-desc {
  font-size:   0.8125rem;
  color:       var(--text-secondary);
  line-height: 1.55;
}


/* ══════════════════════════════════════════════════════════ SOCIAL PROOF */
.reviews {
  background-color: var(--offwhite);
}

.reviews-header {
  margin-bottom: var(--space-8);
}

.reviews-header .section-title {
  margin-bottom: var(--space-3);
}

.reviews-aggregate {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   1rem;
  color:       var(--text-secondary);
  flex-wrap:   wrap;
}

.reviews-aggregate strong { color: var(--text-primary); }

/* ─── Hero pullquote — editorial full-width dark block */
.review-pullquote {
  background-color: var(--black);
  color:            var(--text-on-dark);
  border-radius:    var(--radius-xl);
  padding:          clamp(var(--space-8), 5vw, var(--space-12));
  margin-bottom:    var(--space-8);
  position:         relative;
  overflow:         hidden;
}

/* Decorative quote mark behind the text */
.pullquote-mark {
  position:    absolute;
  top:         -0.15em;
  left:        clamp(var(--space-6), 4vw, var(--space-10));
  font-family: var(--font-head);
  font-size:   clamp(6rem, 14vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color:       var(--gold);
  opacity:     0.15;
  user-select: none;
  pointer-events: none;
  aria-hidden: true;
}

.review-pullquote-body {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-6);
  align-items:           end;
}

@media (min-width: 640px) {
  .review-pullquote-body {
    grid-template-columns: 1fr auto;
  }
}

.review-pullquote blockquote p {
  font-family:    var(--font-head);
  font-size:      clamp(1.1rem, 2.2vw, 1.4375rem);
  font-weight:    700;
  line-height:    1.6;
  letter-spacing: -0.01em;
  color:          var(--text-on-dark);
  margin-bottom:  var(--space-5);
  padding-left:   clamp(var(--space-8), 6vw, var(--space-16));
}

.review-pullquote blockquote footer {
  padding-left: clamp(var(--space-8), 6vw, var(--space-16));
}

.review-pullquote blockquote footer cite {
  font-family: var(--font-head);
  font-size:   0.875rem;
  font-weight: 700;
  color:       var(--gold);
  font-style:  normal;
}

/* Rating badge inside pullquote */
.pullquote-rating {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              var(--space-2);
  padding:          var(--space-5) var(--space-6);
  background-color: var(--red-a12);
  border-radius:    var(--radius-lg);
  text-align:       center;
  min-width:        110px;
  flex-shrink:      0;
}

.pullquote-rating .stars {
  font-size:      1.125rem;
  letter-spacing: 3px;
}

.pullquote-rating-label {
  font-family:    var(--font-head);
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          oklch(62% 0.010 98);
}

/* ─── Supporting reviews — 3-column equal grid */
.reviews-supporting {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-5);
}

@media (min-width: 560px) {
  .reviews-supporting {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .reviews-supporting {
    grid-template-columns: repeat(3, 1fr);
  }
}

.review {
  background-color: var(--offwhite-2);
  border-radius:    10px;
  padding:          var(--space-6);
  transition:       transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.review:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 20px oklch(14% 0.005 80 / 0.10);
}

.review-stars {
  color:          var(--gold);
  font-size:      0.9375rem;
  letter-spacing: 2px;
  margin-bottom:  var(--space-3);
  line-height:    1;
}

.review p {
  font-size:     1rem;
  line-height:   1.65;
  color:         var(--text-primary);
  margin-bottom: var(--space-4);
}

.review footer {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-wrap:   wrap;
}

.review footer cite {
  font-family: var(--font-head);
  font-size:   0.8125rem;
  font-weight: 700;
  color:       var(--text-secondary);
  font-style:  normal;
}

.review-date {
  font-family: var(--font-head);
  font-size:   0.75rem;
  font-weight: 700;
  color:       var(--text-secondary);
  background:  var(--black-a10);
  border-radius: 999px;
  padding:     2px 10px;
  letter-spacing: 0.02em;
}

.reviews-cta {
  margin-top:  clamp(var(--space-8), 5vw, var(--space-12));
  text-align:  center;
}


/* ══════════════════════════════════════════════════════ WORK GALLERY */
.work-gallery {
  background-color: var(--black);
  overflow:         hidden;
}

.gallery-strip {
  display:                  flex;
  gap:                      2px;
  overflow-x:               auto;
  scroll-snap-type:         x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:          none;
  cursor:                   grab;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip:active { cursor: grabbing; }

.gallery-item {
  flex:              0 0 clamp(240px, 38vw, 420px);
  aspect-ratio:     4 / 3;
  overflow:         hidden;
  scroll-snap-align: start;
  position:         relative;
}

.gallery-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s cubic-bezier(0.25, 0, 0, 1);
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-caption {
  position:         absolute;
  bottom:           var(--space-3);
  left:             var(--space-3);
  background:       oklch(14% 0.005 80 / 0.85); /* boosted opacity for consistent WCAG AA on all image colors */
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius:    999px;
  padding:          4px 12px;
  font-family:      var(--font-head);
  font-size:        0.75rem;
  font-weight:      700;
  color:            oklch(92% 0.004 98);
  letter-spacing:   0.03em;
  pointer-events:   none;
  white-space:      nowrap;
}


/* ══════════════════════════════════════════════════════ SERVICE AREA */
.service-area {
  background-color: var(--offwhite-2);
}

.area-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 768px) {
  .area-layout {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-12), 8vw, var(--space-16));
    align-items: start;
  }
}

.area-statement-col .section-title {
  margin-bottom: var(--space-5);
}

.area-body {
  font-size:     1rem;
  color:         var(--text-secondary);
  line-height:   1.6;
  max-width:     38ch;
  margin-bottom: var(--space-8);
}

.area-body strong {
  color:       var(--text-primary);
  font-weight: 600;
}

.area-stat {
  display:       flex;
  align-items:   baseline;
  gap:           var(--space-3);
  margin-bottom: var(--space-8);
}

.area-stat-num {
  font-family:          var(--font-head);
  font-size:            clamp(3rem, 6vw, 4.5rem);
  font-weight:          900;
  color:                var(--red);
  line-height:          1;
  letter-spacing:       var(--letter-head);
  font-variant-numeric: tabular-nums;
}

.area-stat-label {
  font-family:    var(--font-head);
  font-size:      0.8125rem;
  font-weight:    700;
  color:          var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height:    1.35;
}

.area-cities-col {
  padding-top: 0;
}

@media (min-width: 768px) {
  .area-cities-col {
    padding-top: var(--space-3);
  }
}

.area-cities-header {
  font-family:    var(--font-head);
  font-size:      0.6875rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--letter-label);
  color:          var(--text-secondary);
  margin-bottom:  var(--space-5);
}

.area-chips {
  list-style:    none;
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-2);
  margin-bottom: var(--space-6);
}

.area-chip {
  display:        inline-block;
  font-family:    var(--font-head);
  font-size:      0.875rem;
  font-weight:    700;
  color:          var(--text-primary);
  padding:        var(--space-3) var(--space-5); /* increased for 44px tap target compliance */
  border:         1px solid oklch(20% 0.008 280 / 0.15);
  border-radius:  100px;
  letter-spacing: 0.01em;
  line-height:    1;
  white-space:    nowrap;
}

.area-note {
  font-size: 1rem;
  color:     var(--text-secondary);
}

.area-note a {
  color:                  var(--red);
  text-decoration:        underline;
  text-underline-offset:  3px;
  font-weight:            600;
}
.area-note a:hover { color: var(--red-deep); }


/* ══════════════════════════════════════════════════════════════ FAQ */
.faq {
  background-color: var(--offwhite);
}

.faq-container .section-title {
  margin-bottom: var(--space-6);
}

.faq-list {
  max-width: 740px;
}

.faq-item {
  border-bottom: 1px solid var(--black-a10);
}

.faq-item:first-of-type {
  border-top: 1px solid var(--black-a10);
}

/* Question row */
.faq-q {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  cursor:          pointer;
  list-style:      none;
  padding-block:   var(--space-5);
  font-family:     var(--font-head);
  font-size:       1rem;
  font-weight:     700;
  color:           var(--text-primary);
  user-select:     none;
  gap:             var(--space-4);
  line-height:     1.3;
}

/* Remove browser default marker */
.faq-q::-webkit-details-marker { display: none; }
summary.faq-q { list-style: none; }

/* + / × toggle */
.faq-q::after {
  content:     '+';
  font-size:   1.375rem;
  font-weight: 300;
  color:       var(--red);
  flex-shrink: 0;
  line-height: 1;
  transition:  transform var(--t-fast) var(--ease-out);
}

details[open] .faq-q::after {
  transform: rotate(45deg);
}

/* Open/close animation via grid-template-rows (handles opening smoothly) */
.faq-a-wrap {
  display:               grid;
  grid-template-rows:    0fr;
  transition:            grid-template-rows var(--t-med) var(--ease-out);
}

details[open] .faq-a-wrap {
  grid-template-rows: 1fr;
}

.faq-a {
  overflow: hidden;
}

.faq-a p {
  padding-bottom: var(--space-6);
  font-size:      1rem;
  line-height:    1.65;
  color:          var(--text-secondary);
  max-width:      66ch;
}

.faq-a strong { color: var(--text-primary); }

.faq-a a {
  color:                 var(--red);
  text-decoration:       underline;
  text-underline-offset: 3px;
}
.faq-a a:hover { color: var(--red-deep); }


/* ════════════════════════════════════════════════════════════ BOOK NOW */
.booking {
  background-color: var(--black);
  color:            var(--text-on-dark);
  overflow:         hidden;
}

/* Two-column split: dark info left · offwhite calendar right */
.booking-split {
  display:    flex;
  align-items: stretch;
}

/* ── Left info panel */
.booking-info {
  flex:            0 0 42%;
  background:      var(--black);
  display:         flex;
  align-items:     center;
  padding-block:   clamp(var(--space-12), 9vw, var(--space-24));
  padding-inline:  clamp(var(--space-6), 5vw, var(--space-12));
  border-right:    1px solid oklch(95% 0.004 98 / 0.06);
}

.booking-info-inner {
  width:   100%;
  max-width: 420px;
  margin-inline: auto;
}

.booking-heading {
  font-family:    var(--font-head);
  font-size:      clamp(2rem, 3vw, 2.75rem);
  font-weight:    900;
  letter-spacing: var(--letter-head);
  line-height:    1.05;
  color:          var(--text-on-dark);
  margin-bottom:  var(--space-4);
}

/* Price badge — reaffirms flat rate at the decision moment */
.booking-price-badge {
  display:       flex;
  align-items:   baseline;
  gap:           var(--space-2);
  margin-bottom: var(--space-5);
  padding:       var(--space-3) var(--space-4);
  border-left:   3px solid var(--gold);
  background:    var(--gold-a15);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.booking-price-amount {
  font-family:  var(--font-head);
  font-size:    2rem;
  font-weight:  900;
  line-height:  1;
  color:        var(--gold);
}

.booking-price-label {
  font-family:     var(--font-head);
  font-size:       0.8125rem;
  font-weight:     700;
  letter-spacing:  var(--letter-label);
  text-transform:  uppercase;
  color:           oklch(72% 0.008 98);
}

.booking-sub {
  font-size:     1rem;
  color:         oklch(72% 0.008 98);
  margin-bottom: var(--space-8);
  line-height:   1.65;
}

/* Trust bullet list */
.booking-trust {
  list-style:      none;
  padding:         0;
  margin:          0 0 var(--space-8);
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-4);
}

.booking-trust-item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  font-size:   0.9375rem;
  color:       var(--text-on-dark);
  line-height: 1.45;
}

.booking-trust-item svg {
  flex-shrink: 0;
  margin-top:  0.1em;
}

.phone-cta-link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  font-family:     var(--font-head);
  font-size:       1rem;
  font-weight:     700;
  color:           var(--gold);
  text-decoration: none;
  transition:      color var(--t-fast) ease;
  min-height:      44px;
}
.phone-cta-link:hover { color: var(--gold-deep); }

/* In the booking panel, phone CTA gets full-width button treatment */
.booking-phone-btn {
  display:         flex;
  justify-content: center;
  width:           100%;
  box-sizing:      border-box;
  padding:         var(--space-3) var(--space-5);
  border:          1.5px solid oklch(69% 0.108 66 / 0.35);
  border-radius:   var(--radius-md);
  transition:      border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.booking-phone-btn:hover {
  border-color: var(--gold);
  color:        var(--gold);
}

/* ── Right calendar panel — offwhite matches Calendly's natural bg */
.booking-calendar {
  flex:       1;
  background: var(--offwhite);
  display:    flex;
  flex-direction: column;
  min-height: 660px;
}

.booking-calendar .calendly-inline-widget {
  flex:         1;
  width:        100%;
  min-height:   660px;
  border-radius: 0;
  overflow:     hidden;
  position:     relative;
  background:   var(--offwhite);
}

/* Fallback shown when widget is blocked or JS fails */
.calendly-fallback {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-5);
  padding:         var(--space-12) var(--space-8);
  min-height:      400px;
  text-align:      center;
}

.calendly-fallback p {
  font-family:   var(--font-head);
  font-size:     1rem;
  font-weight:   700;
  color:         var(--text-secondary);
  margin-bottom: 0;
}

.calendly-inline-widget.calendly-loaded .calendly-fallback {
  display: none;
}

/* Mobile: calendar first (column-reverse), info panel below */
@media (max-width: 767px) {
  .booking-split {
    flex-direction: column-reverse;
  }

  .booking-info {
    flex:        none;
    border-right: none;
    border-top:  1px solid oklch(95% 0.004 98 / 0.08);
    padding-block: var(--space-10);
  }

  .booking-info-inner {
    max-width: 100%;
  }

  .booking-calendar {
    min-height: 680px;
  }

  .booking-calendar .calendly-inline-widget {
    min-height: 680px;
  }
}

/* Tablet: narrow the info column */
@media (min-width: 768px) and (max-width: 1023px) {
  .booking-info {
    flex: 0 0 38%;
  }
}

@media (min-width: 1200px) {
  .booking-info {
    flex: 0 0 40%;
  }
}

/* Booking confirmation panel — hidden until calendly.event_scheduled fires */
.booking-confirmation {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-4);
  padding:         var(--space-12) var(--space-8);
  text-align:      center;
  min-height:      400px;
}

.booking-confirmation[hidden] {
  display: none;
}

.booking-confirmed-heading {
  font-family:   var(--font-head);
  font-size:     clamp(1.5rem, 3vw, 2rem);
  font-weight:   900;
  color:         var(--text-primary);
  margin-bottom: 0;
}

.booking-confirmed-sub {
  font-size:   1rem;
  color:       var(--text-secondary);
  max-width:   360px;
  line-height: 1.55;
  margin:      0;
}

/* When confirmed: hide the widget, show confirmation message */
.booking-confirmed .calendly-inline-widget {
  display: none;
}

.booking-confirmed .booking-confirmation {
  display: flex;
}


/* ════════════════════════════════════════════════════════ LUXURY SEED */
.luxury-seed {
  background-color: var(--black-mid);
  padding-block:    clamp(var(--space-12), 8vw, var(--space-16));
  position:         relative;
  overflow:         hidden;
}

/* Subtle diagonal line texture */
.luxury-seed::before {
  content:      '';
  position:     absolute;
  inset:        0;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 60px,
    oklch(95% 0.004 98 / 0.022) 60px,
    oklch(95% 0.004 98 / 0.022) 61px
  );
  pointer-events: none;
}

/* Right-side gold wash */
.luxury-seed::after {
  content:        '';
  position:       absolute;
  top:            0;
  right:          0;
  width:          clamp(100px, 20vw, 260px);
  bottom:         0;
  background:     linear-gradient(to left, oklch(69% 0.108 66 / 0.08), transparent);
  pointer-events: none;
}

.luxury-inner {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-10);
  position:              relative;
  z-index:               1;
}

@media (min-width: 768px) {
  .luxury-inner {
    grid-template-columns: 1fr auto;
    align-items:           center;
    gap:                   clamp(var(--space-12), 8vw, var(--space-16));
  }
}

.luxury-eyebrow {
  display:          inline-block;
  font-family:      var(--font-head);
  font-size:        0.6875rem;
  font-weight:      700;
  letter-spacing:   var(--letter-label);
  text-transform:   uppercase;
  color:            var(--gold);
  background:       oklch(69% 0.108 66 / 0.15);
  padding:          var(--space-1) var(--space-3);
  border-radius:    var(--radius-sm);
  margin-bottom:    var(--space-4);
}

.luxury-heading {
  font-family:    var(--font-head);
  font-weight:    900;
  font-size:      clamp(1.75rem, 4vw, 2.75rem);
  line-height:    1.05;
  letter-spacing: var(--letter-head);
  color:          var(--text-on-dark);
  margin-bottom:  var(--space-4);
}

.luxury-body {
  font-size:     clamp(1rem, 1.6vw, 1.0625rem);
  line-height:   1.7;
  color:         oklch(78% 0.008 98);
  max-width:     50ch;
  margin-bottom: var(--space-8);
}

.luxury-ctas {
  display:     flex;
  align-items: center;
  gap:         var(--space-5);
  flex-wrap:   wrap;
}

.luxury-note {
  font-family:    var(--font-head);
  font-size:      0.8125rem;
  font-weight:    700;
  color:          oklch(62% 0.010 98);
  letter-spacing: 0.02em;
}

/* Icon grid — decorative right column */
.luxury-icon-col {
  flex-shrink: 0;
}

.luxury-icon-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-4);
}

.luxury-icon-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-5) var(--space-4);
  background:     oklch(95% 0.004 98 / 0.05);
  border:         1px solid oklch(95% 0.004 98 / 0.08);
  border-radius:  var(--radius-md);
  text-align:     center;
  transition:     background var(--t-fast) ease;
}

.luxury-icon-item:hover {
  background: oklch(69% 0.108 66 / 0.08);
}

.luxury-icon-item svg {
  color: var(--gold);
  flex-shrink: 0;
}

.luxury-icon-item span {
  font-family:    var(--font-head);
  font-size:      0.75rem;
  font-weight:    700;
  color:          oklch(72% 0.008 98);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height:    1.3;
  white-space:    nowrap;
}

@media (max-width: 767px) {
  .luxury-icon-col { display: none; }
}


/* ══════════════════════════════════════════════════════════════ FOOTER */
.site-footer {
  background-color: var(--black);
  padding-block:    var(--space-8);
}

.footer-inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  max-width:       var(--container-width);
  margin:          0 auto;
  padding:         0 var(--container-pad);
}

.footer-logo .logo-wordmark {
  font-size: 0.875rem;
}

.footer-phone {
  font-family:     var(--font-head);
  font-weight:     700;
  font-size:       0.9375rem;
  color:           var(--gold);
  text-decoration: none;
  transition:      color var(--t-fast) ease;
  min-height:      44px;
  display:         inline-flex;
  align-items:     center;
}
.footer-phone:hover { color: var(--text-on-dark); }

.footer-copy {
  font-size: 0.8125rem;
  color:     oklch(72% 0.008 98); /* boosted to ~4.5:1 on dark bg for WCAG AA */
  width:     100%;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-copy {
    width:      auto;
    text-align: left;
  }
}


/* ══════════════════════════════════════════════════════ GUARANTEE BLOCK */
.guarantee {
  background-color: var(--black);
  color:            var(--text-on-dark);
  text-align:       center;
}

.guarantee-container {
  max-width: 640px;
}

.guarantee-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           64px;
  height:          64px;
  border-radius:   50%;
  background:      var(--red);
  color:           oklch(96% 0.004 98);
  margin:          0 auto var(--space-6);
  box-shadow:      0 4px 20px oklch(41% 0.152 22 / 0.40);
}

.guarantee-heading {
  font-family:    var(--font-head);
  font-weight:    900;
  font-size:      clamp(1.75rem, 4vw, 2.75rem);
  line-height:    1.05;
  letter-spacing: -0.01em;
  margin-bottom:  var(--space-5);
  color:          var(--text-on-dark);
}

.guarantee-body {
  font-size:     clamp(1rem, 1.6vw, 1.125rem);
  line-height:   1.7;
  color:         oklch(78% 0.008 98);
  margin-bottom: var(--space-8);
  max-width:     52ch;
  margin-inline: auto;
}

.guarantee-chips {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--space-3);
  margin-bottom:   var(--space-8);
}

.guarantee-chip {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-2);
  font-family:      var(--font-head);
  font-size:        0.8125rem;
  font-weight:      700;
  color:            var(--gold);
  background:       oklch(69% 0.108 66 / 0.12);
  border:           1px solid oklch(69% 0.108 66 / 0.25);
  border-radius:    999px;
  padding:          var(--space-2) var(--space-5);
  letter-spacing:   0.02em;
}


/* ════════════════════════════════════════════════════ WHY CHOOSE US */
.why-us {
  background-color: var(--offwhite-2);
}

.why-us .section-title {
  text-align: center;
}

.comparison-table {
  width:       100%;
  overflow-x:  auto;
  margin-block: var(--space-8);
  border-radius: var(--radius-lg);
  border:        1px solid var(--black-a10);
  background:    var(--offwhite);
}

/* Header row */
.ct-header {
  display:               grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
  background:            var(--black);
  border-radius:         var(--radius-lg) var(--radius-lg) 0 0;
  overflow:              hidden;
}

.ct-header > div {
  padding:  var(--space-4) var(--space-5);
}

.ct-col-name {
  display:        block;
  font-family:    var(--font-head);
  font-size:      0.875rem;
  font-weight:    700;
  color:          var(--text-on-dark);
  letter-spacing: 0.01em;
}

.ct-col-sub {
  display:     block;
  font-size:   0.75rem;
  color:       oklch(73% 0.008 98); /* boosted to ~4.5:1 on dark bg for WCAG AA */
  margin-top:  var(--space-1);
  font-family: var(--font-body);
}

.ct-col--tmp {
  background: oklch(41% 0.152 22 / 0.15);
}

.ct-col--tmp .ct-col-name {
  color: var(--gold);
}

/* Data rows */
.ct-row {
  display:               grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
  border-top:            1px solid var(--black-a10);
}

.ct-row--alt {
  background: var(--offwhite-2);
}

.ct-row-label {
  padding:     var(--space-4) var(--space-5);
  font-family: var(--font-head);
  font-size:   0.9375rem;
  font-weight: 700;
  color:       var(--text-primary);
  display:     flex;
  align-items: center;
}

.ct-cell {
  padding:     var(--space-4) var(--space-5);
  font-size:   0.875rem;
  color:       var(--text-secondary);
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-wrap:   wrap;
}

.ct-cell--tmp {
  background: oklch(41% 0.152 22 / 0.06);
}

.ct-yes  { color: oklch(36% 0.15 22); font-size: 1rem; font-weight: 700; flex-shrink: 0; } /* darkened for AA on light bg */
.ct-no   { color: oklch(40% 0.12 22); font-size: 1rem; flex-shrink: 0; }               /* was 55% — 3.5:1 → now 7:1+ */
.ct-neutral { color: var(--text-secondary); font-size: 1rem; flex-shrink: 0; }
.ct-val  { font-size: 0.8125rem; }

.why-us-cta-text {
  text-align:  center;
  font-family: var(--font-head);
  font-size:   clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color:       var(--text-primary);
  margin-bottom: var(--space-4);
}

.why-us > .container {
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

/* Compact table on mobile */
@media (max-width: 640px) {
  .ct-header,
  .ct-row {
    grid-template-columns: 1.6fr 1fr 1fr 0.8fr;
  }
  .ct-row-label,
  .ct-cell,
  .ct-header > div {
    padding: var(--space-3) var(--space-3);
  }
  .ct-col-name { font-size: 0.75rem; }
  .ct-row-label { font-size: 0.8125rem; }
  .ct-val { display: none; }
}


/* ══════════════════════════════════════════════ TECHNICIAN SPOTLIGHT */
.technician {
  background-color: var(--offwhite);
}

.technician-layout {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-12);
  align-items:           center;
}

@media (min-width: 768px) {
  .technician-layout {
    grid-template-columns: 1fr auto;
    gap:                   clamp(var(--space-12), 8vw, var(--space-16));
  }
}

.technician-eyebrow {
  display:        block;
  font-family:    var(--font-head);
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  color:          var(--red);
  margin-bottom:  var(--space-3);
}

.technician-text .section-title {
  margin-bottom: var(--space-5);
}

.technician-bio {
  font-size:     1rem;
  line-height:   1.7;
  color:         var(--text-secondary);
  max-width:     52ch;
  margin-bottom: var(--space-6);
}

.technician-chips {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-2);
  margin-bottom: var(--space-8);
}

.technician-chip {
  font-family:    var(--font-head);
  font-size:      0.8125rem;
  font-weight:    700;
  color:          var(--text-secondary);
  background:     var(--offwhite-2);
  border:         1px solid var(--black-a15);
  border-radius:  999px;
  padding:        var(--space-2) var(--space-4);
  letter-spacing: 0.02em;
}

.technician-quote {
  position:    relative;
  padding-top: var(--space-5);
}

/* Decorative quotation mark via ::before (not border-left) */
.tq-mark {
  display:     block;
  font-family: var(--font-head);
  font-size:   4rem;
  font-weight: 900;
  line-height: 0.6;
  color:       var(--gold);
  opacity:     0.6;
  margin-bottom: var(--space-3);
  user-select: none;
}

.technician-quote p {
  font-size:     1rem;
  line-height:   1.65;
  color:         var(--text-primary);
  font-style:    italic;
  margin-bottom: var(--space-3);
  max-width:     46ch;
}

.technician-quote cite {
  font-family: var(--font-head);
  font-size:   0.875rem;
  font-weight: 700;
  color:       var(--text-secondary);
  font-style:  normal;
}

/* Technician photo */
.technician-photo {
  flex-shrink: 0;
}

.technician-photo-img {
  width:            clamp(220px, 30vw, 280px);
  aspect-ratio:     4 / 5;
  height:           auto;
  object-fit:       cover;
  object-position:  center top;
  border-radius:    var(--radius-xl);
  box-shadow:       0 16px 48px oklch(0% 0 0 / 15%);
  display:          block;
}

.technician-photo-img {
  display:       block;
  width:         clamp(220px, 30vw, 280px);
  height:        clamp(260px, 36vw, 340px);
  object-fit:    cover;
  object-position: center top;
  border-radius: var(--radius-xl);
}

@media (max-width: 767px) {
  .technician-photo-img {
    width:  100%;
    height: 200px;
  }
}

@media (max-width: 767px) {
  .technician-photo-img {
    width:  clamp(180px, 60vw, 240px);
    margin: 0 auto;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .technician-photo-placeholder {
    height: 140px;
  }
}


/* ══════════════════════════════════════════════ MOBILE STICKY CTA BAR */
.sticky-cta-bar {
  display:     none; /* hidden by default on desktop */
}

@media (max-width: 767px) {
  .sticky-cta-bar {
    display:          flex;
    align-items:      center;
    gap:              var(--space-3);
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    z-index:          200;
    padding:          var(--space-3) var(--space-4);
    padding-bottom:   calc(var(--space-3) + env(safe-area-inset-bottom));
    background:       var(--black);
    border-top:       1px solid oklch(95% 0.004 98 / 0.10);
    box-shadow:       0 -4px 24px oklch(0% 0 0 / 0.28);
    transform:        translateY(100%);
    transition:       transform 300ms var(--ease-out);
  }

  .sticky-cta-bar.is-visible {
    transform: translateY(0);
  }

  .sticky-cta-phone {
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);
    font-family:     var(--font-head);
    font-size:       0.875rem;
    font-weight:     700;
    color:           oklch(82% 0.008 98);
    text-decoration: none;
    flex-shrink:     0;
    min-height:      44px;
    transition:      color var(--t-fast) ease;
    white-space:     nowrap;
  }

  .sticky-cta-phone:hover { color: var(--gold); }

  .sticky-cta-book {
    flex:       1;
    justify-content: center;
    font-size:  0.9375rem;
  }
}


/* ── FOCUS VISIBLE (accessibility) ──────────────────────────────────────────── */
:focus-visible {
  outline:        3px solid var(--gold);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* ── REDUCED MOTION — smooth scroll ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ── BOOKING TRUST — PROMOTIONAL OFFER ROW ──────────────────────────────────── */
.booking-trust-offer {
  color:       var(--gold);
  font-weight: 600;
}


/* ── COOKIE CONSENT BANNER ──────────────────────────────────────────────────── */
/* Minimal dismissible notice. Sits above sticky-cta-bar (z-index 200) at 300,
   floats bottom-right on desktop, bottom-full-width on mobile. Uses --black /
   --gold tokens for visual continuity with the rest of the site. */
.cookie-banner {
  position:         fixed;
  left:             var(--space-3);
  right:            var(--space-3);
  bottom:           var(--space-3);
  z-index:          300;
  display:          flex;
  align-items:      center;
  gap:              var(--space-3);
  padding:          var(--space-3) var(--space-4);
  padding-bottom:   calc(var(--space-3) + env(safe-area-inset-bottom));
  background:       var(--black);
  color:            var(--text-on-dark);
  border:           1px solid oklch(95% 0.004 98 / 0.12);
  border-radius:    var(--radius-md);
  box-shadow:       0 8px 32px oklch(0% 0 0 / 0.45);
  font-family:      var(--font-body);
  font-size:        0.85rem;
  line-height:      1.45;
  opacity:          0;
  transform:        translateY(12px);
  transition:       opacity var(--t-med) var(--ease-out),
                    transform var(--t-med) var(--ease-out);
}
.cookie-banner.is-visible {
  opacity:   1;
  transform: translateY(0);
}
.cookie-banner-text {
  margin: 0;
  flex:   1;
}
.cookie-banner-accept {
  flex-shrink:    0;
  background:     var(--gold);
  color:          var(--text-on-gold);
  border:         none;
  padding:        8px 16px;
  border-radius:  var(--radius-sm);
  font-family:    var(--font-head);
  font-weight:    700;
  font-size:      0.8rem;
  letter-spacing: var(--letter-ui);
  text-transform: uppercase;
  cursor:         pointer;
  transition:     background var(--t-fast) var(--ease-out);
}
.cookie-banner-accept:hover {
  background: var(--gold-deep);
}

@media (min-width: 640px) {
  .cookie-banner {
    left:      auto;
    right:     var(--space-4);
    bottom:    var(--space-4);
    max-width: 420px;
  }
}

/* Lift above the sticky mobile CTA when both are visible */
@media (max-width: 767px) {
  body:has(.sticky-cta-bar.is-visible) .cookie-banner {
    bottom: calc(var(--space-3) + 68px + env(safe-area-inset-bottom));
  }
}