/* ============================================================
   KH BATHROOM & KITCHEN RENOVATIONS – SUB-PAGE STYLESHEET
   ------------------------------------------------------------
   Self-contained: this single file carries BOTH the shared site
   styles (header, footer, buttons, gallery, process, contact,
   loader, mobile menu, animations …) AND the sub-page styles.
   Service pages link ONLY this file – no style.css needed.

   PART 1 : Shared site styles      (same source as css/style.css)
   PART 2 : Sub-page styles         (.sp-* – service pages only)
   ============================================================ */

/* ============================================================
   PART 1 — SHARED SITE STYLES
   ============================================================ */

/* ============================================================
   KH BATHROOM & KITCHEN RENOVATIONS – PREMIUM STYLESHEET
   Dark luxury theme | Plus Jakarta Sans + Outfit
   ============================================================ */

/* ── 1. CSS VARIABLES ─────────────────────────────────────── */
:root {
  /* Core palette */
  --bg-deep:      #0a0a0a;
  --bg-dark:      #141414;
  --bg-card:      #141414;
  --bg-card-h:    #1b1b1b;
  --border:       #222222;
  --border-light: #2a2a2a;

  /* Accent: warm gold (from KH logo warmth) – used generously */
  --gold:         #2a94ff;
  --gold-dim:     #83807C;
  --gold-glow:    rgba(148,144,137,.18);

  /* Red: absolute minimum use – only urgent CTAs */
  --red:          #2a94ff;

  /* Text */
  --text-white:   #ffffff;
  --text-light:   #cccccc;
  --text-grey:    #888888;
  --text-dim:     #555555;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Outfit', sans-serif;

  /* Spacing */
  --section-py:   100px;
  --container:    1200px;
  --radius:       6px;
  --radius-lg:    12px;

  /* Transitions */
  --ease:         cubic-bezier(.4,0,.2,1);
  --fast:         .2s;
  --mid:          .4s;
  --slow:         .7s;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-light);
  line-height: 1.7;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; transition: color var(--fast) var(--ease); }
ul  { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
input, select, textarea {
  font: inherit;
  color: var(--text-light);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: .85rem 1.2rem;
  width: 100%;
  outline: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
select option { background: var(--bg-dark); }
textarea { resize: vertical; min-height: 110px; }

/* ── 3. UTILITIES ─────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.section { padding-block: var(--section-py); position: relative; }
.section-header { max-width: 640px; }
.section-header.centered { margin-inline: auto; text-align: center; }

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .85rem;
  padding: .3rem .8rem;
  border: 1px solid var(--gold-dim);
  border-radius: 50px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}
.section-desc {
  color: var(--text-grey);
  font-size: 1.05rem;
  max-width: 560px;
  margin-inline: auto;
}
.gold-text { color: var(--gold); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  padding: .85rem 2rem;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 24px rgba(42,148,255,.3);
}
.btn-primary:hover { box-shadow: 0 10px 32px rgba(42,148,255,.4); }
.btn-outline {
  background: transparent;
  color: var(--text-white);
  border: 2px solid rgba(255,255,255,.35);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-white {
  background: var(--text-white);
  color: #111;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.btn-white svg { width: 16px; height: 16px; stroke: #111; }
.btn-full { width: 100%; justify-content: center; }

/* Ripple effect */
.ripple { overflow: hidden; }
.ripple::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .5s, height .5s, opacity .5s;
  opacity: 0;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
}
.ripple.ripple-active::after { width: 300px; height: 300px; opacity: 0; }

/* ── 4. PAGE LOADER ───────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg-deep);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo { margin-bottom: 2rem; animation: pulse 1.5s ease infinite; }
.loader-logo img { width: 140px; filter: brightness(1.1); }
.loader-bar {
  width: 200px;
  height: 2px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
}
.loader-bar span {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  animation: loading-bar 1.8s ease-in-out forwards;
}
@keyframes loading-bar {
  0%   { width: 0; }
  60%  { width: 80%; }
  100% { width: 100%; }
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ── 5. SCROLL PROGRESS ───────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--red));
  z-index: 9999;
  transition: width .1s linear;
}

/* ── 6. SCROLL TO TOP ─────────────────────────────────────── */
.scroll-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 46px;
  height: 46px;
  background: var(--gold);
  color: var(--bg-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), background var(--fast);
  box-shadow: 0 4px 20px rgba(200,169,110,.35);
}
.scroll-top-btn.visible { opacity: 1; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--text-white); }
.scroll-top-btn svg { width: 20px; height: 20px; }

/* ── 7. HEADER ────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.site-header.scrolled .header-topbar { height: 0; overflow: hidden; opacity: 0; padding: 0; }
.site-header.scrolled .header-nav { background: rgba(10,10,10,.96); backdrop-filter: blur(16px); box-shadow: 0 2px 30px rgba(0,0,0,.5); }

/* Topbar */
.header-topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  color: var(--text-grey);
  height: 40px;
  transition: height var(--mid), opacity var(--mid), padding var(--mid);
  overflow: hidden;
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 40px;
}
.topbar-item {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.topbar-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.topbar-item a:hover { color: var(--gold); }
.topbar-social {
  margin-left: auto;
  display: flex;
  gap: .75rem;
}
.topbar-social a { color: var(--text-grey); transition: color var(--fast); }
.topbar-social a:hover { color: var(--gold); }
.topbar-social svg { width: 16px; height: 16px; }

/* Nav bar */
.header-nav { background: transparent; transition: background var(--mid) var(--ease); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1rem;
}
.nav-logo img { height: 52px; width: auto; transition: opacity var(--fast); }
.nav-logo:hover img { opacity: .85; }

/* Desktop nav menu */
.nav-menu {
  display: flex;
  gap: 0;
  margin-left: auto;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: block;
  padding: .6rem .9rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .88rem;
  color: rgba(255,255,255,.8);
  letter-spacing: .02em;
  position: relative;
  transition: color var(--fast);
}
.nav-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: .9rem; right: .9rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fast) var(--ease);
}
.nav-menu > li > a:hover,
.nav-menu > li > a:focus { color: var(--gold); }
.nav-menu > li > a:hover::after { transform: scaleX(1); }

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  min-width: 200px;
  padding: .5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--fast) var(--ease);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  z-index: 100;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown li a {
  display: block;
  padding: .55rem 1.2rem;
  font-size: .875rem;
  color: var(--text-light);
  transition: color var(--fast), background var(--fast);
}
.dropdown li a:hover { color: var(--gold); background: rgba(200,169,110,.07); }

/* Nav CTAs */
.nav-ctas {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.btn-phone {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  color: var(--gold);
  white-space: nowrap;
  transition: color var(--fast);
}
.btn-phone svg { width: 16px; height: 16px; }
.btn-phone:hover { color: var(--text-white); }
.btn-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  padding: .6rem 1.2rem;
  background: var(--red);
  color: #fff;
  border-radius: 50px;
  transition: background var(--fast), transform var(--fast);
}
.btn-quote:hover { background: #1177e0; transform: translateY(-1px); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 5px;
}
.hamburger span {
  display: block;
  height: 2px;
  background: var(--text-white);
  border-radius: 2px;
  transition: transform var(--mid) var(--ease), opacity var(--fast);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 8. MOBILE OFF-CANVAS MENU ────────────────────────────── */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  z-index: 1998;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mid), visibility var(--mid);
}
.mobile-overlay.open { opacity: 1; visibility: visible; }

.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: min(340px, 90vw);
  height: 100vh;
  background: var(--bg-card);
  border-left: 1px solid var(--border-light);
  z-index: 1999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--mid) var(--ease);
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-menu-header img { height: 44px; width: auto; }
.menu-close {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-grey);
  transition: color var(--fast);
}
.menu-close:hover { color: var(--text-white); }
.menu-close svg { width: 22px; height: 22px; }

.mobile-nav-list { padding: 1rem 0; flex: 1; }
.mobile-nav-list li { border-bottom: 1px solid var(--border); }
.mobile-nav-list > li > a,
.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-light);
  width: 100%;
  transition: color var(--fast), background var(--fast);
}
.mobile-nav-list > li > a:hover,
.mobile-dropdown-toggle:hover { color: var(--gold); background: rgba(200,169,110,.05); }
.mobile-dropdown-toggle svg { width: 18px; height: 18px; transition: transform var(--fast); }
.mobile-dropdown-toggle.open svg { transform: rotate(180deg); }

.mobile-dropdown {
  display: none;
  background: var(--bg-dark);
  border-top: 1px solid var(--border);
}
.mobile-dropdown.open { display: block; }
.mobile-dropdown li a {
  display: block;
  padding: .75rem 2rem;
  font-size: .9rem;
  color: var(--text-grey);
  border-bottom: 1px solid var(--border);
  transition: color var(--fast);
}
.mobile-dropdown li a:hover { color: var(--gold); }

.mobile-menu-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex-shrink: 0;
}
.mobile-phone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1rem;
  background: var(--bg-dark);
  border: 1px solid var(--border-light);
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
  font-size: 1rem;
}
.mobile-phone-btn svg { width: 18px; height: 18px; }
.mobile-quote-btn { text-align: center; border-radius: 50px; }
.mobile-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-top: .5rem;
}
.mobile-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-dark);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  color: var(--text-grey);
  transition: color var(--fast), border-color var(--fast);
}
.mobile-social a:hover { color: var(--gold); border-color: var(--gold); }
.mobile-social svg { width: 18px; height: 18px; }

/* ── 9. HERO SECTION ──────────────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 100px;
}

/* ── Hero Video Background ─────────────────────────────────── */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* starts fully visible; JS fades it out after the clip ends */
  transition: opacity 0.8s ease;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.72) contrast(1.05);
  display: block;
}

/* On mobile keep full coverage but shift crop point toward center-action */
@media (max-width: 767px) {
  .hero-video { object-position: 65% center; }
}

/* Reduce-motion: hide video, show poster only */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* ── Hero Slideshow (initially hidden, shown after video ends) ─ */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Hidden until video finishes */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
/* JS adds .active class to reveal it */
.hero-slideshow.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s var(--ease), transform 8s linear;
}
.hero-slide.active { opacity: 1; transform: scale(1); }

/* Slideshow dots hidden until slideshow is active */
.hero-dots {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.hero-dots.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.6)  50%,
    rgba(0,0,0,.75) 100%
  );
  z-index: 1;
}

/* Floating shapes */
.hero-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .06;
}
.shape-1 {
  width: 500px; height: 500px;
  top: -10%; right: -5%;
  background: var(--gold);
  animation: float-shape 12s ease-in-out infinite;
}
.shape-2 {
  width: 300px; height: 300px;
  bottom: 10%; left: -5%;
  background: var(--red);
  animation: float-shape 10s ease-in-out infinite reverse;
}
.shape-3 {
  width: 200px; height: 200px;
  top: 40%; right: 20%;
  background: var(--gold);
  animation: float-shape 8s ease-in-out infinite;
}
@keyframes float-shape {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-20px) scale(1.1); }
  66% { transform: translate(-20px,15px) scale(.95); }
}

/* KH Monogram watermark */
.hero-monogram {
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(160px, 22vw, 320px);
  font-weight: 900;
  color: rgba(255,255,255,.025);
  letter-spacing: -.04em;
  user-select: none;
  pointer-events: none;
  z-index: 1;
  line-height: 1;
}

/* Hero split layout */
.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 2.5rem;
  align-items: center;
  padding-block: 5rem 4rem;
  min-height: calc(100vh - 100px);
}
.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 680px;
}
.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Legacy hero-content kept for JS compat */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding-block: 4rem;
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  padding: .35rem 1rem;
  border: 1px solid rgba(200,169,110,.4);
  border-radius: 50px;
  background: rgba(200,169,110,.07);
  backdrop-filter: blur(8px);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -.02em;
}
.hero-title .title-line { display: block; }
.hero-title .gold-text { color: var(--gold); }

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,.72);
  max-width: 580px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

/* Hero stat badges */
.hero-badges {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: .75rem 1.5rem;
  width: fit-content;
}
.hero-badge { text-align: center; padding-inline: 1.5rem; }
.hero-badge:first-child { padding-left: 0; }
.hero-badge:last-child  { padding-right: 0; }
.badge-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.badge-label {
  display: block;
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  margin-top: .25rem;
  white-space: nowrap;
}
.hero-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.15);
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  z-index: 2;
  color: rgba(255,255,255,.5);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.scroll-mouse {
  width: 22px;
  height: 36px;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}
.scroll-wheel {
  width: 3px;
  height: 8px;
  background: var(--gold);
  border-radius: 3px;
  animation: scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%,100% { transform: translateY(0); opacity: 1; }
  80% { transform: translateY(14px); opacity: 0; }
}

/* Hero dots */
.hero-dots {
  position: absolute;
  bottom: 2.5rem;
  right: 3rem;
  display: flex;
  gap: .5rem;
  z-index: 2;
}
.dot {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.3);
  transition: background var(--fast), width var(--fast);
}
.dot.active { background: var(--gold); width: 44px; }

/* ── 10. ABOUT SECTION ────────────────────────────────────── */
.about-section { background: var(--bg-dark); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* Image collage */
.img-collage {
  position: relative;
  height: 560px;
}
.img-main {
  position: absolute;
  top: 0; left: 0;
  width: 65%;
  height: 75%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.img-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.img-main:hover img { transform: scale(1.04); }

.img-secondary {
  position: absolute;
  bottom: 0; right: 0;
  width: 50%;
  height: 52%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  border: 4px solid var(--bg-dark);
}
.img-secondary img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.img-secondary:hover img { transform: scale(1.04); }

.img-accent11 {
  position: absolute;
  top: 40%;
  right: 0;
  width: 42%;
  height: 38%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,.5);
  border: 4px solid var(--bg-dark);
}

.img-accent {
    position: absolute;
    top: 35%;
    right: 3px;
    width: 53%;
    height: 63%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .5);
    border: 4px solid var(--bg-dark);
}
.img-accent img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.img-accent:hover img { transform: scale(1.04); }

/* Experience badge */
/* Experience badge – rotating ring */
.exp-badge {
  position: absolute;
  bottom: 10%;
  left: -10%;
  width: 140px;
  height: 140px;
  z-index: 4;
}
.exp-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: exp-ring-spin 10s linear infinite;
  transform-origin: center center;
}
@keyframes exp-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.exp-ring-text {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  fill: var(--gold);
  text-transform: uppercase;
}
.exp-disc {
  position: absolute;
  inset: 18%;
  background: linear-gradient(135deg, var(--gold) 0%, #b8941f 100%);
  color: var(--bg-deep);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 32px rgba(200,169,110,.5), inset 0 1px 0 rgba(255,255,255,.3);
  border: 2px solid rgba(255,255,255,.2);
}
.exp-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}
.exp-label {
  display: block;
  font-size: .55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .2rem;
  line-height: 1.3;
}

/* About text content */
.about-content { padding-left: 1rem; }
.about-lead {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: 1rem;
  line-height: 1.7;
}
.about-body { color: var(--text-grey); margin-bottom: 1.5rem; }
.about-features {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-bottom: 2rem;
}
.about-features li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: var(--text-light);
  font-size: .95rem;
}
.feature-check {
  width: 22px;
  height: 22px;
  background: rgba(200,169,110,.15);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  border-radius: 50%;
  font-size: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
}

/* Counters */
.about-counters {
  display: flex;
  gap: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.counter-item { text-align: center; }
.counter-item .counter,
.counter-item .counter-suffix {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.counter-label {
  display: block;
  font-size: .8rem;
  color: var(--text-grey);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .3rem;
}

/* ── 11. SERVICES SECTION ─────────────────────────────────── */
.services-section {
  background: var(--bg-deep);
  overflow: hidden;
  position: relative; /* ensure stacking context */
}

/* ── Services video background (desktop only) ─────────────── */
.svc-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.svc-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.5) saturate(0.6);
}
.svc-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(5, 5, 10, 0.93) 0%,
    rgba(10, 8, 5, 0.88) 50%,
    rgba(5, 5, 10, 0.93) 100%
  );
}
/* section-bg-pattern and container must sit above the overlay */
.services-section .section-bg-pattern { z-index: 2; }
.services-section .container { position: relative; z-index: 3; }

/* Mobile: hide video, rely on solid background */
@media (max-width: 767px) {
  .svc-video-wrap  { display: none; }
  .svc-video-overlay { display: none; }
  .services-section { background: var(--bg-deep); }
}
.section-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.03) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
.service-card--wide { grid-column: span 1; }

/* Service card */
.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--mid);
  position: relative;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(0,0,0,.5);
  border-color: var(--gold-dim);
}
.service-card-img {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.service-card:hover .service-card-img img { transform: scale(1.06); }
.card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.7) 100%);
}

.service-card-body {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-icon {
  width: 52px;
  height: 52px;
  background: rgba(200,169,110,.1);
  border: 1px solid rgba(200,169,110,.25);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: background var(--fast), border-color var(--fast);
}
.service-card:hover .service-icon { background: rgba(200,169,110,.2); border-color: var(--gold-dim); }
.service-icon svg { width: 26px; height: 26px; stroke: var(--gold); }

.service-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: .75rem;
}
.service-desc { color: var(--text-grey); font-size: .92rem; margin-bottom: 1.25rem; }

.service-sub-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1.5rem;
  flex: 1;
}
.service-sub-list li {
  font-size: .84rem;
  color: var(--text-grey);
  padding-left: 1rem;
  position: relative;
}
.service-sub-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: .8rem;
}

.service-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
  flex: 1;
}
.service-ranges span {
  font-size: .78rem;
  padding: .3rem .75rem;
  background: rgba(200,169,110,.08);
  border: 1px solid rgba(200,169,110,.2);
  border-radius: 50px;
  color: var(--gold);
  transition: background var(--fast);
}
.service-ranges span:hover { background: rgba(200,169,110,.2); }

.service-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--gold);
  transition: gap var(--fast), color var(--fast);
}
.service-link svg { width: 16px; height: 16px; transition: transform var(--fast); }
.service-link:hover { color: var(--text-white); }
.service-link:hover svg { transform: translateX(4px); }

/* ── 12. WHY CHOOSE US ────────────────────────────────────── */
.why-section { background: var(--bg-dark); }
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.why-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.why-img-wrap img { width: 100%; height: 520px; object-fit: cover; display: block; }
.why-img-badge {
  position: absolute;
  bottom: -20px;
  right: -15px;
  background: var(--bg-dark);
  border: 2px solid var(--border-light);
  border-radius: 50%;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  z-index: 2;
}
.why-img-badge img { width: 70px; height: 70px; object-fit: contain; }

.review-badges {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.review-badge {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--fast);
  max-width: 160px;
}
.review-badge:hover { transform: scale(1.03); }
.review-badge img { width: 100%; height: auto; }

/* Why features */
.why-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.why-feature {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--fast), transform var(--fast);
}
.why-feature:hover { border-color: var(--gold-dim); transform: translateX(4px); }
.why-feature-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: rgba(200,169,110,.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
}
.why-feature-icon img { width: 100%; height: 100%; object-fit: contain; }
.why-feature-text h4 {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: .35rem;
}
.why-feature-text p { font-size: .88rem; color: var(--text-grey); }

