/* ========================================================
   King of Seal — V3 (Pearl/Silver/Navy · Apple-luxury Material)
   Type:    Space Grotesk display + Inter body + JetBrains Mono labels
   Palette: Pearl White Metallic backgrounds + Deep Navy text +
            Silver/Gunmetal accents + Bronze gold-leaf micro-accents.
            Echoes Adam's silver/blue marble shield logo.
   ======================================================== */

:root {
  /* === BACKGROUNDS === */
  --bg:           #F8F8FF;     /* Pearl White Metallic — primary page bg */
  --bg-soft:      #F5F7F9;     /* Cool off-white — section alternation */
  --surface:      #EDEDED;     /* Lexicon Quarter — card surfaces / pearl gradient base */
  --surface-2:    #FFFFFF;     /* Pure white — elevated cards */
  --surface-3:    #E8EBEE;     /* Cool grey — depressed/inset surfaces */

  /* === TEXT === */
  --text:         #1B3A5F;     /* Deep navy — primary text (matches logo wordmark) */
  --text-soft:    #36454F;     /* Charcoal Grey — body text */
  --muted:        #4A5764;     /* Darker slate — bumped Round 30 Phase 6 for WCAG AA (4.5:1 min) */
  --line:         #BFC5C5;     /* Cloud Grey — borders/dividers */
  --line-soft:    #D6DBDF;     /* Lighter line for subtle dividers */

  /* === BRAND BLUES (echoing logo marble shield) === */
  --navy:         #1B3A5F;     /* Deep navy — logo wordmark, primary brand */
  --navy-deep:    #0F2645;     /* Deeper navy — emphasis */
  --navy-mid:     #2D4A6E;     /* Mid navy — gradients */
  --navy-light:   #4A6B8E;     /* Lighter navy — subtle accents */

  /* === METALLIC SILVERS === */
  --silver:       #C0C0C0;     /* Silver Grey — primary metallic */
  --silver-light: #E0E0E5;     /* Light silver — highlights */
  --silver-dark:  #878681;     /* Titanium Silver — depth */
  --gunmetal:     #2C3539;     /* Gunmetal Metallic — primary CTA base */
  --pearl:        #F8F8FF;     /* Pearl White Metallic — shimmer highlight */

  /* === ACCENTS (used VERY sparingly, like crown gold leaf) === */
  --bronze:       #CD7F32;     /* Bronze — micro-accents only (icons, dividers) */
  --bronze-soft:  #D9A05B;     /* Bronze highlight for shimmer */
  --bronze-text:  #8B4513;     /* Saddle-brown bronze — usable as text on light bg (8.8:1 on pearl, AAA) */

  /* === BACKWARD-COMPAT ALIASES === */
  /* Legacy tokens — mapped to new palette so prior rules still work cleanly. */
  --gold:         var(--bronze);
  --gold-bright:  var(--bronze-soft);
  --electric:      var(--navy-mid);
  --electric-soft: var(--navy-light);
  --electric-deep: var(--navy-deep);

  /* === SHADOWS (2-layer ambient + key, top-left light source) === */
  --shadow-ambient:  0 2px 8px rgba(27, 58, 95, 0.06);
  --shadow-key:      0 8px 24px rgba(27, 58, 95, 0.10);
  --shadow-card:     0 2px 8px rgba(27, 58, 95, 0.06), 0 8px 24px rgba(27, 58, 95, 0.10);
  --shadow-elevated: 0 4px 12px rgba(27, 58, 95, 0.08), 0 16px 40px rgba(27, 58, 95, 0.12);
  --shadow-hover:    0 6px 16px rgba(27, 58, 95, 0.10), 0 24px 56px rgba(27, 58, 95, 0.16);
  --shadow-inset:    inset 0 1px 0 rgba(248, 248, 255, 0.6), inset 0 -1px 0 rgba(27, 58, 95, 0.08);
  --shadow-cta:      0 6px 18px rgba(15, 38, 69, 0.30), 0 2px 6px rgba(15, 38, 69, 0.18);
  --shadow-cta-hover:0 10px 28px rgba(15, 38, 69, 0.42), 0 4px 12px rgba(15, 38, 69, 0.24);

  /* === GRADIENTS (metallic surfaces, never flat) === */
  --grad-pearl-marble: linear-gradient(135deg, #F8F8FF 0%, #EDEDED 35%, #F5F7F9 70%, #E8EBEE 100%);
  --grad-silver-metal: linear-gradient(135deg, #E0E0E5 0%, #C0C0C0 50%, #878681 100%);
  --grad-navy-deep:    linear-gradient(135deg, #2D4A6E 0%, #1B3A5F 50%, #0F2645 100%);
  --grad-gunmetal-cta: linear-gradient(180deg, #3A4549 0%, #2C3539 50%, #1F2629 100%);
  --grad-shimmer:      linear-gradient(110deg, transparent 30%, rgba(248, 248, 255, 0.4) 50%, transparent 70%);
  --grad-marble-vein:  linear-gradient(135deg, #F8F8FF 0%, #BFC5C5 25%, #F5F7F9 50%, #C0C0C0 75%, #F8F8FF 100%);
  --grad-card-overlay: linear-gradient(135deg, rgba(248,248,255,0.6) 0%, transparent 50%, rgba(27,58,95,0.04) 100%);

  /* === LAYOUT (preserved) === */
  --container: 1280px;
  --gutter:    clamp(18px, 4.5vw, 56px);
  --radius:    18px;
  --radius-sm: 10px;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --nav-h:     74px;
  --nav-h-sm:  60px;
  --banner-h:  36px;
}
@media (max-width: 768px) {
  :root { --banner-h: 32px; }
}
body.banner-dismissed { --banner-h: 0px; }

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  background: var(--bg);
  /* Anchor jumps land below the sticky banner + scrolled nav, not behind it. */
  scroll-padding-top: calc(var(--banner-h) + var(--nav-h-sm) + 8px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Global marble-veining overlay — subtle pearl/silver noise on light bg */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(192, 192, 192, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 85%, rgba(45, 74, 110, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(248, 248, 255, 0.40), transparent 70%);
  opacity: 0.55;
}
main, .nav, .footer { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
sup, small { font-size: 0.55em; vertical-align: super; line-height: 0; font-weight: 500; }
em { font-style: italic; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--text); color: var(--bg); padding: 12px 16px; z-index: 1000; }
.skip:focus { left: 8px; top: 8px; }

/* Visually-hidden — accessible to screen readers, invisible visually */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== TYPE ===== */
.kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
}
.kicker--light { color: var(--gold-bright); }
.kicker__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--electric);
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(58,123,255,.7);
}

.sec-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0 0 18px;
  color: var(--text);
}
.sec-title em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, var(--electric) 0%, var(--pearl) 60%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  line-height: 1;
  padding: 0.1em 0.22em 0.18em 0.05em;
  margin: -0.1em -0.18em -0.18em -0.05em;
}
.sec-title--light { color: var(--text); }
.sec-title--light em {
  background: linear-gradient(135deg, var(--electric) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sec-lede {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 38ch;
  margin: 0;
}
.sec-lede--light { color: var(--text-soft); }

.sec-head { margin-bottom: 56px; max-width: 720px; }
/* Round 31 Phase 8: .sec-head--row was a 2-column row layout (heading left,
   intro paragraph right) that read inconsistently across pages. Per Kevin's
   preview walkthrough, all section intros now stack: kicker + heading + intro
   paragraph in a single left-aligned column with the same max-width as
   .sec-head. The class name is kept so existing HTML compiles cleanly. */
.sec-head--row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 720px;
  margin-bottom: 56px;
}
@media (max-width: 760px) {
  .sec-head--row { gap: 14px; margin-bottom: 36px; }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  border: 1.5px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  position: relative;
}
.btn--lg { padding: 18px 30px; font-size: 1rem; }
.btn:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }
.btn span { transition: transform .25s var(--ease); }
.btn:hover span { transform: translateX(3px); }

.btn--primary {
  background: linear-gradient(135deg, var(--electric) 0%, var(--navy-mid) 100%);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(58,123,255,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--electric) 100%);
  color: var(--bg);
  box-shadow: 0 14px 36px rgba(212,179,115,.4);
}
[data-magnetic] { will-change: transform; }

.btn--ghost {
  background: transparent;
  border-color: var(--text);
  color: var(--text);
}
.btn--ghost:hover { background: var(--text); color: var(--bg); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--gold);
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 3px;
  transition: gap .25s var(--ease), color .2s, border-color .2s;
}
.link-arrow:hover { gap: 14px; color: var(--electric-soft); border-color: var(--electric-soft); }

/* ===== NAV ===== */
.nav {
  position: sticky;
  top: var(--banner-h, 0px);
  z-index: 50;
  background: rgba(7, 7, 12, 0.72);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, height .25s var(--ease), background .25s;
  height: var(--nav-h);
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  height: var(--nav-h-sm);
  background: rgba(7, 7, 12, 0.9);
}

.nav__inner {
  /* Round 32 Phase 4: header bar now full viewport width with consistent
     side padding. Was constrained to max-width: var(--container) which left
     dead space on either side at wide screens while the floating CTA sat at
     the viewport edge. Now logo anchored at left padding edge, CTAs at right
     padding edge. */
  max-width: none;
  margin: 0;
  padding-inline: clamp(20px, 3vw, 48px);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Round 31 Phase 3: removed margin-right: auto (was pushing all nav items
     into a crammed cluster on the right). Logo now stays anchored left;
     nav__links flex-grows to fill the middle; nav__cta sits on the right. */
  flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.nav__logo {
  width: 52px; height: 52px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--surface-2);
  padding: 4px;
  border: 1px solid var(--line);
}
.nav__links {
  /* Round 31 Phase 3: flex-grow to fill horizontal space, centred within it */
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  gap: 28px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-soft);
}
.nav__links a {
  position: relative;
  padding: 6px 0;
  transition: color .2s;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links a:hover { color: var(--gold); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; /* Round 31 Phase 3: anchored right, doesn't compress */ }

/* =====================================================================
   ROUND 32 PHASE 3 — Nav dropdown (Grinding & Surface Prep)
   ===================================================================== */
.nav__dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__dropdown-trigger {
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .2s;
}
.nav__dropdown-trigger:hover { color: var(--gold); }
.nav__dropdown-trigger.is-active { color: var(--gold); font-weight: 600; }
.nav__chevron {
  display: inline-block;
  transition: transform .2s var(--ease);
  font-size: 0.8em;
}
.nav__dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--pearl);
  border: 1px solid var(--silver);
  border-radius: 12px;
  padding: 8px 0;
  min-width: 220px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 100;
}
.nav__dropdown:hover .nav__dropdown-panel,
.nav__dropdown:focus-within .nav__dropdown-panel,
.nav__dropdown.is-open .nav__dropdown-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown:hover .nav__chevron,
.nav__dropdown:focus-within .nav__chevron,
.nav__dropdown.is-open .nav__chevron {
  transform: rotate(180deg);
}
.nav__dropdown-panel a {
  display: block;
  padding: 10px 18px;
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav__dropdown-panel a:hover,
.nav__dropdown-panel a:focus-visible {
  background: var(--surface-2);
  color: var(--navy-deep);
  outline: none;
}

/* Mobile / tablet drawer — dropdown items appear nested, no overlay */
@media (max-width: 1000px) {
  .nav__dropdown { display: block; width: 100%; }
  .nav__dropdown-trigger { width: 100%; padding: 12px 0; text-align: left; justify-content: space-between; }
  .nav__dropdown-panel {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    background: none;
    padding: 0 0 8px 16px;
    min-width: 0;
    z-index: auto;
  }
  .nav__dropdown-panel a { padding: 8px 0; font-size: 0.94rem; }
  .nav__chevron { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__dropdown-panel, .nav__chevron { transition: none; }
}
.nav__phone {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav__phone:hover { color: var(--electric-soft); }
.dot--live {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--electric);
  box-shadow: 0 0 0 0 var(--electric);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 10px rgba(58,123,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(58,123,255,0); }
}

.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.nav__toggle span {
  width: 18px; height: 2px;
  background: var(--text);
  transition: transform .25s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1000px) { .nav__phone { display: none; } }
@media (max-width: 820px) {
  .nav__toggle { display: flex; }
  .nav__links {
    /* Drawer pinned below nav; height is intrinsic so the transform shift hides it
       reliably regardless of whether the parent .nav (with backdrop-filter) has
       become the containing block per modern spec.
       Top = banner-h + nav-h so drawer sits flush below the nav (banner-h is 0 once
       the banner is dismissed via body.banner-dismissed). */
    position: fixed;
    top: calc(var(--banner-h) + var(--nav-h));
    left: 0;
    right: 0;
    bottom: auto;
    background: var(--bg);
    flex-direction: column;
    padding: 30px var(--gutter);
    gap: 0;
    transform: translateY(-110%);
    transition: transform .35s var(--ease), visibility 0s linear .35s;
    border-bottom: 1px solid var(--line);
    visibility: hidden;
  }
  .nav__links.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .35s var(--ease), visibility 0s linear 0s;
  }
  .nav__links a {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.15rem;
    color: var(--text);
  }
  .nav__cta .btn { padding: 11px 18px; font-size: 0.9rem; }
}

/* ===== HERO — full-bleed photo overlay (primeslab-style) ===== */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  margin-top: calc(-1 * (var(--nav-h) + var(--banner-h)));
  padding-top: calc(var(--nav-h) + var(--banner-h));
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media picture,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__media img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 0.4s var(--ease);
  will-change: transform;
}

/* Dark gradient overlay so text stays readable — opacity stops reduced -0.12 each
   (was .55/.35/.78/.55/.10/.45) to lighten cumulative dark on mobile photo */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,7,12,.43) 0%, rgba(7,7,12,.23) 30%, rgba(7,7,12,.66) 100%),
    linear-gradient(90deg, rgba(7,7,12,.43) 0%, rgba(7,7,12,0) 50%, rgba(7,7,12,.33) 100%);
  pointer-events: none;
}

/* Subtle marble drift behind overlay — softer than v1 */
.hero__bg {
  position: absolute;
  inset: -10%;
  z-index: 2;
  background:
    radial-gradient(ellipse 60% 50% at 20% 25%, rgba(58, 123, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 45% at 80% 80%, rgba(212, 179, 115, 0.08), transparent 60%);
  filter: blur(60px);
  animation: marbleDrift 32s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
  opacity: 0.65;
  mix-blend-mode: screen;
}
@keyframes marbleDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-2%, 1%) scale(1.025); }
  100% { transform: translate(1.5%, -1.5%) scale(1.015); }
}
@media (prefers-reduced-motion: reduce) { .hero__bg { animation: none; } }

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(60px, 10vw, 120px) var(--gutter);
}
.hero__copy { max-width: 760px; }

.hero__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0 0 28px;
  color: var(--text);
  text-shadow: 0 2px 24px rgba(7,7,12,.5);
}
.hero__line { display: block; }
.hero__title em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, var(--electric) 0%, var(--pearl) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  line-height: 1;
  padding: 0.12em 0.24em 0.2em 0.05em;
  margin: -0.12em -0.2em -0.2em -0.05em;
}
.hero__sub {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: var(--text-soft);
  max-width: 52ch;
  margin: 0 0 36px;
  line-height: 1.62;
  text-shadow: 0 1px 16px rgba(7,7,12,.5);
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== 4-FEATURE STRIP ===== */
.features {
  padding: clamp(85px, 11vw, 140px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.feat {
  padding: 12px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform .35s var(--ease);
  will-change: transform;
}
.feat__icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--electric) 0%, var(--navy-mid) 100%);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(58,123,255,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.feat:nth-child(2) .feat__icon { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%); color: var(--bg); box-shadow: 0 10px 24px rgba(212,179,115,.3); }
.feat:nth-child(3) .feat__icon { background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-deep) 100%); color: var(--pearl); box-shadow: 0 10px 24px rgba(43,74,126,.4); }
.feat:nth-child(4) .feat__icon { background: linear-gradient(135deg, var(--pearl) 0%, var(--navy-mid) 100%); color: var(--bg); }
.feat h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text);
}
.feat p {
  font-size: 0.92rem;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 1000px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .feat { padding: 28px 20px; }
}
@media (max-width: 540px) {
  .features__grid { grid-template-columns: 1fr; gap: 1rem; }
  .feat { padding: 24px 0; }
}

/* ===== SERVICES ===== */
.services { padding: clamp(110px, 15vw, 190px) 0; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

/* Round 31 Phase 4 — 5-tile grid for the new homepage Services band */
.services__grid--5up {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}
@media (max-width: 1000px) {
  .services__grid--5up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .services__grid--5up { grid-template-columns: 1fr; }
}

.svc {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.svc:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  border-color: var(--electric);
}
.svc__num {
  position: absolute;
  top: 18px; left: 22px;
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--bg);
  padding: 7px 13px;
  border-radius: 999px;
  font-weight: 600;
}
.svc__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.svc__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.svc:hover .svc__media img { transform: scale(1.06); }

.svc__body { padding: 36px clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 18px; flex: 1; }
.svc__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1;
  color: var(--text);
}
.svc__body > p { margin: 0; color: var(--text-soft); font-size: 0.98rem; }

.svc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px dashed var(--line);
}
.svc__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.94rem;
  color: var(--text);
}
.svc__list li span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  background: var(--surface-2);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.svc__list li:last-child { border-bottom: 0; }

.svc__body .link-arrow { align-self: flex-start; margin-top: auto; }
.svc__related {
  margin: 12px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.6;
}
.svc__related a {
  color: var(--text-soft);
  border-bottom: 1px solid var(--line);
  transition: color .2s, border-color .2s;
}
.svc__related a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

@media (max-width: 880px) { .services__grid { grid-template-columns: 1fr; } }

