/* Website UI kit — builds on design tokens from ../../colors_and_type.css */

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--bq-font-sans); color: var(--bq-fg); background: var(--bq-bg); }

/* ---------- Nav ---------- */
.bq-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-nav-inner {
  max-width: var(--bq-container-wide);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; gap: 32px;
}
.bq-nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.01em; }
.bq-nav-brand img { height: 44px; width: auto; display: block; }
.bq-nav-brand .name { display: none; }
.bq-nav-links { display: flex; gap: 22px; margin-left: 18px; }
.bq-nav-links a { color: var(--bq-ink-2); font-weight: 500; font-size: 14px; white-space: nowrap; }
.bq-nav-links a:hover { color: var(--bq-fg); text-decoration: none; }
.bq-nav-cta { margin-left: auto; display: flex; gap: 10px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  white-space: nowrap;
  border-radius: 999px;
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--bq-dur) var(--bq-ease);
  font-family: inherit; text-decoration: none;
}
.btn-primary { background: var(--bq-navy); color: #fff; }
.btn-primary:hover { background: var(--bq-deep-blue); transform: translateY(-1px); box-shadow: var(--bq-sh-2); }
.btn-secondary { background: var(--bq-surface); color: var(--bq-fg); border-color: var(--bq-line); }
.btn-secondary:hover { border-color: var(--bq-fg); }
.btn-ghost { color: var(--bq-deep-blue); background: transparent; padding-left: 8px; padding-right: 8px; }
.btn-ghost:hover { background: var(--bq-bg-tint); }

/* ---------- Layout ---------- */
.bq-section { padding: 96px 28px; }
.bq-section-tight { padding: 64px 28px; }
.bq-container { max-width: var(--bq-container); margin: 0 auto; }
.bq-container-wide { max-width: var(--bq-container-wide); margin: 0 auto; }

/* ---------- Home Hero — premium asymmetric layout with credibility card ---------- */
.bq-hero {
  position: relative;
  padding: 120px 28px 100px;
  background: var(--bq-bg);
  color: var(--bq-fg);
  overflow: hidden;
}
.bq-hero-mesh {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 88% 0%, rgba(91,163,217,0.18), transparent 55%),
    radial-gradient(700px 500px at -5% 100%, rgba(91,163,217,0.10), transparent 55%);
  z-index: 0;
}
.bq-hero-grid {
  position: relative; z-index: 1;
  max-width: var(--bq-container-wide);
  margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 80px; align-items: center;
}

/* Copy column */
.bq-hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,163,217,0.10);
  border: 1px solid rgba(91,163,217,0.30);
  color: var(--bq-deep-blue);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 28px;
}
:root[data-theme="dark"] .bq-hero-chip { color: var(--bq-sky); }
.bq-hero-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.18);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}

.bq-hero h1 {
  font-size: 64px; line-height: 1.02; letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0 0 24px;
  color: var(--bq-fg);
}
.bq-hero h1 em { font-style: normal; color: var(--bq-deep-blue); }
.bq-hero-lede {
  font-size: 19px; line-height: 1.6;
  color: var(--bq-fg-muted);
  max-width: 620px;
  margin: 0 0 36px;
}
.bq-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }

.bq-hero-trust {
  margin-top: 24px;
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--bq-fg-subtle); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
.bq-hero-trust .dot { width: 4px; height: 4px; background: var(--bq-sky); border-radius: 50%; }
.bq-hero-trust strong { color: var(--bq-fg); font-weight: 800; }

.bq-service-pipes {
  margin-top: 32px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bq-fg);
  line-height: 1.9;
  max-width: 640px;
}
.bq-service-pipes span { color: var(--bq-sky); margin: 0 8px; font-weight: 800; }

/* Visual side — logo focal point, NO card frame, droplets in open space */
.bq-hero-art {
  position: relative;
  min-width: 0;
  /* No overflow hidden here — let the glow extend naturally into the parent */
}
.bq-hero-card {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 50px 24px 32px;
  /* Overflow hidden only on the droplets container, not the card itself */
  text-align: center;
  min-height: 540px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}
/* Glow now lives as a sibling of .bq-hero-card inside .bq-hero-art,
   so it can bleed naturally beyond the card boundaries. */
.bq-hero-card-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  width: 720px; height: 720px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.28), rgba(91,163,217,0.10) 35%, transparent 65%);
  pointer-events: none;
  filter: blur(4px);
  z-index: 0;
}

/* Mini-droplets falling inside the card — overflow hidden here, not on the card */
.bq-hero-card-droplets {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.bq-hero-card-droplet {
  position: absolute;
  top: -30px;
  color: var(--bq-sky);
  opacity: 0;
  animation: bq-hero-card-droplet-fall 6s linear infinite;
}
.bq-hero-card-droplet svg { width: 100%; height: 100%; display: block; }
.bq-hero-card-droplet:nth-child(1) { left: 8%;  width: 11px; animation-duration: 6.5s; animation-delay: 0s;   }
.bq-hero-card-droplet:nth-child(2) { left: 22%; width: 14px; animation-duration: 5.5s; animation-delay: 1.2s; }
.bq-hero-card-droplet:nth-child(3) { left: 38%; width: 10px; animation-duration: 7s;   animation-delay: 2.4s; }
.bq-hero-card-droplet:nth-child(4) { left: 55%; width: 13px; animation-duration: 6s;   animation-delay: 0.7s; }
.bq-hero-card-droplet:nth-child(5) { left: 72%; width: 12px; animation-duration: 5.8s; animation-delay: 3.0s; }
.bq-hero-card-droplet:nth-child(6) { left: 85%; width: 14px; animation-duration: 6.8s; animation-delay: 1.8s; }
.bq-hero-card-droplet:nth-child(7) { left: 45%; width: 10px; animation-duration: 7.5s; animation-delay: 4.2s; }
@keyframes bq-hero-card-droplet-fall {
  0%   { transform: translateY(0)   scale(0.92); opacity: 0;    }
  15%  {                                          opacity: 0.32; }
  85%  {                                          opacity: 0.32; }
  100% { transform: translateY(520px) scale(1.04); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .bq-hero-card-droplet { animation: none; opacity: 0; }
}

/* Logo — large, centered, focal point */
.bq-hero-card-logo {
  position: relative; z-index: 2;
  width: 300px; max-width: 100%; height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 28px 48px rgba(30,80,144,0.32));
}
.bq-hero-card-logo img { width: 100%; height: auto; display: block; }

/* Footer badges — floating, no divider line */
.bq-hero-card-foot {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 32px;
}
.bq-hero-card-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bq-fg-muted);
  background: var(--bq-bg-tint);
  padding: 6px 11px;
  border-radius: 999px;
}
.bq-hero-card-badge i { width: 13px; height: 13px; color: var(--bq-sky); }

/* Falling mini-droplets — decorative background animation */
.bq-hero-droplets {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.bq-hero-droplet-fall {
  position: absolute;
  top: -40px;
  color: var(--bq-sky);
  opacity: 0;
  animation: bq-dec-droplet-fall 7s linear infinite;
}
.bq-hero-droplet-fall svg { width: 100%; height: 100%; display: block; }
.bq-hero-droplet-fall:nth-child(1) { left: 8%;  width: 14px; animation-duration: 8s;   animation-delay: 0s;   }
.bq-hero-droplet-fall:nth-child(2) { left: 21%; width: 17px; animation-duration: 6.5s; animation-delay: 1.6s; }
.bq-hero-droplet-fall:nth-child(3) { left: 36%; width: 11px; animation-duration: 9s;   animation-delay: 0.5s; }
.bq-hero-droplet-fall:nth-child(4) { left: 49%; width: 15px; animation-duration: 7.5s; animation-delay: 2.8s; }
.bq-hero-droplet-fall:nth-child(5) { left: 64%; width: 13px; animation-duration: 6s;   animation-delay: 1.0s; }
.bq-hero-droplet-fall:nth-child(6) { left: 80%; width: 16px; animation-duration: 8.5s; animation-delay: 3.6s; }

@media (max-width: 1024px) {
  .bq-hero-grid { gap: 56px; }
  .bq-hero h1 { font-size: 54px; }
}
@media (max-width: 900px) {
  .bq-hero { padding: 80px 24px 64px; }
  .bq-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .bq-hero-art { order: -1; max-width: 460px; margin: 0 auto; }
  .bq-hero h1 { font-size: 42px; }
  .bq-hero-lede { font-size: 17px; }
  .bq-hero-card { padding: 32px 28px 28px; }
}

/* ---------- Section head ---------- */
.bq-sec-head { max-width: 780px; margin-bottom: 48px; }
.bq-sec-head .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bq-deep-blue); }
.bq-sec-head h2 { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 12px 0 14px; color: var(--bq-fg); }
.bq-sec-head p { font-size: 18px; line-height: 1.55; color: var(--bq-ink-2); margin: 0; }

/* ---------- Service grid ---------- */
.bq-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.bq-services-section { background: var(--bq-surface-2); padding: 96px 28px; }
.bq-services-section .bq-section-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 14px;
}

.bq-service-card {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 18px;
  padding: 32px 26px 26px;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              box-shadow var(--bq-dur-slow) var(--bq-ease),
              border-color var(--bq-dur-slow) var(--bq-ease);
  cursor: pointer;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.bq-service-card-glow {
  position: absolute;
  top: -100px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.14), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bq-dur-slow) var(--bq-ease);
}
.bq-service-card-num {
  position: absolute;
  top: 24px; right: 24px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--bq-fg-subtle);
  z-index: 2;
  font-variant-numeric: tabular-nums;
}
.bq-service-card .bq-service-watermark {
  position: absolute;
  top: -28px;
  right: -28px;
  width: 130px;
  height: auto;
  opacity: 0.06;
  pointer-events: none;
  transition: opacity var(--bq-dur-slow) var(--bq-ease),
              transform var(--bq-dur-slow) var(--bq-ease);
  z-index: 0;
}
.bq-service-card:hover .bq-service-watermark {
  opacity: 0.14;
  transform: rotate(-4deg) scale(1.04);
}
.bq-service-card:hover .bq-service-card-glow { opacity: 1; }
.bq-service-card > .icon,
.bq-service-card > h3,
.bq-service-card > p,
.bq-service-card > .more { position: relative; z-index: 1; }
.bq-service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bq-sh-3);
  border-color: rgba(91,163,217,0.30);
  text-decoration: none;
}
.bq-service-card .icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(91,163,217,0.20), rgba(91,163,217,0.04));
  color: var(--bq-sky);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.bq-service-card .icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.bq-service-card h3 {
  font-size: 19px; font-weight: 800; letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--bq-fg);
}
.bq-service-card p {
  font-size: 13.5px; line-height: 1.6;
  color: var(--bq-fg-muted);
  margin: 0 0 18px;
}
.bq-service-card .more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bq-deep-blue);
  background: var(--bq-bg-tint);
  border-radius: 999px;
  transition: background var(--bq-dur) var(--bq-ease),
              color var(--bq-dur) var(--bq-ease);
}
.bq-service-card:hover .more {
  background: var(--bq-deep-blue);
  color: #fff;
}
.bq-service-card .more svg { width: 13px; height: 13px; transition: transform var(--bq-dur) var(--bq-ease); }
.bq-service-card:hover .more svg { transform: translateX(3px); }

/* "Coming soon" placeholder variant — non-interactive, muted, with badge */
.bq-service-card--coming {
  cursor: default;
  opacity: 0.78;
  border-style: dashed;
  border-color: rgba(91,163,217,0.40);
}
.bq-service-card--coming:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(91,163,217,0.40);
}
.bq-service-card--coming .icon {
  background: rgba(91,163,217,0.10);
  color: var(--bq-sky);
}
.bq-service-coming-tag {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center;
  margin-top: auto;
  align-self: flex-start;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--bq-sky);
  background: rgba(91,163,217,0.10);
  border: 1px solid rgba(91,163,217,0.30);
  padding: 5px 11px;
  border-radius: 999px;
}

/* ---------- Service detail page Hero — centered with icon focal point ---------- */
.bq-svc-hero {
  position: relative;
  padding: 110px 28px 90px;
  background: var(--bq-bg);
  overflow: hidden;
  text-align: center;
}
.bq-svc-hero-mesh {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(91,163,217,0.18), transparent 60%),
    radial-gradient(700px 480px at 50% 100%, rgba(91,163,217,0.12), transparent 60%);
}
.bq-svc-hero-centered {
  position: relative; z-index: 1;
  max-width: 880px; margin: 0 auto;
}
.bq-svc-crumbs {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bq-fg-subtle); margin-bottom: 32px;
}
.bq-svc-crumbs a { color: var(--bq-link); transition: color var(--bq-dur) var(--bq-ease); }
.bq-svc-crumbs a:hover { color: var(--bq-deep-blue); }
.bq-svc-crumbs svg { width: 12px; height: 12px; opacity: 0.5; }

/* Icon as decorative focal point */
.bq-svc-hero-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 88px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(91,163,217,0.22), rgba(91,163,217,0.06));
  color: var(--bq-sky);
  margin-bottom: 28px;
  box-shadow: 0 18px 36px -16px rgba(30,80,144,0.30);
}
.bq-svc-hero-icon-glow {
  position: absolute; inset: -20px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.30), transparent 60%);
  pointer-events: none;
  filter: blur(4px);
  z-index: -1;
}
.bq-svc-hero-icon i { width: 38px; height: 38px; stroke-width: 1.6; }

.bq-svc-hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,163,217,0.10);
  border: 1px solid rgba(91,163,217,0.30);
  color: var(--bq-deep-blue);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
:root[data-theme="dark"] .bq-svc-hero-chip { color: var(--bq-sky); }
.bq-svc-hero-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.18);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}

.bq-svc-hero h1 {
  font-size: 56px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--bq-fg);
  margin: 0 0 22px;
}
.bq-svc-hero-lede {
  font-size: 18px; line-height: 1.6;
  color: var(--bq-fg-muted);
  max-width: 700px; margin: 0 auto 36px;
}
.bq-svc-hero-cta {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 28px;
}
.bq-svc-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--bq-fg-muted);
  background: var(--bq-bg-tint);
  padding: 8px 14px;
  border-radius: 999px;
}
.bq-svc-hero-badge i { width: 14px; height: 14px; color: var(--bq-sky); }

@media (max-width: 768px) {
  .bq-svc-hero { padding: 80px 24px 64px; }
  .bq-svc-hero h1 { font-size: 36px; }
  .bq-svc-hero-lede { font-size: 16px; }
  .bq-svc-hero-icon { width: 72px; height: 72px; }
  .bq-svc-hero-icon i { width: 32px; height: 32px; }
}

.bq-svc-banner { padding: 32px 28px 8px; background: var(--bq-bg); }
.bq-svc-banner .bq-container-wide { max-width: 1280px; margin: 0 auto; }
.bq-svc-banner img {
  display: block; width: 100%; height: auto;
  border-radius: 24px;
  box-shadow: 0 24px 60px -28px rgba(15,30,60,0.35), 0 6px 20px -10px rgba(15,30,60,0.18);
}

.bq-svc-gallery { padding: 24px 28px 16px; background: var(--bq-bg); }
.bq-svc-gallery-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bq-svc-gallery-inner[data-count="2"] {
  grid-template-columns: 4fr 5fr;
  max-width: 1080px;
  align-items: center;
}
.bq-svc-gallery-card {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bq-surface-2);
  box-shadow: 0 18px 40px -24px rgba(15,30,60,0.32), 0 4px 14px -8px rgba(15,30,60,0.16);
}
.bq-svc-gallery-card img {
  display: block; width: 100%; height: auto;
}
@media (max-width: 840px) {
  .bq-svc-gallery-inner,
  .bq-svc-gallery-inner[data-count="2"] { grid-template-columns: 1fr; gap: 16px; }
}

.bq-svc-hero--centered { padding-bottom: 32px; }
.bq-svc-hero-centered {
  max-width: 880px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.bq-svc-hero-centered .bq-svc-crumbs { justify-content: center; }
.bq-svc-hero-centered h1 { max-width: 880px; }
.bq-svc-hero-centered p { max-width: 680px; margin: 0 auto; }
.bq-svc-hero-centered .bq-svc-hero-cta { justify-content: center; }

@media (max-width: 720px) {
  .bq-svc-banner { padding: 24px 16px 0; }
  .bq-svc-banner img { border-radius: 16px; }
}

.bq-svc-includes { padding: 88px 28px; background: var(--bq-bg); }
.bq-svc-includes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.bq-svc-incl-card { background: var(--bq-surface); border: 1px solid var(--bq-line-soft); border-radius: 14px; padding: 22px; }
.bq-svc-incl-card .icon { width: 36px; height: 36px; border-radius: 10px; background: var(--bq-bg-tint); color: var(--bq-deep-blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.bq-svc-incl-card .icon svg { width: 18px; height: 18px; }
.bq-svc-incl-card h4 { font-size: 16px; font-weight: 800; color: var(--bq-fg); margin: 0 0 6px; letter-spacing: -0.01em; }
.bq-svc-incl-card p { font-size: 14px; line-height: 1.55; color: var(--bq-ink-2); margin: 0; }

.bq-svc-process { padding: 88px 28px; background: var(--bq-bg-tint); }
.bq-svc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; counter-reset: step; }
.bq-svc-step { background: var(--bq-surface); border-radius: 14px; padding: 24px; position: relative; }
.bq-svc-step .num { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--bq-sky); }
.bq-svc-step h4 { font-size: 17px; font-weight: 800; color: var(--bq-fg); margin: 8px 0 6px; letter-spacing: -0.01em; }
.bq-svc-step p { font-size: 13px; line-height: 1.55; color: var(--bq-ink-2); margin: 0; }

.bq-svc-cta { padding: 80px 28px; background: var(--bq-bg); }
.bq-svc-cta-card { max-width: var(--bq-container); margin: 0 auto; background: var(--bq-navy); color: #fff; border-radius: 22px; padding: 48px; display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center; }
.bq-svc-cta-card h3 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; color: #fff; }
.bq-svc-cta-card p { font-size: 15px; color: rgba(255,255,255,0.78); margin: 0; max-width: 520px; line-height: 1.55; }
.bq-svc-cta-card .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bq-svc-cta-card .btn-primary { background: var(--bq-surface); color: var(--bq-fg); }
.bq-svc-cta-card .btn-primary:hover { background: var(--bq-bg-tint); }
.bq-svc-cta-card .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.25); }
.bq-svc-cta-card .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.bq-svc-other { padding: 80px 28px; background: var(--bq-bg-tint); }
.bq-svc-other-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }

@media (max-width: 900px) {
  .bq-svc-hero-grid { grid-template-columns: 1fr; }
  .bq-svc-hero h1 { font-size: 40px; }
  .bq-svc-includes-grid, .bq-svc-steps, .bq-svc-other-grid { grid-template-columns: 1fr 1fr; }
  .bq-svc-cta-card { grid-template-columns: 1fr; padding: 32px; }
}

/* ---------- Split (two-zone) ---------- */
/* ---------- Zones (How we work) — refreshed pattern ---------- */
.bq-how-section { padding: 96px 28px; }
.bq-how-section .bq-section-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 14px;
}

.bq-zones {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px; margin: 0 auto;
}
.bq-zone {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 20px;
  padding: 40px 36px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              box-shadow var(--bq-dur-slow) var(--bq-ease),
              border-color var(--bq-dur-slow) var(--bq-ease);
}
.bq-zone::before {
  content: ''; position: absolute;
  top: -100px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.10), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bq-dur-slow) var(--bq-ease);
}
.bq-zone:hover {
  transform: translateY(-3px);
  box-shadow: var(--bq-sh-3);
  border-color: rgba(91,163,217,0.30);
}
.bq-zone:hover::before { opacity: 1; }
.bq-zone-mark {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(91,163,217,0.20), rgba(91,163,217,0.05));
  color: var(--bq-sky);
  margin-bottom: 22px;
  box-shadow: 0 6px 14px -8px rgba(30,80,144,0.25);
}
.bq-zone-mark i { width: 26px; height: 26px; stroke-width: 1.75; }
.bq-zone-eyebrow {
  position: relative;
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 12px;
}
.bq-zone h3 {
  position: relative;
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--bq-fg);
  margin: 0 0 18px;
}
.bq-zone p {
  position: relative;
  font-size: 14.5px; line-height: 1.6;
  color: var(--bq-fg-muted);
  margin: 0 0 24px;
}
.bq-zone-rooms {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--bq-line-soft);
}
.bq-zone-rooms span {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 600;
  color: var(--bq-fg-muted);
  background: var(--bq-bg-tint);
  border: 1px solid var(--bq-line-soft);
  padding: 6px 11px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .bq-zones { grid-template-columns: 1fr; gap: 16px; }
  .bq-zone { padding: 32px 28px; }
  .bq-zone h3 { font-size: 22px; }
}

/* Backward-compat for any legacy .bq-split (Airbnb etc still use it) */
.bq-split {
  background: var(--bq-bg-tint);
  border-radius: 20px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.bq-split .zone .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bq-deep-blue); }
.bq-split .zone h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 12px; color: var(--bq-fg); }
.bq-split .zone p { font-size: 15px; line-height: 1.6; color: var(--bq-ink-2); margin: 0 0 18px; }
.bq-split .zone .rooms { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-split .zone .room {
  background: var(--bq-surface); border: 1px solid var(--bq-line); color: var(--bq-fg);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}

/* ---------- Differentiator table ---------- */
/* ---------- Differentiator — refreshed table ---------- */
.bq-diff-section { padding: 96px 28px; }
.bq-diff-section .bq-section-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 14px;
}

.bq-diff-table {
  border: 1px solid var(--bq-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bq-surface);
}
.bq-diff-row {
  display: grid; grid-template-columns: 1fr 1.4fr 1.4fr;
  border-bottom: 1px solid var(--bq-line-soft);
  transition: background var(--bq-dur) var(--bq-ease);
}
.bq-diff-row:last-child { border-bottom: none; }
.bq-diff-row:not(.bq-diff-row--head):hover { background: var(--bq-bg-tint); }
.bq-diff-row--head { background: var(--bq-navy); color: #fff; font-weight: 700; }
.bq-diff-cell {
  padding: 18px 22px; font-size: 14px; line-height: 1.55;
  color: var(--bq-fg-muted);
  display: flex; align-items: center; gap: 10px;
}
.bq-diff-cell--feature { font-weight: 700; color: var(--bq-fg); }
.bq-diff-row--head .bq-diff-cell {
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.02em; font-size: 12px;
  text-transform: uppercase; font-weight: 700;
}
.bq-diff-row--head .bq-diff-cell--feature { color: rgba(255,255,255,0.55); }
.bq-diff-cell--standard { color: var(--bq-fg-muted); }
.bq-diff-cell--brightq {
  background: var(--bq-bg-tint);
  font-weight: 600; color: var(--bq-fg);
}
.bq-diff-row--head .bq-diff-cell--brightq {
  background: var(--bq-deep-blue);
  color: #fff;
}
.bq-diff-brightq-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; letter-spacing: 0.04em;
  color: #fff;
}
.bq-diff-brightq-mark i { width: 16px; height: 16px; color: var(--bq-sky); }
.bq-diff-check {
  width: 18px; height: 18px;
  color: var(--bq-sky);
  flex-shrink: 0; stroke-width: 2.5;
}

@media (max-width: 768px) {
  .bq-diff-row { grid-template-columns: 1fr; }
  .bq-diff-row--head { display: none; }
  .bq-diff-cell {
    padding: 14px 18px;
    border-bottom: 1px solid var(--bq-line-soft);
  }
  .bq-diff-cell:last-child { border-bottom: 0; }
  .bq-diff-cell--feature {
    font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bq-fg-subtle);
    padding-bottom: 4px;
  }
  .bq-diff-cell--brightq { flex-direction: column; align-items: flex-start; }
}

/* ---------- Pricing — refreshed pattern ---------- */
.bq-pricing-section { padding: 96px 28px; }
.bq-pricing-section .bq-section-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 14px;
}

.bq-pricing {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1100px; margin: 0 auto;
}
.bq-price {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 20px;
  padding: 32px 30px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              box-shadow var(--bq-dur-slow) var(--bq-ease),
              border-color var(--bq-dur-slow) var(--bq-ease);
}
.bq-price-glow {
  position: absolute;
  top: -120px; right: -100px;
  width: 280px; height: 280px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.14), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bq-dur-slow) var(--bq-ease);
}
.bq-price:hover {
  transform: translateY(-3px);
  box-shadow: var(--bq-sh-3);
  border-color: rgba(91,163,217,0.30);
}
.bq-price:hover .bq-price-glow { opacity: 1; }

/* Featured — navy treatment with sky accents */
.bq-price--featured {
  background: var(--bq-navy);
  border-color: transparent;
  color: #fff;
}
.bq-price--featured .bq-price-glow {
  background: radial-gradient(circle at center, rgba(91,163,217,0.30), transparent 65%);
  opacity: 1;
  top: -160px; right: -120px;
  width: 360px; height: 360px;
}

.bq-price-tag {
  position: relative;
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--bq-bg-tint);
  color: var(--bq-deep-blue);
  padding: 6px 12px;
  border-radius: 999px;
}
.bq-price-tag--featured {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,163,217,0.18);
  border: 1px solid rgba(91,163,217,0.40);
  color: var(--bq-sky);
}
.bq-price-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 3px rgba(91,163,217,0.20);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}

.bq-price h4 {
  position: relative;
  font-size: 22px; font-weight: 800; letter-spacing: -0.015em;
  margin: 0;
  color: inherit;
}
.bq-price--featured h4 { color: #fff; }

/* Value lede above the 3 pricing cards — sells what the plan delivers,
   so the price reads as a supporting anchor, not a hero number. */
.bq-pricing-lede {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
  font-size: 15.5px; line-height: 1.55;
  color: var(--bq-fg-muted);
  font-weight: 500;
}

/* Price range — confident "from" anchor + unit + microline.
   The amount is intentionally NOT a hero figure: it supports the value
   bullets, it doesn't shout. Sized to sit just above the card's h4. */
.bq-price-range {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--bq-line-soft);
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-price--featured .bq-price-range {
  border-color: rgba(255,255,255,0.12);
}
.bq-price-from {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bq-fg-subtle);
}
.bq-price--featured .bq-price-from { color: rgba(255,255,255,0.55); }
.bq-price-amount {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--bq-deep-blue);
  font-variant-numeric: tabular-nums;
}
.bq-price-amount--word {
  /* "Custom" reads cleaner without numeric tracking */
  font-variant-numeric: normal;
  letter-spacing: -0.01em;
}
:root[data-theme="dark"] .bq-price-amount { color: var(--bq-sky); }
.bq-price--featured .bq-price-amount { color: #fff; }
.bq-price-unit {
  font-size: 12.5px; font-weight: 500;
  color: var(--bq-fg-subtle);
}
.bq-price--featured .bq-price-unit { color: rgba(255,255,255,0.62); }

/* Microline — single supporting line under price/unit (cards 1 + 2).
   Keeps the "flat rate · no hourly · no surprises" promise visible without
   stealing attention from the bullet list below. */
.bq-price-microline {
  margin-top: 4px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--bq-fg-muted);
}
.bq-price--featured .bq-price-microline { color: rgba(255,255,255,0.72); }
:root[data-theme="dark"] .bq-price-microline { color: var(--bq-fg-muted); }

