/* ==========================================================================
   Template C — "Bold". Kinetic, energetic, motion-led. Dark UI, condensed
   uppercase headlines (Barlow Condensed), electric cyan + hot orange accents,
   sharp edges, glowing hover states. For a visitor who wants to FEEL the
   transformation. All motion is disabled under prefers-reduced-motion.
   Loaded on EVERY page (scoped by body.theme-bold) — the first block is the
   site-wide skin (its own header/footer/card structure too), the rest is
   homepage-only sections.
   ========================================================================== */

/* ---------- Site-wide skin (dark) ---------- */
body.theme-bold {
  --font-heading: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, Segoe UI, sans-serif;

  --bg:            #0B1020;
  --surface:       #151C33;
  --surface-alt:   #10162B;
  --text:          #E6EAF5;
  --heading:       #FFFFFF;
  --muted:         #9AA3BF;
  --line:          #26304F;
  --link:          #22D3EE;
  --topbar-bg:     #060912;
  --topbar-text:   #C9D1E6;
  --topbar-accent: #22D3EE;
  --nav-bg:        rgba(11, 16, 32, .94);
  --nav-text:      #E6EAF5;
  --dark-bg:       #0F1A3A;
  --dark-text:     #FFFFFF;
  --dark-muted:    #9AA3BF;
  --footer-bg:     #060912;
  --footer-text:   #9AA3BF;
  --footer-heading:#FFFFFF;
  --footer-accent: #22D3EE;
  --action:        #FF7A1A;   /* hot orange; buttons use DARK text (7.3:1) — white would fail */
  --action-dark:   #FF8F3F;   /* hover goes lighter on a dark UI */
  --btn-primary-text: #0B1020;
  --action-tint:   #2A1A10;
  --sticky-call:   #151C33;
  --sticky-text:   #1D2745;
  --clean-cyan:    #22D3EE;
  --heading-weight: 700;
  --heading-transform: uppercase;
  --heading-tracking: .02em;
  --radius: 6px;
  --btn-radius: 6px;
  --shadow: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
.theme-bold h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1.05; }
.theme-bold h2 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); }
.theme-bold h3 { font-size: clamp(1.25rem, 3vw, 1.55rem); letter-spacing: .03em; }
/* Header — centered stack: phone | logo chip | CTA, then a full-width uppercase nav row */
.theme-bold .site-header { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; border-bottom: 1px solid var(--line); }
.bold-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 16px 8px; }
.bold-phone { justify-self: start; color: var(--text); font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; display: none; }
.bold-phone-label { display: block; font-family: var(--font-body); font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--clean-cyan); font-weight: 600; }
.bold-phone:hover { color: var(--clean-cyan); text-decoration: none; }
@media (min-width: 700px) { .bold-phone { display: block; } .bold-top { grid-template-columns: 1fr auto 1fr; } }
@media (max-width: 699px) { .bold-top { grid-template-columns: auto 1fr; } .brand-bold { order: -1; } }
.brand-bold { justify-self: center; background: #fff; border-radius: 8px; padding: 6px 12px; display: block; }
.brand-bold img { width: 96px; height: auto; }
.bold-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.bold-actions .btn-primary { display: none; padding: 10px 18px; }
@media (min-width: 700px) { .bold-actions .btn-primary { display: inline-flex; } }
.bold-nav { display: none; justify-content: center; gap: 0; border-top: 1px solid var(--line); }
.bold-nav a { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .12em; font-size: 1rem; font-weight: 600; color: var(--text); padding: 12px 20px; position: relative; }
.bold-nav a::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; background: var(--clean-cyan); transform: scaleX(0); transition: transform .2s ease; }
.bold-nav a:hover { text-decoration: none; color: #fff; }
.bold-nav a:hover::after { transform: scaleX(1); }
@media (min-width: 900px) { .bold-nav { display: flex; } }
.theme-bold .main-nav.open { display: flex; background: var(--surface); border-top: 1px solid var(--line); }
.theme-bold .main-nav.open a { border-bottom-color: var(--line); }

/* Cards — horizontal rows (photo left, text right) instead of a grid of tiles */
@media (min-width: 700px) {
  .theme-bold .card-grid-3:has(.service-card) { grid-template-columns: 1fr; gap: 16px; }
  .theme-bold .service-card { flex-direction: row; align-items: stretch; }
  .theme-bold .service-card-media { flex: 0 0 42%; }
  .theme-bold .service-card-media .ba-slider, .theme-bold .service-card-media .ba-figure { height: 100%; border-radius: 0; }
  .theme-bold .service-card-media .ba-slider { aspect-ratio: auto; min-height: 220px; }
  .theme-bold .service-card-body { padding: 26px 28px; justify-content: center; }
  .theme-bold .service-card h3 { font-size: 1.6rem; }
}
.theme-bold .service-card-media-soon { min-height: 220px; }

/* Footer — giant phone number left, compact columns right */
.bold-footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 8px; }
@media (min-width: 900px) { .bold-footer-grid { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.bold-footer-phone { display: block; font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.6rem); color: #fff; line-height: 1; margin: 6px 0 10px; letter-spacing: .02em; }
.bold-footer-phone:hover { color: var(--clean-cyan); text-decoration: none; }
.bold-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.theme-bold .eyebrow { color: var(--clean-cyan); letter-spacing: .14em; font-size: .74rem; }
.theme-bold .eyebrow::before { content: '▶ '; font-size: .7em; }
.theme-bold .btn { text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-heading); font-size: 1.05rem; }
.theme-bold .btn-lg { font-size: 1.15rem; }
.theme-bold .btn-primary { box-shadow: 0 0 0 0 rgba(255,122,26,0), 0 8px 24px rgba(255, 122, 26, .28); }
.theme-bold .btn-primary:hover { box-shadow: 0 0 24px rgba(255, 122, 26, .45); }
.theme-bold .btn-outline { border-color: var(--clean-cyan); color: var(--clean-cyan); }
.theme-bold .btn-outline:hover { background: var(--clean-cyan); color: var(--bg); }
.theme-bold .service-card { border: 1px solid var(--line); }
.theme-bold .service-card:hover { transform: translateY(-6px) scale(1.015); border-color: var(--clean-cyan); box-shadow: 0 0 0 1px var(--clean-cyan), var(--shadow-lg); }
.theme-bold .service-card-price { color: var(--action); font-size: 1.2rem; }
.theme-bold .review-card { border: 1px solid var(--line); }
.theme-bold .review-stars { color: var(--action); }
.theme-bold .trust-bar { background: var(--surface-alt); border-color: var(--line); }
.theme-bold .trust-bar-inner { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .08em; }
.theme-bold .gallery-filters button { border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-heading); font-size: .9rem; }
.theme-bold .gallery-filters button.active { background: var(--clean-cyan); border-color: var(--clean-cyan); color: var(--bg); }
.theme-bold .ba-slider { box-shadow: var(--shadow); border: 1px solid var(--line); }
.theme-bold .ba-divider { background: var(--clean-cyan); }
.theme-bold .ba-handle { background: var(--action); color: var(--bg); }
.theme-bold .ba-caption { color: var(--muted); }
.theme-bold .quote-widget { border: 1px solid var(--line); border-radius: 8px; }
.theme-bold .quote-tile { border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-heading); font-size: 1rem; }
.theme-bold .quote-tile:hover, .theme-bold .quote-tile.selected { border-color: var(--action); background: var(--action-tint); color: #fff; }
.theme-bold .quote-progress span.active { background: var(--clean-cyan); }
.theme-bold .quote-result .amount { font-size: 3rem; }
.theme-bold .form-field input, .theme-bold .form-field select, .theme-bold .form-field textarea { border-radius: 6px; border-color: var(--line); }
.theme-bold .form-field input:focus, .theme-bold .form-field select:focus, .theme-bold .form-field textarea:focus { outline-color: var(--clean-cyan); border-color: var(--clean-cyan); }
.theme-bold .form-success { background: #12301F; border-color: #2E9E5B; color: #BDEBCF; }
.theme-bold .form-error { background: #3A1614; border-color: #D9534F; color: #F5C2BF; }
.theme-bold .badge-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.theme-bold .badge-list li a:hover { color: var(--clean-cyan); }
.theme-bold .final-cta { background: linear-gradient(135deg, #0F1A3A 0%, #16205E 60%, #0F1A3A 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.theme-bold .final-cta .btn-outline { border-color: var(--clean-cyan); color: var(--clean-cyan); }
.theme-bold .final-cta .btn-outline:hover { background: var(--clean-cyan); color: var(--bg); }
.theme-bold .site-footer { border-top: 1px solid var(--line); }
.theme-bold .footer-col h3 { letter-spacing: .1em; }
.theme-bold .footer-about img { background: #fff; border-radius: 6px; padding: 6px 10px; }
.theme-bold .price-table th { background: var(--surface); }
.theme-bold .price-table th, .theme-bold .price-table td { border-color: var(--line); }
.theme-bold .breadcrumbs a { color: var(--muted); }
.theme-bold .faq-question::after { color: var(--clean-cyan); }
.theme-bold .section-alt { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.theme-bold .sticky-quote { color: var(--bg); }
.theme-bold .mobile-sticky-bar { border-top: 1px solid var(--line); }

/* ---------- Reveal-on-scroll (snappier than Casual's) ---------- */
.theme-bold [data-reveal] { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.theme-bold [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .theme-bold [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hero: full-bleed, kinetic headline, drifting gradient ---------- */
.hero-dynamic {
  position: relative; overflow: hidden; color: #fff; padding: 52px 0 0;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, #16205E 100%);
  background-size: 200% 200%; animation: heroDrift 14s ease-in-out infinite;
}
@keyframes heroDrift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-dynamic-text { position: relative; z-index: 2; text-align: center; max-width: 760px; margin: 0 auto; padding: 0 16px 30px; }
.hero-dynamic-text .eyebrow { color: var(--clean-cyan); }
.hero-dynamic-text h1 { color: #fff; font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
.hero-dynamic-text h1 .word { display: inline-block; opacity: 0; transform: translateY(.5em); animation: wordUp .6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes wordUp { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hero-dynamic-text h1 .word { opacity: 1; transform: none; animation: none; } .hero-dynamic { animation: none; } }
.hero-dynamic-text p.lead { color: var(--muted); margin: 0 auto 22px; font-size: 1.12rem; }
.hero-dynamic-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.hero-dynamic-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding-bottom: 6px; }
@media (min-width: 700px) { .hero-dynamic-grid { grid-template-columns: repeat(4, 1fr); } }
.hero-dynamic-cell { overflow: hidden; aspect-ratio: 1/1; transition: transform .4s ease; will-change: transform; }
.hero-dynamic-cell:hover { transform: scale(1.04); }
.hero-dynamic-cell .ba-figure { margin: 0; height: 100%; }
.hero-dynamic-cell .ba-slider { border-radius: 0; box-shadow: none; aspect-ratio: 1/1; height: 100%; transform: translateY(var(--py, 0px)); }
@media (prefers-reduced-motion: reduce) { .hero-dynamic-cell .ba-slider { transform: none; } .hero-dynamic-cell:hover { transform: none; } }
.hero-dynamic-cell .ba-label { font-size: .62rem; padding: 3px 8px; }

/* ---------- Animated stat counters ---------- */
.counter-strip { background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.counter-strip-inner { display: grid; grid-template-columns: repeat(2, 1fr); max-width: var(--max-width); margin: 0 auto; }
@media (min-width: 700px) { .counter-strip-inner { grid-template-columns: repeat(4, 1fr); } }
.counter-cell { padding: 30px 12px; text-align: center; }
.counter-cell .num { display: block; font-family: var(--font-heading); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 700; color: var(--clean-cyan); line-height: 1; }
.counter-cell .label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.62); margin-top: 4px; }

/* ---------- Scroll-reveal before/after showcase ---------- */
.reveal-showcase { position: relative; }
.reveal-showcase .ba-slider { cursor: default; }

/* ---------- Horizontal auto-scrolling gallery strip ---------- */
.scroll-strip-wrap { overflow: hidden; padding: 8px 0; background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.scroll-strip { display: flex; gap: 12px; width: max-content; animation: scrollStrip 38s linear infinite; }
.scroll-strip:hover { animation-play-state: paused; }
.scroll-strip img { width: 220px; height: 150px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); flex-shrink: 0; }
@keyframes scrollStrip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .scroll-strip { animation: none; overflow-x: auto; } }