/* ===== BENTO — uniform 3-up grid (primeslab-style) ===== */
.bento { padding: clamp(110px, 15vw, 190px) 0; }
.bento__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  perspective: 1200px;
}
.tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transform-style: preserve-3d;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
  will-change: transform;
}
.tile:hover {
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px var(--electric);
  border-color: var(--electric);
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
  transform: translateZ(0);
}
.tile:hover img { transform: scale(1.06); }

.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  z-index: 3;
}
.tile:hover::after { opacity: 1; }

.tile__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(7,7,12,.94) 70%);
  color: var(--text);
  transform: translateY(calc(100% - 56px));
  transition: transform .5s var(--ease);
  z-index: 2;
}
.tile:hover .tile__meta { transform: translateY(0); }
.tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.1);
  color: var(--text);
  margin-bottom: 8px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,.12);
}
.tag--accent {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--bg);
  border-color: transparent;
}
.tile__meta h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.tile__meta p {
  font-size: 0.82rem;
  color: var(--text-soft);
  margin: 0;
}

@media (max-width: 1000px) {
  .bento__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .bento__grid { grid-template-columns: repeat(2, 1fr); }
  .tile__meta { transform: translateY(0); }
}

/* ===== BEFORE/AFTER ===== */
.ba-section { padding: clamp(110px, 15vw, 190px) 0; }
.ba { margin: 0; max-width: 1200px; margin-inline: auto; }
.ba__slider {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  cursor: ew-resize;
}
.ba__slider.is-dragging { cursor: grabbing; }
.ba__slider.is-dragging .ba__handle { cursor: grabbing; transform: translate(-50%, -50%) scale(1.12); }
.ba__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.ba__img--before { clip-path: inset(0 50% 0 0); will-change: clip-path; }
.ba__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--electric), var(--gold));
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
  will-change: left;
  box-shadow: 0 0 12px rgba(58,123,255,.6);
}
.ba__handle {
  position: absolute;
  top: 50%; left: 50%;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
  z-index: 5;
  box-shadow: 0 10px 28px rgba(212,179,115,.5), 0 0 0 4px rgba(7,7,12,.5), inset 0 1px 0 rgba(255,255,255,.4);
  border: 0;
  will-change: left;
}
.ba__lbl {
  position: absolute;
  top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(7,7,12,.85);
  backdrop-filter: blur(10px);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 4;
  pointer-events: none;
  border: 1px solid var(--line);
  font-weight: 600;
}
.ba__lbl--l { left: 16px; }
.ba__lbl--r { right: 16px; background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--bg); border-color: transparent; }
.ba figcaption {
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
}

/* ===== PROCESS ===== */
.process {
  padding: clamp(110px, 15vw, 190px) 0;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.process::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 0% 0%, rgba(58,123,255,.18), transparent 60%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(212,179,115,.10), transparent 60%);
  pointer-events: none;
}
.process .container { position: relative; z-index: 1; }
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.stp {
  padding: 32px 24px 32px 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stp:last-child { border-right: 0; }
.stp:not(:first-child) { padding-left: 24px; }
.stp__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.stp__num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold) 0%, var(--electric) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stp__when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.stp h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--text);
}
.stp p { margin: 0; font-size: 0.94rem; color: var(--text-soft); }

@media (max-width: 880px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stp:nth-child(2n) { border-right: 0; }
}
@media (max-width: 540px) {
  .steps { grid-template-columns: 1fr; }
  .stp { border-right: 0; padding: 28px 0; }
}

/* ===== BIG QUOTE ===== */
.quote-sec { padding: clamp(110px, 15vw, 190px) 0; }
.bigquote { position: relative; max-width: 980px; margin: 0 auto; }
.bigquote__mark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(8rem, 18vw, 14rem);
  line-height: 0.7;
  background: linear-gradient(135deg, var(--gold) 0%, var(--electric) 60%, var(--pearl) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: block;
  margin-bottom: -16px;
}
.bigquote blockquote {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 36px;
  color: var(--text);
}
.bigquote__by {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  flex-wrap: wrap;
}
.bigquote__by strong { display: block; font-weight: 600; font-size: 1.05rem; color: var(--text); }
.bigquote__by span { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; }
.rating {
  font-family: 'Space Grotesk', sans-serif !important;
  color: var(--gold) !important;
  font-size: 1.1rem !important;
  font-weight: 600;
}
.rating em { color: var(--muted); font-size: 0.7em; font-style: normal; }

/* ===== ABOUT ===== */
.about {
  padding: clamp(110px, 15vw, 190px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.about__media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.about__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 30% center;
}
.about__copy p { color: var(--text-soft); margin: 0 0 18px; font-size: 1.02rem; }
.about__chips {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.about__chips li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.about__chips li em { color: var(--gold); font-style: normal; }
@media (max-width: 880px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 480px; aspect-ratio: 4/3; }
}

/* ===== CONTACT ===== */
.contact {
  padding: clamp(110px, 15vw, 190px) 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(58,123,255,.2), transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(212,179,115,.12), transparent 60%);
  pointer-events: none;
}
.contact .container { position: relative; z-index: 1; }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.contact__lede { color: var(--text-soft); font-size: 1.05rem; max-width: 38ch; margin: 0 0 36px; }

.contact__methods { display: grid; gap: 0; border-top: 1px solid var(--line); margin-bottom: 28px; }
.method {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: baseline;
  gap: 20px;
  transition: padding-left .25s var(--ease);
}
a.method:hover { padding-left: 12px; }
.method__lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.method__val {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color .2s;
}
a.method:hover .method__val { color: var(--gold); }

.socials { display: flex; gap: 16px; }
.socials a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.socials a:hover { color: var(--gold); border-color: var(--gold); }

.form {
  position: relative;
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  border: 1px solid var(--line);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  font-size: 16px;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(58,123,255,.22);
}
.form__submit { align-self: flex-start; margin-top: 8px; }
.form__note { font-size: 0.82rem; color: var(--muted); margin: 0; }
.form__success {
  background: rgba(58,123,255,.1);
  border: 1px solid rgba(58,123,255,.3);
  color: var(--text);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin: 0;
  font-size: 0.92rem;
}
.form__success a { color: var(--electric-soft); border-bottom: 1px solid var(--electric-soft); }

@media (max-width: 880px) {
  .contact__grid { grid-template-columns: 1fr; }
  .method { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .form__row { grid-template-columns: 1fr; }
}

/* ===== FOOTER ===== */
.footer {
  background: var(--navy-deep);
  color: var(--text-soft);
  padding: 70px 0 0;
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
}
.footer__brand h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  margin: 14px 0 8px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.footer__brand p { margin: 0; font-size: 0.94rem; max-width: 32ch; }
.footer__logo {
  width: 64px; height: 64px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--surface-2);
  padding: 6px;
  border: 1px solid var(--line);
}
.footer h3 {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 0.94rem; }
.footer address { font-style: normal; }
.footer a { transition: color .2s; }
.footer a:hover { color: var(--gold-bright); }

.footer__bar {
  border-top: 1px solid rgba(245,240,229,.1);
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 0.78rem;
  font-family: 'JetBrains Mono', monospace;
  flex-wrap: wrap;
}
.footer__bar p { margin: 0; }
.footer__bar em { color: var(--gold); font-style: normal; opacity: .8; }

@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 36px; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* ===== MOBILE STICKY BAR ===== */
.mob-bar {
  display: none;
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 80;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  gap: 6px;
  box-shadow: 0 14px 36px rgba(0,0,0,.6);
  animation: slideUp .4s var(--ease);
}
@keyframes slideUp {
  from { transform: translateY(120%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.mob-bar.is-visible { display: flex; }
.mob-bar__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  font-family: inherit;
}
.mob-bar__btn--call { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--bg); }
.mob-bar__btn--quote { background: transparent; color: var(--text); }
@media (min-width: 760px) { .mob-bar { display: none !important; } }

/* ===== DESKTOP STICKY QUOTE CTA (phase 6.6 + 28.5 refactor) =====
   Pill-shaped "Get a quote" button, bottom-right on desktop only (>=1001px).
   Hidden until scrolled past first 100vh so it does not cover hero CTAs.
   z-index 90 sits above page content and the mob-bar (80) but below
   the lightbox (200) so it does not punch through modals.
   Click navigates to /#contact (same anchor as every other primary
   "Get a quote" CTA on the site). */
.desk-call {
  position: fixed;
  bottom: 32px;
  right: 56px;          /* Round 30 Phase 10: pulled inward from edge (was 24px) */
  height: 62px;         /* Round 30 Phase 10: bigger (was 52px) */
  padding: 0 30px;      /* Round 30 Phase 10: more horizontal breathing (was 0 22px) */
  border-radius: 9999px;
  background: var(--navy);
  color: var(--pearl);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;     /* Round 30 Phase 10: bolder (was 600) */
  font-size: 1rem;      /* Round 30 Phase 10: bumped (was 0.95rem) */
  letter-spacing: 0.01em;
  box-shadow: 0 14px 32px rgba(15,38,69,.45);  /* Round 30 Phase 10: stronger shadow */
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.desk-call.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.desk-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15,38,69,.45);
}
.desk-call:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.desk-call__icon { width: 22px; height: 22px; flex-shrink: 0; }  /* Round 30 Phase 10: slightly bigger icon */
.desk-call__label { white-space: nowrap; }
@media (min-width: 1001px) {
  .desk-call { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .desk-call { transition: none; }
  .desk-call:hover { transform: none; }
}

/* ===== LIGHTBOX ===== */
.lb {
  position: fixed;
  inset: 0;
  background: rgba(7,7,12,.97);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity .25s;
}
/* When the [hidden] attribute is present, the modal must NOT render — otherwise
   the fixed full-viewport box with z-index:200 captures every click on the page. */
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0,0,0,.8);
}
.lb__close {
  position: absolute;
  top: 18px; right: 22px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--bg);
  font-size: 30px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}

/* ===== REVEAL ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

::selection { background: var(--electric); color: var(--text); }

/* ===== MOBILE POLISH ===== */
@media (max-width: 820px) {
  :root { --gutter: 18px; }

  /* Section spacing — +33% for calmer breathing room */
  .services, .bento, .ba-section, .process, .quote-sec, .about, .contact, .features, .faq, .areas {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .sec-head { margin-bottom: 40px; }

  /* Hero — padding-top clears full nav height (74px), not scrolled height (60px),
     to prevent kicker/title from rendering under the translucent nav.
     Also reserves --banner-h so content doesn't slide under the urgency banner. */
  .hero { min-height: 92vh; padding-top: calc(var(--nav-h) + var(--banner-h)); }
  /* dvh fixes iOS Safari address-bar jump; falls back to vh on older browsers */
  @supports (min-height: 100dvh) {
    .hero { min-height: 92dvh; }
  }
  .hero__title {
    font-size: clamp(2.4rem, 12vw, 3.6rem);
    line-height: 0.96;
    margin-bottom: 18px;
  }
  .hero__sub { font-size: 1rem; line-height: 1.62; margin-bottom: 26px; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .hero__cta .btn { justify-content: center; padding: 15px 22px; }
  .hero__inner { padding: clamp(80px, 14vw, 120px) var(--gutter); }

  /* Section titles */
  .sec-title { font-size: clamp(2rem, 9vw, 3rem); line-height: 0.98; }
  .sec-lede { font-size: 0.98rem; }

  /* Features strip — stack on mobile cleanly */
  .feat { gap: 10px; }
  .feat h3 { font-size: 1.05rem; }
  .feat p { font-size: 0.88rem; }
  .feat__icon { width: 46px; height: 46px; border-radius: 12px; }

  /* Services */
  .svc__body { padding: 28px 22px 30px; gap: 14px; }
  .svc__title { font-size: 1.55rem; }
  .svc__body > p { font-size: 0.94rem; }
  .svc__num { top: 14px; left: 16px; font-size: 0.72rem; padding: 5px 10px; }

  /* Bento / work */
  .bento__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tile__meta { transform: translateY(0); padding: 12px 14px 11px; background: linear-gradient(180deg, transparent, rgba(7,7,12,.94) 50%); }
  .tile__meta h3 { font-size: 0.95rem; }
  .tile__meta p { font-size: 0.76rem; }
  .tile { transform: none !important; border-radius: 12px; }

  /* Before/after */
  .ba__slider { aspect-ratio: 4 / 3; border-radius: 12px; }
  .ba__handle { width: 46px; height: 46px; }
  .ba__lbl { font-size: 0.62rem; padding: 5px 10px; top: 12px; }
  .ba__lbl--l { left: 12px; } .ba__lbl--r { right: 12px; }
  .ba figcaption { font-size: 0.72rem; text-align: left; margin-top: 14px; }

  /* Process */
  .stp { padding: 24px 0 4px; }
  .stp__num { font-size: 1.9rem; }
  .stp h3 { font-size: 1.18rem; }
  .stp p { font-size: 0.9rem; }

  /* Big quote */
  .bigquote__mark { font-size: clamp(6rem, 22vw, 8rem); margin-bottom: -8px; }
  .bigquote blockquote { font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1.25; margin-bottom: 24px; }
  .bigquote__by { padding-top: 16px; gap: 12px; }
  .bigquote__by strong { font-size: 1rem; }

  /* About */
  .about__grid { gap: 28px; }
  .about__media { max-width: 100%; aspect-ratio: 4/3; }
  .about__copy p { font-size: 0.98rem; }
  .about__chips li { font-size: 0.68rem; padding: 7px 12px; }

  /* Contact */
  .contact__lede { font-size: 0.98rem; margin-bottom: 24px; }
  .form { padding: 24px 20px; gap: 14px; border-radius: 14px; }
  .form__row { grid-template-columns: 1fr; }
  .field input, .field select, .field textarea { font-size: 16px; padding: 13px; }
  .form__submit { width: 100%; justify-content: center; }

  /* Footer */
  .footer { padding-top: 50px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; padding-bottom: 36px; }
  .footer__bar-inner { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }

  /* Sticky bar space — only when the mob-bar is actually rendered (index only) */
  body:has(#mobBar) { padding-bottom: 78px; }

  /* Disable heavy marble gradient on mobile for perf */
  .hero__bg { animation: none; filter: blur(30px); }
}

@media (max-width: 480px) {
  .features__grid { grid-template-columns: 1fr; gap: 1rem; }
  .feat { padding: 22px 0; }
  .bento__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .footer__grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Prevent any accidental horizontal overflow */
html, body { overflow-x: hidden; max-width: 100%; }

/* Touch hover fixes */
@media (hover: none) {
  .svc:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .svc:hover .svc__media img { transform: none; }
  .tile:hover img { transform: none; }
  .tile:hover::after { opacity: 0; }
  .tile:hover { border-color: var(--line); box-shadow: none; }
  .btn:hover span { transform: none; }
}

/* ========================================================
   SERVICE AREAS — visible suburb listing for local-pack SEO
   ======================================================== */
.areas {
  padding: clamp(110px, 15vw, 190px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.areas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-bottom: 36px;
}
.area {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 24px;
  transition: border-color .25s var(--ease);
}
.area:hover { border-color: var(--electric); }
.area__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--text);
}
.area__suburbs {
  font-size: 0.94rem;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.7;
}
.area__suburbs span { color: var(--text); }
.areas__cta {
  text-align: center;
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.areas__cta .link-arrow { margin-left: 6px; }
@media (max-width: 720px) {
  .areas__grid { gap: 16px; }
  .area { padding: 18px; }
  .area__title { font-size: 1rem; }
  .area__suburbs { font-size: 0.88rem; }
}

/* ========================================================
   FAQ — matches design system, native <details> semantics
   ======================================================== */
.faq {
  padding: clamp(110px, 15vw, 190px) 0;
  background: var(--bg);
  position: relative;
}
.faq__list {
  display: grid;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
}
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq__item[open] {
  border-color: var(--electric);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--electric) 12%, transparent);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color .2s, background .25s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: var(--surface-2); color: var(--gold); }
.faq__item summary:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: -2px;
}
.faq__q { flex: 1; }
.faq__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  position: relative;
  flex-shrink: 0;
  transition: transform .35s var(--ease), border-color .25s, background .25s;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: transform .35s var(--ease), background .2s;
}
.faq__icon::before { width: 12px; height: 1.5px; }
.faq__icon::after  { width: 1.5px; height: 12px; }
.faq__item[open] .faq__icon {
  background: linear-gradient(135deg, var(--electric), var(--navy-mid));
  border-color: var(--electric);
}
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after { background: var(--text); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a {
  padding: 0 24px 22px;
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  animation: faqOpen .35s var(--ease);
}
.faq__a p { margin: 0; }
.faq__a p + p { margin-top: 12px; }
.faq__a .faq__related {
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.6;
}
.faq__a .faq__related a {
  color: var(--text-soft);
  border-bottom: 1px solid var(--line);
  transition: color .2s, border-color .2s;
}
.faq__a .faq__related a:hover {
  color: var(--gold);
  border-color: var(--gold);
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq__a { animation: none; }
  .faq__icon, .faq__icon::before, .faq__icon::after { transition: none; }
}
/* Round 31 Phase 9: FAQ service-specific links restyled as proper buttons.
   Previously a single <p class="faq__cta"> with three inline <a class="link-arrow">
   tucked away — too small for a primary affordance. Now a stacked layout: a
   monospace intro label above three pill buttons. Mobile stacks the buttons. */
.faq__cta {
  margin: 56px 0 0;
  text-align: center;
}
.faq__cta-intro {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.faq__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.faq__cta-buttons .btn.faq__cta-btn {
  min-width: 200px;
  padding: 14px 22px;
  justify-content: center;
  font-size: 0.92rem;
}
@media (max-width: 720px) {
  .faq__cta-buttons { flex-direction: column; align-items: stretch; }
  .faq__cta-buttons .btn.faq__cta-btn { width: 100%; min-width: 0; }
}
@media (max-width: 720px) {
  .faq__item summary { padding: 18px 18px; font-size: 0.98rem; gap: 14px; }
  .faq__a { padding: 0 18px 18px; font-size: 0.94rem; }
}

/* ========================================================
   FORM — honeypot, error states, submit spinner
   ======================================================== */

/* Honeypot — visually hidden but accessible to bots */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Per-field error state — palette: gold = warning */
.field__err {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  margin-top: 2px;
  min-height: 0;
}
.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}
.field--invalid input:focus,
.field--invalid select:focus,
.field--invalid textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent);
}