.bq-price ul {
  position: relative;
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.bq-price li {
  font-size: 13.5px; line-height: 1.55;
  color: var(--bq-fg-muted);
  display: flex; gap: 10px; align-items: flex-start;
}
.bq-price--featured li { color: rgba(255,255,255,0.82); }
.bq-price li svg {
  width: 16px; height: 16px;
  stroke: var(--bq-sky);
  stroke-width: 2.5;
  flex-shrink: 0;
  margin-top: 2px;
}

/* CTA at the bottom of card */
.bq-price-cta {
  position: relative;
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
}
.bq-price--featured .bq-price-cta.btn-primary {
  background: #fff;
  color: var(--bq-navy);
}
.bq-price--featured .bq-price-cta.btn-primary:hover {
  background: var(--bq-sky);
  color: #fff;
}

/* Fine print callout */
.bq-pricing-note {
  max-width: 900px; margin: 36px auto 0;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-left: 3px solid var(--bq-sky);
  border-radius: var(--bq-r-md);
  padding: 18px 22px;
}
.bq-pricing-note-label {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 6px;
}
.bq-pricing-note p {
  font-size: 13px; line-height: 1.55;
  color: var(--bq-fg-muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .bq-pricing { grid-template-columns: 1fr; max-width: 520px; }
}

/* ---------- Footer ---------- */
.bq-footer { background: var(--bq-navy); color: rgba(255,255,255,0.75); padding: 56px 28px 28px; }
.bq-footer-grid { max-width: var(--bq-container-wide); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.bq-footer h5 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; }
.bq-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bq-footer ul a { color: rgba(255,255,255,0.7); font-size: 14px; }
.bq-footer ul a:hover { color: #fff; text-decoration: none; }
.bq-footer .brand img.bq-footer-logo {
  height: 96px; width: auto; display: block;
  background: var(--bq-surface);
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.bq-footer .brand img { height: 64px; }
.bq-footer .brand p { font-size: 14px; line-height: 1.6; margin: 16px 0 0; max-width: 360px; }
.bq-footer-bottom {
  max-width: var(--bq-container-wide);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.55);
}

/* ---------- Theme toggle (icon-only, footer right corner) ---------- */
.bq-theme-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
  text-transform: none; letter-spacing: 0;
}
.bq-theme-opt {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.55);
  font-family: inherit;
  width: 28px; height: 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--bq-dur) var(--bq-ease), color var(--bq-dur) var(--bq-ease);
}
.bq-theme-opt i { width: 14px; height: 14px; }
.bq-theme-opt:hover { color: #fff; }
.bq-theme-opt.is-active {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.bq-theme-opt:focus-visible {
  outline: 2px solid var(--bq-sky);
  outline-offset: 2px;
}
/* Visually hidden text label — kept in DOM for any screen reader fallback. */
.bq-theme-opt-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .bq-footer-bottom { justify-content: center; }
}

/* ---------- Form ---------- */
.bq-quote-form {
  background: var(--bq-surface); border-radius: 20px; padding: 40px;
  box-shadow: var(--bq-sh-3);
}
.bq-field-label { display: block; font-size: 12px; font-weight: 700; color: var(--bq-fg); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; }
.bq-input, .bq-select, .bq-textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--bq-line); border-radius: 10px;
  font-family: inherit; font-size: 14px; color: var(--bq-fg); background: var(--bq-surface);
  transition: all var(--bq-dur) var(--bq-ease);
}
.bq-input::placeholder, .bq-textarea::placeholder { color: var(--bq-ink-3); }
.bq-input:focus, .bq-select:focus, .bq-textarea:focus { outline: none; border-color: var(--bq-deep-blue); box-shadow: 0 0 0 3px rgba(91,163,217,0.30); }

/* ---------- Quote form (sectioned, progressive) ---------- */
.qf-head { max-width: 720px; margin-bottom: 36px; }
.qf-head .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bq-deep-blue); }
.qf-head h2 { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 12px 0 14px; color: var(--bq-fg); }
.qf-head p { font-size: 18px; line-height: 1.55; color: var(--bq-ink-2); margin: 0; }



/* ---------- Direct contact band — refreshed pattern ---------- */
.bq-contact-direct { padding: 80px 28px 100px; background: var(--bq-bg); }
.bq-contact-direct-card {
  position: relative;
  background: linear-gradient(135deg, var(--bq-navy) 0%, var(--bq-deep-blue) 100%);
  color: #fff;
  border-radius: 24px;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 56px;
  align-items: center;
  box-shadow: var(--bq-sh-3);
  overflow: hidden;
}
.bq-contact-direct-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 380px at 100% 0%, rgba(91,163,217,0.30), transparent 60%),
    radial-gradient(500px 280px at 0% 100%, rgba(91,163,217,0.18), transparent 60%);
}
.bq-contact-direct-head { position: relative; z-index: 1; }
.bq-contact-direct-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 18px;
}
.bq-contact-direct-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.20);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}
.bq-contact-direct-head h2 {
  font-size: 36px; font-weight: 800; letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 16px;
  color: #fff;
}
.bq-contact-direct-head p {
  font-size: 15.5px; color: rgba(255,255,255,0.78);
  line-height: 1.55; margin: 0;
  max-width: 380px;
}

/* Tile grid — 4 tiles (Call · Email · WhatsApp · Form) */
.bq-contact-direct-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bq-contact-tile {
  display: grid; grid-template-columns: 40px 1fr 16px;
  gap: 14px; align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: #fff;
  transition: background var(--bq-dur) var(--bq-ease),
              border-color var(--bq-dur) var(--bq-ease),
              transform var(--bq-dur) var(--bq-ease);
}
.bq-contact-tile:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(91,163,217,0.45);
  transform: translateY(-2px);
  text-decoration: none;
}
.bq-contact-tile--primary {
  background: var(--bq-sky);
  border-color: transparent;
  color: var(--bq-navy);
}
.bq-contact-tile--primary:hover {
  background: #fff;
  border-color: transparent;
}
.bq-contact-tile-ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(91,163,217,0.20);
  color: var(--bq-sky);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bq-contact-tile--primary .bq-contact-tile-ic {
  background: rgba(12,35,64,0.14);
  color: var(--bq-navy);
}
.bq-contact-tile-ic i { width: 18px; height: 18px; stroke-width: 2; }
.bq-contact-tile-body { min-width: 0; }
.bq-contact-tile-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.bq-contact-tile--primary .bq-contact-tile-lbl { color: rgba(12,35,64,0.55); }
.bq-contact-tile-val {
  font-size: 15px; font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 3px;
  line-height: 1.25;
}
.bq-contact-tile-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.60);
  margin-top: 3px;
  line-height: 1.4;
}
.bq-contact-tile--primary .bq-contact-tile-sub { color: rgba(12,35,64,0.62); }
.bq-contact-tile-arr {
  opacity: 0.5;
  transition: opacity var(--bq-dur) var(--bq-ease),
              transform var(--bq-dur) var(--bq-ease);
}
.bq-contact-tile-arr svg { width: 16px; height: 16px; }
.bq-contact-tile:hover .bq-contact-tile-arr { opacity: 1; transform: translate(2px, -2px); }

@media (max-width: 1024px) {
  .bq-contact-direct-card { grid-template-columns: 1fr; gap: 36px; padding: 40px 32px; }
  .bq-contact-direct-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .bq-contact-direct-grid { grid-template-columns: 1fr; }
  .bq-contact-direct-head h2 { font-size: 28px; }
}

/* ---------- Embedded quote form (iframe shell) ---------- */
.bq-quote-section { background: var(--bq-surface-2); }

.bq-quote-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.bq-quote-meta {
  position: sticky; top: 96px;
  background: var(--bq-navy);
  color: #fff;
  border-radius: 18px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--bq-sh-3);
}
.bq-quote-meta-row {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bq-quote-meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.bq-quote-meta-row > i {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(91,163,217,0.18);
  color: var(--bq-sky);
  display: inline-flex; align-items: center; justify-content: center;
}
.bq-quote-meta-row > i svg { width: 18px; height: 18px; stroke-width: 2; }
.bq-quote-meta-row .t { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; }
.bq-quote-meta-row .s { font-size: 12px; color: rgba(255,255,255,0.62); margin-top: 3px; line-height: 1.45; }

.bq-quote-frame {
  background: var(--bq-surface);
  border-radius: 18px;
  border: 1px solid var(--bq-line-soft);
  box-shadow: var(--bq-sh-3);
  overflow: hidden;
  padding: 32px 28px 24px;
  min-height: 600px;
}
.bq-quote-frame iframe { display: block; width: 100%; }

@media (max-width: 1000px) {
  .bq-quote-shell { grid-template-columns: 1fr; }
  .bq-quote-meta { position: static; }
}
@media (max-width: 600px) {
  .bq-quote-frame { padding: 18px 14px; }
}

/* ============================================================
   For Business section (#b2b) — matches existing visual language.
   Typography-led, minimalist. Uses the same section-head pattern,
   spacing rhythm, eyebrow style, and card treatments as the rest
   of the site. Only one image: a small principal logo (Footer/Nav
   scale) placed once in the intro block.
   ============================================================ */

.bq-b2b { background: var(--bq-bg); }

/* Standard padded block — same rhythm as .bq-section */
.bq-b2b-block { padding: 96px 28px; }
.bq-b2b-block + .bq-b2b-block { padding-top: 0; }
.bq-b2b-block + .bq-b2b-block::before {
  content: ''; display: block;
  border-top: 1px solid var(--bq-line-soft);
  max-width: var(--bq-container-wide);
  margin: 0 auto 80px;
}

/* Sub-section head — same eyebrow/h2/p typography as .bq-sec-head,
   sized down a notch since these are nested inside one big section. */
.bq-b2b-head { max-width: 820px; margin-bottom: 48px; }
.bq-b2b-head h3 {
  font-size: 36px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--bq-fg); margin: 0 0 14px;
}
.bq-b2b-head p {
  font-size: 17px; line-height: 1.6;
  color: var(--bq-ink-2); margin: 0;
  max-width: 740px;
}

/* ---------- 1. Intro Hero — refreshed asymmetric with image art ---------- */
.bq-b2b-intro {
  position: relative;
  padding: 110px 28px 90px;
  background: var(--bq-bg);
  overflow: hidden;
}
.bq-b2b-intro-mesh {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(91,163,217,0.16), transparent 55%),
    radial-gradient(700px 480px at 100% 100%, rgba(91,163,217,0.10), transparent 55%);
}
.bq-b2b-intro-grid {
  position: relative; z-index: 1;
  max-width: var(--bq-container-wide); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px; align-items: center;
}
.bq-b2b-intro-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,163,217,0.10);
  border: 1px solid rgba(91,163,217,0.30);
  color: var(--bq-deep-blue);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}
:root[data-theme="dark"] .bq-b2b-intro-chip { color: var(--bq-sky); }
.bq-b2b-intro-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.18);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}
.bq-b2b-intro-copy h1 {
  font-size: 56px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--bq-fg);
  margin: 0 0 22px;
}
.bq-b2b-intro-lede {
  font-size: 18px; line-height: 1.6;
  color: var(--bq-fg-muted);
  max-width: 620px;
  margin: 0 0 32px;
}
.bq-b2b-intro-cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 28px;
}
.bq-b2b-intro-contact {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--bq-fg-subtle);
}
.bq-b2b-intro-contact-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--bq-fg-muted);
  text-decoration: none;
  transition: color var(--bq-dur) var(--bq-ease);
}
.bq-b2b-intro-contact-link:hover { color: var(--bq-link); }
.bq-b2b-intro-contact-link i { width: 14px; height: 14px; }
.bq-b2b-intro-contact-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--bq-fg-subtle);
  opacity: 0.5;
}

/* Art side — framed image with subtle glow */
.bq-b2b-intro-art {
  position: relative;
  min-width: 0;
}
.bq-b2b-intro-art-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--bq-sh-4);
}
.bq-b2b-intro-art-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 0%, rgba(91,163,217,0.20), transparent 60%);
  z-index: 1;
}
.bq-b2b-intro-art-frame img {
  display: block;
  width: 100%; height: auto;
  position: relative; z-index: 0;
}

@media (max-width: 1024px) {
  .bq-b2b-intro-grid { gap: 48px; }
  .bq-b2b-intro-copy h1 { font-size: 44px; }
}
@media (max-width: 900px) {
  .bq-b2b-intro { padding: 72px 24px 64px; }
  .bq-b2b-intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .bq-b2b-intro-art { order: -1; max-width: 480px; margin: 0 auto; }
  .bq-b2b-intro-copy h1 { font-size: 36px; }
}

/* ---------- 2. Approach — 3 numbered columns ---------- */
.bq-b2b-approach {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--bq-line);
}
.bq-b2b-approach-col { padding-right: 8px; }
.bq-b2b-num {
  display: block;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  color: var(--bq-sky);
  margin-bottom: 14px;
}
.bq-b2b-approach-col h4 {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.25;
  color: var(--bq-fg); margin: 0 0 12px;
}
.bq-b2b-approach-col p {
  font-size: 15px; line-height: 1.65;
  color: var(--bq-ink-2); margin: 0;
}

/* ---------- 5. Baseline card — BrightQ brand mark centerpiece ---------- */
.bq-b2b-baseline {
  display: flex; align-items: center; justify-content: center;
  background: var(--bq-bg-tint);
  border: 1px solid rgba(91,163,217,0.30);
  border-radius: 18px;
  padding: 36px;
  margin-bottom: 40px;
}
.bq-b2b-baseline-logo {
  display: block;
  width: 100%; max-width: 220px; height: auto;
}

/* ---------- 5. Add-ons head — eyebrow + heading tied visually to the list ---------- */
.bq-b2b-addons-head {
  max-width: 820px;
  margin-bottom: 28px;
  padding-top: 8px;
}
.bq-b2b-addons-eyebrow {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bq-sky);
  background: rgba(91,163,217,0.10);
  border: 1px solid rgba(91,163,217,0.30);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 14px;
}
.bq-b2b-addons-head h3 {
  font-size: 32px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--bq-fg); margin: 0 0 12px;
}
.bq-b2b-addons-head p {
  font-size: 15px; line-height: 1.6; color: var(--bq-ink-2); margin: 0;
}
@media (max-width: 1000px) {
  .bq-b2b-baseline { padding: 24px; }
  .bq-b2b-baseline-logo { max-width: 180px; }
  .bq-b2b-addons-head h3 { font-size: 26px; }
}

/* ---------- 3 & 5 & 7. Numbered 2-column lists ---------- */
.bq-b2b-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--bq-line);
}
.bq-b2b-list-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-b2b-list-item:nth-child(odd) {
  padding-right: 28px;
  border-right: 1px solid var(--bq-line-soft);
}
.bq-b2b-list-item:nth-child(even) {
  padding-left: 28px;
}
.bq-b2b-list-num {
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  color: var(--bq-sky); padding-top: 4px;
}
.bq-b2b-list-item h4 {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bq-fg); margin: 0 0 6px;
}
.bq-b2b-list-item p {
  font-size: 14px; line-height: 1.6;
  color: var(--bq-ink-2); margin: 0;
}

/* ---------- 4. Engagement rhythms — Same standard, different rhythms ---------- */
.bq-b2b-rhythms {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
}
.bq-b2b-rhythm {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 20px;
  padding: 30px 26px 26px;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              box-shadow var(--bq-dur-slow) var(--bq-ease),
              border-color var(--bq-dur-slow) var(--bq-ease);
}
.bq-b2b-rhythm-glow {
  position: absolute;
  top: -100px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.14), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bq-dur-slow) var(--bq-ease);
}
.bq-b2b-rhythm:hover {
  transform: translateY(-3px);
  box-shadow: var(--bq-sh-3);
  border-color: rgba(91,163,217,0.30);
}
.bq-b2b-rhythm:hover .bq-b2b-rhythm-glow { opacity: 1; }

.bq-b2b-rhythm--featured {
  background: var(--bq-navy);
  border-color: transparent;
  color: #fff;
}
.bq-b2b-rhythm--featured .bq-b2b-rhythm-glow {
  background: radial-gradient(circle at center, rgba(91,163,217,0.30), transparent 65%);
  opacity: 1;
  top: -160px; right: -120px;
  width: 360px; height: 360px;
}

.bq-b2b-rhythm-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.bq-b2b-rhythm-num {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--bq-fg-subtle);
  font-variant-numeric: tabular-nums;
}
.bq-b2b-rhythm--featured .bq-b2b-rhythm-num { color: rgba(255,255,255,0.5); }
.bq-b2b-rhythm-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bq-sky);
  background: rgba(91,163,217,0.18);
  border: 1px solid rgba(91,163,217,0.40);
  padding: 4px 10px;
  border-radius: 999px;
}
.bq-b2b-rhythm-flag-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 3px rgba(91,163,217,0.20);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}

.bq-b2b-rhythm h4 {
  position: relative;
  font-size: 24px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15;
  color: var(--bq-fg);
  margin: 4px 0 0;
}
.bq-b2b-rhythm--featured h4 { color: #fff; }

.bq-b2b-rhythm-quote {
  position: relative;
  font-size: 14px; font-weight: 600;
  font-style: normal;
  letter-spacing: -0.005em;
  color: var(--bq-deep-blue);
  margin: 0;
  line-height: 1.4;
}
:root[data-theme="dark"] .bq-b2b-rhythm-quote { color: var(--bq-sky); }
.bq-b2b-rhythm--featured .bq-b2b-rhythm-quote { color: var(--bq-sky); }

.bq-b2b-rhythm-for {
  position: relative;
  font-size: 12.5px; line-height: 1.5;
  color: var(--bq-fg-muted);
  margin: 6px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-b2b-rhythm--featured .bq-b2b-rhythm-for {
  color: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.12);
}
.bq-b2b-rhythm-for span {
  display: inline-block;
  font-weight: 800; color: var(--bq-fg-subtle);
  letter-spacing: 0.10em; text-transform: uppercase; font-size: 10px;
  margin-right: 6px;
}
.bq-b2b-rhythm--featured .bq-b2b-rhythm-for span { color: rgba(255,255,255,0.45); }

.bq-b2b-rhythm-benefits {
  position: relative;
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.bq-b2b-rhythm-benefits li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; line-height: 1.5;
  color: var(--bq-fg-muted);
}
.bq-b2b-rhythm--featured .bq-b2b-rhythm-benefits li { color: rgba(255,255,255,0.78); }
.bq-b2b-rhythm-benefits li svg {
  width: 14px; height: 14px;
  color: var(--bq-sky);
  stroke-width: 2.5;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Honest notes callout */
.bq-b2b-rhythms-note {
  margin-top: 32px;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-left: 3px solid var(--bq-sky);
  border-radius: var(--bq-r-md);
  padding: 22px 26px;
  max-width: 900px;
}
.bq-b2b-rhythms-note-label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 10px;
}
.bq-b2b-rhythms-note p {
  font-size: 13.5px; line-height: 1.6;
  color: var(--bq-fg-muted);
  margin: 0 0 8px;
}
.bq-b2b-rhythms-note p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
  .bq-b2b-rhythms { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bq-b2b-rhythms { grid-template-columns: 1fr; }
}

.bq-b2b-tiers-note {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--bq-line-soft);
  max-width: 900px;
  display: flex; flex-direction: column; gap: 14px;
}
.bq-b2b-tiers-note p {
  font-size: 14px; line-height: 1.7;
  color: var(--bq-ink-2); margin: 0;
}

/* ---------- 6. Emergency — full-width navy band, refreshed ---------- */
.bq-b2b-emergency {
  position: relative;
  background: var(--bq-navy);
  color: #fff;
  padding: 100px 28px;
  overflow: hidden;
}
.bq-b2b-emergency-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 420px at 15% 50%, rgba(91,163,217,0.20), transparent 60%),
    radial-gradient(600px 360px at 85% 50%, rgba(91,163,217,0.14), transparent 60%);
}
.bq-b2b-emergency .bq-container-wide { position: relative; max-width: var(--bq-container-wide); margin: 0 auto; }
.bq-b2b-emergency-rule {
  display: none;
}
.bq-b2b-emergency-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 18px;
}
.bq-b2b-emergency-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.18);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}
.bq-b2b-emergency h3 {
  font-size: 36px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15;
  color: #fff; margin: 12px 0 22px;
  max-width: 900px;
}
.bq-b2b-emergency-lede {
  font-size: 17px; line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin: 0; max-width: 820px;
}
/* 2-col head: copy left, image right, image vertically centered */
.bq-b2b-emergency-head {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.bq-b2b-emergency-copy { min-width: 0; }
.bq-b2b-emergency-art {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
.bq-b2b-emergency-art img {
  display: block;
  width: 100%; max-width: 340px; height: auto;
  border-radius: 18px;
  box-shadow:
    0 24px 60px -22px rgba(0,0,0,0.50),
    0 8px 22px -10px rgba(91,163,217,0.25);
}
@media (max-width: 1000px) {
  .bq-b2b-emergency-head { grid-template-columns: 1fr; gap: 32px; }
  .bq-b2b-emergency-art img { max-width: 260px; }
}
.bq-b2b-emergency-points {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.bq-b2b-emergency-points h5 {
  font-size: 16px; font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff; margin: 0 0 10px;
}
.bq-b2b-emergency-points p {
  font-size: 14px; line-height: 1.65;
  color: var(--bq-ice); margin: 0;
}
.bq-b2b-emergency-close {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 720px;
}

/* ---------- 8. Track record — centered ice band ---------- */
.bq-b2b-track {
  background: var(--bq-bg-tint);
  padding: 88px 28px;
  text-align: center;
}
.bq-b2b-track .bq-container { max-width: 900px; margin: 0 auto; }
.bq-b2b-track-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bq-deep-blue);
  margin-bottom: 18px;
}
.bq-b2b-track-statement {
  font-size: 30px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25;
  color: var(--bq-fg); margin: 0 auto 22px;
  max-width: 820px;
}
.bq-b2b-track-support {
  font-size: 16px; line-height: 1.7;
  color: var(--bq-ink-2); margin: 0 auto;
  max-width: 720px;
}

/* ---------- 9. Closing CTA — gradient surface with glow ---------- */
.bq-b2b-cta-block {
  position: relative;
  text-align: center;
  padding: 100px 28px 110px;
  background: var(--bq-bg);
  overflow: hidden;
}
.bq-b2b-cta-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 50% 100%, rgba(91,163,217,0.16), transparent 60%),
    radial-gradient(600px 350px at 50% 0%, rgba(91,163,217,0.08), transparent 60%);
}
.bq-b2b-cta-inner { position: relative; z-index: 1; }
.bq-b2b-cta-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 18px;
}
.bq-b2b-cta-block h3 {
  font-size: 42px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.08;
  color: var(--bq-fg); margin: 0 0 18px;
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.bq-b2b-cta-block p {
  font-size: 17px; line-height: 1.55;
  color: var(--bq-fg-muted); margin: 0 auto 36px;
  max-width: 620px;
}
.bq-b2b-cta-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* Generic section tag — used across For Business and other pages */
.bq-section-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  .bq-b2b-cta-block { padding: 72px 24px 80px; }
  .bq-b2b-cta-block h3 { font-size: 30px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .bq-b2b-intro-grid { grid-template-columns: 1fr; }
  .bq-b2b-intro-mark { order: -1; }
  .bq-b2b-intro-mark img { max-width: 100%; }
  .bq-b2b-intro-copy h2 { font-size: 34px; }
  .bq-b2b-approach { grid-template-columns: 1fr; gap: 32px; }
  .bq-b2b-tiers { grid-template-columns: 1fr 1fr; }
  .bq-b2b-emergency-points { grid-template-columns: 1fr; gap: 28px; }
  .bq-b2b-emergency h3 { font-size: 28px; }
  .bq-b2b-track-statement { font-size: 24px; }
  .bq-b2b-head h3 { font-size: 28px; }
  .bq-b2b-block { padding: 80px 24px; }
  .bq-b2b-block + .bq-b2b-block::before { margin-bottom: 64px; }
}
@media (max-width: 700px) {
  .bq-b2b-list { grid-template-columns: 1fr; }
  .bq-b2b-list-item:nth-child(odd) {
    border-right: none; padding-right: 0;
  }
  .bq-b2b-list-item:nth-child(even) { padding-left: 0; }
  .bq-b2b-tiers { grid-template-columns: 1fr; }
  .bq-b2b-cta h3 { font-size: 24px; }
  .bq-b2b-emergency, .bq-b2b-track { padding-left: 20px; padding-right: 20px; }
}


/* Small spacing between the .bq-split contrast block and the numbered list inside the B2B add-ons section */
.bq-b2b-split { margin-bottom: 56px; }

/* ============================================================
   About BrightQ page (#about) — matches existing visual language.
   Typography-led, minimalist. Uses the same section-head pattern,
   spacing rhythm, and eyebrow style as the rest of the site.
   Images are shown as dashed-border placeholder boxes until the
   actual files are dropped into /assets/.
   ============================================================ */

.bq-about { background: var(--bq-bg); }

/* Standard padded block — same rhythm as .bq-section */
.bq-about-block { padding: 96px 28px; }
.bq-about-block + .bq-about-block { padding-top: 0; }
.bq-about-block + .bq-about-block::before {
  content: ''; display: block;
  border-top: 1px solid var(--bq-line-soft);
  max-width: var(--bq-container-wide);
  margin: 0 auto 80px;
}

/* Sub-section head — same scale as other in-page sub-heads */
.bq-about-head { max-width: 820px; margin-bottom: 36px; }
.bq-about-head h3 {
  font-size: 36px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--bq-fg); margin: 0;
}

/* Prose blocks (long-form paragraphs) */
.bq-about-prose { max-width: 820px; }
.bq-about-prose p {
  font-size: 16px; line-height: 1.75;
  color: var(--bq-ink-2); margin: 0;
}
.bq-about-prose p + p { margin-top: 18px; }

/* Closing-line treatment — set-off statement in ice */
.bq-about-quote {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.5;
  color: var(--bq-fg);
  padding: 22px 26px;
  background: var(--bq-bg-tint);
  border-radius: 14px;
  margin-top: 32px;
  max-width: 820px;
}

/* Image placeholder boxes — thin dashed border, no fill */
.bq-about-placeholder {
  border: 1px dashed var(--bq-line-soft);
  border-radius: 16px;
  background: transparent;
  width: 100%;
  display: block;
}
.bq-about-placeholder--hero     { max-width: 360px; aspect-ratio: 1 / 1; }
.bq-about-placeholder--portrait { max-width: 400px; aspect-ratio: 3 / 4; }
.bq-about-placeholder--oreo     { max-width: 300px; aspect-ratio: 1 / 1; }

/* 1. Hero refreshed — chip + framed art */
.bq-about-hero-block {
  position: relative;
  padding: 110px 28px 90px;
  background: var(--bq-bg);
  overflow: hidden;
}
.bq-about-hero-mesh {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 88% 0%, rgba(91,163,217,0.18), transparent 55%),
    radial-gradient(700px 480px at -5% 100%, rgba(91,163,217,0.10), transparent 55%);
}
.bq-about-hero {
  position: relative; z-index: 1;
  max-width: var(--bq-container-wide); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px; align-items: center;
}
.bq-about-hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,163,217,0.10);
  border: 1px solid rgba(91,163,217,0.30);
  color: var(--bq-deep-blue);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}
:root[data-theme="dark"] .bq-about-hero-chip { color: var(--bq-sky); }
.bq-about-hero-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.18);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}
.bq-about-hero-copy h1 {
  font-size: 52px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.08;
  color: var(--bq-fg);
  margin: 0 0 22px;
}
.bq-about-hero-lede {
  font-size: 18px; line-height: 1.6;
  color: var(--bq-fg-muted);
  margin: 0;
  max-width: 620px;
}
.bq-about-hero-art { position: relative; min-width: 0; }
.bq-about-hero-art-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--bq-sh-4);
}
.bq-about-hero-art-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 0%, rgba(91,163,217,0.18), transparent 60%);
  z-index: 1;
}
.bq-about-hero-art-frame img {
  display: block;
  width: 100%; height: auto;
  position: relative; z-index: 0;
}

@media (max-width: 1024px) {
  .bq-about-hero { gap: 48px; }
  .bq-about-hero-copy h1 { font-size: 40px; }
}
@media (max-width: 900px) {
  .bq-about-hero-block { padding: 72px 24px 64px; }
  .bq-about-hero { grid-template-columns: 1fr; gap: 40px; }
  .bq-about-hero-art { order: -1; max-width: 480px; margin: 0 auto; }
  .bq-about-hero-copy h1 { font-size: 34px; }
}