/* Progress bars */
.progress-bars { display: flex; flex-direction: column; gap: 1rem; }
.progress-item { }
.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: .5rem;
}
.progress-pct { color: var(--gold); }
.progress-track {
  height: 5px;
  background: var(--border-light);
  border-radius: 5px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  border-radius: 5px;
  width: 0%;
  transition: width 1.2s var(--ease);
}

/* ── 13. GALLERY SECTION ──────────────────────────────────── */
.gallery-section1 { background: var(--bg-deep); }





/* Gallery section – fixed parallax background */
.gallery-section {
  position: relative;
  background-image: url('../images/nbg6.jpg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  /* NO overflow:hidden – it breaks fixed bg-attachment */
  z-index: 1;
}
.gallery-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(5,5,10,0.88);
  z-index: 0;
  pointer-events: none;
}
.gallery-section > * {
  position: relative;
  z-index: 1;
}







/* Filter tabs */
.gallery-filters {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  justify-content: center;
}
.filter-btn {
  padding: .55rem 1.3rem;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-grey);
  border: 1px solid var(--border-light);
  border-radius: 50px;
  background: transparent;
  transition: all var(--fast) var(--ease);
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--gold);
  color: var(--bg-deep);
  border-color: var(--gold);
}

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  transition: transform var(--mid) var(--ease);
}
.gallery-item:nth-child(3n+1) { aspect-ratio: 4/5; }
.gallery-item:hover { transform: scale(1.02); z-index: 2; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.08); }

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity var(--mid) var(--ease);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-info h4 {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .2rem;
}
.gallery-info span { font-size: .8rem; color: var(--gold); }

.gallery-zoom-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--fast);
}
.gallery-zoom-btn:hover { background: var(--gold); color: var(--bg-deep); }
.gallery-zoom-btn svg { width: 18px; height: 18px; }

.gallery-item.hidden { display: none; }

/* ── 14. PROCESS SECTION ──────────────────────────────────── */
.process-section { background: var(--bg-dark); }
.section-bg-dark { position: absolute; inset: 0; background: var(--bg-dark); }
.process-section .parallax-overlay {
    position: absolute;
    inset: 0;
    background: rgb(41 61 81 / 81%);
    z-index: 1;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: start;
  gap: 0;
  margin-top: 4rem;
}
.process-step {
  text-align: center;
  padding: 2rem 1.5rem;
  position: relative;
  grid-column: span 2;
}
.process-step:last-child { grid-column: 6 / 8; }
.process-connector {
  grid-column: span 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3.5rem;
}
.process-connector::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), rgba(200,169,110,.2));
}

.process-step-num {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: .75rem;
}
.process-icon {
  width: 70px;
  height: 70px;
  background: rgba(200,169,110,.08);
  border: 1px solid rgba(200,169,110,.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  transition: background var(--fast), transform var(--fast);
}
.process-step:hover .process-icon {
  background: rgba(200,169,110,.18);
  transform: scale(1.08);
}
.process-icon svg { width: 30px; height: 30px; stroke: var(--gold); }
.process-step h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: .7rem;
}
.process-step p { font-size: .88rem; color: var(--text-grey); }

/* ── 15. TESTIMONIALS ─────────────────────────────────────── */
.testimonials-section { background: var(--bg-deep); }

.testimonials-screenshot {
  margin-bottom: 3rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  max-width: 800px;
  margin-inline: auto;
}
.testimonials-screenshot img { width: 100%; height: auto; display: block; }

/* Slider */
.testimonials-slider {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
}
.testimonials-track {
  display: flex;
  gap: 1.5rem;
  transition: transform .5s var(--ease);
}
.testimonial-card {
  min-width: calc(50% - .75rem);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  flex-shrink: 0;
  transition: border-color var(--fast);
  position: relative;
}
.testimonial-card:hover { border-color: var(--gold-dim); }

.testimonial-quote {
  font-size: 4rem;
  line-height: .8;
  color: var(--gold);
  font-family: Georgia, serif;
  margin-bottom: .75rem;
  opacity: .4;
}
.testimonial-text {
  font-size: .96rem;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  font-style: italic;
}
.testimonial-stars { color: #f5a623; font-size: 1.1rem; margin-bottom: 1.5rem; }
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.testimonial-avatar {
  width: 46px;
  height: 46px;
  background: var(--gold);
  color: var(--bg-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.testimonial-author strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-white);
  font-size: .95rem;
}
.testimonial-author span {
  display: block;
  font-size: .82rem;
  color: var(--text-grey);
}

/* Slider controls */
.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.testimonial-btn {
  width: 44px;
  height: 44px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-grey);
  transition: all var(--fast);
}
.testimonial-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--bg-deep); }
.testimonial-btn svg { width: 20px; height: 20px; }
.testimonials-dots { display: flex; gap: .5rem; }
.t-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-light);
  transition: background var(--fast), width var(--fast);
}
.t-dot.active { background: var(--gold); width: 24px; border-radius: 4px; }

/* ── 16. STATISTICS ───────────────────────────────────────── */
.stats-section {
  position: relative;
  padding-block: 100px;
  overflow: hidden;
}
.stats-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.stats-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
}
.stats-section .container { position: relative; z-index: 1; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat-item {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(200,169,110,.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  transition: transform var(--mid), border-color var(--mid);
}
.stat-item:hover { transform: translateY(-5px); border-color: var(--gold-dim); }
.stat-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  background: rgba(200,169,110,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-icon svg { width: 26px; height: 26px; stroke: var(--gold); }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  margin-bottom: .5rem;
}
.stat-label {
  font-size: .85rem;
  color: var(--text-grey);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── 17. SERVICE AREAS ────────────────────────────────────── */
.areas-section { background: var(--bg-dark); }
.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.area-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-light);
  transition: all var(--fast) var(--ease);
  cursor: default;
}
.area-card svg { width: 18px; height: 18px; stroke: var(--gold); flex-shrink: 0; }
.area-card:hover { border-color: var(--gold-dim); color: var(--gold); transform: translateY(-2px); }
.area-card--cta {
  background: rgba(200,169,110,.08);
  border-color: rgba(200,169,110,.3);
  color: var(--gold);
  cursor: pointer;
}
.area-card--cta:hover { background: rgba(200,169,110,.15); }

/* ── 18. CTA BANNER ───────────────────────────────────────── */
.cta-banner-section {
  position: relative;
  padding-block: 120px;
  text-align: center;
  overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.7) 100%);
}
.cta-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-inline: auto;
}
.cta-content h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--text-white);
  margin-block: 1rem 1.5rem;
}
.cta-content p { color: rgba(255,255,255,.75); margin-bottom: 2.5rem; font-size: 1.05rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── 19. CONTACT SECTION ──────────────────────────────────── */
.contact-section { background: var(--bg-deep); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3.5rem;
}
.contact-form-wrap h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 2rem;
}
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: .5rem; }
.form-group label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-grey);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.form-note { font-size: .8rem; color: var(--text-dim); text-align: center; margin-top: .5rem; }

/* Contact info cards */
.contact-info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.contact-info-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: border-color var(--fast);
}
.contact-info-card:hover { border-color: var(--gold-dim); }
.contact-info-icon {
  width: 44px;
  height: 44px;
  background: rgba(200,169,110,.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info-icon svg { width: 22px; height: 22px; stroke: var(--gold); }
.contact-info-card h4 {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: .4rem;
}
.contact-info-card a,
.contact-info-card span {
  display: block;
  font-size: .88rem;
  color: var(--text-grey);
  transition: color var(--fast);
}
.contact-info-card a:hover { color: var(--gold); }

/* Map */
.contact-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.contact-map iframe { display: block; }

/* ── 20. FOOTER ───────────────────────────────────────────── */
.site-footer { background: var(--bg-card); border-top: 1px solid var(--border); }
.footer-top { padding-block: 80px 50px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
}

.footer-brand p {
  font-size: .9rem;
  color: var(--text-grey);
  line-height: 1.7;
  margin-block: 1.25rem;
}
.footer-logo img { height: 52px; width: auto; }

.footer-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.fh-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--text-grey);
}
.fh-item img { width: 28px; height: 28px; object-fit: contain; }

.footer-social { display: flex; gap: .75rem; }
.footer-social a {
  width: 38px;
  height: 38px;
  background: var(--bg-dark);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-grey);
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.footer-social a:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-glow); }
.footer-social svg { width: 17px; height: 17px; }

