/* ============================================================
   ABG — Glass Redesign (site-wide overlay stylesheet)
   Loaded AFTER each page's inline <style>, so it overrides.
   Pure visual layer. No structural / textual changes.
   ============================================================ */

:root {
  --abg-bg-top:        #f4f7fb;
  --abg-bg-bot:        #e6ecf4;
  --abg-ink:           #0f1e3d;
  --abg-ink-soft:      #3b4a66;
  --abg-gold:          #C9A84C;
  --abg-gold-light:    #E8C96A;
  --abg-glass-bg:      rgba(255, 255, 255, 0.55);
  --abg-glass-bg-strong: rgba(255, 255, 255, 0.72);
  --abg-glass-border:  rgba(255, 255, 255, 0.65);
  --abg-glass-border-soft: rgba(255, 255, 255, 0.35);
  --abg-shadow-sm: 0 4px 14px rgba(15, 30, 61, 0.06), 0 1px 2px rgba(15, 30, 61, 0.04);
  --abg-shadow-md: 0 10px 30px rgba(15, 30, 61, 0.08), 0 2px 6px rgba(15, 30, 61, 0.05);
  --abg-shadow-lg: 0 24px 60px rgba(15, 30, 61, 0.12), 0 6px 14px rgba(15, 30, 61, 0.06);
  --abg-shadow-xl: 0 36px 90px rgba(15, 30, 61, 0.16), 0 10px 24px rgba(15, 30, 61, 0.08);
  --abg-blur:      18px;
  --abg-blur-strong: 28px;
  --abg-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Global tone: airy, high-key, lots of breathing room ---------- */
html, body {
  background: linear-gradient(180deg, var(--abg-bg-top) 0%, var(--abg-bg-bot) 100%) !important;
  color: var(--abg-ink) !important;
}
body {
  -webkit-font-smoothing: antialiased;
  background-attachment: fixed !important;
}

/* On the homepage (and only the homepage), let the fixed scroll-bg photo +
   scrim render through by clearing html/body's gradient. Inner pages keep
   their light gradient intact. */
html:has(#abg-scroll-bg),
body:has(#abg-scroll-bg) {
  background: transparent !important;
}

/* Soft global ambient color blobs (visible on all pages EXCEPT index where the
   scroll background takes over — index.html opts out via :has(#abg-scroll-bg)) */
body:not(:has(#abg-scroll-bg))::before {
  content: "";
  position: fixed;
  inset: -10vmax;
  z-index: -2;
  background:
    radial-gradient(40vmax 40vmax at 12% 8%,  rgba(201, 168, 76, 0.10), transparent 60%),
    radial-gradient(45vmax 45vmax at 92% 18%, rgba(120, 170, 220, 0.16), transparent 65%),
    radial-gradient(50vmax 50vmax at 78% 95%, rgba(232, 201, 106, 0.10), transparent 70%),
    radial-gradient(60vmax 60vmax at 18% 92%, rgba(15, 30, 61, 0.06),  transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}

/* ---------- Navigation: frosted glass bar ---------- */
#main-nav {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: saturate(160%) blur(var(--abg-blur));
          backdrop-filter: saturate(160%) blur(var(--abg-blur));
  border-bottom: 1px solid var(--abg-glass-border);
  box-shadow: 0 6px 24px rgba(15, 30, 61, 0.06) !important;
  transition: background-color .5s var(--abg-ease), box-shadow .5s var(--abg-ease), border-color .5s var(--abg-ease) !important;
}
#main-nav.scrolled {
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(var(--abg-blur-strong));
          backdrop-filter: saturate(180%) blur(var(--abg-blur-strong));
  box-shadow: 0 10px 36px rgba(15, 30, 61, 0.10) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
#main-nav .nav-link,
#main-nav.scrolled .nav-link {
  color: var(--abg-ink) !important;
  transition: color .25s var(--abg-ease);
}
#main-nav .nav-link:hover,
#main-nav.scrolled .nav-link:hover {
  color: var(--abg-gold) !important;
}
.nav-link-active {
  color: var(--abg-gold) !important;
  text-shadow: none !important;
}
#main-nav .nav-cta,
#main-nav.scrolled .nav-cta {
  background: linear-gradient(135deg, var(--abg-gold), var(--abg-gold-light)) !important;
  color: var(--abg-ink) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.35) !important;
  transition: transform .25s var(--abg-ease), box-shadow .25s var(--abg-ease) !important;
}
#main-nav .nav-cta:hover,
#main-nav.scrolled .nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(201, 168, 76, 0.45) !important;
}
/* Mobile menu panel — glass */
#mobile-menu, .mobile-menu, [x-show*="mobileOpen"] {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(var(--abg-blur-strong));
          backdrop-filter: blur(var(--abg-blur-strong));
  border-top: 1px solid var(--abg-glass-border);
}

/* ---------- Hero (index): keep open and luminous, let scroll bg show ---------- */
.hero-section {
  background: transparent !important;
}
.hero-section::before,
.hero-section::after { display: none !important; }