/* 2. Founder */
.bq-about-founder {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 56px; align-items: start;
}
.bq-about-founder-art {
  display: flex; align-items: flex-start; justify-content: center;
  position: sticky; top: 96px;
  min-width: 0;
}
.bq-about-founder-art img {
  display: block;
  width: 100%; max-width: 420px; height: auto;
  border-radius: 16px;
  box-shadow: var(--bq-sh-2);
}

/* 3. Why "BrightQ" — narrow centered ice band */
.bq-about-why {
  background: var(--bq-bg-tint);
  padding: 88px 28px;
  text-align: center;
}
.bq-about-why .bq-container { max-width: 720px; margin: 0 auto; }
.bq-about-why-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bq-sky);
  margin-bottom: 28px;
}
.bq-about-why-line {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.4;
  color: var(--bq-fg);
  margin: 0 0 12px;
}
.bq-about-why-line:last-of-type { margin-bottom: 0; }
.bq-about-why-close {
  margin-top: 28px;
  font-size: 15px; line-height: 1.65;
  color: var(--bq-ink-2);
}

/* 5. Values list */
.bq-about-values {
  border-top: 1px solid var(--bq-line);
  max-width: 880px;
}
.bq-about-value {
  padding: 22px 0;
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-about-value:last-child { border-bottom: 1px solid var(--bq-line); }
.bq-about-value h4 {
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bq-fg);
  margin: 0 0 6px;
}
.bq-about-value p {
  font-size: 15px; line-height: 1.65;
  color: var(--bq-ink-2); margin: 0;
}

/* 6. Closing — ice band, narrower container */
.bq-about-closing {
  background: var(--bq-bg-tint);
  padding: 96px 28px;
}
.bq-about-closing .bq-container {
  max-width: 1000px; margin: 0 auto;
}
.bq-about-closing-pet {
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: center;
  margin-top: 32px;
}
.bq-about-closing-pet-copy p {
  font-size: 16px; line-height: 1.75;
  color: var(--bq-ink-2); margin: 0;
}
.bq-about-closing-pet-art {
  display: flex; align-items: center; justify-content: center;
}
.bq-about-closing .bq-about-quote {
  margin-top: 40px;
  background: var(--bq-surface);
}

/* Responsive */
@media (max-width: 1000px) {
  .bq-about-hero,
  .bq-about-founder,
  .bq-about-closing-pet { grid-template-columns: 1fr; gap: 32px; }
  .bq-about-hero-art,
  .bq-about-founder-art,
  .bq-about-closing-pet-art { justify-content: flex-start; }
  .bq-about-founder-art { position: static; }
  .bq-about-hero-copy h2 { font-size: 34px; }
  .bq-about-head h3 { font-size: 28px; }
  .bq-about-why-line { font-size: 20px; }
  .bq-about-block { padding: 80px 24px; }
  .bq-about-block + .bq-about-block::before { margin-bottom: 64px; }
  .bq-about-placeholder--hero,
  .bq-about-placeholder--portrait,
  .bq-about-placeholder--oreo { max-width: 100%; }
}
@media (max-width: 700px) {
  .bq-about-why, .bq-about-closing { padding-left: 20px; padding-right: 20px; }
  .bq-about-why-line { font-size: 18px; }
  .bq-about-quote { padding: 18px 20px; font-size: 16px; }
}

/* About — closing CTA */
.bq-about-cta { text-align: center; padding-top: 80px; padding-bottom: 96px; }
.bq-about-cta h3 {
  font-size: 34px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15;
  color: var(--bq-fg); margin: 0 0 12px;
}
.bq-about-cta p {
  font-size: 16px; line-height: 1.6;
  color: var(--bq-ink-2); margin: 0 auto 24px;
  max-width: 580px;
}
.bq-about-cta-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

@media (max-width: 700px) {
  .bq-about-cta h3 { font-size: 26px; }
}

/* About — Section 4 (Where the 15+ years came from) — text + portrait two-column */
.bq-about-years {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
  margin-bottom: 32px;
}
.bq-about-years-art {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
.bq-about-years-art img {
  display: block;
  width: 100%; max-width: 480px; height: auto;
  border-radius: 16px;
  box-shadow: var(--bq-sh-2);
}
@media (max-width: 1000px) {
  .bq-about-years { grid-template-columns: 1fr; gap: 32px; }
  .bq-about-years-art img { max-width: 100%; }
}

/* About — Section 5 (What we believe) — values list + illustration two-column */
.bq-about-believe {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.bq-about-believe-copy { min-width: 0; }
.bq-about-believe-copy .bq-about-values { max-width: 100%; }
.bq-about-believe-art {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
.bq-about-believe-art img {
  display: block;
  width: 100%; max-width: 480px; height: auto;
  border-radius: 16px;
  box-shadow: var(--bq-sh-2);
}
@media (max-width: 1000px) {
  .bq-about-believe { grid-template-columns: 1fr; gap: 32px; }
  .bq-about-believe-art img { max-width: 100%; }
}

/* About — Section 6 (Why we do this) — Oreo image left + heading & prose right */
.bq-about-pet {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 56px; align-items: center;
  margin-bottom: 32px;
}
.bq-about-pet-art {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
.bq-about-pet-art img {
  display: block;
  width: 100%; max-width: 420px; height: auto;
  border-radius: 16px;
  box-shadow: var(--bq-sh-2);
}
.bq-about-pet-copy { min-width: 0; }
.bq-about-pet-copy .bq-about-head { margin-bottom: 24px; }
@media (max-width: 1000px) {
  .bq-about-pet { grid-template-columns: 1fr; gap: 32px; }
  .bq-about-pet-art img { max-width: 100%; }
}

/* ============================================================
   Privacy Policy page (#privacy-policy) — legal readability
   Plain, utilitarian, narrow column. No icons, no images.
   ============================================================ */

.bq-privacy {
  background: var(--bq-surface);
  padding: 88px 28px 96px;
}
.bq-privacy-container {
  max-width: 720px;
  margin: 0 auto;
}

/* Header */
.bq-privacy-header {
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--bq-line);
}
.bq-privacy-header h1 {
  font-size: 44px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--bq-fg);
  margin: 0 0 10px;
}
.bq-privacy-updated {
  font-size: 13px;
  color: var(--bq-ink-3);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Sections */
.bq-privacy-section {
  margin-bottom: 44px;
}
.bq-privacy-section:last-child {
  margin-bottom: 0;
}
.bq-privacy h2 {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.25;
  color: var(--bq-fg);
  margin: 0 0 16px;
}
.bq-privacy h3 {
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--bq-fg);
  margin: 24px 0 8px;
}
.bq-privacy p {
  font-size: 15px; line-height: 1.75;
  color: var(--bq-ink-2);
  margin: 0 0 14px;
}
.bq-privacy p:last-child { margin-bottom: 0; }
.bq-privacy ul {
  font-size: 15px; line-height: 1.75;
  color: var(--bq-ink-2);
  padding-left: 22px;
  margin: 0 0 14px;
}
.bq-privacy ul li {
  margin-bottom: 8px;
}
.bq-privacy ul li:last-child { margin-bottom: 0; }
.bq-privacy strong { color: var(--bq-fg); font-weight: 700; }
.bq-privacy a { color: var(--bq-deep-blue); }
.bq-privacy a:hover { color: var(--bq-fg); }

/* Contact block (Section 18) */
.bq-privacy-contact {
  background: var(--bq-bg-tint);
  border-radius: 14px;
  padding: 24px 26px;
  margin-top: 16px;
}
.bq-privacy-contact p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 6px;
}
.bq-privacy-contact p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .bq-privacy { padding: 64px 20px 80px; }
  .bq-privacy-header h1 { font-size: 34px; }
  .bq-privacy h2 { font-size: 20px; }
}

/* Footer brand block extras — Privacy Policy link + copyright + IP notice */
.bq-footer .brand .bq-footer-privacy {
  display: inline-block;
  margin-top: 12px;
  color: rgba(255,255,255,0.85);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.bq-footer .brand .bq-footer-privacy:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bq-footer .brand .bq-footer-copyright {
  font-size: 11px; line-height: 1.65;
  color: rgba(255,255,255,0.6);
  margin: 16px 0 8px;
  max-width: 380px;
}
.bq-footer .brand .bq-footer-ip {
  font-size: 11px; line-height: 1.65;
  color: rgba(255,255,255,0.5);
  margin: 0;
  max-width: 380px;
}

/* Footer bottom — single-item layout (center it now that copyright moved to brand block) */
.bq-footer-bottom { justify-content: center; }

/* ============================================================
/* ============================================================
   Airbnb / STR service page (#airbnb-str)
   Polished: gradient mesh hero, dramatic shadows, staggered
   reveal animations, BrightQ iconography, generous spacing.
   ============================================================ */

.bq-airbnb { background: var(--bq-bg); }
.bq-airbnb-block { padding: 112px 28px; position: relative; }
.bq-airbnb-block + .bq-airbnb-block { padding-top: 0; }
.bq-airbnb-block + .bq-airbnb-block::before {
  content: ''; display: block;
  border-top: 1px solid var(--bq-line-soft);
  max-width: var(--bq-container-wide);
  margin: 0 auto 88px;
}

/* ---------- Reveal animation (Intersection Observer) ---------- */
@keyframes bq-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bq-reveal { opacity: 0; }
.bq-reveal.is-revealed {
  animation: bq-fade-up 0.7s var(--bq-ease) both;
}
/* Staggered children in tier comparison */
.bq-airbnb-tiers > .bq-airbnb-tier.bq-reveal.is-revealed:nth-child(2) {
  animation-delay: 0.18s;
}
/* Staggered emergency points */
.bq-airbnb-emergency-points > .bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.12s; }
.bq-airbnb-emergency-points > .bq-reveal.is-revealed:nth-child(3) { animation-delay: 0.24s; }
/* Hero copy + art stagger */
.bq-airbnb-hero .bq-airbnb-hero-art.bq-reveal.is-revealed { animation-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
  .bq-reveal, .bq-reveal.is-revealed { animation: none; opacity: 1; transform: none; }
}

/* ---------- Section heads ---------- */
.bq-airbnb-head { max-width: 820px; margin-bottom: 48px; }
.bq-airbnb-head h3 {
  font-size: 38px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1;
  color: var(--bq-fg); margin: 0 0 16px;
}
.bq-airbnb-head p {
  font-size: 17px; line-height: 1.65;
  color: var(--bq-ink-2); margin: 0;
  max-width: 740px;
}
.bq-airbnb-head--invert h3 { color: #fff; }
.bq-airbnb-head--invert p { color: rgba(255,255,255,0.82); }

.bq-airbnb-section-tag {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-deep-blue);
  background: var(--bq-bg-tint);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.bq-airbnb-section-tag--invert {
  color: var(--bq-fg);
  background: var(--bq-sky);
}

/* ---------- 1. Hero refreshed — chip + framed art ---------- */
.bq-airbnb-hero-block {
  position: relative;
  padding: 110px 28px 90px;
  background: var(--bq-bg);
  overflow: hidden;
}
.bq-airbnb-mesh {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 600px at 88% 0%, rgba(91,163,217,0.18), transparent 55%),
    radial-gradient(700px 480px at -5% 100%, rgba(91,163,217,0.10), transparent 55%);
}
.bq-airbnb-hero {
  position: relative; z-index: 1;
  max-width: var(--bq-container-wide); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 72px; align-items: center;
}
.bq-airbnb-hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,163,217,0.10);
  border: 1px solid rgba(91,163,217,0.30);
  color: var(--bq-deep-blue);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}
:root[data-theme="dark"] .bq-airbnb-hero-chip { color: var(--bq-sky); }
.bq-airbnb-hero-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.18);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}
.bq-airbnb-hero-copy h1 {
  font-size: 56px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--bq-fg);
  margin: 0 0 22px;
}
.bq-airbnb-hero-lede {
  font-size: 18px; line-height: 1.6;
  color: var(--bq-fg-muted);
  margin: 0 0 32px;
  max-width: 620px;
}
.bq-airbnb-hero-cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 28px;
}
.bq-airbnb-hero-contact {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--bq-fg-subtle);
}
.bq-airbnb-hero-contact-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--bq-fg-muted);
  text-decoration: none;
  transition: color var(--bq-dur) var(--bq-ease);
}
.bq-airbnb-hero-contact-link:hover { color: var(--bq-link); }
.bq-airbnb-hero-contact-link i { width: 14px; height: 14px; }
.bq-airbnb-hero-contact-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--bq-fg-subtle);
  opacity: 0.5;
}

/* Art frame */
.bq-airbnb-hero-art { position: relative; min-width: 0; }
.bq-airbnb-hero-art-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--bq-sh-4);
}
.bq-airbnb-hero-art-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 0%, rgba(91,163,217,0.18), transparent 60%);
  z-index: 1;
}
.bq-airbnb-hero-art-frame img {
  display: block;
  width: 100%; height: auto;
  position: relative; z-index: 0;
}

@media (max-width: 1024px) {
  .bq-airbnb-hero { gap: 48px; }
  .bq-airbnb-hero-copy h1 { font-size: 44px; }
}
@media (max-width: 900px) {
  .bq-airbnb-hero-block { padding: 72px 24px 64px; }
  .bq-airbnb-hero { grid-template-columns: 1fr; gap: 40px; }
  .bq-airbnb-hero-art { order: -1; max-width: 480px; margin: 0 auto; }
  .bq-airbnb-hero-copy h1 { font-size: 36px; }
}

/* Primary CTA — dramatic gradient + lift */
.bq-airbnb-cta-primary {
  padding: 14px 26px;
  background: linear-gradient(135deg, var(--bq-navy) 0%, var(--bq-deep-blue) 100%);
  color: #fff;
  border: 0;
  box-shadow:
    0 10px 28px -12px rgba(12,35,64,0.45),
    0 4px 12px -6px rgba(12,35,64,0.30);
  transition: all 240ms var(--bq-ease);
}
.bq-airbnb-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px -10px rgba(12,35,64,0.55),
    0 6px 18px -6px rgba(12,35,64,0.36);
  background: linear-gradient(135deg, var(--bq-deep-blue) 0%, var(--bq-navy) 100%);
}
.bq-airbnb-cta-primary svg { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- 2. Two-tier comparison ---------- */
.bq-airbnb-tiers {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.bq-airbnb-tier {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 22px;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: all 280ms var(--bq-ease);
  box-shadow:
    0 20px 48px -28px rgba(12,35,64,0.20),
    0 6px 18px -8px rgba(12,35,64,0.10);
}
.bq-airbnb-tier:hover {
  transform: translateY(-4px);
  box-shadow:
    0 36px 72px -24px rgba(12,35,64,0.32),
    0 12px 28px -10px rgba(12,35,64,0.18);
}
.bq-airbnb-tier.is-featured {
  background: linear-gradient(160deg, var(--bq-navy) 0%, #07182f 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 28px 64px -22px rgba(12,35,64,0.55),
    0 10px 24px -10px rgba(12,35,64,0.30);
}
.bq-airbnb-tier.is-featured:hover {
  box-shadow:
    0 44px 88px -26px rgba(12,35,64,0.62),
    0 16px 32px -12px rgba(12,35,64,0.36);
}
.bq-airbnb-tier-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.bq-airbnb-tier-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--bq-bg-tint); color: var(--bq-deep-blue);
  padding: 6px 12px; border-radius: 999px;
}
.bq-airbnb-tier.is-featured .bq-airbnb-tier-tag {
  background: var(--bq-sky); color: var(--bq-fg);
}
.bq-airbnb-tier-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bq-bg-tint);
  color: var(--bq-deep-blue);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 280ms var(--bq-ease);
}
.bq-airbnb-tier-icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.bq-airbnb-tier.is-featured .bq-airbnb-tier-icon {
  background: rgba(91,163,217,0.20);
  color: var(--bq-sky);
}
.bq-airbnb-tier:hover .bq-airbnb-tier-icon { transform: rotate(-6deg) scale(1.06); }
.bq-airbnb-tier h4 {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bq-fg); margin: 4px 0 0;
}
.bq-airbnb-tier.is-featured h4 { color: #fff; }
.bq-airbnb-tier-quote {
  font-size: 15px; font-style: italic;
  color: var(--bq-deep-blue); margin: 0;
}
.bq-airbnb-tier.is-featured .bq-airbnb-tier-quote { color: var(--bq-sky); }
.bq-airbnb-tier > p:not(.bq-airbnb-tier-quote):not(.bq-airbnb-tier-note) {
  font-size: 15px; line-height: 1.65;
  color: var(--bq-ink-2); margin: 0;
}
.bq-airbnb-tier.is-featured > p:not(.bq-airbnb-tier-quote):not(.bq-airbnb-tier-note) {
  color: rgba(255,255,255,0.82);
}
.bq-airbnb-tier-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  padding: 18px 0 12px;
  border-top: 1px solid var(--bq-line-soft);
  margin-top: 4px;
}
.bq-airbnb-tier.is-featured .bq-airbnb-tier-price {
  border-top-color: rgba(255,255,255,0.14);
}
.bq-airbnb-tier-price-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bq-ink-3);
}
.bq-airbnb-tier.is-featured .bq-airbnb-tier-price-label {
  color: rgba(255,255,255,0.6);
}
.bq-airbnb-tier-price-amount {
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--bq-fg);
}
.bq-airbnb-tier.is-featured .bq-airbnb-tier-price-amount { color: #fff; }
.bq-airbnb-tier-price-unit {
  font-size: 13px; color: var(--bq-ink-3);
}
.bq-airbnb-tier.is-featured .bq-airbnb-tier-price-unit {
  color: rgba(255,255,255,0.6);
}
.bq-airbnb-tier-note {
  font-size: 13px; color: var(--bq-ink-3);
  margin: 0;
}
.bq-airbnb-tier.is-featured .bq-airbnb-tier-note { color: rgba(255,255,255,0.65); }
.bq-airbnb-tier-cta {
  align-self: flex-start;
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
}
.bq-airbnb-tier-cta svg { width: 14px; height: 14px; transition: transform var(--bq-dur) var(--bq-ease); }
.bq-airbnb-tier-cta:hover svg { transform: translateX(3px); }
.bq-airbnb-tier.is-featured .btn-primary {
  background: var(--bq-surface); color: var(--bq-fg); box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.bq-airbnb-tier.is-featured .btn-primary:hover { background: var(--bq-bg-tint); }

/* ---------- Lists with icons (sections 3, 4, 6, 7) ---------- */
.bq-airbnb-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--bq-line);
}
.bq-airbnb-list-item {
  display: grid; grid-template-columns: 48px 1fr; gap: 18px;
  padding: 28px 0;
  border-bottom: 1px solid var(--bq-line-soft);
  align-items: flex-start;
}
.bq-airbnb-list-item:nth-child(odd) {
  padding-right: 32px;
  border-right: 1px solid var(--bq-line-soft);
}
.bq-airbnb-list-item:nth-child(even) { padding-left: 32px; }
.bq-airbnb-list-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bq-bg-tint);
  color: var(--bq-deep-blue);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 240ms var(--bq-ease);
  box-shadow: 0 2px 8px -2px rgba(12,35,64,0.08);
}
.bq-airbnb-list-icon svg {
  width: 22px; height: 22px; stroke-width: 1.75;
}
.bq-airbnb-list-item:hover .bq-airbnb-list-icon {
  background: var(--bq-deep-blue);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 8px 18px -6px rgba(12,35,64,0.35);
}
.bq-airbnb-list-item h4 {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bq-fg); margin: 4px 0 8px;
}
.bq-airbnb-list-item p {
  font-size: 14px; line-height: 1.7;
  color: var(--bq-ink-2); margin: 0;
}

/* Inverted (navy) list */
.bq-airbnb-list--invert { border-top-color: rgba(255,255,255,0.18); }
.bq-airbnb-list--invert .bq-airbnb-list-item {
  border-bottom-color: rgba(255,255,255,0.10);
}
.bq-airbnb-list--invert .bq-airbnb-list-item:nth-child(odd) {
  border-right-color: rgba(255,255,255,0.10);
}
.bq-airbnb-list--invert .bq-airbnb-list-icon {
  background: rgba(91,163,217,0.18);
  color: var(--bq-sky);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.3);
}
.bq-airbnb-list--invert .bq-airbnb-list-item:hover .bq-airbnb-list-icon {
  background: var(--bq-sky);
  color: var(--bq-fg);
}
.bq-airbnb-list--invert .bq-airbnb-list-item h4 { color: #fff; }
.bq-airbnb-list--invert .bq-airbnb-list-item p { color: rgba(255,255,255,0.78); }

/* Hosted section (full-width navy) */
.bq-airbnb-hosted {
  background: linear-gradient(180deg, var(--bq-navy) 0%, #0a1d36 100%);
  color: #fff;
  padding: 112px 28px;
  position: relative;
  overflow: hidden;
}
.bq-airbnb-hosted::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(800px 460px at 90% 0%, rgba(91,163,217,0.16), transparent 65%);
  pointer-events: none;
}
.bq-airbnb-hosted .bq-container-wide { position: relative; max-width: var(--bq-container-wide); margin: 0 auto; }

/* Pricing note */
.bq-airbnb-pricing-note {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--bq-line-soft);
  font-size: 14px; line-height: 1.7;
  color: var(--bq-ink-3);
  max-width: 860px;
}
.bq-airbnb-pricing-note--invert {
  border-top-color: rgba(255,255,255,0.14);
  color: var(--bq-ice);
}

/* ---------- 5. Emergency band ---------- */
.bq-airbnb-emergency {
  background: linear-gradient(180deg, var(--bq-navy) 0%, #07182f 100%);
  color: #fff;
  padding: 112px 28px;
  position: relative;
  overflow: hidden;
}
.bq-airbnb-emergency::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(900px 520px at 10% 100%, rgba(91,163,217,0.14), transparent 60%);
  pointer-events: none;
}
.bq-airbnb-emergency .bq-container-wide {
  position: relative; max-width: var(--bq-container-wide); margin: 0 auto;
}
.bq-airbnb-emergency-rule {
  display: block; width: 56px; height: 3px;
  background: var(--bq-sky); margin-bottom: 24px;
  border-radius: 2px;
}
.bq-airbnb-emergency-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bq-sky);
}
.bq-airbnb-emergency h3 {
  font-size: 38px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.15;
  color: #fff; margin: 14px 0 24px;
  max-width: 900px;
}
.bq-airbnb-emergency-lede {
  font-size: 17px; line-height: 1.7;
  color: rgba(255,255,255,0.82);
  margin: 0; max-width: 820px;
}
.bq-airbnb-emergency-points {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.bq-airbnb-emergency-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(91,163,217,0.18);
  color: var(--bq-sky);
  margin-bottom: 16px;
}
.bq-airbnb-emergency-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
.bq-airbnb-emergency-points h5 {
  font-size: 16px; font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff; margin: 0 0 10px;
}
.bq-airbnb-emergency-points p {
  font-size: 14px; line-height: 1.7;
  color: var(--bq-ice); margin: 0;
}

/* ---------- 8. Quote form (ice action surface) ---------- */
.bq-airbnb-quote {
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(91,163,217,0.10), transparent 65%),
    var(--bq-ice);
  padding: 112px 28px;
}
.bq-airbnb-quote .bq-container { max-width: 920px; margin: 0 auto; }
.bq-airbnb-form {
  background: var(--bq-surface);
  border-radius: 22px;
  padding: 44px;
  box-shadow:
    0 36px 80px -32px rgba(12,35,64,0.30),
    0 12px 32px -12px rgba(12,35,64,0.16);
  display: flex; flex-direction: column; gap: 32px;
}
.bq-airbnb-fieldset {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 20px;
}
.bq-airbnb-fieldset + .bq-airbnb-fieldset {
  border-top: 1px solid var(--bq-line-soft);
  padding-top: 28px;
}
.bq-airbnb-fieldset legend {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bq-deep-blue);
  padding: 0; margin-bottom: 6px;
}
.bq-airbnb-fieldset legend svg {
  width: 14px; height: 14px; stroke-width: 2.2;
}
.bq-airbnb-field { display: flex; flex-direction: column; gap: 8px; }
.bq-airbnb-field label {
  font-size: 13px; font-weight: 700;
  color: var(--bq-fg);
  letter-spacing: 0.01em;
}
.bq-airbnb-required { color: var(--bq-deep-blue); }
.bq-airbnb-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Radio + checkbox chips */
.bq-airbnb-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.bq-airbnb-radio {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  background: var(--bq-surface);
  border: 1.5px solid var(--bq-line);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--bq-fg);
  cursor: pointer;
  transition: all var(--bq-dur) var(--bq-ease);
}
.bq-airbnb-radio:hover {
  border-color: var(--bq-deep-blue);
  color: var(--bq-deep-blue);
  transform: translateY(-1px);
}
.bq-airbnb-radio.is-active {
  background: linear-gradient(135deg, var(--bq-navy), var(--bq-deep-blue));
  border-color: var(--bq-fg);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(12,35,64,0.35);
}
.bq-airbnb-radio input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 0; height: 0;
}

/* Form footer & primary CTA */
.bq-airbnb-form-foot {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--bq-line-soft);
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.bq-airbnb-submit {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  font-size: 15px; font-weight: 700;
  background: linear-gradient(135deg, var(--bq-navy) 0%, var(--bq-deep-blue) 100%);
  color: #fff; border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    0 14px 30px -12px rgba(12,35,64,0.45),
    0 4px 12px -6px rgba(12,35,64,0.30);
  transition: all 260ms var(--bq-ease);
}
.bq-airbnb-submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 44px -14px rgba(12,35,64,0.55),
    0 6px 18px -6px rgba(12,35,64,0.36);
  background: linear-gradient(135deg, var(--bq-deep-blue) 0%, var(--bq-navy) 100%);
}
.bq-airbnb-submit svg { width: 16px; height: 16px; stroke-width: 2; transition: transform 240ms var(--bq-ease); }
.bq-airbnb-submit:hover svg { transform: translateX(4px); }
.bq-airbnb-form-note { font-size: 12px; color: var(--bq-ink-3); margin: 0; }

/* Confirmation */
.bq-airbnb-confirm {
  background: var(--bq-surface);
  border-radius: 22px;
  padding: 56px 40px;
  box-shadow:
    0 36px 80px -32px rgba(12,35,64,0.30),
    0 12px 32px -12px rgba(12,35,64,0.16);
  text-align: center;
  animation: bq-fade-up 0.7s var(--bq-ease) both;
}
.bq-airbnb-confirm-mark {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bq-ice), #d4e8f7);
  color: var(--bq-success);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(45,138,107,0.45);
}
.bq-airbnb-confirm-mark svg { width: 32px; height: 32px; stroke-width: 3; }
.bq-airbnb-confirm h4 {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--bq-fg); margin: 0 0 14px;
}
.bq-airbnb-confirm p {
  font-size: 15px; line-height: 1.65;
  color: var(--bq-ink-2);
  margin: 0 auto 8px; max-width: 540px;
}
.bq-airbnb-confirm-contact { font-weight: 700; color: var(--bq-fg); }
.bq-airbnb-confirm-contact a { color: var(--bq-deep-blue); }
.bq-airbnb-confirm-note {
  margin-top: 20px !important;
  font-size: 12px !important;
  color: var(--bq-ink-3) !important;
}