.footer-heading {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.footer-links { display: flex; flex-direction: column; gap: .65rem; }
.footer-links li a {
  font-size: .88rem;
  color: var(--text-grey);
  transition: color var(--fast), padding-left var(--fast);
  display: block;
}
.footer-links li a:hover { color: var(--gold); padding-left: 5px; }

.footer-contact { display: flex; flex-direction: column; gap: 1rem; }
.footer-contact li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.footer-contact svg { width: 18px; height: 18px; stroke: var(--gold); flex-shrink: 0; margin-top: 2px; }
.footer-contact a,
.footer-contact span {
  font-size: .88rem;
  color: var(--text-grey);
  display: block;
  transition: color var(--fast);
}
.footer-contact a:hover { color: var(--gold); }

/* Newsletter */
.newsletter-form {
  display: flex;
  gap: 0;
  margin-top: .75rem;
}
.newsletter-form input {
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: none;
  font-size: .88rem;
}
.newsletter-form button {
  padding: 0 1rem;
  background: var(--gold);
  color: var(--bg-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  border: 1px solid var(--gold);
  transition: background var(--fast);
  flex-shrink: 0;
}
.newsletter-form button:hover { background: #dbbe8a; }
.newsletter-form button svg { width: 20px; height: 20px; }

/* Footer bottom */
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-block: 1.25rem;
  background: var(--bg-dark);
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: .82rem; color: var(--text-dim); }
.footer-bottom p strong { color: var(--text-grey); }
.footer-bottom-links { display: flex; gap: .75rem; align-items: center; }
.footer-bottom-links a { font-size: .82rem; color: var(--text-dim); transition: color var(--fast); }
.footer-bottom-links a:hover { color: var(--gold); }
.footer-bottom-links span { color: var(--border-light); }

/* ── 21. LIGHTBOX ─────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mid), visibility var(--mid);
  padding: 2rem;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 46px;
  height: 46px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--fast);
  z-index: 2;
}
.lightbox-close:hover { background: var(--red); border-color: var(--red); }
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-inner { text-align: center; max-width: 90vw; max-height: 90vh; }
.lightbox-inner img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox-inner p { color: var(--text-grey); font-size: .9rem; margin-top: .75rem; }

/* ── 22. TOAST ────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  border: 1px solid var(--gold-dim);
  color: var(--text-white);
  padding: 1rem 2rem;
  border-radius: var(--radius-lg);
  font-size: .9rem;
  z-index: 9000;
  opacity: 0;
  transition: opacity var(--fast), transform var(--fast);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 23. SCROLL REVEAL ANIMATIONS ────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATION SYSTEM  v2
   All elements start invisible; .in-view triggers their entrance
══════════════════════════════════════════════════════════════ */

/* ── Shared hidden state ────────────────────────────────────── */
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-zoom,
.reveal-zoom-in,
.reveal-flip-y,
.reveal-flip-x,
.reveal-skew-left,
.reveal-skew-right,
.reveal-blur,
.reveal-rotate,
.reveal-bounce,
.reveal-fade,
.scroll-fade-in {
  opacity: 0;
  will-change: opacity, transform;
  transition-delay: var(--delay, 0s);
}

/* ── Initial transform states ───────────────────────────────── */
.reveal-up          { transform: translateY(55px); }
.reveal-down        { transform: translateY(-45px); }
.reveal-left        { transform: translateX(-65px); }
.reveal-right       { transform: translateX(65px); }
.reveal-zoom        { transform: scale(0.82); }
.reveal-zoom-in     { transform: scale(1.18); }
.reveal-flip-y      { transform: perspective(700px) rotateY(-28deg); }
.reveal-flip-x      { transform: perspective(700px) rotateX(-22deg); }
.reveal-skew-left   { transform: translateX(-40px) skewX(7deg); }
.reveal-skew-right  { transform: translateX(40px)  skewX(-7deg); }
.reveal-blur        { transform: translateY(22px); filter: blur(14px) opacity(0); }
.reveal-rotate      { transform: rotate(-6deg) scale(0.9); }
.reveal-bounce      { transform: translateY(65px); }
.reveal-fade        { /* opacity only */ }

/* ── Transition curves (different feel per category) ─────────── */
/* Slides */
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right {
  transition: opacity 0.65s ease,
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Zooms */
.reveal-zoom,
.reveal-zoom-in,
.reveal-rotate {
  transition: opacity 0.6s ease,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 3-D flips */
.reveal-flip-y,
.reveal-flip-x {
  transition: opacity 0.75s ease,
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Skews */
.reveal-skew-left,
.reveal-skew-right {
  transition: opacity 0.6s ease,
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Blur */
.reveal-blur {
  transition: opacity 0.8s ease,
              transform 0.75s ease,
              filter 0.8s ease;
}
/* Bounce */
.reveal-bounce {
  transition: opacity 0.55s ease,
              transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Pure fade */
.reveal-fade,
.scroll-fade-in {
  transition: opacity 0.9s ease;
}

/* ── In-view (triggered by JS observer) ─────────────────────── */
.reveal-up.in-view,
.reveal-down.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-zoom.in-view,
.reveal-zoom-in.in-view,
.reveal-flip-y.in-view,
.reveal-flip-x.in-view,
.reveal-skew-left.in-view,
.reveal-skew-right.in-view,
.reveal-rotate.in-view,
.reveal-bounce.in-view,
.reveal-fade.in-view {
  opacity: 1;
  transform: none;
}
.reveal-blur.in-view {
  opacity: 1;
  transform: none;
  filter: blur(0) opacity(1);
}
.scroll-fade-in.in-view {
  opacity: 1;
}

/* ── Perspective container for 3-D elements ─────────────────── */
.why-section,
.services-section,
.about-section {
  perspective: 1200px;
}

/* ── 24. RESPONSIVE ───────────────────────────────────────── */

/* Tablet */
@media (max-width: 1100px) {
  :root { --section-py: 80px; }
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .img-collage { height: 420px; }
  .why-grid { grid-template-columns: 1fr; gap: 3rem; }
  .why-img-wrap img { height: 380px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card--wide { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: span 2; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .areas-grid { grid-template-columns: repeat(3, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step { grid-column: span 1; }
  .process-step:last-child { grid-column: span 1; }
  .process-connector { display: none; }
}

/* Mobile landscape / large phones */
@media (max-width: 768px) {
  :root { --section-py: 60px; }

  .header-topbar { display: none; }
  .nav-menu { display: none; }
  .btn-phone { display: none; }
  .hamburger { display: flex; }

  .hero-title { font-size: clamp(2.2rem, 8vw, 3rem); }
  .hero-badges { flex-wrap: wrap; width: 100%; }
  .hero-badge { flex: 1 1 80px; }
  .hero-dots { right: 1rem; }

  .about-grid { gap: 2.5rem; }
  .img-collage { height: 340px; }
  .exp-badge { left: 0; }
  .about-counters { gap: 1rem; }

  .services-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item:nth-child(3n+1) { aspect-ratio: 1; }

  .process-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

  .testimonials-track { }
  .testimonial-card { min-width: 100%; }

  .stats-bg { background-attachment: scroll; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .areas-grid { grid-template-columns: repeat(2, 1fr); }

  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .contact-info-cards { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .cta-banner-section { padding-block: 80px; }
  .cta-actions { flex-direction: column; align-items: center; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }

  .scroll-top-btn { bottom: 1.25rem; right: 1.25rem; }
}

/* Small phones */
@media (max-width: 480px) {
  .nav-logo img { height: 44px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-badges { display: none; }

  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item:nth-child(3n+1) { aspect-ratio: 4/3; }

  .process-grid { grid-template-columns: 1fr; }

  .areas-grid { grid-template-columns: 1fr 1fr; }

  .stats-grid { grid-template-columns: 1fr 1fr; }

  .section-title { font-size: 1.75rem; }

  .img-collage { height: 280px; }
  .img-accent { display: none; }

  .about-counters { flex-wrap: wrap; }
  .counter-item { flex: 1 1 100px; }
}

/* ── 25. REDUCED MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .hero-slide { transition: opacity .3s; }
  /* Show all animated elements immediately */
  .reveal-up, .reveal-down, .reveal-left, .reveal-right,
  .reveal-zoom, .reveal-zoom-in, .reveal-flip-y, .reveal-flip-x,
  .reveal-skew-left, .reveal-skew-right, .reveal-blur, .reveal-rotate,
  .reveal-bounce, .reveal-fade, .scroll-fade-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ============================================================
   KH RENOVATIONS – EXTENDED STYLES v2
   Parallax sections, Process redesign, Google widget,
   Nav arrows, Footer icons, Scroll animations
   ============================================================ */

/* ── A. PARALLAX SECTIONS ─────────────────────────────────── */
.parallax-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.parallax-section::before {
  content: '';
  position: absolute;
  inset: -30% 0;
  background-image: var(--parallax-bg, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 0;
}
.parallax-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,8,12,0.85);
  z-index: 1;
}

/* ── B. PROCESS SECTION – REDESIGN ────────────────────────── */
.process-section {
  background: transparent;
}
.process-section .section-bg-dark { display: none; }

.process-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
  position: relative;
}
.process-timeline::before {
  content: '';
  position: absolute;
  top: 80px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--gold) 0%,
    rgba(42,148,255,.6) 50%,
    var(--gold) 100%);
  background-size: 200% auto;
  animation: move-line 3s linear infinite;
  z-index: 0;
  border-radius: 2px;
}
@keyframes move-line {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.proc-card {
  position: relative;
  background: rgba(20,20,26,.9);
  border: 1px solid rgba(42,148,255,.25);
  border-radius: 16px;
  padding: 2.5rem 1.75rem 2rem;
  text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  overflow: hidden;
  z-index: 1;
}
.proc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(42,148,255,.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s;
}
.proc-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(42,148,255,.2), 0 0 0 1px rgba(42,148,255,.4);
  border-color: rgba(42,148,255,.5);
}
.proc-card:hover::before { opacity: 1; }

/* Number badge top-right */
.proc-number {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: rgba(42,148,255,.12);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Icon ring */
.proc-icon-ring {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 1;
}
.proc-icon-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(42,148,255,.3);
  animation: ring-pulse 3s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.12); opacity: 1; }
}
.proc-icon {
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, #1a0808 0%, #2a0a0a 100%);
  border: 2px solid rgba(42,148,255,.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .4s, border-color .4s, transform .4s;
}
.proc-card:hover .proc-icon {
  background: linear-gradient(135deg, rgba(42,148,255,.25) 0%, rgba(42,148,255,.1) 100%);
  border-color: var(--gold);
  transform: rotateY(360deg);
  transition: transform .7s ease, background .4s, border-color .4s;
}
.proc-icon i {
  font-size: 2rem;
  color: var(--gold);
  transition: color .4s;
}
.proc-card:hover .proc-icon i { color: #fff; }

/* Content */
.proc-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: .7rem;
}
.proc-desc {
  font-size: .88rem;
  color: var(--text-grey);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.proc-list {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.proc-list li {
  font-size: .82rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.proc-list li i {
  color: #34A853;
  font-size: .85rem;
  flex-shrink: 0;
}

/* Arrow between cards */
.proc-arrow {
  display: none; /* shown via ::after line instead */
}

/* CTA after process */
.process-cta {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 3.5rem;
  flex-wrap: wrap;
}
.process-cta .btn { display: inline-flex; align-items: center; gap: .5rem; }

/* ── C. GOOGLE REVIEWS WIDGET ─────────────────────────────── */
.google-widget-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.google-review-card {
  background: rgba(18,18,24,.95);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
}
.google-review-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #EA4335, #FBBC05, #34A853, #4285F4);
  border-radius: 16px 16px 0 0;
}
.gr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gr-logo {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.gr-logo strong {
  display: block;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-white);
}
.gr-logo span {
  display: block;
  font-size: .75rem;
  color: var(--text-grey);
}
.gr-view-all {
  font-size: .8rem;
  color: #4285F4;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .3rem;
  transition: color var(--fast);
}
.gr-view-all:hover { color: var(--gold); }

.gr-rating {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.gr-score {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--text-white);
  line-height: 1;
}
.gr-stars {
  font-size: 1.5rem;
  color: #FBBC05;
  letter-spacing: 2px;
  margin-bottom: .3rem;
}
.gr-count {
  font-size: .8rem;
  color: var(--text-grey);
}

.gr-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.gr-review-item {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  transition: border-color var(--fast);
}
.gr-review-item:hover { border-color: rgba(66,133,244,.3); }
.gr-avatar {
  width: 38px;
  height: 38px;
  background: var(--gold);
  color: var(--bg-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  flex-shrink: 0;
}
.gr-reviewer-name {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.gr-stars-sm { color: #FBBC05; font-size: .85rem; }
.gr-review-text {
  font-size: .82rem;
  color: var(--text-grey);
  line-height: 1.5;
  font-style: italic;
}

.gr-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .9rem;
  background: rgba(66,133,244,.1);
  border: 1px solid rgba(66,133,244,.3);
  border-radius: 10px;
  color: #4285F4;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  transition: all .3s var(--ease);
}
.gr-cta-btn:hover {
  background: #4285F4;
  color: #fff;
  border-color: #4285F4;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(66,133,244,.3);
}

/* Facebook review mini */
.fb-review-mini {
  border-radius: 10px;
  overflow: hidden;
}
.fb-review-mini a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: rgba(24,119,242,.08);
  border: 1px solid rgba(24,119,242,.25);
  border-radius: 10px;
  color: var(--text-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  transition: all .3s;
}
.fb-review-mini a:hover {
  background: rgba(24,119,242,.2);
  border-color: #1877F2;
  color: #fff;
}
.fb-review-mini a i.fa-angle-right { margin-left: auto; color: #1877F2; }

/* ── D. NAV DROPDOWN ARROW ────────────────────────────────── */
.nav-arrow {
  font-size: .7rem;
  margin-left: .25rem;
  transition: transform .3s var(--ease);
  display: inline-block;
  vertical-align: middle;
}
.has-dropdown:hover .nav-arrow,
.has-dropdown:focus-within .nav-arrow {
  transform: rotate(180deg);
}

/* Dropdown li Font Awesome icons */
.dropdown li a i {
  width: 10px;
  margin-right: .4rem;
  color: var(--gold);
  font-size: .7rem;
}

/* ── E. FOOTER LINK ICONS ─────────────────────────────────── */
.footer-link-icon {
  color: var(--gold);
  margin-right: .5rem;
  font-size: .8rem;
  transition: transform .2s;
}
.footer-links li a:hover .footer-link-icon {
  transform: translateX(3px);
}
.footer-links li a {
  display: flex;
  align-items: center;
  padding: .3rem 0;
  transition: color var(--fast), padding-left var(--fast);
}
.footer-links li a:hover { padding-left: .3rem; }

/* ── F. WHY-SECTION BACKGROUND OVERRIDE ──────────────────── */
.why-section.parallax-section {
  background: transparent;
}
.why-section.parallax-section .why-grid {
  align-items: start;
}
.why-section.parallax-section .section-title,
.why-section.parallax-section .section-eyebrow,
.why-section.parallax-section .section-desc,
.why-section.parallax-section h2,
.why-section.parallax-section h4,
.why-section.parallax-section p {
  position: relative;
}

/* ── G. STAGGER OVERRIDES ─────────────────────────────────── */
/* Process cards already have --delay via inline style or nth-child */
.proc-card:nth-child(1) { --delay: 0.05s; }
.proc-card:nth-child(2) { --delay: 0.15s; }
.proc-card:nth-child(3) { --delay: 0.25s; }
.proc-card:nth-child(4) { --delay: 0.35s; }

/* Gallery items stagger more tightly */
.gallery-item { --delay: 0s; }
.gallery-item:nth-child(2)  { --delay: 0.05s; }
.gallery-item:nth-child(3)  { --delay: 0.10s; }
.gallery-item:nth-child(4)  { --delay: 0.15s; }
.gallery-item:nth-child(5)  { --delay: 0.20s; }
.gallery-item:nth-child(6)  { --delay: 0.25s; }
.gallery-item:nth-child(7)  { --delay: 0.30s; }
.gallery-item:nth-child(8)  { --delay: 0.35s; }

/* Service card hover boost (3D lift) */
.service-card.in-view:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(200,169,110,.2);
}

/* ── H. RESPONSIVE OVERRIDES FOR NEW SECTIONS ────────────── */
@media (max-width: 1100px) {
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-timeline::before { display: none; }
}

@media (max-width: 768px) {
  .process-timeline {
    grid-template-columns: 1fr;
  }
  .proc-card { padding: 2rem 1.5rem; }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .google-review-card { padding: 1.25rem; }
  .gr-score { font-size: 2.5rem; }
  
  .parallax-section::before {
    background-attachment: scroll;
  }
  .stats-bg { background-attachment: scroll; }
}

@media (max-width: 480px) {
  .process-timeline { gap: 1rem; }
  .gr-rating { gap: .75rem; }
  .gr-score { font-size: 2rem; }
}

/* ============================================================
   KH RENOVATIONS – EXTENDED STYLES v3
   Hero form, Rotating badge, Gallery parallax,
   Footer social reversed, Process angles
   ============================================================ */

/* ── HERO QUOTE FORM CARD ─────────────────────────────────── */
.hero-form-card {
  background: rgba(10,10,16,0.88);
  border: 1px solid rgba(200,169,110,.3);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 30px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(200,169,110,.1),
    inset 0 1px 0 rgba(255,255,255,.06);
  width: 100%;
  max-width: 400px;
  position: relative;
  overflow: hidden;
}
.hero-form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--red), var(--gold));
  background-size: 200% auto;
  animation: shimmer-bar 3s linear infinite;
}
@keyframes shimmer-bar {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.hfc-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hfc-header .hfc-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--red), #0f5fb8);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .85rem;
  box-shadow: 0 8px 20px rgba(42,148,255,.4);
}
.hfc-header .hfc-icon i { font-size: 1.3rem; color: #fff; }
.hfc-header h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: .25rem;
}
.hfc-header p {
  font-size: .8rem;
  color: var(--text-grey);
}

/* Form fields */
.hfc-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1rem;
}
.hfc-field {
  position: relative;
}
.hfc-icon-field {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: .85rem;
  pointer-events: none;
  z-index: 1;
}
.hfc-field textarea + .hfc-icon-field,
.hfc-field:has(textarea) .hfc-icon-field {
  top: 1rem;
  transform: none;
}
.hfc-field input,
.hfc-field select,
.hfc-field textarea {
  width: 100%;
  padding: .75rem 1rem .75rem 2.6rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: var(--text-white);
  font-size: .88rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
  outline: none;
  font-family: var(--font-body);
}
.hfc-field input::placeholder,
.hfc-field select::placeholder,
.hfc-field textarea::placeholder {
  color: rgba(255,255,255,.38);
}
.hfc-field input:focus,
.hfc-field select:focus,
.hfc-field textarea:focus {
  border-color: var(--gold);
  background: rgba(200,169,110,.08);
  box-shadow: 0 0 0 3px rgba(200,169,110,.12);
}
.hfc-field select option { background: #1a1a22; color: #fff; }
.hfc-field textarea { resize: none; min-height: 70px; padding-top: 1rem; }

/* Force icon align for textarea */
.hfc-field:has(textarea) .hfc-icon-field {
  top: 1rem;
  transform: none;
}

.hfc-submit {
  width: 100%;
  padding: .9rem;
  background: linear-gradient(135deg, var(--red) 0%, #0f5fb8 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 20px rgba(42,148,255,.4);
  letter-spacing: .02em;
}
.hfc-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(42,148,255,.5);
}
.hfc-submit i { font-size: .9rem; }

.hfc-trust {
  text-align: center;
  font-size: .78rem;
  color: var(--text-grey);
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.hfc-stars { color: #f5a623; font-size: .9rem; letter-spacing: 1px; }

/* ── MOBILE HERO QUOTE FORM ───────────────────────────────── */
.hero-mobile-form-wrap {
  display: none; /* shown only on mobile via media query */
  background: var(--bg-dark);
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--border);
}
.mobile-form-card {
  background: var(--bg-card);
  border: 1px solid rgba(200,169,110,.2);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  position: relative;
  overflow: hidden;
}
.mobile-form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--red));
}
.mobile-form-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.mobile-form-card h3 i { color: var(--gold); }
.mobile-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 480px) {
  .mobile-form-row { grid-template-columns: 1fr; }
}

/* ── FOOTER SOCIAL REVERSED COLORS ───────────────────────── */
.footer-social {
  display: flex;
  gap: .6rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  transition: transform .25s, box-shadow .25s;
  text-decoration: none;
  flex-shrink: 0;
}
.footer-social a:hover { transform: translateY(-3px) scale(1.08); }
.fsoc-fb   { background: #1877F2; color: #fff; box-shadow: 0 4px 14px rgba(24,119,242,.4); }
.fsoc-google { background: #EA4335; color: #fff; box-shadow: 0 4px 14px rgba(234,67,53,.4); }
.fsoc-insta {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(253,89,73,.4);
}
.fsoc-phone { background: #25D366; color: #fff; box-shadow: 0 4px 14px rgba(37,211,102,.4); }
.fsoc-fb:hover    { background: #1558b0; }
.fsoc-google:hover { background: #c23321; }
.fsoc-phone:hover { background: #1ea952; }

/* ── TOPBAR SOCIAL ICONS ─────────────────────────────────── */
.topbar-social a {
  color: var(--text-grey);
  font-size: .9rem;
  transition: color var(--fast);
  line-height: 1;
}
.topbar-social a:hover { color: var(--gold); }

/* ── GALLERY SECTION – close the container properly ─────── */
.gallery-section.parallax-section > .container { padding-bottom: 0; }

/* ── PROCESS ICON COLOR (angle-right override) ───────────── */
.proc-list li i.fa-angle-right {
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── HERO LAYOUT RESPONSIVE ──────────────────────────────── */
@media (max-width: 1100px) {
  .hero-layout {
    grid-template-columns: 1fr 380px;
    gap: 2rem;
  }
}

@media (max-width: 900px) {
  .hero-layout {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 4rem 3rem;
  }
  .hero-right { display: none; } /* hide desktop form, show mobile form below */
  .hero-mobile-form-wrap { display: block; }
  .hero-left { align-items: flex-start; max-width: 100%; }
}

@media (max-width: 480px) {
  .hero-layout { padding-block: 3rem 2rem; }
  .hero-mobile-form-wrap { padding: 1.5rem 0 2rem; }
  .mobile-form-card { padding: 1.25rem; }
}

/* Keep about-section img-accent visible (override small-screen hide) */
@media (max-width: 480px) {
  .img-collage { height: 340px; }
  .exp-badge { width: 110px; height: 110px; left: 0; bottom: 8%; }
}

/* ============================================================
   KH RENOVATIONS – EXTENDED STYLES v4
   Form 2-col rows, Topbar quote btn, Call btn, Floating icons,
   Mobile contact row, Gallery bg fix, Mobile responsive
   ============================================================ */

/* ── FORM 2-COLUMN ROW ────────────────────────────────────── */
.hfc-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
@media (max-width: 500px) {
  .hfc-row-2 { grid-template-columns: 1fr; }
}

/* ── TOPBAR QUOTE BUTTON ──────────────────────────────────── */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}
.topbar-quote-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .9rem;
  background: var(--gold);
  color: var(--bg-deep) !important;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  border-radius: 50px;
  transition: background var(--fast), transform var(--fast);
  white-space: nowrap;
}
.topbar-quote-btn:hover {
  background: #1177e0;
  transform: translateY(-1px);
}
.topbar-quote-btn i { font-size: .72rem; }

/* ── CALL BUTTON (same style as Get Quote) ────────────────── */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  padding: .6rem 1.2rem;
 
  color: #fff;
  border: 2px solid var(--gold);
  border-radius: 50px;
  white-space: nowrap;
  transition: all .2s var(--ease);
  Background #2a94ff!important;
}

a.btn-call {
    background: #2a94ff;
}
.btn-call:hover {
  background: var(--gold);
  color: var(--bg-deep);
}
.btn-call i { font-size: .85rem; }

/* ── MOBILE TOP CONTACT ROW ───────────────────────────────── */
.mobile-contact-toprow {
  display: flex;
  align-items: center;
  background: var(--gold);
  padding: .6rem 1.5rem;
  gap: .75rem;
  flex-wrap: wrap;
}
.mct-phone, .mct-email {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--bg-deep);
  text-decoration: none;
  transition: opacity .2s;
}
.mct-phone:hover, .mct-email:hover { opacity: .8; }
.mct-phone { flex: 1; }
.mct-email {
  border-left: 1px solid rgba(0,0,0,.2);
  padding-left: .75rem;
  flex: 1;
  justify-content: flex-end;
}
.mct-phone i, .mct-email i { font-size: .82rem; }

/* ── MOBILE PHONE BUTTON ALT ──────────────────────────────── */
.mobile-phone-btn--alt {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-grey);
}

/* ── FLOATING CONTACT BUTTONS ─────────────────────────────── */
.floating-contacts {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 990;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.float-btn {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  width: 48px;
  height: 48px;
  border-radius: 0 6px 6px 0;
  transition: width .35s var(--ease), box-shadow .25s;
  white-space: nowrap;
  position: relative;
}
.float-btn:hover {
  width: 150px;
  box-shadow: 4px 0 20px rgba(0,0,0,.4);
}
.float-btn i {
  min-width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.float-label {
  padding-right: 12px;
  opacity: 0;
  transition: opacity .2s .1s;
  font-size: .8rem;
}
.float-btn:hover .float-label { opacity: 1; }

.float-phone   { background: #2a94ff; color: #fff; }
.float-email   { background: #4285F4; color: #fff; }
.float-whatsapp { background: #25D366; color: #fff; }

/* ── GALLERY MOBILE ATTACHMENT FIX ───────────────────────── */
@media (max-width: 768px) {
  .gallery-section {
    background-attachment: scroll;
  }
}

/* ── HEADER TOPBAR – hide quote btn on small screens ─────── */
@media (max-width: 900px) {
  .topbar-quote-btn { display: none; }
  .header-topbar { display: none; }
  /* Show mobile form wrap */
  .hero-mobile-form-wrap { display: block; }
}

/* ── FLOATING BUTTONS MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
  .floating-contacts {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: row;
    width: 100%;
    justify-content: stretch;
  }
  .float-btn {
    flex: 1;
    width: auto;
    height: 52px;
    border-radius: 0;
    justify-content: center;
    gap: .5rem;
  }
  .float-btn:hover { width: auto; }
  .float-label {
    opacity: 1;
    font-size: .78rem;
    padding: 0;
  }
  .float-btn i { min-width: auto; }
  /* Push scroll-top above floating bar */
  .scroll-top-btn { bottom: 5rem; }
}

/* ── TOPBAR SOCIAL ICONS SIZE ─────────────────────────────── */
.topbar-social { display: flex; gap: .6rem; align-items: center; }
.topbar-social a { font-size: .88rem; }

/* ============================================================
   KH RENOVATIONS – EXTENDED STYLES v5
   Gallery equal-height + View More, Guarantee badge,
   Mobile form !important, Mobile 2-row contact
   ============================================================ */

/* ── 1. GALLERY EQUAL HEIGHT + VIEW MORE ─────────────────── */

/* Override unequal aspect-ratio rule */
.gallery-item { aspect-ratio: 4 / 3 !important; }
.gallery-item:nth-child(3n+1) { aspect-ratio: 4 / 3 !important; }

/* Hidden extra items */
.gallery-extra { display: none !important; }
.gallery-extra.visible { display: block !important; }

/* View More button wrapper */
.gallery-view-more {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  padding-bottom: 0.5rem;
}
.btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 2.5rem;
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s var(--ease);
  letter-spacing: .03em;
}
.btn-view-more:hover {
  background: var(--gold);
  color: var(--bg-deep);
  box-shadow: 0 10px 30px rgba(200,169,110,.35);
  transform: translateY(-2px);
}
.btn-view-more.expanded { border-color: var(--text-grey); color: var(--text-grey); }
.btn-view-more.expanded:hover { background: var(--text-grey); color: var(--bg-deep); }
.vm-chevron {
  font-size: .8rem;
  transition: transform .3s;
}
.btn-view-more.expanded .vm-chevron { transform: rotate(180deg); }

/* ── 2. MOBILE BANNER FORM – FORCE SHOW ──────────────────── */
@media (max-width: 900px) {
  .hero-right { display: none !important; }
  .hero-mobile-form-wrap { display: block !important; }
  .hero-layout { grid-template-columns: 1fr !important; }
}

/* ── 3. GUARANTEE ROTATING BADGE IN HERO ─────────────────── */
.hero-guarantee-badge {
  position: relative;
  width: 140px;
  height: 140px;
  margin-top: 2rem;
  flex-shrink: 0;
  cursor: default;
  /* Subtle entrance pop */
  animation: badge-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
  animation-delay: 0.9s;
}
@keyframes badge-pop {
  from { opacity:0; transform:scale(0.6) rotate(-20deg); }
  to   { opacity:1; transform:scale(1) rotate(0deg); }
}
.guarantee-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: exp-ring-spin 8s linear infinite;
  transform-origin: center center;
}
.guarantee-ring-text {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  fill: var(--gold);
  text-transform: uppercase;
}
.guarantee-disc {
  position: absolute;
  inset: 18%;
  background: linear-gradient(135deg, var(--gold) 0%, #9a6e00 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--bg-deep);
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 28px rgba(200,169,110,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.guarantee-disc i    { font-size: 1.05rem; line-height: 1; margin-bottom: .1rem; }
.guarantee-pct       { font-family: var(--font-display); font-size: .9rem; font-weight: 900; line-height: 1; }
.guarantee-sub       { font-size: .44rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.3; margin-top: .15rem; }

/* ── 4. MOBILE CONTACT – 2 FULL-WIDTH STACKED ROWS ──────── */
.mobile-contact-toprow {
  display: flex;
  flex-direction: column;   /* stack vertically */
  background: transparent;
  padding: 0;
  gap: 0;
}
.mct-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.4rem;
  text-decoration: none;
  transition: opacity .2s;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mct-row:hover { opacity: .85; }

.mct-phone {
  background: linear-gradient(90deg, #2a94ff 0%, #0f5fb8 100%);
  color: #fff;
}
.mct-email {
  background: linear-gradient(90deg, #1877F2 0%, #0d5abf 100%);
  color: #fff;
}
.mct-icon {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mct-icon i { font-size: .95rem; color: #fff; }
.mct-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mct-label {
  font-size: .68rem;
  font-weight: 500;
  opacity: .8;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.2;
}
.mct-value {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.3;
}
.mct-arrow { font-size: .75rem; opacity: .6; }

/* ── Gallery mobile: 2 col on small screens ──────────────── */
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .gallery-item { aspect-ratio: 1 !important; }
  .gallery-item:nth-child(3n+1) { aspect-ratio: 1 !important; }
}

/* ============================================================
   KH RENOVATIONS – EXTENDED STYLES v6
   Mobile menu rows, Mobile banner animation, Remove guarantee
   ============================================================ */

/* ── 1. MOBILE MENU FOOTER – SEPARATE ROWS ───────────────── */
.mobile-menu-footer {
  padding: 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}
.mmf-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: filter .2s, opacity .2s;
  cursor: pointer;
}
.mmf-row:hover { filter: brightness(1.12); }
.mmf-row:active { opacity: .85; }

/* Icon circle */
.mmf-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

/* Details text */
.mmf-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.mmf-label {
  font-size: .65rem;
  font-weight: 500;
  opacity: .75;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1;
}
.mmf-val {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmf-arrow { font-size: .7rem; opacity: .5; flex-shrink: 0; }

/* Phone rows */
.mmf-phone  { background: #1a6fc0; color: #fff; }
.mmf-phone2 { background: #1a5aa5; color: #fff; }
.mmf-phone  .mmf-icon { background: rgba(255,255,255,.18); color: #fff; }
.mmf-phone2 .mmf-icon { background: rgba(255,255,255,.15); color: #fff; }

/* Email row */
.mmf-email { background: #1877F2; color: #fff; }
.mmf-email .mmf-icon { background: rgba(255,255,255,.18); color: #fff; }

/* Social section */
.mmf-socials { display: flex; flex-direction: column; }
.mmf-social-row { color: #fff; }
.mmf-fb     { background: #1877F2; }
.mmf-google { background: #EA4335; }
.mmf-insta  { background: radial-gradient(circle at 30% 107%, #fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%); }
.mmf-wa     { background: #25D366; }
.mmf-fb .mmf-icon,
.mmf-google .mmf-icon,
.mmf-insta .mmf-icon,
.mmf-wa .mmf-icon { background: rgba(255,255,255,.18); color: #fff; }

/* ── 2. MOBILE STATIC SERVICE BANNER (replaces marquee) ─────── */
.hero-mobile-banner {
  display: none; /* shown only on mobile via media query */
  background: var(--bg-deep);
  border-top: 2px solid rgba(200,169,110,0.25);
  padding: 1.1rem 0.85rem 1.25rem;
}

/* Section label */
.hmb-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.hmb-label i { font-size: 0.65rem; }

/* 3-column grid of service cards */
.hmb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

/* Individual service card */
.hmb-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--bg-dark);
  cursor: default;
}

.hmb-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.hmb-card:active .hmb-img { transform: scale(1.05); }

.hmb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5,5,10,0.88) 0%,
    rgba(5,5,10,0.25) 55%,
    transparent 100%
  );
}

.hmb-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.55rem 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.hmb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(200,169,110,0.18);
  border: 1px solid rgba(200,169,110,0.4);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.75rem;
}

.hmb-name {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* 6th card – stats + CTA */
.hmb-card--cta {
  background: linear-gradient(135deg, var(--gold) 0%, #8a6200 100%);
}

.hmb-cta-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem;
  text-align: center;
}

.hmb-cta-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--bg-deep);
  line-height: 1;
}

.hmb-cta-text {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--bg-deep);
  opacity: 0.8;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hmb-cta-link {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  background: var(--bg-deep);
  color: var(--gold);
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: opacity 0.2s;
}
.hmb-cta-link:active { opacity: 0.75; }
.hmb-cta-link i { font-size: 0.55rem; }

/* Show static banner on mobile, hide old animation and old form wrap */
@media (max-width: 900px) {
  .hero-mobile-banner { display: block; }
  .hero-mobile-anim { display: none !important; }
  .hero-mobile-form-wrap { display: none !important; }
}

/* ── 3. GUARANTEE BADGE – ENABLED ────────────────────────── */
/* (badge HTML is in hero-left; override the old hide rule)  */
.hero-guarantee-badge { display: flex !important; }

/* ============================================================
   KH RENOVATIONS – EXTENDED STYLES v7
   Mobile Header Full-Width Logo + Phone + Quote
   Mobile Banner Request Form (separate section)
   ============================================================ */

/* ── 1. MOBILE HEADER: LOGO / PHONE / QUOTE ALL FULL WIDTH ── */
@media (max-width: 768px) {

  /* Stack the nav column */
  .nav-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding-block: 0 !important;
    position: relative !important;
  }

  /* Logo row — full width, centred */
  .nav-logo {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.65rem 3.5rem 0.65rem 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .nav-logo img {
    height: 48px !important;
    width: auto !important;
    max-width: 180px !important;
  }

  /* Hamburger: pull out of column flow, pin top-right of logo row */
  .hamburger {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.75rem !important;
    z-index: 5 !important;
  }

  /* Nav-ctas stacks vertically */
  .nav-ctas {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
  }

  /* Phone / call — full-width gold bar */
  .btn-call {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    background: var(--gold) !important;
    color: var(--bg-deep) !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    border-bottom: 1px solid rgba(0,0,0,0.12) !important;
    transition: background 0.2s !important;
  }
  .btn-call:hover {
    background: #1177e0 !important;
    color: var(--bg-deep) !important;
  }

  /* Quote — full-width red bar */
  .btn-quote {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    background: var(--red) !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
    transition: background 0.2s !important;
  }
  .btn-quote:hover {
    background: #0f5fb8 !important;
    transform: none !important;
  }
}

/* ── 2. MOBILE BANNER REQUEST FORM (separate standalone section) ── */
.mobile-banner-reqform {
  display: none;
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-deep) 100%);
  border-top: 3px solid var(--gold);
  position: relative;
  overflow: hidden;
}

/* Subtle background pattern */
.mobile-banner-reqform::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(200,169,110,0.08) 0%, transparent 70%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .mobile-banner-reqform {
    display: block;
  }
}

.mbrf-inner {
  max-width: 500px;
  margin: 0 auto;
  padding: 1.75rem 1rem 2.25rem;
}

.mbrf-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(200,169,110,0.15);
}

.mbrf-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--gold) 0%, #9a6e00 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--bg-deep);
  font-size: 1.2rem;
  box-shadow: 0 6px 20px rgba(200,169,110,0.35);
}

.mbrf-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-white);
  margin: 0 0 0.2rem;
  line-height: 1.2;
}

.mbrf-sub {
  font-size: 0.8rem;
  color: var(--text-grey);
  margin: 0;
}

.mbrf-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mbrf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

@media (max-width: 480px) {
  .mbrf-row {
    grid-template-columns: 1fr;
  }
}

.mbrf-field {
  position: relative;
}

.mbrf-field > i {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 0.78rem;
  pointer-events: none;
  z-index: 1;
}

.mbrf-field input,
.mbrf-field select {
  width: 100%;
  padding: 0.78rem 0.75rem 0.78rem 2.4rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text-white);
  font-size: 0.88rem;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.mbrf-field input:focus,
.mbrf-field select:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(200,169,110,0.12);
}

.mbrf-field input::placeholder {
  color: rgba(255,255,255,0.28);
}

.mbrf-field select option {
  background: #1c1c1c;
  color: #fff;
}

.mbrf-submit {
  width: 100%;
  padding: 0.95rem 1rem;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  margin-top: 0.4rem;
  box-shadow: 0 5px 20px rgba(42,148,255,0.45);
  letter-spacing: 0.025em;
}

.mbrf-submit:hover {
  background: #0f5fb8;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(42,148,255,0.5);
}

.mbrf-submit:active {
  transform: translateY(0);
}

.mbrf-trust {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-grey);
  margin-top: 1.1rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.mbrf-stars {
  color: #f5a623;
  letter-spacing: 1px;
}

/* ============================================================
   HALFTONE DECORATORS – About Section
   ============================================================ */
.halftone-tl,
.halftone-br {
  position: absolute;
  width: 200px;
  height: 160px;
  background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAMgAA/+4ADkFkb2JlAGTAAAAAAf/bAIQACAYGBgYGCAYGCAwIBwgMDgoICAoOEA0NDg0NEBEMDg0NDgwRDxITFBMSDxgYGhoYGCMiIiIjJycnJycnJycnJwEJCAgJCgkLCQkLDgsNCw4RDg4ODhETDQ0ODQ0TGBEPDw8PERgWFxQUFBcWGhoYGBoaISEgISEnJycnJycnJycn/8AAEQgBJQF2AwEiAAIRAQMRAf/EAJcAAQEAAwEBAQEAAAAAAAAAAAABAgMEBQYHCAEBAAMBAQEAAAAAAAAAAAAAAAECAwQFBhAAAgICAQMCBQMDAwUAAAAAAAECAxEEBSExEkETUWEiMgZxgUKRFBWx0SPB4XKCJBEAAgIBAwIEAwcDBAMAAAAAAAERAgMhMRJBBFFhIhOBMgVxkaFCUjMUscEVcoIjQ5KiRP/aAAwDAQACEQMRAD8A/n8pAAZ+UknFNpPuvQxIAAAACrubPetVbpU5KttNwy/HPxwagCU2tm19hWQAEBFRAAdM9zanrx1JWydEHmNTfRN/I5yAhJLYta9rQ7WdoUKXOi6AAElSxeHk7dvk93erhXs2ucIfasJde2fp9cHCCGk2m0m1sXrkyVralb2rW/zJOFaNpRX2IASUCN+vsW6l0NiiXjZB5TNADSah9Sa2dWrVbTTlNbpno8hy+3ySjG/xjCGXGEF4rL7s88gIrWtVFVCXQvlzZM13ky3d7Pe1nLBSAkzO/jeTv461zqSlGaxOuWcNfsZ8pyt3Jyg5xjXXXnwrhnCz3y33Z5oKe3Tn7nFcvE6F3fcLA+2WR+03PDoVkALnOVdz2eJ5uXHVyosr92mUvJJS8Wn8jxQVvSt68bKUbdv3OXt8iy4bcbLrCe/imeny/Ky5OUMQ9uqvPhDOe/dnmACta1qq1UJEZ8+TPktly25WtuwVdyAsZH0/HfkVNOvCjcjPNa8YWV4eY/DEjzeZ5T/JWQcIOFNSxCMmnLr6vB5QMq4MdbvIlq/M78v1Tu8vbrtb3TxqFslZpbSysgBqcBnXOVdkbIPEotNfsfX0/knH2VKew51W4XnBRynL4xPjQZZcFMscp08Dt7H6l3HZu3s8Wr7qylabM9PmOR/yNynGPhVWvGuL74z3Z5gBetVWqrVQkc2bNfNktlyObXcthGUW1JNejMQWM04Pq4/k1T0pNxlHcjFRSxmMm/p8s+mIg+UBh/FxeD+bluer/nO+/XX9v25j/wBv9XQAA3PKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQCApAAAAACkwAAAAAC4AICkAAAAAKACIyXcxABtjWpVzm5xi4JNQecyy8fT0wayAEtrTSP7gAAgI61rxepLYd8FNSUVQ/vax936HIA56OC1WlM15So3j46FZAAVBUQAHo3aNNfH1bsdqudlknF66+6ODzgCKprdzqaZLUs06UVEqpNJty1u9fEAAkzMoLMkvj6ns8vxGvx2vTbVf7js6NPH1dM+UcenoeIUratnarVoS3Ubm+LLirjy0vhV7XS4XdmvbjfTrIZACxgDr4/WhubtOvZLwjZLxcjkKnhkNNppOPMvjtWt62tXmk03XaV1R7vPcRq8dXVZrynH3HKLqsa8vp/l0PCNlttlvW2bm0sJybfY1FcdbVqla3J+Jr3eXFlzWyYcSw0cRROY0BSAuc57PAcfr719n9z9Uao+Sry1nLS7r9cmz8h47V0fZnqx8Fb5Zry3jxeMrJ49F92vYraJyrmu04vDX7oyv2b9qbs2LJWzf8pttmXt5Pe58/THyneu67Zdi+3fbr3naVlhTE+O/lBpIUhqcBV3Pp/x7jtO3VltX1q6zzcIqazFYin1R8ujs0+Q29FyetY4eXSUcKSf7SMs1LXo60fFs7Pp3cYcHcVy58fuUU6QrQ/GHoz0vyTR1tSVFmvBV+6peUI/bmL7o8E6Nvb2Nyz3dmx2TxhN+i+HQ5ycVbVpWtnya3ZTvc2LN3OTLhp7dLPSu34LxCMl3MSrvk0OY+34nR1adGqyNcJ2Wx8pWTim+v8ev6Hjfkupr61lNuvFVu5S8649I5i8ZWDk0ub3dGt01OM6u6hYvJL/xOXc3djetd2xPym+i9El8EcuPBlrmd7Wmrnrv8D3O6+o9nl+n07bHh45Eq/lSVWt3y6ycxCkOo8MzrSlOMW8JvDf6n6FVrUasP7eiEYwj3+nOcZ+qX9T87j3Pao/JN2mlVONdvivGEpxbkl/ocvdYcmRV4PbdTB7X0Tv+27S2V9xVzdLjdLk1G9fiY/kepTq7cXTFQVsfNwXZPLj0+XQ8Y6Nvau3LZX3y87Jd3/sc5vjq60rWzlpanm93lx5e4yZMVeNLWbSBlHPksMxRku5c50fdLjdWPHS04xjGM6lKc0uspJeabf6g+WXNbq0paLalBrxjNr6oxz9qYOH+Nm/X+ed/xPp/8v8AToj2X+xwjit5n2/s6yeYADuPmAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAEBtUq/CalFubS8WnhJ5+Hr0NYJa21mSAAEAFXc6VZqrVlXKpvYck42+XRRw+niQ35Fq1TmbKuk6/00OUFZCSoARkAYg77bdB8fVVCiUd1Sbsub6OL7dDhITno19pfJRUaSvW81T9M6T0cpaogAJKAYMoPEkz1+W2eKvoojx9HtTivrfj49OmE3/J/Mq7NNLi3PVbL7TbHirbHkyPJSjpEUfzXn9P2HjApCxiAVdzp0J69e5TPaXlTGac18kyG4TcTBalVa1auyqm0pey82c2GQ93n9vjtmNP8AZKLnFPznCHtrDx4x+eDwiuOztVWdXWej3Ne6w1w5rYqZa5lWIvT5WAClzADDPY/HtjU19xy22oZi1XZL7Yyys5/9co2/km1qbNtX9vONlkYtW2R6p9eiz6mXuP3Vj4OInl0O1dnR9k+69+isrcfa/N/X+x4IKQ1OII2V1WWy8aoucvSMU2zBdz6b8Z2dSqq6qc41XzaalJqPlFLtlmeW7pR2VeUdDr7Dtqdz3FcN8ixK0+p+XT4nzc4yg3GaxJejymYHvfk2xrX7FfsSVk4QxbZFppvPbKPBJx2d6KzXFvoU7vBXBnyYaXWRUcKy6gqwQyXcuc5vo0traytemdrj38It4NM4Srk4zTjJdHF9GfZ8BbTPja6qpJWQcvdhnDy30keJ+SXUXbkfZalKEIxtmvWSOfHntbNbG6QlOp6/c/TMWLsMXd1z8rXj06R6t1XroeKQpDoPIKu510cbv7Nbuo17LK13lGLaOSP3I/QdKdWxp0z1nmuMFHp/GSXXP7mHcZrYqp1rMuD1PpP0/H3uS9MmR041lKscn9/RH5/KLi2msNd0+jMT1Oftou5K6zXacOicl2ckurPLNaW5VVmolTBwdxjWLNkxVsrqlnVWXWHuEVdyGUV9SRYyNsdXYlTLZjXJ0wwp2Y+lZeF1B9Z7+rP8fco4dddPhOC6uM28dV6Zl1ByfybT8n/ZwPc/w+CJ/kf/ADe/Okcpj/x6HxgAOs8MAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFz0wQAFIAAAAAUEAAAAABQAQAAAAoBAUgAAAABcMAEAAABUssznVZWk5xcVJZjld0CYcTGxrBSAgAIyjGUmoxTbfRJAROxiDfsauxqtQ2ap1SksxU4uOU/hk0BNPVak2rar42Tq10ah/cAACADdr6921bGmiDnZL7Yx7v1MtnU2NOx1bNbrmvSRHJTxlT4dS/t34e5xtwTjlHpnwk5wUhJQAq7nXpcftb83DWh5uKzJtqKX6uRDaSluEvEvjx3yWVMdXe1tq1Ut/A4wdG3qbGna6dmHhNejx1Xx6HOE01KcpkWralnW6dbLRpqGmACruSVID0dHiNzkISsoilCPTzm/FZ+COXZ1rdS6dF8fGyDw0VV6uzqmm1ujW3b5q465rY7VpfStmvS/iaAVkLGQBV1Z6upwO/t0LYrUYwlnwUpYcmvRFbXrRTZpLzNcPb5s9nXDS2RpS1VToeSDbdVZTOVdicZxeJJ/FGosZtNNpqGtGmAEZLuCDEHdHjdmWlPe8cUV4WW+sstL6V+4K86fqW8fHwN/4ueJ9u0cPc2f7cxy+yThKQFjA2xtlGucF2mkpdF6PPf9jUACW24noAACCrub1s2rXlrJ/wDHKSm1hd0mu/7nOBBKs1s2p00KyAAgGS7mIAOye/fZpQ0G17FcnOKws5fzOMAhJLZR1LXyXu072doSqp8FsgACSpYvDTO/f5bZ5Gumu9RSoTUfFY74/wBjzwQ61bVmpa2fgaVzZKUvjrZquSOVVtaNpKQAkzCN2tfPWvr2IfdXJSSfxTyaQGpUPqTWzq1ZOGnKfmelyvL28p7fnXGuNSfio/GTyzzQCta1qlWqhIvmzZM2R5ctne9t2wUgLGZ6HF8jLjtn31D3ItOM4N+OU/mZctyb5K2M/b9qFcfGEM56fM80FPbpz9yPVESdC7vOu3faq/8AxN8uMLf7dykALnOVdz1+F5aPGSsjbW7K7fHy8Wk045x3PHBW9K3q62Upm3b9xk7fLXNifG1dnE7+TPR5fkP8jerVD24QioRj3eF+h5wBNaqtVWuy2K5s182S2XI5tdy3sCogJMz6Hiedo1NZ62xXNxUnKEq8eX1d4vP6Hm8rv/5DbnsKPhF4jGLxnCOAGdcNK3eRLV76nZl+odxl7ena3snjx7aKdNpfkUgBocZY90fUaH5Fq1addOzXZ51RUV4JeMkvRv8Ac+WBnkxVyJK/RzodXZ97n7S9r4Gk7Li5UqDq39p7mzbsteLsk5ePwz6HKAXSSSS2Whz3va97Xs5tZtt+bBku6MQSVPZjy1b4SXGzjJWLpXJfa05KTz/QHjAy9mnh+bn/ALjt/wAj3MRyX7P8fb/qmfv8wADU4gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADNQk4ykl0j9z/V4MSAAAAAI3Kix0u9R/wCOLUW/m02v9DSUEqOqn8AyFICAZGIAOmzT2Ia0NuUMUWNxhLK6tdzmLl4IQp6lrOra4prRbudevRAAElSx6vB2bnHbWlXRbsRSjfHzrw0+n7HGu5nO2diSnJyUViOX2RDmVDUdS9XjVbq1W7OOLThLxlRqYMhWQkoDZVVK6yFUFmU34xXzfRGtGUW0008NdmCVEqdV1jwO3kuM2OMlGF7i3YvJODyvmjgN9+xfsPyvslbJLCc5OTwv1NBFeULk031a0L5nieSzw1tWn5VZ8rfeAASZnXoaVm/sw162ouefqlnCSTk30+SMuR0LeOu9m2UZeSUozjnDi/Xqc9N1uvbG6mbhZHrGUXhoy2Nm/asldfN2Tl3lJ5ZSL85lcY26ydCt2/8AHdXS3vc5Vp9HCNo8TSyFIXOcI9HiuMnyVk4KahCuPlObWcdeh567nTqbuzpT9zWsdc2sNpJpr5plbqzq1RpW6Nm3bWw1zUfcVtfGn6lVw2jLkdKfH7M9axqTjhqS7NM4zds7F2zbK6+bnbPrKT/7Gkmsqq5auNSuZ43ku8SdaNvinq1XoCohSTM9fiuFfJVyulaqq4vxTx5NvGTh3dWzS2LNaxpyreG12fwZnpcnucf5f2tngpfcmk1/RnPdbZfZK22XlObzKT7tmdVk9yzs06dEdmW/ZvtcVcWO6zp/8lm/S15a/wBjWyAGhxlXc93jvx572rHZnf7btb9qOM5w/H6n6dTwl3PQ1eY39Oh69FvjXL0aTw33w+6M8qyOsYmk56+B19lftKZW+8x2yU4tJVcerp1Rx3VSpsnVP7oNxf7M1Gc5uTcpPMpdW/iYGimNTltHJ8VCnSfAFTIVdwQelXxcpcbbyUp4jCSjCvGW+sU+vp0kDmhu7ENWzTjP/gtw5QaT6pp5T9OwM4yz8y+ef9kbHZz7Lj+3efY47/8Afy+bfbicoANDjAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQCAzSj4tt4fosdzAAAAAAq7mxKv2m3JqzKxHHTHxyCUpNQKyAgAFQBAbpxpVKkrG7W2pV47L0fkaQS1Hh8HIAAIALHudW1VqQhS9a52ylHNsZR8fGWey+JE6peJZUbra0r0+LSfwXU5AVkJKgAzgk5JPovV9+gCU6GAO7kqNGi1R0L5X1+MXKUljEn3RwkJypU6+OhfJjeO7o2m11q1avwaAAJKAHTo169u3XDasdVLf1zXobeTq1KNuyGjY7aE/pm/9/UryXLjD2nbT7zX2bey801hW4xyXOYmeO8eZwgpCxkAVdz0eIo0tja8N6xV14bTcvBOXovL0ItZVTs5ceGpphxPLkrjq6p2cJ2fGvxZ5oOvkK9arathqz9ylS+iWc/r1OQJyk1111K5KOl7UbTdW1KcrTwYAMl3JKmIPa4PV4zZlb/kJqOEvbUp+2mv5Sz8jzNqNUL7I0S8qoyahL4rPQqrp2tSHNesaG9+2tTBjzu1HXI2kk5uuP6l0NAKQsYAFXc9/idHiL9K63dtUbot9HPxcY46SUfXr0KXuqLk0300Um/bdtbuMnt0tSrhubvjXTzPnwZz6ZS7Lt/0MC5g1DgAIoBAelRRpz43ausn/APVW4e1BvH0uSUmo+oKc1MQ/m47dYn7jo/i348+VI9r3d/y8+Ef6p6HmgAuc4AAAAAAAAAAAAAAAAAAAAAAAAAAAAABcsgAAAAALlkAAAAAKQAFIAAAAAUEAAAAAKQAFIAAAAAUEAAAAAAAAAAAAAAAAAAAAAAAAAAAKAQAAAAAADAAAAAABQCAAAAAAAAAAAAAoAIAAAAUAgKQAAAAAoAIAAAAAAAAAZ+S8WsLOe5gAAAAAVEABslKLgo+KUstuXXL+RrABLcgAAgse6NttkJxgo1qHisSab+p/E0gEptJrxKyAAgGUXhpvt8DEAHVuX1XzU6qVQlGKcItvLS+45QCEoUFr2drOziX4JL8EAASVNutZCq+Fk4KyMWm65PCaXobNy6vY2LLqaVRXN5jVHsl8jmBEKZ8oL+5bh7ekTy2Uz9u5X2IASUCOzjtmnU2oX7FC2a45zVLs8pr1TOMENJpp9S2O9qXresTVypUrTyZu2LIW22WVwVcJtuMF2Sz29DSASlGhFrOzdnu3OmgKQAg9Hi93V0rZS2tZbEZRagpfxfxWTinJScpRXim+iXp8jWCFVJu3Vmls17Y64nHGjbUJJ+rebbspACTMq7npaG/qa2rsU7GrG+y1fRN4+l4x+vTueYCLVVlD/BwaYc18V+dImGtUrLXTZmUnkxAJMwUgAOqm+qvV2KZ1Kdlqj7dvrDElJ/1SwDlBHFTPnPxiDX3r8eOkcOGy+Xlz++eu4ABJkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUhk5ScVFvouxiAAAACtNd0F3M52TmkpSclFYjl9l8ANDWCkABSIyTaeQA4yj0aMTZZbZa/KyTnLCWW8vC7I1glxOmwAAILGLlJRist9El1MpxlBuEk010aaw0yVzlXNTg3GUXlNPDTRnbbbdOVlsnOcnmUpPLY1J9PHrM/CDUCkBANldU7ZqFcXOT7KKyzWbaL7teyNtM3XZHtKLww/ImvGVymJ1jePIwlFxypdGujXzRiZznKbcpvyk+rb69TABxOmwAKgQbKqLLn41QlOSTbUVnolkwax0Zu19rY1JOevZKtyi4ycfVPujS231ZGs67F3w4qJ5S5nbyghCkJKBG6FFtkZThCUow+9pdF6dWaUdFO3s68La6bJQhavGyK/kvmQ5jQtThy9baUP5dXPTc0voYmT9TEkqCkL6gGarlKMpRi2orMnjok+nVgsbrIQnVCTULElZFdpJNSWf3QI1LeiOs8fL5p/pBqABJUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//9k=');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  border-radius: var(--radius-lg);
  opacity: 0.55;
  mix-blend-mode: screen;
}

/* Top-left: sits behind the main image, peeking from top-left corner */
.halftone-tl {
  top: -18px;
  left: -22px;
  transform: rotate(0deg);
}

/* Bottom-right: reversed (mirror + rotate 180°) to face inward */
.halftone-br {
  bottom: -18px;
  right: -22px;
  transform: rotate(180deg) scaleX(-1);
}

/* On mobile keep them contained */
@media (max-width: 768px) {
  .halftone-tl { width: 130px; height: 100px; top: -10px; left: -10px; }
  .halftone-br { width: 130px; height: 100px; bottom: -10px; right: -10px; }
}

/* ============================================================
   SECTION ENTRANCE TRANSITIONS
   Each section gently blooms into full opacity/position when
   it enters the viewport (re-animates on scroll back up)
============================================================ */
.section {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0.97; /* nearly visible always – only in-view rules apply */
}
.section.section-visible {
  opacity: 1;
  transform: none;
}

/* Service card subtle 3-D tilt on hover once revealed */
.service-card {
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease,
              border-color 0.45s ease,
              opacity 0.6s ease;
}
/* When card is in-view but NOT yet animated, JS handles opacity.
   Override card hover ONLY after it's been revealed */
.service-card.in-view:hover {
  transform: translateY(-9px) scale(1.015);
}

/* Gallery item zoom-in on hover after reveal */
.gallery-item.in-view {
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.6s ease;
}
.gallery-item.in-view:hover {
  transform: scale(1.03);
  z-index: 2;
}

/* Process card hover glow */
.proc-card.in-view:hover {
  box-shadow: 0 20px 50px rgba(200,169,110,.22), 0 0 0 1px rgba(200,169,110,.25);
  transform: translateY(-5px);
}

/* Area-card pop on reveal */
.area-card {
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--delay, 0s);
}


/* ============================================================
   PART 2 — SUB-PAGE STYLES
   Prefix: .sp-*   (nothing here can clash with PART 1)
   ============================================================ */


/* ── 0. SUB-PAGE TOKENS ───────────────────────────────────── */
:root {
  --sp-header-h:    120px;  /* updated live by subpage.js  */
  --sp-subnav-top:  70px;   /* updated live by subpage.js  */
  --sp-card-bg:     linear-gradient(160deg, #151515 0%, #101010 100%);
  --sp-card-br:     14px;
}

/* ============================================================
   1. PAGE BANNER
   ============================================================ */
.sp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--sp-header-h) + 40px);
  padding-bottom: 90px;
  display: flex;
  align-items: center;
  min-height: 460px;
  text-align: center;
}
.sp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: spHeroZoom 22s var(--ease) infinite alternate;
  z-index: 0;
}
@keyframes spHeroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.16); }
}
.sp-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.84) 55%, rgba(8,8,10,.94) 100%),
    radial-gradient(circle at 50% 40%, rgba(42,148,255,.16), transparent 60%);
}
.sp-hero > .container { position: relative; z-index: 3; width: 100%; }
.sp-hero-inner { max-width: 860px; margin-inline: auto; }

/* Floating shapes */
.sp-hero-shapes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sp-shape {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(42,148,255,.28);
  display: block;
}
.sp-shape-1 { width: 280px; height: 280px; top: 10%;  right: 6%;  animation: spFloat 12s ease-in-out infinite; }
.sp-shape-2 { width: 160px; height: 160px; bottom: 12%; left: 8%; border-color: rgba(255,255,255,.1); animation: spFloat 16s ease-in-out infinite reverse; }
@keyframes spFloat {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(-18px,-22px); }
}

/* Monogram watermark */
.sp-hero-monogram {
  position: absolute;
  right: -2%;
  bottom: -12%;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(9rem, 22vw, 20rem);
  line-height: 1;
  color: rgba(255,255,255,.028);
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
}

.sp-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-white);
  letter-spacing: -.015em;
  margin-bottom: 1rem;
}

