/* ============================================================
   123 GLASS COMPANY — GLOBAL STYLESHEET
   Version: 1.0
   Source files:
     homepage-layout-v7.html
     about-us-interior-v7.html
     windshield-replacement-v1.html
     contact-v1.html
     faq-v1.html
     services-hub-v1.html
     blog-page-v1.html
     blog-hub-v1.html
     privacy-policy-v1.html
     sitemap-v1.html
============================================================ */


/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text: #111111;
  --color-text-2: #2A2A2A;
  --color-text-muted: #555555;
  --color-brand-dark: #0C2D4C;
  --color-brand-mid: #175590;
  --color-brand-primary: #1C6AB2;
  --color-body-bg: #f0f0f0;
  --dark-1: hsl(204, 25%, 22%);
  --dark-2: #081d33;
  --dark-3: #060f18;
  --color-light-gray: #b4b4b4;
  --color-med-gray: #969696;
  --color-dark-gray: #696969;
  --color-deep-gray: #5a5a5a;
}


/* ============================================================
   BASE
============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: clip; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0; line-height: 1.55; color: var(--color-text);
  background: var(--color-body-bg); max-width: 100%; overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-brand-primary); text-decoration-color: transparent; text-underline-offset: 3px; }
a:hover { color: var(--color-brand-mid); text-decoration-color: var(--color-brand-mid); }
h1, h2, h3 { margin: 0 0 0.5em; line-height: 1.05; color: var(--color-brand-dark); }


/* ============================================================
   SKIP LINK + STRIPES
============================================================ */
.skip-link {
  position: absolute; left: 0; top: 0; transform: translateY(-40px);
  padding: 8px; background: var(--color-white); color: var(--color-black);
  z-index: 2000; text-decoration: none; font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }

.top-stripes {
  height: 36px;
  background: linear-gradient(to bottom,
    var(--color-brand-dark) 0 12px,
    var(--color-brand-mid) 12px 24px,
    var(--color-brand-primary) 24px 36px);
}
.bottom-stripes {
  height: 18px;
  background: linear-gradient(to bottom,
    var(--color-brand-dark) 0 6px,
    var(--color-brand-mid) 6px 12px,
    var(--color-brand-primary) 12px 18px);
}


/* ============================================================
   NAV — .nav-ultra
============================================================ */
.nav-ultra {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(12,45,76,0.10);
  box-shadow: 0 10px 28px rgba(12,45,76,0.06);
}
.nav-ultra-inner {
  max-width: 1240px; margin: 0 auto; padding: 10px 20px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px;
}
.nav-logo img { display: block; width: 100%; max-width: 320px; height: auto; }
.nav-ultra-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; }
.nav-ultra-links a {
  position: relative; padding: 6px 0; color: var(--color-brand-dark);
  text-decoration: none; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.01em;
}
.nav-ultra-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--color-brand-mid), var(--color-brand-primary));
  transform: scaleX(0); transform-origin: center; transition: transform 0.18s ease;
}
.nav-ultra-links a:hover::after,
.nav-ultra-links a:focus-visible::after,
.nav-ultra-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-ultra-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 16px; border-radius: 8px; text-decoration: none;
  font-weight: 800; font-size: 0.88rem; color: var(--color-white);
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-mid));
  box-shadow: 0 6px 18px rgba(12,45,76,0.20);
  transition: transform 0.18s ease, box-shadow 0.18s ease; white-space: nowrap;
}
.nav-ultra-cta:hover { color: var(--color-white); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(12,45,76,0.28); }
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: 8px; -webkit-tap-highlight-color: transparent;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px; background: var(--color-brand-dark);
  border-radius: 2px; transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   SHARED UTILITIES
============================================================ */
.section-kicker {
  margin: 0 0 12px; font-size: 0.80rem; font-weight: 900;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-brand-primary);
}
.section-kicker-light { color: #c2d9ff; }

/* Buttons — font-size and font-family set explicitly so <button> elements
   match adjacent <a> elements in all browsers */
.btn-ultra {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 12px 22px; border-radius: 11px;
  text-decoration: none; font-weight: 900; letter-spacing: 0.01em;
  font-size: 1rem; font-family: inherit; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn-ultra-solid { background: var(--color-white); color: var(--color-brand-dark); box-shadow: 0 16px 40px rgba(0,0,0,0.22); }
.btn-ultra-solid:hover { color: var(--color-brand-dark); transform: translateY(-1px); box-shadow: 0 22px 46px rgba(0,0,0,0.26); }
.btn-ultra-ghost { background: rgba(255,255,255,0.08); color: var(--color-white); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(4px); }
.btn-ultra-ghost:hover { color: var(--color-white); background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.btn-ultra-white { background: var(--color-white); color: var(--color-brand-dark); box-shadow: 0 16px 34px rgba(0,0,0,0.22); }
.btn-ultra-white:hover { color: var(--color-brand-dark); transform: translateY(-1px); }
.btn-ultra-darkghost { background: rgba(255,255,255,0.08); color: var(--color-white); border: 1px solid rgba(255,255,255,0.24); }
.btn-ultra-darkghost:hover { color: var(--color-white); background: rgba(255,255,255,0.14); transform: translateY(-1px); }


/* ============================================================
   HERO — CINEMATIC (Homepage only)
   .hero-cinematic and all sub-classes
============================================================ */
.hero-cinematic {
  position: relative; overflow: hidden; min-height: 780px;
  background: #071722; isolation: isolate;
}
.hero-cinematic-bg {
  position: absolute; inset: -2%;
  background: url('https://123glasscompany.com/images/auto-glass-omaha-shop-exterior-optimized.jpg') center/cover no-repeat;
  transform: scale(1.06);
  filter: brightness(0.42) contrast(1.08) saturate(0.95);
  will-change: transform;
}
.hero-cinematic-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(110deg, rgba(7,18,28,0.96) 0%, rgba(12,45,76,0.92) 36%, rgba(12,45,76,0.50) 68%, rgba(12,45,76,0.16) 100%),
    radial-gradient(circle at 78% 18%, rgba(109,147,222,0.28), transparent 20%),
    radial-gradient(circle at 70% 70%, rgba(28,106,178,0.22), transparent 24%);
}
.hero-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 78%);
  pointer-events: none;
}
.hero-cinematic-inner {
  position: relative; z-index: 1; max-width: 1240px; margin: 0 auto;
  min-height: 780px; padding: 92px 20px 96px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 380px);
  gap: 42px; align-items: end;
}
.hero-cinematic-inner--no-stats { align-items: start; }
.hero-main { max-width: 780px; color: var(--color-white); }
.hero-tag {
  margin: 0 0 16px; font-size: 0.92rem; font-weight: 900;
  letter-spacing: 0.12em; text-transform: uppercase; color: #d8e7ff;
}
.hero-main h1 {
  margin: 0 0 16px; color: var(--color-white);
  font-size: clamp(3.2rem, 6vw, 6rem);
  line-height: 0.94; letter-spacing: -0.04em; text-wrap: balance;
}
.hero-main h1 span { color: #a8ccff; text-shadow: 0 0 24px rgba(109,147,222,0.18); }
.hero-description {
  margin: 0 0 28px; max-width: 680px;
  font-size: clamp(1.08rem, 1.85vw, 1.36rem);
  line-height: 1.58; color: rgba(255,255,255,0.92);
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero-stat-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; max-width: 920px;
}
.hero-stat {
  padding: 16px; border-radius: 15px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(7px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 24px rgba(0,0,0,0.12);
}
.hero-stat strong { display: block; margin-bottom: 5px; color: var(--color-white); font-size: 1rem; line-height: 1.2; }
.hero-stat span { display: block; color: rgba(255,255,255,0.80); font-size: 0.86rem; line-height: 1.45; }

/* Trust card — hero glass card */
.hero-glass-card { position: relative; align-self: center; }
.hero-glass-shine {
  position: absolute; inset: 12px 10px -18px 10px;
  background: radial-gradient(circle at center, rgba(109,147,222,0.38), transparent 68%);
  filter: blur(30px); pointer-events: none;
}
.hero-glass-card-inner {
  position: relative; padding: 26px 24px 22px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.07));
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: 0 24px 52px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.10);
  color: var(--color-white); overflow: hidden;
}
.hero-glass-card-inner::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 120%; height: 40%;
  background: linear-gradient(110deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
  transform: translate(-20%, -30%) rotate(-8deg); pointer-events: none;
}
.glass-stars-row { position: relative; display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.glass-stars { font-size: 1.5rem; letter-spacing: 0.08em; color: #ffd35a; text-shadow: 0 1px 4px rgba(0,0,0,0.30); line-height: 1; }
.glass-rating-num { font-size: 1rem; font-weight: 900; color: rgba(255,255,255,0.9); }
.glass-rating-source { font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.glass-rating-date { position: relative; display: block; font-size: 0.75rem; color: rgba(255,255,255,0.44); margin-bottom: 18px; letter-spacing: 0.02em; }
.glass-divider { position: relative; height: 1px; margin: 0 0 18px; background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.22), rgba(255,255,255,0.03)); }
.glass-trust-list { position: relative; list-style: none; margin: 0; padding: 0; }
.glass-trust-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 0.93rem; color: rgba(255,255,255,0.92); line-height: 1.4;
}
.glass-trust-list li:last-child { border-bottom: none; padding-bottom: 0; }
.glass-trust-icon {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; background: rgba(28,106,178,0.70);
  border: 1px solid rgba(109,147,222,0.50);
  display: flex; align-items: center; justify-content: center;
}
.glass-trust-icon svg { width: 10px; height: 10px; fill: none; stroke: #a8ccff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.glass-trust-list li strong { display: block; font-weight: 800; color: var(--color-white); font-size: 0.92rem; }
.glass-trust-list li span { display: block; font-size: 0.80rem; color: rgba(255,255,255,0.58); margin-top: 1px; }

.hero-angle-cut {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 110px;
  background: var(--color-white);
  clip-path: polygon(0 52%, 100% 0, 100% 100%, 0 100%);
}


/* ============================================================
   HERO — INTERIOR (.hero-interior and all sub-classes)
   Used on: service pages, about, contact, FAQ, blog, hub pages
============================================================ */
.hero-interior { position: relative; overflow: hidden; background: var(--dark-1); isolation: isolate; }
.hero-interior-bg {
  position: absolute; inset: -2%;
  background: url('https://123glasscompany.com/images/auto-glass-omaha-shop-exterior-optimized.jpg') center/cover no-repeat;
  transform: scale(1.06); filter: brightness(0.42) contrast(1.08) saturate(0.95); will-change: transform;
}
 .hero-interior-overlay {
      position: absolute; inset: 0;
      background:
        linear-gradient(110deg, rgba(7,18,28,0.96) 0%, rgba(12,45,76,0.92) 36%, rgba(12,45,76,0.50) 68%, rgba(12,45,76,0.16) 100%),
        radial-gradient(circle at 78% 18%, rgba(109,147,222,0.28), transparent 20%),
        radial-gradient(circle at 70% 70%, rgba(28,106,178,0.22), transparent 24%);
    }
    .hero-interior-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 78%);
      pointer-events: none;
    }