/* ---------- 9. Closing CTA strip ---------- */
.bq-airbnb-cta { text-align: center; }
.bq-airbnb-cta h3 {
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--bq-fg); margin: 0 0 12px;
}
.bq-airbnb-cta p {
  font-size: 15px; line-height: 1.6;
  color: var(--bq-ink-2); margin: 0 auto 26px;
  max-width: 540px;
}
.bq-airbnb-cta-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.bq-airbnb-cta-actions .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
}
.bq-airbnb-cta-actions .btn svg { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .bq-airbnb-block { padding: 88px 24px; }
  .bq-airbnb-block + .bq-airbnb-block::before { margin-bottom: 64px; }
  .bq-airbnb-hosted, .bq-airbnb-emergency, .bq-airbnb-quote { padding: 88px 24px; }
  .bq-airbnb-hero { grid-template-columns: 1fr; gap: 36px; }
  .bq-airbnb-hero-art { order: -1; }
  .bq-airbnb-hero-art img { max-width: 100%; }
  .bq-airbnb-hero-copy h2 { font-size: 36px; }
  .bq-airbnb-head h3 { font-size: 30px; }
  .bq-airbnb-tiers { grid-template-columns: 1fr; }
  .bq-airbnb-emergency-points { grid-template-columns: 1fr; gap: 28px; }
  .bq-airbnb-emergency h3 { font-size: 28px; }
}
@media (max-width: 700px) {
  .bq-airbnb-list { grid-template-columns: 1fr; }
  .bq-airbnb-list-item:nth-child(odd) {
    border-right: none; padding-right: 0;
  }
  .bq-airbnb-list-item:nth-child(even) { padding-left: 0; }
  .bq-airbnb-grid-2 { grid-template-columns: 1fr; }
  .bq-airbnb-form { padding: 28px 22px; }
  .bq-airbnb-tier { padding: 28px 24px; }
  .bq-airbnb-cta h3 { font-size: 24px; }
}

/* Services grid — 3x2 layout when 6 cards are present */
.bq-services.bq-services--six {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1000px) {
  .bq-services.bq-services--six { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bq-services.bq-services--six { grid-template-columns: 1fr; }
}

/* ============================================================
   Global reveal stagger rules + elevated shadows + CTA polish
   Applied across home page, About, ForBusiness, ServiceDetail.
   The .bq-reveal mechanic itself lives in the Airbnb block
   (keyframes bq-fade-up) and is reused globally.
   ============================================================ */

/* ---- Stagger: home service cards (3-col grid) ---- */
.bq-services .bq-service-card.bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.08s; }
.bq-services .bq-service-card.bq-reveal.is-revealed:nth-child(3) { animation-delay: 0.16s; }
.bq-services .bq-service-card.bq-reveal.is-revealed:nth-child(4) { animation-delay: 0.06s; }
.bq-services .bq-service-card.bq-reveal.is-revealed:nth-child(5) { animation-delay: 0.14s; }
.bq-services .bq-service-card.bq-reveal.is-revealed:nth-child(6) { animation-delay: 0.22s; }

/* ---- Stagger: pricing cards ---- */
.bq-pricing .bq-price.bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.12s; }
.bq-pricing .bq-price.bq-reveal.is-revealed:nth-child(3) { animation-delay: 0.24s; }

/* ---- Stagger: B2B approach (3 columns) ---- */
.bq-b2b-approach .bq-b2b-approach-col.bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.12s; }
.bq-b2b-approach .bq-b2b-approach-col.bq-reveal.is-revealed:nth-child(3) { animation-delay: 0.24s; }

/* ---- Stagger: B2B list items ---- */
.bq-b2b-list .bq-b2b-list-item.bq-reveal.is-revealed:nth-child(odd)  { animation-delay: 0.05s; }
.bq-b2b-list .bq-b2b-list-item.bq-reveal.is-revealed:nth-child(even) { animation-delay: 0.12s; }

/* ---- Stagger: B2B tiers ---- */
.bq-b2b-tiers .bq-b2b-tier.bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.12s; }
.bq-b2b-tiers .bq-b2b-tier.bq-reveal.is-revealed:nth-child(3) { animation-delay: 0.24s; }
.bq-b2b-tiers .bq-b2b-tier.bq-reveal.is-revealed:nth-child(4) { animation-delay: 0.36s; }

/* ---- Stagger: About values list ---- */
.bq-about-values .bq-about-value.bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.06s; }
.bq-about-values .bq-about-value.bq-reveal.is-revealed:nth-child(3) { animation-delay: 0.12s; }
.bq-about-values .bq-about-value.bq-reveal.is-revealed:nth-child(4) { animation-delay: 0.18s; }
.bq-about-values .bq-about-value.bq-reveal.is-revealed:nth-child(5) { animation-delay: 0.24s; }

/* ---- Stagger: ServiceDetail include cards (3-col) ---- */
.bq-svc-includes-grid .bq-svc-incl-card.bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.08s; }
.bq-svc-includes-grid .bq-svc-incl-card.bq-reveal.is-revealed:nth-child(3) { animation-delay: 0.16s; }
.bq-svc-includes-grid .bq-svc-incl-card.bq-reveal.is-revealed:nth-child(5) { animation-delay: 0.08s; }
.bq-svc-includes-grid .bq-svc-incl-card.bq-reveal.is-revealed:nth-child(6) { animation-delay: 0.16s; }

/* ---- Stagger: ServiceDetail process steps (4-col) ---- */
.bq-svc-steps .bq-svc-step.bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.08s; }
.bq-svc-steps .bq-svc-step.bq-reveal.is-revealed:nth-child(3) { animation-delay: 0.16s; }
.bq-svc-steps .bq-svc-step.bq-reveal.is-revealed:nth-child(4) { animation-delay: 0.24s; }

/* ---- Stagger: ServiceDetail other-services cards ---- */
.bq-svc-other-grid .bq-service-card.bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.08s; }
.bq-svc-other-grid .bq-service-card.bq-reveal.is-revealed:nth-child(3) { animation-delay: 0.16s; }
.bq-svc-other-grid .bq-service-card.bq-reveal.is-revealed:nth-child(4) { animation-delay: 0.24s; }

/* ---- Stagger: gallery cards ---- */
.bq-svc-gallery-inner .bq-svc-gallery-card.bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.10s; }
.bq-svc-gallery-inner .bq-svc-gallery-card.bq-reveal.is-revealed:nth-child(3) { animation-delay: 0.20s; }

/* ============================================================
   Elevated shadows on key surfaces (subtle bump on most,
   dramatic on featured/large cards). Hover state bumps further.
   ============================================================ */

/* Home service cards — softer default, dramatic hover */
.bq-service-card {
  box-shadow:
    0 14px 36px -22px rgba(12,35,64,0.18),
    0 4px 14px -6px rgba(12,35,64,0.08);
}
.bq-service-card:hover {
  box-shadow:
    0 32px 60px -22px rgba(12,35,64,0.30),
    0 10px 24px -10px rgba(12,35,64,0.18);
}

/* Pricing cards */
.bq-price {
  box-shadow:
    0 18px 40px -24px rgba(12,35,64,0.18),
    0 5px 14px -6px rgba(12,35,64,0.10);
}
.bq-price:hover {
  box-shadow:
    0 32px 64px -24px rgba(12,35,64,0.30),
    0 10px 24px -10px rgba(12,35,64,0.18);
}
.bq-price.featured {
  box-shadow:
    0 26px 60px -22px rgba(12,35,64,0.42),
    0 10px 22px -10px rgba(12,35,64,0.24);
}
.bq-price.featured:hover {
  box-shadow:
    0 42px 84px -24px rgba(12,35,64,0.50),
    0 14px 30px -12px rgba(12,35,64,0.32);
}

/* B2B tiers */
.bq-b2b-tier {
  box-shadow:
    0 16px 40px -24px rgba(12,35,64,0.18),
    0 4px 14px -6px rgba(12,35,64,0.10);
}
.bq-b2b-tier:hover {
  box-shadow:
    0 32px 64px -24px rgba(12,35,64,0.30),
    0 10px 24px -10px rgba(12,35,64,0.18);
}
.bq-b2b-tier.is-featured {
  box-shadow:
    0 26px 60px -22px rgba(12,35,64,0.42),
    0 10px 22px -10px rgba(12,35,64,0.24);
}

/* ContactDirect band */
.bq-contact-direct-card {
  box-shadow:
    0 30px 70px -28px rgba(12,35,64,0.40),
    0 12px 28px -12px rgba(12,35,64,0.22);
}

/* About cards / quote chips already shadowed via .bq-about-quote (subtle) */

/* ServiceDetail hero image card */
.bq-svc-hero-image img {
  box-shadow:
    0 26px 60px -24px rgba(12,35,64,0.32),
    0 10px 22px -10px rgba(12,35,64,0.16);
  border-radius: 18px;
}

/* About hero + portraits + diversity images — bump shadows */
.bq-about-hero-art img,
.bq-about-founder-art img,
.bq-about-years-art img,
.bq-about-believe-art img,
.bq-about-pet-art img,
.bq-b2b-intro-mark img {
  box-shadow:
    0 24px 50px -22px rgba(12,35,64,0.28),
    0 10px 22px -10px rgba(12,35,64,0.14) !important;
}

/* ============================================================
   Elevated primary CTA — global utility class
   Same gradient + lift treatment used in the Airbnb hero.
   ============================================================ */
.btn.bq-cta-elevated {
  background: linear-gradient(135deg, var(--bq-navy) 0%, var(--bq-deep-blue) 100%);
  color: #fff;
  border: 0;
  box-shadow:
    0 12px 28px -12px rgba(12,35,64,0.45),
    0 4px 12px -6px rgba(12,35,64,0.30);
  transition: all 240ms var(--bq-ease);
}
.btn.bq-cta-elevated:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 38px -10px rgba(12,35,64,0.55),
    0 6px 18px -6px rgba(12,35,64,0.36);
  background: linear-gradient(135deg, var(--bq-deep-blue) 0%, var(--bq-navy) 100%);
}

/* ============================================================
   Post-Construction service page (#post-construction)
   Typography-led, minimalist. 3-Phase Standard as centerpiece.
   Navy promise band, ice form surface, dual scope treatment.
   Form internals reuse .bq-airbnb-form / .bq-airbnb-radio etc.
   ============================================================ */

.bq-pc { background: var(--bq-bg); }
.bq-pc-block { padding: 112px 28px; position: relative; }
.bq-pc-block + .bq-pc-block { padding-top: 0; }
.bq-pc-block + .bq-pc-block::before {
  content: ''; display: block;
  border-top: 1px solid var(--bq-line-soft);
  max-width: var(--bq-container-wide);
  margin: 0 auto 88px;
}

/* Section heads */
.bq-pc-head { max-width: 820px; margin-bottom: 48px; }
.bq-pc-head h3 {
  font-size: 38px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1;
  color: var(--bq-fg); margin: 0 0 16px;
}
.bq-pc-head p {
  font-size: 17px; line-height: 1.65;
  color: var(--bq-ink-2); margin: 0;
  max-width: 760px;
}
.bq-pc-section-tag {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-deep-blue);
  background: var(--bq-bg-tint);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.bq-pc-section-tag--muted {
  color: var(--bq-ink-3);
  background: var(--bq-surface-2);
}

/* 1. Hero refreshed — chip + framed art */
.bq-pc-hero-block {
  position: relative;
  padding: 110px 28px 90px;
  background: var(--bq-bg);
  overflow: hidden;
}
.bq-pc-mesh {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(91,163,217,0.18), transparent 55%),
    radial-gradient(700px 480px at 100% 100%, rgba(91,163,217,0.10), transparent 55%);
}
.bq-pc-hero {
  position: relative; z-index: 1;
  max-width: var(--bq-container-wide); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px; align-items: center;
}
.bq-pc-hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,163,217,0.10);
  border: 1px solid rgba(91,163,217,0.30);
  color: var(--bq-deep-blue);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}
:root[data-theme="dark"] .bq-pc-hero-chip { color: var(--bq-sky); }
.bq-pc-hero-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.18);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}
.bq-pc-hero-copy h1 {
  font-size: 56px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--bq-fg);
  margin: 0 0 22px;
}
.bq-pc-hero-lede {
  font-size: 18px; line-height: 1.6;
  color: var(--bq-fg-muted);
  margin: 0 0 32px;
  max-width: 620px;
}
.bq-pc-hero-cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 28px;
}
.bq-pc-hero-cta .btn svg { width: 16px; height: 16px; stroke-width: 2; }
.bq-pc-hero-contact {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--bq-fg-subtle);
}
.bq-pc-hero-contact-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--bq-fg-muted);
  text-decoration: none;
  transition: color var(--bq-dur) var(--bq-ease);
}
.bq-pc-hero-contact-link:hover { color: var(--bq-link); }
.bq-pc-hero-contact-link i { width: 14px; height: 14px; }
.bq-pc-hero-contact-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--bq-fg-subtle);
  opacity: 0.5;
}
.bq-pc-hero-art { position: relative; min-width: 0; }
.bq-pc-hero-art-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--bq-sh-4);
}
.bq-pc-hero-art-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 70% 0%, rgba(91,163,217,0.18), transparent 60%);
  z-index: 1;
}
.bq-pc-hero-art-frame img {
  display: block;
  width: 100%; height: auto;
  position: relative; z-index: 0;
}

@media (max-width: 1024px) {
  .bq-pc-hero { gap: 48px; }
  .bq-pc-hero-copy h1 { font-size: 44px; }
}
@media (max-width: 900px) {
  .bq-pc-hero-block { padding: 72px 24px 64px; }
  .bq-pc-hero { grid-template-columns: 1fr; gap: 40px; }
  .bq-pc-hero-art { order: -1; max-width: 480px; margin: 0 auto; }
  .bq-pc-hero-copy h1 { font-size: 36px; }
}

/* 2. Prose blocks */
.bq-pc-prose { max-width: 820px; }
.bq-pc-prose p {
  font-size: 16px; line-height: 1.75;
  color: var(--bq-ink-2); margin: 0;
}
.bq-pc-prose p + p { margin-top: 18px; }
.bq-pc-prose-callout {
  margin-top: 28px !important;
  padding: 22px 26px;
  background: var(--bq-bg-tint);
  border-left: 3px solid var(--bq-sky);
  border-radius: 12px;
  font-style: italic;
  color: var(--bq-fg) !important;
  font-weight: 600;
}

/* 3 & 5. Two-column unlinked lists (no icons, just title + body) */
.bq-pc-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--bq-line);
}
.bq-pc-list-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-pc-list-item:nth-child(odd) {
  padding-right: 32px;
  border-right: 1px solid var(--bq-line-soft);
}
.bq-pc-list-item:nth-child(even) { padding-left: 32px; }
.bq-pc-list-item h4 {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bq-fg); margin: 0 0 8px;
}
.bq-pc-list-item p {
  font-size: 14px; line-height: 1.7;
  color: var(--bq-ink-2); margin: 0;
}

/* 4. The 3-Phase Standard — visual centerpiece */
.bq-pc-phases {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bq-pc-phase-card {
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  border-radius: 22px;
  padding: 36px 32px;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow:
    0 20px 48px -28px rgba(12,35,64,0.20),
    0 6px 18px -8px rgba(12,35,64,0.10);
  transition: all 280ms var(--bq-ease);
  overflow: hidden;
}
.bq-pc-phase-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bq-sky), var(--bq-deep-blue));
  opacity: 0; transform: translateY(-3px);
  transition: all 280ms var(--bq-ease);
}
.bq-pc-phase-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 36px 72px -24px rgba(12,35,64,0.32),
    0 12px 28px -10px rgba(12,35,64,0.18);
}
.bq-pc-phase-card:hover::before {
  opacity: 1; transform: translateY(0);
}
.bq-pc-phase-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-pc-phase-num {
  font-size: 56px; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
  color: var(--bq-sky);
  font-variant-numeric: tabular-nums;
}
.bq-pc-phase-head h4 {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bq-fg); margin: 0;
}
.bq-pc-phase-meta {
  margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.bq-pc-phase-meta dt {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bq-deep-blue);
  margin-bottom: 4px;
}
.bq-pc-phase-meta dd {
  margin: 0;
  font-size: 14px; line-height: 1.65;
  color: var(--bq-ink-2);
}

/* 6. Scope — dual treatment (out-of-scope white, add-ons ice) */
.bq-pc-scope {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-top: 1px solid var(--bq-line);
  padding-top: 36px;
}
.bq-pc-scope-out,
.bq-pc-scope-addons {
  padding: 32px;
  border-radius: 18px;
  box-shadow:
    0 14px 36px -22px rgba(12,35,64,0.18),
    0 4px 14px -6px rgba(12,35,64,0.08);
}
.bq-pc-scope-out {
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
}
.bq-pc-scope-addons {
  background: var(--bq-bg-tint);
  border: 1px solid rgba(91,163,217,0.18);
}
.bq-pc-scope-out h4,
.bq-pc-scope-addons h4 {
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bq-fg); margin: 8px 0 14px;
}
.bq-pc-scope-out > p,
.bq-pc-scope-addons > p {
  font-size: 14px; line-height: 1.7;
  color: var(--bq-ink-2); margin: 0 0 18px;
}
.bq-pc-scope-out ul,
.bq-pc-scope-addons ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.bq-pc-scope-out li,
.bq-pc-scope-addons li {
  font-size: 14px; line-height: 1.6;
  color: var(--bq-ink-2);
  padding-left: 16px; position: relative;
}
.bq-pc-scope-out li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bq-ink-3);
}
.bq-pc-scope-addons li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bq-sky);
}
.bq-pc-scope-out strong,
.bq-pc-scope-addons strong { color: var(--bq-fg); font-weight: 700; }
.bq-pc-scope-addons-note {
  margin-top: 18px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(91,163,217,0.18);
  font-size: 13px !important;
  color: var(--bq-deep-blue) !important;
}

/* 7. Process — numbered list */
.bq-pc-process {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--bq-line);
}
.bq-pc-process-item {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  padding: 28px 0;
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-pc-process-item:nth-child(odd) {
  padding-right: 32px;
  border-right: 1px solid var(--bq-line-soft);
}
.bq-pc-process-item:nth-child(even) { padding-left: 32px; }
.bq-pc-process-num {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bq-sky);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bq-pc-process-item h4 {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bq-fg); margin: 0 0 8px;
}
.bq-pc-process-item p {
  font-size: 14px; line-height: 1.7;
  color: var(--bq-ink-2); margin: 0;
}

/* 8. Quote form — ice surface (reuses .bq-airbnb-form internals) */
.bq-pc-quote {
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(91,163,217,0.10), transparent 65%),
    var(--bq-ice);
  padding: 112px 28px;
}
.bq-pc-quote .bq-container { max-width: 920px; margin: 0 auto; }

/* 9. Touch-up guarantee — navy band */
.bq-pc-guarantee {
  background: linear-gradient(180deg, var(--bq-navy) 0%, #07182f 100%);
  color: #fff;
  padding: 112px 28px;
  position: relative;
  overflow: hidden;
}
.bq-pc-guarantee::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(900px 520px at 10% 100%, rgba(91,163,217,0.14), transparent 60%);
  pointer-events: none;
}
.bq-pc-guarantee .bq-container-wide {
  position: relative; max-width: var(--bq-container-wide); margin: 0 auto;
}
.bq-pc-guarantee-rule {
  display: block; width: 56px; height: 3px;
  background: var(--bq-sky); margin-bottom: 24px;
  border-radius: 2px;
}
.bq-pc-guarantee-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bq-sky);
}
.bq-pc-guarantee h3 {
  font-size: 38px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.15;
  color: #fff; margin: 14px 0 24px;
  max-width: 900px;
}
.bq-pc-guarantee-lede {
  font-size: 17px; line-height: 1.75;
  color: rgba(255,255,255,0.85);
  margin: 0; max-width: 860px;
}

/* 10. Closing CTA strip */
.bq-pc-cta { text-align: center; }
.bq-pc-cta h3 {
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--bq-fg); margin: 0 0 12px;
}
.bq-pc-cta p {
  font-size: 15px; line-height: 1.6;
  color: var(--bq-ink-2); margin: 0 auto 26px;
  max-width: 560px;
}
.bq-pc-cta-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.bq-pc-cta-actions .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
}
.bq-pc-cta-actions .btn svg { width: 16px; height: 16px; stroke-width: 2; }
.bq-pc-cta-tagline {
  margin-top: 32px !important;
  font-size: 13px !important;
  color: var(--bq-ink-3) !important;
  max-width: 600px;
}

/* Stagger for PC sections */
.bq-pc-phases > .bq-pc-phase-card.bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.12s; }
.bq-pc-phases > .bq-pc-phase-card.bq-reveal.is-revealed:nth-child(3) { animation-delay: 0.24s; }
.bq-pc-scope > .bq-reveal.is-revealed:nth-child(2) { animation-delay: 0.14s; }
.bq-pc-list .bq-pc-list-item.bq-reveal.is-revealed:nth-child(odd)  { animation-delay: 0.05s; }
.bq-pc-list .bq-pc-list-item.bq-reveal.is-revealed:nth-child(even) { animation-delay: 0.12s; }
.bq-pc-process .bq-pc-process-item.bq-reveal.is-revealed:nth-child(odd)  { animation-delay: 0.05s; }
.bq-pc-process .bq-pc-process-item.bq-reveal.is-revealed:nth-child(even) { animation-delay: 0.12s; }

/* Responsive */
@media (max-width: 1000px) {
  .bq-pc-block { padding: 88px 24px; }
  .bq-pc-block + .bq-pc-block::before { margin-bottom: 64px; }
  .bq-pc-quote, .bq-pc-guarantee { padding: 88px 24px; }
  .bq-pc-hero { grid-template-columns: 1fr; gap: 36px; }
  .bq-pc-hero-art { order: -1; }
  .bq-pc-hero-art img { max-width: 100%; }
  .bq-pc-hero-copy h2 { font-size: 36px; }
  .bq-pc-head h3 { font-size: 30px; }
  .bq-pc-phases { grid-template-columns: 1fr; }
  .bq-pc-scope { grid-template-columns: 1fr; }
  .bq-pc-guarantee h3 { font-size: 28px; }
}
@media (max-width: 700px) {
  .bq-pc-list, .bq-pc-process { grid-template-columns: 1fr; }
  .bq-pc-list-item:nth-child(odd), .bq-pc-process-item:nth-child(odd) {
    border-right: none; padding-right: 0;
  }
  .bq-pc-list-item:nth-child(even), .bq-pc-process-item:nth-child(even) { padding-left: 0; }
  .bq-pc-phase-card { padding: 28px 24px; }
  .bq-pc-phase-num { font-size: 44px; }
  .bq-pc-phase-head h4 { font-size: 22px; }
  .bq-pc-scope-out, .bq-pc-scope-addons { padding: 24px; }
  .bq-pc-cta h3 { font-size: 24px; }
}

/* Post-Construction · Section 4 methodology head — text left, small image right */
.bq-pc-methodology-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px; align-items: center;
  margin-bottom: 48px;
}
.bq-pc-methodology-head .bq-pc-head { margin-bottom: 0; max-width: none; }
.bq-pc-methodology-art {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
.bq-pc-methodology-art img {
  display: block;
  width: 320px; max-width: 100%; height: auto;
  border-radius: 16px;
  box-shadow:
    0 20px 44px -22px rgba(12,35,64,0.26),
    0 6px 16px -8px rgba(12,35,64,0.12);
}
@media (max-width: 1000px) {
  .bq-pc-methodology-head { grid-template-columns: 1fr; gap: 28px; }
  .bq-pc-methodology-art { justify-content: flex-start; }
  .bq-pc-methodology-art img { width: 260px; }
}

/* Post-Construction · Section 5 included head — text left, framed image right */
.bq-pc-included-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
  margin-bottom: 48px;
}
.bq-pc-included-head .bq-pc-head { margin-bottom: 0; max-width: none; }
.bq-pc-included-art {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  padding: 14px 14px 14px 14px;
}
/* Offset accent block behind the image — BrightQ ice tint with a sky border */
.bq-pc-included-art::before {
  content: "";
  position: absolute;
  top: 18px; left: 18px; right: -6px; bottom: -14px;
  background: var(--bq-bg-tint);
  border: 1px solid rgba(91,163,217,0.45);
  border-radius: 18px;
  z-index: 0;
}
.bq-pc-included-frame {
  position: relative; z-index: 1;
  padding: 8px;
  background: var(--bq-surface);
  border: 1px solid rgba(12,35,64,0.10);
  border-radius: 16px;
  box-shadow:
    0 24px 50px -22px rgba(12,35,64,0.28),
    0 8px 18px -8px rgba(12,35,64,0.14);
}
.bq-pc-included-frame img {
  display: block;
  width: 100%; max-width: 100%; height: auto;
  border-radius: 10px;
}
@media (max-width: 1000px) {
  .bq-pc-included-head { grid-template-columns: 1fr; gap: 28px; }
  .bq-pc-included-art { justify-content: flex-start; padding: 10px; }
  .bq-pc-included-art::before { top: 14px; left: 14px; right: -4px; bottom: -10px; }
  .bq-pc-included-frame { max-width: 480px; }
}

/* Form brand corner — small logo as aesthetic detail in the form card */
.bq-airbnb-form { position: relative; }
.bq-airbnb-form-brand {
  position: absolute;
  top: 20px; right: 24px;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 240ms var(--bq-ease);
}
.bq-airbnb-form-brand img {
  display: block;
  height: 36px; width: auto;
}
.bq-airbnb-form:hover .bq-airbnb-form-brand { opacity: 0.75; }
@media (max-width: 700px) {
  .bq-airbnb-form-brand { top: 14px; right: 16px; }
  .bq-airbnb-form-brand img { height: 28px; }
}

/* Make first fieldset legend respect the brand corner space on small screens */
.bq-airbnb-form > .bq-airbnb-fieldset:first-of-type { padding-right: 60px; }
@media (max-width: 700px) {
  .bq-airbnb-form > .bq-airbnb-fieldset:first-of-type { padding-right: 0; }
}

/* Polished radio chip — check indicator when active */
.bq-airbnb-radio.is-active {
  padding-left: 32px;
}
.bq-airbnb-radio.is-active::before {
  content: '';
  position: absolute;
  left: 12px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  background-image:
    linear-gradient(45deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%);
  background-size: 8px 8px, 8px 8px;
  background-position: 4px 6px, 2px 4px;
  background-repeat: no-repeat;
}
.bq-airbnb-radio { position: relative; }
.bq-airbnb-radio.is-active::before {
  /* simpler clean check using SVG-via-mask */
  background: none;
  border: 2px solid #fff;
  border-top: 0; border-right: 0;
  width: 9px; height: 5px;
  border-radius: 0;
  transform: rotate(-45deg);
  margin-top: -5px;
  left: 13px;
}

/* ============================================================
   Form validation banner (Airbnb, Post-Construction)
   Shown when required fields are missing on submit.
   ============================================================ */
.bq-airbnb-form .bq-form-errors {
  background: rgba(181, 56, 63, 0.08);
  border: 1px solid rgba(181, 56, 63, 0.30);
  border-left: 4px solid var(--bq-danger);
  padding: 18px 22px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #7a1e23;
  animation: bq-form-shake 320ms cubic-bezier(.36,.07,.19,.97);
}
@keyframes bq-form-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}
.bq-airbnb-form .bq-form-errors strong {
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--bq-danger);
  letter-spacing: 0.01em;
  font-size: 13px;
}
.bq-airbnb-form .bq-form-errors ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.bq-airbnb-form .bq-form-errors li {
  margin-bottom: 4px;
  line-height: 1.5;
}

/* Required asterisk already in airbnb form (.bq-airbnb-required) — keep consistent */
.bq-airbnb-required { color: var(--bq-deep-blue); font-weight: 800; }