body:has(#abg-scroll-bg) .hero-section,
body:has(#abg-scroll-bg) section {
  background-color: transparent !important;
}

/* Hero text contrast over the scroll background on index */
body:has(#abg-scroll-bg) .hero-section h1,
body:has(#abg-scroll-bg) .hero-section h2,
body:has(#abg-scroll-bg) .hero-section p,
body:has(#abg-scroll-bg) .hero-section span:not(.btn-gold span):not(.nav-link) {
  text-shadow: 0 2px 18px rgba(15, 30, 61, 0.45), 0 1px 2px rgba(15, 30, 61, 0.35);
}

/* ---------- Buttons ---------- */
.btn-gold {
  background: linear-gradient(135deg, var(--abg-gold), var(--abg-gold-light)) !important;
  color: var(--abg-ink) !important;
  border-radius: 999px !important;
  padding: 1rem 2rem !important;
  box-shadow: 0 10px 28px rgba(201, 168, 76, 0.38), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  transition: transform .35s var(--abg-ease), box-shadow .35s var(--abg-ease), filter .35s var(--abg-ease) !important;
  border: 1px solid rgba(255,255,255,0.4);
}
.btn-gold:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 18px 40px rgba(201, 168, 76, 0.5), inset 0 1px 0 rgba(255,255,255,0.7) !important;
  filter: saturate(110%);
}
.btn-outline-white {
  border: 1px solid var(--abg-glass-border) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-radius: 999px !important;
  padding: 1rem 2rem !important;
  color: #fff !important;
  transition: transform .3s var(--abg-ease), background .3s var(--abg-ease), border-color .3s var(--abg-ease) !important;
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  transform: translateY(-3px);
}

/* ---------- Universal glass panel treatment for cards & key blocks ---------- */
.service-card,
.project-card,
.trust-bar,
.testimonial-card,
[class*="rounded-2xl"].bg-white,
[class*="rounded-xl"].bg-white,
.bg-white.shadow-lg,
.bg-white.shadow-xl,
.bg-white.shadow-2xl,
form.bg-white,
.contact-form,
.lead-form {
  background: var(--abg-glass-bg) !important;
  -webkit-backdrop-filter: saturate(160%) blur(var(--abg-blur));
          backdrop-filter: saturate(160%) blur(var(--abg-blur));
  border: 1px solid var(--abg-glass-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--abg-shadow-md) !important;
  transition: transform .5s var(--abg-ease), box-shadow .5s var(--abg-ease), background .5s var(--abg-ease) !important;
  position: relative;
}
.service-card::after,
.project-card::after,
[class*="rounded-2xl"].bg-white::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 40%);
  mix-blend-mode: overlay;
}
.service-card:hover,
.project-card:hover,
[class*="rounded-2xl"].bg-white:hover {
  transform: translateY(-8px) rotateX(1.5deg) rotateY(-1deg);
  box-shadow: var(--abg-shadow-xl) !important;
  background: var(--abg-glass-bg-strong) !important;
}

/* Service card visual block — let per-card background-image (photo) show through */
.service-card-visual {
  border-radius: 18px 18px 0 0 !important;
}

/* Service icon chip */
.service-icon {
  background: linear-gradient(135deg, rgba(201,168,76,0.18), rgba(232,201,106,0.12)) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  box-shadow: var(--abg-shadow-sm);
  border-radius: 16px !important;
}

/* ---------- Trust bar: keep dark but glassy-deep ---------- */
.trust-bar {
  background: linear-gradient(135deg, rgba(15,30,61,0.92), rgba(27,58,107,0.85)) !important;
  -webkit-backdrop-filter: blur(var(--abg-blur));
          backdrop-filter: blur(var(--abg-blur));
  border: 1px solid rgba(201,168,76,0.22) !important;
  box-shadow: var(--abg-shadow-lg) !important;
}

/* ---------- Forms: glass inputs ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea {
  background: rgba(255, 255, 255, 0.7) !important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(15, 30, 61, 0.10) !important;
  border-radius: 14px !important;
  box-shadow: var(--abg-shadow-sm);
  transition: border-color .25s var(--abg-ease), box-shadow .25s var(--abg-ease), background .25s var(--abg-ease);
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(201, 168, 76, 0.6) !important;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.18), var(--abg-shadow-md) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

/* ---------- Section spacing: more whitespace ---------- */
section {
  position: relative;
}
section.py-16 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
section.py-20 { padding-top: 7rem !important; padding-bottom: 7rem !important; }
section.py-24 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
@media (max-width: 768px) {
  section.py-16,
  section.py-20,
  section.py-24 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}

/* ---------- Section backgrounds on inner pages: soften slabs to glass ---------- */
body:not(:has(#abg-scroll-bg)) section.bg-gray-50,
body:not(:has(#abg-scroll-bg)) section.bg-white,
body:not(:has(#abg-scroll-bg)) section[class*="bg-slate"] {
  background-color: transparent !important;
}
body:not(:has(#abg-scroll-bg)) section.bg-gradient-to-b,
body:not(:has(#abg-scroll-bg)) section.bg-gradient-to-r,
body:not(:has(#abg-scroll-bg)) section.bg-gradient-to-br {
  background-image: none !important;
}
/* Dark sections keep depth but become glass-deep */
body:not(:has(#abg-scroll-bg)) section.bg-navy,
body:not(:has(#abg-scroll-bg)) section[class*="bg-[#0f1e3d]"],
body:not(:has(#abg-scroll-bg)) section[class*="bg-[#1B3A6B]"] {
  background-color: transparent !important;
}
body:not(:has(#abg-scroll-bg)) section.bg-navy::before,
body:not(:has(#abg-scroll-bg)) section[class*="bg-[#0f1e3d]"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(15,30,61,0.94), rgba(27,58,107,0.85));
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-top: 1px solid rgba(201,168,76,0.22);
  border-bottom: 1px solid rgba(201,168,76,0.22);
}

/* ---------- Footer: glass on light pages ---------- */
/* Scoped to PAGE footer (direct child of body) so it doesn't paint
   the testimonial-card's <footer> element. */
body > footer {
  background: linear-gradient(135deg, rgba(15,30,61,0.95), rgba(27,58,107,0.88)) !important;
  -webkit-backdrop-filter: blur(var(--abg-blur));
          backdrop-filter: blur(var(--abg-blur));
  border-top: 1px solid rgba(201, 168, 76, 0.22);
}

/* ---------- Project cards: lift + softer overlay ---------- */
.project-card {
  border-radius: 24px !important;
  overflow: hidden;
}
.project-overlay {
  background: linear-gradient(to top, rgba(15, 30, 61, 0.92) 0%, rgba(15, 30, 61, 0.35) 55%, transparent 100%) !important;
}

/* ---------- Lightweight 3D tilt for any large hover-target card ---------- */
@media (hover: hover) {
  .service-card,
  .project-card {
    transform-style: preserve-3d;
    perspective: 900px;
  }
}

/* ---------- Smooth all transitions ---------- */
a, button { transition: color .25s var(--abg-ease), background .25s var(--abg-ease), transform .25s var(--abg-ease), box-shadow .25s var(--abg-ease); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .service-card:hover,
  .project-card:hover,
  [class*="rounded-2xl"].bg-white:hover {
    transform: none !important;
  }
}

/* ---------- Mobile polish ---------- */
@media (max-width: 640px) {
  .service-card,
  .project-card,
  [class*="rounded-2xl"].bg-white {
    border-radius: 20px !important;
  }
  .btn-gold,
  .btn-outline-white {
    padding: 0.85rem 1.5rem !important;
  }
}

/* ============================================================
   SEAMLESS PHOTO-FLOW REFINEMENTS
   Dissolves opaque section slabs into subtle glass so the
   scroll-bg photo flows continuously behind every section.
   Dark "navy" sections become deep frosted glass; light
   sections become a faint white haze that keeps dark text
   readable without blocking the photo.
   ============================================================ */

/* Light section slabs → faint white-glass haze on ALL pages.
   Keeps dark in-section text readable over the photo. */
section.bg-white,
section.bg-gray-50,
section[class*="bg-slate"] {
  background: rgba(255, 255, 255, 0.22) !important;
  -webkit-backdrop-filter: saturate(150%) blur(22px);
          backdrop-filter: saturate(150%) blur(22px);
}
section.bg-gradient-to-b,
section.bg-gradient-to-r,
section.bg-gradient-to-br {
  background-image: none !important;
}

/* Dark inline-gradient sections on index (process, tech, CTA) +
   any class-based navy sections → deep frosted-navy glass. */
section[style*="var(--navy)"],
section[style*="0f1e3d"],
section[style*="080f1e"],
section[style*="0a1628"],
section[style*="0d2042"],
section.bg-navy,
section[class*="bg-[#0f1e3d]"],
section[class*="bg-[#1B3A6B]"] {
  background: linear-gradient(135deg,
                rgba(15, 30, 61, 0.52),
                rgba(8, 15, 30, 0.58)) !important;
  -webkit-backdrop-filter: saturate(160%) blur(32px) !important;
          backdrop-filter: saturate(160%) blur(32px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.18) !important;
  position: relative;
  isolation: isolate;
}

/* Hero gold gradient subhead — drop-shadow so the gradient text
   reads on any photo, including bright palm-tree foliage. */
.hero-section .gradient-text {
  filter:
    drop-shadow(0 2px 14px rgba(15, 30, 61, 0.85))
    drop-shadow(0 0 4px  rgba(15, 30, 61, 0.55));
}

/* Hero white type — stronger shadow for legibility on any photo */
.hero-section h1 {
  text-shadow: 0 2px 18px rgba(15, 30, 61, 0.6),
               0 1px 3px  rgba(15, 30, 61, 0.55) !important;
}
.hero-section p {
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 14px rgba(15, 30, 61, 0.65),
               0 1px 2px  rgba(15, 30, 61, 0.5) !important;
}
.hero-section [class*="text-white/75"] { color: rgba(255,255,255,0.96) !important; }
.hero-section [class*="text-white/60"] { color: rgba(255,255,255,0.92) !important; }

/* Hero trust-badge row → glass pill, centered, fully readable */
.hero-section .flex.flex-wrap.items-center.justify-center.gap-6.text-sm {
  background: rgba(15, 30, 61, 0.42) !important;
  -webkit-backdrop-filter: saturate(160%) blur(20px);
          backdrop-filter: saturate(160%) blur(20px);
  padding: 0.85rem 1.75rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(201, 168, 76, 0.28) !important;
  box-shadow: 0 14px 38px rgba(15, 30, 61, 0.25);
  margin-left: auto !important;
  margin-right: auto !important;
  width: max-content;
  max-width: calc(100% - 1rem);
}
.hero-section .flex.flex-wrap.items-center.justify-center.gap-6.text-sm > span {
  text-shadow: 0 1px 8px rgba(15, 30, 61, 0.7);
}
/* Gold the thin dividers between badges */
.hero-section .w-px.h-4[class*="bg-white/20"] {
  background: rgba(201, 168, 76, 0.4) !important;
}

/* Trust bar (stats strip beneath hero) — sharper glass with
   stronger contrast for the small uppercase labels. */
.trust-bar {
  background: linear-gradient(135deg,
                rgba(15, 30, 61, 0.62),
                rgba(8, 15, 30, 0.7)) !important;
  -webkit-backdrop-filter: saturate(170%) blur(26px) !important;
          backdrop-filter: saturate(170%) blur(26px) !important;
  border: none !important;
  border-top: 1px solid rgba(201, 168, 76, 0.28) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.28) !important;
  box-shadow: 0 18px 50px rgba(15, 30, 61, 0.22) !important;
}
.trust-bar [class*="text-white/70"] { color: rgba(255, 255, 255, 0.93) !important; }
.trust-stat { border-color: rgba(201, 168, 76, 0.22) !important; }

/* Glass cards — sharper depth + inner highlight for the 3D feel.
   This refines the universal .service-card / .project-card
   treatment that was set earlier. */
.service-card,
.project-card,
[class*="rounded-2xl"].bg-white,
[class*="rounded-xl"].bg-white,
form.bg-white {
  background: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
          backdrop-filter: saturate(180%) blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    0 24px 60px rgba(15, 30, 61, 0.18),
    0 2px 6px  rgba(15, 30, 61, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

/* Brighter top edge for footer so it reads as its own surface
   under the now-glassy CTA section above it. */
body > footer {
  border-top: 1px solid rgba(201, 168, 76, 0.32) !important;
}

/* ============================================================
   REMOVE FROSTED-GLASS HAZE
   No more backdrop blur. Sections fully transparent so the
   scroll-bg photo shows clearly. Cards stay opaque-white for
   readability — photo flows around them, not through them.
   ============================================================ */

/* Kill backdrop-blur on every surface we previously frosted */
#main-nav,
#mobile-menu, .mobile-menu, [x-show*="mobileOpen"],
.service-card,
.project-card,
.testimonial-card,
[class*="rounded-2xl"].bg-white,
[class*="rounded-xl"].bg-white,
.bg-white.shadow-lg,
.bg-white.shadow-xl,
.bg-white.shadow-2xl,
form.bg-white,
.contact-form,
.lead-form,
.trust-bar,
.hero-section .flex.flex-wrap.items-center.justify-center.gap-6.text-sm,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea,
footer,
section[style*="var(--navy)"],
section[style*="0f1e3d"],
section[style*="080f1e"],
section[style*="0a1628"],
section[style*="0d2042"],
section.bg-navy,
section[class*="bg-[#0f1e3d]"],
section[class*="bg-[#1B3A6B]"],
section.bg-white,
section.bg-gray-50,
section[class*="bg-slate"] {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* Sections — fully transparent, no haze, no borders.
   The scroll-bg photo is the only background. */
section,
section.bg-white,
section.bg-gray-50,
section[class*="bg-slate"],
section[style*="var(--navy)"],
section[style*="0f1e3d"],
section[style*="080f1e"],
section[style*="0a1628"],
section[style*="0d2042"],
section.bg-navy,
section[class*="bg-[#0f1e3d]"],
section[class*="bg-[#1B3A6B]"],
section.bg-gradient-to-b,
section.bg-gradient-to-r,
section.bg-gradient-to-br {
  background: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Cards — clean opaque-white panels (no frost). Photo shows in the
   gaps between cards and around sections, not through the cards. */
.service-card,
.project-card,
.testimonial-card,
[class*="rounded-2xl"].bg-white,
[class*="rounded-xl"].bg-white,
.bg-white.shadow-lg,
.bg-white.shadow-xl,
.bg-white.shadow-2xl,
form.bg-white,
.contact-form,
.lead-form {
  background: #ffffff !important;
  border: 1px solid rgba(15, 30, 61, 0.08) !important;
  box-shadow:
    0 10px 30px rgba(15, 30, 61, 0.14),
    0 2px 6px  rgba(15, 30, 61, 0.06) !important;
}

/* Trust-bar — solid navy strip (no frost). */
.trust-bar {
  background: linear-gradient(135deg, #0f1e3d, #08111e) !important;
  border: none !important;
  border-top: 1px solid rgba(201, 168, 76, 0.3) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.3) !important;
  box-shadow: none !important;
}

/* Hero trust-badge row — minimal: kept slightly tinted for legibility
   on the photo, but NO blur. */
.hero-section .flex.flex-wrap.items-center.justify-center.gap-6.text-sm {
  background: rgba(15, 30, 61, 0.55) !important;
  border: 1px solid rgba(201, 168, 76, 0.28) !important;
  box-shadow: none !important;
}

/* Form inputs — solid white, no frost. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea {
  background: #ffffff !important;
  color: #0f1e3d !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"])::placeholder,
textarea::placeholder {
  color: rgba(15, 30, 61, 0.45) !important;
}

/* Nav — keep readable but no blur (solid-ish white). */
#main-nav {
  background: rgba(255, 255, 255, 0.92) !important;
}
#main-nav.scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
}
#mobile-menu, .mobile-menu, [x-show*="mobileOpen"] {
  background: #ffffff !important;
}

/* Footer — solid navy, no frost. */
body > footer {
  background: linear-gradient(135deg, #0f1e3d, #1B3A6B) !important;
  box-shadow: none !important;
}

/* ============================================================
   READABLE DARK CONTENT-BUBBLES (no frost)
   Formerly-dark sections (Process, Tech, CTA) had white type
   designed for a solid-navy backdrop. Now that sections are
   transparent, we give just the inner content a deep-navy
   "bubble" so the white text + light copy reads crisply, while
   the photo still flows freely around the bubble.
   ============================================================ */

section[style*="0f1e3d"]   > .max-w-7xl,
section[style*="var(--navy)"] > .max-w-7xl,
section[style*="080f1e"]   > .max-w-7xl,
section[style*="0a1628"]   > .max-w-7xl,
section[style*="0d2042"]   > .max-w-7xl,
section.bg-navy            > .max-w-7xl,
section[class*="bg-[#0f1e3d]"] > .max-w-7xl,
section[class*="bg-[#1B3A6B]"] > .max-w-7xl {
  background: linear-gradient(135deg,
                rgba(10, 22, 46, 0.86) 0%,
                rgba(6, 13, 28, 0.92) 100%) !important;
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 28px;
  padding: 4.5rem 3rem !important;
  box-shadow:
    0 30px 80px rgba(15, 30, 61, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

/* Subtle inner glow — premium luxury feel, not flashy */
section[style*="0f1e3d"]   > .max-w-7xl::before,
section[style*="var(--navy)"] > .max-w-7xl::before,
section[style*="080f1e"]   > .max-w-7xl::before,
section[style*="0a1628"]   > .max-w-7xl::before,
section[style*="0d2042"]   > .max-w-7xl::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 0%,  rgba(201, 168, 76, 0.10), transparent 55%),
    radial-gradient(ellipse at 82% 100%, rgba(27, 58, 107, 0.18), transparent 60%);
  border-radius: inherit;
  z-index: 0;
}
section[style*="0f1e3d"]   > .max-w-7xl > *,
section[style*="var(--navy)"] > .max-w-7xl > *,
section[style*="080f1e"]   > .max-w-7xl > *,
section[style*="0a1628"]   > .max-w-7xl > *,
section[style*="0d2042"]   > .max-w-7xl > * {
  position: relative;
  z-index: 1;
}

/* Slightly darker hero trust-badge pill for crisper readability */
.hero-section .flex.flex-wrap.items-center.justify-center.gap-6.text-sm {
  background: rgba(8, 16, 32, 0.72) !important;
  border: 1px solid rgba(201, 168, 76, 0.3) !important;
}

/* Section labels (small gold uppercase eyebrows) sitting on the photo
   between sections get a small dark chip backdrop for legibility. */
section .section-label {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(10, 22, 46, 0.6);
  border: 1px solid rgba(201, 168, 76, 0.28);
  letter-spacing: 0.18em;
  color: var(--abg-gold) !important;
}

/* ============================================================
   UNIFIED PHOTO BACKGROUND — ALL PAGES
   Index keeps the morphing scroll-bg. Every other page gets the
   finished oceanfront home as a fixed static photo, so the whole
   site reads as one cohesive premium experience.
   ============================================================ */

html:not(:has(#abg-scroll-bg)) {
  background: #0f1e3d !important;
}

body:not(:has(#abg-scroll-bg)) {
  background:
    linear-gradient(135deg, rgba(8, 15, 30, 0.42), rgba(15, 30, 61, 0.55)) center / cover no-repeat fixed,
    url("../images/build-stages/05-finished-oceanfront.jpg") center / cover no-repeat fixed,
    #0f1e3d !important;
}

/* Suppress the old ambient gold/blue gradient blobs on inner pages —
   the photo replaces them. */
body:not(:has(#abg-scroll-bg))::before {
  display: none !important;
}

/* ============================================================
   READABLE TYPE ON THE PHOTO
   Light-section H2s and intro paragraphs were dark text designed
   for white slabs. Every page now has a photo behind, so we flip
   them to white with a strong dark shadow. Cards remain solid
   white with their dark text intact.
   ============================================================ */

section.bg-white h2,
section.bg-gray-50 h2,
section[class*="bg-slate"] h2 {
  color: #ffffff !important;
  text-shadow:
    0 2px 18px rgba(15, 30, 61, 0.78),
    0 1px 3px  rgba(15, 30, 61, 0.65) !important;
}

/* Section description paragraphs (sibling of the H2) */
section.bg-white h2 + p,
section.bg-gray-50 h2 + p,
section[class*="bg-slate"] h2 + p,
section.bg-white h2 ~ p,
section.bg-gray-50 h2 ~ p {
  color: rgba(255, 255, 255, 0.94) !important;
  text-shadow:
    0 2px 14px rgba(15, 30, 61, 0.7),
    0 1px 2px  rgba(15, 30, 61, 0.55) !important;
}

/* Tailwind gray text utilities for body copy outside of cards — only
   flip them when they sit DIRECTLY in a section (not inside a card). */
section.bg-white > .max-w-7xl > .text-center .text-gray-600,
section.bg-gray-50 > .max-w-7xl > .text-center .text-gray-600,
section.bg-white > .max-w-7xl > .text-center .text-gray-700,
section.bg-gray-50 > .max-w-7xl > .text-center .text-gray-700,
section.bg-white > .max-w-7xl > .text-center .text-slate-600,
section.bg-gray-50 > .max-w-7xl > .text-center .text-slate-600 {
  color: rgba(255, 255, 255, 0.94) !important;
  text-shadow: 0 2px 14px rgba(15, 30, 61, 0.7) !important;
}

/* Eyebrow section labels (the small uppercase gold "WHAT WE BUILD" etc.)
   stay gold, just brighter on the photo. */
section .section-label {
  color: #E8C96A !important;
}

/* Long-text pages (privacy, terms) commonly use prose containers — give
   them a readable dark glass card wrapper so the legal copy is legible
   over the photo. SCOPED to direct children of section only, so this
   never catches max-w-3xl on a nested <p> (e.g. the hero description). */
main > section > .max-w-3xl,
main > section > .max-w-4xl,
main > section > .prose {
  background: linear-gradient(135deg, rgba(10, 22, 46, 0.82), rgba(6, 13, 28, 0.88)) !important;
  border: 1px solid rgba(201, 168, 76, 0.2) !important;
  border-radius: 24px !important;
  padding: 3rem 2.5rem !important;
  box-shadow: 0 28px 70px rgba(15, 30, 61, 0.35) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
main > section > .max-w-3xl h1,
main > section > .max-w-3xl h2,
main > section > .max-w-3xl h3,
main > section > .max-w-4xl h1,
main > section > .max-w-4xl h2,
main > section > .max-w-4xl h3,
main > section > .prose h1,
main > section > .prose h2,
main > section > .prose h3 {
  color: #ffffff !important;
  text-shadow: none !important;
}
main > section > .max-w-3xl p,
main > section > .max-w-3xl li,
main > section > .max-w-4xl p,
main > section > .max-w-4xl li,
main > section > .prose p,
main > section > .prose li {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: none !important;
}
main > section > .max-w-3xl a,
main > section > .max-w-4xl a,
main > section > .prose a {
  color: #E8C96A !important;
}

/* ============================================================
   UNIVERSAL CONTENT BUBBLES — EVERY SECTION
   Every section's main content wrapper wears a dark glass
   bubble on every page. White type sits on dark navy; the
   photo flows in the gaps between sections, never behind
   the words. Cards inside stay solid white.
   ============================================================ */

section > .max-w-7xl,
section > .max-w-6xl,
section > .max-w-5xl,
section > .max-w-4xl,
section > .container {
  background: linear-gradient(135deg,
                rgba(10, 22, 46, 0.86),
                rgba(6,  13, 28, 0.92)) !important;
  border: 1px solid rgba(201, 168, 76, 0.22) !important;
  border-radius: 28px !important;
  padding: 4rem 2.75rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow:
    0 30px 80px rgba(15, 30, 61, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  position: relative;
  overflow: hidden;
}

/* Add a side gutter on every section so the bubble doesn't touch the
   viewport edges */
section {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
@media (min-width: 1024px) {
  section { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
}

/* Subtle inner ambient glow inside every bubble for the luxury feel */
section > .max-w-7xl::before,
section > .max-w-6xl::before,
section > .max-w-5xl::before,
section > .max-w-4xl::before,
section > .container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 0%,   rgba(201, 168, 76, 0.10), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(27, 58, 107, 0.18),  transparent 60%);
  border-radius: inherit;
  z-index: 0;
}
section > .max-w-7xl > *,
section > .max-w-6xl > *,
section > .max-w-5xl > *,
section > .max-w-4xl > *,
section > .container > * {
  position: relative;
  z-index: 1;
}

/* ---- CARVE-OUTS — these are not bubbles ---- */

/* Hero (index + inner pages): keep open, no bubble.
   Top padding must clear the fixed frosted nav (~117 px) plus
   breathing room, otherwise the eyebrow label clips behind the nav. */
section.hero-section > .max-w-7xl,
section.hero-section > .max-w-6xl,
section.hero-section > .max-w-5xl,
section.hero-section > .max-w-4xl,
section.page-hero    > .max-w-7xl,
section.page-hero    > .max-w-6xl,
section.page-hero    > .max-w-5xl,
section.page-hero    > .max-w-4xl,
section.page-hero    > .container,
section.hero-section > .container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10rem 1.5rem 6rem !important;
  box-shadow: none !important;
}
@media (max-width: 640px) {
  section.hero-section > .max-w-7xl,
  section.hero-section > .max-w-6xl,
  section.hero-section > .max-w-5xl,
  section.hero-section > .max-w-4xl,
  section.page-hero    > .max-w-7xl,
  section.page-hero    > .max-w-6xl,
  section.page-hero    > .max-w-5xl,
  section.page-hero    > .max-w-4xl,
  section.page-hero    > .container,
  section.hero-section > .container {
    padding: 8rem 1rem 4rem !important;
  }
}
section.hero-section > .max-w-7xl::before,
section.page-hero    > .max-w-7xl::before,
section.hero-section > .container::before,
section.page-hero    > .container::before { display: none !important; }

/* Trust-bar — keep as its own dark strip, no inner bubble */
.trust-bar > .max-w-7xl,
.trust-bar > .max-w-6xl,
.trust-bar > .container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.trust-bar > .max-w-7xl::before,
.trust-bar > .container::before { display: none !important; }

/* Marquee gold-text scroller (premium.js injected): no bubble */
.abg-mq,
.abg-mq > * {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.abg-mq::before { display: none !important; }

/* Inside every bubble: flip ALL dark heading + text utilities to white
   so they read on the dark navy backdrop. */
section > .max-w-7xl h1,
section > .max-w-7xl h2,
section > .max-w-7xl h3,
section > .max-w-7xl h4,
section > .max-w-6xl h1,
section > .max-w-6xl h2,
section > .max-w-6xl h3,
section > .max-w-5xl h1,
section > .max-w-5xl h2,
section > .max-w-5xl h3,
section > .max-w-4xl h1,
section > .max-w-4xl h2,
section > .max-w-4xl h3,
section > .container h1,
section > .container h2,
section > .container h3 {
  color: #ffffff !important;
  text-shadow: none !important;
}
section > .max-w-7xl > .text-center p,
section > .max-w-7xl .text-gray-600,
section > .max-w-7xl .text-gray-700,
section > .max-w-7xl .text-slate-600,
section > .max-w-7xl .text-slate-700,
section > .max-w-7xl .text-navy,
section > .max-w-6xl .text-gray-600,
section > .max-w-6xl .text-gray-700,
section > .max-w-6xl .text-navy {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: none !important;
}

/* …but inside white cards INSIDE the bubble, restore the dark text */
section .service-card h1,
section .service-card h2,
section .service-card h3,
section .service-card h4,
section .service-card p,
section .service-card .text-gray-600,
section .service-card .text-gray-700,
section .service-card .text-navy,
section [class*="rounded-2xl"].bg-white h1,
section [class*="rounded-2xl"].bg-white h2,
section [class*="rounded-2xl"].bg-white h3,
section [class*="rounded-2xl"].bg-white p,
section [class*="rounded-xl"].bg-white h1,
section [class*="rounded-xl"].bg-white h2,
section [class*="rounded-xl"].bg-white h3,
section [class*="rounded-xl"].bg-white p,
section form.bg-white h2,
section form.bg-white h3,
section form.bg-white p,
section form.bg-white label {
  color: #0f1e3d !important;
  text-shadow: none !important;
}
section .service-card .text-gray-600,
section .service-card .text-gray-700,
section [class*="rounded-2xl"].bg-white .text-gray-600,
section [class*="rounded-2xl"].bg-white .text-gray-700,
section [class*="rounded-xl"].bg-white .text-gray-600,
section [class*="rounded-xl"].bg-white .text-gray-700 {
  color: #475569 !important;
}

/* .project-card has a dark photo + gradient overlay — its text was
   designed WHITE. Force every text element back to crisp white so
   titles / locations / years read clearly. */
.project-card h1,
.project-card h2,
.project-card h3,
.project-card h4,
.project-card p,
.project-card .text-white,
.project-card [class*="text-white"] {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(5, 13, 26, 0.75) !important;
}
.project-card .text-white\/60,
.project-card [class*="text-white/60"] {
  color: rgba(255, 255, 255, 0.88) !important;
}
.project-card .text-white\/40,
.project-card [class*="text-white/40"] {
  color: rgba(255, 255, 255, 0.78) !important;
}
.project-card .text-gold,
.project-card span.text-gold {
  color: #E8C96A !important;
  text-shadow: 0 1px 4px rgba(5, 13, 26, 0.65) !important;
}

/* ============================================================
   Bold gold CTA button treatment — applied to dark-bubble CTA
   sections that need extra pop. Scoped strictly to those
   sections' aria-labels so it doesn't affect hero/nav buttons.
   ============================================================ */
section[aria-label="Start your project CTA"] .btn-gold,
section[aria-label="Contact CTA"] .btn-gold,
section[aria-label="Get in touch CTA"] .btn-gold {
  background: linear-gradient(135deg, #E8C96A, #F4D880) !important;
  color: #0f1e3d !important;
  border: 2px solid #C9A84C !important;
  box-shadow:
    0 0 0 4px rgba(201, 168, 76, 0.22),
    0 16px 42px rgba(201, 168, 76, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}
section[aria-label="Start your project CTA"] .btn-gold:hover,
section[aria-label="Contact CTA"] .btn-gold:hover,
section[aria-label="Get in touch CTA"] .btn-gold:hover {
  background: linear-gradient(135deg, #F4D880, #FBE39A) !important;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 4px rgba(201, 168, 76, 0.35),
    0 22px 50px rgba(201, 168, 76, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
/* Companion link in the same sections (View Services / Call / View Work) —
   brighten so it's also visible against the dark bubble. */
section[aria-label="Start your project CTA"] a[href*="services"],
section[aria-label="Contact CTA"] a[href*="tel:"],
section[aria-label="Get in touch CTA"] a[href*="projects"] {
  color: rgba(255, 255, 255, 0.92) !important;
}
section[aria-label="Start your project CTA"] a[href*="services"]:hover,
section[aria-label="Contact CTA"] a[href*="tel:"]:hover,
section[aria-label="Get in touch CTA"] a[href*="projects"]:hover {
  color: #E8C96A !important;
}

/* ============================================================
   FROSTED-GLASS NAV + SEAMLESS MARQUEE
   ============================================================ */

/* Top nav becomes light frosted glass — translucent white with
   backdrop-blur, not solid. The photo shows through faintly. */
#main-nav {
  background: rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
          backdrop-filter: saturate(180%) blur(28px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 6px 24px rgba(15, 30, 61, 0.18) !important;
}
#main-nav.scrolled {
  background: rgba(255, 255, 255, 0.28) !important;
  -webkit-backdrop-filter: saturate(180%) blur(32px) !important;
          backdrop-filter: saturate(180%) blur(32px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 10px 36px rgba(15, 30, 61, 0.22) !important;
}
#main-nav .nav-link,
#main-nav.scrolled .nav-link {
  color: var(--abg-ink) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}
#main-nav .nav-link:hover,
#main-nav.scrolled .nav-link:hover {
  color: var(--abg-gold) !important;
}

/* Mobile menu sheet — same frosted treatment */
#mobile-menu, .mobile-menu, [x-show*="mobileOpen"] {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: saturate(180%) blur(32px) !important;
          backdrop-filter: saturate(180%) blur(32px) !important;
}

/* Rotating marquee strip — kill gold borders and feather the edges
   so it dissolves into the surrounding sections instead of being a
   hard-bordered band. The gold text still reads on a soft dark
   gradient in the middle of the strip. */
div:has(> .abg-mq) {
  background: linear-gradient(180deg,
                rgba(8, 15, 30, 0)    0%,
                rgba(8, 15, 30, 0.55) 40%,
                rgba(8, 15, 30, 0.55) 60%,
                rgba(8, 15, 30, 0)    100%) !important;
  border: none !important;
  padding: 2rem 0 !important;
}
.abg-mq, .abg-mq-inner {
  background: transparent !important;
  border: none !important;
}

/* ============================================================
   READABILITY FIXES (audit-driven)
   Each rule was verified against the real markup. Notes below
   each block call out any selector adjustments from the audit's
   proposed selectors.
   ============================================================ */

/* --- 1. TESTIMONIALS — CRITICAL white-on-white bug -----------
   Reviewer quote uses <blockquote class="text-gray-600">, name uses
   <div class="font-bold text-navy">. My earlier universal rule
   "section > .max-w-7xl .text-gray-600 / .text-navy → white" was
   flipping these to white, but my "inside-cards-restore-dark"
   block only covered .service-card / .project-card / generic
   .rounded-2xl.bg-white — NOT .testimonial-card. Adding it. */
.testimonial-card blockquote,
.testimonial-card blockquote.text-gray-600,
.testimonial-card .text-gray-600,
.testimonial-card .text-navy,
.testimonial-card footer div.font-bold,
.testimonial-card footer div.text-navy {
  color: #0f1e3d !important;
  text-shadow: none !important;
}
.testimonial-card .text-gray-400 {
  color: #6B7280 !important; /* keep reviewer role legible */
}

/* --- 2. FAQ — question text gets washed out where the photo bleeds
   through the section bubble. Give each .faq-item its own dark fill
   + shadow on the question text. Selector verified: .faq-item is
   the wrapper div, .faq-question is the button inside. */
.faq-item {
  background: rgba(8, 16, 32, 0.72) !important;
  border: 1px solid rgba(201, 168, 76, 0.18) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
          backdrop-filter: saturate(160%) blur(14px) !important;
}
.faq-question span,
.faq-question {
  text-shadow: 0 1px 8px rgba(5, 13, 26, 0.7);
}
/* The question text uses <span class="font-bold text-navy">. The
   universal "section > .max-w-7xl .text-navy → white" rule has
   already flipped it to white, so we just want the shadow + dark
   pill (done above). Expanded-answer p.text-gray-600 also already
   flips to 92% white via that same rule — readable on dark pill. */

/* --- 3. CTA section ("Schedule Your Free Consultation") --------
   AUDIT SELECTOR ADJUSTMENT: the proposed `section .btn-gold`
   would re-skin EVERY .btn-gold in every section (including the
   hero and tech-section buttons), which is too broad. Scoped
   strictly to the CTA section via aria-labelledby. */
section[aria-labelledby="cta-heading"] .btn-gold {
  background: linear-gradient(135deg, rgba(15, 30, 61, 0.92), rgba(8, 15, 30, 0.95)) !important;
  border: 1px solid rgb(201, 168, 76) !important;
  color: #E8C96A !important;
  box-shadow:
    0 10px 28px rgba(15, 30, 61, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
section[aria-labelledby="cta-heading"] .btn-gold:hover {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.18), rgba(15, 30, 61, 0.92)) !important;
  color: #ffffff !important;
}

/* --- 4. Hero gradient subhead — extend to page-hero too --------
   I already had .hero-section .gradient-text { filter: drop-shadow }
   earlier; ALSO add .page-hero .gradient-text so the About-page
   "Atlantic Build Group" gold gradient gets the same protection. */
.page-hero .gradient-text {
  filter:
    drop-shadow(0 2px 14px rgba(5, 13, 26, 0.85))
    drop-shadow(0 0 4px  rgba(5, 13, 26, 0.55));
}


/* --- 5. Hero body text shadow — stronger stack + extend to
   .page-hero (About / Services / Projects / Contact / etc.) */
.hero-section p,
.page-hero p {
  text-shadow:
    0 1px 4px  rgba(5, 13, 26, 0.85),
    0 2px 20px rgba(5, 13, 26, 0.6) !important;
}

/* --- 6. Process section step descriptions
   AUDIT SELECTOR ADJUSTMENT: proposed `#process .faq-item + div p`
   was incorrect (there are no faq-items in the process section).
   The actual class is the Tailwind escaped `text-white/50`. */
#process .text-white\/50,
#process p.text-sm {
  color: rgba(255, 255, 255, 0.82) !important;
  text-shadow: 0 1px 6px rgba(5, 13, 26, 0.5);
}

/* --- 7. Enterprise / Tech section feature-card body copy
   AUDIT SELECTOR ADJUSTMENT: proposed `section:nth-of-type(6)`
   is brittle (depends on section order). Using the section's
   aria-labelledby="tech-heading" instead. Bumps both the left-
   column 65% paragraphs and the right-column 55% feature cards. */
section[aria-labelledby="tech-heading"] p {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 6px rgba(5, 13, 26, 0.5) !important;
}

/* --- 8. Footer links — boost from 50% to 72% white -------------*/
body > footer a {
  color: rgba(255, 255, 255, 0.78) !important;
}
body > footer a:hover {
  color: #C9A84C !important;
}

/* --- 9. (Same rule as #5 — already covers .hero-section p AND
   .page-hero p for the About page.) */

/* --- 10. About page (and all inner-page) breadcrumb
   AUDIT SELECTOR ADJUSTMENT: the breadcrumb is inside .page-hero,
   not .hero-section as the audit proposed. Targeting via the
   actual aria-label so it works regardless of class shape. */
.page-hero nav[aria-label="Breadcrumb"] {
  color: rgba(255, 255, 255, 0.85) !important;
}
.page-hero nav[aria-label="Breadcrumb"] a {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 8px rgba(5, 13, 26, 0.75);
}
.page-hero nav[aria-label="Breadcrumb"] a:hover {
  color: #E8C96A !important;
}
.page-hero nav[aria-label="Breadcrumb"] .text-gold,
.page-hero nav[aria-label="Breadcrumb"] span.text-gold {
  color: #E8C96A !important;
  text-shadow: 0 1px 8px rgba(5, 13, 26, 0.8);
}
.page-hero nav[aria-label="Breadcrumb"] i {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================
   FULL-AUDIT READABILITY PASS (v2)
   Selectors verified against the real markup. Adjustments
   from the audit's proposed selectors are noted inline.
   ============================================================ */

/* --- A. Contact page — Contact Information cards (Phone, Email,
   Office, Hours) — text was flipped to white by the universal
   bubble rule, but the cards have a near-white background. The
   "inside-cards-restore-dark" block didn't include .contact-info-card.
   AUDIT SELECTOR ADJUSTMENT: kept .contact-info-card scope. */
.contact-info-card,
.contact-info-card * {
  color: #0f1e3d !important;
  text-shadow: none !important;
}
.contact-info-card .text-gray-600,
.contact-info-card .text-gray-500 {
  color: #475569 !important;
}
.contact-info-card .text-gray-400 {
  color: #6B7280 !important;
}
.contact-info-card .text-gold,
.contact-info-card i.text-gold {
  color: #C9A84C !important;
}

/* --- B. Contact form panel (.bg-white.rounded-2xl.shadow-xl) — make
   sure the "Request a Free Estimate" h2 + intro paragraph + every
   form label stays dark navy on the white card.
   AUDIT SELECTOR ADJUSTMENT: the audit proposed `.contact-form-card`
   which doesn't exist; using the actual class combo. */
.bg-white.rounded-2xl.shadow-xl,
.bg-white.rounded-2xl.shadow-xl > h2,
.bg-white.rounded-2xl.shadow-xl > p,
.bg-white.rounded-2xl.shadow-xl label,
.bg-white.rounded-2xl.shadow-xl .form-label,
.bg-white.rounded-2xl.shadow-xl .text-navy {
  color: #0f1e3d !important;
  text-shadow: none !important;
}
.bg-white.rounded-2xl.shadow-xl > p {
  color: #6B7280 !important;
}
.bg-white.rounded-2xl.shadow-xl .text-gray-500,
.bg-white.rounded-2xl.shadow-xl .text-gray-600 {
  color: #6B7280 !important;
}

/* --- C. Privacy / Terms — bold <strong>/<b> labels inside legal
   content were dark navy (from inline CSS) sitting on the dark
   glass bubble — invisible. Flip to white.
   AUDIT SELECTOR ADJUSTMENT: confirmed .legal-content exists. */
.legal-content strong,
.legal-content b,
.legal-content p strong,
.legal-content li strong,
.legal-content li b,
.legal-content h2,
.legal-content h3,
.legal-content h4,
main > section > .max-w-3xl strong,
main > section > .max-w-3xl b,
main > section > .max-w-4xl strong {
  color: #ffffff !important;
}

/* Disclaimer / callout boxes inside terms.html (`.legal-callout`) —
   strong inside callouts was navy by original CSS. */
.legal-callout,
.legal-callout p,
.legal-callout strong,
.legal-callout b {
  color: rgba(255, 255, 255, 0.95) !important;
}
.legal-callout strong,
.legal-callout b {
  color: #E8C96A !important;
}

/* --- D. Privacy / Terms TOC card — gold-on-white links were low
   contrast. Confirmed selector .toc-card. Darken slightly + add
   underline for clarity. */
.toc-card,
.toc-card h2,
.toc-card ol li {
  color: #0f1e3d !important;
}
.toc-card ol li a {
  color: #A07C28 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(160, 124, 40, 0.45) !important;
  text-underline-offset: 3px;
}
.toc-card ol li a:hover {
  color: #0f1e3d !important;
  text-decoration-color: #0f1e3d !important;
}
.toc-card ol li a::before {
  color: #A07C28 !important;
}

/* The legal-content TOC items also need to be readable on the
   dark bubble — but the .toc-card itself has a light fill and
   already wraps the list, so this is handled by section above. */

/* --- E. AI Estimator modal — inactive step labels and form
   labels/hints were dim (30%, 50%, 60% white inline-styled).
   AUDIT SELECTOR ADJUSTMENT: the audit proposed `.abg-step-label`
   and `[class*="step-label"]` which don't exist. The labels are
   bare <div>/<label>/<p> elements with inline-style colors.
   Targeting by inline-style attribute. */
#estimate-modal [style*="rgba(255,255,255,0.3)"] {
  color: rgba(255, 255, 255, 0.85) !important;
}
#estimate-modal [style*="rgba(255,255,255,0.4)"] {
  color: rgba(255, 255, 255, 0.85) !important;
}
#estimate-modal [style*="rgba(255,255,255,0.5)"] {
  color: rgba(255, 255, 255, 0.88) !important;
}
#estimate-modal [style*="rgba(255,255,255,0.55)"] {
  color: rgba(255, 255, 255, 0.9) !important;
}
#estimate-modal [style*="rgba(255,255,255,0.6)"] {
  color: rgba(255, 255, 255, 0.95) !important;
}
#estimate-modal [style*="rgba(255,255,255,0.65)"] {
  color: rgba(255, 255, 255, 0.95) !important;
}
#estimate-modal [style*="rgba(255,255,255,0.25)"] {
  color: rgba(255, 255, 255, 0.78) !important;
}
/* Keep error/red text alone */
#estimate-modal [style*="#f87171"],
#estimate-modal [x-text="error"] {
  color: #f87171 !important;
}

/* --- F. FAQ pills — bump from 0.72 → 0.78 navy fill per audit */
.faq-item {
  background: rgba(8, 16, 32, 0.78) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
          backdrop-filter: saturate(160%) blur(14px) !important;
  border-radius: 12px !important;
  margin-bottom: 4px;
}

/* --- G. Contact-page hero gold word "Project"
   AUDIT SELECTOR ADJUSTMENT: the gold span uses Tailwind's
   utility class `text-gold` — not always inside a .gradient-text.
   Targeting .text-gold inside any hero h1. */
.hero-section h1 .text-gold,
.page-hero h1 .text-gold,
.hero-section h1 span[class*="gold"],
.page-hero h1 span[class*="gold"] {
  text-shadow: 0 1px 8px rgba(5, 13, 26, 0.78);
  filter: drop-shadow(0 2px 8px rgba(5, 13, 26, 0.5));
}

/* --- H. Inner-page hero breadcrumb — already handled by earlier
   .page-hero nav[aria-label="Breadcrumb"] rule. No change needed.
   The audit proposal also wanted .hero-section breadcrumbs — but
   the homepage hero has no breadcrumb, so no rule needed there. */

/* ============================================================
   v3 — COMPLETE-SITE READABILITY SWEEP
   Programmatic WCAG audit (every page, every text element)
   identified 60+ real low-contrast cases beyond what previous
   passes caught. Patterns + fixes:
   ============================================================ */

/* ---- Bucket 1 ----
   ABOUT-PAGE cards (.value-card / .team-card / .cert-card / .diff-item)
   plus index AREAS-SERVED pills (inline style background:#f8fafc)
   were not in my "inside-cards-restore-dark" list. Result: every
   <h3 class="font-bold text-navy"> inside them got flipped white
   by the universal section-bubble rule and turned invisible on
   the white card. Add them. */

.value-card,
.value-card h1, .value-card h2, .value-card h3, .value-card h4,
.value-card p, .value-card li, .value-card span,
.value-card .text-navy, .value-card .text-gray-600,
.value-card .text-gray-700,
.team-card,
.team-card h1, .team-card h2, .team-card h3, .team-card h4,
.team-card p, .team-card span,
.team-card .text-navy, .team-card .text-gray-600,
.team-card .text-gray-700,
.cert-card,
.cert-card h1, .cert-card h2, .cert-card h3, .cert-card h4,
.cert-card p, .cert-card span,
.cert-card .text-navy, .cert-card .text-gray-600,
.cert-card .text-gray-700,
.diff-item,
.diff-item h1, .diff-item h2, .diff-item h3, .diff-item h4,
.diff-item p, .diff-item span,
.diff-item .text-navy, .diff-item .text-gray-600,
.diff-item .text-gray-700 {
  color: #0f1e3d !important;
  text-shadow: none !important;
}
.value-card .text-gray-500,
.value-card .text-gray-400,
.team-card  .text-gray-500,
.team-card  .text-gray-400,
.cert-card  .text-gray-500,
.cert-card  .text-gray-400,
.diff-item  .text-gray-500,
.diff-item  .text-gray-400 {
  color: #475569 !important;
}

/* ---- Bucket 2 ----
   Inline-style pill divs with background:#f8fafc (Areas Served on
   index, similar treatment elsewhere) — children .font-bold .text-navy
   getting flipped white by universal rule. Target by inline style.
   IMPORTANT: chain class selectors so specificity beats the
   universal `section > .max-w-7xl .text-navy` rule (0,2,1). */
[style*="background:#f8fafc"],
[style*="background:#f8fafc"] *,
[style*="background:#f8fafc"] .text-navy,
[style*="background:#f8fafc"] .text-gray-600,
[style*="background:#f8fafc"] .text-gray-700,
[style*="background:#f8fafc"] .font-bold,
[style*="background:#f8fafc"] h1,
[style*="background:#f8fafc"] h2,
[style*="background:#f8fafc"] h3,
[style*="background:#f8fafc"] h4,
[style*="background:#f8fafc"] p,
[style*="background:#f8fafc"] div,
[style*="background:#f8fafc"] span,
[style*="background: #f8fafc"],
[style*="background: #f8fafc"] *,
[style*="background: #f8fafc"] .text-navy,
[style*="background: #f8fafc"] .font-bold,
[style*="background:white"],
[style*="background:white"] *,
[style*="background:white"] .text-navy,
[style*="background:#fff"],
[style*="background:#fff"] * {
  color: #0f1e3d !important;
  text-shadow: none !important;
}
[style*="background:#f8fafc"] .text-gray-500,
[style*="background:#f8fafc"] .text-gray-400,
[style*="background: #f8fafc"] .text-gray-500,
[style*="background: #f8fafc"] .text-gray-400 {
  color: #475569 !important;
}
[style*="background:#f8fafc"] .text-gold,
[style*="background:#f8fafc"] i.text-gold {
  color: #C9A84C !important;
}

/* Same for .last-updated pill in legal pages (gold-bg chip with navy text) */
.last-updated,
.last-updated * {
  color: #0f1e3d !important;
}

/* ============================================================
   v4 — SPECIFICITY-CORRECT CARD TEXT RESTORATION
   The universal `section > .max-w-7xl .text-navy { color: white }`
   rule has specificity (0,2,1). To beat it, card-restore rules
   chain TWO classes (`.font-bold.text-navy`) so the card path is
   (0,3,0) — wins by class count.
   ============================================================ */

/* Dark-on-white cards (solid white bg): force dark navy text */
.value-card .font-bold,
.value-card .font-bold.text-navy,
.value-card h1.text-navy,
.value-card h2.text-navy,
.value-card h3.text-navy,
.value-card h4.text-navy,
.value-card h3.font-bold,
.value-card .text-gray-600,
.value-card .text-gray-700,
.value-card .text-gray-500,
.value-card .text-gray-400,
.team-card .font-bold,
.team-card .font-bold.text-navy,
.team-card h1.text-navy,
.team-card h2.text-navy,
.team-card h3.text-navy,
.team-card h3.font-bold,
.team-card .text-gray-600,
.team-card .text-gray-700,
.team-card .text-gray-500,
.team-card .text-gray-400,
.diff-item .font-bold,
.diff-item .font-bold.text-navy,
.diff-item h1.text-navy,
.diff-item h2.text-navy,
.diff-item h3.text-navy,
.diff-item h3.font-bold,
.diff-item .text-gray-600,
.diff-item .text-gray-700,
.diff-item .text-gray-500,
.diff-item .text-gray-400,
.testimonial-card .font-bold.text-navy,
.testimonial-card .text-gray-600,
.testimonial-card .text-gray-500,
.contact-info-card .font-bold.text-navy,
.contact-info-card .font-bold,
.contact-info-card .text-gray-600,
.contact-info-card .text-gray-500,
.contact-info-card .text-gray-400,
.service-card .font-bold.text-navy,
.service-card .text-gray-600,
.service-card .text-gray-500,
.project-card .font-bold.text-navy {
  color: #0f1e3d !important;
}
.value-card .text-gray-500,
.value-card .text-gray-400,
.team-card  .text-gray-500,
.team-card  .text-gray-400,
.diff-item  .text-gray-500,
.diff-item  .text-gray-400,
.testimonial-card .text-gray-500,
.testimonial-card .text-gray-400,
.contact-info-card .text-gray-500,
.contact-info-card .text-gray-400 {
  color: #475569 !important;
}

/* .cert-card has a translucent gold bg (rgba(201,168,76,0.05)) — sits
   directly on the dark bubble. Its text needs to be WHITE, not navy. */
.cert-card .font-bold,
.cert-card .font-bold.text-navy,
.cert-card h1, .cert-card h2, .cert-card h3, .cert-card h4,
.cert-card p, .cert-card span,
.cert-card .text-navy,
.cert-card .text-gray-600,
.cert-card .text-gray-700 {
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 6px rgba(5, 13, 26, 0.55);
}
.cert-card .text-gray-500,
.cert-card .text-gray-400 {
  color: rgba(255, 255, 255, 0.8) !important;
  text-shadow: 0 1px 6px rgba(5, 13, 26, 0.5);
}
.cert-card .text-gold,
.cert-card i.text-gold {
  color: #E8C96A !important;
}

/* Areas Served & similar inline-bg pills — chain double class so we
   beat the universal flip. */
[style*="background:#f8fafc"] .font-bold.text-navy,
[style*="background:#f8fafc"] .font-bold,
[style*="background:#f8fafc"] h1.text-navy,
[style*="background:#f8fafc"] h2.text-navy,
[style*="background:#f8fafc"] h3.text-navy,
[style*="background: #f8fafc"] .font-bold.text-navy,
[style*="background: #f8fafc"] .font-bold,
[style*="background:#fff"] .font-bold.text-navy,
[style*="background:#fff"] .font-bold,
[style*="background:white"] .font-bold.text-navy {
  color: #0f1e3d !important;
}
[style*="background:#f8fafc"] .text-gray-600,
[style*="background:#f8fafc"] .text-gray-500,
[style*="background:#f8fafc"] .text-gray-400,
[style*="background: #f8fafc"] .text-gray-600,
[style*="background: #f8fafc"] .text-gray-500,
[style*="background: #f8fafc"] .text-gray-400 {
  color: #475569 !important;
}

/* Add `.text-gray-500` and `.text-gray-400` to the universal-flip set
   so paragraphs that use these (description text under section
   headings) flip white on the dark bubble — they were missing from
   the earlier flip rule. */
section > .max-w-7xl .text-gray-500,
section > .max-w-7xl .text-gray-400,
section > .max-w-6xl .text-gray-500,
section > .max-w-5xl .text-gray-500,
section > .max-w-4xl .text-gray-500,
section > .max-w-3xl .text-gray-500,
section > .container .text-gray-500 {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* btn-outline-navy buttons inside dark bubbles — text was navy, on
   dark glass bg → invisible. Flip to white. */
.btn-outline-navy {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
.btn-outline-navy:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ============================================================
   v5 — HIGHER-SPECIFICITY CARD RESTORE
   The universal `section > .max-w-7xl .text-gray-400/500 { white }`
   rule is (0,2,1). Earlier card rules `.contact-info-card .text-gray-600`
   are only (0,2,0) and lose. Use the double-class trick to bump
   ALL card-content rules to (0,3,0) — wins by class-count.
   ============================================================ */

.contact-info-card.contact-info-card .text-gray-600,
.contact-info-card.contact-info-card .text-gray-500,
.contact-info-card.contact-info-card .text-gray-400,
.contact-info-card.contact-info-card .font-bold,
.contact-info-card.contact-info-card .font-bold.text-navy,
.contact-info-card.contact-info-card div,
.value-card.value-card .text-gray-600,
.value-card.value-card .text-gray-500,
.value-card.value-card .text-gray-400,
.value-card.value-card .font-bold,
.value-card.value-card .font-bold.text-navy,
.value-card.value-card h1,
.value-card.value-card h2,
.value-card.value-card h3,
.value-card.value-card h4,
.value-card.value-card p,
.team-card.team-card .text-gray-600,
.team-card.team-card .text-gray-500,
.team-card.team-card .text-gray-400,
.team-card.team-card .font-bold,
.team-card.team-card .font-bold.text-navy,
.team-card.team-card h1,
.team-card.team-card h2,
.team-card.team-card h3,
.team-card.team-card h4,
.team-card.team-card p,
.diff-item.diff-item .text-gray-600,
.diff-item.diff-item .text-gray-500,
.diff-item.diff-item .text-gray-400,
.diff-item.diff-item .font-bold,
.diff-item.diff-item .font-bold.text-navy,
.diff-item.diff-item h1,
.diff-item.diff-item h2,
.diff-item.diff-item h3,
.diff-item.diff-item h4,
.diff-item.diff-item p,
.testimonial-card.testimonial-card .text-gray-600,
.testimonial-card.testimonial-card .text-gray-500,
.testimonial-card.testimonial-card .text-gray-400,
.testimonial-card.testimonial-card .font-bold,
.service-card.service-card .text-gray-600,
.service-card.service-card .text-gray-500,
.service-card.service-card .text-gray-400,
.service-card.service-card .font-bold.text-navy {
  color: #0f1e3d !important;
}
/* (Removed `.project-card.project-card .font-bold` — the project-card
   has WHITE text content over a dark gradient overlay, and was
   accidentally forcing .project-tag's gold/font-bold label to navy
   on dark navy. The earlier `.project-tag { color: gold !important }`
   rule should win here.) */
.project-card.project-card .font-bold.text-navy {
  color: #0f1e3d !important;
}

/* Bump .project-tag's own specificity to beat any remaining
   .font-bold-related restore-dark rules. */
.project-tag.project-tag,
.project-card .project-tag.project-tag {
  background: rgba(15, 30, 61, 0.95) !important;
  color: #E8C96A !important;
  border: 1px solid rgba(201, 168, 76, 0.7) !important;
}

/* ============================================================
   v7 — HERO: STRONGER BODY TEXT + SIMULTANEOUS LOAD (no stagger)
   ============================================================ */

/* Crisper hero/page-hero body paragraph — multi-layer halo so the
   white type reads against any photo region (bright sand, palm
   foliage, sky, ocean). Slight weight bump for punch. */
.hero-section p,
.page-hero p,
section.hero-section p,
section.page-hero p {
  color: #ffffff !important;
  font-weight: 500 !important;
  text-shadow:
    0 0 6px   rgba(5, 13, 26, 0.95),
    0 2px 10px rgba(5, 13, 26, 0.9),
    0 4px 28px rgba(5, 13, 26, 0.65) !important;
}

/* Hero H1 — paint the WHOLE headline in the same gold gradient
   used by the About page's "Atlantic Build Group" line. The inner
   <span class="gradient-text">…</span> already uses background-clip
   on its own; applying the same to the H1 itself makes the first
   line ("South Florida's Premier") match. Text-shadow doesn't work
   on background-clip:text (transparent fill), so we use a stacked
   drop-shadow filter for readability protection instead. */
/* "South Florida's Premier" (direct H1 text) → WHITE.
   "Construction & Development Group" stays gold via the inner
   .gradient-text span (its own rule isn't touched). Filter on
   the H1 cascades to both lines so they share the same halo +
   subtle 3D lift. */
.hero-section h1 {
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: none !important;
  filter:
    drop-shadow(0 0 6px   rgba(5, 13, 26, 0.7))
    drop-shadow(0 0 14px  rgba(5, 13, 26, 0.45))
    drop-shadow(0 1px 0   rgba(5, 13, 26, 0.5))
    drop-shadow(0 3px 6px rgba(5, 13, 26, 0.3)) !important;
}
.hero-section h1 .gradient-text,
.hero-section .gradient-text {
  filter: none !important;
  text-shadow: none !important;
}
/* Inner gradient-text span is now redundant on index but harmless;
   keep its own filter so About-page hero still gets the same
   protective shadow. */
.page-hero h1 {
  text-shadow:
    0 0 6px   rgba(5, 13, 26, 0.85),
    0 2px 14px rgba(5, 13, 26, 0.75),
    0 4px 24px rgba(5, 13, 26, 0.55) !important;
}

/* Eyebrow chip text + scroll indicator: brighten + halo */
.hero-section .section-label,
.page-hero .section-label,
.hero-section .scroll-indicator,
.hero-section .scroll-indicator * {
  text-shadow: 0 1px 6px rgba(5, 13, 26, 0.7);
}

/* Force the whole hero block to appear at the same time —
   override AOS's staggered fade-up so every child shows up
   together instead of one piece at a time. */
.hero-section [data-aos],
.page-hero    [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0.35s !important;
}
.hero-section [data-aos][data-aos-delay],
.page-hero    [data-aos][data-aos-delay] {
  transition-delay: 0s !important;
}
/* Mid-gray for secondary text */
.contact-info-card.contact-info-card .text-gray-500,
.contact-info-card.contact-info-card .text-gray-400,
.value-card.value-card .text-gray-500,
.value-card.value-card .text-gray-400,
.team-card.team-card .text-gray-500,
.team-card.team-card .text-gray-400,
.diff-item.diff-item .text-gray-500,
.diff-item.diff-item .text-gray-400,
.testimonial-card.testimonial-card .text-gray-500,
.testimonial-card.testimonial-card .text-gray-400 {
  color: #475569 !important;
}

/* Areas-Served & similar inline-bg pills — also double-up via
   attribute selector chained to itself for higher specificity. */
[style*="background:#f8fafc"][class] .text-gray-400,
[style*="background:#f8fafc"][class] .text-gray-500,
[style*="background:#f8fafc"][class] .font-bold,
[style*="background: #f8fafc"][class] .text-gray-400,
[style*="background: #f8fafc"][class] .text-gray-500 {
  color: #475569 !important;
}
[style*="background:#f8fafc"][class] .font-bold.text-navy,
[style*="background:#f8fafc"][class] div.font-bold,
[style*="background: #f8fafc"][class] .font-bold.text-navy {
  color: #0f1e3d !important;
}

/* ---- Bucket 3 ----
   FAQ section uses .max-w-3xl as its container, but my universal
   "section > .max-w-7xl/6xl/5xl/4xl .text-navy → white" selector
   does NOT include .max-w-3xl. The FAQ <span class="font-bold
   text-navy"> question therefore stayed dark navy — and because
   my .faq-item rule painted each item dark navy glass, the text
   collided with the bg. Force FAQ question text WHITE explicitly. */
.faq-item .faq-question,
.faq-item .faq-question span,
.faq-item .faq-question .text-navy,
.faq-item button span,
.faq-item .text-navy {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(5, 13, 26, 0.65) !important;
}
/* And the expanded FAQ answer body text */
.faq-item [id^="faq-answer"] p,
.faq-item [id^="faq-answer"] .text-gray-600,
.faq-item [id^="faq-answer"] .text-gray-700 {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ---- Bucket 4 ----
   Section bubble + text-flip rule extended to .max-w-3xl
   wrappers too (was missing). This catches any other page that
   uses .max-w-3xl as a section container. */
section > .max-w-3xl {
  background: linear-gradient(135deg,
                rgba(10, 22, 46, 0.86),
                rgba(6,  13, 28, 0.92)) !important;
  border: 1px solid rgba(201, 168, 76, 0.22) !important;
  border-radius: 28px !important;
  padding: 4rem 2.75rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow:
    0 30px 80px rgba(15, 30, 61, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  position: relative;
  overflow: hidden;
}
/* …but NOT inside .hero-section / .page-hero / .trust-bar */
section.hero-section > .max-w-3xl,
section.page-hero    > .max-w-3xl,
.trust-bar           > .max-w-3xl {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
section > .max-w-3xl h1,
section > .max-w-3xl h2,
section > .max-w-3xl h3,
section > .max-w-3xl h4 {
  color: #ffffff !important;
}
section > .max-w-3xl .text-navy {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ---- Bucket 5 ----
   Project tags inside .project-card had inline-style pale-gold bg
   making the gold text wash out (gold-on-light-gold). Force a
   darker, opaque navy bg with bright gold text and a hairline. */
.project-tag,
.project-card .project-tag {
  background: rgba(15, 30, 61, 0.95) !important;
  color: #E8C96A !important;
  border: 1px solid rgba(201, 168, 76, 0.7) !important;
}

/* ---- Bucket 6 ----
   "Get an Instant Estimate" outline button + (305) phone button
   inline style had transparent bg with gold text and a thin gold
   border — washes against the photo. Give them an opaque navy
   fill so the gold reads. */
a[style*="border:2px solid rgba(201,168,76,0.5)"][style*="color:#C9A84C"] {
  background: rgba(15, 30, 61, 0.92) !important;
  border-color: rgb(201, 168, 76) !important;
}

/* ---- Bucket 7 ----
   Tech-chips ("Weekly Progress Updates" etc.) had gold text on
   nearly-transparent bg — borderline. Bump bg darkness. */
.tech-chip {
  background: rgba(15, 30, 61, 0.92) !important;
  border: 1px solid rgba(201, 168, 76, 0.5) !important;
  color: #E8C96A !important;
}

/* ---- Bucket 8 ----
   Footer link text was 50% white; even on dark navy footer that
   reads as faint slate. Bump to 78% (already partly applied; this
   reinforces over any later cascade). Scoped to page footer. */
body > footer a,
body > footer .text-white\/50 {
  color: rgba(255, 255, 255, 0.82) !important;
}
body > footer a:hover {
  color: #E8C96A !important;
}

/* ---- Bucket 9 ----
   `text-gray-400` reviewer/role text inside testimonial cards is
   on a white card — fine. But the same class on the dark CTA
   "No obligation. Free estimate." footnote went too dim. Bump. */
section[aria-labelledby="cta-heading"] .text-white\/40,
section[aria-labelledby="cta-heading"] [class*="text-white/40"] {
  color: rgba(255, 255, 255, 0.78) !important;
}