/* =========================================================================
   Singh Solar Couple — Design System
   Faithfully reproduces the live site tokens + the "new hero" component set,
   extended into a full reusable component library for the new website.
   ========================================================================= */

/* ----- Fonts ----- */
/* Fonts are enqueued in functions.php with a preconnect — an @import here forced the
   browser to download and parse this file before it could even discover them. */

:root {
  --color-primary:   #8B6541;   /* deep green (footer / dark bands / headings) */
  --color-primary-2: #5e4026;   /* CTA dark green */
  /* gold accent palette (from reference site) */
  --gold:            #FED38A;
  --gold-light:      #FFE6BC;
  --gold-deep:       #BE8549;
  --grad-gold:       linear-gradient(120deg, #FED38A 0%, #BE8549 100%);
  --color-secondary: #BE8549;   /* deep gold — readable accent on light bg */
  --color-accent:    #BE8549;   /* deep gold */
  --color-text:      #161616;
  --color-body:      #4F4F4F;
  --color-cream:     #FAF6EC;
  --color-white:     #FFFFFF;
  --wa-green:        #25D366;

  --font-body:    'Be Vietnam Pro', system-ui, sans-serif;
  --font-heading: 'Be Vietnam Pro', sans-serif;
  --font-accent:  'Roboto', sans-serif;

  --container:   1280px;
  --container-wide: 1440px;
  --radius-card: 15px;
  --radius-pill: 999px;

  --shadow-md:  0 6px 24px rgba(3, 51, 43, 0.08);
  --shadow-lg:  0 18px 48px rgba(3, 51, 43, 0.14);
  --shadow-cta: 0 8px 22px rgba(190, 133, 73, 0.32);

  --header-h: 84px;
}

/* ----- Lenis smooth scroll ----- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ----- Reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-white);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin: 0 0 .5em;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
/* height:auto is REQUIRED alongside the width/height attributes ssc_img() emits.
   Without it the browser honours the literal height attribute while CSS controls the
   width, which stretches every responsive image vertically. */
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 28px; }
.section { padding: 84px 0; }
.section-sm { padding: 56px 0; }
.bg-cream { background: linear-gradient(180deg, var(--color-cream) 0%, #FFFCF3 100%); }
.bg-primary { background: var(--color-primary); color: rgba(255,255,255,.82); }
.bg-primary h1,.bg-primary h2,.bg-primary h3,.bg-primary h4 { color: #fff; }
.bg-soft { background: #fafaf6; }
.text-center { text-align: center; }

/* ----- Typography helpers ----- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-accent);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-accent); }
.section-title { font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 16px; }
.section-lead { font-size: 18px; max-width: 640px; margin: 0 auto; color: var(--color-body); }
.section-head { max-width: 760px; margin: 0 auto 56px; }
.section-head.left { margin-left: 0; }
.highlight {
  background: linear-gradient(180deg, transparent 62%, rgba(254,211,138,.55) 62%);
  padding: 0 2px;
}
.text-accent { color: var(--color-accent); }
.text-secondary { color: var(--color-secondary); }

/* ===== Accent contrast on dark / brown surfaces — use bright gold so
   accents & icons stand out instead of low-contrast gold-on-brown ===== */
.s4g-topbar strong { color: var(--gold); }
.breadcrumb a { color: var(--gold); }
.stat .num, .bg-primary .stat .num { color: var(--gold); }
.bg-primary .eyebrow, .cta-band .eyebrow, .video-band .eyebrow { color: var(--gold); }
.bg-primary .eyebrow::before, .cta-band .eyebrow::before, .video-band .eyebrow::before { background: var(--gold); }
.s4g-modal-aside li svg { color: var(--gold); }
.cta-band .text-secondary, .bg-primary .text-secondary, .video-band .text-secondary { color: var(--gold); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  border: 0; cursor: pointer; transition: all .18s ease;
  white-space: nowrap; border-radius: var(--radius-pill);
  padding: 13px 26px;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--grad-gold); color: #2a1c08; box-shadow: var(--shadow-cta); }
.btn-primary:hover { filter: brightness(1.04); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(190,133,73,.4); }
.btn-dark { background: var(--color-primary); color: #fff; }
.btn-dark:hover { background: #6b4a2c; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--color-primary); border: 1.5px solid rgba(139,101,65,.35); }
.btn-ghost:hover { border-color: var(--color-primary); background: rgba(139,101,65,.07); }
.btn-white { background: #fff; color: var(--color-primary); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-large { font-size: 16px; padding: 16px 32px; }
.btn-block { width: 100%; }

/* =========================================================================
   HEADER
   ========================================================================= */
.s4g-topbar {
  /* Darkened from --color-primary (#8B6541). On that background the gold phone number
     measured 1.65:1 and the white text 4.33:1 — both below the 4.5:1 minimum. At #4A331D
     the gold reads 8.4:1 and white 11.8:1, with the warm brand feel intact. */
  background: #4A331D; color: #fff;
  font-size: 13px; font-weight: 500;
}
.s4g-topbar .container-wide {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px;
}
.s4g-topbar a { color: #fff; transition: color .15s; }
.s4g-topbar a:hover { color: var(--gold); }
.s4g-topbar .tb-left { display: inline-flex; gap: 20px; align-items: center; }
.s4g-topbar .tb-right { display: inline-flex; gap: 18px; align-items: center; }
.s4g-topbar strong { color: var(--gold); }
.s4g-topbar svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }

/* wrapper must not form a containing block, or sticky header would scroll away */
#site-header { display: contents; }


.s4g-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(42,21,0,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .25s ease, background .25s ease;
}
.s4g-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.4); background: rgba(42,21,0,.98); }
.s4g-header { transition: box-shadow .25s ease, background .25s ease, transform .35s cubic-bezier(.4,0,.2,1); }
.s4g-header.s4g-hide { transform: translateY(-100%); }
.s4g-header .nav {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}
.s4g-logo img { height: 46px; width: auto; }
.s4g-menu { display: flex; align-items: center; gap: 4px; }
.s4g-menu > li > a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 14px; font-weight: 600; font-size: 15px;
  color: #ededed; border-radius: 10px;
  transition: color .15s, background .15s;
}
.s4g-menu > li > a:hover { color: #fff; background: rgba(255,255,255,.08); }
.s4g-menu > li > a.active { color: var(--gold); }
.s4g-menu .caret { width: 11px; height: 11px; transition: transform .2s; }
.s4g-has-drop { position: relative; }
.s4g-has-drop:hover .caret { transform: rotate(180deg); }
.s4g-drop {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 280px; background: #fff;
  border: 1px solid #ece7d7; border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .2s ease; z-index: 50;
}
.s4g-has-drop:hover .s4g-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.s4g-drop a {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 12px; border-radius: 10px; transition: background .15s;
}
.s4g-drop a:hover { background: var(--color-cream); }
.s4g-drop .di {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(190,133,73,.12); color: var(--color-accent);
}
.s4g-drop .di svg { width: 20px; height: 20px; }
.s4g-drop .dt { display: block; font-weight: 600; font-size: 14.5px; color: var(--color-text); }
.s4g-drop .dd { display: block; font-size: 12.5px; color: var(--color-body); margin-top: 2px; }

/* Mega dropdown (Services) — FULL WIDTH, links column + featured image card */
.s4g-has-mega { position: static; }
.s4g-drop.s4g-mega {
  left: 0; right: 0; top: 100%; width: 100%; min-width: 0;
  padding: 0; border-radius: 0 0 16px 16px; border-left: 0; border-right: 0;
}
.mega-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; padding: 30px 28px 34px; }
.mega-links { display: flex; flex-direction: column; }
.mega-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-body); padding: 4px 10px 8px; }
.mega-links a { display: block; padding: 12px 10px; font-size: 15px; font-weight: 500; color: var(--color-text); border-top: 1px solid #f0ece0; transition: color .15s, padding-left .15s; }
.mega-links a:first-of-type { border-top: 0; }
.mega-links a:hover { color: var(--gold-deep); padding-left: 16px; background: none; }
.mega-feature { position: relative; border-radius: 14px; overflow: hidden; min-height: 230px; display: flex; align-items: flex-end; }
.mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 26%; }
.mega-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,21,0,.45) 0%, rgba(42,21,0,.55) 45%, rgba(42,21,0,.92) 100%); }
.mega-feature:hover { background: none; }
.mega-feature-body { position: relative; z-index: 2; padding: 22px; }
.mega-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.mega-feature h4, .mega-feature-title { display: block; font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 18px; line-height: 1.25; margin: 6px 0 14px; }
.mega-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--grad-gold); color: #2a1c08; font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 999px; }
.mega-cta svg { width: 14px; height: 14px; }