/* Post-Construction · Section 7 How we work head — 2-col with banner image */
.bq-pc-process-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
  margin-bottom: 48px;
}
.bq-pc-process-head .bq-pc-head { margin-bottom: 0; }
.bq-pc-process-art {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
.bq-pc-process-art img {
  display: block;
  width: 100%; max-width: 560px; height: auto;
  border-radius: 16px;
  box-shadow:
    0 24px 50px -22px rgba(12,35,64,0.28),
    0 8px 18px -8px rgba(12,35,64,0.14);
}
@media (max-width: 1000px) {
  .bq-pc-process-head { grid-template-columns: 1fr; gap: 28px; }
  .bq-pc-process-art img { max-width: 100%; }
}

/* ============================================================
   Service detail — feature row (text + image side-by-side).
   Used when a service page wants to highlight a hero image
   alongside descriptive copy instead of as a full-width banner.
   ============================================================ */
.bq-svc-feature {
  padding: 56px 28px 24px;
  background: var(--bq-surface);
}
.bq-svc-feature-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.bq-svc-feature-grid + .bq-svc-feature-grid { margin-top: 72px; }
.bq-svc-feature-grid.is-reverse {
  grid-template-columns: 1.05fr 1fr;
}
.bq-svc-feature-grid.is-reverse .bq-svc-feature-copy { order: 2; }
.bq-svc-feature-grid.is-reverse .bq-svc-feature-art  { order: 1; }

.bq-svc-feature-copy { max-width: 560px; }
.bq-svc-feature-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-deep-blue);
  background: var(--bq-bg-tint);
  padding: 6px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.bq-svc-feature-copy h3 {
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15;
  color: var(--bq-fg);
  margin: 0 0 18px;
}
.bq-svc-feature-copy p {
  font-size: 16px; line-height: 1.7;
  color: var(--bq-ink-2);
  margin: 0;
}
.bq-svc-feature-copy p + p { margin-top: 14px; }

.bq-svc-feature-art {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
.bq-svc-feature-art img {
  display: block;
  width: 100%; max-width: 560px; height: auto;
  border-radius: 20px;
  box-shadow:
    0 28px 60px -24px rgba(15,30,60,0.32),
    0 10px 24px -10px rgba(15,30,60,0.18);
}

@media (max-width: 1000px) {
  .bq-svc-feature { padding: 40px 24px 16px; }
  .bq-svc-feature-grid,
  .bq-svc-feature-grid.is-reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .bq-svc-feature-grid + .bq-svc-feature-grid { margin-top: 48px; }
  .bq-svc-feature-grid.is-reverse .bq-svc-feature-copy,
  .bq-svc-feature-grid.is-reverse .bq-svc-feature-art { order: initial; }
  .bq-svc-feature-art { order: -1; }
  .bq-svc-feature-art img { max-width: 100%; }
  .bq-svc-feature-copy h3 { font-size: 26px; }
}

/* Post-Construction · Section 2 problem head — text-heavy left + smaller image right */
.bq-pc-problem-head {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
  margin-bottom: 36px;
}
.bq-pc-problem-copy {
  min-width: 0;
}
.bq-pc-problem-copy .bq-pc-section-tag { margin-bottom: 18px; }
.bq-pc-problem-copy h3 {
  font-size: 36px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1;
  color: var(--bq-fg);
  margin: 0 0 18px;
}
.bq-pc-problem-copy .bq-pc-prose { max-width: 100%; }
.bq-pc-problem-copy .bq-pc-prose p {
  font-size: 16px; line-height: 1.75;
  color: var(--bq-ink-2);
  margin: 0;
}
.bq-pc-problem-copy .bq-pc-prose p + p { margin-top: 16px; }
.bq-pc-problem-art {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
.bq-pc-problem-art img {
  display: block;
  width: 100%; max-width: 380px; height: auto;
  border-radius: 16px;
  box-shadow:
    0 24px 50px -22px rgba(12,35,64,0.28),
    0 8px 18px -8px rgba(12,35,64,0.14);
}
@media (max-width: 1000px) {
  .bq-pc-problem-head { grid-template-columns: 1fr; gap: 32px; }
  .bq-pc-problem-copy h3 { font-size: 28px; }
  .bq-pc-problem-art img { max-width: 320px; }
}

/* ============================================================
   Our Work — curated project showcase
   ============================================================ */
.bq-ow-page { background: var(--bq-bg); color: var(--bq-fg); }
.bq-ow-intro { position: relative; overflow: hidden; }
.bq-ow-intro-mesh {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(91,163,217,0.18), transparent 55%),
    radial-gradient(700px 480px at 100% 100%, rgba(91,163,217,0.10), transparent 55%);
}
.bq-ow-intro > .bq-container-wide { position: relative; z-index: 1; }
.bq-ow-intro-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,163,217,0.10);
  border: 1px solid rgba(91,163,217,0.30);
  color: var(--bq-deep-blue);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
:root[data-theme="dark"] .bq-ow-intro-chip { color: var(--bq-sky); }
.bq-ow-intro-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.18);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}

/* --- Intro --- */
.bq-ow-intro { padding: 96px 0 24px; }
.bq-ow-eyebrow {
  display: inline-block;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bq-sky); margin-bottom: 18px;
}
.bq-ow-intro h1 {
  font-size: 56px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--bq-fg); margin: 0 0 18px;
}
.bq-ow-subtitle {
  font-size: 20px; font-weight: 400; line-height: 1.55;
  color: rgba(12,35,64,0.80); max-width: 720px; margin: 0;
}
.bq-ow-privacy {
  margin-top: 28px;
  background: var(--bq-bg-tint);
  border-radius: 8px;
  padding: 24px;
  font-size: 15px; line-height: 1.6;
  color: var(--bq-fg);
  max-width: 820px;
}
.bq-ow-privacy a { color: var(--bq-deep-blue); font-weight: 600; text-decoration: underline; }

/* Intro 2-col layout: copy left, image right (vertically centered) */
.bq-ow-intro-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 64px; align-items: center;
}
.bq-ow-intro-copy { min-width: 0; }
.bq-ow-intro-art {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  perspective: 1400px;
}
/* Square flip card — click/tap to reveal client-privacy details */
.bq-ow-flip {
  position: relative;
  width: 100%; max-width: 420px;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 0; padding: 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.bq-ow-flip:focus-visible { box-shadow: 0 0 0 3px rgba(91,163,217,0.55); border-radius: 20px; }
.bq-ow-flip-inner {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bq-ow-flip.is-flipped .bq-ow-flip-inner { transform: rotateY(180deg); }
.bq-ow-flip-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 28px 60px -24px rgba(12,35,64,0.30),
    0 10px 22px -10px rgba(12,35,64,0.14);
}
.bq-ow-flip-front { background: var(--bq-bg-tint); }
.bq-ow-flip-front img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bq-ow-flip-hint {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff;
  background: rgba(12,35,64,0.78);
  backdrop-filter: blur(6px);
  padding: 7px 11px;
  border-radius: 999px;
  pointer-events: none;
}
.bq-ow-flip-hint i { width: 13px; height: 13px; }
.bq-ow-flip-back {
  background: var(--bq-navy);
  color: #fff;
  transform: rotateY(180deg);
  padding: 32px;
  text-align: left;
  justify-content: flex-start;
  overflow-y: auto;
}
.bq-ow-flip-back-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 12px;
  display: inline-block;
}
.bq-ow-flip-back h3 {
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 14px; line-height: 1.2;
}
.bq-ow-flip-back p {
  font-size: 14px; line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0 0 12px;
}
.bq-ow-flip-back ul {
  list-style: none; padding: 0; margin: 0 0 14px;
}
.bq-ow-flip-back li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px; line-height: 1.55;
  color: rgba(255,255,255,0.92);
  margin-bottom: 6px;
}
.bq-ow-flip-back li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bq-sky);
}
.bq-ow-flip-back a {
  color: var(--bq-sky);
  text-decoration: underline;
  font-weight: 600;
}
.bq-ow-flip-hint--back {
  position: static;
  margin-top: 8px;
  background: rgba(91,163,217,0.18);
  color: var(--bq-sky);
  border: 1px solid rgba(91,163,217,0.45);
}

/* Reduced motion: snap instantly */
@media (prefers-reduced-motion: reduce) {
  .bq-ow-flip-inner { transition: none; }
}

/* --- Outer stack between intro and gallery --- */
.bq-ow-stack { padding-top: 80px; padding-bottom: 96px; }

/* --- Gallery section head --- */
.bq-ow-gallery-head { margin-bottom: 24px; }
.bq-ow-section-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 10px;
}
.bq-ow-gallery-head h2 {
  font-size: 36px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--bq-fg); margin: 0;
}

/* --- Filter chips --- */
.bq-ow-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 24px;
}
.bq-ow-chip {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--bq-surface);
  border: 1px solid rgba(12,35,64,0.18);
  color: var(--bq-fg);
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 220ms var(--bq-ease), color 220ms var(--bq-ease),
              border-color 220ms var(--bq-ease), transform 220ms var(--bq-ease),
              box-shadow 220ms var(--bq-ease);
}
.bq-ow-chip:hover {
  background: var(--bq-bg-tint);
  border-color: rgba(91,163,217,0.55);
  transform: translateY(-1px);
}
.bq-ow-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(91,163,217,0.45);
}
.bq-ow-chip.is-active {
  background: var(--bq-navy);
  border-color: var(--bq-fg);
  color: #fff;
  transform: translateY(0);
  box-shadow: 0 10px 24px -14px rgba(12,35,64,0.50);
}
.bq-ow-chip-count {
  font-size: 12px; font-weight: 700;
  background: rgba(12,35,64,0.08);
  color: var(--bq-fg);
  padding: 2px 8px; border-radius: 999px;
  transition: background 220ms var(--bq-ease), color 220ms var(--bq-ease);
}
.bq-ow-chip.is-active .bq-ow-chip-count {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* --- Service link (shown when a single filter is active) --- */
.bq-ow-service-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 28px;
  font-size: 14px; font-weight: 600;
  color: var(--bq-deep-blue);
  text-decoration: none;
  transition: color var(--bq-dur) var(--bq-ease);
}
.bq-ow-service-link i { width: 16px; height: 16px; }
.bq-ow-service-link:hover { color: var(--bq-fg); }

/* --- Responsive grid (3 desktop / 2 tablet / 1 mobile) --- */
.bq-ow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* --- Card (links to the matching service page) --- */
.bq-ow-card {
  display: flex; flex-direction: column;
  background: var(--bq-surface);
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--bq-ease), transform 600ms var(--bq-ease);
}
.bq-ow-card.is-revealed { opacity: 1; transform: translateY(0); }
.bq-ow-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(91,163,217,0.55);
  border-radius: 14px;
}
.bq-ow-card:hover .bq-ow-card-meta h3 { color: var(--bq-deep-blue); }
.bq-ow-card-meta h3 { transition: color var(--bq-dur) var(--bq-ease); }

.bq-ow-card-media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  background: var(--bq-bg-tint);
}
.bq-ow-card-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--bq-ease);
  will-change: transform;
}
.bq-ow-card:hover .bq-ow-card-media img { transform: scale(1.05); }

/* Portrait orientation — show full image with a blurred backdrop of the same image
   filling the letterbox space, so the card visually feels intentional instead of
   awkwardly cropped. The backdrop is set via inline background-image style in JSX. */
.bq-ow-card-media--portrait {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bq-ow-card-media--portrait::before {
  content: '';
  position: absolute; inset: 0;
  background: inherit;
  filter: blur(28px) saturate(1.1);
  transform: scale(1.15);
  z-index: 0;
  pointer-events: none;
}
.bq-ow-card-media--portrait::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(12,35,64,0.18);
  z-index: 0;
  pointer-events: none;
}
.bq-ow-card-media--portrait img {
  position: relative;
  z-index: 1;
  object-fit: contain;
}
:root[data-theme="dark"] .bq-ow-card-media--portrait::after {
  background: rgba(5,11,20,0.30);
}

/* Soft navy overlay reveals caption on hover.
   z-index: 2 keeps the overlay above the image in portrait cards
   (where the img sits at z-index: 1 over a blurred backdrop). */
.bq-ow-card-overlay {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(12,35,64,0) 30%, rgba(12,35,64,0.82) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px 18px 20px;
  opacity: 0;
  transition: opacity 260ms var(--bq-ease);
  pointer-events: none;
}
.bq-ow-card:hover .bq-ow-card-overlay,
.bq-ow-card:focus-within .bq-ow-card-overlay { opacity: 1; }
.bq-ow-card-overlay p {
  font-size: 13.5px; line-height: 1.5;
  color: rgba(255,255,255,0.92);
  margin: 8px 0 0;
}
.bq-ow-card-pill {
  align-self: flex-start;
  display: inline-flex;
  background: rgba(255,255,255,0.94);
  color: var(--bq-fg);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 4px;
}
.bq-ow-card-overlay-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-size: 12px; font-weight: 700;
  color: var(--bq-sky);
  letter-spacing: 0.02em;
}
.bq-ow-card-overlay-cta i { width: 14px; height: 14px; }

/* Card meta (always visible below the image) */
.bq-ow-card-meta { padding: 16px 4px 0; }
.bq-ow-card-service {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--bq-sky);
  margin-bottom: 6px;
}
.bq-ow-card-meta h3 {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.25;
  color: var(--bq-fg); margin: 0 0 6px;
}
.bq-ow-card-meta p {
  font-size: 13.5px; line-height: 1.55;
  color: rgba(12,35,64,0.72);
  margin: 0;
}

/* --- Closing note --- */
.bq-ow-closing {
  max-width: 640px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 14px; font-weight: 400; line-height: 1.6;
  color: rgba(12,35,64,0.60);
}

/* --- Error fallback --- */
.bq-ow-error {
  padding: 20px; border-radius: 10px;
  background: rgba(181, 56, 63, 0.08); color: var(--bq-danger);
  border: 1px solid rgba(181, 56, 63, 0.30);
  font-size: 14px;
}
.bq-ow-error code { font-family: inherit; background: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 4px; }

/* --- Bottom CTA navy band --- */
.bq-ow-cta-band {
  background: var(--bq-navy);
  padding: 80px 0;
}
.bq-ow-cta-band-inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.bq-ow-cta-band h3 {
  font-size: 36px; font-weight: 800; letter-spacing: -0.02em;
  color: #fff; margin: 0 0 16px;
}
.bq-ow-cta-band p {
  color: rgba(255,255,255,0.80);
  font-size: 18px; line-height: 1.55;
  max-width: 520px; margin: 0 auto 28px;
}
.bq-ow-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bq-surface); color: var(--bq-fg);
  font-weight: 600; font-size: 16px;
  padding: 14px 28px; border-radius: 6px;
  text-decoration: none;
  transition: transform 160ms var(--bq-ease), box-shadow 160ms var(--bq-ease);
}
.bq-ow-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(0,0,0,0.5); }
.bq-ow-cta-btn i { width: 18px; height: 18px; }

/* --- Tablet --- */
@media (max-width: 1024px) {
  .bq-ow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .bq-ow-gallery-head h2 { font-size: 30px; }
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .bq-ow-intro { padding: 64px 0 16px; }
  .bq-ow-intro h1 { font-size: 36px; }
  .bq-ow-subtitle { font-size: 18px; }
  .bq-ow-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .bq-ow-flip { max-width: 320px; }
  .bq-ow-flip-back { padding: 24px; }
  .bq-ow-flip-back h3 { font-size: 19px; }
  .bq-ow-stack { padding-top: 56px; padding-bottom: 56px; }
  .bq-ow-gallery-head h2 { font-size: 26px; }
  .bq-ow-cta-band { padding: 56px 0; }
  .bq-ow-cta-band h3 { font-size: 28px; }
}

/* --- Mobile (single column) --- */
@media (max-width: 640px) {
  .bq-ow-grid { grid-template-columns: 1fr; gap: 20px; }
  .bq-ow-chip { padding: 0 16px; font-size: 13.5px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .bq-ow-card { opacity: 1; transform: none; transition: none; }
  .bq-ow-card-media img { transition: none; }
  .bq-ow-card:hover .bq-ow-card-media img { transform: none; }
  .bq-ow-card-overlay { transition: none; }
  .bq-ow-chip { transition: none; }
  .bq-ow-chip:hover { transform: none; }
}

/* ============================================================
   Deep Extraction Cleaning — service page scaffold (Etapa A)
   Visual polish via Magic comes in Etapa B. These rules establish
   structure, spacing, and dark-mode-aware tokens — not the final look.
   ============================================================ */

.bq-dec { background: var(--bq-bg); color: var(--bq-fg); }
.bq-dec-block { padding: 64px 28px; }
.bq-dec-block:first-of-type { padding-top: 80px; }
.bq-dec-head { max-width: 820px; margin: 0 auto 40px; text-align: left; }
.bq-dec-head h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--bq-fg); margin: 0 0 16px; }
.bq-dec-head p { font-size: 17px; line-height: 1.6; color: var(--bq-fg-muted); margin: 0; }
.bq-dec-section-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 14px;
}

/* 1. Hero — premium asymmetric grid with droplet motif */
.bq-dec-hero-block {
  position: relative;
  padding: 120px 28px 100px;
  overflow: hidden;
  background: var(--bq-bg);
}
/* Soft mesh background — sky glow top-right, ice tint bottom-left */
.bq-dec-hero-mesh {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(91,163,217,0.18), transparent 55%),
    radial-gradient(700px 500px at -10% 110%, rgba(91,163,217,0.10), transparent 55%);
  z-index: 0;
}
.bq-dec-hero {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

/* Copy column */
.bq-dec-hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,163,217,0.10);
  border: 1px solid rgba(91,163,217,0.30);
  color: var(--bq-deep-blue);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 28px;
}
:root[data-theme="dark"] .bq-dec-hero-chip { color: var(--bq-sky); }
.bq-dec-hero-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.18);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}
@keyframes bq-dec-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(91,163,217,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(91,163,217,0.05); }
}
@media (prefers-reduced-motion: reduce) {
  .bq-dec-hero-chip-dot { animation: none; }
}

.bq-dec-hero-copy h1 {
  font-size: 64px; font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--bq-fg);
  margin: 0 0 24px;
}
.bq-dec-hero-lede {
  font-size: 19px; line-height: 1.6;
  color: var(--bq-fg-muted);
  max-width: 620px;
  margin: 0 0 36px;
}
.bq-dec-hero-cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 32px;
}
.bq-dec-hero-contact {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--bq-fg-subtle);
}
.bq-dec-hero-contact-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--bq-fg-muted);
  text-decoration: none;
  transition: color var(--bq-dur) var(--bq-ease);
}
.bq-dec-hero-contact-link:hover { color: var(--bq-link); }
.bq-dec-hero-contact-link i { width: 14px; height: 14px; }
.bq-dec-hero-contact-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--bq-fg-subtle);
  opacity: 0.5;
}

/* Visual side — credibility card, CENTERED layout */
.bq-dec-hero-art {
  position: relative;
  min-width: 0;
}
.bq-dec-hero-card {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  border-radius: 24px;
  padding: 44px 36px 32px;
  box-shadow: var(--bq-sh-3);
  overflow: hidden;
  text-align: center;
}
.bq-dec-hero-card-glow {
  position: absolute;
  top: -140px; left: 50%; transform: translateX(-50%);
  width: 380px; height: 380px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.22), transparent 60%);
  pointer-events: none;
}
/* BrightQ principal logo (droplet + Vancouver skyline + wordmark) — centered */
.bq-dec-hero-logo {
  position: relative;
  width: 140px; height: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 18px 32px rgba(30,80,144,0.22));
}
.bq-dec-hero-logo img {
  width: 100%; height: auto; display: block;
}
.bq-dec-hero-card-method {
  position: relative;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin: 0 0 8px;
}
.bq-dec-hero-card-tagline {
  position: relative;
  font-size: 13px; font-weight: 500;
  color: var(--bq-fg-muted);
  margin: 0 0 26px;
  letter-spacing: -0.005em;
  line-height: 1.45;
}
/* Methods pills row — shown under "Methods we use" label */
.bq-dec-hero-card-methods {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin: 0 0 14px;
}
.bq-dec-hero-card-methods span {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bq-deep-blue);
  background: rgba(91,163,217,0.08);
  border: 1px solid rgba(91,163,217,0.25);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
:root[data-theme="dark"] .bq-dec-hero-card-methods span { color: var(--bq-sky); }
.bq-dec-hero-card-list {
  position: relative;
  list-style: none; padding: 0; margin: 0 0 26px;
  display: flex; flex-direction: column; gap: 0;
}
.bq-dec-hero-card-list li {
  display: grid; grid-template-columns: 32px 1fr;
  gap: 18px; align-items: center;
  text-align: left;
  padding: 14px 0;
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-dec-hero-card-list li:last-child {
  border-bottom: 0;
}
.bq-dec-hero-card-num {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bq-fg-subtle);
  font-variant-numeric: tabular-nums;
}
.bq-dec-hero-card-row {
  display: flex; flex-direction: column; gap: 2px;
}
.bq-dec-hero-card-name {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bq-fg);
}
.bq-dec-hero-card-sub {
  font-size: 12.5px; font-weight: 500;
  color: var(--bq-fg-subtle);
  line-height: 1.4;
}
.bq-dec-hero-card-foot {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--bq-line-soft);
}
.bq-dec-hero-card-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bq-fg-muted);
  background: var(--bq-bg-tint);
  padding: 6px 11px;
  border-radius: 999px;
}
.bq-dec-hero-card-badge i { width: 13px; height: 13px; color: var(--bq-sky); }

/* Falling mini-droplets — decorative background animation */
.bq-dec-droplets {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.bq-dec-droplet-fall {
  position: absolute;
  top: -40px;
  color: var(--bq-sky);
  opacity: 0;
  animation: bq-dec-droplet-fall 7s linear infinite;
}
.bq-dec-droplet-fall svg { width: 100%; height: 100%; display: block; }
.bq-dec-droplet-fall:nth-child(1) { left: 9%;  width: 14px; animation-duration: 8s;   animation-delay: 0s;   }
.bq-dec-droplet-fall:nth-child(2) { left: 22%; width: 18px; animation-duration: 6.5s; animation-delay: 1.4s; }
.bq-dec-droplet-fall:nth-child(3) { left: 38%; width: 12px; animation-duration: 9s;   animation-delay: 0.7s; }
.bq-dec-droplet-fall:nth-child(4) { left: 51%; width: 16px; animation-duration: 7.5s; animation-delay: 2.6s; }
.bq-dec-droplet-fall:nth-child(5) { left: 68%; width: 13px; animation-duration: 6s;   animation-delay: 1.2s; }
.bq-dec-droplet-fall:nth-child(6) { left: 86%; width: 15px; animation-duration: 8.5s; animation-delay: 3.4s; }
@keyframes bq-dec-droplet-fall {
  0%   { transform: translateY(0)       scale(0.92); opacity: 0;    }
  12%  {                                            opacity: 0.30; }
  88%  {                                            opacity: 0.30; }
  100% { transform: translateY(900px)   scale(1.04); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .bq-dec-droplet-fall { animation: none; opacity: 0; }
}

/* Hero responsive — collapse on tablet, restructure on mobile */
@media (max-width: 1024px) {
  .bq-dec-hero { gap: 56px; }
  .bq-dec-hero-copy h1 { font-size: 52px; }
}
@media (max-width: 900px) {
  .bq-dec-hero-block { padding: 80px 24px 64px; }
  .bq-dec-hero { grid-template-columns: 1fr; gap: 48px; }
  .bq-dec-hero-copy h1 { font-size: 42px; }
  .bq-dec-hero-lede { font-size: 17px; }
  .bq-dec-hero-card { padding: 32px 28px 28px; }
  .bq-dec-hero-art { max-width: 420px; }
}

/* 2. Audience — two equal cards (home / business), outcome-led */
.bq-dec-audience {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px; margin: 0 auto;
}
.bq-dec-audience-col {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 20px;
  padding: 40px 36px;
  display: flex; flex-direction: column;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              box-shadow var(--bq-dur-slow) var(--bq-ease),
              border-color var(--bq-dur-slow) var(--bq-ease);
  overflow: hidden;
}
.bq-dec-audience-col::before {
  /* decorative glow in upper right */
  content: ''; position: absolute;
  top: -100px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.10), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bq-dur-slow) var(--bq-ease);
}
.bq-dec-audience-col:hover {
  transform: translateY(-3px);
  box-shadow: var(--bq-sh-3);
  border-color: rgba(91,163,217,0.30);
}
.bq-dec-audience-col:hover::before { opacity: 1; }

/* Iconic mark — distinguishes home from business without breaking palette */
.bq-dec-audience-mark {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(91,163,217,0.20), rgba(91,163,217,0.05));
  color: var(--bq-sky);
  margin-bottom: 22px;
  box-shadow: 0 6px 14px -8px rgba(30,80,144,0.25);
}
.bq-dec-audience-mark i { width: 26px; height: 26px; stroke-width: 1.75; }

.bq-dec-audience-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 12px;
}

.bq-dec-audience-col h3 {
  position: relative;
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--bq-fg);
  margin: 0 0 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--bq-line-soft);
}

.bq-dec-audience-list {
  position: relative;
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.bq-dec-audience-list li {
  display: grid; grid-template-columns: 30px 1fr;
  gap: 14px; align-items: start;
  font-size: 14.5px; line-height: 1.6;
  color: var(--bq-fg-muted);
}
.bq-dec-audience-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--bq-bg-tint);
  color: var(--bq-sky);
  flex-shrink: 0;
}
.bq-dec-audience-icon i { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .bq-dec-audience { grid-template-columns: 1fr; gap: 16px; }
  .bq-dec-audience-col { padding: 32px 28px; }
  .bq-dec-audience-col h3 { font-size: 22px; }
}

/* 3. Shared promise band — editorial pull-quote treatment */
.bq-dec-promise {
  position: relative;
  background: var(--bq-navy);
  color: #fff;
  padding: 96px 28px 100px;
  text-align: center;
  overflow: hidden;
}
/* Dual radial glow — sky-blue from both sides, subtle */
.bq-dec-promise-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 420px at 15% 50%, rgba(91,163,217,0.20), transparent 60%),
    radial-gradient(600px 360px at 85% 50%, rgba(91,163,217,0.14), transparent 60%);
}
.bq-dec-promise-inner {
  position: relative; z-index: 1;
}
.bq-dec-promise-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 32px;
}
.bq-dec-promise-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.18);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}
.bq-dec-promise-text {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.30;
  letter-spacing: -0.018em;
  max-width: 980px;
  margin: 0 auto 40px;
  color: #fff;
}
.bq-dec-promise-signature {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.bq-dec-promise-sig-line {
  display: inline-block;
  width: 36px; height: 1px;
  background: rgba(255,255,255,0.30);
}

@media (max-width: 900px) {
  .bq-dec-promise { padding: 72px 24px 76px; }
  .bq-dec-promise-text { font-size: 24px; }
}
@media (max-width: 600px) {
  .bq-dec-promise-text { font-size: 20px; }
  .bq-dec-promise-eyebrow { margin-bottom: 22px; }
  .bq-dec-promise-sig-line { width: 24px; }
}

/* 4. Sub-services — 3 rich cards with number badge, icon, outcome, meta, footer */
.bq-dec-sub-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1200px; margin: 0 auto;
}
.bq-dec-sub-card {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 20px;
  padding: 32px 30px 28px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              box-shadow var(--bq-dur-slow) var(--bq-ease),
              border-color var(--bq-dur-slow) var(--bq-ease);
}
.bq-dec-sub-glow {
  position: absolute;
  top: -120px; right: -100px;
  width: 280px; height: 280px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.14), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bq-dur-slow) var(--bq-ease);
}
.bq-dec-sub-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bq-sh-3);
  border-color: rgba(91,163,217,0.30);
}
.bq-dec-sub-card:hover .bq-dec-sub-glow { opacity: 1; }

/* Head — number badge + icon split */
.bq-dec-sub-head {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 18px;
}
.bq-dec-sub-num {
  font-size: 13px; font-weight: 700; letter-spacing: 0.10em;
  color: var(--bq-fg-subtle);
  padding-top: 11px;
}
.bq-dec-sub-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(91,163,217,0.18), rgba(91,163,217,0.04));
  color: var(--bq-sky);
}
.bq-dec-sub-icon i { width: 22px; height: 22px; stroke-width: 1.75; }