.hero-interior-inner {
  position: relative; z-index: 1; max-width: 1240px; margin: 0 auto;
  padding: 72px 20px 108px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px;
}
.hero-interior-content { max-width: 780px; }
.hero-interior-kicker {
  margin: 0 0 14px; font-size: 0.84rem; font-weight: 900;
  letter-spacing: 0.15em; text-transform: uppercase; color: #c2d9ff;
}
.hero-interior h1 {
  margin: 0 0 14px; color: var(--color-white);
  font-size: clamp(2.3rem, 4.5vw, 3.9rem); line-height: 0.97; letter-spacing: -0.03em; text-wrap: balance;
}
.hero-interior h1 span { color: #a8ccff; }
.hero-interior-desc {
  margin: 0 0 28px; max-width: 560px;
  font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.58; color: rgba(255,255,255,0.82);
}
.hero-interior-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-interior-angle {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 110px;
  background: var(--color-white);
  clip-path: polygon(0 52%, 100% 0, 100% 100%, 0 100%);
}


/* ============================================================
   HERO — TITLE BAR (.hero-title-bar and sub-classes)
   Tier 4: FAQ and reference pages. Minimal, no background image.
============================================================ */
.hero-title-bar {
  position: relative;
  background: var(--dark-1);
  overflow: hidden;
}
.hero-title-bar::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 18% 60%, rgba(28,106,178,0.13), transparent 42%),
    radial-gradient(ellipse at 82% 40%, rgba(12,45,76,0.22), transparent 40%);
  pointer-events: none;
}
.hero-title-bar::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.030) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 90%);
  pointer-events: none;
}
.hero-title-bar-inner {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  padding: 48px 20px 140px;
}
.hero-title-bar-kicker {
  margin: 0 0 12px; font-size: 0.80rem; font-weight: 900;
  letter-spacing: 0.15em; text-transform: uppercase; color: #c2d9ff;
}
.hero-title-bar h1 {
  margin: 0 0 12px; color: var(--color-white);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.0; letter-spacing: -0.03em;
}
.hero-title-bar-desc {
  margin: 0; max-width: 540px;
  font-size: clamp(1rem, 1.4vw, 1.10rem); line-height: 1.58;
  color: rgba(255,255,255,0.76);
}
.hero-title-bar-angle {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 110px;
  background: var(--color-white);
  clip-path: polygon(0 52%, 100% 0, 100% 100%, 0 100%);
}


/* ============================================================
   VELOCITY BAND
============================================================ */
.velocity-band {
  position: relative; margin-top: -1px;
  background: linear-gradient(90deg, var(--color-brand-dark), var(--color-brand-mid), var(--color-brand-primary));
}
.velocity-band-inner { max-width: 1240px; margin: 0 auto; padding: 14px 20px; }
.velocity-band p { margin: 0; color: var(--color-white); font-weight: 900; letter-spacing: 0.08em; font-size: 1.05rem; }