.s4g-header-cta { display: flex; align-items: center; gap: 12px; }
@media (max-width: 1240px) and (min-width: 1025px) { .s4g-cta-call { display: none; } }
.s4g-menu > li > a { white-space: nowrap; }
/* ghost (phone) button adapted for the dark header */
.s4g-header .btn-ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.s4g-header .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }
.s4g-burger {
  display: none; flex-direction: column; gap: 5px; padding: 8px;
  background: none; border: 0;
}
.s4g-burger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .25s; }
.s4g-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.s4g-burger.open span:nth-child(2){ opacity: 0; }
.s4g-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   HERO  (faithful reproduction of the VWO "new hero" variant)
   ========================================================================= */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--color-cream) 0%, #FFFCF3 100%);
  padding: 64px 0; min-height: 600px;
  display: flex; align-items: center;
}
.hero > .container { position: relative; z-index: 2; width: 100%; }
.hero-image-wrap {
  position: absolute; top: 0; right: 0; bottom: 0; width: 55%; z-index: 1; pointer-events: none;
}
.hero-image-wrap > img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% center; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.03) 10%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.30) 26%, rgba(0,0,0,.55) 34%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.93) 50%, #000 58%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.03) 10%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.30) 26%, rgba(0,0,0,.55) 34%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.93) 50%, #000 58%, #000 100%);
}
#hero-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-text { max-width: 580px; }
.hero-h1 {
  font-size: clamp(32px, 4vw, 50px); line-height: 1.08; font-weight: 700;
  margin: 0 0 18px; color: var(--color-text);
}
.hero-sub { font-size: 17px; line-height: 1.55; color: var(--color-body); margin: 0 0 26px; max-width: 560px; }
.hero-microtrust {
  margin-top: 16px; font-size: 13px; color: rgba(0,0,0,.45);
  display: flex; align-items: center; gap: 6px;
}
.hero-microtrust svg { width: 13px; height: 13px; color: rgba(0,0,0,.35); }

