/*
 * Smooth — 2026 dark theme layer for core pages.
 * Loaded after /css/style.css and each page's embedded <style>. Visual only:
 * no content, links or SEO tags are touched. Every rule is prefixed with `html`
 * so it wins over equal selectors in the older styles.
 * Matches the redesigned homepage (pure black, Inter type, rounded cards, pill buttons).
 */

/* ───────── Tokens (the existing site reads these everywhere, inline styles included) ───────── */
:root {
  --or: #ff6a13;
  --or2: #ff7b2c;
  --blk: #000000;
  --blk2: #0a0a0b;
  --blk3: #141416;
  --blk4: #1c1c1f;
  --blk5: #232326;
  --gray: #86868b;
  --gray2: #a1a1a6;
  --white: #f5f5f7;
  --off: #f5f5f7;
  --head: 'Inter Tight', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --bebas: var(--head);
  --body: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --sd-text-2: #a1a1a6;
  --sd-text-3: #6e6e73;
  --sd-line: rgba(255, 255, 255, 0.08);
  --sd-line-strong: rgba(255, 255, 255, 0.16);
  --sd-surface: #141416;
  --sd-glass: rgba(10, 10, 11, 0.72);
  --sd-grad: linear-gradient(120deg, #ff8a3d 0%, #ff6a13 45%, #ffb347 100%);
  /* Filled buttons: lightest shade of the brand hue with 4.5:1 contrast for white text. */
  --sd-fill: #cd4c00;
  --sd-fill-hover: #b84400;
  --sd-glow: rgba(255, 106, 19, 0.35);
  --sd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sd-r: 20px;
  --sd-r-lg: 28px;
  color-scheme: dark;
}

html body {
  background: #000;
  color: var(--white);
  font-family: var(--body);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html ::selection { background: var(--or); color: #fff; }
html :focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* ───────── Type ───────── */
html h1, html h2, html h3, html h4,
html .hero h1, html .hero-s h1, html .svc-page-hero h1,
html .sh h2, html .why-h2, html .sec-hd {
  font-family: var(--head);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
html h1, html .hero h1, html .hero-s h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.02; }
html .svc-page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.05; }
html h2, html .sh h2, html .why-h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.06; }
html h3 { letter-spacing: -0.02em; }
html h4 { letter-spacing: -0.01em; text-transform: none; }
/* Inline-styled display headings that used Bebas */
html [style*="var(--bebas)"] { font-weight: 700; letter-spacing: -0.03em !important; text-transform: none !important; }

/* Accent words in headings get the homepage gradient */
html h1 em, html h1 span[style*="var(--or)"], html h2 em, html h2 span[style*="var(--or)"], html .why-h2 em, html .svc-page-hero h1 span {
  background: var(--sd-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html h1 em { font-size: inherit; letter-spacing: inherit; display: inline; }

html .hero-sub, html .svc-page-hero .intro, html .sh p, html .why-p { color: var(--sd-text-2); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.6; }

html .eyebrow, html .why-eyebrow {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--or);
}
html .eyebrow::before, html .eyebrow::after { display: none; }

/* ───────── Top bar + header ───────── */
html .topbar {
  background: #000;
  border-bottom: 1px solid var(--sd-line);
  font-size: 0.75rem;
  letter-spacing: 0;
}
html .topbar a, html .topbar .tb-item { color: var(--sd-text-2); opacity: 1; }
html .topbar a:hover { color: var(--white); }

html header {
  background: var(--sd-glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--sd-line);
  box-shadow: none;
  transition: background-color 0.4s var(--sd-ease);
}
html header.sd-scrolled { background: rgba(0, 0, 0, 0.82); }
html .nav-links > a, html .nav-links .nav-group > a, html .nav-links button {
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}
html .nav-cta {
  border-radius: 999px !important;
  background: var(--sd-fill) !important;
  box-shadow: 0 10px 30px -10px var(--sd-glow);
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
html .nav-cta:hover { background: var(--sd-fill-hover) !important; }

html .nav-drop, html .nav-mega {
  background: rgba(14, 14, 16, 0.92);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--sd-line-strong);
  border-top: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-r);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
html .mega-col-hd { font-family: var(--body); letter-spacing: 0.12em; color: var(--or); }
html .mega-item, html .mega-parent { font-family: var(--body); text-transform: none; letter-spacing: -0.005em; border-radius: 10px; }

/* ───────── Hero ───────── */
html .hero, html .hero-s, html .svc-page-hero { background: #000; overflow: hidden; }
html .hero-grid-bg, html .hero-noise, html .hero-accent-line, html .hero-accent { display: none; }
html .hero-glow, html .svc-page-hero .hero-glow {
  background: radial-gradient(closest-side, rgba(255, 106, 19, 0.22), transparent 70%);
  width: 80vmax; height: 80vmax; inset: auto; right: -35vmax; top: -40vmax;
  filter: blur(20px);
}
html .hero-badge, html .sp-badge {
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--sd-line-strong);
  color: var(--or);
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0.12em;
}
html .hero-trust, html .trust-ribbon { color: var(--sd-text-2); }
html .ht { color: var(--sd-text-2); letter-spacing: 0.06em; font-weight: 500; }
html .trust-ribbon { background: #000; border-block: 1px solid var(--sd-line); }
html .breadcrumb { font-size: 0.8125rem; color: var(--sd-text-3); }
html .breadcrumb a { color: var(--sd-text-2); }

/* ───────── Buttons ───────── */
html .btn-or, html .btn-ghost, html .btn-dark, html .btn-line, html .btn-outline {
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 0.9375rem;
  transition: transform 0.35s var(--sd-ease), background-color 0.3s var(--sd-ease), box-shadow 0.35s var(--sd-ease), border-color 0.3s, color 0.3s;
}
html .btn-or { background: var(--sd-fill); border-color: var(--sd-fill); color: #fff; box-shadow: 0 10px 30px -10px var(--sd-glow); }
/* Inline-styled orange buttons/links with white text */
html a[style*="background:var(--or)"], html button[style*="background:var(--or)"] { background: var(--sd-fill) !important; }
html .mob-sticky-bar .sb-estimate { background: var(--sd-fill); }
html .btn-or:hover { background: var(--sd-fill-hover); border-color: var(--sd-fill-hover); transform: translateY(-1px); box-shadow: 0 16px 40px -10px var(--sd-glow); }
html .btn-or:active, html .btn-ghost:active, html .btn-dark:active { transform: scale(0.97); }
html .btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sd-line-strong);
  color: var(--white);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
html .btn-ghost:hover { border-color: var(--sd-text-3); color: var(--white); }
html .btn-dark { background: var(--white); color: #000; border-color: var(--white); }
html .btn-dark:hover { background: #fff; color: #000; }

/* ───────── Sections ───────── */
html .section { padding-block: clamp(80px, 10vw, 140px); }
/* Light "off-white" content sections → dark, with their dark-on-light text flipped */
html section[style*="background:var(--off)"] { background: var(--blk2) !important; }
html section[style*="background:var(--off)"] .dk { color: var(--white); }
html section[style*="background:var(--off)"] p.dk { color: var(--sd-text-2); }
html .bg-off, html .section.bg-off { background: var(--blk2) !important; color: var(--white); }
html .bg-off h2, html .bg-off h3, html .bg-off h4, html .bg-off .dk, html .svc-main h2 { color: var(--white); }
html .bg-off [style*="color:var(--blk2)"], html .bg-off [style*="color:var(--blk)"] { color: var(--white) !important; }
html .bg-off [style*="color:var(--gray)"], html .bg-off .svc-blist li, html .bg-off p { color: var(--sd-text-2) !important; }
html .bg-off [style*="color:var(--or)"] { color: var(--or) !important; }
html .bg-off [style*="background:rgba(232,99,26,.06)"] { background: rgba(255, 106, 19, 0.08) !important; border-radius: 16px !important; }
html .bg-off strong { color: var(--white); }
html .svc-layout { gap: clamp(32px, 5vw, 64px); }
html .ghost-link { border-radius: 999px; }
html .rb-n { font-family: var(--head); font-weight: 800; letter-spacing: -0.04em; }
html .tr-inner { color: var(--sd-text-2); letter-spacing: 0.06em; font-weight: 500; }
html .sec-hd { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
html .sec-hd::after { background: var(--sd-line); }

/* ───────── Cards (rounded surfaces + hairlines) ───────── */
html .ben-item, html .fq, html .svc, html .sidebar-cta, html .sp-cta-card, html .incentive-box,
html .related-links, html .sub-card, html .why-img-box, html .rg-card, html .rg-con, html .rg-diff,
html .svc-side > div, html .faq-list-sp .fq {
  background: var(--sd-surface);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-r);
  transition: border-color 0.4s var(--sd-ease), transform 0.5s var(--sd-ease);
}
html .ben-item { border-left: 1px solid var(--sd-line); padding: 22px 24px; }
html .ben-item h4 { font-family: var(--head); font-size: 1.0625rem; font-weight: 600; text-transform: none; letter-spacing: -0.015em; }
html .ben-item p { color: var(--sd-text-2); font-size: 0.9rem; }
html .ben-item:hover, html .svc:hover, html .sub-card:hover, html .rg-card:hover { border-color: var(--sd-line-strong); transform: translateY(-3px); }
html .svc-grid { gap: 16px; }
html .svc { padding: clamp(24px, 3vw, 36px); }
html .rg-diff { border-left: 1px solid var(--sd-line); }
html .rg-card { border-top: 1px solid var(--sd-line); }

html .sp-cta-card, html .sidebar-cta { padding: 28px; background: linear-gradient(160deg, rgba(255, 106, 19, 0.12), var(--sd-surface) 55%); }
html .sp-cta-card h4, html .sidebar-cta h4 { font-family: var(--head); text-transform: none; letter-spacing: -0.015em; font-size: 1.125rem; }

/* Process steps */
html .proc-step { border-bottom-color: var(--sd-line); padding: 22px 0; }
html .proc-step::before { font-family: var(--head); font-weight: 700; color: var(--or); opacity: 1; font-variant-numeric: tabular-nums; }
html .proc-step h4 { font-family: var(--head); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; }
html .proc-step p { color: var(--sd-text-2); font-size: 0.9375rem; }

/* FAQ */
html .fq { border-radius: 16px; margin-bottom: 10px; }
html .fq-q { font-family: var(--body); font-weight: 600; letter-spacing: -0.015em; font-size: 1rem; padding: 20px 22px; }
html .fq-a { color: var(--sd-text-2); }
html .fq-i { color: var(--or); }
html .rg-faq details { border-bottom-color: var(--sd-line); }

/* Service-area chips */
html .tl { border-radius: 12px; border-color: var(--sd-line); background: var(--blk2); transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
html .tl:hover { border-color: var(--or); background: rgba(255, 106, 19, 0.08); }
html .sbh { border-bottom: 1px solid var(--sd-line); }
html .sbh h3 { font-family: var(--head); letter-spacing: -0.02em; }
html .sbg { border-radius: 999px; }

/* Large inline panels on service-areas / estimate pages */
html [style*="background:var(--blk3)"], html [style*="background:var(--blk2)"][style*="border-radius"] { border-radius: var(--sd-r) !important; }
html [style*="border-left:4px solid var(--or)"] { border-left-width: 1px !important; }

/* ───────── Closing band → dark glow panel like the homepage CTA ───────── */
html .ms-band {
  background: radial-gradient(60% 120% at 50% 120%, rgba(255, 106, 19, 0.35), transparent 70%), #000;
  border-top: 1px solid var(--sd-line);
  padding-block: clamp(80px, 10vw, 128px);
}
html .ms-band::before { display: none; }
html .ms-band h2 { color: var(--white); }
html .ms-band p { color: var(--sd-text-2); }

/* ───────── Footer ───────── */
html footer, html #site-footer { background: #000; border-top: 1px solid var(--sd-line); }
html .fc h4 { font-family: var(--body); letter-spacing: 0.12em; color: var(--white); font-weight: 600; }
html .fc a { color: var(--sd-text-2); font-size: 0.875rem; }
html .fc a:hover { color: var(--white); }
html .fbot { border-top-color: var(--sd-line); color: var(--gray); }
html .fbot span, html .fb p { color: var(--sd-text-2); }

/* ───────── Mobile ───────── */
html .mob-menu {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}
html .mob-link, html .mob-acc-trigger { font-family: var(--head); font-weight: 600; letter-spacing: -0.02em; text-transform: none; }
html .mob-sub-link { font-family: var(--body); text-transform: none; letter-spacing: -0.005em; }

@media (max-width: 900px) {
  html .mob-sticky-bar {
    left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    width: auto; gap: 8px; padding: 8px;
    border-radius: 999px; overflow: hidden;
    background: var(--sd-glass);
    border: 1px solid var(--sd-line-strong);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  }
  html .mob-sticky-bar .sb-call, html .mob-sticky-bar .sb-estimate {
    border-radius: 999px; font-family: var(--body); font-weight: 600; text-transform: none; letter-spacing: -0.01em;
  }
  html .mob-sticky-bar .sb-call { border: 1px solid var(--sd-line-strong); background: transparent; }
  html .ben-list { grid-template-columns: 1fr; }
}

/* ───────── Scroll progress + reveal (driven by /js/smooth-dark-v1.js) ───────── */
.sd-progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 9999;
  background: var(--sd-grad); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
.sd-reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); }
.sd-reveal.sd-in {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.9s var(--sd-ease), transform 0.9s var(--sd-ease), filter 0.9s var(--sd-ease);
  transition-delay: var(--sd-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .sd-reveal { opacity: 1; transform: none; filter: none; }
  .sd-progress { display: none; }
}