.bq-dec-sub-card h3 {
  position: relative;
  font-size: 21px; font-weight: 800; letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--bq-fg);
  margin: 0 0 12px;
}
.bq-dec-sub-outcome {
  position: relative;
  font-size: 14.5px; line-height: 1.6;
  color: var(--bq-fg-muted);
  margin: 0 0 22px;
}

/* Meta block — "What's included" */
.bq-dec-sub-meta {
  position: relative;
  padding-top: 18px;
  margin-bottom: 24px;
  border-top: 1px solid var(--bq-line-soft);
}
.bq-dec-sub-meta-label {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 8px;
}
.bq-dec-sub-meta-text {
  font-size: 13px; line-height: 1.6;
  color: var(--bq-fg-subtle);
  margin: 0;
}

/* Footer — price + CTA inline at bottom */
.bq-dec-sub-footer {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--bq-line-soft);
}
.bq-dec-sub-price {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.bq-dec-sub-price-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bq-fg-subtle);
}
.bq-dec-sub-price-value {
  font-size: 14.5px; font-weight: 700;
  color: var(--bq-deep-blue);
  letter-spacing: -0.01em;
}
.bq-dec-sub-cta {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  padding: 9px 14px;
  font-size: 12.5px; font-weight: 700;
  color: #fff;
  background: var(--bq-deep-blue);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--bq-dur) var(--bq-ease),
              transform var(--bq-dur) var(--bq-ease);
}
.bq-dec-sub-cta:hover {
  background: var(--bq-navy);
  transform: translateX(2px);
}
.bq-dec-sub-cta i { width: 13px; height: 13px; transition: transform var(--bq-dur) var(--bq-ease); }
.bq-dec-sub-cta:hover i { transform: translateX(2px); }

/* 5. Process — 7-step vertical timeline with connector line */
.bq-dec-process-block { background: var(--bq-surface-2); padding: 80px 28px; }
.bq-dec-process {
  position: relative;
  list-style: none; padding: 0; margin: 0 auto;
  max-width: 820px;
}
/* Vertical connector line — dashed, runs through center of markers */
.bq-dec-process::before {
  content: '';
  position: absolute;
  left: 23px; top: 22px; bottom: 22px;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(91,163,217,0.40) 0px,
    rgba(91,163,217,0.40) 4px,
    transparent 4px,
    transparent 10px
  );
  z-index: 0;
}
.bq-dec-process-item {
  position: relative;
  display: grid; grid-template-columns: 48px 1fr;
  gap: 28px;
  align-items: start;
  padding: 18px 0;
  z-index: 1;
}
.bq-dec-process-marker {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bq-bg);
  border: 2px solid var(--bq-sky);
  box-shadow: 0 0 0 4px var(--bq-surface-2);
  flex-shrink: 0;
}
.bq-dec-process-num {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--bq-deep-blue);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .bq-dec-process-num { color: var(--bq-sky); }
.bq-dec-process-content {
  padding-top: 8px;
}
.bq-dec-process-content h4 {
  font-size: 19px; font-weight: 800; letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--bq-fg);
  margin: 0 0 8px;
}
.bq-dec-process-content p {
  font-size: 14.5px; line-height: 1.65;
  color: var(--bq-fg-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .bq-dec-process-item { gap: 18px; }
  .bq-dec-process-content h4 { font-size: 17px; }
}

/* 6. Pricing display — 3 prominent cards in grid */
.bq-dec-pricing-block { background: var(--bq-surface-2); padding: 80px 28px; }
.bq-dec-prices {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1100px; margin: 0 auto 40px;
}
.bq-dec-price-card {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 20px;
  padding: 32px 30px;
  display: flex; flex-direction: column;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              box-shadow var(--bq-dur-slow) var(--bq-ease),
              border-color var(--bq-dur-slow) var(--bq-ease);
}
.bq-dec-price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bq-sh-3);
  border-color: rgba(91,163,217,0.30);
}
.bq-dec-price-eyebrow {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 18px;
}
.bq-dec-price-headline {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 4px;
}
.bq-dec-price-from {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bq-fg-subtle);
}
.bq-dec-price-amount {
  font-size: 44px; font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--bq-deep-blue);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .bq-dec-price-amount { color: var(--bq-sky); }
.bq-dec-price-unit {
  display: block;
  font-size: 13px; font-weight: 500;
  color: var(--bq-fg-subtle);
  margin-bottom: 20px;
}
.bq-dec-price-note-small {
  font-size: 13px; line-height: 1.5;
  color: var(--bq-fg-muted);
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--bq-line-soft);
}

/* Mattress tiered variant */
.bq-dec-price-card--tiered .bq-dec-price-tiers {
  list-style: none; padding: 0; margin: 0 0 4px;
  display: flex; flex-direction: column;
}
.bq-dec-price-tiers li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-dec-price-tiers li:last-child { border-bottom: 0; padding-bottom: 14px; }
.bq-dec-price-tiers span {
  font-size: 13px; font-weight: 600;
  color: var(--bq-fg-muted);
}
.bq-dec-price-tiers strong {
  font-size: 24px; font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--bq-deep-blue);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .bq-dec-price-tiers strong { color: var(--bq-sky); }

/* Factors callout — what shapes the final rate */
.bq-dec-prices-note {
  max-width: 900px; margin: 0 auto;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-left: 3px solid var(--bq-sky);
  border-radius: var(--bq-r-md);
  padding: 22px 28px;
}
.bq-dec-prices-note-label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 8px;
}
.bq-dec-prices-note p {
  font-size: 14px; line-height: 1.65;
  color: var(--bq-fg-muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .bq-dec-prices { grid-template-columns: 1fr 1fr; }
  .bq-dec-price-card--tiered { grid-column: span 2; }
}
@media (max-width: 700px) {
  .bq-dec-prices { grid-template-columns: 1fr; gap: 16px; }
  .bq-dec-price-card--tiered { grid-column: span 1; }
  .bq-dec-price-amount { font-size: 36px; }
}

/* 7. Form — re-uses .bq-airbnb-* base + compact overrides for Deep Extraction */
.bq-dec-quote { padding: 48px 28px 72px; background: var(--bq-bg); }

/* Compact form variant — tighter spacing, smaller header, narrower max-width */
.bq-dec-quote .bq-airbnb-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 32px;
}
.bq-dec-quote .bq-airbnb-fieldset {
  padding: 18px 0;
  margin-bottom: 4px;
}
.bq-dec-quote .bq-airbnb-fieldset legend {
  font-size: 14px; font-weight: 700;
  margin-bottom: 14px;
  gap: 8px;
}
.bq-dec-quote .bq-airbnb-fieldset legend i { width: 16px; height: 16px; }
.bq-dec-quote .bq-airbnb-field { margin-bottom: 12px; }
.bq-dec-quote .bq-airbnb-field label {
  font-size: 12.5px;
  margin-bottom: 5px;
}
.bq-dec-quote .bq-input,
.bq-dec-quote .bq-select { padding: 9px 12px; font-size: 14px; }
.bq-dec-quote .bq-textarea { padding: 9px 12px; font-size: 14px; }
.bq-dec-quote .bq-airbnb-radio {
  padding: 7px 11px;
  font-size: 13px;
}
.bq-dec-quote .bq-airbnb-grid-2 { gap: 12px 16px; }
.bq-dec-quote .bq-airbnb-form-foot {
  margin-top: 18px; padding-top: 18px;
}
.bq-dec-quote .bq-airbnb-submit { padding: 12px 24px; font-size: 14.5px; }
.bq-dec-quote .bq-airbnb-form-note { font-size: 12.5px; }
@media (max-width: 768px) {
  .bq-dec-quote .bq-airbnb-form { padding: 22px 20px; }
}
.bq-dec-conditional {
  margin-top: 18px;
  padding: 20px 22px;
  background: var(--bq-bg-tint);
  border-radius: var(--bq-r-md);
  border-left: 3px solid var(--bq-sky);
}
.bq-dec-conditional-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin: 0 0 14px;
}
.bq-dec-photos-block {
  margin-top: 8px;
  padding: 20px 22px;
  background: var(--bq-bg-tint);
  border-radius: var(--bq-r-md);
}
.bq-dec-photos-label {
  font-size: 14px; font-weight: 700; color: var(--bq-fg);
  margin: 0 0 6px;
}
.bq-dec-photos-help {
  font-size: 13px; line-height: 1.55;
  color: var(--bq-fg-muted); margin: 0 0 14px;
}
.bq-dec-photos-cta {
  display: inline-flex; align-items: center; gap: 8px;
}
.bq-dec-photos-cta i { width: 16px; height: 16px; }

/* 8. Trust signals row — centered with eyebrow */
.bq-dec-trust-block {
  padding: 64px 28px;
  background: var(--bq-bg-tint);
  text-align: center;
}
.bq-dec-trust-eyebrow {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 26px;
}
.bq-dec-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 22px;
}
.bq-dec-trust-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600;
  color: var(--bq-fg);
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  transition: border-color var(--bq-dur) var(--bq-ease),
              background var(--bq-dur) var(--bq-ease);
}
.bq-dec-trust-item:hover {
  border-color: rgba(91,163,217,0.40);
}
.bq-dec-trust-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91,163,217,0.20), rgba(91,163,217,0.06));
  color: var(--bq-sky);
}
.bq-dec-trust-icon i { width: 14px; height: 14px; }

/* 9. Closing CTA — gradient surface with glow */
.bq-dec-cta {
  position: relative;
  text-align: center;
  padding: 100px 28px 110px;
  background: var(--bq-bg);
  overflow: hidden;
}
.bq-dec-cta-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 50% 100%, rgba(91,163,217,0.16), transparent 60%),
    radial-gradient(600px 350px at 50% 0%, rgba(91,163,217,0.08), transparent 60%);
}
.bq-dec-cta-inner {
  position: relative; z-index: 1;
}
.bq-dec-cta-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 18px;
}
.bq-dec-cta h3 {
  font-size: 42px; font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--bq-fg);
  margin: 0 0 18px;
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.bq-dec-cta p {
  font-size: 17px; line-height: 1.55;
  color: var(--bq-fg-muted);
  max-width: 620px;
  margin: 0 auto 36px;
}
.bq-dec-cta-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}

@media (max-width: 768px) {
  .bq-dec-cta { padding: 72px 24px 80px; }
  .bq-dec-cta h3 { font-size: 30px; }
}

/* Responsive — collapse audience + sub-grid on mobile */
@media (max-width: 1024px) {
  .bq-dec-sub-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .bq-dec-hero-block { padding: 64px 24px 40px; }
  .bq-dec-hero-copy h1 { font-size: 38px; }
  .bq-dec-hero-lede { font-size: 17px; }
  .bq-dec-head h2 { font-size: 28px; }
  .bq-dec-audience { grid-template-columns: 1fr; gap: 16px; }
  .bq-dec-sub-grid { grid-template-columns: 1fr; }
  .bq-dec-process-item { grid-template-columns: 48px 1fr; padding: 20px; }
  .bq-dec-price-row { grid-template-columns: 1fr; gap: 8px; }
  .bq-dec-promise p { font-size: 18px; }
  .bq-dec-cta h3 { font-size: 24px; }
}

/* ============================================================
   Dark mode targeted overrides
   Fixes for areas that didn't translate cleanly with token flips alone.
   Each rule has a clear purpose comment.
   ============================================================ */
:root[data-theme="dark"] {
  /* Body color of muted text should follow the refreshed token */
  /* Bg-tint is now closer to surface — sections using it as bands feel cohesive */
}

/* --- Hero meshes are too intense on dark; tone them down --- */
:root[data-theme="dark"] .bq-hero-mesh,
:root[data-theme="dark"] .bq-dec-hero-mesh,
:root[data-theme="dark"] .bq-b2b-intro-mesh,
:root[data-theme="dark"] .bq-pc-mesh,
:root[data-theme="dark"] .bq-airbnb-mesh,
:root[data-theme="dark"] .bq-svc-hero-mesh,
:root[data-theme="dark"] .bq-about-hero-mesh,
:root[data-theme="dark"] .bq-ow-intro-mesh {
  opacity: 0.55;
}

/* --- Hero card glow (home) — slightly lifted opacity to keep presence in dark --- */
:root[data-theme="dark"] .bq-hero-card-glow {
  background: radial-gradient(circle at center, rgba(91,163,217,0.36), rgba(91,163,217,0.12) 35%, transparent 65%);
}

/* --- Card glows on hover — slightly stronger in dark to compensate for less ambient light --- */
:root[data-theme="dark"] .bq-dec-sub-glow,
:root[data-theme="dark"] .bq-dec-audience-col::before,
:root[data-theme="dark"] .bq-zone::before,
:root[data-theme="dark"] .bq-service-card-glow,
:root[data-theme="dark"] .bq-b2b-rhythm-glow,
:root[data-theme="dark"] .bq-price-glow {
  background: radial-gradient(circle at center, rgba(91,163,217,0.22), transparent 65%);
}

/* --- Card surfaces — slight border bump for visible separation --- */
:root[data-theme="dark"] .bq-service-card,
:root[data-theme="dark"] .bq-price,
:root[data-theme="dark"] .bq-zone,
:root[data-theme="dark"] .bq-dec-audience-col,
:root[data-theme="dark"] .bq-dec-sub-card,
:root[data-theme="dark"] .bq-dec-process-item,
:root[data-theme="dark"] .bq-dec-price-card,
:root[data-theme="dark"] .bq-b2b-rhythm,
:root[data-theme="dark"] .bq-svc-incl-card,
:root[data-theme="dark"] .bq-svc-step,
:root[data-theme="dark"] .bq-b2b-list-item,
:root[data-theme="dark"] .bq-about-value,
:root[data-theme="dark"] .bq-pc-phase-card,
:root[data-theme="dark"] .bq-pc-list-item,
:root[data-theme="dark"] .bq-pc-process-item,
:root[data-theme="dark"] .bq-airbnb-tier,
:root[data-theme="dark"] .bq-airbnb-list-item,
:root[data-theme="dark"] .bq-ow-card .bq-ow-card-media {
  border-color: rgba(255,255,255,0.12);
}

/* --- Featured navy cards stay navy in dark too (no inversion) --- */
:root[data-theme="dark"] .bq-price--featured,
:root[data-theme="dark"] .bq-b2b-rhythm--featured,
:root[data-theme="dark"] .bq-airbnb-tier.is-featured {
  background: var(--bq-navy);
  border-color: rgba(91,163,217,0.30);
}

/* --- Form inputs — clearly distinguish from card surface in dark --- */
:root[data-theme="dark"] .bq-input,
:root[data-theme="dark"] .bq-select,
:root[data-theme="dark"] .bq-textarea {
  background: var(--bq-bg);
  border-color: rgba(255,255,255,0.14);
  color: var(--bq-fg);
}
:root[data-theme="dark"] .bq-input::placeholder,
:root[data-theme="dark"] .bq-textarea::placeholder {
  color: var(--bq-fg-subtle);
}
:root[data-theme="dark"] .bq-input:focus,
:root[data-theme="dark"] .bq-select:focus,
:root[data-theme="dark"] .bq-textarea:focus {
  border-color: var(--bq-sky);
  background: var(--bq-bg-tint);
}

/* --- Radio chips (Airbnb / Post-Construction / Deep Extraction forms) --- */
:root[data-theme="dark"] .bq-airbnb-radio {
  background: var(--bq-bg);
  border-color: rgba(255,255,255,0.14);
  color: var(--bq-fg-muted);
}
:root[data-theme="dark"] .bq-airbnb-radio:hover {
  border-color: rgba(91,163,217,0.45);
  color: var(--bq-fg);
}
:root[data-theme="dark"] .bq-airbnb-radio.is-active {
  background: rgba(91,163,217,0.14);
  border-color: var(--bq-sky);
  color: var(--bq-fg);
}

/* --- Form fieldsets / labels — better legibility --- */
:root[data-theme="dark"] .bq-airbnb-fieldset legend {
  color: var(--bq-fg);
  background: var(--bq-surface);
}
:root[data-theme="dark"] .bq-airbnb-field label {
  color: var(--bq-fg-muted);
}

/* --- "Coming soon" placeholder card needs different border in dark --- */
:root[data-theme="dark"] .bq-service-card--coming {
  border-color: rgba(91,163,217,0.35);
  background: rgba(91,163,217,0.04);
}

/* --- Differentiator table — head row gets a slight lift in dark --- */
:root[data-theme="dark"] .bq-diff-row--head {
  background: rgba(91,163,217,0.10);
  border-bottom: 1px solid rgba(91,163,217,0.20);
}
:root[data-theme="dark"] .bq-diff-row--head .bq-diff-cell--brightq {
  background: rgba(91,163,217,0.22);
}
:root[data-theme="dark"] .bq-diff-cell--brightq {
  background: rgba(91,163,217,0.08);
}

/* --- Chip eyebrows — slightly stronger background in dark for visibility --- */
:root[data-theme="dark"] .bq-hero-chip,
:root[data-theme="dark"] .bq-dec-hero-chip,
:root[data-theme="dark"] .bq-svc-hero-chip,
:root[data-theme="dark"] .bq-airbnb-hero-chip,
:root[data-theme="dark"] .bq-pc-hero-chip,
:root[data-theme="dark"] .bq-about-hero-chip,
:root[data-theme="dark"] .bq-b2b-intro-chip,
:root[data-theme="dark"] .bq-ow-intro-chip {
  background: rgba(91,163,217,0.16);
  border-color: rgba(91,163,217,0.40);
}

/* --- Trust badges + hero card badges — distinct in dark --- */
:root[data-theme="dark"] .bq-hero-card-badge,
:root[data-theme="dark"] .bq-dec-hero-card-badge,
:root[data-theme="dark"] .bq-dec-trust-item,
:root[data-theme="dark"] .bq-svc-hero-badge {
  background: rgba(91,163,217,0.10);
  border-color: rgba(255,255,255,0.10);
}

/* --- Navy bands (emergency, promise, contact direct) get a richer dark feel --- */
:root[data-theme="dark"] .bq-b2b-emergency,
:root[data-theme="dark"] .bq-dec-promise,
:root[data-theme="dark"] .bq-pc-guarantee,
:root[data-theme="dark"] .bq-airbnb-emergency {
  background: #061222;   /* slightly darker than --bq-navy for distinction */
}

/* --- Contact direct card — keep navy gradient but stronger glow on dark --- */
:root[data-theme="dark"] .bq-contact-direct-card {
  background: linear-gradient(135deg, #061222 0%, #0E2748 100%);
}

/* --- Section tags / eyebrows on bg — slightly brighter sky in dark for contrast --- */
:root[data-theme="dark"] .bq-section-tag,
:root[data-theme="dark"] .bq-dec-section-tag,
:root[data-theme="dark"] .bq-b2b-rhythms-note-label,
:root[data-theme="dark"] .bq-dec-prices-note-label,
:root[data-theme="dark"] .bq-pricing-note-label {
  color: #76BBEB;   /* slightly brighter sky variant */
}

/* --- "Methods we use" / sub-service price tag / sub-service meta-label --- */
:root[data-theme="dark"] .bq-dec-hero-card-method,
:root[data-theme="dark"] .bq-dec-sub-meta-label,
:root[data-theme="dark"] .bq-dec-trust-eyebrow,
:root[data-theme="dark"] .bq-b2b-emergency-eyebrow,
:root[data-theme="dark"] .bq-dec-cta-eyebrow,
:root[data-theme="dark"] .bq-b2b-cta-eyebrow,
:root[data-theme="dark"] .bq-zone-eyebrow,
:root[data-theme="dark"] .bq-dec-audience-eyebrow {
  color: #76BBEB;
}

/* --- Methods pills inside hero card — visible on dark surface --- */
:root[data-theme="dark"] .bq-dec-hero-card-methods span {
  background: rgba(91,163,217,0.12);
  border-color: rgba(91,163,217,0.40);
}

/* --- Footer — already navy fixed, ensure border-tops visible --- */
:root[data-theme="dark"] .bq-footer-bottom {
  border-color: rgba(255,255,255,0.10);
}

/* --- Privacy policy contact card --- */
:root[data-theme="dark"] .bq-privacy-contact {
  background: var(--bq-surface);
  border-color: rgba(255,255,255,0.10);
}

/* --- ContactDirect tiles — slight surface bump in dark --- */
:root[data-theme="dark"] .bq-contact-tile {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
:root[data-theme="dark"] .bq-contact-tile:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(91,163,217,0.50);
}

/* --- Watermark on service cards — too washed out in dark; lift opacity --- */
:root[data-theme="dark"] .bq-service-card .bq-service-watermark {
  opacity: 0.10;
}
:root[data-theme="dark"] .bq-service-card:hover .bq-service-watermark {
  opacity: 0.22;
}

/* --- Image art frames — softer drop shadows in dark, sky-tinted glow --- */
:root[data-theme="dark"] .bq-b2b-intro-art-frame,
:root[data-theme="dark"] .bq-airbnb-hero-art-frame,
:root[data-theme="dark"] .bq-pc-hero-art-frame,
:root[data-theme="dark"] .bq-about-hero-art-frame {
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(91,163,217,0.12) inset;
}

/* --- Background images on white treatment — Mostly OK, but Logo principal
       on a card now has the wordmark "BrightQ" in navy which can be hard to
       read on dark surface. The image itself stays as is (brand asset).
       The card surface is dark enough that the white droplet works. --- */

/* ============================================================
   Moving / Make-Ready (bq-mv) — Custom service page.
   Source spec: BrightQ_Moving_MakeReady_BuildSpec.md
   No prices anywhere. No insurance/bonding content.
   ============================================================ */

/* ---------- Shared head atom (.bq-mv-head) ---------- */
.bq-mv-block { padding: 96px 28px; }
.bq-mv-head { max-width: 820px; margin: 0 0 48px; }
.bq-mv-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.bq-mv-head h2 {
  font-size: 40px; font-weight: 800;
  letter-spacing: -0.022em; line-height: 1.08;
  color: var(--bq-fg); margin: 12px 0 16px;
}
.bq-mv-head-intro {
  font-size: 17px; line-height: 1.6;
  color: var(--bq-fg-muted); margin: 0;
}

/* ---------- 1. Hero ---------- */
.bq-mv-hero-block {
  position: relative;
  padding: 110px 28px 90px;
  background: var(--bq-bg);
  overflow: hidden;
}
.bq-mv-hero-mesh {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 88% 0%, rgba(91,163,217,0.18), transparent 55%),
    radial-gradient(700px 480px at -5% 100%, rgba(91,163,217,0.10), transparent 55%);
}
.bq-mv-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 72px; align-items: center;
}
.bq-mv-hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(91,163,217,0.10);
  border: 1px solid rgba(91,163,217,0.30);
  color: var(--bq-deep-blue);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}
:root[data-theme="dark"] .bq-mv-hero-chip { color: var(--bq-sky); }
.bq-mv-hero-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-sky);
  box-shadow: 0 0 0 4px rgba(91,163,217,0.18);
  animation: bq-dec-pulse 2.6s var(--bq-ease) infinite;
}
.bq-mv-hero-copy h1 {
  font-size: 54px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--bq-fg);
  margin: 0 0 22px;
}
.bq-mv-hero-lede {
  font-size: 18px; line-height: 1.6;
  color: var(--bq-fg-muted);
  max-width: 620px;
  margin: 0 0 22px;
}
.bq-mv-hero-trust {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 10px;
  font-size: 12.5px; font-weight: 600;
  color: var(--bq-fg-subtle);
  margin-bottom: 28px;
}
.bq-mv-hero-trust-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--bq-fg-subtle);
  opacity: 0.6;
}
.bq-mv-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero focal — vertical sequence card */
.bq-mv-hero-art { position: relative; min-width: 0; }
.bq-mv-seq-card {
  position: relative;
  background: var(--bq-navy);
  border: 1px solid rgba(91,163,217,0.25);
  border-radius: 22px;
  padding: 32px 28px 28px;
  overflow: hidden;
  color: #fff;
  box-shadow: var(--bq-sh-3);
}
.bq-mv-seq-glow {
  position: absolute;
  top: -140px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.30), transparent 65%);
  pointer-events: none;
}
.bq-mv-seq-logo {
  position: relative;
  display: flex; justify-content: center;
  margin: 0 0 22px;
}
.bq-mv-seq-logo img {
  width: 110px; height: auto;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(91,163,217,0.30));
}
.bq-mv-seq-eyebrow {
  position: relative;
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 24px;
  text-align: center;
}
.bq-mv-seq-list {
  position: relative;
  list-style: none; padding: 0;
  display: flex; flex-direction: column;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.bq-mv-seq-step {
  position: relative;
  display: grid; grid-template-columns: 44px 40px 1fr;
  align-items: center; gap: 14px;
  padding: 12px 0;
}
.bq-mv-seq-num {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--bq-sky);
  font-variant-numeric: tabular-nums;
}
.bq-mv-seq-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(91,163,217,0.16);
  border: 1px solid rgba(91,163,217,0.30);
  color: var(--bq-sky);
}
.bq-mv-seq-icon i { width: 20px; height: 20px; stroke-width: 1.75; }
.bq-mv-seq-label {
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
}
.bq-mv-seq-line {
  position: absolute;
  left: 64px; top: 60px;
  width: 1px; height: 14px;
  background: linear-gradient(to bottom, rgba(91,163,217,0.50), rgba(91,163,217,0.10));
}
.bq-mv-seq-foot {
  position: relative;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-align: center;
}

@media (max-width: 1024px) { .bq-mv-hero-grid { gap: 48px; } .bq-mv-hero-copy h1 { font-size: 42px; } }
@media (max-width: 900px) {
  .bq-mv-hero-block { padding: 72px 24px 64px; }
  .bq-mv-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .bq-mv-hero-art { order: -1; max-width: 460px; margin: 0 auto; }
  .bq-mv-hero-copy h1 { font-size: 34px; }
}

/* ---------- 2. The bundle — 4 modules in 2x2 ---------- */
.bq-mv-bundle-block { background: var(--bq-surface-2); }
.bq-mv-modules {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1100px; margin: 0 auto;
}
.bq-mv-module {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 20px;
  padding: 32px 30px 28px;
  overflow: hidden;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              box-shadow var(--bq-dur-slow) var(--bq-ease),
              border-color var(--bq-dur-slow) var(--bq-ease);
}
.bq-mv-module-glow {
  position: absolute;
  top: -100px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.14), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bq-dur-slow) var(--bq-ease);
}
.bq-mv-module:hover {
  transform: translateY(-3px);
  box-shadow: var(--bq-sh-3);
  border-color: rgba(91,163,217,0.30);
}
.bq-mv-module:hover .bq-mv-module-glow { opacity: 1; }
.bq-mv-module-head {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 18px;
}
.bq-mv-module-num {
  font-size: 13px; font-weight: 700; letter-spacing: 0.10em;
  color: var(--bq-fg-subtle);
  padding-top: 12px;
  font-variant-numeric: tabular-nums;
}
.bq-mv-module-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(91,163,217,0.20), rgba(91,163,217,0.04));
  color: var(--bq-sky);
}
.bq-mv-module-icon i { width: 24px; height: 24px; stroke-width: 1.75; }
.bq-mv-module h3 {
  position: relative;
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.2;
  color: var(--bq-fg);
  margin: 0 0 12px;
}
.bq-mv-module p {
  position: relative;
  font-size: 14.5px; line-height: 1.6;
  color: var(--bq-fg-muted);
  margin: 0;
}
.bq-mv-module-note {
  position: relative;
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid var(--bq-line-soft);
  font-size: 12.5px !important;
  color: var(--bq-fg-subtle) !important;
  font-style: normal;
}

