/* ===========================================================================
   De Boer Elite Tint — per-client craft layer (loads AFTER styles.css)
   Brand: teal #008CB4 + black. Storefront tint shop, Alton IA.
   Keep design here; styles.css stays pristine base.css.
   =========================================================================== */

/* Branded top rule on the header — small signature, safe for mobile nav
   (no z-index / backdrop-filter changes to .site-header). */
.site-header { border-top: 3px solid var(--brand-primary); }

/* Hero: brand-tinted scrim so the tinted-vehicle photo reads dark + on-brand
   and the headline stays legible. Deep teal at the edges, near-black at base. */
.x-hero .x-hero-scrim {
  background:
    linear-gradient(180deg, rgba(3,18,24,.55) 0%, rgba(3,18,24,.35) 42%, rgba(0,0,0,.92) 100%),
    linear-gradient(115deg, rgba(0,140,180,.34) 0%, rgba(0,140,180,0) 55%);
}
.x-hero h1 { max-width: 20ch; }

/* Eyebrow: slightly tighter, adds a subtle depth so the teal chip pops. */
.x-eyebrow { box-shadow: 0 6px 18px rgba(0,140,180,.35); }

/* Section headings: short teal accent rule under the H2 for a consistent
   signature across pages. */
.x-head h2 { position: relative; }
.x-head:not(.center) h2::after,
.x-head.center h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin-top: 16px;
}
.x-head.center h2::after { margin-left: auto; margin-right: auto; }

/* Service cards: teal wipe on hover so the grid feels crafted, not stock. */
.x-svc { border-top: 3px solid transparent; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.x-svc:hover { border-top-color: var(--brand-primary); }

/* Why-us feature tiles: give the icon chip a hair more brand presence. */
.x-feat .ic { border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, transparent); }

/* Big closing CTA: swap the flat primary fill for a branded teal→black
   diagonal so the last thing on the page feels premium. */
.x-bigcta {
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(0,140,180,.55) 0%, rgba(0,140,180,0) 55%),
    linear-gradient(135deg, #006f8f 0%, var(--brand-secondary) 100%);
  background-color: var(--brand-secondary);
}

/* Stat band: subtle divider so the numbers feel like a designed strip. */
.x-stat .num { text-shadow: 0 6px 24px rgba(0,140,180,.35); }