/* ==========================================================================
   PREMIUM DARK PALETTE
   Loads AFTER backgrounds.css so it wins.
   Two changes do almost all the work:
     1. Kill the repeated project photos behind every section. Five images on a
        loop under an 80% scrim read as filler, not as work.
     2. Drop the ground from burgundy fields to near-black. Burgundy becomes an
        ACCENT, not a surface. That single move is most of why a page reads
        expensive rather than loud.
   ========================================================================== */

:root {
  --ink:      #0A0406;   /* near-black, warm shifted  */
  --ink-2:    #0F0709;   /* alternating band          */
  --ink-edge: #1C0D11;   /* hairline separators       */
  --wine:     #3E0100;   /* brand burgundy, ACCENT    */
  --gold:     #C9A961;
  --cream:    #F6F1E7;
}

/* ---- 1. remove the photo wallpaper entirely ---------------------------- */
section[class*="bg-[#1a040b]"],
section[class*="bg-[#2A0611]"],
section[class*="bg-[#3B0918]"],
section.bg-background,
footer {
  background-image: none !important;
  background-attachment: initial !important;
}

/* ---- 2. near-black ground, alternating so bands separate --------------- */
section[class*="bg-[#1a040b]"] { background-color: var(--ink)   !important; }
section[class*="bg-[#2A0611]"] { background-color: var(--ink-2) !important; }
section[class*="bg-[#3B0918]"] { background-color: var(--ink)   !important; }
section.bg-background          { background-color: var(--ink-2) !important; }
footer                         { background-color: #070304      !important; }

/* ---- 3. depth: a soft warm bloom at the top of each band --------------- */
section[class*="bg-["], section.bg-background { position: relative; }
section[class*="bg-["]::before,
section.bg-background::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%,
              rgba(62,1,0,.34) 0%, rgba(62,1,0,.10) 42%, rgba(10,4,6,0) 78%);
}
section[class*="bg-["] > *, section.bg-background > * { position: relative; z-index: 1; }

/* ---- 4. hairline gold rule between bands ------------------------------- */
section[class*="bg-["] + section[class*="bg-["],
section[class*="bg-["] + section.bg-background,
section.bg-background + section[class*="bg-["] {
  border-top: 1px solid rgba(201,169,97,.13);
}

/* ---- 5. cards lift off the ground instead of sinking into it ----------- */
[class*="rounded-2xl"], [class*="rounded-3xl"] {
  background-color: rgba(255,255,255,.022);
  border: 1px solid rgba(201,169,97,.11);
  backdrop-filter: saturate(115%);
}

/* ---- 6. hold contrast on the darker ground ----------------------------- */
p, li { color: rgba(246,241,231,.80); }
h1, h2, h3 { color: var(--cream); }

/* ---- 7. force real alternation; the markup reuses one class ------------ */
main section:nth-of-type(even)  { background-color: var(--ink)   !important; }
main section:nth-of-type(odd)   { background-color: var(--ink-2) !important; }
section.min-h-screen            { background-color: transparent  !important; }

/* ---- 8. the final CTA had no ground at all ----------------------------- */
main section:last-of-type {
  background-color: var(--ink) !important;
  border-top: 1px solid rgba(201,169,97,.16);
}
main section:last-of-type::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(100% 80% at 50% 100%,
              rgba(62,1,0,.42) 0%, rgba(62,1,0,.12) 46%, rgba(10,4,6,0) 80%);
}

/* ==========================================================================
   SECTION BACKGROUNDS — real finished work, Closter + Maria.
   The old wallpaper was 5 images on a loop under an 80% scrim, which read as
   filler. These are the actual jobs under a ~50% bottom-weighted scrim, so the
   stone is visible in the middle band while headings stay readable.
   ========================================================================== */

:root {
  --scrim: linear-gradient(180deg,
            rgba(9,4,5,.90) 0%,
            rgba(9,4,5,.50) 34%,
            rgba(9,4,5,.56) 64%,
            rgba(9,4,5,.94) 100%);
}