/* ============================================================
   HOMEPAGE — INTRO SECTION (.intro-lux)
============================================================ */
.intro-lux { background: linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%); }
.intro-lux-inner {
  max-width: 1240px; margin: 0 auto; padding: 88px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px; align-items: center;
}
.intro-copy h2 { margin: 0 0 20px; font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.04; letter-spacing: -0.02em; }
.intro-copy p { margin: 0; font-size: 1.1rem; line-height: 1.72; color: var(--color-text-2); }
.intro-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.intro-pillar {
  display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border-radius: 16px;
  background: var(--color-white); border: 1px solid #e2eaf4;
  box-shadow: 0 8px 24px rgba(12,45,76,0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.intro-pillar:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(12,45,76,0.11); }
.intro-pillar-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand-primary));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.intro-pillar-icon svg { width: 20px; height: 20px; fill: none; stroke: #a8ccff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intro-pillar strong { display: block; font-size: 0.97rem; font-weight: 900; color: var(--color-brand-dark); line-height: 1.3; }
.intro-pillar span { display: block; font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.5; }


/* ============================================================
   HOMEPAGE — SERVICE DECK (.service-deck)
============================================================ */
.service-deck {
  position: relative; background: #081d33; color: var(--color-white);
  padding: 72px 20px 168px; overflow: hidden;
}
.service-deck::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 12%, rgba(28,106,178,0.16), transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(109,147,222,0.14), transparent 24%);
  pointer-events: none;
}
.service-deck-head {
  position: relative; max-width: 1240px; margin: 0 auto 36px;
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.service-deck-head h2 { margin: 0; color: var(--color-white); font-size: clamp(2.1rem, 3.3vw, 3.2rem); line-height: 1.02; }
.service-deck-all { font-size: 0.92rem; font-weight: 800; color: #8eb9ff; text-decoration: none; letter-spacing: 0.04em; white-space: nowrap; }
.service-deck-all:hover { color: #b8d4ff; }
.service-deck-grid {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.service-deck-row2 {
  position: relative; max-width: 840px; margin: 22px auto 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
}
.service-deck-angle-cut {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 110px;
  background: var(--color-white);
  clip-path: polygon(0 0, 100% 52%, 100% 100%, 0 100%);
}


/* ============================================================
   SERVICE PANEL — .service-panel (shared: homepage deck + hub + about)
============================================================ */
.service-panel {
  display: block; padding: 28px 24px 24px; border-radius: 20px;
  text-decoration: none; color: var(--color-white);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 38px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.service-panel:hover {
  color: var(--color-white); transform: translateY(-5px);
  border-color: rgba(109,147,222,0.34);
  box-shadow: 0 26px 46px rgba(0,0,0,0.28), 0 0 0 1px rgba(109,147,222,0.14) inset;
}
.service-index { display: block; margin-bottom: 14px; font-size: 0.88rem; font-weight: 900; letter-spacing: 0.14em; color: #8eb9ff; }
.service-panel h3 { margin: 0 0 10px; color: var(--color-white); font-size: 1.36rem; }
.service-panel p { margin: 0 0 14px; color: rgba(255,255,255,0.80); line-height: 1.62; font-size: 0.97rem; }
/* Arrow variant used on services hub cards */
.service-panel-arrow { display: block; font-size: 0.84rem; font-weight: 900; color: #8eb9ff; letter-spacing: 0.04em; margin-top: auto; }
.service-panel:hover .service-panel-arrow { color: #b8d4ff; }


/* ============================================================
   HOMEPAGE — SHOP PHOTO SECTION (.proof-cascade)
============================================================ */
.proof-cascade { background: var(--color-white); }
.proof-cascade-inner {
  max-width: 1240px; margin: 0 auto; padding: 80px 20px;
  display: grid; grid-template-columns: minmax(330px, 0.95fr) minmax(0, 1.05fr);
  gap: 52px; align-items: center;
}
.proof-photo { position: relative; }
.proof-photo img {
  position: relative; z-index: 1; width: 100%; height: auto;
  border-radius: 18px; box-shadow: 0 26px 52px rgba(12,45,76,0.18);
}
.photo-frame-accent {
  position: absolute; right: -18px; bottom: -18px;
  width: 70%; height: 70%; border-radius: 22px;
  background: linear-gradient(135deg, rgba(12,45,76,0.12), rgba(28,106,178,0.20));
}
.proof-content h2 { margin: 0 0 16px; font-size: clamp(2rem, 3.2vw, 3.1rem); line-height: 1.02; }
.proof-content > p { margin: 0 0 28px; max-width: 650px; font-size: 1.08rem; line-height: 1.66; color: var(--color-text-2); }
.proof-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.proof-chip {
  padding: 18px 16px; border-radius: 14px;
  background: #f6f9fd; border-left: 4px solid var(--color-brand-primary);
  box-shadow: 0 8px 20px rgba(12,45,76,0.07);
}
.proof-chip strong { display: block; font-weight: 900; font-size: 1.05rem; color: var(--color-brand-dark); margin-bottom: 3px; }
.proof-chip span { display: block; font-size: 0.86rem; color: var(--color-text-muted); line-height: 1.4; }


/* ============================================================
   HOMEPAGE — TESTIMONIALS (.reviews-section)
============================================================ */
.reviews-section {
  position: relative; background: #060f18;
  padding: 88px 20px 96px; overflow: hidden;
}
.reviews-section::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(28,106,178,0.18), transparent 38%),
    radial-gradient(ellipse at 80% 20%, rgba(109,147,222,0.12), transparent 30%),
    radial-gradient(ellipse at 60% 90%, rgba(12,45,76,0.40), transparent 35%);
  pointer-events: none;
}
.reviews-section::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0.6) 80%, transparent);
  pointer-events: none;
}
.reviews-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.reviews-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 52px;
}
.reviews-header h2 { margin: 0; color: var(--color-white); font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.02; }
.reviews-google-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.reviews-google-stars { font-size: 1.15rem; letter-spacing: 0.06em; color: #ffd35a; line-height: 1; }
.reviews-google-meta { font-size: 0.9rem; color: rgba(255,255,255,0.55); }
.reviews-google-meta strong { color: rgba(255,255,255,0.88); font-weight: 800; }
.reviews-all-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
  border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: #8eb9ff; text-decoration: none; font-size: 0.9rem; font-weight: 800;
  letter-spacing: 0.03em; white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.reviews-all-link:hover { color: #b8d4ff; background: rgba(255,255,255,0.10); border-color: rgba(109,147,222,0.40); }
.review-featured {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10); border-radius: 28px;
  padding: 48px 52px 44px; margin-bottom: 28px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
}
.review-featured::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109,147,222,0.50), transparent);
}
.review-featured-quote-mark {
  position: absolute; top: 24px; right: 44px; font-size: 14rem; line-height: 1;
  font-family: Georgia, serif; color: rgba(28,106,178,0.18);
  pointer-events: none; user-select: none; letter-spacing: -0.05em;
}
.review-featured-stars { font-size: 1.35rem; letter-spacing: 0.08em; color: #ffd35a; margin-bottom: 20px; line-height: 1; }
.review-featured-text {
  position: relative; z-index: 1; font-size: clamp(1.18rem, 2vw, 1.52rem);
  line-height: 1.58; color: rgba(255,255,255,0.94); font-weight: 400;
  max-width: 860px; margin: 0 0 28px; letter-spacing: -0.005em;
}
.review-featured-byline { display: flex; align-items: center; gap: 16px; }
.review-featured-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand-mid), var(--color-brand-primary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: var(--color-white); flex-shrink: 0;
  border: 2px solid rgba(109,147,222,0.40);
}
.review-featured-name { font-weight: 800; font-size: 0.97rem; color: var(--color-white); display: block; }
.review-featured-detail { font-size: 0.83rem; color: rgba(255,255,255,0.46); display: block; margin-top: 2px; }
.review-cards-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.review-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08); border-radius: 20px;
  padding: 26px 26px 24px; box-shadow: 0 16px 36px rgba(0,0,0,0.20);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative; overflow: hidden;
}
.review-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109,147,222,0.30), transparent);
}
.review-card:hover { transform: translateY(-4px); border-color: rgba(109,147,222,0.26); box-shadow: 0 24px 48px rgba(0,0,0,0.28); }
.review-card-stars { font-size: 1rem; letter-spacing: 0.06em; color: #ffd35a; margin-bottom: 14px; line-height: 1; }
.review-card-text { font-size: 0.97rem; line-height: 1.66; color: rgba(255,255,255,0.82); margin: 0 0 20px; }
.review-card-byline { display: flex; align-items: center; gap: 10px; }
.review-card-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(28,106,178,0.60), rgba(109,147,222,0.60));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 900; color: var(--color-white); flex-shrink: 0;
  border: 1px solid rgba(109,147,222,0.30);
}
.review-card-name { font-weight: 800; font-size: 0.88rem; color: rgba(255,255,255,0.88); display: block; }
.review-card-detail { font-size: 0.78rem; color: rgba(255,255,255,0.38); display: block; margin-top: 1px; }


/* ============================================================
   PROSE SECTIONS
   .prose-section, .prose-light, .prose-dark, .prose-inner
   Used on all interior pages. Angle cuts are child divs.
   Add .has-angle-exit to the section for bottom padding.
============================================================ */
.prose-section { position: relative; overflow: hidden; }
.prose-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 72px 20px; }