/* Sequencing strip — single line, ice background */
.bq-mv-sequence-strip {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  max-width: 1100px; margin: 36px auto 0;
  padding: 18px 24px;
  background: var(--bq-bg-tint);
  border: 1px solid var(--bq-line-soft);
  border-radius: 14px;
  font-size: 14px; line-height: 1.5;
  color: var(--bq-fg-muted);
  text-align: center;
}
.bq-mv-sequence-strip i {
  width: 18px; height: 18px;
  color: var(--bq-sky);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .bq-mv-modules { grid-template-columns: 1fr; }
  .bq-mv-sequence-strip { flex-direction: column; padding: 16px 20px; }
}

/* ---------- 3. Factors — 3 columns ---------- */
.bq-mv-factors {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px; margin: 0 auto 28px;
}
.bq-mv-factor {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 20px;
  padding: 32px 28px;
  overflow: hidden;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              box-shadow var(--bq-dur-slow) var(--bq-ease),
              border-color var(--bq-dur-slow) var(--bq-ease);
}
.bq-mv-factor-glow {
  position: absolute;
  top: -100px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.14), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bq-dur-slow) var(--bq-ease);
}
.bq-mv-factor:hover {
  transform: translateY(-3px);
  box-shadow: var(--bq-sh-3);
  border-color: rgba(91,163,217,0.30);
}
.bq-mv-factor:hover .bq-mv-factor-glow { opacity: 1; }
.bq-mv-factor-head {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-mv-factor-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(91,163,217,0.20), rgba(91,163,217,0.04));
  color: var(--bq-sky);
  flex-shrink: 0;
}
.bq-mv-factor-icon i { width: 20px; height: 20px; stroke-width: 1.75; }
.bq-mv-factor h3 {
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--bq-fg);
  margin: 0;
}
.bq-mv-factor-list {
  position: relative;
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.bq-mv-check-row {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.5;
  color: var(--bq-fg-muted);
}
.bq-mv-check-row i {
  width: 16px; height: 16px;
  color: var(--bq-sky);
  stroke-width: 2.5;
  flex-shrink: 0;
  margin-top: 2px;
}
.bq-mv-factors-foot {
  max-width: 820px; margin: 0 auto;
  text-align: center;
  font-size: 14.5px; line-height: 1.6;
  color: var(--bq-fg-muted);
}

@media (max-width: 1024px) { .bq-mv-factors { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- 4. Standalones — 3 lighter cards in a row ---------- */
.bq-mv-standalone-block { background: var(--bq-surface-2); }
.bq-mv-standalones {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1180px; margin: 0 auto;
}
.bq-mv-standalone {
  display: grid; grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 14px;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 16px;
  padding: 24px 24px 20px;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              border-color var(--bq-dur-slow) var(--bq-ease);
}
.bq-mv-standalone:hover {
  transform: translateY(-2px);
  border-color: rgba(91,163,217,0.30);
}
.bq-mv-standalone-icon {
  grid-row: 1 / 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--bq-bg-tint);
  color: var(--bq-sky);
}
.bq-mv-standalone-icon i { width: 20px; height: 20px; stroke-width: 1.75; }
.bq-mv-standalone > div {
  grid-row: 1 / 2;
}
.bq-mv-standalone h3 {
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bq-fg);
  margin: 0 0 4px;
}
.bq-mv-standalone p {
  font-size: 13.5px; line-height: 1.5;
  color: var(--bq-fg-muted);
  margin: 0;
}
.bq-mv-standalone-cta {
  grid-column: 2 / -1; grid-row: 2 / 3;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 12.5px; font-weight: 700;
  color: var(--bq-deep-blue);
  text-decoration: none;
  transition: color var(--bq-dur) var(--bq-ease);
}
:root[data-theme="dark"] .bq-mv-standalone-cta { color: var(--bq-sky); }
.bq-mv-standalone-cta i { width: 13px; height: 13px; transition: transform var(--bq-dur) var(--bq-ease); }
.bq-mv-standalone-cta:hover i { transform: translateX(3px); }

@media (max-width: 900px) { .bq-mv-standalones { grid-template-columns: 1fr; } }

/* ---------- 5. Comparison — structurally parallel sides ---------- */
.bq-mv-compare-block { background: var(--bq-bg); }
.bq-mv-compare {
  position: relative;
  display: grid; grid-template-columns: 1fr 56px 1fr;
  gap: 0;
  max-width: 1160px; margin: 0 auto 72px;
}

/* Card frame — identical anatomy on both sides */
.bq-mv-compare-side {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 22px;
  padding: 32px 30px 28px;
  overflow: hidden;
  min-height: 540px;
}
.bq-mv-compare-side--brightq {
  background: var(--bq-navy);
  border-color: transparent;
  color: #fff;
}
.bq-mv-compare-side-glow {
  position: absolute;
  top: -160px; left: 50%; transform: translateX(-50%);
  width: 480px; height: 480px;
  background: radial-gradient(circle at center, rgba(91,163,217,0.30), transparent 60%);
  pointer-events: none;
}

/* Header — eyebrow + h3 + lede */
.bq-mv-compare-header {
  position: relative;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--bq-line-soft);
}
.bq-mv-compare-side--brightq .bq-mv-compare-header {
  border-bottom-color: rgba(255,255,255,0.10);
}
.bq-mv-compare-label {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bq-fg-subtle);
  margin-bottom: 8px;
}
.bq-mv-compare-side--brightq .bq-mv-compare-label {
  color: var(--bq-sky);
}
.bq-mv-compare-header h3 {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.018em; line-height: 1.2;
  color: var(--bq-fg);
  margin: 0 0 8px;
}
.bq-mv-compare-side--brightq .bq-mv-compare-header h3 { color: #fff; }
.bq-mv-compare-header p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--bq-fg-muted);
  margin: 0;
}
.bq-mv-compare-side--brightq .bq-mv-compare-header p {
  color: rgba(255,255,255,0.72);
}

/* Visual — proportional bar chart, fills the middle of the card */
.bq-mv-compare-visual {
  position: relative;
  flex: 1;
  display: grid; grid-template-columns: 40px 1fr;
  gap: 12px;
  min-height: 280px;
  margin-bottom: 24px;
}
.bq-mv-compare-axis {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bq-fg-subtle);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 2px 0;
}
.bq-mv-compare-axis--bq {
  color: rgba(255,255,255,0.42);
}
.bq-mv-compare-stack {
  position: relative;
  display: flex; flex-direction: column;
  gap: 6px;
  height: 100%;
  border-left: 1px dashed var(--bq-line);
  padding-left: 14px;
}
.bq-mv-compare-side--brightq .bq-mv-compare-stack {
  border-left-color: rgba(255,255,255,0.14);
}
.bq-mv-compare-stack--bq {
  justify-content: flex-end;
}

/* Individual bar — uniform pattern across both sides */
.bq-mv-compare-bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  flex-shrink: 0;
  min-height: 0;
}
.bq-mv-compare-bar-name { color: var(--bq-fg); }
.bq-mv-compare-bar-share {
  font-size: 12px; font-weight: 700;
  color: var(--bq-fg-subtle);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Vendor stack — distinct shades of deep-blue tint */
.bq-mv-compare-bar--mover    { background: rgba(30,80,144,0.22); }
.bq-mv-compare-bar--handyman { background: rgba(30,80,144,0.18); }
.bq-mv-compare-bar--cleaner  { background: rgba(30,80,144,0.14); }
.bq-mv-compare-bar--coord    {
  background: var(--bq-bg-tint);
  border: 1px dashed var(--bq-line);
  color: var(--bq-fg-subtle);
  font-size: 11.5px;
  font-weight: 600;
  justify-content: center;
}
.bq-mv-compare-bar--coord i {
  width: 13px; height: 13px;
  color: var(--bq-fg-subtle);
}

/* BrightQ single bar — proportionally shorter, navy-gradient prominent */
.bq-mv-compare-bar--bq {
  flex-basis: 80%;
  background: linear-gradient(135deg, var(--bq-sky) 0%, var(--bq-deep-blue) 100%);
  color: #fff;
  padding: 18px 20px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  box-shadow:
    0 0 0 1px rgba(91,163,217,0.40) inset,
    0 14px 32px -16px rgba(91,163,217,0.55);
}
.bq-mv-compare-bar--bq .bq-mv-compare-bar-name {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.bq-mv-compare-bar-modules {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
}
.bq-mv-compare-bar-modules span:nth-child(even) {
  color: rgba(255,255,255,0.42);
}

/* Savings tag — floats above the BrightQ bar */
.bq-mv-compare-savings {
  display: inline-flex; align-self: flex-start;
  align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(91,163,217,0.18);
  border: 1px solid rgba(91,163,217,0.45);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bq-sky);
  margin-bottom: 10px;
}
.bq-mv-compare-savings i { width: 14px; height: 14px; }

/* Footer — total + meta */
.bq-mv-compare-footer {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--bq-line-soft);
}
.bq-mv-compare-side--brightq .bq-mv-compare-footer {
  border-top-color: rgba(255,255,255,0.10);
}
.bq-mv-compare-total {
  display: flex; flex-direction: column; gap: 4px;
}
.bq-mv-compare-total-value {
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--bq-fg);
  font-variant-numeric: tabular-nums;
}
.bq-mv-compare-side--brightq .bq-mv-compare-total-value {
  color: #fff;
  background: linear-gradient(135deg, #fff, var(--bq-sky));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bq-mv-compare-total-label {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bq-fg-subtle);
}
.bq-mv-compare-side--brightq .bq-mv-compare-total-label {
  color: rgba(255,255,255,0.62);
}
.bq-mv-compare-meta {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  text-align: right;
}
.bq-mv-compare-meta li {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px;
  font-size: 12px; font-weight: 600;
  color: var(--bq-fg-muted);
}
.bq-mv-compare-side--brightq .bq-mv-compare-meta li {
  color: rgba(255,255,255,0.78);
}
.bq-mv-compare-meta i {
  width: 13px; height: 13px;
  color: var(--bq-sky);
  stroke-width: 2;
}

/* Center divider — vertical "vs" badge */
.bq-mv-compare-vs {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.bq-mv-compare-vs::before {
  content: '';
  position: absolute;
  top: 12%; bottom: 12%; left: 50%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--bq-line) 20%,
    var(--bq-line) 80%,
    transparent
  );
}
.bq-mv-compare-vs span {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bq-fg-subtle);
}

/* ---------- Mechanisms — 4 numbered cards explaining the savings ---------- */
.bq-mv-mechs-head {
  max-width: 820px; margin: 0 auto 36px;
  text-align: center;
}
.bq-mv-mechs-head h3 {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.018em; line-height: 1.2;
  color: var(--bq-fg);
  margin: 12px 0 0;
}
.bq-mv-mechs {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 1080px; margin: 0 auto 64px;
}
.bq-mv-mech {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 18px;
  padding: 26px 28px 24px;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              border-color var(--bq-dur-slow) var(--bq-ease),
              box-shadow var(--bq-dur-slow) var(--bq-ease);
}
.bq-mv-mech:hover {
  transform: translateY(-2px);
  border-color: rgba(91,163,217,0.30);
  box-shadow: var(--bq-sh-2);
}
.bq-mv-mech-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.bq-mv-mech-num {
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--bq-sky);
  font-variant-numeric: tabular-nums;
}
.bq-mv-mech-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(91,163,217,0.20), rgba(91,163,217,0.04));
  color: var(--bq-sky);
}
.bq-mv-mech-icon i { width: 20px; height: 20px; stroke-width: 1.75; }
.bq-mv-mech h4 {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.012em; line-height: 1.25;
  color: var(--bq-fg);
  margin: 0 0 8px;
}
.bq-mv-mech p {
  font-size: 14px; line-height: 1.6;
  color: var(--bq-fg-muted);
  margin: 0;
}

/* ---------- Conclusion: timing callout + footnote ---------- */
.bq-mv-compare-conclusion {
  max-width: 880px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 20px;
}
.bq-mv-compare-timing {
  position: relative;
  display: grid; grid-template-columns: 48px 1fr;
  gap: 18px; align-items: center;
  padding: 22px 26px;
  background: var(--bq-bg-tint);
  border: 1px solid var(--bq-line-soft);
  border-left: 3px solid var(--bq-sky);
  border-radius: 14px;
}
.bq-mv-compare-timing-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(91,163,217,0.20), rgba(91,163,217,0.04));
  color: var(--bq-sky);
  flex-shrink: 0;
}
.bq-mv-compare-timing-icon i { width: 22px; height: 22px; stroke-width: 1.75; }
.bq-mv-compare-timing > div {
  display: flex; flex-direction: column; gap: 3px;
}
.bq-mv-compare-timing strong {
  font-size: 15px; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bq-fg);
}
.bq-mv-compare-timing span {
  font-size: 13.5px; line-height: 1.55;
  color: var(--bq-fg-muted);
}
.bq-mv-compare-footnote {
  text-align: center;
  font-size: 12.5px; line-height: 1.6;
  color: var(--bq-fg-subtle);
  padding: 4px 12px;
  margin: 0;
  max-width: 760px;
  margin-left: auto; margin-right: auto;
}

/* Responsive */
@media (max-width: 960px) {
  .bq-mv-compare { grid-template-columns: 1fr; gap: 20px; }
  .bq-mv-compare-vs { height: 44px; }
  .bq-mv-compare-vs::before { display: none; }
  .bq-mv-compare-side { min-height: 0; }
  .bq-mv-mechs { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bq-mv-compare-footer { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bq-mv-compare-meta { text-align: left; }
  .bq-mv-compare-meta li { justify-content: flex-start; }
  .bq-mv-compare-timing { grid-template-columns: 1fr; text-align: center; }
  .bq-mv-compare-timing-icon { margin: 0 auto; }
}

/* ---------- 6. CTA band ---------- */
.bq-mv-cta {
  position: relative;
  padding: 100px 28px 110px;
  background: var(--bq-bg);
  text-align: center;
  overflow: hidden;
}
.bq-mv-cta-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 50% 100%, rgba(91,163,217,0.16), transparent 60%),
    radial-gradient(600px 350px at 50% 0%, rgba(91,163,217,0.08), transparent 60%);
}
.bq-mv-cta-inner { position: relative; z-index: 1; }
.bq-mv-cta-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 18px;
}
.bq-mv-cta h2 {
  font-size: 40px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.08;
  color: var(--bq-fg);
  max-width: 760px; margin: 0 auto 18px;
}
.bq-mv-cta p {
  font-size: 17px; line-height: 1.55;
  color: var(--bq-fg-muted);
  max-width: 620px; margin: 0 auto 36px;
}
.bq-mv-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

@media (max-width: 768px) {
  .bq-mv-cta { padding: 72px 24px 80px; }
  .bq-mv-cta h2 { font-size: 28px; }
  .bq-mv-head h2 { font-size: 28px; }
  .bq-mv-block { padding: 64px 24px; }
}

/* ---------- Dark mode targeted overrides for bq-mv ---------- */
:root[data-theme="dark"] .bq-mv-hero-mesh { opacity: 0.55; }

/* Card surfaces — visible borders in dark */
:root[data-theme="dark"] .bq-mv-module,
:root[data-theme="dark"] .bq-mv-factor,
:root[data-theme="dark"] .bq-mv-standalone,
:root[data-theme="dark"] .bq-mv-mech,
:root[data-theme="dark"] .bq-mv-compare-side {
  border-color: rgba(255,255,255,0.12);
}
:root[data-theme="dark"] .bq-mv-module-glow,
:root[data-theme="dark"] .bq-mv-factor-glow {
  background: radial-gradient(circle at center, rgba(91,163,217,0.22), transparent 65%);
}

/* Callout / strip surfaces */
:root[data-theme="dark"] .bq-mv-sequence-strip,
:root[data-theme="dark"] .bq-mv-compare-timing {
  background: rgba(91,163,217,0.06);
  border-color: rgba(255,255,255,0.10);
}

/* Eyebrows / tags brighter in dark */
:root[data-theme="dark"] .bq-mv-cta-eyebrow,
:root[data-theme="dark"] .bq-mv-compare-side--brightq .bq-mv-compare-label,
:root[data-theme="dark"] .bq-mv-seq-eyebrow,
:root[data-theme="dark"] .bq-mv-mech-num,
:root[data-theme="dark"] .bq-mv-compare-savings {
  color: #76BBEB;
}

/* Savings tag visibility */
:root[data-theme="dark"] .bq-mv-compare-savings {
  background: rgba(91,163,217,0.18);
  border-color: rgba(91,163,217,0.45);
}

/* Navy "BrightQ" side stays distinct from --bq-bg */
:root[data-theme="dark"] .bq-mv-compare-side--brightq {
  background: #061222;
  border-color: rgba(91,163,217,0.30);
}

/* Vendor bars — lift to sky-tinted shades for dark legibility */
:root[data-theme="dark"] .bq-mv-compare-bar--mover    { background: rgba(91,163,217,0.16); }
:root[data-theme="dark"] .bq-mv-compare-bar--handyman { background: rgba(91,163,217,0.12); }
:root[data-theme="dark"] .bq-mv-compare-bar--cleaner  { background: rgba(91,163,217,0.08); }
:root[data-theme="dark"] .bq-mv-compare-bar--mover .bq-mv-compare-bar-name,
:root[data-theme="dark"] .bq-mv-compare-bar--handyman .bq-mv-compare-bar-name,
:root[data-theme="dark"] .bq-mv-compare-bar--cleaner .bq-mv-compare-bar-name {
  color: var(--bq-fg);
}
:root[data-theme="dark"] .bq-mv-compare-bar--coord {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}

/* Center "vs" badge in dark */
:root[data-theme="dark"] .bq-mv-compare-vs span {
  background: var(--bq-surface);
  border-color: rgba(255,255,255,0.14);
  color: var(--bq-fg-subtle);
}

/* Axis labels */
:root[data-theme="dark"] .bq-mv-compare-axis {
  color: rgba(255,255,255,0.42);
}

/* Sequence card (hero) stays navy variant */
:root[data-theme="dark"] .bq-mv-seq-card {
  background: #061222;
  border-color: rgba(91,163,217,0.30);
}

/* ============================================================
   Ambient droplets — global decorative layer, fixed across the
   viewport. Mounted by theme.js on every page. Honors
   prefers-reduced-motion (script bails out, no DOM created).
   Sits above section backgrounds but below interactive content
   (z-index 2: nav at 100+ stays on top; cards/text remain readable
   because droplet opacity is intentionally low and pointer-events:none).
   ============================================================ */
.bq-ambient-droplets {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.bq-ambient-droplet {
  position: absolute;
  top: -40px;
  color: var(--bq-sky);
  opacity: 0;
  will-change: transform, opacity;
  animation: bq-ambient-fall linear infinite;
}
.bq-ambient-droplet svg { width: 100%; height: 100%; display: block; }
@keyframes bq-ambient-fall {
  0%   { transform: translateY(0)                       scale(0.92); opacity: 0; }
  12%  {                                                              opacity: var(--bq-ambient-op, 0.14); }
  88%  {                                                              opacity: var(--bq-ambient-op, 0.14); }
  100% { transform: translateY(calc(100vh + 80px))      scale(1.04); opacity: 0; }
}

/* Distribute droplets across the viewport width — varied left, size, duration, delay
   so the fall pattern feels organic instead of mechanical. */
.bq-ambient-droplet:nth-child(1)  { left:  4%; width: 12px; animation-duration: 14s; animation-delay:  0s;    --bq-ambient-op: 0.13; }
.bq-ambient-droplet:nth-child(2)  { left: 11%; width: 14px; animation-duration: 18s; animation-delay:  3s;    --bq-ambient-op: 0.15; }
.bq-ambient-droplet:nth-child(3)  { left: 19%; width: 10px; animation-duration: 12s; animation-delay:  7s;    --bq-ambient-op: 0.12; }
.bq-ambient-droplet:nth-child(4)  { left: 27%; width: 13px; animation-duration: 16s; animation-delay:  1.5s;  --bq-ambient-op: 0.14; }
.bq-ambient-droplet:nth-child(5)  { left: 35%; width: 11px; animation-duration: 15s; animation-delay:  5s;    --bq-ambient-op: 0.13; }
.bq-ambient-droplet:nth-child(6)  { left: 42%; width: 14px; animation-duration: 17s; animation-delay:  9s;    --bq-ambient-op: 0.15; }
.bq-ambient-droplet:nth-child(7)  { left: 50%; width: 12px; animation-duration: 13s; animation-delay:  2.5s;  --bq-ambient-op: 0.13; }
.bq-ambient-droplet:nth-child(8)  { left: 58%; width: 10px; animation-duration: 19s; animation-delay:  6.5s;  --bq-ambient-op: 0.12; }
.bq-ambient-droplet:nth-child(9)  { left: 66%; width: 13px; animation-duration: 14s; animation-delay:  4s;    --bq-ambient-op: 0.14; }
.bq-ambient-droplet:nth-child(10) { left: 73%; width: 12px; animation-duration: 16s; animation-delay:  8s;    --bq-ambient-op: 0.13; }
.bq-ambient-droplet:nth-child(11) { left: 81%; width: 14px; animation-duration: 18s; animation-delay:  1s;    --bq-ambient-op: 0.15; }
.bq-ambient-droplet:nth-child(12) { left: 88%; width: 11px; animation-duration: 13s; animation-delay:  5.5s;  --bq-ambient-op: 0.12; }
.bq-ambient-droplet:nth-child(13) { left: 95%; width: 12px; animation-duration: 17s; animation-delay: 10s;    --bq-ambient-op: 0.13; }
.bq-ambient-droplet:nth-child(14) { left: 30%; width: 10px; animation-duration: 15s; animation-delay: 11.5s;  --bq-ambient-op: 0.12; }

/* Dark mode: keep the same opacity ranges — sky-blue on dark navy reads naturally
   without needing a multiplier bump. */
:root[data-theme="dark"] .bq-ambient-droplet {
  color: var(--bq-sky);
}

/* Reduced motion — script does not mount, but defensive CSS belt-and-braces. */
@media (prefers-reduced-motion: reduce) {
  .bq-ambient-droplets { display: none; }
}

/* Mobile — fewer droplets visible (smaller viewport, more performance-sensitive). */
@media (max-width: 600px) {
  .bq-ambient-droplet:nth-child(n+9) { display: none; }
}

/* ============================================================
   Hosted by BrightQ — featured case study carousel (bq-hbb-*)
   Mounted on the Our Work page between the intro and the gallery.
   5 slides showcasing the Olympic Village Airbnb hosting service.
   ============================================================ */
.bq-hbb-section {
  position: relative;
  padding: 56px 28px 64px;
  background: var(--bq-surface-2);
  overflow: hidden;
}
.bq-hbb-mesh {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 460px at 12% 0%, rgba(91,163,217,0.14), transparent 55%),
    radial-gradient(560px 380px at 100% 100%, rgba(91,163,217,0.08), transparent 55%);
}
.bq-hbb-section > .bq-container-wide {
  position: relative; z-index: 1;
  max-width: 1080px;   /* narrower than the gallery wrapper so it feels supporting, not headline */
  margin: 0 auto;
}

.bq-hbb-head { max-width: 720px; margin: 0 0 24px; }
.bq-hbb-head h2 {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.018em; line-height: 1.18;
  color: var(--bq-fg);
  margin: 8px 0 10px;
}
.bq-hbb-head p {
  font-size: 14.5px; line-height: 1.55;
  color: var(--bq-fg-muted);
  margin: 0;
}
.bq-hbb-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  padding: 9px 16px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bq-deep-blue);
  background: var(--bq-bg-tint);
  border: 1px solid rgba(91,163,217,0.30);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--bq-dur) var(--bq-ease),
              color var(--bq-dur) var(--bq-ease),
              border-color var(--bq-dur) var(--bq-ease),
              transform var(--bq-dur) var(--bq-ease);
}
.bq-hbb-cta:hover {
  background: var(--bq-deep-blue);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}
.bq-hbb-cta i {
  width: 14px; height: 14px;
  transition: transform var(--bq-dur) var(--bq-ease);
}
.bq-hbb-cta:hover i { transform: translateX(3px); }
:root[data-theme="dark"] .bq-hbb-cta {
  color: var(--bq-sky);
  background: rgba(91,163,217,0.10);
  border-color: rgba(91,163,217,0.40);
}
:root[data-theme="dark"] .bq-hbb-cta:hover {
  background: var(--bq-sky);
  color: var(--bq-navy);
  border-color: transparent;
}

/* Carousel container — focusable for keyboard nav, compact treatment */
.bq-hbb-carousel {
  position: relative;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-soft);
  border-radius: 18px;
  padding: 18px 20px 16px;
  outline: none;
}
.bq-hbb-carousel:focus-visible {
  border-color: var(--bq-sky);
  box-shadow: 0 0 0 3px rgba(91,163,217,0.25);
}

/* Viewport clips the track; track translates per slide */
.bq-hbb-viewport {
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 14px;
}
.bq-hbb-track {
  display: flex;
  transition: transform 480ms var(--bq-ease);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .bq-hbb-track { transition: none; }
}

/* Each slide takes 100% of viewport width */
.bq-hbb-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* Media — blurred backdrop of same image + contained foreground.
   Wider aspect-ratio + fixed-ish max-height keep the carousel from
   dominating the page vertically. */
.bq-hbb-slide-media {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bq-hbb-slide-media::before {
  content: '';
  position: absolute; inset: 0;
  background: inherit;
  filter: blur(28px) saturate(1.1);
  transform: scale(1.18);
  z-index: 0;
}
.bq-hbb-slide-media::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(12,35,64,0.15);
  z-index: 0;
}
.bq-hbb-slide-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}

/* Copy column */
.bq-hbb-slide-copy {
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 4px 2px;
}
.bq-hbb-slide-step {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bq-sky);
  margin-bottom: 10px;
}
.bq-hbb-slide-copy h3 {
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.012em; line-height: 1.25;
  color: var(--bq-fg);
  margin: 0 0 10px;
}
.bq-hbb-slide-copy p {
  font-size: 14px; line-height: 1.6;
  color: var(--bq-fg-muted);
  margin: 0;
}

/* Controls row: prev — dots — next — counter */
.bq-hbb-controls {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bq-line-soft);
}
.bq-hbb-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bq-bg-tint);
  border: 1px solid var(--bq-line-soft);
  color: var(--bq-fg);
  cursor: pointer;
  transition: background var(--bq-dur) var(--bq-ease),
              border-color var(--bq-dur) var(--bq-ease),
              transform var(--bq-dur) var(--bq-ease);
}
.bq-hbb-nav:hover:not(:disabled) {
  background: var(--bq-sky);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
}
.bq-hbb-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.bq-hbb-nav i { width: 16px; height: 16px; }
.bq-hbb-nav--prev { justify-self: start; }
.bq-hbb-nav--next { justify-self: end; }

.bq-hbb-dots {
  display: flex; justify-content: center; gap: 7px;
}
.bq-hbb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bq-line);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--bq-dur) var(--bq-ease),
              transform var(--bq-dur) var(--bq-ease);
}
.bq-hbb-dot:hover { background: var(--bq-fg-subtle); }
.bq-hbb-dot.is-active {
  background: var(--bq-sky);
  transform: scaleX(2.4);
  border-radius: 999px;
}

.bq-hbb-counter {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--bq-fg-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: 2px;
}

/* Responsive — stack on tablet/mobile */
@media (max-width: 820px) {
  .bq-hbb-section { padding: 48px 22px 56px; }
  .bq-hbb-head h2 { font-size: 22px; }
  .bq-hbb-head p { font-size: 14px; }
  .bq-hbb-carousel { padding: 16px 16px 14px; }
  .bq-hbb-slide { grid-template-columns: 1fr; gap: 16px; }
  .bq-hbb-slide-media { max-height: 220px; aspect-ratio: 4 / 3; }
  .bq-hbb-slide-copy h3 { font-size: 17px; }
  .bq-hbb-slide-copy p { font-size: 13.5px; }
  .bq-hbb-controls { grid-template-columns: auto 1fr auto; gap: 10px; }
  .bq-hbb-counter { display: none; }
}