/* Submit button — labels swap with loading state */
.form__submit { position: relative; min-width: 200px; justify-content: center; }
/* Restore original "arrow-only slides on hover" — the label and spinner stay put */
.btn:hover .form__submit-label,
.btn:hover .form__submit-spinner { transform: none; }
.form__submit-spinner {
  display: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  /* Translucent pearl ring — visible on both blue and gold gradient states */
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-top-color: var(--text);
  animation: spin .7s linear infinite;
}
.form__submit.is-loading {
  pointer-events: none;
  opacity: 0.85;
}
.form__submit.is-loading .form__submit-label { opacity: 0.6; }
.form__submit.is-loading .form__submit-arrow { display: none; }
.form__submit.is-loading .form__submit-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .form__submit-spinner { animation: none; }
}

/* Form error banner — palette: gold = warning */
.form__error {
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--text);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin: 0;
  font-size: 0.92rem;
}
.form__error a { color: var(--gold-bright); border-bottom: 1px solid var(--gold-bright); }

/* Stronger keyboard focus rings everywhere */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 3px;
  border-radius: 4px;
}
.nav__links a:focus-visible {
  outline-offset: 6px;
}
.tile:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 4px;
}

/* ========================================================
   LEGAL / 404 PAGES — shared minimal prose layout
   ======================================================== */
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 100px) var(--gutter) clamp(80px, 10vw, 120px);
  position: relative;
  z-index: 1;
}
.page__kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.page h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  color: var(--text);
}
.page h1 em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, var(--electric) 0%, var(--pearl) 60%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin: 36px 0 14px;
  color: var(--text);
}
.page p, .page li {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.65;
}
.page p { margin: 0 0 14px; }
.page ul { padding-left: 22px; margin: 0 0 14px; }
.page a { color: var(--electric-soft); border-bottom: 1px solid var(--electric-soft); }
.page a:hover { color: var(--gold); border-color: var(--gold); }
.page__updated {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 32px;
  letter-spacing: 0.04em;
}
.page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}
.page__back:hover { color: var(--electric-soft); border-color: var(--electric-soft); }
.page__phone {
  color: var(--gold-bright);
  border-bottom: 1px solid var(--gold-bright);
  font-weight: 600;
}
.page__phone:hover { color: var(--electric-soft); border-color: var(--electric-soft); }

/* Centred-hero page layout — used by 404 and thank-you */
.notfound,
.thanks {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px var(--gutter);
}
.notfound h1,
.thanks h1 {
  font-size: clamp(4rem, 12vw, 9rem);
  margin: 0 0 12px;
}
.notfound p,
.thanks p {
  color: var(--text-soft);
  font-size: 1.1rem;
  margin: 0 0 32px;
  max-width: 38ch;
}
.notfound__cta,
.thanks__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* =====================================================================
   HERO VIDEO + MOBILE STATIC POSTER (added Session 1)
   ===================================================================== */
.hero__video,
.hero__photo-mobile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.hero__video {
  object-fit: cover;
  object-position: center;
  background: var(--bg);
}
.hero__photo-mobile { display: none; }
.hero__photo-mobile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 768px) {
  .hero__video { display: none; }
  .hero__photo-mobile { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__photo-mobile { display: block; }
}

/* =====================================================================
   URGENCY BANNER (sticky above nav, dismissable) — Session 1
   ===================================================================== */
.banner {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  border-bottom: 1px solid var(--surface-3);
  color: var(--text-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.banner.is-dismissed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.banner__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 9px 24px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}
.banner__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 60%, transparent);
  flex-shrink: 0;
}
.banner__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner__close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  /* WCAG 2.5.5 — 44x44 minimum tap target */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.banner__close:hover,
.banner__close:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--text-soft) 15%, transparent);
  outline: none;
}

@media (max-width: 768px) {
  .banner { font-size: 0.72rem; }
  .banner__inner { padding: 5px 48px 5px 16px; min-height: 32px; }
  /* Keep 44x44 tap target on mobile too */
  .banner__close { right: 2px; font-size: 1.2rem; }
}
@media (max-width: 540px) {
  /* Drop the optional trailing clause so the primary message never truncates
     mid-word on narrow phones (iPhone SE, Android baseline). */
  .banner__opt { display: none; }
}

/* =====================================================================
   WATCH THE WORK — 3-up portrait video tiles — Session 1
   ===================================================================== */
.watch { padding: clamp(90px, 12vw, 150px) 0; background: var(--bg); }
.watch .sec-head { margin-bottom: clamp(40px, 5vw, 64px); }

.watch__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  max-width: 1100px;
  margin: 0 auto;
}
.watch__tile {
  position: relative;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--surface-3);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 9 / 16;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  font-family: inherit;
  color: var(--text);
}
.watch__tile:hover,
.watch__tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent);
  outline: none;
}
.watch__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, opacity 0.25s ease;
}
.watch__tile:hover img,
.watch__tile:focus-visible img { transform: scale(1.04); opacity: 0.78; }

.watch__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.watch__tile:hover .watch__play,
.watch__tile:focus-visible .watch__play {
  background: var(--gold);
  color: var(--bg);
  transform: translate(-50%, -50%) scale(1.08);
}
.watch__play svg { margin-left: 3px; }

.watch__cap {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  padding: 6px 10px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 900px) {
  .watch__grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* =====================================================================
   LIGHTBOX VIDEO MODE — Session 1
   ===================================================================== */
.lb__video {
  max-width: min(92vw, 540px);
  max-height: 88vh;
  width: auto;
  height: auto;
  display: none;
  background: var(--bg);
  border-radius: 8px;
}
.lb.is-video .lb__video { display: block; }
.lb.is-video .lb__img { display: none; }

/* =====================================================================
   ADAM — owner section (Session 2)
   ===================================================================== */
.adam {
  padding: clamp(110px, 15vw, 190px) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.adam::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(212,179,115,.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(58,123,255,.10), transparent 60%);
  pointer-events: none;
}
.adam .container { position: relative; z-index: 1; }
.adam__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.adam__media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.adam__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.adam__copy p {
  color: var(--text-soft);
  margin: 0 0 18px;
  font-size: 1.02rem;
}
.adam__copy .adam__lede {
  color: var(--text);
  font-size: 1.12rem;
  margin-bottom: 22px;
}
.adam__chips {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.adam__chips li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.adam__callout {
  margin: 8px 0 28px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}
.adam__callout h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
}
.adam__callout ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.adam__callout li {
  color: var(--text-soft);
  font-size: 0.96rem;
  padding-left: 20px;
  position: relative;
}
.adam__callout li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
@media (max-width: 880px) {
  .adam__grid { grid-template-columns: 1fr; }
  .adam__media { max-width: 480px; aspect-ratio: 4/5; }
}

/* =====================================================================
   WHY-FAIL — educational section (Session 2)
   ===================================================================== */
.whyfail {
  padding: clamp(110px, 15vw, 190px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.whyfail__intro {
  max-width: 70ch;
  margin: 0 auto 56px;
  text-align: left;
}
.whyfail__intro p {
  color: var(--text-soft);
  font-size: 1.06rem;
  margin: 0 0 16px;
}
.whyfail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 44px);
  max-width: 880px;
  margin: 0 auto;
}
.whyfail__block {
  padding: clamp(28px, 4vw, 40px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
}
.whyfail__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin: 0 0 10px;
}
.whyfail__block h3 {
  margin: 0 0 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  line-height: 1.15;
  color: var(--text);
}
.whyfail__block p {
  color: var(--text-soft);
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.6;
}
.whyfail__block p:last-child { margin-bottom: 0; }
.whyfail__how {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--surface-2);
  border-left: 3px solid var(--electric);
  border-radius: var(--radius-sm);
}
.whyfail__how strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--electric-soft);
  margin-bottom: 6px;
}
.whyfail__how p {
  color: var(--text);
  margin: 0;
  font-size: 0.96rem;
}
.whyfail__close {
  max-width: 70ch;
  margin: 56px auto 0;
  text-align: center;
}
.whyfail__close p {
  color: var(--text);
  font-size: 1.1rem;
  font-style: italic;
  margin: 0 0 24px;
}
.whyfail__close .btn { margin-top: 8px; }

/* =====================================================================
   AREAS — regional cards (Session 2 enrichment)
   ===================================================================== */
.area--region {
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.area--region .area__title {
  font-size: 1.15rem;
  margin: 0 0 4px;
}
.area--region .area__copy {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.55;
}
.area--region .area__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.area--region .area__chips li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.area--region .area__cta {
  margin-top: auto;
  padding-top: 6px;
}
.areas__nearby {
  text-align: center;
  margin: 32px auto 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* =====================================================================
   TRUST BAND (Session 2)
   ===================================================================== */
.trustband {
  padding: clamp(40px, 6vw, 72px) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trustband__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.trust-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.trust-card__icon {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--electric) 0%, var(--electric-deep) 100%);
  color: var(--text);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(58,123,255,.25);
}
.trust-card:nth-child(2n) .trust-card__icon {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: var(--bg);
  box-shadow: 0 6px 16px rgba(212,179,115,.25);
}
.trust-card__lbl {
  font-size: 0.94rem;
  color: var(--text);
  line-height: 1.3;
}
.trust-card__lbl em {
  font-style: normal;
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

/* =====================================================================
   AFTERCARE — Session 2
   ===================================================================== */
.aftercare {
  padding: clamp(110px, 15vw, 190px) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.aftercare__intro {
  max-width: 70ch;
  margin: 0 auto 56px;
}
.aftercare__intro p {
  color: var(--text-soft);
  font-size: 1.06rem;
  margin: 0;
}
.aftercare__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.aftercare__card {
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.aftercare__card h3 {
  margin: 0 0 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text);
}
.aftercare__card p {
  color: var(--text-soft);
  margin: 0 0 14px;
  font-size: 0.96rem;
  line-height: 1.6;
}
.aftercare__card p:last-child { margin-bottom: 0; }
.aftercare__card strong {
  color: var(--gold);
  font-weight: 600;
}
.aftercare__cta {
  margin: 48px auto 0;
  text-align: center;
  color: var(--text-soft);
  font-size: 1rem;
}

/* =====================================================================
   PROCESS — quote-day callout (Session 2)
   ===================================================================== */
.process__quote-day {
  margin: 48px auto 0;
  max-width: 70ch;
  padding: 24px 28px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}
.process__quote-day h3 {
  margin: 0 0 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.process__quote-day p {
  color: var(--text-soft);
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
}

.bento__intro {
  max-width: 70ch;
  margin: -16px 0 36px;
}
.bento__intro p {
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}

/* =====================================================================
   SESSION 3 — multi-page restructure additions
   ===================================================================== */

/* Active nav state (current page) */
.nav__links a.is-active { color: var(--gold); }
.nav__links a.is-active::after { transform: scaleX(1); }

/* Hide nav__phone earlier so 7-item nav fits */
@media (max-width: 1100px) { .nav__phone { display: none; } }

/* Move burger breakpoint up to 960 for 7-item nav comfort */
@media (max-width: 960px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed;
    top: calc(var(--banner-h) + var(--nav-h));
    left: 0;
    right: 0;
    bottom: auto;
    background: var(--bg);
    flex-direction: column;
    padding: 30px var(--gutter);
    gap: 0;
    transform: translateY(-110%);
    transition: transform .35s var(--ease), visibility 0s linear .35s;
    border-bottom: 1px solid var(--line);
    visibility: hidden;
    max-height: calc(100vh - var(--banner-h) - var(--nav-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav__links.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .35s var(--ease), visibility 0s linear 0s;
  }
  .nav__links a {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.1rem;
    color: var(--text);
  }
  .nav__links a.is-active { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 14%, transparent), transparent); padding-left: 12px; margin-left: -12px; padding-right: 12px; margin-right: -12px; }
  .nav__cta .btn { padding: 11px 16px; font-size: 0.88rem; }
}

/* On very narrow screens, hide the "Get a quote" header CTA — burger has Contact */
@media (max-width: 540px) {
  .nav__cta .btn { display: none; }
}

/* =====================================================================
   BREADCRUMB
   ===================================================================== */
.breadcrumb {
  padding: clamp(20px, 3vw, 28px) 0 clamp(8px, 1.5vw, 14px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: var(--line);
}
.breadcrumb a { color: var(--text-soft); transition: color .2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current="page"] { color: var(--text); }

/* =====================================================================
   SERVICE PAGE HERO (svc-hero)
   ===================================================================== */
.page--service { background: var(--bg); }
.svc-hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 110px);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.svc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(212,179,115,.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(58,123,255,.08), transparent 60%);
  pointer-events: none;
}
.svc-hero .container { position: relative; z-index: 1; }
.svc-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.svc-hero__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 14px 0 24px;
  color: var(--text);
}
.svc-hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.svc-hero__sub {
  color: var(--text-soft);
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 28px;
}
.svc-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.svc-hero__media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.svc-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 880px) {
  .svc-hero__grid { grid-template-columns: 1fr; }
  .svc-hero__media { max-width: 480px; aspect-ratio: 4/3; order: -1; margin: 0 auto; }
}

/* =====================================================================
   SUB-SERVICES grid (waterproofing/spray-crete sub specialties)
   ===================================================================== */
.subsvc {
  padding: clamp(70px, 10vw, 130px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.subsvc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.5vw, 26px);
}
.subsvc__card {
  padding: clamp(22px, 3vw, 32px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s, transform .2s var(--ease);
}
.subsvc__card:hover { border-color: var(--electric); transform: translateY(-2px); }
.subsvc__card h3 {
  margin: 0 0 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.subsvc__card h3 span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.subsvc__card p {
  color: var(--text-soft);
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
}

/* =====================================================================
   FINISHES grid (epoxy)
   ===================================================================== */
.finishes {
  padding: clamp(70px, 10vw, 130px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.finishes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.finish-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s var(--ease);
}
.finish-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.finish-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.finish-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.finish-card__body { padding: clamp(18px, 2.5vw, 26px); }
.finish-card__body h3 {
  margin: 0 0 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--text);
}
.finish-card__body p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* =====================================================================
   EXPLAIN block (spray crete what-is)
   ===================================================================== */
.explain {
  padding: clamp(70px, 10vw, 130px) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.explain__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.explain__card {
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.explain__card h3 {
  margin: 0 0 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--text);
}
.explain__card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* =====================================================================
   CROSS-SELL block (3 service cards on bottom of pages)
   ===================================================================== */
.cross-sell {
  padding: clamp(64px, 9vw, 120px) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.cross-sell__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}
.cross-sell__card {
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s, transform .25s var(--ease);
  display: block;
}
.cross-sell__card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}
.cross-sell__lbl {
  margin: 0 0 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  font-weight: 500;
}
.cross-sell__card p:last-child {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* =====================================================================
   CTA BAND (bottom of service pages)
   ===================================================================== */
.cta-band {
  padding: clamp(64px, 9vw, 110px) 0;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-top: 1px solid var(--line);
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: center;
}
.cta-band h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 8px;
}
.cta-band p { margin: 0; color: var(--text-soft); font-size: 1.02rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 720px) {
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band__actions { justify-content: flex-start; }
}

/* =====================================================================
   ROUND 29 — TRUST STRIP (3-line, sits under hero + in cta-band centre)
   ===================================================================== */
.trust-strip {
  padding: clamp(16px, 2.5vw, 28px) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
}
.trust-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  flex-shrink: 0;
}
.trust-strip__text em {
  font-style: normal;
  color: var(--muted);
  font-weight: 400;
}
@media (max-width: 720px) {
  .trust-strip__list { flex-direction: column; align-items: flex-start; gap: 12px; }
  .trust-strip__item { font-size: 0.92rem; }
}

/* =====================================================================
   ROUND 29 — FEATURED WORK (homepage 4-tile lean projects band)
   Reuses .tile, .tile__meta, .tag from the bento system for tile chrome.
   ===================================================================== */
.featured-work {
  padding: clamp(85px, 11vw, 140px) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.featured-work__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 4vw, 40px);
  perspective: 1200px;
}
.featured-work__more {
  margin-top: clamp(28px, 4vw, 44px);
  text-align: center;
  color: var(--text-soft);
  font-size: 0.95rem;
}
@media (max-width: 1000px) { .featured-work__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .featured-work__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   ROUND 29 — CTA BAND --TRUST variant (3-column: copy | trust | actions)
   ===================================================================== */
.cta-band--trust .cta-band__inner {
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.cta-band--trust .cta-band__trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: flex-start;
}
.cta-band--trust .cta-band__trust .trust-strip__item {
  font-size: 0.88rem;
}
@media (max-width: 960px) {
  .cta-band--trust .cta-band__inner { grid-template-columns: 1fr 1fr; }
  .cta-band--trust .cta-band__trust { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: clamp(12px, 2.5vw, 24px); }
}
@media (max-width: 720px) {
  .cta-band--trust .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band--trust .cta-band__trust { flex-direction: column; }
}

/* =====================================================================
   AREAS MINI (home + chip-list summary)
   ===================================================================== */
.areas--mini { padding: clamp(70px, 10vw, 130px) 0; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.areas-mini__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.areas-mini__chips li {
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}
.areas-mini__chips strong { display: block; color: var(--text); margin-bottom: 2px; font-weight: 600; }
.areas-mini__more { margin: 32px 0 0; color: var(--muted); font-size: 0.95rem; }

/* =====================================================================
   BENTO FILTERS (projects page)
   ===================================================================== */
.bento__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 32px;
}
.bento__filter {
  padding: 10px 18px;
  background: var(--surface);
  color: var(--text-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  min-height: 44px;
}
.bento__filter:hover { color: var(--gold); border-color: var(--gold); }
.bento__filter.is-active {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: var(--bg);
  border-color: transparent;
}
.bento__filter:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
}
.tile.is-hidden { display: none; }
.bento__empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  margin: 24px 0 0;
}
.bento__more { text-align: center; margin: 32px 0 0; color: var(--muted); font-size: 0.95rem; }
.watch__more { text-align: center; margin: 32px 0 0; color: var(--muted); font-size: 0.95rem; }