/* Light */
.prose-light { background: linear-gradient(180deg, #f4f8fd 0%, #ffffff 50%); }
.prose-light .prose-inner h2 {
  font-size: clamp(1.55rem, 2.2vw, 2.1rem); line-height: 1.06; letter-spacing: -0.015em;
  color: var(--color-brand-dark); margin: 2.4rem 0 0.55rem;
}
.prose-light .prose-inner h2:first-of-type { margin-top: 0; }
.prose-light .prose-inner h3 { font-size: 1.08rem; font-weight: 900; color: var(--color-brand-dark); margin: 1.8rem 0 0.4rem; }
.prose-light .prose-inner p { font-size: 1.04rem; line-height: 1.74; color: var(--color-text-2); margin: 0 0 1rem; }
.prose-light .prose-inner p strong { color: var(--color-brand-dark); }
.prose-light .prose-inner .lead { font-size: 1.12rem; color: var(--color-text); }
.prose-light .prose-inner ul, .prose-light .prose-inner ol { padding-left: 1.4em; margin: 0 0 1rem; }
.prose-light .prose-inner li { font-size: 1.02rem; line-height: 1.72; color: var(--color-text-2); margin-bottom: 0.5em; }
.prose-light .prose-inner li strong { color: var(--color-brand-dark); }
.prose-light .prose-inner li a { color: var(--color-brand-primary); }
.prose-light .prose-inner li a:hover { color: var(--color-brand-mid); }
.prose-light .prose-inner p:last-child { margin-bottom: 0; }

/* Dark */
.prose-dark { background: var(--dark-2); color: var(--color-white); }
.prose-dark::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(28,106,178,0.16), transparent 32%),
    radial-gradient(ellipse at 88% 75%, rgba(109,147,222,0.11), transparent 28%);
  pointer-events: none;
}
.prose-dark::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.45) 15%, rgba(0,0,0,0.45) 85%, transparent);
  pointer-events: none;
}
.prose-dark .prose-inner h2 {
  font-size: clamp(1.55rem, 2.2vw, 2.1rem); line-height: 1.06; letter-spacing: -0.015em;
  color: var(--color-white); margin: 2.4rem 0 0.55rem;
}
.prose-dark .prose-inner h2:first-of-type { margin-top: 0; }
.prose-dark .prose-inner p { font-size: 1.04rem; line-height: 1.74; color: rgba(255,255,255,0.82); margin: 0 0 1rem; }
.prose-dark .prose-inner p strong { color: var(--color-white); }
.prose-dark .prose-inner a { color: #8eb9ff; }
.prose-dark .prose-inner a:hover { color: #b8d4ff; }
.prose-dark .prose-inner ul, .prose-dark .prose-inner ol { padding-left: 1.4em; margin: 0 0 1rem; }
.prose-dark .prose-inner h3 { font-size: 1.08rem; font-weight: 900; color: var(--color-white); margin: 1.8rem 0 0.4rem; }
.prose-dark .prose-inner p em { color: rgba(255,255,255,0.68); font-style: italic; }
.prose-dark .prose-inner li { font-size: 1.02rem; line-height: 1.72; color: rgba(255,255,255,0.82); margin-bottom: 0.5em; }
.prose-dark .prose-inner li strong { color: var(--color-white); }
.prose-dark .prose-inner li a { color: #8eb9ff; }
.prose-dark .prose-inner li a:hover { color: #b8d4ff; }

/* Effective date line — privacy policy page */
.prose-effective-date {
  font-size: 0.90rem; color: rgba(255,255,255,0.52);
  margin: 0 0 2.4rem; letter-spacing: 0.01em;
}

/* Angle cut system */
.has-angle-exit { padding-bottom: 148px !important; }
/* Light section exits into dark — dark wedge slopes ↘ */
.angle-exit-dark {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 110px;
  background: var(--dark-2);
  clip-path: polygon(0 0, 100% 52%, 100% 100%, 0 100%);
}
/* Dark section exits into light — white wedge slopes ↙ */
.angle-exit-light {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 110px;
  background: var(--color-white);
  clip-path: polygon(0 52%, 100% 0, 100% 100%, 0 100%);
}
/* Sidebar section exits into dark service panels — dark-3 wedge slopes ↘ */
.angle-exit-dark-from-light {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 110px;
  background: var(--dark-3);
  clip-path: polygon(0 0, 100% 52%, 100% 100%, 0 100%);
}


/* ============================================================
   BREADCRUMB — STRIP STYLE
   .breadcrumb-strip, .breadcrumb-inner, .breadcrumb-list
   Used below the hero on service pages and blog pages.
============================================================ */
.breadcrumb-strip { background: #f0f5fb; border-bottom: 1px solid #dde8f4; }
.breadcrumb-inner { max-width: 1240px; margin: 0 auto; padding: 10px 20px; }
.breadcrumb-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; }
.breadcrumb-list li { display: flex; align-items: center; }
.breadcrumb-list a { font-size: 0.82rem; font-weight: 700; color: var(--color-brand-primary); text-decoration: none; }
.breadcrumb-list a:hover { text-decoration: underline; }
.breadcrumb-sep { margin: 0 7px; font-size: 0.82rem; color: var(--color-text-muted); line-height: 1; user-select: none; }
.breadcrumb-current { font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); }

/* BREADCRUMB — IN-HERO STYLE
   .breadcrumb (list element)
   Used inside hero on blog-hub. Arrow separator variant.
============================================================ */
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  list-style: none; margin: 0 0 22px; padding: 0;
  font-size: 0.80rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.breadcrumb li { display: flex; align-items: center; gap: 10px; }
.breadcrumb li + li::before { content: "›"; color: rgba(255,255,255,0.36); font-size: 1rem; font-weight: 400; }
.breadcrumb a { color: rgba(255,255,255,0.64); text-decoration: none; transition: color 0.16s; }
.breadcrumb span { margin: 0 6px; color: #bbb; }
.breadcrumb a:hover { color: rgba(255,255,255,0.90); }
.breadcrumb [aria-current="page"] { color: #c2d9ff; }


/* ============================================================
   CHIP SECTION
   .chip-section, .chip-section-inner, .chip-copy, .chip-sidebar,
   .chip-sidebar-head, .chip-sidebar-body, .chip-reason-list
============================================================ */
.chip-section { background: linear-gradient(180deg, #f0f5fb 0%, #ffffff 60%); }
.chip-section-inner {
  max-width: 1240px; margin: 0 auto; padding: 80px 20px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 52px; align-items: start;
}
.chip-copy h2 { font-size: clamp(2rem, 3vw, 2.8rem); margin-bottom: 18px; line-height: 1.04; }
.chip-copy p { font-size: 1.06rem; line-height: 1.72; color: var(--color-text-2); margin: 0 0 16px; }
.chip-copy p:last-child { margin-bottom: 0; }
.chip-sidebar {
  background: var(--color-white); border-radius: 20px;
  border: 1px solid #dde8f4;
  box-shadow: 0 20px 44px rgba(12,45,76,0.08); overflow: hidden;
}
.chip-sidebar-head {
  background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand-mid));
  padding: 22px 24px 20px;
}
.chip-sidebar-head h3 { margin: 0; color: var(--color-white); font-size: 1.15rem; }
.chip-sidebar-body { padding: 20px 24px 24px; }
.chip-reason-list { list-style: none; margin: 0; padding: 0; }
.chip-reason-list li {
  padding: 11px 0 11px 22px; position: relative;
  font-size: 0.96rem; line-height: 1.5; color: var(--color-text-2);
  border-bottom: 1px solid #edf2f8;
}
.chip-reason-list li:last-child { border-bottom: none; }
.chip-reason-list li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-brand-primary);
}
.chip-reason-list li strong { display: block; font-weight: 800; color: var(--color-brand-dark); margin-bottom: 1px; }


/* ============================================================
   SERVICE PANELS SECTION (dark background section with panel grid)
   .service-panels-section, .service-panels-inner, .service-panel-grid,
   .service-panels-angle
============================================================ */
.service-panels-section {
  position: relative; overflow: hidden;
  background: var(--dark-3); padding: 80px 20px 148px;
}
.service-panels-section::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 12%, rgba(28,106,178,0.16), transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(109,147,222,0.14), transparent 24%);
  pointer-events: none;
}
.service-panels-section::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5) 15%, rgba(0,0,0,0.5) 85%, transparent);
  pointer-events: none;
}
.service-panels-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.service-panels-inner h2 { margin: 0 0 8px; color: var(--color-white); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.04; }
.service-panels-inner > p { margin: 0 0 2rem; font-size: 0.97rem; color: rgba(255,255,255,0.64); line-height: 1.6; }
.service-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; max-width: 860px; }
.service-panels-angle {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 110px;
  background: var(--color-white);
  clip-path: polygon(0 0, 100% 52%, 100% 100%, 0 100%);
}


/* ============================================================
   GOOGLE NUDGE — .google-nudge (light bg, default)
   Used in prose sections on a light or white background.
============================================================ */
.google-nudge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 10px;
  background: #eef5fb; border: 1px solid #ccdff4;
  text-decoration: none; color: var(--color-brand-dark);
  font-size: 0.94rem; font-weight: 700;
  margin: 0.6rem 0 1.2rem;
  transition: background 0.18s ease, transform 0.18s ease;
}
.google-nudge:hover { background: #e0eef8; transform: translateY(-1px); color: var(--color-brand-dark); }
.google-nudge-stars { color: #ffd35a; font-size: 1rem; letter-spacing: 0.04em; line-height: 1; }
.google-nudge-text { line-height: 1.3; }
.google-nudge-text strong { display: block; font-size: 0.94rem; font-weight: 800; color: var(--color-brand-dark); }
.google-nudge-text span { display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 1px; }

/* Dark variant — used when nudge appears on a dark background (e.g. dark prose section) */
.google-nudge-dark {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: var(--color-white);
}
.google-nudge-dark:hover { background: rgba(255,255,255,0.13); color: var(--color-white); }
.google-nudge-dark .google-nudge-text strong { color: var(--color-white); }
.google-nudge-dark .google-nudge-text span { color: rgba(255,255,255,0.58); }


/* ============================================================
   SERVICES HUB — CARDS SECTION
   .hub-cards-section, .hub-cards-inner, .hub-card-grid, .hub-deck-sub
============================================================ */
.hub-cards-section {
  position: relative; overflow: hidden;
  background: var(--dark-2); padding: 80px 20px 88px;
}
.hub-cards-section::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 12%, rgba(28,106,178,0.16), transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(109,147,222,0.14), transparent 24%);
  pointer-events: none;
}
.hub-cards-section::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5) 15%, rgba(0,0,0,0.5) 85%, transparent);
  pointer-events: none;
}
.hub-cards-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.hub-cards-inner > .section-kicker { margin-bottom: 6px; }
.hub-cards-inner > h2 { margin: 0 0 8px; color: var(--color-white); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.04; }
.hub-cards-inner > p.hub-deck-sub { margin: 0 0 2.4rem; font-size: 0.97rem; color: rgba(255,255,255,0.64); line-height: 1.6; }
.hub-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }


/* ============================================================
   SERVICE SIDEBAR SECTION
   .svc-sidebar-section, .svc-sidebar-inner, .svc-sidebar-main,
   .svc-sidebar-col, .svc-main-block
============================================================ */
.svc-sidebar-section {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f4f8fd 0%, #ffffff 50%);
}
.svc-sidebar-inner {
  max-width: 1240px; margin: 0 auto; padding: 72px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px; align-items: stretch;
}
.svc-sidebar-main { min-width: 0; }
.svc-main-block { margin-bottom: 52px; padding-bottom: 52px; border-bottom: 1px solid #dde8f4; }
.svc-main-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.svc-sidebar-main .section-kicker { margin-bottom: 10px; }
.svc-sidebar-main h2 {
  font-size: clamp(1.45rem, 2vw, 1.95rem); line-height: 1.07;
  letter-spacing: -0.015em; color: var(--color-brand-dark); margin: 0 0 10px;
}
.svc-sidebar-main .svc-intro { font-size: 1.04rem; line-height: 1.72; color: var(--color-text-2); margin: 0 0 22px; }
.svc-sidebar-main .svc-intro strong { color: var(--color-brand-dark); }
.svc-sidebar-main p { font-size: 1.02rem; line-height: 1.72; color: var(--color-text-2); margin: 0 0 14px; }
.svc-sidebar-main p:last-child { margin-bottom: 0; }
.svc-sidebar-main p strong { color: var(--color-brand-dark); }
.svc-sidebar-main a { color: var(--color-brand-primary); }
.svc-sidebar-main a:hover { color: var(--color-brand-mid); }
.svc-sidebar-col { min-width: 0; }


/* ============================================================
   TRUST CARD
   .trust-card, .trust-card-head, .trust-card-body,
   .trust-card-items, .trust-card-cta, .trust-card-call,
   .trust-card-quote, .trust-card-warranty-btn
============================================================ */
.trust-card {
  background: var(--color-white); border-radius: 20px;
  border: 1px solid #dde8f4;
  box-shadow: 0 20px 48px rgba(12,45,76,0.10); overflow: hidden;
}
.trust-card-head {
  background: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-brand-mid) 100%);
  padding: 22px 22px 20px;
}
.trust-card-stars { color: #ffd35a; font-size: 1.2rem; letter-spacing: 0.06em; line-height: 1; margin-bottom: 6px; }
.trust-card-rating-row { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; }
.trust-card-score { font-size: 2rem; font-weight: 900; color: var(--color-white); line-height: 1; }
.trust-card-platform { font-size: 0.85rem; color: rgba(255,255,255,0.72); font-weight: 700; }
.trust-card-review-count { font-size: 0.78rem; color: rgba(255,255,255,0.50); margin-top: 1px; }
.trust-card-body { padding: 18px 20px 20px; }
.trust-card-items { list-style: none; margin: 0 0 16px; padding: 0; }
.trust-card-items li {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid #edf2f8; font-size: 0.91rem; line-height: 1.45; color: var(--color-text-2);
}
.trust-card-items li:last-child { border-bottom: none; padding-bottom: 0; }
.trust-card-check {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-mid));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px; color: var(--color-white); font-size: 0.62rem; font-weight: 900;
}
.trust-card-items li strong { display: block; font-weight: 800; color: var(--color-brand-dark); font-size: 0.88rem; margin-bottom: 1px; }

.trust-card-cta { display: flex; flex-direction: column; gap: 9px; }
.trust-card-cta a, .trust-card-cta button {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 16px; border-radius: 10px;
  font-weight: 900; font-size: 0.95rem; font-family: inherit;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.trust-card-call {
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-mid));
  color: var(--color-white); box-shadow: 0 8px 22px rgba(12,45,76,0.18);
}
.trust-card-call:hover { color: var(--color-white); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(12,45,76,0.26); }
/* Quote button — dark gray, secondary to call */
.trust-card-quote { background: var(--color-dark-gray); color: var(--color-white); border: none; }
.trust-card-quote:hover { background: #686868; color: var(--color-white); transform: translateY(-1px); }
/* Warranty button — dark gray, tertiary; label set per page in HTML */
.trust-card-warranty-btn { background: var(--color-dark-gray); color: var(--color-white); border: none; }
.trust-card-warranty-btn:hover { background: #686868; color: var(--color-white); transform: translateY(-1px); }

/* ============================================================
   SERVICE TIMELINE — .timeline-split
   Modifier on .prose-section.prose-dark.has-angle-exit.
   Two-column: copy left, visual card right.
   Used on all service pages where timing is relevant.
   No JS dependencies.
============================================================ */
.timeline-split .prose-inner {
  max-width: 1240px;
  padding: 84px 20px;
}
.timeline-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 390px);
  gap: 56px;
  align-items: center;
}
.timeline-copy {
  max-width: 620px;
}
.timeline-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-white);
}
.timeline-copy p {
  margin: 0 0 1rem;
}
.timeline-copy .timeline-subnote {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.62);
}
.timeline-visual-card {
  position: relative;
  margin-left: auto;
  width: 100%;
  max-width: 380px;
  padding: 42px 28px 30px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f9fbff 0%, #eef3f9 100%);
  border: 1px solid rgba(9,27,53,0.10);
  box-shadow:
    0 20px 42px rgba(0,0,0,0.24),
    0 1px 0 rgba(255,255,255,0.70) inset;
  text-align: center;
  color: var(--color-brand-dark);
  overflow: hidden;
}
.timeline-visual-card::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  background: conic-gradient(
    rgba(43,108,176,0.16) 0% 78%,
    rgba(43,108,176,0.04) 78% 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%);
  mask: radial-gradient(circle, transparent 61%, #000 62%);
  pointer-events: none;
}
.timer-label {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
}
.timer-display {
  position: relative;
  z-index: 1;
}
.timer-number {
  display: block;
  font-size: clamp(4rem, 9vw, 5.6rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--color-brand-dark);
}
.timer-unit {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #455d79;
}
.timer-badge {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 22px;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(20,50,100,0.06);
  border: 1px solid rgba(20,50,100,0.10);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-brand-dark);
}
@media (max-width: 980px) {
  .timeline-split .prose-inner { padding: 72px 20px; }
  .timeline-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .timeline-copy { max-width: 100%; }
  .timeline-visual-card {
    margin: 0 auto;
    max-width: 420px;
  }
}
@media (max-width: 640px) {
  .timeline-visual-card {
    padding: 36px 22px 26px;
    border-radius: 20px;
  }
  .timeline-visual-card::before {
    width: 220px;
    height: 220px;
  }
}


/* ============================================================
   AFTERCARE — .aftercare-section
   Modifier on .prose-section.prose-light.has-angle-exit.
   Three-column subtle card grid.
   Used on windshield replacement and applicable service pages.
   No JS dependencies.
============================================================ */
.aftercare-section .prose-inner {
  max-width: 960px;
}
.aftercare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
  margin-top: 2.4rem;
}
.aftercare-item {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.70);
  border: 1px solid #e4edf6;
  border-radius: 14px;
  padding: 26px 22px 24px;
  box-shadow: 0 4px 16px rgba(12,45,76,0.06);
}
.aftercare-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-brand-dark), var(--color-brand-primary));
}
.aftercare-time {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  margin-bottom: 8px;
}
.aftercare-title {
  display: block;
  font-size: 0.97rem;
  font-weight: 900;
  color: var(--color-brand-dark);
  line-height: 1.3;
  margin-bottom: 8px;
}
.aftercare-body {
  margin: 0;
  font-size: 0.91rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
@media (max-width: 720px) {
  .aftercare-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ============================================================
   PROCESS STEPS
   .process-steps, .process-step, .process-step-num,
   .process-step-body, .process-step-title, .process-step-img,
   .process-step-img-row, .process-step-list
============================================================ */
.process-steps { margin: 0; }
.process-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 18px; position: relative; }
.process-step:not(:last-child)::after {
  content: ""; position: absolute; left: 21px; top: 46px; bottom: 0;
  width: 2px; background: linear-gradient(to bottom, #c8d9ec 0%, transparent 100%);
}
.process-step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-mid));
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.92rem; color: var(--color-white);
  flex-shrink: 0; box-shadow: 0 6px 16px rgba(12,45,76,0.16); position: relative; z-index: 1;
}
.process-step-body { padding: 8px 0 38px; }
.process-step:last-child .process-step-body { padding-bottom: 0; }
.process-step-title { font-size: 1.04rem; font-weight: 900; color: var(--color-brand-dark); margin: 0 0 8px; line-height: 1.2; }
.process-step-body p { font-size: 0.96rem; line-height: 1.68; color: var(--color-text-2); margin: 0 0 8px; }
.process-step-body p:last-child { margin-bottom: 0; }
.process-step-body p strong { color: var(--color-brand-dark); }
.process-step-body a { color: var(--color-brand-primary); }
.process-step-body a:hover { color: var(--color-brand-mid); }
.process-step-list { margin: 6px 0 8px 0; padding: 0 0 0 18px; font-size: 0.94rem; line-height: 1.65; color: var(--color-text-2); }
.process-step-list li { margin-bottom: 4px; }
.process-step-list li:last-child { margin-bottom: 0; }
.process-step-img { margin: 12px 0 0; border-radius: 12px; overflow: hidden; border: 1px solid #dde8f4; }
.process-step-img img { width: 100%; height: auto; display: block; }
.process-step-img-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 12px 0 0; }
.process-step-img-row .process-step-img { margin: 0; }


