/* ===== Enhancement layer (design agent) — loaded after styles.css ===== */

/* Hardened hero on-load entrance — replaces the existing `@keyframes heroIn` / `.hero__inner > *` block (styles.css lines ~181-188). Content is visible by default (in normal flow); the animation is purely additive so JS failure or animation-skip never leaves a blank hero. Staggered, snappy (<0.9s total), reduced-motion safe. */
/* ---- Hero entrance: immediate, on-load, no blank flash ---- */
@keyframes heroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.hero__inner > * { opacity: 1; will-change: transform, opacity; animation: heroIn .72s var(--ease) both; }
.hero__inner > *:nth-child(1) { animation-delay: 0s; }
.hero__inner > *:nth-child(2) { animation-delay: .08s; }
.hero__inner > *:nth-child(3) { animation-delay: .16s; }
.hero__inner > *:nth-child(4) { animation-delay: .26s; }
.hero__inner > *:nth-child(5) { animation-delay: .36s; }
/* word-level emphasis on the amber accent */
.hero h1 .accent { display: inline-block; animation: heroIn .8s var(--ease) .2s both; }
@media (prefers-reduced-motion: reduce) {
  .hero__inner > *, .hero h1 .accent { animation: none; opacity: 1; transform: none; }
}

/* Living hero background — slow Ken-Burns zoom + a one-shot amber light-sweep on load. Attach to existing `.hero__bg img` and `.hero` (uses `.hero::before` which is currently free; `.hero::after` is the scrim and stays untouched). Makes the hero feel alive on first paint without any JS. */
/* ---- Hero living background ---- */
.hero__bg img { animation: heroKenBurns 22s ease-in-out 0s both alternate infinite; transform-origin: 60% 40%; }
@keyframes heroKenBurns { from { transform: scale(1.04); } to { transform: scale(1.12) translateY(-1.5%); } }
/* amber light-sweep that crosses once on load */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(247,168,35,0.16) 50%, transparent 65%);
  background-size: 280% 100%; background-position: 120% 0;
  animation: heroSweep 1.6s var(--ease) .35s both;
}
@keyframes heroSweep { to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; transform: scale(1.04); }
  .hero::before { animation: none; opacity: 0; }
}

/* Micro-interactions — button shine sweep on hover, animated arrow on primary CTAs, magnetic lift refinement, and active-press feedback. Layers onto existing `.btn`, `.btn-primary`, `.btn-lg` without changing their base look. */
/* ---- Button micro-interactions ---- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); transition: left .55s var(--ease); pointer-events: none;
}
.btn-primary:hover::after { left: 140%; }
.btn:active { transform: translateY(-1px) scale(.99); }
/* arrow nudges on CTA hover (icons render inline svg) */
.btn .icon-arrow, .btn svg:last-child { transition: transform .25s var(--ease); }
.btn:hover svg:last-child { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } .btn:active { transform: none; } }

/* Micro-interactions — header phone pulse (draws the eye to the call CTA), link underline grow, and trust-row icon pop. Enhances existing `.header-phone`, `.nav a`, `.hero__trust .t svg`. */
/* ---- Header + nav micro-interactions ---- */
.header-phone svg { transition: transform .3s var(--ease); }
.header-phone:hover svg { animation: phoneWiggle .5s var(--ease); }
@keyframes phoneWiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-12deg)} 60%{transform:rotate(10deg)} }
.nav a { position: relative; }
.nav a::after { content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; background:var(--amber); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform:scaleX(1); }
.hero__trust .t { transition: transform .25s var(--ease); }
.hero__trust .t:hover { transform: translateY(-3px); }
.hero__trust .t:hover svg { animation: heroIn .4s var(--ease); }
@media (prefers-reduced-motion: reduce){ .header-phone:hover svg{animation:none} }

/* Service card media reveal + amber border ignite on hover. Strengthens existing `.card` so the grid feels as polished as rosepaving's service tiles. Adds a top amber accent line that wipes in on hover. */
/* ---- Card hover ignite ---- */
.card { isolation: isolate; }
.card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:2;
  background: linear-gradient(90deg, var(--amber), var(--amber-300));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.card:hover::before { transform: scaleX(1); }