/* Adam mini variant — slimmer padding, photo right side */
.adam--mini { padding: clamp(80px, 11vw, 140px) 0; }

/* =====================================================================
   STORY (about company section)
   ===================================================================== */
.story {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.story__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.story__media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4/3;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.story__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 30% center;
}
.story__copy p { color: var(--text-soft); margin: 0 0 16px; font-size: 1.02rem; line-height: 1.6; }
.story__copy p:last-child { margin-bottom: 0; }
@media (max-width: 880px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__media { max-width: 520px; }
}

/* =====================================================================
   REVIEWS — static and carousel
   ===================================================================== */
.reviews {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.reviews--mini { background: var(--surface); }
.reviews__rating {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92rem;
  color: var(--text);
}
.reviews__stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 0.05em; }
.reviews__rating-num { color: var(--gold-bright); font-weight: 600; }
.reviews__rating-count { color: var(--muted); }
.reviews__more { margin: 28px 0 0; text-align: center; color: var(--muted); font-size: 0.95rem; }

/* Static reviews list (per-service mini) */
.reviews__static {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}

/* Review card — used by static + carousel */
.review-card {
  padding: clamp(22px, 3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  height: 100%;
}
.reviews--mini .review-card { background: var(--bg); }
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
  border-color: var(--gold-bright);
}
.review-card__stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.08em;
}
.review-card__body {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  quotes: '\201C' '\201D';
}
.review-card__body::before { content: open-quote; opacity: .4; margin-right: 2px; color: var(--gold); }
.review-card__body::after  { content: close-quote; opacity: .4; margin-left: 2px; color: var(--gold); }
.review-card__by {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-card__by strong {
  color: var(--text);
  font-weight: 600;
  font-size: 0.98rem;
}
.review-card__by span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Carousel mode */
.reviews--carousel .reviews__viewport {
  position: relative;
  margin: 8px -16px 0;
  padding: 4px 16px 28px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* Mask edges so cards fade rather than abruptly clip */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.reviews--carousel .reviews__viewport::-webkit-scrollbar { display: none; }
.reviews--carousel .reviews__track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 18px;
}
.reviews--carousel .review-card {
  flex: 0 0 calc((100% - 36px) / 3);
  scroll-snap-align: start;
  min-height: 240px;
  height: auto;
}
@media (max-width: 1100px) {
  .reviews--carousel .review-card { flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 720px) {
  .reviews--carousel .reviews__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
  }
  .reviews--carousel .review-card { flex-basis: 86%; min-height: 220px; }
  .reviews--carousel .reviews__track { gap: 14px; }
}
.reviews__controls {
  display: flex;
  justify-content: center;
  margin: 8px 0 0;
}
.reviews__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4px 8px;
}
.reviews__dots button {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  transition: background .2s, border-color .2s, transform .2s;
}
.reviews__dots button:hover { border-color: var(--gold); }
.reviews__dots button.is-active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.15);
}
.reviews__dots button:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
}
/* Larger tap target wrapper for mobile dots */
@media (hover: none) {
  .reviews__dots button { padding: 8px; width: 28px; height: 28px; background-clip: content-box; }
}

/* Reduced motion: don't auto-advance — pause hint visible */
@media (prefers-reduced-motion: reduce) {
  .reviews--carousel .reviews__viewport { scroll-behavior: auto; }
}

/* =====================================================================
   WHY US — compact 3-card on home
   ===================================================================== */
.whyus {
  padding: clamp(80px, 11vw, 140px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.whyus__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.5vw, 26px);
  margin: 0 0 24px;
}
.whyus__card {
  padding: clamp(22px, 3vw, 32px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
}
.whyus__num {
  margin: 0 0 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-weight: 600;
}
.whyus__card h3 {
  margin: 0 0 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--text);
  line-height: 1.2;
}
.whyus__card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}
.whyus__cta {
  text-align: center;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.watch__intro {
  max-width: 70ch;
  margin: -16px auto 36px;
  text-align: center;
}
.watch__intro p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}
.ba__intro {
  max-width: 70ch;
  margin: -16px auto 28px;
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  text-align: left;
}
.reviews__intro {
  max-width: 70ch;
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}
.areas-mini__nearby {
  margin: 24px 0 8px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: center;
}

/* =====================================================================
   404 NOTFOUND + THANK-YOU pages — extend existing .page styling
   (already in styles.css; no overrides needed)
   ===================================================================== */

/* =====================================================================
   ============   SESSION 3.5 — PALETTE / MATERIAL OVERRIDES   =========
   Pearl/Silver/Navy + Apple-luxury depth.
   These rules sit at the bottom so they take precedence over the
   prior dark-mode CSS without rewriting 2,400 lines of section CSS.
   ===================================================================== */

/* ----- Body baseline: pearl bg + slightly heavier body weight for light mode ----- */
body {
  background: var(--bg);
  color: var(--text);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- Subtle scrollbar tint for light theme ----- */
html { scrollbar-color: var(--silver) transparent; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-thumb { background: var(--silver); border-radius: 999px; }
html::-webkit-scrollbar-thumb:hover { background: var(--silver-dark); }

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@keyframes shimmer-sweep {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes hero-marble-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pearl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27,58,95,0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(27,58,95,0.10); }
}
@keyframes specular-pulse {
  0%   { transform: translateX(-110%) skewX(-12deg); opacity: 0; }
  20%  { opacity: 0.55; }
  100% { transform: translateX(220%) skewX(-12deg); opacity: 0; }
}
@keyframes brand-shimmer-once {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .accent,
  .hero__title em,
  .footer__brand h3 {
    animation: none !important;
  }
}

/* ----- Reusable shimmer accent class — applied to hero accents + accent words ----- */
.accent,
.shimmer-text {
  background: linear-gradient(110deg, var(--navy) 30%, var(--silver-light) 50%, var(--navy) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer-sweep 8s linear infinite;
}

/* =====================================================================
   NAV — translucent pearl with backdrop blur, navy text, bronze accent dot
   ===================================================================== */
.nav {
  background: rgba(248, 248, 255, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.nav.is-scrolled {
  background: rgba(248, 248, 255, 0.92);
  border-bottom-color: var(--line);
}
.nav__brand span {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.nav__phone {
  color: var(--text);
  font-weight: 500;
}
.nav__links {
  color: var(--text-soft);
  font-weight: 500;
}
.nav__links a {
  color: var(--text-soft);
}
.nav__links a:hover { color: var(--navy); }
.nav__links a.is-active { color: var(--navy); font-weight: 600; }
.nav__links a::after { background: var(--bronze); height: 2px; bottom: -1px; }
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__toggle {
  background: var(--surface-2);
  border-color: var(--line);
}
.nav__toggle span { background: var(--navy); }
.nav__toggle:hover { border-color: var(--navy); }

/* Burger drawer (mobile) — light pearl */
@media (max-width: 960px) {
  .nav__links {
    background: var(--bg);
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-elevated);
  }
  .nav__links a {
    color: var(--text);
    border-bottom-color: var(--line-soft);
  }
  .nav__links a.is-active {
    background: linear-gradient(90deg, rgba(205,127,50,0.10), transparent);
  }
}

/* =====================================================================
   URGENCY BANNER — pearl with navy text + bronze pulsing dot
   ===================================================================== */
.banner {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.banner__text { color: var(--text); }
.banner__dot {
  background: var(--bronze);
  box-shadow: 0 0 0 0 rgba(205, 127, 50, 0.5);
  animation: pearl-pulse 2.4s ease-in-out infinite;
}
.banner__close {
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background .2s, color .2s, border-color .2s;
}
.banner__close:hover {
  color: var(--navy);
  background: var(--surface-3);
  border-color: var(--line);
}

/* =====================================================================
   HERO — keep dark dramatic video but reframe with navy overlay,
   pearl inner border, navy/silver/pearl shimmer accent
   ===================================================================== */
.hero {
  background: var(--bg);
  /* Inner pearl frame — created via box-shadow inset so the video edges
     feel framed rather than abruptly bleeding to viewport edge. */
  box-shadow: inset 0 0 0 6px var(--pearl), inset 0 0 0 7px var(--silver);
}
.hero__overlay {
  background:
    linear-gradient(180deg, rgba(15, 38, 69, 0.55) 0%, rgba(15, 38, 69, 0.18) 35%, rgba(15, 38, 69, 0.62) 100%),
    linear-gradient(90deg, rgba(15, 38, 69, 0.36) 0%, rgba(15, 38, 69, 0) 50%, rgba(15, 38, 69, 0.30) 100%);
}
.hero__bg {
  background:
    radial-gradient(ellipse 60% 50% at 20% 25%, rgba(192, 192, 192, 0.20), transparent 60%),
    radial-gradient(ellipse 50% 45% at 80% 80%, rgba(248, 248, 255, 0.14), transparent 60%);
  mix-blend-mode: overlay;
}
.hero__title {
  color: var(--pearl); /* light pearl on dark video */
  text-shadow: 0 2px 24px rgba(15, 38, 69, 0.6);
}
.hero__title em {
  background: linear-gradient(110deg, var(--pearl) 30%, var(--silver-light) 50%, var(--pearl) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-sweep 8s linear infinite;
}
.hero__sub {
  color: rgba(248, 248, 255, 0.92);
  text-shadow: 0 1px 16px rgba(15, 38, 69, 0.5);
}
.hero .kicker {
  color: var(--silver-light);
}
.hero .kicker__dot { background: var(--bronze); }

/* Hero → next section transition strip — soft fade from navy to bg */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(15, 38, 69, 0) 0%, rgba(15, 38, 69, 0.05) 60%, var(--bg) 100%);
  pointer-events: none;
  z-index: 4;
}

/* =====================================================================
   GLOBAL TYPOGRAPHY for light mode — ensure readable navy on pearl
   ===================================================================== */
h1, h2, h3, h4 { color: var(--text); }
.sec-title { color: var(--text); }
.sec-title em { color: var(--text); -webkit-text-fill-color: initial; background: none; }
/* On non-hero contexts, accent words are navy with subtle bronze underline rather than a flashy gradient.
   Hero italic still has the shimmer effect (declared above). */
.sec-title em {
  background: linear-gradient(110deg, var(--navy) 30%, var(--silver-dark) 50%, var(--navy) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  font-weight: 500;
}
.sec-title--light { color: var(--text); }
.sec-title--light em {
  background: linear-gradient(110deg, var(--navy) 30%, var(--silver-dark) 50%, var(--navy) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
p { color: var(--text-soft); }
.kicker { color: var(--navy-mid); letter-spacing: 0.18em; }
.kicker--light { color: var(--bronze); }
.kicker__dot {
  background: var(--bronze);
  box-shadow: 0 0 12px rgba(205, 127, 50, 0.45);
}
.sec-lede { color: var(--text-soft); }
.sec-lede--light { color: var(--text-soft); }

/* All inline links default to navy with bronze hover */
a { color: var(--navy); }
a:hover { color: var(--bronze); }
.link-arrow { color: var(--navy); border-color: var(--silver); }
.link-arrow:hover { color: var(--bronze); border-color: var(--bronze); gap: 14px; }

/* Skip link */
.skip { background: var(--navy); color: var(--pearl); }

/* =====================================================================
   BUTTONS — gunmetal CTA gradient + bevel + outer glow + specular pulse
   ===================================================================== */
.btn { font-weight: 600; }
.btn--primary {
  position: relative;
  background: var(--grad-gunmetal-cta);
  color: var(--pearl);
  border: 1px solid rgba(15, 38, 69, 0.50);
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(248, 248, 255, 0.18);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn--primary::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(248,248,255,0.35) 50%, transparent 100%);
  transform: translateX(-110%) skewX(-12deg);
  pointer-events: none;
  opacity: 0;
}
.btn--primary:hover {
  background: linear-gradient(180deg, #4A555A 0%, #3A4549 50%, #2C3539 100%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover), inset 0 1px 0 rgba(248,248,255,0.25), 0 0 24px rgba(45, 74, 110, 0.25);
}
.btn--primary:hover::before {
  animation: specular-pulse 0.7s var(--ease-expo) forwards;
}
.btn--primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(15, 38, 69, 0.5), 0 1px 2px rgba(15, 38, 69, 0.2);
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover { transform: none; }
  .btn--primary:hover::before { animation: none; }
}

.btn--ghost {
  background: var(--surface-2);
  color: var(--navy);
  border: 1px solid var(--silver);
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
  transition: all .25s var(--ease);
}
.btn--ghost:hover {
  background: var(--bg);
  color: var(--navy-deep);
  border-color: var(--navy);
  transform: translateY(-1px);
  box-shadow: var(--shadow-key), 0 0 0 3px rgba(27, 58, 95, 0.08);
}

/* Nav primary button — slightly more compact */
.nav__cta .btn--primary { padding: 11px 18px; font-size: 0.9rem; }

/* =====================================================================
   FEATURE STRIP / FEAT CARDS
   ===================================================================== */
.features { background: var(--bg-soft); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.feat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.5vw, 28px);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.feat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-overlay);
  pointer-events: none;
  border-radius: inherit;
}
.feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--silver);
}
.feat:first-child,
.feat:last-child { padding-left: clamp(20px, 2.5vw, 28px); padding-right: clamp(20px, 2.5vw, 28px); border-right: 1px solid var(--line); }
.feat__icon {
  background: var(--grad-navy-deep);
  color: var(--pearl);
  box-shadow: 0 8px 18px rgba(15, 38, 69, 0.25), inset 0 1px 0 rgba(248,248,255,0.15);
}
.feat:nth-child(2) .feat__icon {
  background: var(--grad-silver-metal);
  color: var(--navy);
  box-shadow: 0 8px 18px rgba(135, 134, 129, 0.30), inset 0 1px 0 rgba(248,248,255,0.5);
}
.feat:nth-child(3) .feat__icon {
  background: linear-gradient(135deg, var(--bronze-soft) 0%, var(--bronze) 100%);
  color: var(--pearl);
  box-shadow: 0 8px 18px rgba(205, 127, 50, 0.3), inset 0 1px 0 rgba(248,248,255,0.3);
}
.feat:nth-child(4) .feat__icon {
  background: linear-gradient(135deg, var(--silver-light) 0%, var(--silver) 50%, var(--silver-dark) 100%);
  color: var(--navy);
  box-shadow: 0 8px 18px rgba(135, 134, 129, 0.30), inset 0 1px 0 rgba(248,248,255,0.5);
}
.feat h3 { color: var(--text); font-weight: 600; }
.feat p  { color: var(--text-soft); }

/* =====================================================================
   SERVICE CARDS — white surface, pearl gradient overlay, navy text
   ===================================================================== */
.services { background: var(--bg); }
.svc {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-overlay);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.svc > * { position: relative; z-index: 1; }
.svc:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--silver);
}
.svc__num {
  background: var(--grad-gunmetal-cta);
  color: var(--pearl);
  box-shadow: 0 4px 10px rgba(15,38,69,0.2);
  border: 1px solid rgba(15,38,69,0.35);
}
.svc__title { color: var(--text); }
.svc__body > p { color: var(--text-soft); }
.svc__related { color: var(--muted); }
.svc__related a { color: var(--text-soft); border-bottom-color: var(--line-soft); }
.svc__related a:hover { color: var(--bronze); border-color: var(--bronze); }
.svc__list li { color: var(--text-soft); border-color: var(--line-soft); }
.svc__list li span { color: var(--bronze); }

/* =====================================================================
   BENTO TILES — pearl frames, navy meta panel with pearl text,
   silver shimmer hover sweep on image
   ===================================================================== */