/* ============================================================
   FAQ ACCORDION
   .faq-accordion, .faq-item, .faq-trigger, .faq-icon,
   .faq-answer, .faq-answer.is-open
============================================================ */
.faq-accordion { border-radius: 16px; overflow: hidden; border: 1px solid #dde8f4; box-shadow: 0 8px 24px rgba(12,45,76,0.06); }
.faq-item { border-bottom: 1px solid #dde8f4; }
.faq-item:last-child { border-bottom: none; }
.faq-trigger {
  width: 100%; background: var(--color-white); border: none; cursor: pointer;
  text-align: left; padding: 18px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; font-family: inherit;
  font-size: 0.99rem; font-weight: 800; color: var(--color-brand-dark);
  line-height: 1.35; transition: background 0.15s ease; -webkit-tap-highlight-color: transparent;
}
.faq-trigger:hover { background: #f4f8fd; }
.faq-trigger[aria-expanded="true"] { background: #f0f5fb; color: var(--color-brand-primary); }
.faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(45deg); background: var(--color-brand-primary); color: var(--color-white); }
.faq-icon {
  width: 28px; height: 28px; border-radius: 50%; background: #edf2f8;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; line-height: 1; font-weight: 300; color: var(--color-brand-primary);
  flex-shrink: 0; transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.faq-answer { display: none; padding: 0 20px 20px; }
.faq-answer.is-open { display: block; }
.faq-answer p { font-size: 0.97rem; line-height: 1.72; color: var(--color-text-2); margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--color-brand-primary); }
.faq-answer a:hover { color: var(--color-brand-mid); }


/* ============================================================
   FAQ HUB NAV + FAQ GROUP + HUB LINK
   Used on the FAQ hub page.
============================================================ */
.faq-hub-nav { margin: 0 0 2rem; }
.faq-hub-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.faq-hub-nav ul li a {
  display: inline-block; padding: 7px 14px; border-radius: 100px;
  background: #edf2f8; border: 1px solid #ccdff4;
  color: var(--color-brand-dark); font-size: 0.88rem; font-weight: 800;
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.faq-hub-nav ul li a:hover { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-white); }
.faq-group { margin: 0 0 3rem; scroll-margin-top: 80px; }
.faq-group:last-of-type { margin-bottom: 2rem; }
.faq-group-heading { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 900; color: var(--color-brand-dark); margin: 0 0 14px; line-height: 1.1; }
.faq-hub-link { margin: 12px 0 0; font-size: 0.90rem; font-weight: 700; }
.faq-hub-link a { color: var(--color-brand-primary); text-decoration: none; }
.faq-hub-link a:hover { color: var(--color-brand-mid); text-decoration: underline; text-underline-offset: 3px; }


/* ============================================================
   SERVICE REVIEW CARD
   .svc-review-card, .svc-review-stars, .svc-review-quote,
   .svc-review-byline, .svc-review-avatar, .svc-review-meta
============================================================ */
.svc-review-card {
  background: var(--color-white); border: 1px solid #dde8f4; border-radius: 20px;
  padding: 32px 36px; box-shadow: 0 16px 40px rgba(12,45,76,0.07);
  position: relative; overflow: hidden; margin-bottom: 24px;
}
.svc-review-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-brand-dark), var(--color-brand-primary), var(--color-brand-mid));
}
.svc-review-stars { font-size: 1.12rem; letter-spacing: 0.07em; color: #ffd35a; margin-bottom: 18px; line-height: 1; }
.svc-review-quote { font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.68; color: var(--color-text-2); margin: 0 0 22px; }
.svc-review-byline { display: flex; align-items: center; gap: 12px; }
.svc-review-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-mid));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 900; color: var(--color-white); flex-shrink: 0;
}
.svc-review-meta strong { display: block; font-size: 0.93rem; font-weight: 800; color: var(--color-brand-dark); }
.svc-review-meta span { display: block; font-size: 0.79rem; color: var(--color-text-muted); margin-top: 1px; }


/* ============================================================
   BLOG FIGURE — .blog-figure
   Featured image at top of blog article.
============================================================ */
.blog-figure { margin: 0 0 2rem; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(12,45,76,0.12); }
.blog-figure img { width: 100%; height: auto; display: block; }

/* ============================================================
   BLOG IMAGE GROUP — .blog-img-group, .blog-img-group--2
   Multi-image grid inside blog article prose sections.
   .blog-img-group        base grid wrapper
   .blog-img-group--2     2-column image grid
   All images display at 3:4 portrait aspect ratio by default.
   object-position overridden inline per image where subject
   is not centered (e.g. top for ceiling/headliner shots).
   No JS dependencies.
============================================================ */
.blog-img-group {
  display: grid;
  gap: 10px;
  margin: 1.75rem 0;
}
.blog-img-group--2 { grid-template-columns: repeat(2, 1fr); }
.blog-img-group figure { margin: 0; }
.blog-img-group img {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  border-radius: 4px;
  object-fit: cover;
  object-position: center;
}
.blog-img-group figcaption {
  font-size: 0.78rem;
  opacity: 0.65;
  margin-top: 5px;
  line-height: 1.35;
}
@media (max-width: 640px) {
  .blog-img-group--2 { grid-template-columns: 1fr; }
}


/* ============================================================
   BLOG TOPIC GRID — .blog-topic-grid, .blog-topic-item
   Used in dark prose section on blog hub.
============================================================ */
.blog-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 2rem; }
.blog-topic-item {
  padding: 20px 22px 20px 20px; border-radius: 14px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--color-brand-primary);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.blog-topic-item:hover { background: rgba(255,255,255,0.08); border-left-color: #6d93de; }
.blog-topic-item strong { display: block; font-size: 0.96rem; font-weight: 900; color: var(--color-white); margin-bottom: 7px; line-height: 1.3; }
.blog-topic-item p { margin: 0 !important; font-size: 0.92rem !important; line-height: 1.60 !important; color: rgba(255,255,255,0.68) !important; }
.blog-topic-item a { color: #8eb9ff !important; }
.blog-topic-item a:hover { color: #b8d4ff !important; }


/* ============================================================
   BLOG POST LIST — .blog-post-list, .blog-post-card,
   .blog-post-meta, .blog-post-title, .blog-post-excerpt,
   .blog-post-read-more
============================================================ */
.blog-post-list { display: flex; flex-direction: column; gap: 22px; margin-top: 2rem; }
.blog-post-card {
  background: var(--color-white); border-radius: 16px;
  border: 1px solid #dde8f4; border-left: 4px solid var(--color-brand-primary);
  padding: 28px 30px 26px; box-shadow: 0 8px 28px rgba(12,45,76,0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.blog-post-card:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(12,45,76,0.11); }
.blog-post-meta { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 10px; }
.blog-post-title { margin: 0 0 12px; font-size: clamp(1.1rem, 1.8vw, 1.28rem); line-height: 1.28; letter-spacing: -0.01em; }
.blog-post-title a { color: var(--color-brand-dark); text-decoration: none; font-weight: 900; }
.blog-post-title a:hover { color: var(--color-brand-primary); }
.blog-post-excerpt { margin: 0 0 16px; font-size: 1.01rem; line-height: 1.68; color: var(--color-text-2); }
.blog-post-read-more {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.87rem;
  font-weight: 800; color: var(--color-brand-primary); text-decoration: none;
  letter-spacing: 0.02em; transition: color 0.16s ease, gap 0.16s ease;
}
.blog-post-read-more::after { content: "→"; }
.blog-post-read-more:hover { color: var(--color-brand-mid); gap: 8px; }


/* ============================================================
   CONTACT INFO SECTION
   .contact-info-section, .contact-info-inner, .contact-info-main,
   .contact-detail-list, .contact-detail-icon, .contact-detail-body,
   .contact-detail-label, .contact-detail-value, .contact-detail-sub
============================================================ */
.contact-info-section { background: var(--color-white); padding: 0 0 72px; }
.contact-info-inner { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.contact-info-main { padding-top: 52px; }
.contact-info-main h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); color: var(--color-brand-dark); margin: 0 0 28px; line-height: 1.06; }
.contact-detail-list { list-style: none; padding: 0; margin: 0 0 32px; }
.contact-detail-list li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-bottom: 1px solid #edf2f8; }
.contact-detail-list li:last-child { border-bottom: none; }
.contact-detail-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand-mid));
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.contact-detail-icon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-detail-body { flex: 1; }
.contact-detail-label { display: block; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-brand-primary); margin-bottom: 4px; }
.contact-detail-value { font-size: 1.04rem; font-weight: 700; color: var(--color-brand-dark); line-height: 1.45; }
.contact-detail-value a { color: var(--color-brand-dark); text-decoration: none; font-weight: 700; }
.contact-detail-value a:hover { color: var(--color-brand-primary); }
.contact-detail-sub { display: block; font-size: 0.84rem; color: var(--color-text-muted); font-weight: 400; margin-top: 2px; }

/* Contact two-column layout (What We Help / Why Choose Us) */
.contact-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-col-block h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-bottom: 18px; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: 10px 0 10px 22px; position: relative; font-size: 0.97rem; line-height: 1.58; color: var(--color-text-2); border-bottom: 1px solid #edf2f8; }
.contact-list li:last-child { border-bottom: none; }
.contact-list li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-primary); }

/* Contact map directions link */
.contact-map-directions {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 0.90rem; font-weight: 800; color: var(--color-brand-primary); text-decoration: none; letter-spacing: 0.01em;
}
.contact-map-directions:hover { color: var(--color-brand-mid); }
.contact-map-directions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }


/* ============================================================
   PROSE EFFECTIVE DATE — used on privacy policy
============================================================ */
.prose-effective-date {
  font-size: 0.90rem; color: rgba(255,255,255,0.52);
  margin: 0 0 2.4rem; letter-spacing: 0.01em;
}