.card__media::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(8,10,13,0.55));
  opacity:.5; transition: opacity .4s var(--ease);
}
.card:hover .card__media::after { opacity:.15; }
.card__icon { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover .card__icon { transform: translateY(-4px) rotate(-6deg); box-shadow: 0 16px 36px rgba(247,168,35,.5); }

/* Logo/industry CLOUD (integrity-safe — NO fake client logos). Renders the *types* of properties served as icon+label chips (HOAs, retail centers, warehouses, churches, schools, medical offices, municipal lots, etc.). Use existing icons (grid, truck, users, shield, road, pin). New markup: <div class="industry-cloud"> with <span class="industry-chip">icon + label</span>. Place under the hero/stats band as a quiet authority strip. */
/* ---- Industry cloud (property TYPES, not brands) ---- */
.industry-cloud { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.industry-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: var(--radius-pill);
  background: var(--ink-800); border: 1px solid var(--line); color: var(--mist-100);
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  transition: transform .25s var(--ease), border-color .25s, background .25s;
}
.industry-chip svg { width: 19px; height: 19px; color: var(--amber); flex: none; }
.industry-chip:hover { transform: translateY(-3px); border-color: rgba(247,168,35,.55); background: var(--ink-700); }
/* light-section variant */
.section--paper .industry-chip, .section:not(.section--dark) .industry-chip {
  background: #fff; border-color: var(--line-dark); color: var(--ink-800); box-shadow: var(--shadow-sm);
}
.industry-cloud .industry-label { color: var(--slate-400); font-weight:600; letter-spacing:.04em; align-self:center; margin-right:6px; }

/* Animated COVERAGE STRIP — a marquee of Metro Atlanta city names that scrolls continuously, reinforcing local reach (beats rosepaving's static national footprint by feeling hyper-local). Markup: <div class="coverage-strip"><div class="coverage-track"> ...duplicated city spans... </div></div>. Duplicate the city list twice in markup for seamless loop. Pauses on hover, reduced-motion safe. */
/* ---- Animated coverage strip ---- */
.coverage-strip { position: relative; overflow: hidden; padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.coverage-track { display: inline-flex; align-items: center; gap: 40px; white-space: nowrap; animation: coverageScroll 38s linear infinite; will-change: transform; }
.coverage-strip:hover .coverage-track { animation-play-state: paused; }
.coverage-item { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--mist-200); }
.coverage-item svg { width: 18px; height: 18px; color: var(--amber); }
.coverage-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); opacity:.6; }
@keyframes coverageScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .coverage-track { animation: none; flex-wrap: wrap; white-space: normal; justify-content: center; } }

/* Sticky MOBILE CALL BAR — upgrade of the existing `.mobile-cta-bar`. Adds a slide-up entrance, a subtle live pulse ring on the call button, a 3-up layout (Call / Text or Estimate), safe-area padding, and a hide-on-scroll-up affordance hook (`.mobile-cta-bar.hidden`). Replaces/augments the block at styles.css lines ~190-201. */
/* ---- Sticky mobile call bar (enhanced) ---- */
@media (max-width: 860px) {
  .mobile-cta-bar {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(11,13,16,0.97); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px rgba(8,10,13,.35);
    transform: translateY(0); transition: transform .35s var(--ease);
    animation: barUp .5s var(--ease) .4s both;
  }
  .mobile-cta-bar.hidden { transform: translateY(120%); }
  .mobile-cta-bar .btn { padding: 14px 14px; font-size: 1rem; }
  .mobile-cta-bar .btn-primary { position: relative; }
  .mobile-cta-bar .btn-primary::before {
    content:""; position:absolute; inset:0; border-radius:inherit;
    box-shadow: 0 0 0 0 rgba(247,168,35,.55); animation: callPulse 2.4s ease-out infinite;
  }
  body { padding-bottom: 78px; }
}
@keyframes barUp { from { transform: translateY(120%); } to { transform: translateY(0); } }
@keyframes callPulse { 0%{box-shadow:0 0 0 0 rgba(247,168,35,.5)} 70%{box-shadow:0 0 0 14px rgba(247,168,35,0)} 100%{box-shadow:0 0 0 0 rgba(247,168,35,0)} }
@media (prefers-reduced-motion: reduce){ .mobile-cta-bar{animation:none} .mobile-cta-bar .btn-primary::before{animation:none} }