.bento { background: var(--bg-soft); }
.tile {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-shimmer);
  background-size: 200% 100%;
  background-position: -100% 0;
  pointer-events: none;
  transition: background-position 0.8s var(--ease);
  border-radius: inherit;
  mix-blend-mode: overlay;
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--silver);
}
.tile:hover::after {
  background-position: 100% 0;
}
.tile__meta {
  background: linear-gradient(180deg, transparent 0%, rgba(15, 38, 69, 0.85) 65%, rgba(15, 38, 69, 0.96) 100%);
  color: var(--pearl);
}
.tile__meta h3 { color: var(--pearl); }
.tile__meta p  { color: rgba(248, 248, 255, 0.78); }
.tag {
  background: rgba(248, 248, 255, 0.18);
  color: var(--pearl);
  border: 1px solid rgba(248, 248, 255, 0.30);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tag--accent {
  background: linear-gradient(135deg, var(--bronze) 0%, var(--bronze-soft) 100%);
  color: var(--pearl);
  border-color: rgba(248, 248, 255, 0.4);
}

/* =====================================================================
   WATCH THE WORK
   ===================================================================== */
.watch { background: var(--bg); }
.watch__tile {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.watch__tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--silver);
}
.watch__play {
  background: var(--grad-navy-deep);
  color: var(--pearl);
  box-shadow: 0 8px 18px rgba(15,38,69,0.4), inset 0 1px 0 rgba(248,248,255,0.2);
  border: 1px solid rgba(248,248,255,0.25);
}
.watch__tile:hover .watch__play {
  box-shadow: 0 8px 18px rgba(15,38,69,0.4), 0 0 0 6px rgba(248,248,255,0.20);
}
.watch__cap {
  background: rgba(15, 38, 69, 0.85);
  color: var(--pearl);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* =====================================================================
   BEFORE / AFTER SLIDER
   ===================================================================== */
.ba-section { background: var(--bg-soft); }
.ba {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  overflow: hidden;
}
.ba__divider { background: var(--silver-light); box-shadow: 0 0 0 1px var(--silver), 0 0 16px rgba(248,248,255,0.6); }
.ba__handle {
  background: var(--surface-2);
  border: 2px solid var(--navy);
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(15,38,69,0.30);
}
.ba__handle:hover { background: var(--navy); color: var(--pearl); }
.ba__lbl {
  background: rgba(15, 38, 69, 0.85);
  color: var(--pearl);
  border: 1px solid rgba(248,248,255,0.18);
  backdrop-filter: blur(4px);
}

/* =====================================================================
   PROCESS — pearl numbered medallions on navy bg, bronze accent
   ===================================================================== */
.process {
  background: var(--grad-navy-deep);
  color: var(--pearl);
  border-top: 1px solid var(--line-soft);
}
.process::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(248,248,255,0.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(192,192,192,0.05), transparent 60%);
  pointer-events: none;
}
.process .kicker--light { color: var(--bronze-soft); }
.process .sec-title--light { color: var(--pearl); }
.process .sec-title--light em {
  background: linear-gradient(110deg, var(--silver-light) 30%, var(--bronze-soft) 50%, var(--silver-light) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-sweep 10s linear infinite;
}
.process .sec-lede--light { color: rgba(248,248,255,0.85); }
.stp { border-color: rgba(248,248,255,0.16); }
.stp__num {
  background: var(--grad-silver-metal);
  color: var(--navy);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(248,248,255,0.5);
}
.stp__when { color: var(--bronze-soft); }
.stp h3 { color: var(--pearl); }
.stp p  { color: rgba(248,248,255,0.85); }

.process__quote-day {
  background: rgba(248, 248, 255, 0.08);
  border-color: rgba(248,248,255,0.14);
  border-left-color: var(--bronze);
}
.process__quote-day h3 { color: var(--bronze-soft); }
.process__quote-day p  { color: rgba(248,248,255,0.92); }

/* =====================================================================
   QUOTE SECTION + BIG QUOTE
   ===================================================================== */
.quote-sec { background: var(--bg); }
.bigquote { color: var(--text); }
.bigquote blockquote { color: var(--text); font-weight: 500; }
.bigquote__by strong { color: var(--text); }
.bigquote__by span { color: var(--muted); }
.bigquote__mark { color: var(--silver); }
.rating { color: var(--bronze); }

/* =====================================================================
   ABOUT (legacy) + ADAM owner section (full and mini)
   ===================================================================== */
.about,
.adam {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.adam::before {
  background:
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(192, 192, 192, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(45, 74, 110, 0.10), transparent 60%);
}
.about__copy p,
.adam__copy p { color: var(--text-soft); }
.adam__copy .adam__lede { color: var(--text); font-weight: 500; }
.about__chips,
.adam__chips { gap: 8px; }
.about__chips li,
.adam__chips li {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-inset);
}
.about__chips li em { color: var(--bronze); }
.adam__callout {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bronze);
  box-shadow: var(--shadow-ambient);
}
.adam__callout h3 { color: var(--bronze); }
.adam__callout li { color: var(--text-soft); }
.adam__callout li::before { color: var(--bronze); }
.about__media,
.adam__media {
  border-color: var(--line);
  box-shadow: var(--shadow-elevated);
}

/* Story (about page) */
.story { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story__copy p { color: var(--text-soft); }
.story__media {
  border-color: var(--line);
  box-shadow: var(--shadow-elevated);
}

/* =====================================================================
   FAQ — pearl summary, white expanded body, bronze plus icon
   ===================================================================== */
.faq { background: var(--bg-soft); }
.faq__list { gap: 10px; display: flex; flex-direction: column; }
.faq__item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-ambient);
  transition: box-shadow .25s, border-color .25s;
}
.faq__item[open] {
  box-shadow: var(--shadow-card);
  border-color: var(--silver);
}
.faq__item summary {
  color: var(--text);
  background: var(--surface-2);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.faq__item summary:hover {
  background: var(--bg-soft);
  color: var(--navy-deep);
}
.faq__item[open] summary {
  border-bottom-color: var(--line-soft);
  background: var(--bg-soft);
}
.faq__icon::before,
.faq__icon::after { background: var(--bronze); }
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after { background: var(--navy); }
.faq__a { color: var(--text-soft); background: var(--surface-2); }
.faq__a .faq__related { color: var(--muted); }
.faq__a .faq__related a { color: var(--text-soft); border-bottom-color: var(--line-soft); }
.faq__a .faq__related a:hover { color: var(--bronze); border-color: var(--bronze); }
.faq__cta { color: var(--muted); }

/* =====================================================================
   AREAS — region cards on white with pearl marble overlay
   ===================================================================== */
.areas { background: var(--bg); }
.areas--mini { background: var(--bg-soft); }
.area,
.area--region {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.area::before,
.area--region::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-overlay);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.area > *,
.area--region > * { position: relative; z-index: 1; }
.area:hover,
.area--region:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--silver);
}
.area__title { color: var(--text); font-weight: 600; }
.area__copy { color: var(--text-soft); }
.area--region .area__chips li {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--line-soft);
  box-shadow: var(--shadow-inset);
}
.area__suburbs { color: var(--muted); }
.area__suburbs span { color: var(--text); }
.areas__cta,
.areas__nearby { color: var(--muted); }
.areas-mini__chips li {
  background: var(--surface-2);
  border-color: var(--line);
  border-left: 3px solid var(--bronze);
  color: var(--text-soft);
  box-shadow: var(--shadow-card), var(--shadow-inset);
}
.areas-mini__chips strong { color: var(--text); }
.areas-mini__nearby { color: var(--muted); }

/* =====================================================================
   TRUST BAND
   ===================================================================== */
.trustband {
  background: var(--bg-soft);
  border-color: var(--line);
}
.trust-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.trust-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.trust-card__icon {
  background: var(--grad-navy-deep);
  color: var(--pearl);
  box-shadow: 0 6px 14px rgba(15,38,69,0.30), inset 0 1px 0 rgba(248,248,255,0.18);
}
.trust-card:nth-child(2n) .trust-card__icon {
  background: linear-gradient(135deg, var(--bronze-soft) 0%, var(--bronze) 100%);
  color: var(--pearl);
  box-shadow: 0 6px 14px rgba(205,127,50,0.30), inset 0 1px 0 rgba(248,248,255,0.30);
}
.trust-card__lbl { color: var(--text); }
.trust-card__lbl em { color: var(--muted); }

/* =====================================================================
   REVIEWS CAROUSEL — white cards with pearl gradient overlay,
   gold-leaf bronze stars, navy reviewer name
   ===================================================================== */
.reviews { background: var(--bg-soft); }
.reviews--mini { background: var(--bg); }
.review-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bronze);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.review-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-overlay);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.review-card > * { position: relative; z-index: 1; }
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--silver);
  border-left-color: var(--bronze-soft);
}
.review-card__stars { color: var(--bronze); letter-spacing: 0.1em; }
.review-card__body { color: var(--text); font-weight: 500; }
.review-card__body::before,
.review-card__body::after { color: var(--bronze); }
.review-card__by { border-top-color: var(--line-soft); }
.review-card__by strong { color: var(--text); }
.review-card__by span { color: var(--muted); }
.reviews__rating { color: var(--text); }
.reviews__stars { color: var(--bronze); }
.reviews__rating-num { color: var(--navy); font-weight: 700; }
.reviews__rating-count { color: var(--muted); }
.reviews__more { color: var(--muted); }
.reviews__intro { color: var(--text-soft); }

.reviews__dots button {
  background: var(--silver-light);
  border-color: var(--line);
}
.reviews__dots button:hover { border-color: var(--bronze); }
.reviews__dots button.is-active {
  background: var(--bronze);
  border-color: var(--bronze);
}

/* =====================================================================
   WHY-FAIL EDUCATIONAL — section bg + cards
   ===================================================================== */
.whyfail { background: var(--bg-soft); border-color: var(--line); }
.whyfail__intro p { color: var(--text-soft); }
.whyfail__block {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.whyfail__block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-overlay);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.whyfail__block > * { position: relative; z-index: 1; }
.whyfail__num { color: var(--bronze); }
.whyfail__block h3 { color: var(--text); }
.whyfail__block p { color: var(--text-soft); }
.whyfail__how {
  background: var(--bg-soft);
  border-left: 3px solid var(--navy);
}
.whyfail__how strong { color: var(--navy); }
.whyfail__how p { color: var(--text); }
.whyfail__close p { color: var(--text); }

/* WHY-US (compact home block) */
.whyus { background: var(--bg-soft); border-color: var(--line); }
.whyus__card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.whyus__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-overlay);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.whyus__card > * { position: relative; z-index: 1; }
.whyus__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--silver);
}
.whyus__num { color: var(--bronze); }
.whyus__card h3 { color: var(--text); }
.whyus__card p { color: var(--text-soft); }
.whyus__cta { color: var(--muted); }

/* =====================================================================
   AFTERCARE
   ===================================================================== */
.aftercare { background: var(--bg); }
.aftercare__intro p { color: var(--text-soft); }
.aftercare__card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.aftercare__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-overlay);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.aftercare__card > * { position: relative; z-index: 1; }
.aftercare__card h3 { color: var(--text); }
.aftercare__card p { color: var(--text-soft); }
.aftercare__card strong { color: var(--bronze); }
.aftercare__cta { color: var(--muted); }

/* =====================================================================
   SERVICE-PAGE HERO + SUBSVC + FINISHES + EXPLAIN
   ===================================================================== */
.svc-hero { background: var(--bg); }
.svc-hero::before {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(192, 192, 192, 0.20), transparent 60%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(45, 74, 110, 0.10), transparent 60%);
}
.svc-hero__title { color: var(--text); }
.svc-hero__title em {
  background: linear-gradient(110deg, var(--navy) 30%, var(--silver-dark) 50%, var(--navy) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-sweep 8s linear infinite;
}
.svc-hero__sub { color: var(--text-soft); }
.svc-hero__media {
  border-color: var(--line);
  box-shadow: var(--shadow-elevated);
}

.subsvc { background: var(--bg-soft); border-color: var(--line); }
.subsvc__card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.subsvc__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-overlay);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.subsvc__card > * { position: relative; z-index: 1; }
.subsvc__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--navy);
}
.subsvc__card h3 { color: var(--text); }
.subsvc__card h3 span {
  background: linear-gradient(135deg, var(--bronze-soft), var(--bronze));
  color: var(--pearl);
  box-shadow: 0 2px 6px rgba(205,127,50,0.30), inset 0 1px 0 rgba(248,248,255,0.30);
}
.subsvc__card p { color: var(--text-soft); }

.finishes { background: var(--bg); border-color: var(--line); }
.finish-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.finish-card::before {
  /* No overlay — image dominates the top */
}
.finish-card:hover { box-shadow: var(--shadow-hover); border-color: var(--silver); }
.finish-card__media { border-bottom-color: var(--line); }
.finish-card__body h3 { color: var(--text); }
.finish-card__body p { color: var(--text-soft); }

.explain { background: var(--bg-soft); }
.explain__card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.explain__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-card-overlay);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.explain__card > * { position: relative; z-index: 1; }
.explain__card h3 { color: var(--text); }
.explain__card p { color: var(--text-soft); }

/* =====================================================================
   CROSS-SELL + CTA-BAND (service-page bottom)
   ===================================================================== */
.cross-sell { background: var(--bg-soft); border-color: var(--line); }
.cross-sell__card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.cross-sell__card:hover {
  border-color: var(--silver);
  box-shadow: var(--shadow-hover);
}
.cross-sell__lbl { color: var(--bronze); }
.cross-sell__card p:last-child { color: var(--text-soft); }

.cta-band {
  background: var(--grad-navy-deep);
  border-color: var(--line-soft);
  color: var(--pearl);
}
.cta-band h2 {
  color: var(--pearl);
  background: linear-gradient(110deg, var(--pearl) 30%, var(--silver-light) 50%, var(--pearl) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-sweep 12s linear infinite;
}
.cta-band p { color: rgba(248,248,255,0.85); }
.cta-band .btn--ghost { background: transparent; color: var(--pearl); border-color: rgba(248,248,255,0.55); }
.cta-band .btn--ghost:hover { background: rgba(248,248,255,0.12); color: var(--pearl); border-color: var(--pearl); }

/* =====================================================================
   BREADCRUMB
   ===================================================================== */
.breadcrumb {
  background: var(--bg);
  border-bottom-color: var(--line);
}
.breadcrumb ol { color: var(--muted); }
.breadcrumb a { color: var(--text-soft); }
.breadcrumb a:hover { color: var(--bronze); }
.breadcrumb [aria-current="page"] { color: var(--navy); }
.breadcrumb li:not(:last-child)::after { color: var(--silver); }

/* =====================================================================
   CONTACT SECTION + FORM
   ===================================================================== */
.contact {
  background: var(--bg-soft);
  color: var(--text);
}
.contact::before {
  background:
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(45, 74, 110, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(192,192,192,0.10), transparent 60%);
}
.contact__lede { color: var(--text-soft); }
.contact__methods { border-top-color: var(--line); }
.method { border-bottom-color: var(--line); transition: padding-left .25s var(--ease); }
.method:hover { padding-left: 8px; }
.method__lbl { color: var(--muted); }
.method__val { color: var(--text); }
.socials a { color: var(--navy); border-bottom: 1px solid var(--silver); transition: color .2s, border-color .2s; }
.socials a:hover { color: var(--bronze); border-color: var(--bronze); }

.form,
.field input,
.field select,
.field textarea {
  color: var(--text);
}
.form {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-elevated);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
}
.field span { color: var(--text); font-weight: 600; }
.field input,
.field select,
.field textarea {
  background: var(--bg);
  border: 1px solid var(--silver);
  font-size: 16px; /* prevent iOS zoom */
  border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(27, 58, 95, 0.16);
}
.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--bronze);
  background: rgba(205, 127, 50, 0.04);
}
.field__err { color: var(--bronze); }
.form__note { color: var(--muted); }
.form__success {
  color: var(--navy);
  background: rgba(192, 192, 192, 0.12);
  border: 1px solid var(--silver);
  border-left: 3px solid var(--bronze);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
}
.form__error {
  color: var(--bronze);
  background: rgba(205, 127, 50, 0.06);
  border: 1px solid var(--bronze);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
}

/* =====================================================================
   FOOTER — navy depth gradient with pearl text + bronze h4 + silver hr
   ===================================================================== */