/* Dark mode tuning */
:root[data-theme="dark"] .bq-hbb-mesh { opacity: 0.55; }
:root[data-theme="dark"] .bq-hbb-carousel {
  border-color: rgba(255,255,255,0.12);
}
:root[data-theme="dark"] .bq-hbb-slide-step { color: #76BBEB; }
:root[data-theme="dark"] .bq-hbb-slide-media::after {
  background: rgba(5,11,20,0.25);
}
:root[data-theme="dark"] .bq-hbb-nav {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
:root[data-theme="dark"] .bq-hbb-dot { background: rgba(255,255,255,0.18); }
:root[data-theme="dark"] .bq-hbb-dot.is-active { background: var(--bq-sky); }

/* ============================================================
   MOBILE LAYER — runs after every prior block so it wins.
   Strategy: keep desktop CSS intact; add mobile-only behavior
   below a single breakpoint (980px). This block covers:
   - Hamburger nav + mobile drawer
   - Fluid H1/H2/H3 via clamp() (no overflow on 360px)
   - Tap targets >= 44px (buttons, nav links, chips, inputs)
   - Form inputs at 16px font-size (no iOS zoom)
   - Section padding scale-down
   - Universal img safety defaults
   - Hard overflow-x guard on body
   ============================================================ */

/* --- Universal img safety: never wider than its container --- */
img { max-width: 100%; height: auto; }

/* --- Hard overflow-x guard: nothing wider than the viewport --- */
html, body { overflow-x: hidden; }

/* --- Body root font-size: 16px floor (iOS won't zoom into inputs) --- */
html { font-size: 16px; }

/* --- Hamburger toggle (hidden on desktop) --- */
.bq-nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  border-radius: 10px;
  transition: background var(--bq-dur) var(--bq-ease);
}
.bq-nav-toggle:hover { background: var(--bq-bg-tint); }
.bq-nav-toggle-bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--bq-fg);
  border-radius: 2px;
  transition: transform var(--bq-dur) var(--bq-ease),
              opacity var(--bq-dur) var(--bq-ease);
}
/* Hamburger → X when menu is open */
.bq-nav--menu-open .bq-nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.bq-nav--menu-open .bq-nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.bq-nav--menu-open .bq-nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobile menu panel (hidden by default; shown on mobile when open) --- */
.bq-nav-mobile {
  display: none;
  position: fixed;
  top: 64px;                                /* below the nav bar */
  left: 0; right: 0;
  bottom: 0;
  background: var(--bq-bg);
  z-index: 90;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-top: 1px solid var(--bq-line-soft);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--bq-dur) var(--bq-ease),
              opacity var(--bq-dur) var(--bq-ease);
  /* iOS safe-area bottom (notched devices) */
  padding-bottom: env(safe-area-inset-bottom);
}
/* When the drawer's own .is-open class is present, it slides in. The class is
   driven by the same React state that adds .bq-nav--menu-open to <nav>, but the
   drawer is rendered as a sibling of <nav> to escape its containing-block
   (the <nav> uses backdrop-filter, which traps position:fixed children). */
.bq-nav-mobile.is-open,
.bq-nav--menu-open + .bq-nav-mobile {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.bq-nav-mobile-inner {
  padding: 24px 28px 40px;
  max-width: 540px;
  margin: 0 auto;
}
.bq-nav-mobile-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex; flex-direction: column;
}
.bq-nav-mobile-list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
  padding: 12px 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bq-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--bq-line-soft);
  transition: color var(--bq-dur) var(--bq-ease),
              padding-left var(--bq-dur) var(--bq-ease);
}
.bq-nav-mobile-list a::after {
  content: "›";
  font-size: 22px;
  color: var(--bq-fg-subtle);
  font-weight: 400;
  transition: color var(--bq-dur) var(--bq-ease),
              transform var(--bq-dur) var(--bq-ease);
}
.bq-nav-mobile-list a:hover,
.bq-nav-mobile-list a:active { color: var(--bq-link); padding-left: 6px; }
.bq-nav-mobile-list a:hover::after,
.bq-nav-mobile-list a:active::after { color: var(--bq-sky); transform: translateX(2px); }

.bq-nav-mobile-cta {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 16px;
}
.bq-nav-mobile-cta .btn {
  justify-content: center;
  min-height: 48px;
  padding: 14px 22px;
  font-size: 15px;
}
@media (prefers-reduced-motion: reduce) {
  .bq-nav-toggle-bar, .bq-nav-mobile { transition: none; }
}

/* ============================================================
   <= 980px — Tablet/mobile breakpoint
   Hamburger appears, desktop nav links hide, fluid type, padding scale-down
   ============================================================ */
@media (max-width: 980px) {
  /* Nav becomes fully fixed on mobile so it tracks scroll (users can
     reopen the menu without scrolling back to the top). position:sticky
     fails here because html has overflow-x: hidden as the overflow guard,
     which detaches sticky from the viewport. Switching to fixed is the
     reliable solution. */
  .bq-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
  }
  /* Compensate so content doesn't slip beneath the now-out-of-flow nav.
     Nav height on mobile ≈ 60px (12 pad + 36 logo + 12 pad + 1 border). */
  body { padding-top: 60px; }

  .bq-nav-inner { padding: 12px 20px; gap: 16px; }
  .bq-nav-brand img { height: 36px; }
  .bq-nav-links,
  .bq-nav-cta { display: none; }
  .bq-nav-toggle { display: inline-flex; }
  .bq-nav-mobile { display: block; }
}

/* ============================================================
   <= 700px — Phone (390/430 typical)
   Fluid type, tighter spacing, hero collapse safeguards
   ============================================================ */
/* ============================================================
   <= 760px — Phone (covers 360/390/430 device frames)
   Strategy: spacious. Cards and sections breathe; type is large
   and readable; everything stacks to one comfortable column.
   Spacing scale used here: 16 / 20 / 24 / 32 / 48 / 64 / 80
   ============================================================ */
@media (max-width: 760px) {

  /* ─── Containers: generous left/right padding (no edge-touching) ─── */
  .bq-container,
  .bq-container-wide { padding-left: 24px; padding-right: 24px; }

  /* ─── Section vertical rhythm: 72px top + bottom (was 56) ─── */
  .bq-section,
  .bq-section-tight,
  .bq-services-section,
  .bq-pricing-section,
  .bq-diff-section,
  .bq-how-section,
  .bq-mv-block,
  .bq-dec-block,
  .bq-b2b-block,
  .bq-pc-block,
  .bq-airbnb-block,
  .bq-about-block,
  .bq-svc-includes,
  .bq-svc-process,
  .bq-svc-other,
  .bq-svc-cta,
  .bq-b2b-emergency,
  .bq-b2b-cta-block,
  .bq-mv-cta,
  .bq-dec-cta,
  .bq-contact-direct,
  .bq-hbb-section { padding-top: 72px; padding-bottom: 72px; }

  /* Hero sections: deliberately tighter top so nav doesn't double-pad */
  .bq-hero,
  .bq-mv-hero-block,
  .bq-b2b-intro,
  .bq-airbnb-hero-block,
  .bq-pc-hero-block,
  .bq-about-hero-block,
  .bq-dec-hero,
  .bq-svc-hero,
  .bq-ow-intro { padding-top: 56px; padding-bottom: 64px; }

  /* ─── Hero asymmetric grids → stacked, with comfortable gap ─── */
  .bq-hero-grid,
  .bq-mv-hero-grid,
  .bq-b2b-intro-grid,
  .bq-svc-hero-grid,
  .bq-airbnb-hero,
  .bq-pc-hero,
  .bq-about-hero,
  .bq-dec-hero-grid,
  .bq-ow-intro-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Art (image/card) goes ABOVE copy on stacked layout for visual lead */
  .bq-hero-art,
  .bq-mv-hero-art,
  .bq-b2b-intro-art,
  .bq-airbnb-hero-art,
  .bq-pc-hero-art,
  .bq-about-hero-art,
  .bq-dec-hero-art,
  .bq-ow-intro-art { order: -1; }

  /* ─── Typography (mobile hierarchy, generous line-height) ─── */
  /* H1 hero */
  .bq-hero h1,
  .bq-dec-hero h1,
  .bq-b2b-intro-copy h1,
  .bq-svc-hero h1,
  .bq-airbnb-hero-copy h1,
  .bq-pc-hero-copy h1,
  .bq-about-hero-copy h1,
  .bq-mv-hero-copy h1,
  .bq-ow-intro-copy h1 {
    font-size: clamp(30px, 8.8vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.022em;
    max-width: 18ch;
  }
  /* H2 section heads */
  .bq-section h2,
  .bq-mv-head h2,
  .bq-dec-head h2,
  .bq-mv-cta h2,
  .bq-dec-cta h3,
  .bq-b2b-cta-block h3,
  .bq-b2b-head h3,
  .bq-mv-mechs-head h3,
  .bq-hbb-head h2,
  .bq-contact-direct-head h2,
  .bq-b2b-emergency h3 {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.18;
    letter-spacing: -0.018em;
    max-width: 22ch;
  }
  .bq-mv-head--center h2,
  .bq-hbb-head h2,
  .bq-section h2[style*="center"] { max-width: 24ch; margin-left: auto; margin-right: auto; }

  /* H3 card titles */
  .bq-service-card h3,
  .bq-mv-module h3,
  .bq-mv-factor h3,
  .bq-zone h3,
  .bq-dec-sub-card h3,
  .bq-dec-audience-col h3,
  .bq-b2b-rhythm h4,
  .bq-price h4,
  .bq-svc-incl-card h4,
  .bq-pc-phase-card h4,
  .bq-airbnb-tier h4 { font-size: 20px; line-height: 1.25; letter-spacing: -0.012em; }

  /* Body / lede — comfortable read at 360px+ */
  body,
  .bq-hero-lede,
  .bq-dec-hero-lede,
  .bq-b2b-intro-lede,
  .bq-svc-hero-lede,
  .bq-airbnb-hero-lede,
  .bq-pc-hero-lede,
  .bq-about-hero-lede,
  .bq-mv-hero-lede,
  .bq-mv-head-intro,
  .bq-dec-head p,
  .bq-hbb-head p { font-size: 16.5px; line-height: 1.6; }

  /* Long-form copy: line-length cap for readability */
  .bq-hero-lede,
  .bq-dec-hero-lede,
  .bq-b2b-intro-lede,
  .bq-svc-hero-lede,
  .bq-airbnb-hero-lede,
  .bq-pc-hero-lede,
  .bq-about-hero-lede,
  .bq-mv-hero-lede { max-width: 42ch; }

  /* Trust pipes / strips wrap nicely */
  .bq-hero-trust { flex-wrap: wrap; row-gap: 8px; font-size: 11px; }
  .bq-service-pipes {
    font-size: 11px; line-height: 1.9;
    letter-spacing: 0.10em;
    margin-top: 24px;
  }
  .bq-service-pipes span { margin: 0 6px; }

  /* ─── Multi-column grids → single column with consistent 18px gap ─── */
  .bq-services,
  .bq-services--six,
  .bq-zones,
  .bq-pricing,
  .bq-dec-audience,
  .bq-dec-sub-grid,
  .bq-dec-prices,
  .bq-dec-trust,
  .bq-mv-modules,
  .bq-mv-factors,
  .bq-mv-standalones,
  .bq-mv-mechs,
  .bq-b2b-approach,
  .bq-b2b-rhythms,
  .bq-b2b-emergency-points,
  .bq-svc-includes,
  .bq-svc-process,
  .bq-svc-other-grid,
  .bq-svc-gallery-inner,
  .bq-pc-phases,
  .bq-pc-grid,
  .bq-airbnb-tiers,
  .bq-airbnb-list,
  .bq-airbnb-list-grid,
  .bq-airbnb-emergency-points,
  .bq-about-values,
  .bq-about-believe,
  .bq-about-years,
  .bq-about-pet,
  .bq-about-founder,
  .bq-ow-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Direct contact card (the 4-tile internal grid) — stack tiles */
  .bq-contact-direct-card { grid-template-columns: 1fr !important; padding: 32px 24px !important; gap: 24px !important; }
  .bq-contact-direct-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* For Business engagement rhythms keep more breathing room — single col w/ 22 gap */
  .bq-b2b-rhythms { gap: 22px !important; }

  /* Mechanism cards — single col but slightly tighter gap */
  .bq-mv-mechs { gap: 14px !important; }

  /* ─── Card padding: consistent on mobile ─── */
  .bq-service-card,
  .bq-mv-module,
  .bq-mv-factor,
  .bq-zone,
  .bq-dec-sub-card,
  .bq-dec-audience-col,
  .bq-b2b-rhythm,
  .bq-price,
  .bq-svc-incl-card,
  .bq-pc-phase-card,
  .bq-airbnb-tier,
  .bq-dec-price-card,
  .bq-mv-mech { padding: 26px 22px; }

  /* Hero meshes don't need so much top pad on mobile */
  .bq-hero-card { min-height: 360px; padding: 32px 20px 24px; }
  .bq-hero-card-logo { width: 220px; }
  .bq-hero-card-foot { gap: 8px; margin-top: 24px; }
  .bq-hero-card-badge { font-size: 11px; padding: 6px 10px; }

  /* ─── Tap-target floor: buttons, links inside CTA rows, chips ─── */
  .btn {
    min-height: 48px;
    padding: 13px 22px;
    font-size: 15px;
    letter-spacing: 0;
  }

  /* Form inputs / textareas / selects — 16px floor (no iOS zoom) */
  .bq-input, .bq-select, .bq-textarea,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], select, textarea {
    min-height: 48px;
    font-size: 16px;
    padding: 12px 14px;
  }

  /* ─── CTA rows: stack as full-width column ─── */
  .bq-hero-cta,
  .bq-mv-hero-cta,
  .bq-mv-cta-actions,
  .bq-dec-hero-cta,
  .bq-dec-cta-actions,
  .bq-b2b-intro-cta,
  .bq-b2b-cta-actions,
  .bq-svc-hero-cta,
  .bq-airbnb-hero-cta,
  .bq-pc-hero-cta,
  .bq-about-cta-actions,
  .bq-svc-cta-card .row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .bq-hero-cta .btn,
  .bq-mv-hero-cta .btn,
  .bq-mv-cta-actions .btn,
  .bq-dec-hero-cta .btn,
  .bq-dec-cta-actions .btn,
  .bq-b2b-intro-cta .btn,
  .bq-b2b-cta-actions .btn,
  .bq-svc-hero-cta .btn,
  .bq-airbnb-hero-cta .btn,
  .bq-pc-hero-cta .btn,
  .bq-about-cta-actions .btn { justify-content: center; width: 100%; }

  /* ─── Footer: 2 cols on mid, 1 col on tiny ─── */
  .bq-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .bq-footer { padding: 56px 24px 24px; }
  .bq-footer-bottom {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding-top: 24px;
  }
  .bq-footer-bottom > * { justify-content: center; }

  /* ─── Differentiator table → centered comparison cards ───
     Pattern: feature title centered + bold at top, then two stacked options
     beneath — "Standard" (muted) and "BrightQ ✓" (highlighted block).
     All text centered. Inspired by Linear / Notion / Stripe comparison pages. */
  .bq-diff-table { background: transparent; border: 0; border-radius: 0; }
  .bq-diff-row {
    display: block;
    background: var(--bq-surface);
    border: 1px solid var(--bq-line-soft);
    border-radius: 16px;
    padding: 22px 18px 18px;
    margin-bottom: 12px;
    text-align: center;
  }
  .bq-diff-row:last-child { margin-bottom: 0; }
  /* Hide the head row — double-class selector for specificity, placed AFTER
     the .bq-diff-row { display: block } rule so cascade resolves correctly. */
  .bq-diff-row.bq-diff-row--head { display: none !important; }

  .bq-diff-cell { display: block; padding: 0; }

  /* Feature title — the question. Centered, bold, prominent. */
  .bq-diff-cell--feature {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--bq-fg);
    text-align: center;
    margin-bottom: 18px;
    padding: 0 4px;
  }

  /* Both option rows: stacked label-above-value, centered text. */
  .bq-diff-cell--standard,
  .bq-diff-cell--brightq {
    display: block;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.55;
    padding: 14px 4px;
  }

  /* "Standard" row: subtle muted answer, divider above */
  .bq-diff-cell--standard {
    background: transparent;
    color: var(--bq-fg-muted);
    border-top: 1px solid var(--bq-line-soft);
  }
  .bq-diff-cell--standard::before {
    content: "Standard";
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bq-fg-subtle);
    margin-bottom: 8px;
  }

  /* "BrightQ ✓" row: highlighted block, sky-tinted background + soft border. */
  .bq-diff-cell--brightq {
    background: var(--bq-bg-tint);
    color: var(--bq-fg);
    border: 1px solid rgba(91,163,217,0.20);
    border-radius: 12px;
    padding: 16px 18px;
    margin-top: 12px;
    font-weight: 600;
  }
  .bq-diff-cell--brightq::before {
    content: "BrightQ ✓";
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bq-sky);
    margin-bottom: 8px;
  }

  /* Hide the original brightq-mark span (only present in the head row, which
     is hidden anyway) and the inline check icon (the ✓ now lives in the label). */
  .bq-diff-row:not(.bq-diff-row--head) .bq-diff-brightq-mark { display: none; }
  .bq-diff-row:not(.bq-diff-row--head) .bq-diff-check { display: none; }

  /* ─── Pricing cards — full-width with proper internal spacing ─── */
  .bq-pricing { gap: 18px !important; }
  .bq-price ul { gap: 12px; }
  .bq-price li { font-size: 14.5px; line-height: 1.55; }

  /* ─── Services grid: lead with Commercial, scannable card-list ─── */
  .bq-service-card { min-height: 0; padding: 24px 22px; }
  .bq-service-card h3 { font-size: 19px; margin-bottom: 8px; }
  .bq-service-card p { font-size: 14.5px; line-height: 1.55; margin-bottom: 16px; }
  .bq-service-card .more { padding: 11px 18px; font-size: 13.5px; min-height: 44px; }
  .bq-service-card .icon { width: 44px; height: 44px; margin-bottom: 16px; }
  .bq-service-card .icon svg { width: 22px; height: 22px; }
  /* Number badge: subtler on mobile so it doesn't fight the icon */
  .bq-service-card-num { top: 20px; right: 20px; font-size: 10.5px; opacity: 0.5; }
  /* Watermark adds visual noise on small screens — hide it */
  .bq-service-card .bq-service-watermark { display: none; }
  /* Coming soon card: keep the tag but no need for watermark/glow drama */
  .bq-service-card--coming { padding: 24px 22px; opacity: 0.8; }

  /* ─── Engagement rhythm cards — denser internals ─── */
  .bq-b2b-rhythm { padding: 24px 22px 22px; }
  .bq-b2b-rhythm h4 { font-size: 22px; }
  .bq-b2b-rhythm-quote { font-size: 13.5px; }
  .bq-b2b-rhythm-benefits li { font-size: 13.5px; line-height: 1.5; }

  /* ─── Emergency band: stack ─── */
  .bq-b2b-emergency-head { grid-template-columns: 1fr !important; gap: 32px !important; }
  .bq-b2b-emergency-art { order: -1; max-width: 220px; margin: 0 auto; }
  .bq-b2b-emergency-art img { max-width: 220px; }
  .bq-b2b-emergency h3 { font-size: clamp(24px, 7vw, 32px) !important; }
  .bq-b2b-emergency-lede { font-size: 15.5px; }

  /* ─── Our Work showcase carousel: more breathing room, larger media ─── */
  .bq-hbb-section { padding: 56px 24px 64px; }
  .bq-hbb-carousel { padding: 20px 20px 16px; }
  .bq-hbb-slide-media { max-height: 260px; aspect-ratio: 4 / 3; }
  .bq-hbb-slide-copy h3 { font-size: 18px; }
  .bq-hbb-slide-copy p { font-size: 14.5px; line-height: 1.55; }

  /* ─── Our Work gallery grid: 1 col with big-card aspect ─── */
  .bq-ow-grid { gap: 24px !important; }
  .bq-ow-card-meta h3 { font-size: 18px; }
  .bq-ow-card-meta p { font-size: 14px; line-height: 1.5; }

  /* ─── Deep Extraction process timeline: tighter ─── */
  .bq-dec-process-item { grid-template-columns: 56px 1fr !important; padding: 16px 0; gap: 16px; }
  .bq-dec-process-num { font-size: 18px; }

  /* ─── Sequence card on Moving hero: scale down ─── */
  .bq-mv-seq-card { padding: 28px 22px 22px; }
  .bq-mv-seq-logo img { width: 90px; }
  .bq-mv-seq-label { font-size: 14px; }

  /* ─── Compare visual on Moving: stack vendors/brightq ─── */
  .bq-mv-compare { grid-template-columns: 1fr !important; gap: 16px !important; }
  .bq-mv-compare-vs {
    transform: rotate(90deg);
    width: 44px; height: 44px;
    margin: 0 auto;
  }

  /* ─── Standalone CTA pills on Moving: full width ─── */
  .bq-mv-standalone { grid-template-columns: 48px 1fr !important; }
  .bq-mv-standalone-cta { grid-column: 2 / -1 !important; }

  /* ─── Address bumper at hero edges ─── */
  .bq-hero-card-glow { width: 360px; height: 360px; }

  /* ─── Hosted carousel controls more thumb-friendly ─── */
  .bq-hbb-nav { width: 40px; height: 40px; }
  .bq-hbb-cta { padding: 11px 18px; min-height: 44px; font-size: 13px; }

  /* ─── Sub-services / DEC pricing cards: tighter unit-style row ─── */
  .bq-dec-price-card { padding: 26px 22px; }
  .bq-dec-price-amount { font-size: 32px; }
  .bq-dec-price-tiers strong { font-size: 20px; }

  /* ─── About page sticky founder image causes layout issues at mobile, unstick ─── */
  .bq-about-founder-art { position: static; }
  .bq-about-founder-art img,
  .bq-about-years-art img,
  .bq-about-believe-art img,
  .bq-about-pet-art img { max-width: 320px; width: 100%; margin: 0 auto; display: block; }

  /* ─── "Why BrightQ" / "Why we do this" centered prose: nice line length ─── */
  .bq-about-why,
  .bq-about-closing { padding: 56px 24px; }
  .bq-about-why-line,
  .bq-about-why-close,
  .bq-about-quote { max-width: 38ch; margin-left: auto; margin-right: auto; }

  /* ─── Privacy policy: comfortable reading column ─── */
  .bq-privacy-section,
  .bq-privacy-hero { padding-left: 0; padding-right: 0; }
  .bq-privacy-section p,
  .bq-privacy-section li { font-size: 16px; line-height: 1.65; }

  /* ─── Process timeline cards (any *-process-item): proper col proportions ─── */
  .bq-svc-process-item { grid-template-columns: 48px 1fr !important; gap: 16px !important; }

  /* ─── Compare visual on Moving: the 100% / 75-85% labels ─── */
  .bq-mv-compare-side { padding: 24px 20px; }
  .bq-mv-compare-total-value { font-size: 28px; }

  /* ─── Direct contact tiles: comfortable tap target row ─── */
  .bq-contact-tile { padding: 18px 18px; min-height: 76px; }
  .bq-contact-tile-val { font-size: 15px; }
  .bq-contact-tile-sub { font-size: 12px; line-height: 1.4; }

  /* ─── ContactDirect heading + lede readable ─── */
  .bq-contact-direct-head h2 { font-size: clamp(24px, 7vw, 30px); }
  .bq-contact-direct-head p { font-size: 15.5px; }

  /* ─── Mobile menu top-offset matches the reduced nav bar height ─── */
  .bq-nav-mobile { top: 64px; }
}

/* ============================================================
   <= 420px — Small phone (iPhone SE / Android 360 frames)
   Tighten just enough for the smallest screens.
   ============================================================ */
@media (max-width: 420px) {
  .bq-container,
  .bq-container-wide { padding-left: 18px; padding-right: 18px; }

  .bq-section,
  .bq-section-tight,
  .bq-services-section,
  .bq-pricing-section,
  .bq-diff-section,
  .bq-how-section,
  .bq-mv-block,
  .bq-dec-block,
  .bq-b2b-block,
  .bq-pc-block,
  .bq-airbnb-block,
  .bq-about-block,
  .bq-svc-includes,
  .bq-svc-process,
  .bq-svc-other,
  .bq-svc-cta,
  .bq-b2b-emergency,
  .bq-b2b-cta-block,
  .bq-mv-cta,
  .bq-dec-cta,
  .bq-contact-direct,
  .bq-hbb-section { padding-top: 60px; padding-bottom: 60px; }

  /* Card padding tighten gently */
  .bq-service-card,
  .bq-mv-module,
  .bq-mv-factor,
  .bq-zone,
  .bq-dec-sub-card,
  .bq-dec-audience-col,
  .bq-b2b-rhythm,
  .bq-price,
  .bq-svc-incl-card,
  .bq-pc-phase-card,
  .bq-airbnb-tier { padding: 22px 18px; }

  /* H1 a touch smaller for 360px so it doesn't take over the screen */
  .bq-hero h1,
  .bq-dec-hero h1,
  .bq-b2b-intro-copy h1,
  .bq-svc-hero h1,
  .bq-airbnb-hero-copy h1,
  .bq-pc-hero-copy h1,
  .bq-about-hero-copy h1,
  .bq-mv-hero-copy h1,
  .bq-ow-intro-copy h1 { font-size: clamp(26px, 8.4vw, 36px); max-width: 100%; }

  /* Footer single column for the tiniest screens */
  .bq-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .bq-footer { padding: 48px 18px 20px; }

  /* Hero card: most compact variant */
  .bq-hero-card { min-height: 320px; padding: 28px 16px 20px; }
  .bq-hero-card-logo { width: 180px; }

  /* Section tags & eyebrows */
  .bq-section-tag,
  .bq-mv-head .bq-section-tag,
  .bq-dec-section-tag { letter-spacing: 0.10em; font-size: 10.5px; }

  /* Mobile menu inner padding */
  .bq-nav-mobile-inner { padding: 16px 20px 32px; }
  .bq-nav-mobile-list a { font-size: 16px; min-height: 52px; }
}

/* Dark mode visibility — mobile menu surface needs the right token (already var-based) */
:root[data-theme="dark"] .bq-nav-mobile { background: var(--bq-bg); }
:root[data-theme="dark"] .bq-nav-mobile-list a { border-bottom-color: rgba(255,255,255,0.10); }
:root[data-theme="dark"] .bq-nav-toggle:hover { background: rgba(255,255,255,0.05); }

/* ============================================================
   Mobile sticky bottom CTA bar — appears after scroll, hidden on desktop.
   Two equal-width buttons: "Get a quote" (primary) · "WhatsApp" (secondary).
   ============================================================ */
.bq-mobile-cta-bar {
  display: none;  /* desktop default — only enabled in mobile mq below */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;   /* below mobile menu drawer (z=90), above content */
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bq-surface);
  border-top: 1px solid var(--bq-line);
  box-shadow: 0 -10px 28px -8px rgba(12,35,64,0.18);
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--bq-dur-slow) var(--bq-ease),
              opacity var(--bq-dur-slow) var(--bq-ease);
}
.bq-mobile-cta-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.bq-mobile-cta-bar .btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 14px;
  gap: 6px;
}
.bq-mobile-cta-bar .btn i {
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.bq-mobile-cta-bar .btn span { white-space: nowrap; }

/* Only show on mobile */
@media (max-width: 760px) {
  .bq-mobile-cta-bar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .bq-mobile-cta-bar { transition: opacity var(--bq-dur) var(--bq-ease); transform: none; }
  .bq-mobile-cta-bar:not(.is-visible) { display: none; }
}

/* Dark mode — slightly stronger shadow on dark surface so the bar reads */
:root[data-theme="dark"] .bq-mobile-cta-bar {
  background: var(--bq-surface);
  border-top-color: rgba(255,255,255,0.10);
  box-shadow: 0 -10px 28px -6px rgba(0,0,0,0.45);
}