/* Breadcrumb */
.sp-breadcrumb { margin-bottom: 1.5rem; }
.sp-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .02em;
}
.sp-breadcrumb li { color: var(--text-grey); display: inline-flex; align-items: center; gap: .4rem; }
.sp-breadcrumb a { color: var(--text-light); }
.sp-breadcrumb a:hover { color: var(--gold); }
.sp-breadcrumb li[aria-current="page"] { color: var(--gold); font-weight: 600; }

.sp-hero-lead {
  font-size: 1.06rem;
  color: var(--text-light);
  max-width: 720px;
  margin: 0 auto 2rem;
}
.sp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ============================================================
   2. STICKY SUB NAVIGATION
   ============================================================ */
.sp-subnav {
  position: sticky;
  top: var(--sp-subnav-top);
  z-index: 900;
  background: rgba(12,12,12,.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--mid) var(--ease);
}
.sp-subnav .container{
	max-width:fit-content;
}
.sp-subnav.is-stuck { box-shadow: 0 12px 34px rgba(0,0,0,.45); }

.sp-subnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.sp-subnav-list {
  display: flex;
  align-items: center;
  gap: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .55rem 0;
  flex: 1;
}
.sp-subnav-list::-webkit-scrollbar { display: none; }

.sp-subnav-link {
  display: block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-grey);
  padding: .55rem .95rem;
  border-radius: 50px;
  position: relative;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.sp-subnav-link:hover { color: var(--text-white); background: rgba(255,255,255,.05); }