.footer {
  background: var(--grad-navy-deep);
  color: var(--pearl);
  border-top: 1px solid var(--silver-dark);
}
.footer__brand h3 {
  color: var(--pearl);
  background: linear-gradient(110deg, var(--pearl) 30%, var(--silver-light) 50%, var(--pearl) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: brand-shimmer-once 3s linear 1 forwards;
}
.footer__brand p { color: rgba(248, 248, 255, 0.78); }
.footer h3 {
  color: var(--bronze-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a {
  color: var(--silver-light);
  border-bottom: none;
  transition: color .2s;
}
.footer a:hover { color: var(--pearl); }
.footer address { font-style: normal; }
.footer__bar {
  border-top: 1px solid var(--silver-dark);
  color: var(--silver-light);
}
.footer__bar a { color: var(--silver-light); }
.footer__bar a:hover { color: var(--pearl); }

/* =====================================================================
   MOBILE STICKY BAR (light theme)
   ===================================================================== */
.mob-bar {
  background: rgba(248, 248, 255, 0.94);
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mob-bar__btn--call {
  background: var(--surface-2);
  color: var(--navy);
  border: 1px solid var(--silver);
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
}
.mob-bar__btn--call:hover { border-color: var(--navy); color: var(--navy-deep); }
.mob-bar__btn--quote {
  background: var(--grad-gunmetal-cta);
  color: var(--pearl);
  border: 1px solid rgba(15,38,69,0.40);
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(248,248,255,0.18);
}

/* =====================================================================
   LIGHTBOX (navy depth, not pure black)
   ===================================================================== */
.lb {
  background: rgba(15, 38, 69, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lb__close {
  background: rgba(248, 248, 255, 0.92);
  color: var(--navy);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-elevated);
}
.lb__close:hover { background: var(--pearl); color: var(--navy-deep); }

/* =====================================================================
   FOCUS — visible navy outline with pearl glow (a11y)
   ===================================================================== */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(248, 248, 255, 0.6);
}
.btn:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}
.nav__links a:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
  border-radius: 4px;
}

/* =====================================================================
   PAGE — utility pages (404, privacy, terms, thank-you, blog)
   ===================================================================== */
.page {
  background: var(--bg);
  color: var(--text);
  padding: clamp(80px, 12vw, 140px) var(--gutter) clamp(60px, 10vw, 120px);
  max-width: var(--container);
  margin: 0 auto;
}
.page__kicker { color: var(--bronze); }
.page__updated { color: var(--muted); }
.page p,
.page li { color: var(--text-soft); }
.page h1 { color: var(--text); }
.page h2 { color: var(--navy); margin-top: 1.6em; }
.page__back {
  color: var(--navy);
  border-bottom: 1px solid var(--silver);
  display: inline-block;
  margin-top: 24px;
  transition: color .2s, border-color .2s;
}
.page__back:hover { color: var(--bronze); border-color: var(--bronze); }
.page--service { background: var(--bg); }

.notfound,
.thanks {
  background: var(--bg);
  color: var(--text);
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: clamp(80px, 12vw, 140px) var(--gutter);
}
.notfound h1,
.thanks h1 { color: var(--text); }
.notfound p,
.thanks p { color: var(--text-soft); }

/* =====================================================================
   REVEAL TARGETS (extended)
   ===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   IMG BORDER FRAMES — generic fallback so any unstyled image inside
   svc/finish/about/adam frames inherits a consistent silver edge
   ===================================================================== */
.svc__media,
.finish-card__media {
  border-bottom: 1px solid var(--line);
}

/* =====================================================================
   ACCESSIBILITY: bronze body-text uses darkened to bronze-text (8.8:1)
   Bronze (#CD7F32) is reserved for icons, dots, divider strokes,
   callout left-borders, gold-leaf decorations.
   For TEXT on light bg, bronze-text (#8B4513) gives AAA contrast.
   ===================================================================== */
.cross-sell__lbl { color: var(--bronze-text); }
.aftercare__card strong { color: var(--bronze-text); }
.svc__list li span {
  color: var(--bronze-text);
  background: rgba(139, 69, 19, 0.08);
  border-color: rgba(139, 69, 19, 0.20);
}
.adam__callout h3 { color: var(--bronze-text); }
.field__err { color: var(--bronze-text); }
.form__error { color: var(--bronze-text); border-color: var(--bronze-text); background: rgba(139, 69, 19, 0.05); }
.whyfail__num,
.whyus__num { color: var(--bronze-text); }
.page__kicker { color: var(--bronze-text); }
.contact .kicker--light { color: var(--navy-mid); }
.contact .sec-title--light { color: var(--text); }
.contact .sec-title--light em {
  background: linear-gradient(110deg, var(--navy) 30%, var(--silver-dark) 50%, var(--navy) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.contact .sec-lede--light { color: var(--text-soft); }

/* On dark process/cta-band/footer surfaces, --bronze is fine
   for body-ish text since contrast is 4.83 (AA). Keep these. */

/* =====================================================================
   ============== SESSION 3.6 — TYPOGRAPHY + COMPONENT POLISH ===========
   ============== Final visual session before merge          ===========
   =====================================================================
   Authored: 2026-05-09
   Purpose:
     - Strict heading scale (h1/h2/h3/h4/kicker/body/lede tokens)
     - Kill italic-gradient gimmick on every heading
     - Fix logo render (drop forced-square + bg + padding)
     - Add real SVG step-icons + restructured process layout
     - Areas grid 3+3 instead of 4+2
     - Reviews/watch/adam/faq/footer polish
   Loaded LAST so it overrides Sessions 1-3.5 declarations cleanly.
   ===================================================================== */

:root {
  /* Heading scale (clamp ranges for fluid responsive) */
  --h1-size:        clamp(2.75rem, 6vw, 5rem);          /* 44 → 80 px */
  --h1-line:        1.05;
  --h1-tracking:    -0.025em;

  --h2-size:        clamp(2rem, 4.5vw, 3.5rem);         /* 32 → 56 px */
  --h2-line:        1.1;
  --h2-tracking:    -0.02em;

  --h3-size:        clamp(1.25rem, 2vw, 1.5rem);        /* 20 → 24 px */
  --h3-line:        1.25;
  --h3-tracking:    -0.01em;

  --h4-size:        1rem;                                /* 16 px */
  --h4-line:        1.3;
  --h4-tracking:    0;

  /* Round 32 Phase 2: bumped from 0.7rem (11.2px) to 0.85rem (13.6px) so all
     kickers sitewide render at the visibly-readable size Kevin flagged as
     reference. Coupled with !important on the canonical .kicker rule below
     to prevent any earlier .kicker { font-size: 0.72rem } from winning the
     cascade on certain pages. */
  --kicker-size:    0.85rem;                             /* 13.6 px */
  --kicker-tracking:0.18em;
  --kicker-weight:  500;

  --body-size:      clamp(0.95rem, 1.05vw, 1.05rem);    /* 15.2 → 16.8 px */
  --body-line:      1.65;
  --lede-size:      clamp(1.1rem, 1.4vw, 1.25rem);      /* 17.6 → 20 px */
  --lede-line:      1.55;
}

/* =====================================================================
   PART A.3 — Kill italic + gradient on every heading. Defensive: any
   stray <em> inside a heading inherits parent text rather than gimmick.
   ===================================================================== */
.hero__title em,
.hero__title em *,
.sec-title em,
.sec-title em *,
.sec-title--light em,
.svc-hero__title em,
.svc-hero__title em *,
.contact .sec-title--light em,
.process .sec-title--light em {
  font-style: normal !important;
  font-weight: inherit !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  animation: none !important;
  line-height: inherit !important;
}

/* =====================================================================
   PART B — Heading hierarchy
   ===================================================================== */
.hero__title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-tracking);
  color: var(--text);
  text-shadow: none;            /* kill dark-mode shadow that bleeds on pearl */
  margin: 0 0 28px;
}
.hero__line { display: block; }

.svc-hero__title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-tracking);
  color: var(--text);
  margin: 14px 0 24px;
}

.sec-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-tracking);
  color: var(--text);
  margin: 0 0 18px;
}
.sec-title--light { color: var(--text); }
/* Process has dark navy bg -> pearl text. Contact has light bg -> navy text. */
.process .sec-title--light { color: var(--pearl); }
.contact .sec-title--light { color: var(--navy); }

/* h3 — used for card titles, sub-section heads, FAQ summaries */
h3,
.svc__title,
.subsvc__card h3,
.finish-card h3,
.review-card cite,
.area--region .area__title,
.feat__title,
.tile__title,
.whyus__card h3,
.aftercare__card h3,
.explain__card h3,
.cross-sell__card h3,
.stp h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-tracking);
  color: var(--text);
}
.process .stp h3 { color: var(--pearl); }
.cta-band h3 { color: var(--pearl); }

h4,
.footer h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  letter-spacing: var(--h4-tracking);
}

/* Body + lede */
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-soft);
  font-weight: 400;
}
.sec-lede,
.svc-hero__sub,
.hero__sub,
.adam__lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--lede-size);
  line-height: var(--lede-line);
  color: var(--navy-mid);
  font-weight: 400;
  text-shadow: none;            /* hero__sub legacy shadow off */
  max-width: 56ch;
}
.process .sec-lede--light,
.contact .sec-lede--light { color: rgba(248, 248, 255, 0.85); }

/* Kicker — uppercase mono, bronze dot, navy-mid label.
   Round 32 Phase 2: !important on font-size + letter-spacing locks every
   kicker sitewide to the canonical token. Earlier .kicker rules with
   font-size: 0.72rem (line ~157) had matching specificity and could win
   cascade by source order on pages where this rule loaded later was
   inadvertently scoped — !important closes that gap definitively. */
.kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: var(--kicker-weight);
  font-size: var(--kicker-size) !important;
  letter-spacing: var(--kicker-tracking) !important;
  text-transform: uppercase;
  color: var(--navy-mid);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
.kicker--light { color: var(--bronze-soft); }
.kicker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bronze);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(205, 127, 50, 0.18);
}
.kicker--light .kicker__dot { background: var(--bronze-soft); box-shadow: 0 0 0 3px rgba(217, 160, 91, 0.22); }

/* =====================================================================
   PART C — LOGO RENDERING FIX
   The pre-3.6 rules forced .nav__logo and .footer__logo into a square
   box with surface-2 bg + padding + border. The real logo is 720×745
   (navy marble shield + crown + wordmark). Strip the box, render at
   intrinsic aspect with height-based sizing.
   ===================================================================== */
.nav__logo {
  width: auto !important;
  height: 72px;
  max-height: 72px;
  object-fit: contain;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex-shrink: 0;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.footer__logo {
  width: auto !important;
  height: 120px;
  max-height: 120px;
  object-fit: contain;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 820px) {
  .nav__logo { height: 56px; max-height: 56px; }
}
@media (max-width: 540px) {
  .nav__logo { height: 52px; max-height: 52px; }
  .footer__logo { height: 88px; max-height: 88px; }
}

/* =====================================================================
   PART D — PROCESS step icon + restructured layout
   Steps now have an SVG icon medallion in addition to number + when label.
   ===================================================================== */
.stp__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.stp__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--grad-silver-metal);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(248, 248, 255, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  flex-shrink: 0;
}
.stp__icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stp__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stp__num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--pearl);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.stp__when {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.stp__when::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bronze);
  flex-shrink: 0;
}
.process .stp h3 { margin: 0 0 10px; }
.process .stp p { color: rgba(248, 248, 255, 0.86); margin: 0; }

/* =====================================================================
   PART G — SERVICE AREAS regional cards: 3+3 balanced grid
   ===================================================================== */
.areas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
@media (max-width: 980px) {
  .areas__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .areas__grid { grid-template-columns: 1fr; }
}
.area--region {
  border-left: 3px solid var(--bronze);
}

/* =====================================================================
   PART H — FOOTER brand wordmark
   ===================================================================== */
.footer__brand h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--pearl);
  margin: 16px 0 8px;
}
.footer h3 {
  color: var(--bronze-soft);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =====================================================================
   PART J — REVIEWS carousel polish
   ===================================================================== */
.review-card {
  border-left: 2px solid var(--bronze) !important;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.review-card .stars,
.review-card__stars {
  color: var(--bronze);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

/* =====================================================================
   PART K — WATCH THE WORK premium play button
   ===================================================================== */
.watch__play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(248, 248, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.watch__play svg {
  color: var(--navy);
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
}
.watch__tile:hover .watch__play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: var(--shadow-hover);
}
.watch__cap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================================
   PART L — ADAM section trust chips
   ===================================================================== */
.adam__chips,
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.chip,
.adam__chips li,
.chip-row li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--navy);
  text-transform: uppercase;
  box-shadow: var(--shadow-inset);
  line-height: 1;
}
.chip::before,
.adam__chips li::before,
.chip-row li::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--bronze);
  border-radius: 50%;
  flex-shrink: 0;
}

/* =====================================================================
   PART M — FAQ summary plus icon
   ===================================================================== */
.faq__item summary {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: var(--navy);
}
.faq__item summary::after,
.faq__item summary::-webkit-details-marker {
  display: none;             /* kill default marker; we draw our own */
}
.faq__item summary {
  position: relative;
  padding-right: 48px;
}
.faq__item summary::before {
  content: '+';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-inset);
  color: var(--bronze);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s, transform 0.3s var(--ease);
}
.faq__item[open] summary::before {
  content: '−';
  background: var(--navy);
  color: var(--pearl);
  border-color: var(--navy);
  transform: translateY(-50%) rotate(180deg);
}

/* =====================================================================
   PART N — Why-floors-fail link button
   ===================================================================== */
.whyus__cta,
.whyfail__cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.whyus__cta .link-arrow,
.whyfail__cta .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 1px solid var(--silver);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: var(--shadow-card), var(--shadow-inset);
  transition: all 0.3s var(--ease);
}
.whyus__cta .link-arrow:hover,
.whyfail__cta .link-arrow:hover {
  border-color: var(--bronze);
  color: var(--bronze-text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* =====================================================================
   PART F — CONTAINER WIDTH FAILSAFE
   Every .container honors --container max-width. Nested content
   shouldn't add additional max-widths unless a paragraph readability
   constraint specifically requires it.
   ===================================================================== */
.container { max-width: var(--container); }

/* Loosen narrow inner constraints on hero-like sections at desktop */
.hero__copy { max-width: 920px; }
.svc-hero__copy { max-width: 100%; }
.adam__copy { max-width: 100%; }

/* Service-page hero grid retains 1.1fr 1fr at desktop, full-width at <880 */
.svc-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  min-height: 60vh;
  padding: clamp(48px, 8vw, 96px) 0;
}
@media (max-width: 880px) {
  .svc-hero__grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: clamp(40px, 7vw, 64px) 0;
  }
}

/* =====================================================================
   PART Q — MOBILE SAFETY
   Make sure new heading scale doesn't overflow on smallest viewports.
   ===================================================================== */
@media (max-width: 540px) {
  .hero__title,
  .svc-hero__title { font-size: clamp(2.25rem, 9.5vw, 3.25rem); }
  .sec-title { font-size: clamp(1.75rem, 7.5vw, 2.5rem); }
  h3 { font-size: 1.18rem; }
  .sec-lede,
  .svc-hero__sub,
  .hero__sub,
  .adam__lede { font-size: 1rem; line-height: 1.55; }
  .stp__icon { width: 44px; height: 44px; }
  .stp__num { font-size: 1.5rem; }
}
@media (max-width: 380px) {
  .hero__title,
  .svc-hero__title { font-size: clamp(2rem, 10vw, 2.75rem); letter-spacing: -0.02em; }
}

/* =====================================================================
   FOCUS state confirmed across new chips/icons (carries from 3.5)
   Nothing extra needed — every focusable still gets the navy/pearl ring.
   ===================================================================== */

/* =====================================================================
   ============== SESSION 3.6.1 — ANNOTATION FIXES =====================
   Source: Adam-side preview annotations on dev push.
   Fixes:
     1. CTA band lede subtext was charcoal (.page p override at line 4387
        was beating .cta-band p at line 4184 by source order). Force pearl.
     2. Footer__bar copyright row was rendering near-invisible on navy
        (silver-light is fine ratio but inheritance from body/.page p was
        overriding to charcoal). Force pearl/bronze-soft.
     3. About-page Adam hero photo dominated mobile viewport: 480x600
        portrait pushed h1 below the fold. Constrain to 16/10 + max-height
        and put copy column first via order.
   ===================================================================== */

.cta-band p,
.cta-band__inner p,
.page .cta-band p {
  color: rgba(248, 248, 255, 0.92) !important;
  font-size: 1.05rem;
}

.footer,
.footer p,
.footer li,
.footer address,
.footer__brand p {
  color: var(--silver-light);
}
.footer__bar,
.footer__bar p,
.footer__bar a {
  color: var(--silver-light) !important;
  opacity: 1 !important;
}
.footer__bar em {
  color: var(--bronze-soft) !important;
  opacity: 1 !important;
  font-style: normal;
}
.footer__bar a {
  border-bottom: 1px solid rgba(192, 192, 192, 0.4);
  transition: color 0.2s, border-color 0.2s;
}
.footer__bar a:hover {
  color: var(--pearl) !important;
  border-bottom-color: var(--bronze);
}

/* About-page Adam hero photo: cap on mobile so h1 stays visible */
@media (max-width: 880px) {
  .adam__media {
    aspect-ratio: 16/10;
    max-width: 100%;
    max-height: 38vh;
    order: 2;
    margin: 24px 0 0;
  }
  .adam__copy { order: 1; }
  .adam__grid { gap: 24px; }
}

/* Service-hero on mobile — same treatment so h1 sits above the photo */
@media (max-width: 880px) {
  .svc-hero__media {
    aspect-ratio: 16/10;
    max-height: 38vh;
    order: 2;
    margin: 24px auto 0;
  }
  .svc-hero__copy { order: 1; }
}

/* =====================================================================
   PROCESS step alignment + label size (Round 5)
   ===================================================================== */
/* Kill the legacy 4-col grid leftovers — right border + left indent on
   steps 2/3/4 — that were causing mobile indent + stretched borders.
   The :not(:first-child) pseudo-class has 0,2,0 specificity which beat
   the @media .stp { padding: 28px 0 } reset, so we use !important to
   force flush-left alignment in all viewports. */
.stp,
.stp:not(:first-child) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
}
.stp { padding-top: 32px; padding-bottom: 32px; }
.steps {
  border-top: 0 !important;
  gap: 28px;
}
@media (max-width: 540px) {
  .stp { padding-top: 28px; padding-bottom: 28px; }
  .steps { gap: 20px; }
}

/* "DAY 1 / WITHIN 48HR / BOOKED IN / HANDOVER" was 0.7rem, reading too
   small. Bump to 0.85rem so it sits as a real sub-heading. */
.stp__when {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.stp__when::before {
  width: 6px;
  height: 6px;
}
/* And bump the number block too so it stays proportional */
.stp__num { font-size: 2rem; }

/* =====================================================================
   SERVICE CARD numbered badge — Round 5 visibility fix
   The pre-3.6 .svc__num was a thin gunmetal pill at top:18 left:22 inside
   the photo area, but on real-world photos the dark pill blends in or
   reads as cut off. Re-skin: pearl bg + navy text + bronze leading dot,
   inset slightly more from the corner so the rounded card edge can't
   visually clip it. Higher z-index so nothing sits over it.
   ===================================================================== */
.svc__num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--navy);
  background: rgba(248, 248, 255, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--silver);
  border-radius: 999px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(248, 248, 255, 0.55);
  text-shadow: none;
}
.svc__num::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bronze);
  flex-shrink: 0;
}

/* Hero (home) sits over a dark metallic-pour video. Navy text was washed
   out — switch hero copy to PEARL (text on dark video background pattern,
   like the process section). Keeps the navy-on-pearl rule for every other
   section. Subtle navy shadow underneath for contrast on bright frames. */