/* ESTIMATOR WIDGET styling — a self-qualifying inline estimate card (project type, approx sq ft, timeline) that hands off to the contact form. NOT a price quote (keeps integrity — no fabricated $). Styled as a premium dark card with amber segmented選択. Markup: <div class="estimator"> with <div class="estimator__head">, segmented `.est-options` of `.est-opt` buttons, and a footer CTA. Beats rosepaving by giving a friction-light entry to the funnel. */
/* ---- Estimator widget ---- */
.estimator { background: linear-gradient(160deg, var(--ink-800), var(--ink-900)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,4vw,40px); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.estimator::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 130% at 100% 0%, rgba(247,168,35,.16), transparent 55%); pointer-events:none; }
.estimator__head h3 { color:#fff; font-size:1.5rem; }
.estimator__head p { color: var(--slate-300); margin-top:6px; }
.estimator__step { margin-top: 22px; position: relative; }
.estimator__step > label { display:block; font-family:var(--font-display); font-weight:600; font-size:.86rem; letter-spacing:.04em; color:var(--amber-300); text-transform:uppercase; margin-bottom:12px; }
.est-options { display:flex; flex-wrap:wrap; gap:10px; }
.est-opt { display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:var(--radius-pill); background:rgba(255,255,255,0.05); border:1.5px solid var(--line); color:var(--mist-100); font-family:var(--font-display); font-weight:600; font-size:.95rem; transition:all .2s var(--ease); }
.est-opt svg { width:18px;height:18px;color:var(--amber); }
.est-opt:hover { border-color:rgba(247,168,35,.55); transform:translateY(-2px); }
.est-opt[aria-pressed="true"], .est-opt.selected { background:var(--amber); border-color:var(--amber); color:var(--ink-900); }
.est-opt[aria-pressed="true"] svg, .est-opt.selected svg { color:var(--ink-900); }
.estimator__footer { margin-top:28px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.estimator__note { color:var(--slate-400); font-size:.84rem; }
@media (prefers-reduced-motion: reduce){ .est-opt:hover{transform:none} }

/* BLOG CARDS — clean, scannable editorial cards ("Asphalt 101" / maintenance tips) to build E-E-A-T like rosepaving's resource hub. Markup: <article class="post-card"> with `.post-card__media` (img), `.post-card__cat` pill, `.post-card__body` (h3 + excerpt + `.post-card__meta`). Reuses card hover language for consistency. */
/* ---- Blog / resource cards ---- */
.posts { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line-dark); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.post-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.post-card__media { position:relative; aspect-ratio:16/10; overflow:hidden; }
.post-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.post-card:hover .post-card__media img { transform:scale(1.07); }
.post-card__cat { position:absolute; top:14px; left:14px; background:var(--amber); color:var(--ink-900); font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:var(--radius-pill); }
.post-card__body { padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post-card__body h3 { font-size:1.22rem; line-height:1.2; margin-bottom:10px; }
.post-card__body p { color:var(--ink-600); font-size:.96rem; }
.post-card__meta { margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:10px; color:var(--slate-400); font-size:.85rem; }
.post-card__meta .read-more { margin-left:auto; color:var(--amber-600); font-family:var(--font-display); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.post-card__meta .read-more svg { width:16px;height:16px; transition:transform .25s var(--ease); }
.post-card:hover .read-more svg { transform:translateX(4px); }
@media (max-width:1000px){ .posts{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .posts{grid-template-columns:1fr;} }

/* GUARANTEE / TRUST BADGES — a row of credibility seals using ONLY allowed claims (Licensed & Insured · COI on request, 15+ Years, 500+ Projects, 5.0 from 5 reviews, Free Estimates, Written Workmanship Warranty). SVG/icon-driven badges, no fake awards or certifications. Markup: <div class="guarantees"> of <div class="guarantee"> (icon ring + title + sub). */
/* ---- Guarantee / trust badges ---- */
.guarantees { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.guarantee { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:30px 22px; border-radius:var(--radius-lg); background:#fff; border:1px solid var(--line-dark); box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), border-color .3s; }
.guarantee:hover { transform:translateY(-6px); border-color:rgba(247,168,35,.5); }
.guarantee__ring { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--amber-soft); color:var(--amber-600); position:relative; }
.guarantee__ring::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2px dashed rgba(247,168,35,.4); }
.guarantee:hover .guarantee__ring::after { animation: badgeSpin 9s linear infinite; }
.guarantee__ring svg { width:30px; height:30px; }
.guarantee h4 { font-size:1.04rem; }
.guarantee p { font-size:.85rem; color:var(--slate-400); }
/* dark-section variant */
.section--dark .guarantee { background:var(--ink-800); border-color:var(--line); }
.section--dark .guarantee h4 { color:#fff; }
@keyframes badgeSpin { to { transform: rotate(360deg); } }
@media (max-width:860px){ .guarantees{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .guarantees{grid-template-columns:1fr;} .guarantee{flex-direction:row; text-align:left; align-items:center;} }
@media (prefers-reduced-motion: reduce){ .guarantee:hover .guarantee__ring::after{animation:none} }

/* Section divider — an angled 'asphalt seam' transition between dark and light sections (replaces hard horizontal edges) plus a subtle amber-dashed centerline motif echoing road striping. Apply `.seam-top` to a section that follows a dark one. Pure CSS, no images. */
/* ---- Angled section seams + road-stripe motif ---- */
.seam-top { position: relative; }
.seam-top::before {
  content:""; position:absolute; top:-1px; left:0; right:0; height:48px; pointer-events:none;
  background: var(--ink-900);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}
/* dashed amber centerline divider (use <div class="road-divider"></div>) */
.road-divider { height: 4px; width: min(220px, 60%); margin: 0 auto;
  background-image: linear-gradient(90deg, var(--amber) 0 28px, transparent 28px 52px);
  background-size: 52px 100%; background-repeat: repeat-x; border-radius: 2px; opacity:.85;
}
.section-head .road-divider { margin-top: 18px; }

/* Scroll-reveal hardening for the REST of the page (everything except the hero). Adds an IntersectionObserver-independent fallback timeout class hook so `.reveal` elements can never stay hidden if the observer never fires, and adds directional + scale variants for richer section entrances. Augments styles.css lines ~373-384. */
/* ---- Reveal variants + safety fallback ---- */
.js .reveal.from-left { transform: translateX(-30px); }
.js .reveal.from-right { transform: translateX(30px); }
.js .reveal.zoom-in { transform: scale(.94); }
.js .reveal.from-left.in, .js .reveal.from-right.in, .js .reveal.zoom-in.in { transform: none; }
/* failsafe: if JS adds .reveal-ready after a max wait, force-show */
.js.reveal-failsafe .reveal:not(.in) { opacity:1; transform:none; transition:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal.from-left,.js .reveal.from-right,.js .reveal.zoom-in{opacity:1;transform:none;} }

/* Stat band polish — amber count-up emphasis, hover lift, and a thin animated underline that draws in when the stats scroll into view (pairs with the existing data-count JS). Enhances existing `.stats` / `.stat`. */
/* ---- Stat band polish ---- */
.stats .stat { position: relative; transition: background .3s var(--ease); }
.stats .stat:hover { background: rgba(247,168,35,0.04); }
.stat__value { position: relative; display: inline-block; }
.stat__value::after { content:""; position:absolute; left:50%; bottom:-10px; width:0; height:3px; background:var(--amber); border-radius:2px; transform:translateX(-50%); transition:width .6s var(--ease) .3s; }
.stats .stat.in .stat__value::after, .reveal.in .stat__value::after { width: 40px; }
@media (prefers-reduced-motion: reduce){ .stat__value::after{transition:none;} }

/* ============================================================
   ROSE LIGHT THEME — white-dominant, dark utility bar + hero/footer
   (loaded last so it wins). Hero, .statement, footer stay dark.
   ============================================================ */

/* --- White main header (Rose-style); utility bar stays black --- */
.site-header { background: rgba(255,255,255,0.97); box-shadow: 0 1px 0 rgba(11,13,16,.08); }
.site-header.scrolled { background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); }
.brand__logo { height: 44px; }
.nav a, .nav-item > a { color: var(--ink-700); }
.nav a:hover, .nav a[aria-current="page"], .nav-item:hover > a { color: var(--ink-900); background: var(--mist-100); }
.nav a[aria-current="page"] { color: var(--amber-600); }
.header-phone { color: var(--ink-900); }
.header-phone svg { color: var(--amber-600); }
.nav-toggle { color: var(--ink-900); background: var(--mist-100); }

/* light mega dropdown */
.mega { background: #fff; border: 1px solid var(--line-dark); box-shadow: var(--shadow-lg); }
.mega a { color: var(--ink-700); }
.mega a:hover { background: var(--mist-100); color: var(--ink-900); }
.mega a svg { color: var(--amber-600); }
.mega__all { color: var(--amber-600) !important; border-top-color: var(--line-dark); }

/* --- Flip every dark content section to light --- */
.section--dark { background: var(--paper); color: var(--ink-700); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ink-900); }
.section--dark p { color: var(--ink-600); }
.section--dark .eyebrow.light { color: var(--amber-600); }
.section--dark .eyebrow.light::before { background: var(--amber); }
.section--dark[style] { background: var(--white) !important; }   /* kills inline ink-800 on reviews */

/* stats band → light */
.stats .stat { border-color: var(--line-dark); }
.stat__label { color: var(--slate-400); }

/* feature cards → light */
.feature { background: #fff; border-color: var(--line-dark); box-shadow: var(--shadow-sm); }
.feature:hover { border-color: rgba(247,168,35,.5); box-shadow: var(--shadow-md); }
.feature h3 { color: var(--ink-900); }
.feature p { color: var(--ink-600); }

/* area chips → light */
.area-chip { background: #fff; border-color: var(--line-dark); color: var(--ink-800); box-shadow: var(--shadow-sm); }
.area-chip:hover { background: var(--paper); border-color: rgba(247,168,35,.55); }

/* service/industry cards → light Rose cards (white, amber icon, amber top-accent) */
.scard { background: #fff; color: var(--ink-900); border: 1px solid var(--line-dark); box-shadow: var(--shadow-sm); }
.scard:hover { box-shadow: var(--shadow-lg); }
.scard h3 { color: var(--ink-900); }
.scard p { color: var(--ink-600); }
.scard__link { color: var(--amber-600); }

/* inner page header → light with amber stripe */
.page-hero--plain { background: var(--paper); }
.page-hero--plain h1 { color: var(--ink-900); }
.page-hero--plain p { color: var(--ink-600); }
.page-hero--plain .crumbs { color: var(--slate-400); }
.page-hero--plain .crumbs a { color: var(--ink-600); }
.page-hero--plain .crumbs a:hover { color: var(--amber-600); }
.page-hero--plain .eyebrow.light { color: var(--amber-600); }
.page-hero--plain .eyebrow.light::before { background: var(--amber); }
.page-hero--plain::before { opacity: .8; }

/* estimate band → light accent */
.estimate-band { background: var(--paper); }
.estimate-band::before { background: radial-gradient(110% 140% at 100% 0%, rgba(247,168,35,0.16), transparent 55%); }
.estimate-band h2 { color: var(--ink-900) !important; }
.estimate-band p { color: var(--ink-600) !important; }
.estimate-band .eyebrow.light { color: var(--amber-600); }

/* --- Real testimonials grid (light) --- */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tcard { background: #fff; border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.tcard .stars { color: var(--amber); letter-spacing: 2px; font-size: 1rem; }
.tcard blockquote { margin: 12px 0 18px; color: var(--ink-700); font-size: 1.02rem; line-height: 1.6; flex: 1; }
.tcard .who { display: flex; align-items: center; gap: 12px; }
.tcard .who .av { width: 42px; height: 42px; border-radius: 50%; background: var(--ink-900); color: var(--amber); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; flex: none; }
.tcard .who b { color: var(--ink-900); font-family: var(--font-display); font-size: .95rem; display: block; }
.tcard .who span { color: var(--slate-400); font-size: .85rem; }
@media (max-width: 1000px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .testimonials { grid-template-columns: 1fr; } }

/* ============================================================
   QA FIXES — WCAG contrast (amber-on-white) + tap targets
   ============================================================ */
/* dark-amber for small text/links on LIGHT backgrounds (≥4.5:1) */
.eyebrow { color: #8a5a00; }
.section--dark .eyebrow.light, .page-hero--plain .eyebrow.light, .section--paper .eyebrow.light { color: #8a5a00; }
.scard__link, .icard__link, .card__link, .spotlight__type,
.sidebar__list a, .mega__all, .footer-col a:hover, .crumbs a:hover { color: #8a5a00; }
.scard:hover .scard__link, .icard:hover .icard__link { color: #6e4500; }
/* keep amber bright on genuinely dark surfaces (hero, statement, footer, cta) */
.hero .eyebrow.light, .statement .eyebrow.light { color: var(--amber-300); }

/* large display numbers on light → darker amber / ink (≥3:1 large-text) */
.stat__value { color: #a35f00; }
.rating-badge .num { color: #a35f00; }
.est-result__range { color: var(--amber) !important; }  /* on the DARK est-card → amber is high-contrast */

/* utility-bar social icons: enlarge tap target to ≥28px */
.utility-bar .u-social a { min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; }

/* skip link (keyboard a11y) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink-900); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0; font-family: var(--font-display); font-weight: 600; }
.skip-link:focus { left: 0; }

/* honeypot truly hidden */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* footer column headings switched h4→h3 — preserve styling */
.footer-col h3 { color: #fff; font-size: 1rem; margin-bottom: 18px; font-family: var(--font-display); font-weight: 600; }

/* ===== Instagram video feature (home) ===== */
.ig-feature { display: grid; grid-template-columns: 1fr 480px; gap: 56px; align-items: center; }
.ig-embed { width: 100%; }
.ig-embed .instagram-media { margin: 0 auto !important; min-width: 0 !important; }
.ig-embed__fallback { display: block; max-width: 480px; margin: 0 auto; background: #fff; border: 1px solid var(--line-dark); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.ig-embed__fallback img { width: 100%; display: block; }
.ig-embed__fallback .cap { display: flex; align-items: center; gap: 10px; padding: 16px 18px; font-family: var(--font-display); font-weight: 600; color: var(--ink-900); }
.ig-embed__fallback .cap svg { width: 22px; height: 22px; color: var(--amber-600); }
@media (max-width: 900px) { .ig-feature { grid-template-columns: 1fr; gap: 36px; } .ig-embed { max-width: 480px; margin-inline: auto; } }

/* ============================================================
   POST-AUDIT DESIGN FIXES (light-theme override conflicts)
   ============================================================ */
/* coverage marquee city names were invisible (dark-theme text on flipped-light section) */
.coverage-item { color: var(--ink-700); }
.coverage-item .dot { background: var(--amber); }
/* guarantee cards rendered DARK on the now-light section → make them light to match the page */
.section--dark .guarantee { background: #fff; border-color: var(--line-dark); }
.section--dark .guarantee h4 { color: var(--ink-900); }
.guarantee p { color: var(--ink-600); }
/* safety: industry chips stay light even if dropped into a flipped-dark section */
.section--dark .industry-chip { background: #fff; border-color: var(--line-dark); color: var(--ink-800); box-shadow: var(--shadow-sm); }
/* unify utility-bar hide with nav-collapse breakpoint (was 820, nav collapses at 860) */
@media (max-width: 860px) {
  :root { --util-h: 0px; }
  .utility-bar { display: none; }
}

/* ===== IG video card (reliable: poster + play → opens reel) ===== */
.ig-video { position: relative; display: block; max-width: 380px; margin: 0 auto; aspect-ratio: 9/16; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--ink-900); }
.ig-video img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ig-video:hover img { transform: scale(1.05); }
.ig-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,13,.12), rgba(8,10,13,.6)); }
.ig-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 78px; height: 78px; border-radius: 50%; background: var(--amber); color: var(--ink-900); display: grid; place-items: center; box-shadow: var(--shadow-amber); z-index: 2; transition: transform .25s var(--ease); }
.ig-video:hover .ig-video__play { transform: translate(-50%,-50%) scale(1.08); }
.ig-video__play svg { width: 30px; height: 30px; margin-left: 5px; }
.ig-video__badge { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .95rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.ig-video__badge svg { width: 20px; height: 20px; }

/* ============================================================
   KILL scroll-reveal hiding — it left sections blank while scrolling
   (content flashed empty until the fade finished). Make everything
   visible immediately; reliability over the entrance animation.
   ============================================================ */
.reveal, .js .reveal,
.js .reveal.from-left, .js .reveal.from-right, .js .reveal.zoom-in,
.reveal.d1, .reveal.d2, .reveal.d3 {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   FIX dark-spots: overlay was painting OVER text (content had no
   z-index, ::after overlay stacked on top). Lift content above.
   ============================================================ */
.statement__bg { z-index: 0; }
.statement::after { z-index: 1; }
.statement__inner { position: relative; z-index: 2; }
.cta-banner__inner { position: relative; z-index: 2; }
.cta-banner__bg { z-index: 0; }
.page-hero .container { position: relative; z-index: 2; }

/* ============================================================
   AUTO-PLAYING HERO SLIDESHOW (real project photos) — "video on top"
   ============================================================ */
.hero__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: heroSlideshow 24s infinite; will-change: opacity, transform;
}
.hero__bg img:nth-child(1) { animation-delay: 0s; }
.hero__bg img:nth-child(2) { animation-delay: 6s; }
.hero__bg img:nth-child(3) { animation-delay: 12s; }
.hero__bg img:nth-child(4) { animation-delay: 18s; }
@keyframes heroSlideshow {
  0%   { opacity: 0; transform: scale(1.08); }
  2%   { opacity: 1; }
  23%  { opacity: 1; }
  27%  { opacity: 0; transform: scale(1.13); }
  100% { opacity: 0; transform: scale(1.13); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; opacity: 0; transform: none; }
  .hero__bg img:first-child { opacity: 1; }
}

/* hero video (used when assets/video/hero.mp4 exists) */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* <picture> is layout-transparent so all existing `img` CSS still applies */
picture { display: contents; }

/* city-page neighborhood chips */
.hood-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.hood-chips span { background: var(--paper); border: 1px solid var(--line-dark); border-radius: var(--radius-pill); padding: 6px 14px; font-size: .88rem; color: var(--ink-700); font-weight: 500; font-family: var(--font-display); }

/* ============================================================
   CONTRAST: base `p{color:ink-700}` bled onto the DARK footer →
   footer paragraph was near-invisible. Force light footer text.
   ============================================================ */
.site-footer p, .footer-about p { color: var(--mist-200); }
.footer-bottom, .footer-bottom span, .footer-bottom a { color: var(--mist-200); }
.footer-contact .row, .footer-contact .row span, .footer-contact .row a { color: var(--mist-200); }
/* estimate band is light → its eyebrow needs the dark-amber, not amber-600 */
.estimate-band .eyebrow, .estimate-band .eyebrow.light { color: #8a5a00; }

/* inline reel video (shows when assets/video/hero.mp4 is supplied) */
.ig-vid { max-width: 380px; margin: 0 auto; }
.ig-vid__el { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--ink-900); display: block; }
/* footer .btn-primary text was overridden to slate-300 by `.footer-col a` → restore dark text on amber */
.site-footer .btn-primary { color: var(--ink-900); }
.site-footer .btn-ghost { color: #fff; }