.sp-subnav-link.active {
  color: #fff;
  background: var(--gold);
  box-shadow: 0 6px 18px rgba(42,148,255,.3);
}

.sp-subnav-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-white);
  border: 1px solid var(--gold);
  border-radius: 50px;
  padding: .5rem 1.1rem;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sp-subnav-cta:hover { background: var(--gold); color: #fff; }
.sp-subnav-cta i { font-size: .78rem; }

/* ============================================================
   3. SHARED TYPOGRAPHY HELPERS
   ============================================================ */
.sp-lead {
  font-size: 1.05rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}
.sp-body { color: var(--text-grey); margin-bottom: 1.75rem; }

/* Suburb pages: every piece of body copy uses one tone (no two-tone paragraphs).
   Headings stay white; accent/UI colours (nav state, check icons, buttons) are untouched. */
.suburb-page .sp-body,
.suburb-page .section-desc,
.suburb-page .sp-article p,
.suburb-page .sp-article-list li,
.suburb-page .sp-faq-a p,
.suburb-page .sp-cta-or,
.suburb-page .mbrf-sub,
.suburb-page .mbrf-trust,
.suburb-page .mbrf-trust span,
.suburb-page .contact-info-card a,
.suburb-page .contact-info-card span { color: var(--text-light); }

.sp-sub-heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 1rem;
}

/* ============================================================
   4. OVERVIEW
   ============================================================ */
.sp-overview { background: var(--bg-deep); }
.sp-overview-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 4rem;
  align-items: center;
}

.sp-overview-media { position: relative; padding-bottom: 60px; }
.sp-media-main {
  position: relative;
  border-radius: var(--sp-card-br);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
}
.sp-media-main img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; }
.sp-media-accent {
  position: absolute;
  right: -18px;
  bottom: 0;
  width: 46%;
  border-radius: var(--sp-card-br);
  overflow: hidden;
  border: 4px solid var(--bg-deep);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.sp-media-accent img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.sp-check-list {
  display: grid;
  gap: .8rem;
}
.sp-check-list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .95rem;
  color: var(--text-light);
  line-height: 1.6;
}
.sp-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(42,148,255,.14);
  border: 1px solid rgba(42,148,255,.4);
  color: var(--gold);
  font-size: .68rem;
  display: grid;
  place-items: center;
  margin-top: .2rem;
}

/* ============================================================
   5. LONG-FORM ARTICLE SECTIONS
   ============================================================ */
.sp-article-section { background: var(--bg-dark); }

.sp-article-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 3.5rem;
  align-items: start;
}

.sp-article > * + * { margin-top: 1rem; }
.sp-article p {
  color: var(--text-grey);
  font-size: 1rem;
  line-height: 1.8;
}
.sp-article-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.3;
  margin-top: 2.25rem !important;
}
.sp-article > .sp-article-title:first-child { margin-top: 0 !important; }

.sp-article-list {
  display: grid;
  gap: .6rem;
  padding-left: 0;
}
.sp-article-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text-light);
  font-size: .97rem;
  line-height: 1.65;
}
.sp-article-list li::before {
  content: '';
  position: absolute;
  left: .25rem;
  top: .62rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.sp-article-aside {
  position: sticky;
  top: calc(var(--sp-subnav-top) + 110px);
  border-radius: var(--sp-card-br);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: 0 22px 50px rgba(0,0,0,.5);
}
.sp-article-aside img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* ============================================================
   5b. WHAT'S INVOLVED – "SCOPE OF WORKS" SPEC SHEET
   A deliberately different look to the rest of the page:
   blueprint grid, crop-mark corners and numbered spec rows.
   ============================================================ */
.sp-scope {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0c0c0e;
}
/* Blueprint grid */
.sp-scope-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
}
.sp-scope-glow {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 620px;
  height: 620px;
  z-index: 0;
  background: radial-gradient(circle, rgba(42,148,255,.13), transparent 68%);
  pointer-events: none;
}
.sp-scope > .container { position: relative; z-index: 2; }

/* ── Spec sheet panel ─────────────────────────────────────── */
.sp-spec {
  position: relative;
  background: linear-gradient(165deg, rgba(23,23,25,.96), rgba(14,14,16,.96));
  border: 1px solid var(--border-light);
  padding: 2.5rem;
  margin-top: 3rem;
}
/* Crop-mark corners */
.sp-spec-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--gold);
}
.sp-spec-corner--tl { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.sp-spec-corner--tr { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; }
.sp-spec-corner--bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.sp-spec-corner--br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

.sp-spec-head {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 2.5rem;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
.sp-spec-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 2.6rem;
  position: relative;
  margin-bottom: 1rem;
}
.sp-spec-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2rem;
  height: 1px;
  background: var(--gold);
}
.sp-spec-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.24;
  margin-bottom: .75rem;
}
.sp-spec-sub { color: var(--text-grey); font-size: 1rem; }

/* Notched photo – echoes the crop-mark language */
.sp-spec-figure {
  overflow: hidden;
  border: 1px solid var(--border-light);
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}
.sp-spec-figure img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform var(--slow) var(--ease);
}
.sp-spec:hover .sp-spec-figure img { transform: scale(1.04); }

/* ── Numbered spec rows ───────────────────────────────────── */
.sp-spec-rows {
  position: relative;
  padding-top: 1.75rem;
}
/* Vertical rule threading through the numbers */
.sp-spec-rows::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 2.4rem;
  bottom: 1.6rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(42,148,255,.55), rgba(42,148,255,.08));
}
.sp-spec-row {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: .95rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.sp-spec-row:last-child { border-bottom: 0; }
.sp-spec-row:hover { background: rgba(255,255,255,.03); transform: translateX(6px); }

.sp-spec-num {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--gold);
  background: #101012;
  border: 1px solid rgba(42,148,255,.42);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.sp-spec-row:hover .sp-spec-num {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(42,148,255,.14);
}

.sp-spec-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.5;
}
.sp-spec-row:hover .sp-spec-label { color: var(--text-white); }