.hero__title {
  color: var(--pearl) !important;
  text-shadow: 0 2px 18px rgba(15, 38, 69, 0.7), 0 0 1px rgba(15, 38, 69, 0.5);
}
.hero__sub {
  color: rgba(248, 248, 255, 0.92) !important;
  text-shadow: 0 1px 12px rgba(15, 38, 69, 0.75);
}
.hero .kicker {
  color: var(--bronze-soft) !important;
}
.hero .kicker__dot {
  background: var(--bronze-soft);
  box-shadow: 0 0 0 3px rgba(217, 160, 91, 0.25);
}

/* =====================================================================
   FEAT card — icon alignment + breathing room + uniform palette
   The bronze nth-child(3) variant clashed against the otherwise cool-tone
   navy/silver set. Unify all 4 icons to silver-metal medallion w/ navy
   stroke so they read as ONE set, not 4 mismatched chips.
   ===================================================================== */
.feat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feat__icon,
.feat:nth-child(1) .feat__icon,
.feat:nth-child(2) .feat__icon,
.feat:nth-child(3) .feat__icon,
.feat:nth-child(4) .feat__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  background: var(--grad-silver-metal);
  color: var(--navy);
  box-shadow: 0 8px 18px rgba(135, 134, 129, 0.30), inset 0 1px 0 rgba(248, 248, 255, 0.55);
}
.feat__icon svg {
  width: 28px;
  height: 28px;
  display: block;
  stroke: currentColor;
}
.feat h3 { margin: 0; }
.feat p { margin: 0; }

/* =====================================================================
   REVIEW CARD — uniform 2px bronze left border across all states
   ===================================================================== */
.review-card,
.reviews--mini .review-card,
.reviews--carousel .review-card {
  border-left: 2px solid var(--bronze) !important;
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
}
.review-card:hover {
  border-color: var(--bronze) var(--silver) var(--silver) var(--bronze) !important;
  border-left-width: 2px !important;
}
.review-card__stars { color: var(--bronze); }
.review-card__body { color: var(--text); }
.review-card__body::before,
.review-card__body::after { color: var(--bronze); opacity: 0.5; }

/* =====================================================================
   ============== ROUND 8 — FOUNDATION UNIFICATION ======================
   Phase 1: foundation tokens + marble dark component + light cta-card
   Phase 4: process step real card structure
   Phase 3: hero h1 line break support + kicker size bumps
   Phase 5: logo size clamp
   Authored: 2026-05-10
   Loaded LAST so it overrides all prior cascade.
   ===================================================================== */

:root {
  /* Single section rhythm — Round 31 Phase 10: reduced ~30%
     (was clamp(80px, 10vw, 140px) / clamp(50px, 6vw, 80px))
     to tighten visual rhythm sitewide — pages were feeling floaty. */
  --section-y:    clamp(56px, 7vw, 96px);
  --section-y-sm: clamp(36px, 4.5vw, 60px);

  /* Container — single source of truth */
  --container-max: 1280px;
  --container-x:   clamp(20px, 5vw, 64px);

  /* Polished navy stack for marble bg (lifted slightly from --navy abyss) */
  --navy-stone-1: #234070;
  --navy-stone-2: #1B3A5F;
  --navy-stone-3: #15294D;
}

/* Body uses single bg. No --bg-soft as a body-level color. */
body { background: var(--bg); }

/* Container honors single max-width + horizontal padding token. Hero
   sections may opt out via .hero--full pattern; everything else uses this. */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-x);
}

/* Section padding — every full-bleed section gets vertical rhythm.
   Apply to specific section selectors so we don't cascade to every <section>
   (which would double-pad nested sections). */
.features,
.services,
.bento,
.reviews,
.areas,
.areas--mini,
.contact,
.adam,
.adam--mini,
.whyus,
.whyfail,
.aftercare,
.systems,
.subsvc,
.finishes,
.explain,
.where,
.cta-band-wrap {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.trustband { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); }

/* =====================================================================
   PHASE 1.2 — DARK MARBLE SECTION COMPONENT
   5-layer stack: gradient base + vein overlay + specular highlight +
   edge bevel (inset top/bottom borders) + slow drift on the highlight.
   Applied to .process and .footer below. No solid navy fills allowed.
   ===================================================================== */
.dark-marble-section,
.process,
.footer {
  /* Layer 1 — base gradient (polished navy stone) */
  background:
    linear-gradient(135deg,
      var(--navy-stone-1) 0%,
      var(--navy-stone-2) 45%,
      var(--navy-stone-3) 100%);
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  /* Layer 4 — inset edge bevels */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  overflow: hidden;
}

/* Layer 2 — Marble vein overlay (inline SVG turbulence as data URI) */
.dark-marble-section::before,
.process::before,
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 800px 400px at 15% 20%, rgba(255, 255, 255, 0.045), transparent 60%),
    radial-gradient(ellipse 600px 300px at 80% 70%, rgba(192, 192, 192, 0.035), transparent 65%),
    radial-gradient(ellipse 500px 250px at 50% 50%, rgba(248, 248, 255, 0.025), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* Layer 3 — Specular off-center highlight + Layer 5 slow drift */
.dark-marble-section::after,
.process::after,
.footer::after {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 22% 28%, rgba(181, 197, 221, 0.10), transparent 60%),
    radial-gradient(ellipse 40% 35% at 78% 80%, rgba(217, 160, 91, 0.04), transparent 60%);
  filter: blur(20px);
  animation: marble-drift-slow 48s ease-in-out infinite alternate;
}
@keyframes marble-drift-slow {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1%, 0) scale(1.04); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .dark-marble-section::after,
  .process::after,
  .footer::after { animation: none; }
}

/* Make sure section content sits ABOVE the marble layers */
.process > *,
.footer > *,
.dark-marble-section > * { position: relative; z-index: 1; }

/* =====================================================================
   PHASE 1.3 + 1.5 — LIGHT CTA CARD replaces dark .cta-band slabs
   ===================================================================== */
.cta-band {
  /* Light wrapper section — pearl bg, no dark slab */
  background: var(--bg) !important;
  padding: var(--section-y) 0 !important;
  border: 0 !important;
  position: relative;
}
.cta-band::before,
.cta-band::after {
  display: none !important; /* kill any dark-mode marble layers if .cta-band ever picks them up */
}
.cta-band__inner,
.cta-band > .container,
.cta-band .container {
  /* Inner card — silver-metal marble */
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F2F7 50%, #E5E9F0 100%) !important;
  border: 1px solid rgba(180, 195, 220, 0.4) !important;
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 30px 60px rgba(27, 58, 95, 0.12),
    0 6px 16px rgba(27, 58, 95, 0.06) !important;
  padding: clamp(40px, 6vw, 70px) !important;
  position: relative;
  overflow: hidden;
  max-width: var(--container-max);
  margin-inline: auto;
}
/* Faint bronze-leaf accent in one corner — barely visible vein */
.cta-band__inner::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 100%;
  background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(205, 127, 50, 0.08), transparent 65%);
  pointer-events: none;
}
.cta-band h2,
.cta-band__inner h2 {
  /* Was pearl shimmer; now navy on light card */
  color: var(--navy) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  animation: none !important;
  margin: 0 0 12px;
}
.cta-band p,
.cta-band__inner p {
  /* Round 31 Phase 5.2: was rgba(27,58,95,0.72) ≈ 4:1 contrast (fails WCAG AA).
     Bumped to solid navy 0.95 for clear readability (~7:1 = WCAG AAA). */
  color: rgba(27, 58, 95, 0.95) !important;
  text-shadow: none !important;
  margin: 0;
}

/* Round 31 Phase 5.1: match button widths in the CTA band so phone pill
   and "Get a quote" feel like a deliberate paired unit, not random sizes. */
.cta-band .cta-band__actions .btn {
  min-width: 200px;
  justify-content: center;
}
@media (max-width: 720px) {
  .cta-band .cta-band__actions .btn { min-width: 0; flex: 1 1 100%; }
}

/* Round 31 Phase 5.3: tighten 3-column .cta-band--trust vertical alignment
   so all 3 sections feel deliberate. */
.cta-band--trust .cta-band__inner {
  align-items: center !important;
}
.cta-band--trust .cta-band__copy,
.cta-band--trust .cta-band__trust,
.cta-band--trust .cta-band__actions {
  align-self: center;
}
.cta-band--trust .cta-band__actions {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
@media (max-width: 960px) {
  .cta-band--trust .cta-band__actions { flex-direction: row; align-items: stretch; justify-content: flex-start; }
}
.cta-band .btn--ghost {
  background: var(--surface-2) !important;
  color: var(--navy) !important;
  border-color: var(--silver) !important;
  box-shadow: var(--shadow-card), var(--shadow-inset) !important;
}
.cta-band .btn--ghost:hover {
  background: var(--bg) !important;
  color: var(--navy-deep) !important;
  border-color: var(--navy) !important;
}

/* =====================================================================
   PHASE 4 — PROCESS step real card structure
   Each step is a bounded card with rounded border, subtle bg, inset
   highlight. Cards separated by gap, NOT lines.
   ===================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px !important;
  border-top: 0 !important;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .steps { grid-template-columns: 1fr; } }

.stp {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 30px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.stp:not(:first-child) {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.stp__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.stp__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--grad-silver-metal);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(248, 248, 255, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  flex-shrink: 0;
}
.stp__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stp__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.stp__num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--pearl);
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
.stp__when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.stp__when::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bronze);
  flex-shrink: 0;
}
.stp h3 {
  margin: 6px 0 0;
  color: var(--pearl);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.stp p {
  margin: 0;
  color: rgba(248, 248, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Round 32 Phase 7 — /waterproofing "What You Get" list: strip bullet markers
   for clean text-line presentation. */
.whyfail__close-list {
  list-style: none;
  padding-left: 0;
  margin: 18px 0;
}
.whyfail__close-list li {
  padding: 6px 0;
  line-height: 1.55;
  position: relative;
  padding-left: 0;
}

/* =====================================================================
   ROUND 33 — MOBILE FIXES
   Every rule scoped to mobile media query to preserve desktop layout.
   ===================================================================== */

/* Phase 1 — Hamburger anchored right on mobile.
   Root cause: .nav__inner is display:flex with no justify-content set.
   At desktop, .nav__links { flex: 1 1 auto } fills the middle and naturally
   pushes .nav__cta + .nav__toggle to the right. At mobile (<=960px) the
   .nav__links becomes position:fixed (drawer) and is removed from the flex
   flow. .nav__phone hides at <=1100px and .nav__cta .btn hides at <=540px,
   so flex children collapse to .nav__brand + empty .nav__cta + .nav__toggle,
   all packed to flex-start — toggle lands centre-left instead of right.
   Fix: margin-left:auto on the toggle. Only effective when toggle is
   display:flex (mobile); on desktop it stays display:none so this is inert. */
@media (max-width: 960px) {
  .nav__toggle { margin-left: auto; }
}

/* Phase 2 — Mobile drawer scroll fix.
   Root cause: existing 960px rule sets max-height: calc(100vh - banner-h -
   nav-h) + overflow-y:auto. On iOS Safari 100vh INCLUDES the URL/chrome
   area, so the drawer is taller than the visible viewport — the bottom
   items (Contact, nested grinding/surface-prep) sit below the URL bar and
   feel unreachable. Body scroll isn't locked, so touch gestures inside the
   drawer can be interpreted as page scroll, masking the drawer's own
   overflow-y:auto.
   Fix: use 100dvh (dynamic viewport height — respects browser chrome) +
   overscroll-behavior:contain to keep scroll inside the drawer; add a
   body.menu-open class (toggled in JS) that locks body scroll. */
@media (max-width: 960px) {
  .nav__links {
    max-height: calc(100dvh - var(--banner-h) - var(--nav-h));
    overscroll-behavior: contain;
  }
}
body.menu-open { overflow: hidden; }

/* Round 34 — .svc--trades + .svc__badge removed; tile now uses the standard
   .svc structure (image + body) so no special padding rule is needed. */

/* =====================================================================
   ROUND 31 PHASE 1 — kicker size standardisation
   Removed the prior PHASE 3.9 hero + process kicker size bump
   (was 0.85rem !important). All kickers now use var(--kicker-size) = 0.7rem
   sitewide for visual consistency.
   ===================================================================== */

/* =====================================================================
   PHASE 5 — Logo treatment (mark in nav, lockup in footer)
   ===================================================================== */
.nav__logo {
  width: clamp(64px, 6vw, 88px) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
.nav__brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.nav__brand > span,
.nav__wordmark {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  letter-spacing: -0.015em;
  color: var(--navy);
}
.footer__logo {
  width: clamp(180px, 18vw, 280px) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  display: block;
  margin-bottom: 8px;
}
@media (max-width: 540px) {
  .nav__logo { width: 56px !important; }
  .footer__logo { width: 200px !important; }
}

/* =====================================================================
   PHASE 6 — SOCIAL BRAND ICONS
   Used in footer Reach column (.footer__socials > ul.socials) and home
   contact section (.contact div.socials).
   ===================================================================== */
.socials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;   /* Round 30 Phase 7: explicit horizontal */
  flex-wrap: nowrap;
  gap: 14px;
  align-items: center;
}

/* Round 32 Phase 1 — regression fix.
   Root cause: ".footer ul { display: grid }" (line 1262 + 4509) has specificity
   (0,1,1) and was beating ".socials { display: flex }" (0,1,0) regardless of
   cascade order. The inner <ul class="socials"> got display: grid (vertical
   stack) every page despite Round 30 Phase 7 + Round 31 Phase 6 trying to set
   it horizontal.
   Fix: chain ".footer ul.socials" (specificity 0,2,1) so it wins the cascade. */
.footer ul.socials {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  padding: 0;
  margin: 0;
}
.footer ul.socials > li {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
.socials a,
.contact .socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s;
  text-decoration: none;
  padding: 0;
}
.socials a:hover,
.contact .socials a:hover {
  background: var(--bronze);
  color: var(--navy);
  border-color: var(--bronze);
  transform: translateY(-2px);
}
.socials a svg { display: block; }

/* On the LIGHT contact section the dark-bg socials would invert weirdly.
   Override: bronze ring on pearl bg, navy glyph, hover navy/pearl invert. */
.contact .socials a {
  background: var(--surface-2);
  color: var(--navy);
  border: 1px solid var(--silver);
  box-shadow: var(--shadow-card);
}
.contact .socials a:hover {
  background: var(--navy);
  color: var(--pearl);
  border-color: var(--navy);
}

/* Footer-Reach: the socials block sits inside the address ul as a final
   list item containing its own ul. Strip the bullet + remove default
   list spacing so it reads as a row of icons. */
.footer__socials {
  list-style: none;
  padding-top: 6px;
}
.footer__socials .socials { gap: 10px; }

/* =====================================================================
   URGENCY STRIP — re-confirm light treatment (already pearl in 3.5
   but make sure no dark variant lingers)
   ===================================================================== */
.banner,
.urgency-strip,
#urgencyBanner {
  background: linear-gradient(180deg, var(--bg) 0%, #EFF1F5 100%) !important;
  border-bottom: 1px solid var(--line-soft) !important;
}

/* =====================================================================
   PHASE 1.1 (cont'd) — KILL THE STROBE: every light section uses --bg.
   No more --bg-soft alternation between sections. Visual rhythm comes
   from spacing + card shadows + borders, not from background shift.
   ===================================================================== */
.features,
.bento,
.ba-section,
.story,
.faq,
.areas,
.areas--mini,
.reviews,
.reviews--mini,
.whyfail,
.whyus,
.subsvc,
.explain,
.cross-sell,
.contact,
.systems,
.aftercare,
.adam,
.adam--mini,
.where,
.finishes,
.services,
.trustband,
.svc-hero,
.watch {
  background: var(--bg) !important;
}
/* Light borders are silver-soft, not heavy lines */
.features,
.bento,
.story,
.areas,
.reviews,
.whyfail,
.whyus,
.subsvc,
.explain,
.cross-sell,
.contact,
.systems,
.aftercare {
  border-top-color: var(--line-soft) !important;
  border-bottom-color: var(--line-soft) !important;
}

/* =====================================================================
   ============== ROUND 10 — CTA RESTYLE + STP NUM PILL =================
   Authored: 2026-05-10
   Priority: appended LAST — wins all prior cascade.
   ===================================================================== */

/* =====================================================================
   PRIMARY CTA — marble navy depth + bronze accent + shimmer hover
   Replaces every prior .btn--primary rule via source-order win.
   No more gunmetal-on-pale-blue. White text stays white through hover;
   the bronze moment is the chevron + outer glow + shimmer sweep, NOT a
   text color flip.
   ===================================================================== */
.btn--primary {
  background: linear-gradient(135deg, #234070 0%, #1B3A5F 50%, #0F1E3D 100%) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 10px 24px rgba(15, 30, 61, 0.35),
    0 2px 6px rgba(15, 30, 61, 0.20) !important;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.4s var(--ease),
    border-color 0.25s var(--ease) !important;
  position: relative;
  overflow: hidden;
  -webkit-text-fill-color: #FFFFFF !important;
  text-shadow: none !important;
}

.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease);
  pointer-events: none;
  z-index: 0;
  /* Override any prior ::before pulse animation */
  animation: none !important;
  opacity: 1 !important;
  width: 100% !important;
}

.btn--primary > * {
  position: relative;
  z-index: 1;
}