main section:nth-of-type(3),
main section:nth-of-type(4),
main section:nth-of-type(5),
main section:nth-of-type(6),
main section:nth-of-type(7),
main section:nth-of-type(8),
main section:nth-of-type(9) {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

main section:nth-of-type(3) { background-image: var(--scrim), url('/images/bg/bg-services.webp') !important; }
main section:nth-of-type(4) { background-image: var(--scrim), url('/images/bg/bg-why.webp')      !important; }
main section:nth-of-type(5) { background-image: var(--scrim), url('/images/bg/bg-process.webp')  !important; }
main section:nth-of-type(6) { background-image: var(--scrim), url('/images/bg/bg-reviews.webp')  !important; }
main section:nth-of-type(7) { background-image: var(--scrim), url('/images/bg/bg-areas.webp')    !important; }
main section:nth-of-type(8) { background-image: var(--scrim), url('/images/bg/bg-faq.webp')      !important; }
main section:nth-of-type(9) { background-image: var(--scrim), url('/images/bg/bg-cta.webp')      !important; }

/* the warm bloom fought the photographs — drop it where a photo now sits */
main section:nth-of-type(n+3)::before { background: none !important; }

/* slow parallax on desktop only; it is janky on iOS */
@media (min-width: 1024px) and (hover: hover) {
  main section:nth-of-type(n+3) { background-attachment: fixed !important; }
}

/* ==========================================================================
   BACKGROUND MAPPING BY SECTION IDENTITY, not position.
   projects.js stamps data-bb on each section. Adding or removing a section can
   no longer shuffle the backgrounds, which nth-of-type did.
   ========================================================================== */
main section[data-bb] { background-size: cover !important;
  background-position: center center !important; background-repeat: no-repeat !important; }

main section[data-bb="services"] { background-image: var(--scrim), url('/images/bg/bg-services.webp') !important; }
main section[data-bb="why"]      { background-image: var(--scrim), url('/images/bg/bg-why.webp')      !important; }
main section[data-bb="process"]  { background-image: var(--scrim), url('/images/bg/bg-process.webp')  !important; }
main section[data-bb="reviews"]  { background-image: var(--scrim), url('/images/bg/bg-reviews.webp')  !important; }
main section[data-bb="areas"]    { background-image: var(--scrim), url('/images/bg/bg-areas.webp')    !important; }
main section[data-bb="faq"]      { background-image: var(--scrim), url('/images/bg/bg-faq.webp')      !important; }
main section[data-bb="cta"]      { background-image: var(--scrim), url('/images/bg/bg-cta.webp')      !important; }

/* the new projects section keeps a clean near-black ground */
main section[data-bb="projects"] { background-image: none !important;
  background-color: #0A0406 !important; }
main section[data-bb="projects"]::before { background: none !important; }

/* ==========================================================================
   FIXES
   1. The page shook on scroll. Cause: background-attachment:fixed, which forces
      the browser to repaint the whole background every frame. Removed.
   2. Cards were nearly transparent (my rgba(255,255,255,.022)), so the section
      photo showed through and nothing was readable. They are solid now.
   ========================================================================== */

main section[data-bb] { background-attachment: scroll !important; }

/* solid cards — readable over any photo */
[class*="rounded-2xl"], [class*="rounded-3xl"], [class*="rounded-xl"] {
  background-color: rgba(13,6,8,.90) !important;
  border: 1px solid rgba(201,169,97,.16) !important;
  backdrop-filter: blur(3px) saturate(115%);
}

/* Where We Work — the three town columns were see-through */
main section[data-bb="areas"] [class*="rounded"],
main section[data-bb="areas"] [class*="border"] {
  background-color: rgba(12,5,7,.93) !important;
  border-color: rgba(201,169,97,.26) !important;
}
main section[data-bb="areas"] li,
main section[data-bb="areas"] a { color: rgba(246,241,231,.88) !important; }

/* FAQ — accordion rows were see-through */
main section[data-bb="faq"] [class*="rounded"],
main section[data-bb="faq"] button,
main section[data-bb="faq"] [class*="border-b"] {
  background-color: rgba(12,5,7,.93) !important;
}
main section[data-bb="faq"] h3,
main section[data-bb="faq"] button { color: #F6F1E7 !important; }

/* heavier scrim behind the two most text-dense sections */
main section[data-bb="areas"], main section[data-bb="faq"] {
  background-image: linear-gradient(180deg,
      rgba(9,4,5,.94) 0%, rgba(9,4,5,.86) 40%,
      rgba(9,4,5,.88) 70%, rgba(9,4,5,.96) 100%),
    var(--bbimg) !important;
}
main section[data-bb="areas"] { --bbimg: url('/images/bg/bg-areas.webp'); }
main section[data-bb="faq"]   { --bbimg: url('/images/bg/bg-faq.webp'); }

/* WHAT WE BUILD needs a background of its own */
main section[data-bb="projects"] {
  background-image:
    linear-gradient(180deg, rgba(9,4,5,.93) 0%, rgba(9,4,5,.80) 35%,
                            rgba(9,4,5,.84) 68%, rgba(9,4,5,.96) 100%),
    url('/images/bg/bg-projects.webp') !important;
  background-size: cover !important;
  background-position: center !important;
}

/* ==========================================================================
   BUTTON FIX — my "solid cards" rule above matched anything with a rounded-*
   class, which included the gold CTA buttons and painted them near-black.
   Buttons and links are excluded and the gold is restored.
   ========================================================================== */
a[class*="rounded"], button[class*="rounded"],
a[class*="bg-gold"], button[class*="bg-gold"],
a[class*="bg-primary"], button[class*="bg-primary"] {
  background-color: revert !important;
  backdrop-filter: none !important;
}

/* the primary CTA is gold with dark text, everywhere */
a[href*="estimate"], a[href*="contact"], a[href*="tel:"],
button[class*="bg-primary"], a[class*="bg-primary"],
.bb-cta-gold {
  background-color: #C9A961 !important;
  color: #2A0308 !important;
  border-color: #C9A961 !important;
}
a[href*="estimate"] *, button[class*="bg-primary"] * { color: #2A0308 !important; }

/* the secondary/outline button stays outlined, never filled black */
a[class*="inline-flex"][class*="border"][class*="rounded"]:not([class*="bg-primary"]) {
  background-color: rgba(255,255,255,.04) !important;
  border-color: rgba(201,169,97,.55) !important;
  color: #F6F1E7 !important;
}

/* the transformations band keeps a clean near-black ground, no photo behind it */
main section#bb-ba, main section[data-bb="ba"] {
  background-image: none !important;
  background-color: #0A0406 !important;
}
main section[data-bb="ba"]::before { background: none !important; }

/* ==========================================================================
   FINAL OVERRIDE — authoritative. Everything below wins.
   Two problems being corrected:
     1. My "solid cards" rule matched EVERY rounded element, including every
        button on the site, and painted them near-black.
     2. The ground went too far to pure black and read flat and heavy.
        Lifted to a deep burgundy-black so the brand colour is present again.
   ========================================================================== */

:root {
  --ink:      #17070C;   /* deep burgundy-black, not flat black */
  --ink-2:    #1E0A10;   /* alternating band, slightly lifted   */
  --ink-deep: #120509;   /* footer                              */
  --card:     rgba(38,15,22,.86);
}

/* ---- ground: lifted off pure black ------------------------------------ */
main section[data-bb]                { background-color: var(--ink)   !important; }
main section[data-bb="why"],
main section[data-bb="reviews"],
main section[data-bb="faq"]          { background-color: var(--ink-2) !important; }
main section[data-bb="projects"],
main section[data-bb="ba"]           { background-color: var(--ink)   !important; }
footer                               { background-color: var(--ink-deep) !important; }
#bb-projects, #bb-ba                 { background-color: transparent !important; }

/* ---- scrims: let more of the work through ----------------------------- */
:root {
  --scrim: linear-gradient(180deg,
            rgba(23,7,12,.86) 0%, rgba(23,7,12,.42) 34%,
            rgba(23,7,12,.48) 64%, rgba(23,7,12,.90) 100%);
}
main section[data-bb="areas"], main section[data-bb="faq"] {
  background-image: linear-gradient(180deg,
      rgba(23,7,12,.90) 0%, rgba(23,7,12,.80) 40%,
      rgba(23,7,12,.82) 70%, rgba(23,7,12,.94) 100%), var(--bbimg) !important;
}

/* ---- cards: burgundy-tinted, never black ------------------------------ */
div[class*="rounded-2xl"], div[class*="rounded-3xl"], div[class*="rounded-xl"],
li[class*="rounded"], article[class*="rounded"] {
  background-color: var(--card) !important;
  border: 1px solid rgba(201,169,97,.18) !important;
}
main section[data-bb="areas"] div[class*="rounded"],
main section[data-bb="faq"]   div[class*="rounded"] {
  background-color: rgba(34,13,19,.92) !important;
}

/* ---- BUTTONS AND LINKS: never touched by the card rule, anywhere ------- */
button, a, [role="button"], input[type="submit"] {
  backdrop-filter: none !important;
}
button[class*="rounded"], a[class*="rounded"],
button[class*="bg-"],     a[class*="bg-"] {
  background-color: revert !important;
  border-color: revert !important;
}

/* primary CTA: gold fill, dark text — every instance on the site */
/* NB: :not([class*="bg-primary/"]) keeps this off Tailwind's TINTS.
   "bg-primary/10" and "bg-primary/20" are 10%- and 20%-gold discs that hold a
   gold icon; without the guard they were painted solid gold here. */
a[href*="estimate" i], a[href*="contact" i], a[href*="quote" i],
a[href^="tel:"], button[type="submit"],
[class*="bg-primary"]:not([class*="bg-primary/"]),
[class*="bg-gold"], [class*="gold-gradient"] {
  background: #C9A961 !important;
  background-image: none !important;
  color: #2A0308 !important;
  border: 1px solid #C9A961 !important;
}
a[href*="estimate" i] *, a[href*="contact" i] *, a[href^="tel:"] *,
button[type="submit"] *,
[class*="bg-primary"]:not([class*="bg-primary/"]) * { color: #2A0308 !important; }

/* secondary / outline button: translucent, gold edge, cream text */
a[class*="inline-flex"][class*="border"]:not([href*="estimate" i]):not([href*="contact" i]):not([href^="tel:"]),
button[class*="inline-flex"][class*="border"]:not([type="submit"]) {
  background-color: rgba(255,255,255,.05) !important;
  border-color: rgba(201,169,97,.5) !important;
  color: #F6F1E7 !important;
}

/* the floating BOOK NOW rail keeps dark text on its gold.
   Scoped to that one anchor. The old selector was
   [class*="fixed"][class*="right"], which also matched the site header
   (fixed top-0 left-0 right-0) and painted every dropdown link #2A0308
   on a near-black panel, i.e. invisible. */
a[class*="fixed"][class*="bg-primary"],
a[class*="fixed"][class*="bg-primary"] * { color: #2A0308; }

/* ---- overlays: lighter, so photographs are not crushed ---------------- */
main section[data-bb]::before {
  background: radial-gradient(120% 70% at 50% 0%,
      rgba(62,1,0,.28) 0%, rgba(62,1,0,.08) 45%, rgba(23,7,12,0) 80%) !important;
}
main section[data-bb="projects"]::before,
main section[data-bb="ba"]::before { background: none !important; }

/* the earlier #bb-ba rule out-specified the palette by ID — settle it here */
main section#bb-ba, main section[data-bb="ba"] {
  background-color: var(--ink) !important;
  background-image: none !important;
}
/* "Meet Our Team" and any other bare link button gets a visible edge */
main a:not([class*="bg-"]):not([href^="tel:"])[class*="inline-flex"],
main button:not([class*="bg-"])[class*="inline-flex"] {
  background-color: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(201,169,97,.45) !important;
  color: #F6F1E7 !important;
}

/* ==========================================================================
   GOLD SLAB FIX
   The headline and the stat numbers use `text-gold-gradient` — gradient TEXT,
   painted with background-clip:text. My CTA rule matched any class containing
   "gold", killed the gradient and set a solid background, turning the text
   into a gold block. The gold fill now only ever applies to real buttons.
   ========================================================================== */

/* undo the damage on every gradient-text element */
[class*="gold-gradient"], [class*="text-gold"], [class*="bg-clip-text"],
h1 span, h2 span, .stat-num, [class*="text-transparent"] {
  background-color: transparent !important;
  border: 0 !important;
}
/* restore the gradient fill on the headline + stat numbers */
[class*="gold-gradient"], [class*="bg-clip-text"], [class*="text-transparent"] {
  background-image: linear-gradient(180deg, #E3C983 0%, #C9A961 52%, #A8873F 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* the gold CTA fill applies to BUTTONS AND LINKS ONLY - never to text */
a[href*="estimate" i], a[href*="contact" i], a[href*="quote" i], a[href^="tel:"],
button[type="submit"], a[class*="bg-primary"], button[class*="bg-primary"] {
  background-image: none !important;
  background-color: #C9A961 !important;
  color: #2A0308 !important;
  -webkit-text-fill-color: #2A0308 !important;
  border: 1px solid #C9A961 !important;
}
a[href*="estimate" i] *, a[href^="tel:"] *, button[type="submit"] * {
  color: #2A0308 !important; -webkit-text-fill-color: #2A0308 !important;
  background: none !important;
}