.sp-spec-ico {
  font-size: 1.05rem;
  color: var(--text-dim);
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.sp-spec-row:hover .sp-spec-ico { color: var(--gold); transform: scale(1.15); }

/* ── Duration strip ───────────────────────────────────────── */
.sp-spec-duration {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.35rem;
  background: rgba(42,148,255,.08);
  border-left: 3px solid var(--gold);
}
.sp-spec-duration i { color: var(--gold); font-size: 1.15rem; flex-shrink: 0; }
.sp-spec-duration p {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  color: var(--text-white);
}

/* ── DIY vs Hiring Professionals ──────────────────────────── */
.sp-vs {
  position: relative;
  margin-top: 2rem;
  padding: 2.5rem;
  background:
    linear-gradient(115deg, rgba(42,148,255,.09) 0%, transparent 48%),
    linear-gradient(165deg, rgba(23,23,25,.96), rgba(14,14,16,.96));
  border: 1px solid var(--border);
}
.sp-vs-head { max-width: 780px; margin-bottom: 2rem; }
.sp-vs-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: .75rem;
}
.sp-vs-head p { color: var(--text-grey); line-height: 1.8; }

.sp-vs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.sp-vs-item {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.5rem 1.35rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-top: 2px solid rgba(42,148,255,.45);
  font-size: .93rem;
  font-weight: 500;
  color: var(--text-light);
  line-height: 1.55;
  transition: transform var(--mid) var(--ease), border-color var(--mid) var(--ease), background var(--mid) var(--ease);
}
.sp-vs-item:hover {
  transform: translateY(-6px);
  border-top-color: var(--gold);
  background: rgba(255,255,255,.05);
}
.sp-vs-item i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 1.05rem;
  background: rgba(42,148,255,.12);
  border: 1px solid rgba(42,148,255,.28);
  border-radius: 50%;
}

.sp-vs-note {
  margin-top: 2rem;
  padding-left: 1.35rem;
  border-left: 2px solid rgba(42,148,255,.45);
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.8;
  font-style: italic;
}

/* ── The Value of a Renovated Bathroom ────────────────────── */
.sp-value {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
  padding: 2.25rem 2.5rem;
  background: linear-gradient(100deg, rgba(42,148,255,.14), rgba(20,20,22,.9) 62%);
  border: 1px solid rgba(42,148,255,.3);
}
.sp-value-icon {
  flex-shrink: 0;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  color: #fff;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 12px 34px rgba(42,148,255,.35);
}
.sp-value-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: .6rem;
}
.sp-value-body p { color: var(--text-light); line-height: 1.8; }

/* ============================================================
   6. LOCAL SECTION
   ============================================================ */
.sp-local { background: var(--bg-deep); }
.sp-local-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 4rem;
  align-items: center;
}
.sp-local-media {
  border-radius: var(--sp-card-br);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
}
.sp-local-media img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; }

.sp-feature-list {
  display: grid;
  gap: 1rem;
  margin: 1.75rem 0 2rem;
}
.sp-feature-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--sp-card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .95rem 1.15rem;
  font-size: .95rem;
  color: var(--text-light);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.sp-feature-list li:hover { border-color: rgba(42,148,255,.4); transform: translateX(4px); }
.sp-feature-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(42,148,255,.12);
  border: 1px solid rgba(42,148,255,.3);
  display: grid;
  place-items: center;
}
.sp-feature-icon img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; }

/* ============================================================
   7. FAQ ACCORDION
   ============================================================ */
.sp-faq { background: var(--bg-dark); }
.sp-faq-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 4rem;
  align-items: start;
}
.sp-faq-intro { position: sticky; top: calc(var(--sp-subnav-top) + 110px); }
.sp-faq-heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}
.sp-faq-help {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--sp-card-bg);
  border: 1px solid var(--border);
  border-radius: var(--sp-card-br);
}
.sp-faq-help-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(42,148,255,.12);
  border: 1px solid rgba(42,148,255,.3);
  color: var(--gold);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sp-faq-help strong { display: block; color: var(--text-white); font-family: var(--font-display); font-size: .95rem; }
.sp-faq-help span { font-size: .87rem; color: var(--text-grey); }
.sp-faq-help a { color: var(--gold); font-weight: 600; }

.sp-faq-list { display: grid; gap: .85rem; }
.sp-faq-item {
  background: var(--sp-card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color var(--fast) var(--ease);
}
.sp-faq-item.open { border-color: rgba(42,148,255,.42); }
.sp-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.25rem 1.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-white);
  transition: color var(--fast) var(--ease);
}
.sp-faq-q:hover { color: var(--gold); }
.sp-faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  color: var(--gold);
  font-size: .72rem;
  display: grid;
  place-items: center;
  transition: transform var(--mid) var(--ease), background var(--fast) var(--ease);
}
.sp-faq-item.open .sp-faq-icon { transform: rotate(135deg); background: var(--gold); color: #fff; }

.sp-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--mid) var(--ease);
}
.sp-faq-a p {
  padding: 0 1.4rem 1.35rem;
  font-size: .95rem;
  color: var(--text-grey);
  line-height: 1.75;
}

/* ============================================================
   8. SERVICES KEYWORD GRID
   ============================================================ */
.sp-services { background: var(--bg-deep); overflow: hidden; }
.sp-services > .container { position: relative; z-index: 2; }

.sp-keyword-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
.sp-keyword {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--sp-card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.35rem;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.45;
  transition: transform var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.sp-keyword:hover {
  transform: translateY(-5px);
  border-color: rgba(42,148,255,.4);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.sp-keyword i {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(42,148,255,.12);
  border: 1px solid rgba(42,148,255,.3);
  color: var(--gold);
  font-size: 1rem;
  display: grid;
  place-items: center;
}

.sp-services-note {
  max-width: 760px;
  margin: 3.5rem auto 0;
  text-align: center;
  padding: 2rem 2rem;
  background: rgba(42,148,255,.06);
  border: 1px solid rgba(42,148,255,.22);
  border-radius: var(--sp-card-br);
}
.sp-services-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: .85rem;
}
.sp-services-note p { color: var(--text-light); font-size: 1rem; line-height: 1.75; }

/* ============================================================
   9. SERVICE AREAS
   ============================================================ */
.sp-areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.sp-area-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--sp-card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.4;
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sp-area-card::before {
  content: '\f3c5';               /* map marker */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--gold);
  font-size: .85rem;
  flex-shrink: 0;
}
.sp-area-card:hover {
  transform: translateY(-4px);
  border-color: rgba(42,148,255,.4);
  color: var(--text-white);
}

/* ============================================================
   10. BATHROOM RANGES
   ============================================================ */
.sp-ranges { background: var(--bg-deep); }
.sp-range-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.sp-range-card {
  background: var(--sp-card-bg);
  border: 1px solid var(--border);
  border-radius: var(--sp-card-br);
  overflow: hidden;
  transition: transform var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.sp-range-card:hover {
  transform: translateY(-8px);
  border-color: var(--border-light);
  box-shadow: 0 22px 48px rgba(0,0,0,.5);
}
.sp-range-img { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.sp-range-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--slow) var(--ease);
}
.sp-range-card:hover .sp-range-img img { transform: scale(1.08); }
.sp-range-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,10,10,.75) 100%);
}
.sp-range-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-white);
  text-align: center;
  padding: 1.15rem 1rem;
  position: relative;
}
.sp-range-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: .7rem;
  transform: translateX(-50%) scaleX(0);
  width: 40px;
  height: 2px;
  background: var(--gold);
  transition: transform var(--mid) var(--ease);
}
.sp-range-card:hover .sp-range-title::after { transform: translateX(-50%) scaleX(1); }

/* ============================================================
   11. CTA BANNER EXTRAS
   ============================================================ */
.sp-cta-phones {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1.5rem 0 1.25rem;
}
.sp-cta-phone {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .01em;
}
.sp-cta-phone:hover { color: #fff; }
.sp-cta-or {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-grey);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.sp-cta-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.sp-cta-social a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-light);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  padding: .5rem 1.1rem;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sp-cta-social a:hover { border-color: var(--gold); color: var(--gold); }

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .sp-range-grid   { grid-template-columns: repeat(2, 1fr); }
  .sp-areas-grid   { grid-template-columns: repeat(3, 1fr); }
  .sp-keyword-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .sp-hero { min-height: auto; padding-bottom: 70px; }
  .sp-hero-monogram { display: none; }

  .sp-overview-grid { grid-template-columns: 1fr; gap: 3rem; }
  .sp-overview-media { padding-bottom: 40px; max-width: 620px; margin-inline: auto; }

  .sp-article-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sp-article-aside { position: static; max-width: 560px; margin-inline: auto; }
  .sp-article-aside img { aspect-ratio: 16/10; }

  /* Scope of works */
  .sp-spec, .sp-vs { padding: 2rem 1.5rem; }
  .sp-spec-head { grid-template-columns: 1fr; gap: 1.75rem; }
  .sp-spec-figure { max-width: 480px; }
  .sp-vs-grid { grid-template-columns: 1fr 1fr; }
  .sp-value { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 2rem 1.5rem; }

  .sp-local-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sp-local-media { max-width: 620px; margin-inline: auto; }

  .sp-faq-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sp-faq-intro { position: static; }
}

@media (max-width: 768px) {
  .sp-hero { padding-bottom: 56px; }
  .sp-hero-title { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .sp-hero-actions .btn { flex: 1 1 100%; justify-content: center; }

  .sp-subnav-cta { display: none; }
  .sp-subnav-list { padding: .45rem 0; }

  .sp-range-grid   { grid-template-columns: 1fr 1fr; }
  .sp-areas-grid   { grid-template-columns: 1fr 1fr; }
  .sp-keyword-grid { grid-template-columns: 1fr; }

  .sp-range-title { font-size: .95rem; padding: 1rem .75rem; }
  .sp-area-card   { font-size: .84rem; padding: .85rem .95rem; }

  .sp-services-note { padding: 1.5rem 1.25rem; }
}

@media (max-width: 640px) {
  .sp-spec, .sp-vs { padding: 1.75rem 1.15rem; }
  .sp-spec-rows::before { left: 21px; }
  .sp-spec-row { grid-template-columns: 42px 1fr; gap: .9rem; padding: .85rem .4rem; }
  .sp-spec-num { width: 42px; height: 42px; font-size: .82rem; }
  .sp-spec-ico { display: none; }
  .sp-spec-label { font-size: .93rem; }
  .sp-vs-grid { grid-template-columns: 1fr; }
  .sp-value-icon { width: 62px; height: 62px; font-size: 1.35rem; }
}

@media (max-width: 480px) {
  .sp-breadcrumb ol { font-size: .78rem; }
  .sp-media-accent { display: none; }
  .sp-range-grid { grid-template-columns: 1fr; }
  .sp-areas-grid { grid-template-columns: 1fr; }
  .sp-cta-phones { gap: .75rem; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sp-hero-bg { animation: none; }
  .sp-shape { animation: none; }
}


/* ============================================================
   PART 3 — VISUAL POLISH
   Presentation only: no copy, no headings and no links are
   added or changed by anything in this block.
   ============================================================ */

/* ── Shared decorative texture ────────────────────────────── */
.sp-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Cursor-following spotlight on cards (--mx/--my are set in JS) */
.sp-keyword,
.sp-area-card,
.sp-vs-item,
.sp-feature-list li,
.sp-faq-item {
  background-image:
  background-image: radial-gradient(240px circle at var(--mx, -300px) var(--my, -300px), rgba(42, 148, 255, .17), transparent 68%), linear-gradient(160deg, #151515 0%, #51748d70 100%);
  background-repeat: no-repeat;
  border-color: rgba(42, 148, 255, .4);
}

/* ============================================================
   P3.1  BANNER — split layout + image collage
   ============================================================ */
.sp-hero {
  text-align: left;
  min-height: 660px;
  padding-bottom: 120px;
}
.sp-hero-overlay {
  background:
    linear-gradient(100deg, rgba(8,8,10,.96) 0%, rgba(8,8,10,.9) 42%, rgba(8,8,10,.66) 100%),
    radial-gradient(circle at 72% 45%, rgba(42,148,255,.14), transparent 62%);
}

/* Aurora glow */
.sp-hero-aurora {
  position: absolute;
  inset: -25%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(closest-side circle at 22% 32%, rgba(42,148,255,.32), transparent),
    radial-gradient(closest-side circle at 78% 62%, rgba(90,116,255,.13), transparent),
    radial-gradient(closest-side circle at 58% 12%, rgba(255,150,90,.13), transparent);
  filter: blur(26px);
  animation: spAurora 20s ease-in-out infinite alternate;
}
@keyframes spAurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.12); }
}

/* Soft fade into the marquee below */
.sp-hero-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg-deep));
}

.sp-hero-split {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 4rem;
  align-items: center;
}
.sp-hero-copy { max-width: 620px; }

/* undo the centring PART 2 applied to the banner */
.sp-hero .sp-breadcrumb ol { justify-content: flex-start; }
.sp-hero .sp-hero-lead    { margin-inline: 0; }
.sp-hero .sp-hero-actions { justify-content: flex-start; }

.sp-hero-title {
  font-size: clamp(2.4rem, 5.2vw, 4.1rem);
  line-height: 1.04;
  margin-bottom: 1.25rem;
}
.sp-tl { display: block; }
.sp-tl-accent {
  background: linear-gradient(100deg, #4db8ff 0%, var(--gold) 40%, #72c3ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Breadcrumb as a glass pill */
.sp-hero .sp-breadcrumb ol {
  display: inline-flex;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding: .5rem 1.1rem;
  backdrop-filter: blur(8px);
}

/* Collage */
.sp-hero-collage {
  position: relative;
  /* every child is absolutely positioned, so the intrinsic width is 0.
     An explicit width is required — `margin-inline:auto` in the stacked
     layout below cancels grid stretch and would collapse the box. */
  width: 100%;
  height: 540px;
  perspective: 1000px;
}
.sp-cf {
  position: absolute;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 80px rgba(0,0,0,.62);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  will-change: transform;
}
.sp-cf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-cf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8,8,10,.45));
}
.sp-cf-1 { width: 58%; height: 58%; top: 0;    left: 0;  z-index: 2; }
.sp-cf-2 { width: 48%; height: 44%; bottom: 0; left: 8%; z-index: 3; }
.sp-cf-3 { width: 44%; height: 56%; top: 20%;  right: 0; z-index: 1; }
.sp-hero-collage:hover .sp-cf { box-shadow: 0 40px 90px rgba(0,0,0,.7); }

.sp-collage-ring {
  position: absolute;
  top: 6%;
  right: 6%;
  width: 190px;
  height: 190px;
  border: 1px dashed rgba(42,148,255,.45);
  border-radius: 50%;
  animation: spSpinSlow 44s linear infinite;
  z-index: 0;
}
@keyframes spSpinSlow { to { transform: rotate(360deg); } }

/* ============================================================
   P3.2  DECORATIVE MARQUEE
   ============================================================ */
.sp-marquee {
  overflow: hidden;
  padding: .95rem 0;
  background: linear-gradient(90deg, #0d0d0f, #151517 50%, #0d0d0f);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sp-marquee-track {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  width: max-content;
  animation: spMarquee 42s linear infinite;
}
.sp-marquee span {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgb(203 227 255 / 26%);
  white-space: nowrap;
}
.sp-marquee i { color: var(--gold); font-size: .5rem; font-style: normal; opacity: .8; }
.sp-marquee:hover .sp-marquee-track { animation-play-state: paused; }
@keyframes spMarquee { to { transform: translateX(-50%); } }

/* ============================================================
   P3.3  OVERVIEW — framed media
   ============================================================ */
.sp-overview-media::before {
  content: '';
  position: absolute;
  left: -20px;
  top: -20px;
  width: 130px;
  height: 130px;
  border-left: 2px solid var(--gold);
  border-top: 2px solid var(--gold);
  border-radius: 8px 0 0 0;
  opacity: .5;
  z-index: 2;
}
.sp-media-main { transition: transform .6s var(--ease); }
.sp-media-main:hover { transform: translateY(-6px); }
.sp-media-main img { transition: transform .8s var(--ease); }
.sp-media-main:hover img { transform: scale(1.05); }

/* ============================================================
   P3.4  ARTICLE — drop cap, ruled headings, list chips
   ============================================================ */
.sp-article > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.7rem;
  line-height: .84;
  font-weight: 800;
  color: var(--gold);
  margin: .32rem .7rem 0 0;
}
.sp-article-title {
  position: relative;
  padding-left: 1.15rem;
}
.sp-article-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: .16em;
  bottom: .16em;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold), rgba(42,148,255,.05));
}
.sp-article-list li {
  background: rgba(255,255,255,.022);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .8rem 1rem .8rem 2.7rem;
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.sp-article-list li::before { left: 1.05rem; top: 1.35rem; }
.sp-article-list li:hover {
  transform: translateX(5px);
  border-color: rgba(42,148,255,.42);
  background: rgba(42,148,255,.05);
}
.sp-article-aside { overflow: hidden; }
.sp-article-aside img { transition: transform .9s var(--ease); will-change: transform; }
.sp-article-aside:hover img { transform: scale(1.06); }

/* ============================================================
   P3.5  LOCAL — richer feature rows + framed media
   ============================================================ */
.sp-feature-list li { position: relative; overflow: hidden; }
.sp-feature-icon {
  box-shadow: 0 0 0 0 rgba(42,148,255,.4);
  transition: box-shadow var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.sp-feature-list li:hover .sp-feature-icon {
  box-shadow: 0 0 0 6px rgba(42,148,255,.12);
  transform: scale(1.06);
}
.sp-local-media { position: relative; overflow: hidden; }
.sp-local-media img { transition: transform .9s var(--ease); }
.sp-local-media:hover img { transform: scale(1.05); }
.sp-local-media::after {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 140px;
  height: 140px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  border-radius: 0 0 8px 0;
  opacity: .5;
}

/* ============================================================
   P3.6  GALLERY — staggered 3-up masonry
   ============================================================ */
#gallery .gallery-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  align-items: start;
}
#gallery .gallery-item {
  aspect-ratio: 4 / 3.2;
  border-radius: 14px;
  overflow: hidden;
}
#gallery .gallery-item:nth-child(3n+2) { margin-top: 3.2rem; }
#gallery .gallery-item img { transition: transform .9s var(--ease); }
#gallery .gallery-item:hover img { transform: scale(1.09); }

/* ============================================================
   P3.7  SERVICE KEYWORDS — glass cards
   ============================================================ */
.sp-keyword {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.sp-keyword > span { position: relative; z-index: 1; flex: 1; }
.sp-keyword i { position: relative; z-index: 1; transition: background var(--mid) var(--ease), color var(--mid) var(--ease), border-color var(--mid) var(--ease); }
.sp-keyword:hover i { background: var(--gold); color: #fff; border-color: var(--gold); }
.sp-keyword::after {
  content: '\f061';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .8rem;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
  position: relative;
  z-index: 1;
}
.sp-keyword:hover::after { opacity: 1; transform: none; }

/* ============================================================
   P3.8  SERVICE AREAS — chips with a shine sweep
   ============================================================ */
.sp-area-card {
  position: relative;
  overflow: hidden;
  border-radius: 50px;
  padding: .95rem 1.3rem;
}
.sp-area-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.09), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--ease);
}
.sp-area-card:hover::after { left: 120%; }
.sp-area-card:hover { border-color: rgba(42,148,255,.55); }

/* ============================================================
   P3.9  BATHROOM RANGES — title over image
   ============================================================ */