.btn--primary:hover {
  background: linear-gradient(135deg, #2B4A7E 0%, #234070 50%, #1B3A5F 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 16px 32px rgba(15, 30, 61, 0.45),
    0 4px 10px rgba(205, 127, 50, 0.25) !important;
  border-color: rgba(205, 127, 50, 0.4) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.btn--primary:hover::before {
  transform: translateX(100%);
}

.btn--primary:active {
  transform: translateY(0) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.30),
    0 4px 12px rgba(15, 30, 61, 0.30) !important;
}

.btn--primary:focus-visible {
  outline: 2px solid var(--bronze) !important;
  outline-offset: 3px !important;
}

/* The trailing arrow span ("→") becomes the bronze accent moment.
   On hover it slides 4px right + warms to a brighter bronze. */
.btn--primary span {
  position: relative;
  z-index: 1;
  color: var(--bronze) !important;
  margin-left: 6px;
  font-weight: 500;
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
  -webkit-text-fill-color: var(--bronze) !important;
}
.btn--primary:hover span {
  transform: translateX(4px);
  color: #EBCC8B !important;
  -webkit-text-fill-color: #EBCC8B !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover { transform: none !important; }
  .btn--primary:hover::before { transform: translateX(-100%) !important; }
  .btn--primary:hover span { transform: none !important; }
}

/* =====================================================================
   GHOST CTA — outlined navy on light bg, outlined white on hero overlay.
   ===================================================================== */
.btn--ghost {
  background: transparent !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: var(--navy) !important;
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    transform 0.25s var(--ease),
    border-color 0.25s var(--ease) !important;
  box-shadow: none !important;
}
.btn--ghost:hover {
  background: var(--navy) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: var(--navy) !important;
  transform: translateY(-2px) !important;
}
.btn--ghost:focus-visible {
  outline: 2px solid var(--bronze) !important;
  outline-offset: 3px !important;
}

/* On dark hero overlays, ghost flips to white border + white text */
.hero .btn--ghost,
.hero--full .btn--ghost {
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.hero .btn--ghost:hover,
.hero--full .btn--ghost:hover {
  background: #FFFFFF !important;
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
  border-color: #FFFFFF !important;
}

/* Nav primary CTA — slightly tighter padding, otherwise same treatment */
.nav__cta .btn--primary {
  padding: 11px 18px !important;
  font-size: 0.9rem !important;
}

/* =====================================================================
   PROCESS STEP NUMBER BADGE — tight pill that hugs digits
   ===================================================================== */
.stp__head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: auto !important;
  margin: 0 !important;
}
.stp__head > * {
  flex: 0 0 auto !important;
}
.stp__head .stp__meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: flex-start !important;
}

.stp__num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  padding: 6px 14px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  /* Kill any inherited gradient-clip text fill from prior rounds */
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  /* Kill any animation/transform from prior rules */
  animation: none !important;
}

/* =====================================================================
   ============== ROUND 11 — NAV LOGO CLIPPING FIX ======================
   Authored: 2026-05-10
   Root cause: prior .nav { height: 74px } / .nav.is-scrolled { 60px }
   was shorter than the rendered logo height (clamp 64-88px wide x 1.07
   aspect = up to ~94px tall) -> crown top + shield bottom clipped.
   Fix: nav uses min-height not height, overflow visible, logo capped
   to a max-height that fits inside the bar with breathing room.
   ===================================================================== */
:root {
  --nav-h: 88px;
  --nav-h-sm: 72px;
}

.nav {
  height: auto !important;
  min-height: var(--nav-h) !important;
  overflow: visible !important;
}
.nav.is-scrolled {
  height: auto !important;
  min-height: var(--nav-h-sm) !important;
}
.nav__inner {
  height: auto !important;
  min-height: var(--nav-h) !important;
  overflow: visible !important;
  padding-block: 10px !important;
}
@media (max-width: 820px) {
  .nav { min-height: var(--nav-h-sm) !important; }
  .nav__inner { min-height: var(--nav-h-sm) !important; }
}

/* Logo inside nav: constrained max-height so it fits inside the bar
   with breathing room. Width clamps remain proportional. */
.nav__logo {
  width: clamp(56px, 5.5vw, 72px) !important;
  height: auto !important;
  max-height: 64px !important;
  object-fit: contain !important;
  display: block !important;
  image-rendering: -webkit-optimize-contrast;
  flex: 0 0 auto !important;
}
@media (max-width: 820px) {
  .nav__logo { max-height: 52px !important; }
}
@media (max-width: 540px) {
  .nav__logo { width: 52px !important; max-height: 48px !important; }
}

.nav__brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

/* =====================================================================
   ============== ROUND 12 — PROCESS CARD INTERNAL LAYOUT ===============
   Authored: 2026-05-10
   New top-to-bottom rhythm per step:
     Row 1: kicker top-left ("• DAY 1" bronze mono)
     Row 2: silver-square icon (38px) + number badge (38px), baseline-aligned
     Row 3: h3 heading
     Row 4: body paragraph
   HTML reordered on index + about so .stp__when is the FIRST child.
   ===================================================================== */
.stp {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 24px !important;
}

.stp__when {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--bronze) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 500 !important;
  align-self: flex-start !important;
  margin: 0 !important;
  order: 0 !important;
}
.stp__when::before {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--bronze) !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  position: static !important;
  /* Kill any absolute / inset positioning from earlier rules */
  inset: auto !important;
}

.stp__head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  align-self: flex-start !important;
  margin: 0 !important;
  width: auto !important;
}

.stp__icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #E5E9F0 0%, #C0C0C0 100%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  padding: 0 !important;
}
.stp__icon svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--navy) !important;
  stroke: var(--navy) !important;
  fill: none !important;
  stroke-width: 1.8 !important;
}

.stp__num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  height: 38px !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  animation: none !important;
}

/* ===== NAV LOGO ANTI-CLIP — DO NOT EDIT ABOVE THIS COMMENT =====
   ROUND 13 — 4th attempt. Per user spec, brute-force !important
   constraints + re-trim source asset (12% padding bumped from 4%).
   The DOM-level clipping was already gone after Round 11; the user's
   perception was driven by the source image trim being flush at the
   crown peak. Source re-exported with 12% breathing room separately.
   These rules lock everything down so no future cascade can re-clip. */
.nav,
header.nav {
  height: auto !important;
  min-height: 96px !important;
  max-height: none !important;
  overflow: visible !important;
}
.nav__inner {
  height: auto !important;
  min-height: 96px !important;
  max-height: none !important;
  overflow: visible !important;
  padding-block: 12px !important;
  align-items: center !important;
}
.nav__brand {
  align-items: center !important;
  align-self: center !important;
  overflow: visible !important;
}
/* Nav logo NOW HOLDS the horizontal lockup (shield+crown + wordmark
   in one image, ~2.5 aspect). Heights are clamped, width auto so the
   intrinsic aspect ratio dictates how wide the logo renders. */
.nav__logo {
  height: clamp(40px, 5vw, 56px) !important;
  width: auto !important;
  max-height: 56px !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 820px) {
  .nav, header.nav { min-height: 76px !important; }
  .nav__inner { min-height: 76px !important; padding-block: 10px !important; }
  .nav__logo { height: 36px !important; max-height: 40px !important; max-width: none !important; width: auto !important; }
}

/* Nav background matches the logo's pearl bg (#F0F2F7) so the logo
   blends invisibly into the bar — no visible rectangle around it. */
.nav,
header.nav {
  background: #F0F2F7 !important;
  border-bottom: 1px solid rgba(180, 195, 220, 0.3) !important;
}

/* Footer marble: first 50% of gradient = sampled logo bg (#182E53) so
   the navy-bg footer logo image blends invisibly into the section.
   Lower half fades to deeper navy for depth. */
.footer.dark-marble-section,
footer.footer.dark-marble-section,
.footer {
  background: linear-gradient(135deg, #182E53 0%, #182E53 50%, #15294D 100%) !important;
}
.nav.is-scrolled,
.nav.scrolled {
  height: auto !important;
  min-height: 84px !important;
}
.nav.is-scrolled .nav__inner,
.nav.scrolled .nav__inner {
  min-height: 84px !important;
}
/* Cascade safety: never let parent header / banner overflow-hidden clip the nav */
.urgency-strip,
.banner,
#urgencyBanner { overflow: visible !important; }
header { overflow: visible !important; }
/* ===== END NAV ANTI-CLIP ===== */

/* =====================================================================
   ROUND 13 — REVIEW CARD BRONZE ACCENT — universal, no first-card miss.
   Root cause: at <720w the carousel viewport had a left-edge mask-image
   fade (transparent 0 -> #000 16px) that washed out the bronze border-
   left of the leftmost card (Tom W). Fix: kill the left mask fade AND
   add an explicit ::before bronze accent strip inside each card so even
   if any future mask is applied, the accent reads.
   ===================================================================== */
.review-card {
  position: relative !important;
  border-left: 3px solid var(--bronze) !important;
}
.review-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, var(--bronze) 0%, #EBCC8B 100%) !important;
  border-radius: 3px 0 0 3px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
/* Ensure card content sits above the ::before strip */
.review-card > * { position: relative; z-index: 2; }

/* Kill the left-edge mask-image fade so Tom W's bronze isn't washed out */
@media (max-width: 720px) {
  .reviews--carousel .reviews__viewport {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%) !important;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%) !important;
  }
}

/* =====================================================================
   ============== ROUND 14 — SUB-PAGE FULL-BLEED HEROES ================
   .hero--full pattern for waterproofing / epoxy / spray-crete /
   about / projects. Replaces the .svc-hero split-column layout.
   Edge-to-edge background image with darken-overlay, white overlay
   text inside container-width inner block.
   ===================================================================== */

.hero.hero--full {
  position: relative !important;
  min-height: clamp(560px, 80vh, 760px);
  width: 100vw !important;
  max-width: 100vw !important;
  /* Full-bleed breakout: when nested inside a padded .page or .container,
     escape via negative-margin trick. */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: var(--navy-stone-2);
  left: 0;
  right: 0;
}

/* When .hero--full is the direct first child of a .page container,
   neutralise the .page top padding so the hero sits flush with the nav. */
main.page > .hero.hero--full:first-of-type {
  margin-top: calc(-1 * clamp(80px, 12vw, 140px)) !important;
}

.hero--full__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero--full__visual img,
.hero--full__visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero--full__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 0% top: subtle 32% navy for white text legibility on bright frames
     60%: deeper 55% navy
     90%: peak 70% navy where the CTAs sit
     100% bottom: smooth fade-down to pearl-soft so the transition into
                  the breadcrumb bar reads as a section close, not a hard
                  image edge. Kills the "torn" look. */
  background: linear-gradient(180deg,
    rgba(15, 30, 61, 0.32) 0%,
    rgba(15, 30, 61, 0.55) 55%,
    rgba(15, 30, 61, 0.70) 88%,
    rgba(245, 247, 249, 0.95) 100%);
  z-index: 1;
}

.hero--full__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-x);
  padding-block: clamp(80px, 10vh, 140px);
  color: #FFFFFF;
}

.hero--full .kicker {
  color: var(--bronze-soft);
  /* Round 31 Phase 1: font-size + letter-spacing removed — uses base .kicker token now */
  text-shadow: none;
}
.hero--full .kicker__dot { background: var(--bronze-soft); box-shadow: 0 0 0 3px rgba(217, 160, 91, 0.25); }

.hero--full .hero__title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 16px 0 24px;
  text-shadow: 0 2px 18px rgba(15, 30, 61, 0.6);
}
.hero--full .hero__line { display: block; }

.hero--full .hero__sub {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  max-width: 56ch;
  margin: 0 0 32px;
  text-shadow: 0 1px 12px rgba(15, 30, 61, 0.6);
}

.hero--full .hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* New light-bg breadcrumb bar that sits BELOW the full-bleed hero.
   bg matches the hero gradient's bottom fade target so the transition
   into the breadcrumb reads as a single continuous surface. */
.breadcrumbs {
  /* No bg — inherit body --bg #F8F8FF so the breadcrumb bar reads as
     part of the same pearl page surface, not a second tinted strip. */
  background: transparent;
  border-bottom: 1px solid rgba(180, 195, 220, 0.4);
  padding-block: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.breadcrumbs > .container {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.breadcrumbs a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s var(--ease);
}
.breadcrumbs a:hover { color: var(--bronze); border-color: var(--bronze); }
.breadcrumbs span[aria-current] { color: var(--muted); }

/* Mobile tightening */
@media (max-width: 540px) {
  .hero.hero--full { min-height: clamp(440px, 70vh, 580px); }
  .hero--full__inner { padding-block: clamp(60px, 12vh, 100px); }
  .hero--full .hero__title { font-size: clamp(2rem, 9vw, 2.75rem); }
}

/* Hide the LEGACY .svc-hero rules effectively when a page uses .hero--full
   instead. The .svc-hero markup is being replaced wholesale per page;
   nothing extra needed here, just defensive: any legacy CSS targeting
   .svc-hero keeps applying to its own selector. */



/* ===== ROUND 18 PAGE BG UNIFICATION — DO NOT EDIT ABOVE THIS LINE ===== */

html, body {
  background: #F8F8FF !important;
  background-color: #F8F8FF !important;
}

main {
  background: #F8F8FF !important;
  background-color: #F8F8FF !important;
}

/* Every direct child of main is transparent — body shows through.
   Includes <nav class="breadcrumbs"> which was the round-17 offender. */
main > section,
main > div,
main > article,
main > nav,
main > aside,
main > header {
  background: transparent !important;
}

/* Re-allow dark-marble + footer exceptions */
main > section.dark-marble-section,
main > section.process,
main > footer.dark-marble-section,
footer.dark-marble-section,
footer.footer {
  background: linear-gradient(135deg, #182E53 0%, #182E53 50%, #15294D 100%) !important;
}

/* Hero sections: visual is the absolute-positioned img inside hero--full__visual,
   the section itself just needs to NOT show body bg through (so the gradient
   overlay reads). Keep transparent — the inner __visual covers everything. */
main > section.hero,
main > section.hero--full {
  background: transparent !important;
}

/* Section variants that previously had their own --bg-soft / --surface bg.
   Force transparent so body shows through. */
.about-section, .features, .services, .bento, .reviews, .reviews--mini,
.faq, .contact, .trust-band, .trustband, .why-fail, .whyfail, .whyus,
.service-areas, .areas, .areas--mini, .quote-sec, .subsvc, .explain,
.cross-sell, .systems, .aftercare, .adam, .adam--mini, .story, .where,
.finishes, .ba-section, .watch, .svc-hero,
section[class*="bg-soft"], section[class*="--surface"] {
  background: transparent !important;
}

/* CTA card keeps its silver-metal gradient — narrow scope, only on the
   inner card, not the wrapping section. */
section.cta-wrap > .cta-card,
.cta-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F2F7 50%, #E5E9F0 100%) !important;
}
.cta-band__inner,
.cta-band > .container,
.cta-band .container {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F2F7 50%, #E5E9F0 100%) !important;
}

/* Breadcrumbs — explicit transparent (was --bg-soft via Round 16, source
   rule above already neutralised, this is the belt-and-braces override). */
.breadcrumbs,
nav.breadcrumbs,
main > nav.breadcrumbs {
  background: transparent !important;
  background-color: transparent !important;
}

/* ===== END ROUND 18 PAGE BG UNIFICATION ===== */

/* ===== ROUND 19 — PROCESS DEAD SPACE + STORY MEDIA FIT ===== */

/* Fix 1 — process section padding restored to site rhythm.
   Was clamp(110px, 15vw, 190px) at line 902 → 190px at 1280w (way too
   tall, ~300px perceived dead navy above the kicker). Now matches
   var(--section-y) which is clamp(80px, 10vw, 140px). */
.process,
section.process {
  padding-top: var(--section-y) !important;
  padding-bottom: var(--section-y) !important;
}
.process > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
.process .sec-head,
.process > .container > .sec-head { margin-top: 0 !important; }
.process > .container > *:first-child { margin-top: 0 !important; }

/* Fix 2 — about company photo fit (Path A).
   Slot was 4:3 with image at 2.37 aspect → 75% crop. Now 16:9 slot
   matching the new 16:9 letterboxed image (navy padding fills any gap
   so the brand content stays fully visible). */
.story__media,
.about__media {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 16px;
  background: #0F1E3D;
  width: 100%;
  height: auto !important;
}
.story__media img,
.about__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

/* ===== ROUND 20 — PROCESS / CTA-BAND FULL-BLEED BREAKOUT ===== */
/* ===== ROUND 31 PHASE 2 — UNIVERSAL SECTION BREAKOUT =====
   Same pattern as .hero--full: every main > section gets viewport-edge
   width via 100vw + negative margin. Without this, sections inside
   main.page (which has max-width + padding-inline) get gutter'd and any
   background or border on them stops short of the viewport edge —
   creating thin vertical colour bands at the gutter boundary that Kevin
   flagged sitewide. Inner .container holds content at container-max. */
main > section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0;
  right: 0;
}

/* Inside .process we now want the .container to honor container-max
   width with the standard horizontal gutter, since the section itself
   no longer has padding-inline. */
.process > .container {
  max-width: var(--container-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--container-x) !important;
}
.cta-band > .container,
.cta-wrap > .container {
  max-width: var(--container-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--container-x) !important;
}

/* =====================================================================
   ROUND 22 — MOBILE LAYOUT FIXES
   ===================================================================== */

/* Bug 1: .feat:nth-child(3) inherits padding-left:0 from a legacy
   @media (max-width:1000px) rule that pre-dates the current self-contained
   card styling. The later .feat rule applies padding via shorthand, but
   :nth-child(3)'s explicit padding-left:0 (specificity 0,2,0) wins over
   the shorthand (specificity 0,1,0), making the third Why-Us card on
   mobile appear flush-left. Restore symmetric padding here. */
.feat:nth-child(3) { padding-left: clamp(20px, 2.5vw, 28px) !important; }
.feat:nth-child(2) { padding-right: clamp(20px, 2.5vw, 28px) !important; }

/* Bug 2: Strip the outer pill capsule from the mobile sticky bar.
   Each CTA button already has its own pill background + border-radius
   + shadow, so removing the wrapper makes them appear as two standalone
   floating pills with breathing room between them. */
.mob-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  gap: 10px !important;
}