/* ============================================================
   SITEMAP
   .sitemap-wrap, .sitemap-inner, .sitemap-intro,
   .sitemap-category, .sitemap-category-label
============================================================ */
.sitemap-wrap { background: var(--color-white); border-bottom: 1px solid #e4eaf2; }
.sitemap-inner { max-width: 760px; margin: 0 auto; padding: 60px 20px 80px; }
.sitemap-inner h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -0.02em; color: var(--color-brand-dark); margin: 0 0 6px; }
.sitemap-intro { font-size: 1.04rem; color: var(--color-text-muted); margin: 0 0 52px; line-height: 1.6; }
.sitemap-category { margin-bottom: 44px; }
.sitemap-category:last-child { margin-bottom: 0; }
.sitemap-category-label { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-brand-primary); margin: 0 0 10px; }
.sitemap-category h2 { font-size: 1.22rem; font-weight: 800; color: var(--color-brand-dark); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid #e4eaf2; }
.sitemap-category ul { list-style: none; margin: 0; padding: 0; }
.sitemap-category ul li { border-bottom: 1px solid #f0f4f9; }
.sitemap-category ul li:last-child { border-bottom: none; }
.sitemap-category ul li a {
  display: block; padding: 10px 0; font-size: 1.01rem; font-weight: 600;
  color: var(--color-brand-primary); text-decoration: none;
  transition: color 0.14s ease, padding-left 0.14s ease;
}
.sitemap-category ul li a:hover { color: var(--color-brand-dark); padding-left: 6px; text-decoration-color: transparent; }


/* ============================================================
   CTA BAND — .cta-obsidian
============================================================ */
.cta-obsidian { padding: 72px 20px 80px; background: var(--color-white); }
.cta-obsidian-inner {
  max-width: 1240px; margin: 0 auto; border-radius: 24px;
  background: linear-gradient(135deg, #071722 0%, #0c2d4c 42%, #175590 100%);
  color: var(--color-white); padding: 48px 44px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px; align-items: center;
  box-shadow: 0 28px 56px rgba(12,45,76,0.26);
  position: relative; overflow: hidden;
}
.cta-obsidian-inner::before {
  content: ""; position: absolute; inset: auto auto -80px -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle at center, rgba(109,147,222,0.20), transparent 70%); filter: blur(14px);
}
.cta-obsidian-inner::after {
  content: ""; position: absolute; inset: -60px -60px auto auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle at center, rgba(28,106,178,0.18), transparent 70%); filter: blur(12px);
}
.cta-obsidian-copy { position: relative; z-index: 1; }
.cta-obsidian-copy h2 { margin: 0 0 10px; color: var(--color-white); font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.02; }
.cta-obsidian-copy p { margin: 0 0 6px; color: rgba(255,255,255,0.84); line-height: 1.66; font-size: 1.04rem; }
.cta-map-link { display: inline-block; margin-top: 4px; font-size: 0.92rem; font-weight: 700; color: #8eb9ff; text-decoration: none; letter-spacing: 0.02em; }
.cta-map-link:hover { color: #b8d4ff; }
.cta-obsidian-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; flex-direction: column; align-items: stretch; min-width: 220px; }


/* ============================================================
   FOOTER — .site-footer
============================================================ */
.site-footer { background: var(--color-brand-dark); color: var(--color-white); padding: 48px 20px 32px; }
.site-footer a { color: var(--color-white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-container { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.footer-column h3 { margin-top: 0; font-size: 1.1rem; margin-bottom: 14px; font-weight: 800; color: var(--color-white); }
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column ul li { margin-bottom: 8px; font-size: 0.94rem; }
.footer-column p { margin: 0 0 10px; font-size: 0.94rem; line-height: 1.6; }
.footer-bottom { max-width: 1100px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.16); }
.footer-bottom p { margin: 0; font-size: 0.88rem; color: rgba(255,255,255,0.60); }


/* ============================================================
   QUOTE MODAL
   .quote-overlay, .quote-modal, .quote-modal-header,
   .quote-modal-body, .quote-modal-close, .quote-form,
   .qf-row, .qf-group, .qf-label, .qf-input, .qf-select,
   .qf-conditional, .qf-conditional.is-visible,
   .qf-submit, .quote-success
   JS: modal open/close, service select conditional fields,
       form submit success state swap.
============================================================ */
.quote-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(7, 18, 28, 0.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.quote-overlay.is-open { opacity: 1; visibility: visible; }
.quote-modal {
  position: relative; width: 100%; max-width: 620px;
  max-height: 90vh; overflow-y: auto;
  background: var(--color-white); border-radius: 20px;
  box-shadow: 0 32px 72px rgba(7,18,28,0.38), 0 0 0 1px rgba(12,45,76,0.08);
  transform: translateY(18px) scale(0.98); transition: transform 0.24s ease;
}
.quote-overlay.is-open .quote-modal { transform: translateY(0) scale(1); }
.quote-modal::-webkit-scrollbar { width: 6px; }
.quote-modal::-webkit-scrollbar-track { background: transparent; }
.quote-modal::-webkit-scrollbar-thumb { background: #c8d8eb; border-radius: 3px; }
.quote-modal-header {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand-mid));
  padding: 24px 28px 22px; border-radius: 20px 20px 0 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.quote-modal-header-copy { flex: 1; }
.quote-modal-header p.kicker { margin: 0 0 6px; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #c2d9ff; }
.quote-modal-header h2 { margin: 0; color: var(--color-white); font-size: 1.45rem; line-height: 1.1; }
.quote-modal-close {
  flex-shrink: 0; width: 34px; height: 34px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px; cursor: pointer; color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; padding: 0;
  transition: background 0.18s ease; margin-top: 2px;
}
.quote-modal-close:hover { background: rgba(255,255,255,0.22); }
.quote-modal-body { padding: 28px; }
.quote-form { display: flex; flex-direction: column; gap: 0; }
.qf-section-label { font-size: 0.74rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand-primary); margin: 24px 0 14px; padding-bottom: 8px; border-bottom: 2px solid #e4eef8; }
.qf-section-label:first-child { margin-top: 0; }
.qf-row { display: grid; gap: 14px; margin-bottom: 14px; }
.qf-row-2 { grid-template-columns: 1fr 1fr; }
.qf-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.qf-group { display: flex; flex-direction: column; gap: 6px; }
.qf-label { font-size: 0.83rem; font-weight: 800; color: var(--color-brand-dark); letter-spacing: 0.01em; }
.qf-required { color: var(--color-brand-primary); margin-left: 2px; }
.qf-input, .qf-select, .qf-textarea { width: 100%; padding: 11px 14px; border-radius: 9px; border: 1.5px solid #cdd9ea; font-size: 0.97rem; font-family: inherit; color: var(--color-text); background: #fafcff; transition: border-color 0.18s ease, box-shadow 0.18s ease; appearance: none; -webkit-appearance: none; }
.qf-input:focus, .qf-select:focus, .qf-textarea:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(28,106,178,0.12); background: #fff; }
.qf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230C2D4C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
.qf-textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.qf-hint { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 3px; }
.qf-conditional { display: none; flex-direction: column; gap: 14px; margin-bottom: 0; }
.qf-conditional.is-visible { display: flex; }
.qf-submit-row { margin-top: 24px; }
.qf-submit { width: 100%; min-height: 54px; padding: 14px 24px; border: none; border-radius: 11px; cursor: pointer; font-weight: 900; font-size: 1.04rem; letter-spacing: 0.01em; font-family: inherit; background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-mid)); color: var(--color-white); box-shadow: 0 14px 32px rgba(12,45,76,0.22); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.qf-submit:hover { transform: translateY(-1px); box-shadow: 0 20px 38px rgba(12,45,76,0.28); }
.qf-submit:active { transform: translateY(0); }
.qf-privacy { margin-top: 10px; text-align: center; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.5; }
.quote-success { display: none; flex-direction: column; align-items: center; text-align: center; padding: 48px 28px 40px; gap: 16px; }
.quote-success.is-visible { display: flex; }
.quote-form.is-hidden { display: none; }
.quote-success-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-mid)); display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 36px rgba(12,45,76,0.22); }
.quote-success-icon svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.quote-success h3 { margin: 0; color: var(--color-brand-dark); font-size: 1.5rem; }
.quote-success p { margin: 0; color: var(--color-text-muted); font-size: 1rem; max-width: 380px; line-height: 1.6; }
.quote-success .qf-close-success { margin-top: 8px; min-height: 48px; padding: 12px 28px; border-radius: 11px; border: none; cursor: pointer; font-weight: 900; font-size: 0.97rem; font-family: inherit; letter-spacing: 0.01em; background: var(--color-brand-dark); color: var(--color-white); transition: background 0.18s ease; }
.quote-success .qf-close-success:hover { background: var(--color-brand-mid); }

/* ============================================================
   COMPONENT: .chip-tips
   Purpose: Urgent customer action tip box — chip & crack repair page.
   Scope: chip & crack repair page only (not a global pattern yet).
============================================================ */

.chip-tips-inner {
  background: #1a1a1a;
  color: #ffffff;
  border-radius: 16px;
  padding: 22px 20px;
  border-left: 6px solid #1C6AB2;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
/* Title */
.chip-tips-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff !important;
  margin-bottom: 6px;
}
/* Subheadline */
.chip-tips-sub {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7fb3e6 !important;
  margin-bottom: 16px;
}
/* List */
.chip-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.chip-tips-list li {
  position: relative;
  padding: 3px 0 3px 22px;
  font-size: 0.95rem;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #e6e6e6;
}
.chip-tips-list li:last-child {
  border-bottom: none;
}
/* Strong arrow accent */
.chip-tips-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 3px;
  color: #1C6AB2;
  font-weight: 800;
  font-size: 1rem;
}
/* Emphasis inside first bullet */
.chip-tips-list li strong {
  color: #ffffff;
}



/* ============================================================
   NEW COMPONENT CSS — chip card grid (Break Types section)
   Classes: .chip-card-grid-outer, .chip-card-grid, .chip-card,
            .chip-card.featured, .chip-card-img, .chip-card-label,
            .chip-card-caption, .chip-grid-intro,
            .chip-status, .chip-status-green, .chip-status-white,
            .chip-status-yellow, .chip-status-red
   Purpose: 14-card labeled photo grid, dark glass cards, label
            overlaid on photo with gradient scrim. Two featured cards
            (Bullseye, Star Crack) span 2 columns. Status tags
            color-coded by repairability urgency.
   Desktop: 4 columns. Tablet: 3 columns. Mobile: 2 columns.
   Featured cards collapse to standard width below 900px.
   No JS dependencies.
============================================================ */
.chip-card-grid-outer {
  max-width: 1060px;
  margin: 0 auto;
  padding: 72px 20px;
}
.chip-card-grid-outer .section-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}
.chip-card-grid-outer h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.06;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.chip-grid-intro {
  font-size: 1.04rem;
  line-height: 1.74;
  color: rgba(255,255,255,0.80);
  margin-bottom: 48px;
  max-width: 640px;
}
.chip-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.chip-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #0e2d4e, #060f18);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    0 20px 48px rgba(0,0,0,0.30),
    0 4px 12px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  display: flex;
  flex-direction: column;
}
.chip-card.featured {
  grid-column: span 2;
}
.chip-card.featured .chip-card-img {
  aspect-ratio: 16 / 10;
}
.chip-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109,147,222,0.55), transparent);
  z-index: 3;
}
.chip-card:hover {
  transform: translateY(-6px);
  border-color: rgba(109,147,222,0.32);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.36),
    0 0 0 1px rgba(109,147,222,0.12) inset;
}
.chip-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.chip-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.36s ease;
  background: #0a1f35;
}
.chip-card:hover .chip-card-img img {
  transform: scale(1.04);
}
.chip-card-img::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 65%,
    rgba(4,12,24,0.25) 82%,
    rgba(4,12,24,0.58) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.chip-card-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 14px 13px;
  z-index: 2;
  font-size: 0.97rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.chip-card-label::before {
  content: "";
  display: block;
  width: 24px; height: 2px;
  background: linear-gradient(90deg, #4d8fd4, #8eb9ff);
  border-radius: 2px;
  margin-bottom: 6px;
}
.chip-card-caption {
  padding: 12px 14px 16px;
  font-size: 0.79rem;
  line-height: 1.52;
  color: rgba(255,255,255,0.85);
}
/* Status tags — repairability urgency */
.chip-status {
  display: inline-block;
  margin: 10px 14px 0;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.18);
}
.chip-status-green {
  background: rgba(34,139,80,0.85);
  color: #ffffff;
}
.chip-status-white {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.90);
  border-color: rgba(255,255,255,0.28);
}
.chip-status-yellow {
  background: rgba(180,110,0,0.90);
  color: #ffffff;
}
.chip-status-red {
  background: rgba(160,30,30,0.90);
  color: #ffffff;
}
@media (max-width: 900px) {
  .chip-card-grid { grid-template-columns: repeat(3, 1fr); }
  .chip-card.featured { grid-column: span 1; }
  .chip-card.featured .chip-card-img { aspect-ratio: 1 / 1; }
}
@media (max-width: 560px) {
  .chip-card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}