.sp-range-card { position: relative; }
.sp-range-img { aspect-ratio: 3 / 3.6; }
.sp-range-img::after {
  background: linear-gradient(180deg, transparent 30%, rgba(8,8,10,.55) 62%, rgba(8,8,10,.95) 100%);
}
.sp-range-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  text-align: left;
  padding: 1.5rem 1.3rem 1.75rem;
  font-size: 1.12rem;
  transition: transform var(--mid) var(--ease);
}
.sp-range-card:hover .sp-range-title { transform: translateY(-4px); }
.sp-range-title::after {
  left: 1.3rem;
  bottom: 1rem;
  transform: scaleX(0);
  transform-origin: left;
  width: 46px;
}
.sp-range-card:hover .sp-range-title::after { transform: scaleX(1); }
.sp-range-card::after {
  content: '\2b';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: .75rem;
  opacity: 0;
  transform: scale(.6) rotate(-90deg);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.sp-range-card:hover::after { opacity: 1; transform: none; }

/* ============================================================
   P3.10  FAQ — accent bar on the open item
   ============================================================ */
.sp-faq-item { position: relative; overflow: hidden; }
.sp-faq-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--mid) var(--ease);
}
.sp-faq-item.open::after { transform: scaleY(1); }

/* ============================================================
   P3.11  RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .sp-hero-collage { height: 460px; }
}
@media (max-width: 992px) {
  .sp-hero { text-align: center; min-height: auto; padding-bottom: 90px; }
  .sp-hero-split { grid-template-columns: 1fr; gap: 3rem; }
  .sp-hero-copy { max-width: 640px; margin-inline: auto; }
  .sp-hero .sp-breadcrumb ol,
  .sp-hero .sp-hero-actions { justify-content: center; }
  .sp-hero .sp-hero-lead { margin-inline: auto; }
  .sp-hero-collage { height: 400px; max-width: 560px; margin-inline: auto; }
  #gallery .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  #gallery .gallery-item:nth-child(3n+2) { margin-top: 0; }
  #gallery .gallery-item:nth-child(2n) { margin-top: 2.4rem; }
}
@media (max-width: 768px) {
  .sp-hero-collage { height: 320px; }
  .sp-collage-ring { display: none; }
  .sp-marquee span { font-size: .88rem; }
  .sp-article > p:first-of-type::first-letter { font-size: 2.9rem; }
  .sp-range-img { aspect-ratio: 3 / 3.2; }
}
@media (max-width: 480px) {
  .sp-hero-collage { height: 260px; }
  #gallery .gallery-grid { grid-template-columns: 1fr; }
  #gallery .gallery-item:nth-child(2n) { margin-top: 0; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sp-hero-aurora,
  .sp-collage-ring,
  .sp-marquee-track { animation: none; }
}


/* ============================================================
   PART 4 — MOBILE REQUEST FORM: TEXTAREA FIELD
   The homepage's .mbrf-* rules only cover input/select, so the
   Message field needs matching treatment.
   ============================================================ */
.mbrf-field textarea {
  width: 100%;
  padding: 0.78rem 0.75rem 0.78rem 2.4rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text-white);
  font-size: 0.88rem;
  font-family: inherit;
  line-height: 1.55;
  min-height: 0;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.mbrf-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(200,169,110,0.12);
}
.mbrf-field textarea::placeholder { color: rgba(255,255,255,0.28); }

/* the icon must sit at the top of a multi-line field, not centred */
.mbrf-field--area > i {
  top: 1.05rem;
  transform: none;
}


/* ============================================================
   PART 6 — ONE FORM PER VIEWPORT
   Below 900px the request form under the banner takes over, so
   the form in the bottom contact section is hidden to avoid two
   identical forms on the same page.

   display:none only — the markup stays in the DOM, so the page
   source and heading structure are unchanged for crawlers.
   ============================================================ */
@media (max-width: 900px) {
  #contact .contact-form-wrap { display: none; }

  /* the info cards + map now own the full width */
  #contact .contact-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   PART 7 — CONTAIN THE REVEAL OVERHANG
   .reveal-left / .reveal-right start life at translateX(±65px).
   In two-column sections the right-hand column therefore pokes
   past the viewport until it animates in, which adds a few px of
   phantom horizontal scroll at widths where the page gutter is
   narrower than the offset (e.g. ~1280px).

   `clip` rather than `hidden`: these sections contain
   position:sticky children (.sp-article-aside, .sp-faq-intro),
   and `hidden` would create a scroll container and break them.
   ============================================================ */
#main-content > section {
  overflow-x: clip;
}


/* ============================================================
   PART 8 — MOBILE HEADER + GALLERY
   ============================================================ */

/* ── Desktop: the phone already sits in the nav's call button,
      so the topbar copy of it is redundant. ────────────────── */
.topbar-tel { display: none; }

/* ============================================================
   P8.1  MOBILE TOPBAR
   The shared stylesheet hides .header-topbar at 900px and again
   at 768px. Bring it back on mobile carrying just the email and
   the phone, with the logo + nav row sitting underneath it.
   ============================================================ */
@media (max-width: 900px) {
  .header-topbar {
    display: block;          /* overrides both hide rules  */
    height: auto;
    padding: .5rem 0;
    overflow: visible;
  }

  .topbar-inner {
    height: auto;
    gap: .75rem;
    justify-content: center;
    flex-wrap: nowrap;
  }

  /* email + phone only */
  .topbar-hours,
  .topbar-right { display: none; }
  .topbar-tel   { display: flex; }

  .topbar-item {
    font-size: .74rem;
    min-width: 0;            /* let the email truncate rather than push */
  }
  .topbar-item a {
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-item svg { width: 12px; height: 12px; }
  .topbar-mail  { flex: 1 1 auto; min-width: 0; }
  .topbar-mail a { display: block; }
  .topbar-tel   { flex: 0 0 auto; }
  .topbar-tel a { color: var(--gold); font-weight: 600; }

  /* "Mail us at:" is dead weight on a narrow screen */
  .topbar-mail-long { display: none; }

  /* a divider between the two */
  .topbar-tel::before {
    content: '';
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,.14);
    margin-right: .35rem;
  }

  /* the topbar must not collapse on scroll the way it does on
     desktop, or the contact details vanish mid-page */
  .site-header.scrolled .header-topbar {
    height: auto;
    opacity: 1;
    padding: .5rem 0;
    overflow: visible;
  }
}

@media (max-width: 420px) {
  .topbar-item { font-size: .68rem; }
  .topbar-inner { gap: .5rem; }
}

/* ============================================================
   P8.2  GALLERY — one image per row on mobile
   ============================================================ */
@media (max-width: 768px) {
  /* !important is required, not lazy: the shared stylesheet carries
     `.gallery-grid { grid-template-columns: repeat(2,1fr) !important }`
     at max-width:480px for the homepage, and an !important declaration
     beats this one on specificity and order alone. */
  #gallery .gallery-grid { grid-template-columns: 1fr !important; }
  #gallery .gallery-item:nth-child(3n+2),
  #gallery .gallery-item:nth-child(2n) { margin-top: 0; }
  #gallery .gallery-item { aspect-ratio: 4 / 3; }
}


/* ============================================================
   PART 9 — COPY CARDS + ACTIVE NAV
   ============================================================ */

/* ── P9.1  Heading + paragraph cards ──────────────────────────
   Used by bathroom-ranges for its six service blocks. The nearest
   existing components don't fit: .sp-keyword is icon + label with
   no body copy, .sp-feature-list li and .sp-vs-item are single
   lines. Surface, radius and spotlight all reuse the shared tokens
   so it sits in the same family as the other cards.
────────────────────────────────────────────────────────────── */
.sp-copy-section { background: var(--bg-dark); overflow: hidden; }
.sp-copy-section > .container { position: relative; z-index: 2; }

.sp-copy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sp-copy-card {
  position: relative;
  overflow: hidden;
  background: var(--sp-card-bg);
  border: 1px solid var(--border);
  border-radius: var(--sp-card-br);
  padding: 2rem 1.75rem;
  transition: transform var(--mid) var(--ease),
              border-color var(--mid) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.sp-copy-card:hover {
  transform: translateY(-6px);
  border-color: rgba(42,148,255,.38);
  box-shadow: 0 22px 48px rgba(0,0,0,.5);
}
/* top hairline that draws in on hover, same idiom as .sp-range-card */
.sp-copy-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.sp-copy-card:hover::before { transform: scaleX(1); }

.sp-copy-title {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-white);
  padding-left: 1rem;
  margin-bottom: .85rem;
}
/* same left accent rule as .sp-article-title, so headings read as one system */
.sp-copy-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .2em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold), rgba(42,148,255,.05));
}

.sp-copy-card p {
  position: relative;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--text-grey);
}

/* cursor spotlight — matches .sp-keyword / .sp-area-card */
.sp-copy-card {
  background-image:
    radial-gradient(240px circle at var(--mx, -300px) var(--my, -300px), rgba(42,148,255,.15), transparent 68%),
    linear-gradient(160deg, #151515 0%, #101010 100%);
  background-repeat: no-repeat;
}

@media (max-width: 1100px) { .sp-copy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .sp-copy-grid { grid-template-columns: 1fr; } }

/* ── P9.2  Active nav item ────────────────────────────────────
   .is-current is applied by markActiveNav() in js/subpage.js to
   whichever header/menu link points at the current folder.
────────────────────────────────────────────────────────────── */
.nav-menu > li > a.is-current,
.dropdown a.is-current,
.mobile-nav-list > li > a.is-current,
.mobile-dropdown a.is-current {
  color: var(--gold);
}
.dropdown a.is-current,
.mobile-dropdown a.is-current {
  background: rgba(42,148,255,.08);
}


/* ============================================================
   PART 10 — ALTERNATING SECTION BACKGROUNDS
   Every plain section alternates between the two tones. The
   classes are assigned in document order by js/subpage.js, so the
   alternation stays exact even though non-section elements (the
   marquee, the sticky sub-nav, the injected contact block) sit
   between them.

   Sections that carry their own visual treatment are skipped by
   that script: the banner, parallax sections, the CTA banner and
   the .sp-scope spec sheet.
   ============================================================ */
:root {
  --sp-alt-a: var(--bg-deep);   /* #0a0a0a */
  --sp-alt-b: var(--bg-dark);   /* #141414 */
}

#main-content > section.sp-bg-a { background: var(--sp-alt-a); }
#main-content > section.sp-bg-b { background: var(--sp-alt-b); }


/* ============================================================
   PART 11 — PROCESS SECTION OVERLAY
   Warm red-black wash over the parallax image on every service
   page's process/steps section.

   Lives here rather than inline on each page so all six pages —
   and every future service page — share one value. This file is
   only loaded by service pages, so the homepage's own process
   section keeps its existing overlay.
   ============================================================ */
.process-section .parallax-overlay {
  background: rgb(3 30 62 / 88%);
}


/* ============================================================
   PART 12 — DEDICATED GALLERY PAGE
   The bathroom-gallery page carries 36 photos, so it runs a
   wider grid than the gallery block inside a service page
   (which is only ~6 images and uses the staggered 3-up layout).
   ============================================================ */
#gallery.sp-gallery-page .gallery-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
/* the staggered offset reads as a mistake across 9 rows — square it up */
#gallery.sp-gallery-page .gallery-item:nth-child(3n+2) { margin-top: 0; }
#gallery.sp-gallery-page .gallery-item { aspect-ratio: 1; }

@media (max-width: 1100px) {
  #gallery.sp-gallery-page .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  #gallery.sp-gallery-page .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  #gallery.sp-gallery-page .gallery-item:nth-child(2n) { margin-top: 0; }
}
/* ≤768px the shared one-per-row rule already applies */


/* ============================================================
   PART 13 — KITCHEN LAYOUT PAGES
   Two small additions for the layout pages and the layouts
   listing. Everything else reuses existing components.
   ============================================================ */

/* ── Disadvantages list: same row as .sp-check but muted, so the
      pros/cons columns read as a pair rather than two tick lists ── */
.sp-check--minus {
  background: rgba(255,255,255,.05);
  border-color: var(--border-light);
  color: var(--text-grey);
  font-size: .9rem;
  line-height: 1;
}

/* ── Layout diagram sitting over the overview photo ────────── */
.sp-layout-icon {
  position: absolute;
  right: -18px;
  bottom: 0;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #1b1b1b, #0e0e0e);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  z-index: 3;
}
.sp-layout-icon img {
  width: 62%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}

/* ── Icon on a copy card (kitchen-layouts listing) ─────────── */
.sp-copy-card { display: block; }          /* the listing cards are links */
.sp-copy-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  background: rgba(42,148,255,.12);
  border: 1px solid rgba(42,148,255,.3);
  transition: background var(--mid) var(--ease);
}
.sp-copy-icon img {
  width: 60%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}
.sp-copy-card:hover .sp-copy-icon { background: var(--gold); }

@media (max-width: 480px) {
  .sp-layout-icon { width: 92px; height: 92px; right: 0; }
}


/* ============================================================
   PART 14 — LINKED SERVICE-AREA CHIPS
   The area headings now wrap their text in an anchor, matching
   the live site's <h2><a href="…">…</a></h2> structure.

   .sp-area-card is a flex row whose first item is the map-pin
   ::before, so the anchor is the second item — it has to grow to
   fill the chip, otherwise only the text itself is clickable.
   ============================================================ */
.sp-area-card a {
  flex: 1;
  color: inherit;
  text-decoration: none;
  /* the chip centres its flex children, so the anchor would only be as tall
     as its text — stretch it and centre the text inside instead, or the top
     and bottom of the chip aren't clickable. */
  align-self: stretch;
  display: flex;
  align-items: center;
  /* stretch only reaches the chip's CONTENT box; the chip's own padding would
     stay dead. Pull the anchor out over that padding and re-add it inside, so
     the hit area covers the chip while the text stays exactly where it was. */
  margin: -.95rem -1.3rem -.95rem 0;
  padding: .95rem 1.3rem .95rem 0;
  /* sits above the ::after shine sweep so the whole chip stays clickable */
  position: relative;
  z-index: 1;
}
.sp-area-card a:hover { color: inherit; }


/* ============================================================
   PART 15 - PHOTO ON A COPY CARD
   kitchen-styles pairs each style with a photo. The copy card
   already handles heading + body; this just seats an image above
   them, flush to the card edges.
   ============================================================ */
.sp-copy-photo {
  display: block;
  width: calc(100% + 3.5rem);
  /* the global reset caps images at max-width:100%, which would clamp this
     back to the card's content box and undo the bleed */
  max-width: none;
  margin: -2rem -1.75rem 1.25rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--sp-card-br) var(--sp-card-br) 0 0;
  transition: transform var(--slow) var(--ease);
}
.sp-copy-card:hover .sp-copy-photo { transform: scale(1.04); }
.sp-copy-card:has(.sp-copy-photo) { overflow: hidden; }


/* ============================================================
   PART 16 - AREAS SECTION WITHOUT A HEADING
   .sp-areas-grid carries margin-top:3rem so it clears a section
   heading. The range pages have no heading above their area list
   (matching the live site), so that margin stacked on top of the
   section padding and left a tall empty band, making the areas
   read as a continuation of the section above it.
   ============================================================ */
.areas-section > .container > .sp-areas-grid:first-child {
  margin-top: 0;
}
/* no heading to fill the upper padding, so tighten the band */
.areas-section:not(:has(.section-header)) {
  padding-top: 3rem;
}


/* ============================================================
   PART 17 - SERVICES MEGA MENU
   ============================================================ */

/* ============================================================
   SERVICES MEGA MENU
   The header collapsed to Home / About Us / Services / Gallery /
   Contact Us, so every service now lives under one dropdown.
   A normal .dropdown is anchored to its <li> and sized to its
   longest label; 45 links need a panel wider than the <li>, so
   .mega-parent goes position:static and the panel is centred on
   .nav-inner instead.
   ============================================================ */
.header-nav .nav-inner { position: relative; }
.nav-menu > li.mega-parent { position: static; }

.dropdown.mega {
  left: 50%;
  right: auto;
  transform: translate(-50%, -8px);
  width: min(1120px, calc(100vw - 3rem));
  min-width: 0;
  padding: 1.5rem 1.6rem 1.7rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.2rem 1.5rem;
  border-radius: var(--radius-lg);
  list-style: none;
}
.has-dropdown:hover .dropdown.mega,
.has-dropdown:focus-within .dropdown.mega { transform: translate(-50%, 0); }

.mega-col { min-width: 0; }
.mega-col > .mega-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 0 .55rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--border-light);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.mega-col > .mega-head i { font-size: .82rem; opacity: .85; }
.mega-col > .mega-head:hover { color: var(--white, #fff); }

.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col ul li a {
  display: block;
  padding: .32rem .5rem;
  border-radius: 6px;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--text-light);
  transition: color var(--fast), background var(--fast), padding-left var(--fast);
}
.mega-col ul li a:hover {
  color: var(--gold);
  background: rgba(200,169,110,.07);
  padding-left: .82rem;
}
.mega-col ul li a.is-current,
.mega-col > .mega-head.is-current { color: var(--gold); }

@media (max-width: 1150px) {
  .dropdown.mega { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile: one flat list with the five group names as sub-headings */
.mobile-dropdown .mdd-head {
  margin-top: .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold);
}
.mobile-dropdown li:first-child .mdd-head { margin-top: 0; }



/* ============================================================
   PART 18 - DEDICATED FAQ PAGE
   .sp-faq is a two-column block (sticky intro on the left,
   accordion on the right). The FAQ page has 35 questions across
   five groups and no intro column, so each group gets its own
   header band and the list runs full width in a readable measure.
   ============================================================ */

/* -- hero: no lead paragraph and no collage, so it is short and centred -- */
.sp-hero--slim { min-height: 46vh; }
.sp-hero-copy--center { text-align: center; max-width: 820px; margin: 0 auto; }
.sp-hero-copy--center .sp-breadcrumb ol,
.sp-hero-copy--center .sp-hero-actions { justify-content: center; }

/* -- group section -- */
.sp-faq-page { position: relative; overflow: hidden; }
.sp-faq-page > .container { position: relative; z-index: 2; }

/* oversized index numeral bled off the right edge */
.faqg-watermark {
  position: absolute;
  top: -.18em;
  right: 2vw;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(9rem, 20vw, 17rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.045);
  pointer-events: none;
  user-select: none;
}

.faqg-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 920px;
  margin: 0 auto 1.1rem;
}
.faqg-icon {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: var(--gold);
  background: linear-gradient(150deg, rgba(42,148,255,.20), rgba(255,255,255,.03));
  border: 1px solid rgba(42,148,255,.34);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform var(--mid) var(--ease);
}
.sp-faq-page:hover .faqg-icon { transform: rotate(-6deg) scale(1.05); }

.faqg-titles { min-width: 0; }
.faqg-title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.15;
  margin: 0;
}
.faqg-count {
  display: inline-block;
  margin-top: .3rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-grey);
}
.faqg-count b { color: var(--gold); font-size: .8rem; }

.faqg-rule {
  max-width: 920px;
  margin: 0 auto 1.7rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(255,255,255,.10) 38%, transparent);
}