.trust-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px; background: rgba(255,255,255,.7);
  border: 1px solid #e8e3d3; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 500; color: var(--color-body);
  margin-bottom: 24px; backdrop-filter: blur(4px);
}
.trust-eyebrow .pill { display: inline-flex; align-items: center; gap: 5px; }
.trust-eyebrow .pill svg { width: 13px; height: 13px; }
.trust-eyebrow .star { color: #E0A93F; }
.trust-eyebrow .dot { color: rgba(0,0,0,.25); }
.trust-eyebrow strong { font-weight: 700; color: var(--color-text); }

.badges-stack {
  position: absolute; top: 50%; right: 24px; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; z-index: 3;
}
.float-badge {
  background: #fff; border-radius: 14px; padding: 13px 17px;
  box-shadow: 0 12px 32px rgba(3,51,43,.18);
  display: flex; align-items: center; gap: 11px;
}
.float-badge .num { font-size: 21px; font-weight: 700; color: var(--color-text); line-height: 1; }
.float-badge .label { font-size: 11.5px; color: var(--color-body); font-weight: 500; line-height: 1.2; max-width: 92px; }
.float-badge .dot-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.badge-customers .dot-icon { background: rgba(190,133,73,.12); color: var(--color-accent); }
.badge-failure .dot-icon { background: rgba(190,133,73,.15); color: var(--color-secondary); }
.float-badge svg { width: 19px; height: 19px; }

/* =========================================================================
   PRODUCT CARDS  (Solar Panels for Homes / Commercial) — faithful
   ========================================================================= */
.cards-section { background: #fff; padding: 36px 0 40px; }
.cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.card {
  position: relative; border-radius: var(--radius-card); padding: 26px 28px;
  transition: box-shadow .2s, transform .2s, border-color .2s; cursor: pointer;
  display: flex; align-items: center; gap: 18px; min-height: 140px; overflow: hidden;
}
.card-primary { background: linear-gradient(135deg, rgba(190,133,73,.10) 0%, rgba(190,133,73,.04) 100%); border: 1.5px solid rgba(190,133,73,.45); }
.card-primary .card-icon { background: rgba(190,133,73,.18); color: var(--color-accent); }
.card-primary .card-arrow { background: var(--color-accent); }
.card-primary .card-arrow svg { color: #fff; }
.card-secondary { background: #fff; border: 1.5px solid #1a1a1a; }
.card-secondary .card-icon { background: #f0f0ec; color: var(--color-text); }
.card-secondary .card-arrow { background: #ebebe5; }
.card-secondary .card-arrow svg { color: var(--color-text); }
.card:hover { box-shadow: 0 8px 24px rgba(3,51,43,.12); transform: translateY(-3px); }
.card-primary:hover { border-color: var(--color-accent); }
.card-secondary:hover { border-color: #000; }
.card-icon { width: 58px; height: 58px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.card-icon svg { width: 27px; height: 27px; }
.card-body { flex: 1; min-width: 0; }
.card-title { font-size: 23px; font-weight: 700; margin: 0 0 6px; line-height: 1.2; color: var(--color-text); }
.card-desc { font-size: 14px; color: var(--color-body); margin: 0; line-height: 1.45; }
.card-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 12.5px; font-weight: 600; }
.card-primary .card-tag { color: var(--color-accent); }
.card-secondary .card-tag { color: var(--color-body); opacity: .8; }
.card-tag svg { width: 13px; height: 13px; }
.card-arrow { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.card-arrow svg { width: 18px; height: 18px; transition: transform .2s; }
.card:hover .card-arrow svg { transform: translateX(3px); }

/* ----- Trust band ----- */
.trust-band { border-top: 1px solid #ece7d7; background: #fafaf6; padding: 26px 0; }
.trust-row { display: flex; align-items: center; justify-content: center; gap: 38px; flex-wrap: wrap; }
.trust-item { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13px; color: var(--color-text); }
.trust-item small { display: block; font-size: 10px; font-weight: 500; color: var(--color-body); text-transform: uppercase; letter-spacing: .06em; }
.trust-item svg { width: 34px; height: 34px; color: var(--color-primary); flex: 0 0 auto; }
/* The shield is a stroked icon sitting next to a solid star. At equal box size the outline
   reads noticeably lighter and smaller, which is most obvious on mobile where the two sit
   close together. Thicken the stroke so the optical weight matches. */
.trust-item svg[fill="none"] { stroke-width: 2.2; }
@media (max-width: 720px) {
  .trust-item svg { width: 38px; height: 38px; }
  .trust-item svg[fill="none"] { stroke-width: 2.4; }
  .trust-row { gap: 22px 30px; }
}
.trust-badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 16px; border: 1.5px solid #1a1a1a; border-radius: 8px; background: #fff;
}
.trust-badge .top { font-size: 14px; font-weight: 800; color: var(--color-text); line-height: 1; }
.trust-badge .bot { font-size: 8.5px; font-weight: 600; color: var(--color-body); letter-spacing: .06em; text-transform: uppercase; }

/* =========================================================================
   GENERIC COMPONENTS (for all pages)
   ========================================================================= */
/* Feature grid */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.feature {
  background: #fff; border: 1px solid #ece7d7; border-radius: var(--radius-card);
  padding: 30px 28px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(190,133,73,.4); }
.feature .fi {
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(190,133,73,.12); color: var(--color-accent);
}
.feature .fi svg { width: 27px; height: 27px; }
.feature h3 { font-size: 20px; margin: 0 0 8px; }
.feature p { font-size: 14.5px; margin: 0; }

/* Split / media section */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius-card); box-shadow: var(--shadow-lg); width: 100%; }
.split-body h2 { font-size: clamp(26px, 3vw, 38px); }
.checklist li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 15.5px; color: var(--color-body); }
.checklist li svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--color-accent); margin-top: 1px; }

/* Stats strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat .num { font-family: var(--font-heading); font-size: clamp(34px, 4vw, 52px); font-weight: 800; color: var(--gold); line-height: 1; }
.bg-primary .stat .num { color: var(--gold); }
.stat .lbl { font-size: 14px; margin-top: 8px; font-weight: 500; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 28px; }
.step { display: flex; gap: 20px; align-items: flex-start; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-weight: 700; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.step h3 { font-size: 19px; margin: 4px 0 6px; }
.step p { font-size: 14.5px; margin: 0; }

/* Process step card (numbered) */
.pstep { background: #fff; border: 1px solid #ece7d7; border-radius: var(--radius-card); padding: 30px 26px; position: relative; transition: transform .2s, box-shadow .2s; }
.pstep:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pstep .pn { width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.pstep:nth-child(2) .pn { background: var(--color-accent); }
.pstep:nth-child(3) .pn { background: var(--color-secondary); }
.pstep:nth-child(4) .pn { background: var(--color-primary-2); }
.pstep h3 { font-size: 19px; margin: 0 0 8px; }
.pstep p { font-size: 14px; margin: 0; }

/* Testimonials */
.tcard { background: #fff; border: 1px solid #ece7d7; border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-md); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(190,133,73,.4); }
.tcard .stars { color: #ffb400; margin-bottom: 12px; letter-spacing: 2px; }
.tcard p { font-size: 15px; color: var(--color-text); font-style: italic; }
.tcard .who { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.tcard .who .av { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.tcard .who b { display: block; font-size: 14px; color: var(--color-text); }
.tcard .who span { font-size: 12.5px; color: var(--color-body); }

/* Reviews carousel (transform-based, infinite, smooth) */
.rev-carousel { position: relative; }
/* vertical padding for top/bottom shadows; soft mask so side shadows fade
   gently at the clip edge instead of being hard-cut at any scroll position */
.rev-viewport {
  overflow: hidden; padding: 16px 28px 42px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.rev-track { display: flex; gap: 24px; will-change: transform; }
.rev-track > .tcard { flex: 0 0 calc((100% - 48px) / 3); }
/* fallback before JS upgrades it (no track yet) */
.rev-viewport > .tcard { flex: 0 0 calc((100% - 48px) / 3); }
.rev-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; background: #fff;
  border: 1px solid #e2dccb; box-shadow: var(--shadow-md); cursor: pointer; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-primary); transition: all .15s ease;
}
.rev-arrow svg { width: 22px; height: 22px; }
.rev-arrow:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.rev-prev { left: -16px; } .rev-next { right: -16px; }
@media (max-width: 1024px) { .rev-track > .tcard, .rev-viewport > .tcard { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px)  { .rev-track > .tcard, .rev-viewport > .tcard { flex-basis: 100%; } .rev-arrow { display: none; } }
/* carousel dots */
.rev-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.rev-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d8cdb6; cursor: pointer; transition: all .25s ease; }
.rev-dots button.active { background: var(--gold-deep); width: 22px; }

/* FAQ accordion */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #e6e1d2; }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0;
  padding: 22px 40px 22px 0; font-size: 17px; font-weight: 600; color: var(--color-text);
  position: relative; font-family: var(--font-heading);
}
.faq-q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 24px; color: var(--color-accent); transition: transform .2s; font-weight: 400;
}
.faq-item.open .faq-q::after { content: "−"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 0 22px; font-size: 15px; margin: 0; }

/* Blog cards */
.blog-card { background: #fff; border: 1px solid #ece7d7; border-radius: var(--radius-card); overflow: hidden; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-card .thumb { aspect-ratio: 16/10; overflow: hidden; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .thumb img { transform: scale(1.06); }
.blog-card .bc-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.blog-card .cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent); margin-bottom: 10px; }
.blog-card h3 { font-size: 19px; margin: 0 0 10px; }
.blog-card p { font-size: 14px; margin: 0 0 16px; }
.blog-card .meta { margin-top: auto; font-size: 12.5px; color: var(--color-body); display: flex; gap: 14px; }
.blog-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border-radius: var(--radius-card); overflow: hidden; border: 1px solid #ece7d7; background: #fff; }
.blog-featured .thumb { min-height: 340px; overflow: hidden; }
.blog-featured .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured .bc-body { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured h2 { font-size: 30px; }

/* Page hero (interior pages) */
.page-hero {
  position: relative; padding: 120px 0 70px; background: #0A0A0A; color: #fff; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(190,133,73,.18), transparent 50%);
}
.page-hero .container { position: relative; z-index: 2; }
/* per-page header image panel (right side on desktop; full-bleed behind text on mobile) */
.page-hero .ph-media { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; z-index: 1; pointer-events: none; overflow: hidden; }
.page-hero .ph-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: phZoom 22s ease-in-out infinite alternate; }
.page-hero .ph-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0A0A0A 0%, rgba(10,10,10,.6) 32%, rgba(10,10,10,0) 85%); }
@keyframes phZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .page-hero .ph-media img { animation: none; } }
@media (max-width: 760px) {
  .page-hero .ph-media { width: 100%; }
  .page-hero .ph-media::after { background: linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.82) 100%); }
}
.page-hero h1 { color: #fff; font-size: clamp(34px, 4.5vw, 56px); margin: 0 0 14px; }
.page-hero p { font-size: 18px; color: rgba(255,255,255,.8); max-width: 620px; margin: 0; }
.breadcrumb { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.breadcrumb a { color: var(--color-secondary); }

/* Video background band */
.video-band { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.video-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.video-band .vb-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(42,30,16,.74) 0%, rgba(42,30,16,.6) 50%, rgba(42,30,16,.82) 100%); }
.video-band .vb-content { position: relative; z-index: 2; color: #fff; max-width: 900px; padding: 96px 28px; }
.video-band .eyebrow { justify-content: center; color: var(--color-secondary); }
.video-band .eyebrow::before { background: var(--color-secondary); }
.video-band h2 { color: #fff; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.1; margin: 0 0 16px; }
.video-band p { color: rgba(255,255,255,.86); font-size: 18px; max-width: 620px; margin: 0 auto 28px; }
.video-band .vb-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) { .video-band { min-height: 420px; } .video-band .vb-content { padding: 64px 20px; } }

/* CTA band */
/* editable image/video bands used to break up text-heavy pages */
.media-band { position: relative; max-width: 1120px; margin: 0 auto; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 6; box-shadow: var(--shadow-md); }
.media-band img, .media-band video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .media-band { aspect-ratio: 16 / 10; } }

.cta-band { background-color: var(--color-primary); background-size: cover; background-position: center; color: #fff; border-radius: 22px; padding: 56px; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(190,133,73,.25), transparent 70%); }
.cta-band .inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); margin: 0 0 8px; }
.cta-band p { color: rgba(255,255,255,.8); margin: 0; }

/* Contact form */
.s4g-form { display: grid; gap: 16px; }
.s4g-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid #e2dccb; border-radius: 12px;
  font-family: inherit; font-size: 15px; color: var(--color-text); background: #fff; transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--color-accent); }
.field textarea { min-height: 120px; resize: vertical; }
.contact-card { background: #fff; border: 1px solid #ece7d7; border-radius: var(--radius-card); padding: 36px; box-shadow: var(--shadow-md); }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; }
.contact-info-item .ci { width: 50px; height: 50px; border-radius: 12px; flex: 0 0 auto; background: rgba(190,133,73,.12); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; }
.contact-info-item .ci svg { width: 23px; height: 23px; }
.contact-info-item b { display: block; color: var(--color-text); font-size: 16px; margin-bottom: 2px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.s4g-footer { background: #291500; color: rgba(255,255,255,.72); padding: 70px 0 0; }
.s4g-footer a { color: rgba(255,255,255,.72); transition: color .15s; }
.s4g-footer a:hover { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 48px; }
.footer-logo img { height: 56px; margin-bottom: 18px; }
.footer-about p { font-size: 14px; max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--color-accent); }
.footer-social svg { width: 17px; height: 17px; fill: #fff; }
.footer-col h3, .footer-col h4 { color: #fff; font-size: 15px; margin: 0 0 18px; letter-spacing: .02em; }
.footer-col li { margin-bottom: 11px; font-size: 14px; }
.footer-contact-item { display: flex; gap: 10px; margin-bottom: 14px; font-size: 14px; }
.footer-contact-item svg { width: 17px; height: 17px; color: var(--color-secondary); flex: 0 0 auto; margin-top: 3px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }

/* =========================================================================
   FLOATING CTA  (Call Freephone + WhatsApp + back-to-top) — faithful
   ========================================================================= */
#s4g-fcta {
  position: fixed; right: 22px; bottom: 22px; z-index: 9990;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
}
.s4g-fcta-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px;
  border-radius: 999px; font-weight: 600; font-size: 15px; line-height: 1;
  color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .15s, box-shadow .15s;
}
.s4g-fcta-pill:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0,0,0,.26); color: #fff; }
.s4g-fcta-call { background: var(--grad-gold); color: #2a1c08; }
.s4g-fcta-call:hover { color: #2a1c08; }
.s4g-fcta-wa { background: var(--wa-green); color: #0a2e22; }
.s4g-fcta-wa:hover { color: #0a2e22; }
.s4g-fcta-pill svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }
#s4g-back-to-top {
  width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary-2); border: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: transform .15s, opacity .2s;
  display: none; opacity: 0; align-items: center; justify-content: center;
}
#s4g-back-to-top.show { display: inline-flex; opacity: 1; }
#s4g-back-to-top:hover { transform: translateY(-2px); }
#s4g-back-to-top svg { width: 22px; height: 22px; fill: #fff; }

/* =========================================================================
   QUOTE POPUP  ("Get Your Quote")
   ========================================================================= */
.s4g-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(42,30,16,.6); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s;
}
.s4g-modal.open { opacity: 1; visibility: visible; }
.s4g-modal-box {
  background: #fff; border-radius: 20px; width: 100%; max-width: 880px;
  max-height: 92vh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(20px) scale(.98); transition: transform .25s; box-shadow: var(--shadow-lg);
}
.s4g-modal.open .s4g-modal-box { transform: none; }
.s4g-modal-aside {
  background: linear-gradient(160deg, var(--color-primary) 0%, #6b4a2c 100%);
  color: #fff; padding: 44px 38px; position: relative; overflow: hidden;
}
.s4g-modal-aside::after { content: ""; position: absolute; bottom: -50px; left: -50px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(190,133,73,.3), transparent 70%); }
.s4g-modal-aside h3 { color: #fff; font-size: 26px; position: relative; z-index: 2; }
.s4g-modal-aside p { color: rgba(255,255,255,.82); font-size: 14.5px; position: relative; z-index: 2; }
.s4g-modal-aside ul { position: relative; z-index: 2; margin-top: 22px; }
.s4g-modal-aside li { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; font-size: 14px; }
.s4g-modal-aside li svg { width: 20px; height: 20px; color: var(--color-accent); flex: 0 0 auto; }
.s4g-modal-form { padding: 40px 38px; overflow-y: auto; }
.s4g-modal-form h4 { font-size: 22px; margin: 0 0 4px; }
.s4g-modal-form .sub { font-size: 13.5px; color: var(--color-body); margin-bottom: 22px; }
.s4g-modal-close {
  position: absolute; top: 14px; right: 16px; z-index: 5; width: 36px; height: 36px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.s4g-modal-close:hover { background: rgba(255,255,255,.3); }
.s4g-modal-success { text-align: center; padding: 30px 10px; display: none; }
.s4g-modal-success.show { display: block; }
.s4g-modal-success .ok { width: 70px; height: 70px; border-radius: 50%; background: rgba(190,133,73,.14); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.s4g-modal-success .ok svg { width: 36px; height: 36px; }

/* =========================================================================
   ANIMATION HELPERS (GSAP fallback friendly)
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(30px); }
.is-visible .reveal, .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .container, .container-wide { padding: 0 22px; }
  .section { padding: 64px 0; }
  .s4g-topbar { display: none; }
  .s4g-menu, .s4g-header-cta .btn { display: none; }
  .s4g-header-cta .theme-toggle { display: none; }  /* use the drawer toggle on mobile */
  .s4g-burger { display: flex; }
  .s4g-header-cta .btn.quote-open-mobile { display: inline-flex; }

  .hero { padding: 0; min-height: 0; display: block; }
  .hero-image-wrap { position: relative; width: 100%; aspect-ratio: 4/5; max-height: 460px; margin-top: 0; }
  .hero-image-wrap > img { object-position: center 30%; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 8%, #000 100%); mask-image: linear-gradient(to top, transparent 0%, #000 8%, #000 100%); }
  .hero > .container { padding-top: 26px; }
  .hero-text { max-width: 100%; }
  .badges-stack { right: 14px; }

  .cards-grid { grid-template-columns: 1fr; gap: 16px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .page-hero { padding: 104px 0 56px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split.reverse .split-media { order: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured .thumb { min-height: 240px; }
  .s4g-modal-box { grid-template-columns: 1fr; max-width: 460px; }
  .s4g-modal-aside { display: none; }
}

@media (max-width: 640px) {
  .container, .container-wide { padding: 0 16px; }
  .section { padding: 48px 0; }
  .section-head { margin-bottom: 36px; }
  .hero-h1 { font-size: 28px; }
  .page-hero { padding: 88px 0 44px; }
  .btn-large { width: 100%; }
  /* center hero content on mobile */
  .hero > .container { text-align: center; }
  .hero .trust-eyebrow { justify-content: center; }
  .hero-text { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-text > div { justify-content: center; }
  .hero-microtrust { justify-content: center; }
  /* hide the product-card icons on mobile (Residential / Commercial) */
  .cards-section .card-icon { display: none; }
  /* full-width split bottom bar: Call | WhatsApp */
  body { padding-bottom: 56px; }
  #s4g-fcta { left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0; align-items: stretch; }
  #s4g-fcta .s4g-fcta-pill { flex: 1; justify-content: center; border-radius: 0; box-shadow: none; padding: 16px 8px; font-size: 15px; }
  /* float back-to-top above the bottom bar (shown after scrolling) */
  #s4g-fcta #s4g-back-to-top { position: fixed; right: 16px; bottom: 70px; width: 44px; height: 44px; z-index: 9991; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .cta-band { padding: 36px 24px; }
  .cta-band .inner { flex-direction: column; align-items: flex-start; }
  .s4g-fcta-pill { padding: 11px 16px; font-size: 14px; }
  .badges-stack { right: 10px; gap: 9px; }
  .float-badge { padding: 9px 12px; }
  .float-badge .num { font-size: 15px; }
  .float-badge .label { font-size: 10px; max-width: 78px; }
  .s4g-modal-form { padding: 30px 22px; }
}

/* Mobile nav drawer */
.s4g-mobile-nav {
  position: fixed; inset: 0; z-index: 1100; background: #fff;
  transform: translateX(100%); transition: transform .3s ease;
  display: flex; flex-direction: column; padding: 24px; overflow-y: auto;
}
.s4g-mobile-nav.open { transform: translateX(0); }
.s4g-mobile-nav .mn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.s4g-mobile-nav .mn-head img { height: 42px; }
.s4g-mobile-nav .mn-close { background: none; border: 0; font-size: 30px; color: var(--color-text); }
.s4g-mobile-nav a:not(.btn) { display: block; padding: 15px 4px; font-size: 18px; font-weight: 600; color: var(--color-text); border-bottom: 1px solid #f0ece0; }
/* accordion groups (Services / About) */
.s4g-mobile-nav .mn-group { border-bottom: 1px solid #f0ece0; }
.s4g-mobile-nav .mn-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; padding: 15px 4px; font-size: 18px; font-weight: 600; color: var(--color-text); font-family: inherit; cursor: pointer; }
.s4g-mobile-nav .mn-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .25s ease; }
.s4g-mobile-nav .mn-group.open .mn-toggle svg { transform: rotate(180deg); }
.s4g-mobile-nav .mn-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.s4g-mobile-nav .mn-group.open .mn-sub { max-height: 360px; }
.s4g-mobile-nav .mn-sub a { border-bottom: 0; padding: 11px 4px 11px 18px; font-size: 15.5px; font-weight: 500; color: var(--color-body); }
.s4g-mobile-nav .mn-sub a:last-child { padding-bottom: 16px; }
.s4g-mobile-nav .mn-cta { margin-top: 16px; }
.s4g-mobile-nav .mn-cta:first-of-type { margin-top: 24px; }
.s4g-mobile-nav .mn-cta svg { width: 18px; height: 18px; }
/* hide floating call/WhatsApp buttons while the mobile menu is open */
body.nav-open #s4g-fcta { display: none !important; }

/* =========================================================================
   THEME TOGGLE BUTTON  (light / dark switch — header + mobile drawer)
   ========================================================================= */
.theme-toggle {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.22);
  color: #fff; cursor: pointer; transition: background .2s, border-color .2s, transform .2s;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { background: var(--grad-gold); border-color: transparent; color: #2a1c08; transform: translateY(-1px); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
/* drawer variant: full-width pill row */
.s4g-mobile-nav .theme-toggle {
  width: 100%; height: auto; border-radius: 12px; gap: 10px; padding: 14px;
  background: rgba(190,133,73,.10); border: 1.5px solid #e2dccb; color: var(--color-text);
  font-family: var(--font-heading); font-weight: 700; font-size: 15px; margin-top: 8px;
}
.s4g-mobile-nav .theme-toggle .tt-label::before { content: "Dark mode"; }
html[data-theme="dark"] .s4g-mobile-nav .theme-toggle { border-color: #2e2920; background: rgba(254,211,138,.10); }
html[data-theme="dark"] .s4g-mobile-nav .theme-toggle .tt-label::before { content: "Light mode"; }

/* =========================================================================
   DARK THEME  (html[data-theme="dark"]) — flips light surfaces; keeps gold
   High-specificity selectors so they also override page-scoped <style> rules.
   ========================================================================= */
html[data-theme="dark"] {
  --color-text:  #f3eee4;
  --color-body:  #c2bbac;
  --color-cream: #15130e;
  --shadow-md: 0 6px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.55);
}
html[data-theme="dark"] body { background: #0e0d0b; color: var(--color-body); }

/* section backgrounds */
html[data-theme="dark"] .bg-soft { background: #141109; }
html[data-theme="dark"] .bg-cream,
html[data-theme="dark"] .hero { background: linear-gradient(180deg, #15110a 0%, #0e0d0b 100%); }
html[data-theme="dark"] .cards-section { background: #0e0d0b; }
html[data-theme="dark"] .trust-band { background: #141109; border-top-color: #2e2920; }

/* card / surface family */
html[data-theme="dark"] .feature,
html[data-theme="dark"] .pstep,
html[data-theme="dark"] .tcard,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .blog-featured,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .wiz-card,
html[data-theme="dark"] .ceo-card,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .crew-card,
html[data-theme="dark"] .compare-typical,
html[data-theme="dark"] .float-badge,
html[data-theme="dark"] .res-tile,
html[data-theme="dark"] .opt {
  background: #1b1813 !important; border-color: #2e2920 !important; color: var(--color-body);
}
html[data-theme="dark"] .card-secondary { background: #1b1813; border-color: #4a4234; }
html[data-theme="dark"] .feature .card-icon,
html[data-theme="dark"] .card-secondary .card-icon,
html[data-theme="dark"] .rev-arrow { background: #221e17; border-color: #3a3327; color: var(--color-text); }
html[data-theme="dark"] .card-secondary .card-arrow { background: #221e17; }
html[data-theme="dark"] .card-secondary .card-arrow svg { color: var(--color-text); }

/* hero trust eyebrow (glass pill) + microtrust — were dark-on-dark / light-on-light */
html[data-theme="dark"] .trust-eyebrow { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #e8e2d6; }
html[data-theme="dark"] .trust-eyebrow strong { color: #fff; }
html[data-theme="dark"] .trust-eyebrow .dot { color: rgba(255,255,255,.3); }
html[data-theme="dark"] .hero-microtrust { color: rgba(255,255,255,.55); }
html[data-theme="dark"] .hero-microtrust svg { color: rgba(255,255,255,.4); }

/* trust band badges — were white box + (now light) text = invisible */
html[data-theme="dark"] .trust-badge { background: #1f1b14; border-color: #4a4234; }
html[data-theme="dark"] .trust-item svg { color: var(--gold-deep); }

/* dropdowns */
html[data-theme="dark"] .s4g-drop { background: #16130d; border-color: #2e2920; }
html[data-theme="dark"] .s4g-drop a { color: var(--color-text); }
html[data-theme="dark"] .s4g-drop a:hover { background: #221e17; }

/* mobile drawer + quote modal */
html[data-theme="dark"] .s4g-mobile-nav { background: #0e0d0b; }
html[data-theme="dark"] .s4g-mobile-nav a:not(.btn) { color: var(--color-text); }
html[data-theme="dark"] .s4g-mobile-nav .mn-sub a { color: var(--color-body); }
html[data-theme="dark"] .mn-group { border-color: #2e2920; }
html[data-theme="dark"] .s4g-modal-box { background: #15130e; }

/* faq + chips */
html[data-theme="dark"] .faq-item { border-bottom-color: #2e2920; }
html[data-theme="dark"] .faq-q { color: var(--color-text); }
html[data-theme="dark"] .faq-chip { background: #1b1813; border-color: #2e2920; color: var(--color-text); }
html[data-theme="dark"] .blog-filters .fpill { background: #1b1813; border-color: #2e2920; color: var(--color-body); }
html[data-theme="dark"] .area-chips .chip,
html[data-theme="dark"] .chip { background: #1b1813; border-color: #2e2920; color: var(--color-body); }

/* form fields */
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .newsletter-form input {
  background: #14110b; border-color: #34301f; color: var(--color-text);
}
html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder { color: #7d7768; }
html[data-theme="dark"] .field label { color: var(--color-text); }

/* calculator bits */
html[data-theme="dark"] .wiz-progress { background: #2a2519; }
html[data-theme="dark"] .opt.sel,
html[data-theme="dark"] .opt.active { border-color: var(--gold-deep) !important; background: #221d12 !important; }

/* misc text that was dark-on-light */
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5 { color: var(--color-text); }
html[data-theme="dark"] .compare-typical li { color: #9a9486; }
html[data-theme="dark"] .legal { color: var(--color-body); }
html[data-theme="dark"] .ceo-contact,
html[data-theme="dark"] .team-links a { border-color: #2e2920; }
html[data-theme="dark"] .btn-ghost { color: var(--color-text); border-color: rgba(255,255,255,.22); }
/* honor OS reduced-motion for the theme transition */
@media (prefers-reduced-motion: no-preference) {
  body, .feature, .tcard, .blog-card, .contact-card, .wiz-card { transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
}