/* ============================================================
   MOTION
============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .hero-cinematic-bg { animation: heroFloat 18s ease-in-out infinite alternate; }
  .hero-interior-bg { animation: heroFloat 18s ease-in-out infinite alternate; }
  .hero-glass-card { animation: floatCard 5s ease-in-out infinite; }
}
@keyframes heroFloat {
  from { transform: scale(1.06) translateY(0); }
  to   { transform: scale(1.10) translateY(-10px); }
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}


/* ============================================================
   RESPONSIVE — 1100px
============================================================ */
@media (max-width: 1100px) {
  .hero-cinematic-inner { grid-template-columns: 1fr; }
  .hero-glass-card { max-width: 440px; }
  .hero-stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proof-cascade-inner { grid-template-columns: 1fr; }
  .intro-lux-inner { grid-template-columns: 1fr; gap: 40px; }
  .cta-obsidian-inner { grid-template-columns: 1fr; }
  .cta-obsidian-actions { flex-direction: row; }
  .service-deck-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .service-deck-row2 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 100%; }
  .review-cards-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* ============================================================
   RESPONSIVE — 960px
============================================================ */
@media (max-width: 960px) {
  .svc-sidebar-inner { grid-template-columns: 1fr; gap: 40px; }
  .svc-sidebar-col { order: -1; }
  .trust-card { max-width: 480px; }
}


/* ============================================================
   RESPONSIVE — 768px
============================================================ */
@media (max-width: 768px) {
  /* Nav */
  .nav-ultra-inner { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; padding: 9px 12px; }
  .nav-logo { min-width: 0; }
  .nav-logo img { max-width: 160px; }
  .nav-ultra-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 16px 18px; background: rgba(255,255,255,0.97);
    backdrop-filter: blur(14px); border-bottom: 1px solid rgba(12,45,76,0.10);
    box-shadow: 0 14px 30px rgba(12,45,76,0.12);
  }
  .nav-ultra-links.is-open { display: flex; }
  .nav-ultra-links a { padding: 13px 4px; font-size: 1.05rem; border-bottom: 1px solid rgba(12,45,76,0.06); }
  .nav-ultra-links a:last-child { border-bottom: none; }
  .nav-ultra-links a::after { display: none; }
  .nav-ultra-cta { font-size: 0.74rem; padding: 0 10px; height: 32px; white-space: nowrap; }
  .nav-hamburger { display: flex; padding: 6px; }

  /* Components */
  .proof-chips { grid-template-columns: 1fr; }
  .chip-section-inner { grid-template-columns: 1fr; }
  .service-panel-grid { grid-template-columns: 1fr; max-width: 100%; }
  .hub-card-grid { grid-template-columns: 1fr; }
  .blog-topic-grid { grid-template-columns: 1fr; }
  .contact-two-col { grid-template-columns: 1fr; gap: 32px; }
  .qf-row-3 { grid-template-columns: 1fr; }

  /* Homepage */
  .review-featured { padding: 32px 28px; }
  .review-featured-quote-mark { font-size: 9rem; top: 16px; right: 24px; }
  .review-featured-text { font-size: 1.15rem; }
}


/* ============================================================
   RESPONSIVE — 640px
============================================================ */
@media (max-width: 640px) {
  /* Cinematic hero */
  .hero-cinematic { min-height: unset; }
  .hero-cinematic-inner { min-height: unset; padding-top: 56px; padding-bottom: 160px; }
  .hero-main h1 { font-size: 2.5rem; }
  .hero-stat-row { grid-template-columns: 1fr; }

  /* Interior hero */
  .hero-interior-inner { padding-top: 52px; padding-bottom: 120px; min-height: unset; }
  .hero-interior h1 { font-size: 2.1rem; }
  .hero-interior-buttons { flex-direction: column; }

  /* FAQ title bar */
  .hero-title-bar-inner { padding: 36px 20px 132px; }

  /* Buttons */
  .btn-ultra { width: 100%; }

  /* Service/content */
  .service-deck-grid, .service-deck-row2 { grid-template-columns: 1fr; }
  .review-cards-row { grid-template-columns: 1fr; }
  .reviews-header { flex-direction: column; align-items: flex-start; }
  .intro-pillars { grid-template-columns: 1fr; }

  /* Service page */
  .svc-sidebar-inner { padding-top: 44px; }
  .svc-review-card { padding: 24px 22px; }
  .process-step-img-row { grid-template-columns: 1fr; }
  .trust-card { max-width: 100%; }
  .svc-main-block { margin-bottom: 40px; padding-bottom: 40px; }

  /* CTA band */
  .cta-obsidian-inner { padding: 32px 22px; }
  .cta-obsidian-actions { flex-direction: column; }

  /* Blog */
  .blog-post-card { padding: 22px 20px 20px; }

  /* Modal */
  .qf-row-2 { grid-template-columns: 1fr; }
  .quote-modal-body { padding: 20px; }
  .quote-overlay { padding: 12px; align-items: flex-end; }
  .quote-modal { border-radius: 20px 20px 0 0; max-height: 92vh; }
}