/* -- the accordion list -- */
.sp-faq-page .sp-faqpage-list {
  counter-reset: faq;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
/* leading index number, so 15 stacked rows keep a sense of place */
.sp-faq-page .sp-faq-q::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  flex-shrink: 0;
  min-width: 2rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--gold);
  opacity: .6;
  transition: opacity var(--fast) var(--ease);
}
.sp-faq-page .sp-faq-item.open .sp-faq-q::before,
.sp-faq-page .sp-faq-q:hover::before { opacity: 1; }
.sp-faq-page .sp-faq-q > span { flex: 1; }
.sp-faq-page .sp-faq-a p { padding-left: 3.4rem; }

/* -- closing help card -- */
.sp-faq-helpwrap { background: var(--bg-deep); }
.sp-faq-helpwrap .sp-faq-help {
  max-width: 520px;
  margin: 0 auto;
  justify-content: center;
}

@media (max-width: 900px) {
  .sp-hero--slim { min-height: 0; }
  .faqg-watermark { display: none; }
  .faqg-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 1rem; }
  .sp-faq-page .sp-faq-q::before { min-width: 1.7rem; }
  .sp-faq-page .sp-faq-a p { padding-left: 1.4rem; }
}

/* ============================================================
   PART 19 - SERVICE AREAS PAGE
   Eleven regions, each with a heading, two paragraphs and a chip
   grid of suburbs. Shares the FAQ page's banded-section language
   (pin tile, count chip, oversized index numeral).
   ============================================================ */
.sa-intro { max-width: 820px; margin: 0 auto; text-align: center; }
.sa-intro .sp-lead { margin-top: 1rem; }
.sa-intro .sp-lead strong { color: var(--text-white); }

.sa-region { position: relative; overflow: hidden; }
.sa-region > .container { position: relative; z-index: 2; }

.sa-watermark {
  position: absolute;
  top: -.2em;
  right: 2vw;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(9rem, 20vw, 17rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.045);
  pointer-events: none;
  user-select: none;
}

.sa-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.4rem;
}
.sa-pin {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: var(--gold);
  background: linear-gradient(150deg, rgba(42,148,255,.20), rgba(255,255,255,.03));
  border: 1px solid rgba(42,148,255,.34);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform var(--mid) var(--ease);
}
.sa-region:hover .sa-pin { transform: translateY(-3px); }

.sa-titles { min-width: 0; }
.sa-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.2;
  margin: 0;
}
.sa-count {
  display: inline-block;
  margin-top: .3rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-grey);
}
.sa-count b { color: var(--gold); font-size: .8rem; }

/* two columns of prose keeps the paragraphs from running the full width */
.sa-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 2.4rem;
  margin-bottom: 2.1rem;
  padding-left: calc(58px + 1.1rem);   /* aligns under the heading, not the pin */
  border-left: 1px solid transparent;
}
.sa-copy p {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--text-grey);
  margin: 0;
}

.sa-grid { margin-top: 0; }

@media (max-width: 900px) {
  .sa-watermark { display: none; }
  .sa-pin { width: 46px; height: 46px; border-radius: 14px; font-size: 1rem; }
  .sa-copy { grid-template-columns: 1fr; padding-left: 0; }
}

/* hero stat row (Service Areas banner) */
.sp-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 1.1rem 0 .4rem;
}
.sp-hero-stat {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-grey);
}
.sp-hero-stat b {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gold);
  margin-right: .35rem;
  letter-spacing: 0;
}
.sp-hero-stat-sep { width: 1px; height: 20px; background: var(--border-light); }

/* ============================================================
   PART 20 - ABOUT US PAGE
   ============================================================ */


.ab-closing {
  max-width: 900px;
  margin: 3.5rem auto 0;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--text-grey);
  padding-top: 2.2rem;
  border-top: 1px solid var(--border);
}

/* review / quality badges */
.ab-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.6rem 2.6rem;
  margin-top: 2.4rem;
}
.ab-badge-item {
  display: block;
  max-width: 210px;
  transition: filter var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.ab-badge-item img { width: 100%; height: auto; display: block; }
a.ab-badge-item:hover { filter: brightness(1.12); transform: translateY(-4px); }

/* ---- mission / vision ---- */
.ab-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}
.ab-purpose-card {
  position: relative;
  padding: 2.4rem 2.2rem;
  border-radius: var(--sp-card-br);
  background: var(--sp-card-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.ab-purpose-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--mid) var(--ease);
}
.ab-purpose-card:hover { border-color: rgba(42,148,255,.42); transform: translateY(-4px); }
.ab-purpose-card:hover::before { transform: scaleY(1); }
.ab-purpose-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin-bottom: 1.2rem;
  font-size: 1.1rem;
  color: var(--gold);
  background: linear-gradient(150deg, rgba(42,148,255,.2), rgba(255,255,255,.03));
  border: 1px solid rgba(42,148,255,.34);
}
.ab-purpose-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: .8rem;
}
.ab-purpose-card p { font-size: .97rem; line-height: 1.85; color: var(--text-grey); }

/* ---- why choose us ---- */
.ab-why { position: relative; overflow: hidden; }
.ab-why > .container { position: relative; z-index: 2; }
.ab-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.ab-why-card {
  padding: 2.1rem 1.9rem;
  border-radius: var(--sp-card-br);
  background: var(--sp-card-bg);
  border: 1px solid var(--border);
  transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.ab-why-card:hover {
  border-color: rgba(42,148,255,.42);
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(0,0,0,.42);
}
.ab-why-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: 1.1rem;
  font-size: 1.05rem;
  color: var(--gold);
  background: rgba(42,148,255,.12);
  border: 1px solid rgba(42,148,255,.3);
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease);
}
.ab-why-card:hover .ab-why-icon { background: var(--gold); color: #fff; }
.ab-why-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-white);
}
.ab-why-rule {
  display: block;
  width: 42px;
  height: 2px;
  margin: .8rem 0 1rem;
  background: var(--gold);
  transition: width var(--mid) var(--ease);
}
.ab-why-card:hover .ab-why-rule { width: 72px; }
.ab-why-card p { font-size: .93rem; line-height: 1.8; color: var(--text-grey); }

@media (max-width: 1024px) { .ab-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ab-purpose-grid, .ab-why-grid { grid-template-columns: 1fr; }
  .ab-badge { right: .4rem; bottom: .8rem; padding: .8rem 1rem; }
  .ab-badge b { font-size: 1.5rem; }
}

/* ============================================================
   PART 21 - ABOUT: "WHO WE ARE" STORY BLOCK
   The shared .sp-overview media forces aspect-ratio 4/3.2 on its
   image. about-us.png is a 750x925 portrait collage, so that
   cropped the bottom row of photos in half. This block is built
   around the portrait instead: an arch-topped frame at its own
   ratio, an offset outline behind it, and a rotating medallion.
   ============================================================ */
.ab-story { position: relative; overflow: hidden; }
.ab-story > .container { position: relative; z-index: 2; }

/* soft brand glow behind the portrait */
.ab-glow {
  position: absolute;
  left: -8%;
  top: 8%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42,148,255,.16), transparent 66%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 1;
}

.ab-story-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 4.5rem;
  align-items: center;
}

/* ---------- the portrait ---------- */
.ab-figure { position: relative; margin: 0; padding: 0 0 1.5rem 1.5rem; }

.ab-figure-arch {
  position: relative;
  z-index: 2;
  border-radius: 260px 260px 24px 24px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
/* 750x925 source ≈ 4/5, so the arch crops almost nothing */
.ab-figure-arch img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.1s var(--ease);
}
.ab-figure:hover .ab-figure-arch img { transform: scale(1.04); }

/* outline echo, offset behind and tilted */
.ab-figure-frame {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 2.2rem;
  right: 2.2rem;
  bottom: 0;
  border: 1px solid rgba(42,148,255,.55);
  border-radius: 240px 240px 24px 24px;
  transform: rotate(-2.5deg);
  transition: transform var(--slow, .7s) var(--ease);
}
.ab-figure:hover .ab-figure-frame { transform: rotate(-4deg); }

/* vertical brand rail down the left edge */
.ab-figure-rail {
  position: absolute;
  z-index: 3;
  left: -1.9rem;
  bottom: 4.5rem;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--text-grey);
  opacity: .55;
  white-space: nowrap;
}

/* ---------- years medallion ---------- */
.ab-medallion {
  position: absolute;
  z-index: 4;
  right: -.4rem;
  bottom: 1.2rem;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: linear-gradient(150deg, rgba(42,148,255,.96), rgba(21,96,176,.96));
  box-shadow: 0 20px 46px rgba(0,0,0,.55);
}
.ab-medallion-ring {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.5);
  animation: ab-spin 18s linear infinite;
}
@keyframes ab-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ab-medallion-ring { animation: none; } }
.ab-medallion b {
  font-family: var(--font-display);
  font-size: 2.05rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.ab-medallion-label {
  display: block;
  margin-top: .2rem;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

/* ---------- the copy ---------- */
.ab-story-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--text-white);
  margin: .9rem 0 1.4rem;
}
.ab-story-lead {
  font-size: 1.03rem;
  line-height: 1.85;
  color: var(--text-light);
  padding-left: 1.3rem;
  border-left: 2px solid var(--gold);
}
.ab-story-body {
  margin-top: 1.1rem;
  font-size: .96rem;
  line-height: 1.85;
  color: var(--text-grey);
}

/* features as two columns of icon rows, not a plain tick list */
.ab-feature-grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 1.4rem;
}
.ab-feature-grid li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .95rem;
  border-radius: 12px;
  background: var(--sp-card-bg);
  border: 1px solid var(--border);
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-light);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.ab-feature-grid li:hover { border-color: rgba(42,148,255,.45); transform: translateX(4px); }
.ab-feature-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: .78rem;
  color: var(--gold);
  background: rgba(42,148,255,.12);
  border: 1px solid rgba(42,148,255,.28);
}

.ab-story-actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 2.1rem;
}
.ab-phone-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-white);
  border-bottom: 1px solid rgba(42,148,255,.5);
  padding-bottom: .2rem;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.ab-phone-link i { color: var(--gold); font-size: .82rem; }
.ab-phone-link:hover { color: var(--gold); border-color: var(--gold); }

@media (max-width: 1024px) {
  .ab-story-grid { grid-template-columns: 1fr; gap: 3rem; }
  .ab-figure { max-width: 480px; margin-inline: auto; }
  .ab-glow { display: none; }
}
@media (max-width: 560px) {
  .ab-feature-grid { grid-template-columns: 1fr; }
  .ab-figure-rail { display: none; }
  .ab-medallion { width: 96px; height: 96px; right: 0; }
  .ab-medallion b { font-size: 1.6rem; }
}

/* ============================================================
   PART 22 - CONTACT US PAGE
   This page IS the contact section, so it renders its own
   #contact block and omits the shared kh-contact placeholder —
   otherwise the enquiry form (and its id) would appear twice.
   ============================================================ */
.ct-quick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8rem 1.3rem;
  margin-top: 1.4rem;
}
.ct-quick-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-light);
  transition: color var(--fast) var(--ease);
}
.ct-quick-item i { color: var(--gold); font-size: .82rem; }
.ct-quick-item:hover { color: var(--gold); }
.ct-quick-sep { width: 1px; height: 16px; background: var(--border-light); }

.ct-main { position: relative; overflow: hidden; }
.ct-main > .container { position: relative; z-index: 2; }
.ct-watermark {
  position: absolute;
  top: -.22em;
  right: 2vw;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(10rem, 22vw, 19rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.045);
  pointer-events: none;
  user-select: none;
}

.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 2.2rem;
  align-items: start;
}

.ct-heading {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: .7rem;
}
.ct-heading-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold);
  background: rgba(42,148,255,.12);
  border: 1px solid rgba(42,148,255,.3);
}

.ct-form-card {
  padding: 2.4rem 2.2rem;
  border-radius: var(--sp-card-br);
  background: var(--sp-card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 24px 56px rgba(0,0,0,.4);
}
.ct-note {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--text-grey);
  margin-bottom: 1.8rem;
}

/* ---- details rail ---- */
.ct-details {
  padding: 2.4rem 2rem;
  border-radius: var(--sp-card-br);
  background: linear-gradient(165deg, rgba(42,148,255,.09), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  position: sticky;
  top: calc(var(--sp-subnav-top) + 24px);
}
.ct-detail-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ct-detail {
  display: flex;
  gap: .9rem;
  padding: .9rem .2rem;
  border-bottom: 1px solid var(--border);
}
.ct-detail:last-child { border-bottom: 0; }
.ct-detail-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: .88rem;
  color: var(--gold);
  background: rgba(42,148,255,.12);
  border: 1px solid rgba(42,148,255,.28);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.ct-detail:hover .ct-detail-icon { background: var(--gold); color: #fff; }
.ct-detail-body { min-width: 0; display: grid; gap: .12rem; }
.ct-detail-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-grey);
  margin-bottom: .18rem;
}
.ct-detail-body a,
.ct-detail-value {
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 600;
  color: var(--text-white);
  word-break: break-word;
  transition: color var(--fast) var(--ease);
}
.ct-detail-body a:hover { color: var(--gold); }

.ct-abn {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.5rem;
  padding: .75rem 1rem;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px dashed var(--border-light);
}
.ct-abn-label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gold);
}
.ct-abn-value {
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-light);
}

.ct-social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.ct-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-light);
  border: 1px solid var(--border-light);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.ct-social a:hover { background: var(--gold); color: #fff; border-color: var(--gold); transform: translateY(-3px); }

/* ---- map ---- */
.ct-mapsection { padding-top: 0; }
.ct-map {
  position: relative;
  border-radius: var(--sp-card-br);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
}
.ct-map iframe { display: block; filter: grayscale(.35) contrast(1.05); }
.ct-map-card {
  position: absolute;
  left: 1.6rem;
  bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: min(400px, calc(100% - 3.2rem));
  padding: 1rem 1.3rem;
  border-radius: 14px;
  background: rgba(12,12,12,.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  box-shadow: 0 16px 36px rgba(0,0,0,.5);
}
.ct-map-pin {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: var(--gold);
}
.ct-map-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: .97rem;
  color: var(--text-white);
}
.ct-map-card span { font-size: .82rem; color: #ffffff; }

@media (max-width: 980px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-details { position: static; }
}
@media (max-width: 560px) {
  .ct-form-card, .ct-details { padding: 1.7rem 1.3rem; }
  .ct-map-card { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
}

/* ============================================================
   PART 23 - HEADER CALL BUTTON ON MOBILE
   The nav call button is what P8's ".topbar-tel { display:none }"
   defers to on desktop. Below 900px the topbar puts the phone
   back, and the shared stylesheet turns .btn-call into a
   full-width bar — which would be a second copy of the same
   number sitting under the hamburger. Hide it there.
   ============================================================ */
@media (max-width: 900px) {
  #site-header .nav-ctas .btn-call { display: none !important; }
}


/* right-arrow marker on Services dropdown children */
.nav-link-icon {
  font-size: .62rem;
  margin-right: .5rem;
  color: var(--gold);
  opacity: .7;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
  display: inline-block;
}
.mega-col ul li a:hover .nav-link-icon,
.mobile-dropdown li a:hover .nav-link-icon { opacity: 1; transform: translateX(2px); }


/* footer bottom bar: the Sitemap link is gone, so what remains is
   centred rather than pushed to opposite edges */
.footer-bottom-inner {
  justify-content: center;
  text-align: center;
}


/* ============================================================
   TESTIMONIAL SLIDER — CARD WIDTH
   The cards were sized with min-width + flex-shrink:0. min-width
   is only a floor, so with flex-basis:auto each card grew to its
   paragraph max-content width (~1609px inside a 1152px slider)
   and the quote ran off the right edge under overflow:hidden.
   A definite flex-basis caps them at half the viewport instead.
   ============================================================ */
.testimonial-card {
  flex: 0 0 calc(50% - .75rem);
  min-width: 0;
  max-width: calc(50% - .75rem);
}
.testimonial-text { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  .testimonial-card {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
  }
}


/* ============================================================
   ENQUIRY FORM — BLACK → RED GRADIENT PANEL
   .contact-form-wrap was transparent with no padding, so it also
   needs card padding/radius for the gradient to read as a panel.
   ============================================================ */
.contact-form-wrap,
.ct-form-card,
.hero-form-card {
  background: linear-gradient(152deg,
              #0b0b0b 0%,
              #141414 38%,
              #0e3a66 76%,
              #1668b8 100%) !important;
  border: 1px solid rgba(42,148,255,.34);
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
}
/* the hero card keeps its own 20px radius; the others get one */
.contact-form-wrap,
.ct-form-card { border-radius: var(--radius-lg, 18px); }
.contact-form-wrap { padding: 2.25rem 2rem; }

/* mobile banner form: same ramp, top-to-bottom to suit the strip */
.mobile-banner-reqform {
  background: linear-gradient(180deg,
              #0b0b0b 0%,
              #141414 42%,
              #0e3a66 80%,
              #1668b8 100%) !important;
}

/* keep the fields legible against the red end of the ramp */
.contact-form-wrap input,
.contact-form-wrap textarea,
.ct-form-card input,
.ct-form-card textarea {
  background: rgba(10,10,10,.72);
  border-color: rgba(255,255,255,.16);
}
.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus,
.ct-form-card input:focus,
.ct-form-card textarea:focus { background: rgba(10,10,10,.9); }

.contact-form-wrap label,
.ct-form-card label { color: rgba(255,255,255,.72); }

@media (max-width: 560px) {
  .contact-form-wrap { padding: 1.6rem 1.25rem; }
}


/* ============================================================
   EXPLORE-OUR-SERVICES LISTING CARDS
   The Services mega-menu collapsed to the 5 hubs, so each hub page
   now carries its own sub-service list. Reuses .sp-copy-card, but
   these cards are icon + title only (no paragraph), so the stock
   2rem padding leaves them looking empty — hence the compact
   modifier. .sp-copy-icon only had an img rule, so the Font Awesome
   glyph needed styling of its own.
   ============================================================ */
.sp-copy-grid--list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.sp-copy-card--compact {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 1.2rem;
}
.sp-copy-card--compact .sp-copy-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
  flex-shrink: 0;
  border-radius: 11px;
}
.sp-copy-card--compact .sp-copy-title {
  flex: 1;
  min-width: 0;
  font-size: .95rem;
  line-height: 1.35;
  padding-left: 0;
  margin-bottom: 0;
}
/* the stock .sp-copy-title::before accent bar would sit oddly inline */
.sp-copy-card--compact .sp-copy-title::before { content: none; }

.sp-copy-icon i {
  font-size: 1.05rem;
  color: var(--gold);
  transition: color var(--mid) var(--ease);
}
.sp-copy-card:hover .sp-copy-icon i { color: #fff; }

.sp-copy-go {
  flex-shrink: 0;
  font-size: .72rem;
  color: var(--text-grey);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sp-copy-card--compact:hover .sp-copy-go {
  opacity: 1;
  transform: translateX(0);
  color: var(--gold);
}

@media (max-width: 1100px) { .sp-copy-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .sp-copy-grid--list { grid-template-columns: 1fr; } }