/* ============================================================
   WHITE THEME · light backgrounds · navy text · red accent
   ============================================================ */
:root{
  --bg:#ffffff;
  --bg-alt:#f6f8fb;        /* alternating light tint */
  --bg-tint:#fafbfd;
  --text:#0e1726;          /* near-black navy body */
  --text-dim:#5a6577;      /* secondary copy */
  --text-mute:#94a0b3;     /* tertiary / muted */
  --border:#e5e9ef;
  --border-soft:#eef1f5;
  --red:#c0000e;
  --red-bright:#dc0010;
  --red-deep:#9a000a;
  --shadow-sm:0 1px 2px rgba(14,23,38,.04), 0 4px 16px rgba(14,23,38,.04);
  --shadow:0 4px 16px rgba(14,23,38,.06), 0 12px 36px rgba(14,23,38,.06);
  --shadow-lg:0 8px 24px rgba(14,23,38,.08), 0 24px 64px rgba(14,23,38,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;height:auto;display:block}

/* ========== LAYOUT WRAPPER ========== */
.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* DARK navy bookends (header + footer) */
:root{
  --navy:#0e1726;
  --navy-deep:#070d1a;
}

/* ========== TOP BAR (thin red strip on dark navy) ========== */
.topstrip{background:var(--navy-deep);color:#fff;padding:9px 0;font-size:13px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.06)}
.topstrip .container{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap}
.topstrip a{font-weight:600;letter-spacing:.01em;color:#fff!important}
.topstrip a:hover{color:#fff!important;text-decoration:underline}
.topstrip .div{opacity:.30}
.topstrip .accent{color:#c0000e}
.topstrip .ts-line{display:inline-flex;align-items:center;gap:6px}

/* ========== HEADER / NAV (dark navy) ========== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(14,23,38,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.nav-brand img{height:40px;width:auto}
.nav-brand .name{font-size:16px;font-weight:800;letter-spacing:.02em;color:#fff;line-height:1}
.nav-brand .sub{font-size:10px;color:rgba(255,255,255,.5);font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.nav-menu{display:flex;align-items:center;gap:4px;list-style:none}
.nav-menu li{position:relative}
.nav-menu>li>a{font-size:14px;font-weight:500;color:rgba(255,255,255,.78);padding:9px 14px;border-radius:8px;display:block;transition:color .15s,background .15s}
.nav-menu>li>a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-menu>li>a.active{color:#fff;font-weight:600}
.nav-cta{background:var(--red);color:#fff!important;font-size:14px;font-weight:700;padding:10px 18px!important;border-radius:8px;letter-spacing:.01em;transition:background .15s,transform .15s;box-shadow:0 4px 14px rgba(192,0,14,.30)}
.nav-cta:hover{background:var(--red-bright);transform:translateY(-1px);color:#fff!important}
.nav-phone{font-size:14px;font-weight:700;color:#fff;padding:9px 12px;display:inline-flex;align-items:center;gap:8px}
.nav-phone:hover{color:var(--red)}

/* Dropdown indicator chevron — auto-added to any nav link with a sub-menu */
.has-dd>a::after,
li.dd>a::after{content:'';display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:8px;vertical-align:middle;opacity:.7;transition:transform .2s, opacity .2s;position:relative;top:-1px}
.has-dd:hover>a::after,
li.dd:hover>a::after{transform:rotate(180deg);opacity:1}

/* Dropdowns — homepage (scoped to .has-dd) */
.has-dd{position:relative}
.has-dd>.dd{display:none;position:absolute;top:100%;left:0;right:auto;min-width:240px;max-width:300px;background:var(--navy);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:6px;margin-top:0;box-shadow:0 24px 64px rgba(0,0,0,.4);z-index:200;flex-direction:column}
.has-dd>.dd::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px}
.has-dd:hover>.dd{display:flex}
/* Right-align dropdowns when they're the last few nav items so they don't overflow */
.nav-menu>li.has-dd:nth-last-child(-n+4)>.dd{left:auto;right:0}
.has-dd>.dd a{display:block;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.78);padding:9px 14px;border-radius:8px;white-space:nowrap}
.has-dd>.dd a:hover{background:rgba(192,0,14,.18);color:#fff}

/* Hamburger */
.hamburger{display:none;background:transparent;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:2.5px 0;border-radius:2px}

/* Mobile menu */
.mob-menu{display:none;position:fixed;inset:64px 0 0 0;background:#fff;padding:24px;overflow-y:auto;z-index:99}
.mob-menu.open{display:block}
.mob-menu a{display:block;padding:14px 16px;font-size:15px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border-soft)}
.mob-menu .group{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-mute);font-weight:700;padding:18px 16px 8px}
.mob-menu .cta{display:block;background:var(--red);color:#fff;text-align:center;border-radius:10px;padding:14px;margin-top:20px;font-weight:700}

/* ========== HERO (dark navy with red radial glow — like autohailtechs bg-radar-navy) ========== */
.hero{padding:88px 0 120px;background:radial-gradient(1200px circle at 50% 0%, rgba(192,0,14,.22), transparent 60%), linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);color:#fff;position:relative;overflow:hidden;isolation:isolate}
/* subtle grid texture overlay (matches autohailtechs grid-pattern) */
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);background-size:42px 42px;opacity:.6;pointer-events:none;z-index:-1}
/* fade-to-light at bottom for transition into white body */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(to bottom, transparent, var(--bg-alt));pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#c0000e;font-weight:700;margin-bottom:20px;background:rgba(192,0,14,.14);border:1px solid rgba(192,0,14,.30);border-radius:999px;padding:7px 16px}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#c0000e;animation:pulse 1.4s ease infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
.hero h1{font-size:clamp(38px, 5.2vw, 64px);font-weight:800;letter-spacing:-2px;line-height:1.02;color:#fff;margin-bottom:22px}
.hero h1 .accent{color:#c0000e}
.hero p.lead{font-size:18px;color:rgba(255,255,255,.78);line-height:1.6;max-width:540px;margin-bottom:32px;font-weight:400}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.hero .btn-secondary{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.20);color:#fff}
.hero .btn-secondary:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.36);color:#fff}
.hero-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:560px}
.hero-badge{padding-top:14px;border-top:1px solid rgba(255,255,255,.10)}
.hero-badge .num{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:3px}
.hero-badge .lbl{font-size:11px;color:rgba(255,255,255,.6);font-weight:500}

/* Hero side card (white floating on dark hero — autohailtechs uses this) */
.hero-side{background:#fff;border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:28px;box-shadow:0 24px 64px rgba(0,0,0,.30)}
.hero-side .tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--red);background:rgba(192,0,14,.08);padding:5px 10px;border-radius:5px;margin-bottom:16px}
.hero-side h3{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.4px;margin-bottom:8px;line-height:1.2}
.hero-side p{font-size:14px;color:var(--text-dim);line-height:1.55;margin-bottom:18px}
.hero-side .btn-primary{width:100%;justify-content:center}
.hero-side hr{border:none;height:1px;background:var(--border-soft);margin:18px 0 12px}
.hero-side .row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0}
.hero-side .row span{color:var(--text-mute)}
.hero-side .row strong{color:var(--text);font-weight:700}
/* Hero-side path rows */
.hs-path{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border);border-radius:10px;background:#fff;text-decoration:none;color:var(--text);transition:border-color .2s, background .2s, transform .15s;margin-bottom:10px}
.hs-path:hover{border-color:var(--red);background:var(--bg-tint);transform:translateX(2px)}
.hs-path:last-of-type{margin-bottom:4px}
.hs-path-icon{width:40px;height:40px;border-radius:8px;background:rgba(192,0,14,.08);border:1px solid rgba(192,0,14,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--red);transition:background .2s, color .2s}
.hs-path-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hs-path:hover .hs-path-icon{background:var(--red);color:#fff}
.hs-path-text{flex:1;min-width:0}
.hs-path-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.1px;line-height:1.2}
.hs-path-sub{font-size:12px;color:var(--text-dim);margin-top:2px}
.hs-path-arrow{width:16px;height:16px;color:var(--text-mute);stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:color .2s, transform .2s}
.hs-path:hover .hs-path-arrow{color:var(--red);transform:translateX(2px)}

/* ========== BUTTONS ========== */
.btn-primary{background:var(--red);color:#fff;border-radius:10px;padding:14px 24px;font-weight:700;font-size:14.5px;letter-spacing:.01em;transition:background .15s,transform .15s,box-shadow .15s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;box-shadow:0 4px 16px rgba(192,0,14,.22)}
.btn-primary:hover{background:var(--red-bright);transform:translateY(-1px);box-shadow:0 8px 24px rgba(192,0,14,.32);color:#fff}
.btn-secondary{background:#fff;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:13px 22px;font-weight:600;font-size:14.5px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,border-color .15s}
.btn-secondary:hover{background:var(--bg-alt);border-color:var(--red);color:var(--red)}

/* ========== TRUST STRIP (proper trust badges) ========== */
.trust-strip{padding:36px 0;background:var(--bg-alt);border-bottom:1px solid var(--border)}
.trust-strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.ts-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px 22px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);transition:transform .2s, box-shadow .2s, border-color .2s}
.ts-item:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:rgba(192,0,14,.18)}
.ts-icon{flex-shrink:0;width:42px;height:42px;border-radius:10px;background:rgba(192,0,14,.08);border:1px solid rgba(192,0,14,.18);display:flex;align-items:center;justify-content:center;color:var(--red)}
.ts-icon svg{width:20px;height:20px;stroke-width:2;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ts-icon.gold{background:#fff8e6;border-color:#f5d178;color:#e5a30c}
.ts-icon.gold svg{fill:currentColor;stroke:none}
.ts-text{flex:1;min-width:0}
.ts-num{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.3px;line-height:1.1;display:flex;align-items:center;gap:6px}
.ts-num .gold{color:#e5a30c}
.ts-lbl{font-size:12px;color:var(--text-dim);font-weight:500;margin-top:2px;letter-spacing:.01em}
@media(max-width:900px){
  .trust-strip .container{grid-template-columns:repeat(2,1fr);gap:12px}
  .ts-item{padding:16px}
  .ts-icon{width:36px;height:36px;font-size:16px}
  .ts-num{font-size:15px}
  .ts-lbl{font-size:11px}
}
@media(max-width:560px){
  .trust-strip .container{grid-template-columns:1fr}
}

/* ========== SECTIONS ========== */
.section{padding:96px 0;background:#fff}
.section.alt{background:var(--bg-alt)}
.sec-head{margin-bottom:48px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sec-head-text{max-width:680px}
.sec-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--red);margin-bottom:12px}
.sec-eyebrow::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red)}
.sec-title{font-size:clamp(28px, 3.6vw, 44px);font-weight:800;color:var(--text);letter-spacing:-1px;line-height:1.1;margin-bottom:14px}
.sec-sub{font-size:16px;color:var(--text-dim);line-height:1.65;font-weight:400}
.sec-link{font-size:14px;font-weight:700;color:var(--red);text-decoration:none;letter-spacing:.01em;transition:color .15s;flex-shrink:0;white-space:nowrap}
.sec-link:hover{color:var(--red-bright)}

/* ========== SERVICE GRID (white cards) ========== */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.svc-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:32px 28px;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s;display:block;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.svc-card:hover{transform:translateY(-4px);border-color:rgba(192,0,14,.20);box-shadow:var(--shadow-lg)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-icon{width:44px;height:44px;border-radius:10px;background:rgba(192,0,14,.08);border:1px solid rgba(192,0,14,.18);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--red);transition:background .2s, color .2s}
.svc-icon svg{width:22px;height:22px;stroke-width:2;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.svc-card:hover .svc-icon{background:var(--red);color:#fff}
.svc-card h3{font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.3px;margin-bottom:10px}
.svc-card p{font-size:14px;color:var(--text-dim);line-height:1.6;margin-bottom:18px}
.svc-tag{font-size:11px;font-weight:700;color:var(--red);letter-spacing:.06em;text-transform:uppercase;padding-top:14px;border-top:1px solid var(--border-soft);margin-top:auto}
/* Featured card has soft red glow */
.svc-card.svc-featured{position:relative;border:1px solid rgba(192,0,14,.20);background:linear-gradient(180deg,#fff 0%,#fff8f8 100%)!important}
.svc-card.svc-featured::before{transform:scaleX(1);background:var(--red)!important}
.svc-card.svc-featured:hover{border-color:var(--red)!important}
.svc-badge{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;font-size:10px;font-weight:800;color:#fff;background:var(--red);padding:4px 10px;border-radius:999px;letter-spacing:.10em;text-transform:uppercase;box-shadow:0 4px 12px rgba(192,0,14,.30);z-index:1}
/* Stat row: label / value */
.svc-meta{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border-soft)}
.svc-meta-l{font-size:11px;font-weight:600;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em}
.svc-meta-v{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.4px;line-height:1}
.svc-card.svc-featured .svc-meta-v{color:var(--red)}
/* Card layout — make the meta + tag flex to bottom */
.svc-card{display:flex;flex-direction:column}
.svc-card>p{flex-grow:0}
.svc-card .svc-meta+.svc-tag{border-top:none;padding-top:8px}

/* ========== PROCESS — connected timeline ========== */
.proc-flow{position:relative}
/* Horizontal connecting line behind cards */
.proc-flow::before{content:'';position:absolute;top:54px;left:6%;right:6%;height:2px;background:repeating-linear-gradient(to right, rgba(192,0,14,.25) 0 4px, transparent 4px 10px);z-index:0}
.proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative;z-index:1}
.proc-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px 22px 24px;transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:var(--shadow-sm);text-align:center;position:relative}
.proc-card:hover{transform:translateY(-3px);border-color:rgba(192,0,14,.30);box-shadow:var(--shadow)}
/* Numbered badge (top, centered, with white halo) */
.proc-badge{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;background:var(--red);color:#fff;border-radius:50%;font-size:22px;font-weight:800;margin:-16px auto 14px;letter-spacing:-.5px;box-shadow:0 0 0 6px var(--bg-alt), 0 6px 16px rgba(192,0,14,.30);position:relative}
.proc-card:hover .proc-badge{box-shadow:0 0 0 6px var(--bg-alt), 0 8px 22px rgba(192,0,14,.40)}
/* Icon below the number */
.proc-icon{width:36px;height:36px;border-radius:8px;background:rgba(192,0,14,.08);border:1px solid rgba(192,0,14,.18);display:inline-flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--red)}
.proc-icon svg{width:18px;height:18px;stroke-width:2;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.proc-card h4{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.2px;margin-bottom:8px}
.proc-card p{font-size:13.5px;color:var(--text-dim);line-height:1.55;margin-bottom:14px}
.proc-time{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--red);background:rgba(192,0,14,.08);border:1px solid rgba(192,0,14,.18);padding:4px 10px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.proc-time svg{width:11px;height:11px;stroke-width:2.4;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ========== TWO PATHS (hail vs single dent) ========== */
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.path-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;padding:36px 32px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s, box-shadow .2s, border-color .2s;box-shadow:var(--shadow-sm);overflow:hidden}
.path-card:hover{transform:translateY(-4px);border-color:rgba(192,0,14,.30);box-shadow:var(--shadow-lg)}
.path-card.featured{background:linear-gradient(180deg,#fff 0%, var(--bg-tint) 100%)}
.path-card.featured::before{content:'Most popular';position:absolute;top:18px;right:18px;font-size:10px;font-weight:800;color:#fff;background:var(--red);padding:5px 11px;border-radius:999px;letter-spacing:.10em;text-transform:uppercase}
.path-icon{width:52px;height:52px;border-radius:12px;background:rgba(192,0,14,.08);border:1px solid rgba(192,0,14,.18);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--red);transition:background .2s, color .2s}
.path-icon svg{width:26px;height:26px;stroke-width:2;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.path-card:hover .path-icon{background:var(--red);color:#fff}
.path-card h3{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.4px;line-height:1.15;margin-bottom:6px}
.path-card .path-tag{font-size:13px;color:var(--red);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.path-card>p{font-size:15px;color:var(--text-dim);line-height:1.6;margin-bottom:20px}
.path-card ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.path-card ul li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text);line-height:1.5}
.path-card ul li svg{flex-shrink:0;width:18px;height:18px;color:var(--red);stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.path-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 22px;border-radius:10px;font-weight:700;font-size:14px;letter-spacing:.01em;transition:all .15s}
.path-cta.primary{background:var(--red);color:#fff;box-shadow:0 4px 14px rgba(192,0,14,.22)}
.path-cta.primary:hover{background:var(--red-bright);transform:translateY(-1px)}
.path-cta.secondary{background:transparent;color:var(--red);border:1px solid var(--red)}
.path-cta.secondary:hover{background:var(--red);color:#fff}

/* ========== HAIL HITS — DARK red-accent section ========== */
.hail-hits{padding:96px 0;background:radial-gradient(900px circle at 80% 20%, rgba(220,0,16,.30), transparent 60%), radial-gradient(700px circle at 15% 85%, rgba(192,0,14,.18), transparent 60%), linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.hail-hits::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);background-size:42px 42px;opacity:.5;pointer-events:none;z-index:-1}
.hh-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hh-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#ff1a27;background:rgba(192,0,14,.18);border:1px solid rgba(192,0,14,.40);border-radius:999px;padding:6px 14px;margin-bottom:18px}
.hh-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#ff1a27;animation:pulse 1.4s ease infinite}
.hh-grid h2{font-size:clamp(32px, 4.4vw, 52px);font-weight:800;color:#fff;letter-spacing:-1.5px;line-height:1.05;margin-bottom:20px}
.hh-grid h2 .accent{color:#ff1a27}
.hh-grid p.lead{font-size:17px;color:rgba(255,255,255,.78);line-height:1.65;margin-bottom:28px;max-width:480px}
.hh-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:28px}
.hh-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:18px 20px;backdrop-filter:blur(8px)}
.hh-stat .num{font-size:30px;font-weight:800;color:#ff1a27;letter-spacing:-.8px;line-height:1;margin-bottom:6px}
.hh-stat .lbl{font-size:13px;color:rgba(255,255,255,.65);font-weight:500;line-height:1.4}
.hh-cta{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#ff1a27;text-decoration:none;letter-spacing:.01em;padding:6px 0;border-bottom:2px solid transparent;transition:color .15s, border-color .15s}
.hh-cta:hover{color:#fff;border-color:#ff1a27}
.hh-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.hh-cta:hover svg{transform:translateX(3px)}

/* Dark-themed claim timeline — matches Watch Us Work · COMPACT */
.hh-claim{padding:64px 0!important}
.hh-claim .hh-head{margin-bottom:32px!important}
.hh-claim .hh-head h2{font-size:clamp(28px, 3.6vw, 40px)!important}
.hh-claim .hh-head .lead{font-size:15px!important;margin-bottom:0!important}
.hh-claim .tl-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:start;max-width:1080px;margin:0 auto}
.hh-claim .tl-list{display:flex;flex-direction:column;gap:18px}
.hh-claim .tl-step{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;position:relative}
.hh-claim .tl-step:not(:last-child)::before{content:'';position:absolute;left:19px;top:42px;bottom:-18px;width:2px;background:repeating-linear-gradient(to bottom, rgba(192,0,14,.50) 0 4px, transparent 4px 9px)!important}
.hh-claim .tl-num{background:#c0000e;color:#fff;box-shadow:0 4px 16px rgba(192,0,14,.40);width:40px!important;height:40px!important;font-size:15px!important}
.hh-claim .tl-body h4{color:#fff!important;font-weight:700;font-size:15px!important;margin-bottom:4px!important}
.hh-claim .tl-body p{color:rgba(255,255,255,.70)!important;font-size:13.5px!important;line-height:1.55!important;margin-bottom:6px!important}
.hh-claim .tl-meta{background:rgba(192,0,14,.18);color:#ff5252!important;border:1px solid rgba(192,0,14,.32);font-size:10.5px!important;padding:3px 9px!important}

/* Checklist card — translucent dark glass · compact */
.hh-claim .tl-checklist{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)!important;border-top:3px solid #c0000e!important;box-shadow:0 12px 36px rgba(0,0,0,.30)!important;backdrop-filter:blur(8px);padding:24px 22px!important;position:sticky;top:96px}
.hh-claim .tl-checklist .ck-eyebrow{color:#ff5252!important;margin-bottom:8px!important;font-size:10px!important}
.hh-claim .tl-checklist .ck-eyebrow::before{background:#ff5252!important}
.hh-claim .tl-checklist h3{color:#fff!important;font-size:18px!important;margin-bottom:6px!important}
.hh-claim .tl-checklist p.ck-sub{color:rgba(255,255,255,.65)!important;font-size:13px!important;margin-bottom:14px!important}
.hh-claim .ck-list{gap:8px!important}
.hh-claim .ck-list li{color:#fff!important;font-size:13.5px!important;font-weight:500!important;gap:10px!important}
.hh-claim .ck-list li small{color:rgba(255,255,255,.55)!important;font-size:12px!important}
.hh-claim .ck-list li svg{color:#ff5252!important;width:18px!important;height:18px!important}

@media(max-width:900px){
  .hh-claim{padding:48px 0!important}
  .hh-claim .tl-wrap{grid-template-columns:1fr;gap:24px}
  .hh-claim .tl-checklist{position:static}
}

/* Dark-themed FAQ — matches Watch Us Work */
.hh-faq{padding:64px 0!important}
.hh-faq .hh-head{margin-bottom:28px!important}
.hh-faq .faq{max-width:720px!important;margin:0 auto!important;gap:6px!important}
.hh-faq .faq-item,
.hh-faq .fi{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)!important;backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,.20)!important}
.hh-faq .faq-item:hover,
.hh-faq .fi:hover{background:rgba(255,255,255,.06)!important;border-color:rgba(192,0,14,.30)!important}
.hh-faq .faq-item.open,
.hh-faq .fi.open{border-color:rgba(192,0,14,.50)!important;background:rgba(255,255,255,.06)!important;box-shadow:0 8px 24px rgba(0,0,0,.30)!important}
.hh-faq .faq-q,
.hh-faq .fq{color:#fff!important;padding:18px 22px 18px 48px!important;font-size:15px!important}
.hh-faq .faq-q::before,
.hh-faq .fq::before{background:rgba(255,255,255,.18)!important}
.hh-faq .faq-item:hover .faq-q::before,
.hh-faq .fi:hover .fq::before{background:rgba(255,82,82,.50)!important}
.hh-faq .faq-item.open .faq-q::before,
.hh-faq .fi.open .fq::before{background:#ff5252!important;box-shadow:0 0 0 4px rgba(255,82,82,.16)!important}
.hh-faq .faq-q::after,
.hh-faq .fq::after{border-right:2px solid #ff5252!important;border-bottom:2px solid #ff5252!important}
.hh-faq .faq-a,
.hh-faq .fa{color:rgba(255,255,255,.70)!important;padding:0 22px 18px 48px!important;font-size:14px!important;line-height:1.65!important}

/* Centered head for hail-hits when used as Watch-Us-Work container */
.hail-hits .hh-head{text-align:center;max-width:680px;margin:0 auto 36px}
.hail-hits .hh-head .hh-eyebrow{justify-content:center}
.hail-hits .hh-foot{margin-top:36px;text-align:center}
.hail-hits .hh-foot .hh-cta{justify-content:center}
/* Inside the dark hail-hits, video cards swap to translucent dark surfaces */
.hail-hits .video-card{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 12px 36px rgba(0,0,0,.30)!important;backdrop-filter:blur(8px)}
.hail-hits .video-card:hover{border-color:rgba(192,0,14,.35)!important;background:rgba(255,255,255,.06)!important;box-shadow:0 18px 48px rgba(0,0,0,.40)!important}
.hail-hits .video-card .vlbl{color:#fff!important}
.hail-hits .video-card .vsub{color:rgba(255,255,255,.6)!important}

/* Right side: recent storms list card */
.hh-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:28px;backdrop-filter:blur(12px)}
.hh-card .hh-card-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.hh-card-title{font-size:13px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.08em}
.hh-card-sub{font-size:11px;color:rgba(255,255,255,.5);margin-top:3px;font-weight:500}
.hh-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:#ff1a27;text-transform:uppercase;letter-spacing:.12em;padding:5px 10px;background:rgba(192,0,14,.16);border:1px solid rgba(192,0,14,.30);border-radius:999px}
.hh-live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff1a27;animation:pulse 1.4s ease infinite}
.hh-storms{display:flex;flex-direction:column}
.hh-storm{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.hh-storm:last-child{border-bottom:none}
.hh-storm-date{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.04em;text-transform:uppercase;min-width:64px}
.hh-storm-city{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.1px}
.hh-storm-city span{display:block;font-size:11.5px;color:rgba(255,255,255,.5);font-weight:400;margin-top:2px}
.hh-storm-size{font-size:13px;font-weight:800;padding:4px 10px;border-radius:6px;letter-spacing:-.2px;white-space:nowrap}
.hh-storm-size.hi{background:rgba(220,0,16,.20);color:#ff1a27;border:1px solid rgba(220,0,16,.40)}
.hh-storm-size.md{background:rgba(217,119,6,.20);color:#fbbf24;border:1px solid rgba(217,119,6,.40)}
.hh-storm-size.lo{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.12)}
.hh-card-foot{padding-top:14px;margin-top:6px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:rgba(255,255,255,.45);text-align:center}

/* ========== COMPARISON TABLE (Pro PDR vs Body Shop) ========== */
.cmp-wrap{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.cmp{width:100%;border-collapse:collapse}
.cmp thead th{background:var(--text);color:#fff;padding:18px 22px;text-align:left;font-size:14px;font-weight:700;letter-spacing:.01em}
.cmp thead th:first-child{font-size:13px;font-weight:600;color:rgba(255,255,255,.8)}
.cmp thead th .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;background:var(--red);padding:4px 10px;border-radius:999px;margin-left:6px}
.cmp thead th .badge::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff}
.cmp tbody tr{border-bottom:1px solid var(--border-soft)}
.cmp tbody tr:last-child{border-bottom:none}
.cmp tbody tr:nth-child(even){background:var(--bg-tint)}
.cmp tbody td{padding:16px 22px;font-size:14px;color:var(--text);vertical-align:middle}
.cmp tbody td:first-child{font-weight:600;color:var(--text)}
.cmp tbody td:nth-child(2){color:var(--text);font-weight:600}
.cmp tbody td:nth-child(3){color:var(--text-dim)}
.cmp .yes{display:inline-flex;align-items:center;gap:8px;color:var(--red);font-weight:700}
.cmp .yes svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cmp .no{display:inline-flex;align-items:center;gap:8px;color:var(--text-mute)}
.cmp .no svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ========== DETAILED CLAIM TIMELINE ========== */
.tl-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
.tl-list{display:flex;flex-direction:column;gap:24px}
.tl-step{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start;position:relative}
.tl-step:not(:last-child)::before{content:'';position:absolute;left:23px;top:48px;bottom:-24px;width:2px;background:repeating-linear-gradient(to bottom, rgba(192,0,14,.30) 0 4px, transparent 4px 9px)}
.tl-num{width:48px;height:48px;background:var(--red);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;flex-shrink:0;box-shadow:0 4px 12px rgba(192,0,14,.30);position:relative;z-index:1}
.tl-body h4{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.2px;margin-bottom:6px;line-height:1.3}
.tl-body p{font-size:14.5px;color:var(--text-dim);line-height:1.65;margin-bottom:8px}
.tl-meta{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--red);background:rgba(192,0,14,.06);padding:4px 10px;border-radius:5px;letter-spacing:.04em;text-transform:uppercase}
.tl-checklist{background:#fff;border:1px solid var(--border);border-top:4px solid var(--red);border-radius:14px;padding:32px;box-shadow:var(--shadow);position:sticky;top:96px}
.tl-checklist .ck-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--red);margin-bottom:10px}
.tl-checklist .ck-eyebrow::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red)}
.tl-checklist h3{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.4px;margin-bottom:8px;line-height:1.2}
.tl-checklist p.ck-sub{font-size:14px;color:var(--text-dim);line-height:1.55;margin-bottom:20px}
.ck-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.ck-list li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--text);font-weight:500}
.ck-list li svg{flex-shrink:0;width:20px;height:20px;color:var(--red);stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.ck-list li small{display:block;color:var(--text-mute);font-weight:400;font-size:12.5px;margin-top:2px}

/* ========== INSURANCE CARRIERS ========== */
.ins-band{background:#fff;border:1px solid var(--border);border-radius:14px;padding:36px 40px;box-shadow:var(--shadow-sm);text-align:center}
.ins-band .ins-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--red);margin-bottom:8px}
.ins-band .ins-eyebrow::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red)}
.ins-band h3{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.4px;margin-bottom:8px}
.ins-band p{font-size:14.5px;color:var(--text-dim);max-width:540px;margin:0 auto 28px;line-height:1.6}
.ins-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ins-item{background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;padding:18px 16px;font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.1px;transition:border-color .2s, background .2s, color .2s}
.ins-item:hover{border-color:var(--red);color:var(--red);background:#fff}

/* ========== BLOG / FIELD NOTES ========== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:32px 28px;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s, border-color .2s;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.blog-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(192,0,14,.20)}
.blog-card:hover::before{transform:scaleX(1)}
.blog-card .blog-cat{display:inline-block;font-size:11px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
.blog-card h3{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.3px;line-height:1.3;margin-bottom:10px;flex:1}
.blog-card p{font-size:14px;color:var(--text-dim);line-height:1.6;margin-bottom:18px}
.blog-card .blog-read{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--red);margin-top:auto}
.blog-card .blog-read svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.blog-card:hover .blog-read svg{transform:translateX(3px)}

/* ========== WHY US ========== */
.why-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.why-content h2{font-size:clamp(28px, 3.4vw, 40px);font-weight:800;color:var(--text);letter-spacing:-1px;line-height:1.1;margin-bottom:18px}
.why-content p{font-size:16px;color:var(--text-dim);line-height:1.7;margin-bottom:24px}
.why-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.why-list li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;color:var(--text);line-height:1.55}
.why-list li::before{content:'';display:inline-block;flex-shrink:0;width:24px;height:24px;border-radius:50%;background:rgba(192,0,14,.10);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0000e' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat;margin-top:1px}
.why-aside{background:#fff;border:1px solid var(--border);border-top:3px solid var(--red);border-radius:16px;padding:32px;position:sticky;top:96px;box-shadow:var(--shadow)}
.why-aside h3{font-size:14px;font-weight:800;color:var(--text);letter-spacing:.02em;margin-bottom:18px;text-transform:uppercase}
.why-row{display:flex;justify-content:space-between;font-size:14px;padding:10px 0;border-bottom:1px solid var(--border-soft)}
.why-row:last-of-type{border-bottom:none}
.why-row span{color:var(--text-dim)}
.why-row strong{color:var(--text);font-weight:700}
.why-aside .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.why-aside .btns .btn-primary,.why-aside .btns .btn-secondary{padding:11px;font-size:13px;width:100%}

/* ========== REVIEWS ========== */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.rev-card{background:#fff;border:1px solid var(--border);border-top:3px solid var(--red);border-radius:14px;padding:30px 28px;box-shadow:var(--shadow-sm)}
.rev-stars{color:#e5a30c;font-size:16px;letter-spacing:.06em;margin-bottom:14px}
.rev-card p{font-size:15px;color:var(--text);line-height:1.65;margin-bottom:18px}
.rev-name{font-size:13px;font-weight:700;color:var(--text-mute);letter-spacing:.02em}

/* ========== FAQ ========== */
.faq{display:flex;flex-direction:column;gap:8px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item:hover{box-shadow:var(--shadow-sm)}
.faq-item.open{border-color:rgba(192,0,14,.40);box-shadow:var(--shadow-sm)}
.faq-q{font-size:16px;font-weight:600;color:var(--text);padding:22px 26px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-q::after{content:'+';font-size:22px;color:var(--red);flex-shrink:0;transition:transform .25s;font-weight:400}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{font-size:14.5px;color:var(--text-dim);line-height:1.7;padding:0 26px 22px;display:none}
.faq-item.open .faq-a{display:block}

/* ========== LOCATIONS GRID (3 across · 2 rows · 6 visible) ========== */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.loc-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s;display:block;box-shadow:var(--shadow-sm)}
.loc-card:hover{transform:translateY(-3px);border-color:rgba(192,0,14,.20);box-shadow:var(--shadow)}
.loc-card h4{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.2px;margin-bottom:6px}
.loc-card p{font-size:13px;color:var(--text-dim);line-height:1.5;margin-bottom:10px}
.loc-tag{font-size:11px;font-weight:700;color:var(--red);letter-spacing:.06em;text-transform:uppercase}

/* ========== CTA SECTION ========== */
.cta-section{padding:80px 0;background:var(--bg-alt)}
.cta-band{background:#fff;border:1px solid var(--border);border-top:4px solid var(--red);border-radius:20px;padding:56px 56px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;box-shadow:var(--shadow-lg)}
.cta-band h2{font-size:clamp(28px, 3.4vw, 40px);font-weight:800;color:var(--text);letter-spacing:-1px;line-height:1.1;margin-bottom:10px}
.cta-band p{font-size:16px;color:var(--text-dim);max-width:480px;line-height:1.6}
.cta-r{display:flex;flex-direction:column;gap:12px;align-items:flex-end;flex-shrink:0}
.cta-phone{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.6px}
.cta-phone:hover{color:var(--red)}

/* ========== FOOTER (DARK for contrast - keeps logo recognizable) ========== */
.footer{background:#0e1726;color:#fff;padding:64px 0 24px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;margin-bottom:48px}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.foot-brand img{height:40px;width:auto}
.foot-brand .name{font-size:15px;font-weight:800;letter-spacing:.02em;color:#fff}
.foot-col p{font-size:14px;color:rgba(255,255,255,.55);line-height:1.65;margin-bottom:14px;max-width:340px}
.foot-col h4{font-size:11px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px}
.foot-col a,.foot-col span{display:block;font-size:14px;color:rgba(255,255,255,.55);padding:5px 0;font-weight:400;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-stars{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;color:rgba(255,255,255,.65)}
.foot-stars .gold{color:#fbbf24;font-weight:800}
.foot-social{display:flex;gap:10px;margin-top:14px}
.foot-social a{display:inline-flex;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);align-items:center;justify-content:center;padding:0;font-size:14px;font-weight:600}
.foot-social a:hover{background:rgba(192,0,14,.20);border-color:rgba(192,0,14,.5);color:#fff}
.foot-bot{padding-top:24px;border-top:1px solid rgba(255,255,255,.10);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;color:rgba(255,255,255,.45)}
.foot-bot a{color:rgba(255,255,255,.6);padding:0 0 0 14px}
.foot-bot a:hover{color:#fff}

/* ========== MOBILE ========== */
@media(max-width:1100px){
  .proc-grid{grid-template-columns:repeat(3,1fr)}
  .proc-flow::before{display:none}
}
@media(max-width:900px){
  .container{padding:0 18px}
  .nav-menu{display:none}
  .nav-phone{display:none}
  .hamburger{display:flex}
  .hero{padding:48px 0 64px}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-badges{grid-template-columns:repeat(2,1fr)}
  .section{padding:64px 0}
  .why-grid{grid-template-columns:1fr;gap:36px}
  .why-aside{position:static}
  .proc-grid{grid-template-columns:repeat(2,1fr)}
  .paths-grid{grid-template-columns:1fr;gap:14px}
  .path-card{padding:28px 24px}
  .hail-hits{padding:64px 0}
  .hh-grid{grid-template-columns:1fr;gap:36px}
  .hh-stats{grid-template-columns:1fr 1fr}
  .hh-card{padding:22px}
  .tl-wrap{grid-template-columns:1fr;gap:32px}
  .tl-checklist{position:static}
  .ins-grid{grid-template-columns:repeat(3,1fr)}
  .loc-grid{grid-template-columns:repeat(2,1fr)}
  .ins-band{padding:28px 22px}
  .blog-grid{grid-template-columns:1fr}
  .cmp{font-size:13px}
  .cmp thead th, .cmp tbody td{padding:12px 14px;font-size:13px}
  .cta-band{padding:36px 28px;flex-direction:column;align-items:flex-start}
  .cta-r{align-items:flex-start;width:100%}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .topstrip{font-size:12px;padding:7px 0}
  .topstrip .container{gap:12px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:560px){
  .ins-grid{grid-template-columns:repeat(2,1fr)}
  .loc-grid{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr}
  .hero-badges{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .hero h1{font-size:36px}
  .topstrip .div{display:none}
}

/* ============================================================
   LEGACY OVERRIDES — old-page class names mapped to new theme
   These rules apply when this CSS is loaded by an existing page
   that uses the original markup. Lets us theme 65 pages without
   re-writing each page's HTML structure.
   ============================================================ */

/* Reset old CSS vars from old pages so dark/red palette swaps to new */
:root{
  --red:#c0000e;
  --red-bright:#dc0010;
  --chrome:#0e1726;
  --chrome-light:#0e1726;
  --dark:#ffffff;
  --dark2:#f6f8fb;
  --dark3:#ffffff;
  --dark4:#fafbfd;
}
/* Lock the page so dropdowns can't stretch the layout */
html,body{overflow-x:hidden!important;max-width:100vw!important}

/* Old top-bar (red strip) → new dark navy strip with red accents */
.top-bar{background:var(--navy-deep)!important;color:#fff;padding:9px max(24px, calc((100vw - 1180px) / 2))!important;display:flex;align-items:center;justify-content:center;gap:18px;border-bottom:1px solid rgba(255,255,255,.06)}
.top-bar a{color:#fff!important;font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.01em;font-weight:600;text-transform:none}
.top-bar a:hover{color:#fff!important;text-decoration:underline}
.top-bar-div{color:rgba(255,255,255,.30)}

/* Old <nav> → sticky dark navy nav, content constrained to 1240px to match homepage */
nav{position:sticky!important;top:0!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px max(24px, calc((100vw - 1180px) / 2))!important;background:rgba(14,23,38,.96)!important;backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)!important;color:#fff}
@media(max-width:900px){
  nav{padding:10px 18px!important}
}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.nav-shield{height:42px;width:auto}
.nav-wt{font-family:'Inter',sans-serif!important;font-size:16px!important;font-weight:800!important;letter-spacing:.02em!important;color:#fff!important;line-height:1!important;text-transform:none!important}
.nav-ws{font-family:'Inter',sans-serif!important;font-size:10px!important;color:rgba(255,255,255,.5)!important;font-weight:500!important;letter-spacing:.08em!important;text-transform:uppercase!important}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative}
.nav-links>li>a{font-family:'Inter',sans-serif!important;font-size:14px!important;font-weight:500!important;color:rgba(255,255,255,.78)!important;padding:9px 14px!important;border-radius:8px;display:block;transition:color .15s,background .15s;letter-spacing:0!important;text-transform:none!important}
.nav-links>li>a:hover,.nav-links>li>a.act{color:#fff!important;background:rgba(255,255,255,.06)!important;border-bottom:none!important}
/* Old pages' nav <li class="dd"> with .dd-menu inside — explicitly NOT display:none */
.nav-links>li{position:relative;display:list-item!important}
li.dd{position:relative!important;display:list-item!important}
/* Dropdown menu container — invisible until hover */
li.dd .dd-menu{display:none!important;position:absolute!important;top:100%!important;left:0!important;right:auto!important;min-width:240px!important;max-width:340px!important;background:var(--navy)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:12px;padding:6px!important;margin-top:0!important;box-shadow:0 24px 64px rgba(0,0,0,.4)!important;z-index:200;flex-direction:column}
/* Padding-top creates the visual gap WITHOUT a gap that breaks hover */
li.dd .dd-menu::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px}
li.dd:hover .dd-menu{display:flex!important}
/* Right-align dropdowns when they're in the last 3 nav items */
.nav-links>li:nth-last-child(-n+3) .dd-menu{left:auto!important;right:0!important}
li.dd .dd-menu a{display:block!important;font-family:'Inter',sans-serif!important;font-size:13.5px!important;font-weight:500!important;color:rgba(255,255,255,.78)!important;padding:9px 14px!important;border-radius:8px!important;text-transform:none!important;letter-spacing:0!important;white-space:nowrap;min-width:0}
li.dd .dd-menu a:hover{background:rgba(192,0,14,.18)!important;color:#fff!important}
/* Nav red CTA — kill clip-path */
.nav-cta{background:var(--red)!important;color:#fff!important;font-family:'Inter',sans-serif;font-weight:700!important;font-size:14px!important;padding:10px 18px!important;border-radius:8px!important;letter-spacing:.01em!important;text-transform:none!important;clip-path:none!important;box-shadow:0 4px 14px rgba(192,0,14,.30)}
.nav-cta:hover{background:var(--red-bright)!important;transform:translateY(-1px);color:#fff!important}
.hamburger span{background:#fff!important}

/* Nav phone link (added to old pages so they match the homepage) */
nav .nav-right{display:flex;align-items:center;gap:8px}
nav .nav-phone{font-family:'Inter',sans-serif!important;font-size:14px!important;font-weight:700!important;color:#fff!important;padding:9px 12px!important;display:inline-flex!important;align-items:center;gap:8px;text-decoration:none;letter-spacing:0!important}
nav .nav-phone svg{stroke-width:2.2;flex-shrink:0}
nav .nav-phone:hover{color:var(--red)!important}
@media(max-width:900px){
  nav .nav-phone{display:none!important}
}

/* Old mobile nav — hidden by default, shown only when toggled open */
#mob-nav{display:none!important;position:fixed!important;top:0;left:0;right:0;bottom:0;z-index:99;overflow-y:auto;background:#fff!important;color:var(--text)!important;padding-top:96px;flex-direction:column}
#mob-nav.open{display:flex!important}
/* Hamburger only shows on mobile */
.hamburger{display:none!important;position:fixed;top:14px;left:14px;width:40px;height:40px;background:var(--navy)!important;border:1px solid rgba(255,255,255,.10);border-radius:8px;align-items:center;justify-content:center;z-index:150;cursor:pointer}
@media(max-width:900px){
  .hamburger{display:flex!important}
}
.mn-link,.mn-toggle{color:var(--text)!important;font-family:'Inter',sans-serif!important;font-size:15px!important;letter-spacing:0!important;text-transform:none!important;border-bottom-color:var(--border-soft)!important;font-weight:600!important;padding:14px 28px!important}
.mn-toggle.open{color:var(--red)!important}
.mn-plus{color:var(--red)!important}
.mn-sub{background:var(--bg-tint)!important}
.mn-sub a{color:var(--text-dim)!important;font-family:'Inter',sans-serif!important;font-size:14px!important;letter-spacing:0!important;text-transform:none!important;border-bottom-color:var(--border-soft)!important;padding:13px 28px 13px 44px!important}
.mn-sub a:hover{color:var(--red)!important}
.mn-cta{background:var(--red)!important;color:#fff!important;clip-path:none!important;border-radius:10px!important;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:14px!important;letter-spacing:.01em!important;text-transform:none!important;margin:24px 20px 0!important;padding:14px 28px!important}

/* Old page hero (.ph) → dark navy with red radial glow (autohailtechs-style) */
.ph{padding:120px max(24px, calc((100vw - 1180px) / 2)) 80px!important;background:radial-gradient(1100px circle at 50% 0%, rgba(192,0,14,.22), transparent 60%), linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%)!important;color:#fff!important;position:relative;overflow:hidden;border-bottom:none!important;isolation:isolate}
/* Smaller hero on article-containing pages (blog posts, etc.) */
body:has(.article) .ph{padding:96px 60px 60px!important}
body:has(.article) .ph h1{font-size:clamp(28px, 4vw, 44px)!important}
.ph::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)!important;background-size:42px 42px!important;opacity:.6!important;pointer-events:none;z-index:-1}
.ph::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(to bottom, transparent, var(--bg-alt));pointer-events:none}
.ph-inner{position:relative;z-index:1;max-width:820px;margin:0 auto!important;text-align:center!important}
.ph-inner > *{margin-left:auto!important;margin-right:auto!important}
.ph-inner .blog-back{display:inline-flex!important;margin-top:24px!important;color:rgba(255,255,255,.85)!important;border-top:none!important;padding-top:0!important;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:8px 14px!important;background:rgba(255,255,255,.06)}
.ph-inner .blog-back:hover{background:rgba(255,255,255,.10)!important;color:#fff!important}
.ph-inner p .blog-back{display:inline-flex!important}
.ph .lbl{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:11px!important;letter-spacing:.18em!important;color:#dc0010!important;text-transform:uppercase!important;margin-bottom:16px!important;background:rgba(192,0,14,.14);border:1px solid rgba(192,0,14,.30);border-radius:999px;padding:7px 16px}
.ph .lbl::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#dc0010}
.ph h1{font-family:'Inter',sans-serif!important;font-weight:800!important;font-size:clamp(38px, 5.2vw, 64px)!important;letter-spacing:-2px!important;line-height:1.05!important;color:#fff!important;margin-bottom:20px!important;text-transform:none!important}
.ph h1 .r{color:#dc0010!important}
.ph-rule{width:64px;height:3px;background:var(--red);margin:14px auto 22px}
.ph p{font-family:'Inter',sans-serif!important;font-size:1.08rem!important;color:rgba(255,255,255,.78)!important;line-height:1.7!important;max-width:600px;margin:0 auto 28px auto!important;font-weight:400!important}
.ph-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}

/* Old buttons (.br / .bg with clip-path) → modern rounded buttons */
.br{background:var(--red)!important;color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:14.5px!important;letter-spacing:.01em!important;text-transform:none!important;padding:14px 24px!important;border-radius:10px!important;clip-path:none!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 16px rgba(192,0,14,.22)!important;transition:background .15s,transform .15s,box-shadow .15s!important;text-decoration:none!important}
.br:hover{background:var(--red-bright)!important;transform:translateY(-1px);box-shadow:0 8px 24px rgba(192,0,14,.32)!important;color:#fff!important}
.bg{background:rgba(255,255,255,.06)!important;color:#fff!important;font-family:'Inter',sans-serif!important;font-weight:600!important;font-size:14.5px!important;letter-spacing:.01em!important;text-transform:none!important;padding:13px 22px!important;border-radius:10px!important;border:1px solid rgba(255,255,255,.20)!important;clip-path:none!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;text-decoration:none!important;transition:background .15s,border-color .15s!important}
.bg:hover{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.36)!important;color:#fff!important}
/* On light sections, ghost button switches to navy outline */
.sec .bg, .sa .bg, .ctab .bg{background:#fff!important;color:var(--text)!important;border:1px solid var(--border)!important}
.sec .bg:hover, .sa .bg:hover, .ctab .bg:hover{background:var(--bg-alt)!important;border-color:var(--red)!important;color:var(--red)!important}

/* Old sections (.sec / .sa) → content centered within 1180px content column */
.sec{padding:88px max(24px, calc((100vw - 1180px) / 2))!important;background:#fff!important;color:var(--text)!important;border-bottom:none!important}
.sa{padding:88px max(24px, calc((100vw - 1180px) / 2))!important;background:var(--bg-alt)!important;color:var(--text)!important}
/* Standalone section header — when h2.ttl sits OUTSIDE .cg as a section title */
.sec>.lbl,.sa>.lbl,
.sec>.sc>.lbl,.sa>.sc>.lbl{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:11px!important;letter-spacing:.16em!important;color:var(--red)!important;text-transform:uppercase!important;margin-bottom:12px!important;background:none!important;border:none!important;padding:0!important;border-radius:0!important}
.sec>.lbl::before,.sa>.lbl::before,
.sec>.sc>.lbl::before,.sa>.sc>.lbl::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red)}
.sec>.ttl,.sa>.ttl,
.sec>.sc>.ttl,.sa>.sc>.ttl{font-family:'Inter',sans-serif!important;font-weight:800!important;font-size:clamp(28px, 3.6vw, 40px)!important;letter-spacing:-1px!important;line-height:1.15!important;color:var(--text)!important;margin:0 0 14px!important;text-transform:none!important;max-width:680px}
.sec>.dsc,.sa>.dsc,
.sec>.sc>.dsc,.sa>.sc>.dsc{font-family:'Inter',sans-serif!important;font-size:16px!important;line-height:1.7!important;color:var(--text-dim)!important;font-weight:400!important;margin:0 0 36px!important;max-width:680px}
/* When section is centered (reviews, standalone centered headers), ensure title/desc center as blocks too */
.sec:has(.revs)>.ttl,.sa:has(.revs)>.ttl,
.sec:has(.revs)>.sc>.ttl,.sa:has(.revs)>.sc>.ttl{margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.sec:has(.revs)>.dsc,.sa:has(.revs)>.dsc,
.sec:has(.revs)>.sc>.dsc,.sa:has(.revs)>.sc>.dsc{margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.sec:has(.revs)>.lbl,.sa:has(.revs)>.lbl,
.sec:has(.revs)>.sc>.lbl,.sa:has(.revs)>.sc>.lbl{display:inline-flex!important}
/* When the section has a header THEN a .cg below, give the cg some breathing room */
.sec>.ttl+.cg,.sa>.ttl+.cg,
.sec>.dsc+.cg,.sa>.dsc+.cg{margin-top:8px}
@media(max-width:900px){
  .sec, .sa{padding:56px 22px!important}
}

/* Old labels and titles (.lbl, .ttl, .dsc) on light sections */
.sec .lbl, .sa .lbl{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:.74rem!important;letter-spacing:.16em!important;color:var(--red)!important;text-transform:uppercase!important;margin-bottom:12px!important;background:none!important;border:none!important;border-radius:0!important;padding:0!important}
.sec .lbl::before, .sa .lbl::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red)}
.ttl{font-family:'Inter',sans-serif!important;font-weight:800!important;font-size:clamp(28px, 3.6vw, 44px)!important;letter-spacing:-1px!important;color:var(--text)!important;line-height:1.1!important;margin-bottom:14px!important;text-transform:none!important}
.dsc{font-family:'Inter',sans-serif!important;font-size:1.05rem!important;color:var(--text-dim)!important;font-weight:400!important;line-height:1.65!important;max-width:680px}

/* Old card grid (.cards / .card) → new white-card pattern */
.cards{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:18px!important}
.card{background:#fff!important;border:1px solid var(--border)!important;border-radius:14px!important;padding:32px 28px!important;color:var(--text)!important;transition:transform .2s,border-color .2s,box-shadow .2s!important;box-shadow:var(--shadow-sm)!important;border-top:none!important;position:relative;overflow:hidden;display:block;text-decoration:none}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.card:hover{transform:translateY(-4px)!important;border-color:rgba(192,0,14,.20)!important;box-shadow:var(--shadow-lg)!important;background:#fff!important}
.card:hover::before{transform:scaleX(1)}
.card h3{font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:19px!important;letter-spacing:-.3px!important;color:var(--text)!important;margin-bottom:10px!important;text-transform:none!important}
.card p{font-family:'Inter',sans-serif!important;font-size:14px!important;color:var(--text-dim)!important;font-weight:400!important;line-height:1.6}
.card-tag{display:inline-block!important;font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:11px!important;letter-spacing:.10em!important;color:var(--red)!important;border-top:1px solid var(--border-soft)!important;padding-top:14px!important;margin-top:14px!important;text-transform:uppercase!important}

/* Old content blocks (.cb, .cg) → new content layouts */
.cg{display:grid!important;grid-template-columns:1.4fr 1fr!important;gap:56px!important;align-items:start!important;max-width:1180px!important;margin:0 auto!important}
.cb{max-width:760px}
.cb .lbl{margin-bottom:14px!important}
.cb h2{font-family:'Inter',sans-serif!important;font-weight:800!important;font-size:clamp(28px, 3.4vw, 40px)!important;letter-spacing:-1px!important;color:var(--text)!important;line-height:1.15!important;margin:0 0 22px!important;text-transform:none!important}
.cb h3{font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:18px!important;letter-spacing:-.1px!important;color:var(--text)!important;text-transform:none!important;margin:36px 0 12px!important;padding-left:14px!important;position:relative;line-height:1.3!important}
.cb h3::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--red)}
.cb p{font-family:'Inter',sans-serif!important;font-size:16px!important;color:var(--text-dim)!important;font-weight:400!important;line-height:1.75!important;margin:0 0 18px!important}
.cb p:last-child{margin-bottom:0!important}
.cb p strong{color:var(--text);font-weight:700}
.cb ul{list-style:none;display:flex!important;flex-direction:column;gap:12px;margin:0 0 28px!important;padding:0}
.cb ul li{display:flex!important;align-items:flex-start!important;gap:12px!important;font-family:'Inter',sans-serif!important;font-size:15.5px!important;color:var(--text)!important;font-weight:400!important;line-height:1.6!important}
.cb a.br,.cb a.bg{margin-top:8px!important}

/* Each .cb h3 starts a new "subsection" — divider above for clear breaks */
.cb h3{margin-top:40px!important;padding-top:24px!important;border-top:1px solid var(--border-soft)}
.cb h3:first-of-type{margin-top:32px!important;padding-top:0!important;border-top:none!important}

/* Bulleted list with bold names (e.g., "Cinco Ranch — flagship community...")
   becomes a clean 2-col grid — only applies when items have <strong> tags */
.cb ul:has(li strong){display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 24px!important;margin-bottom:28px!important;background:var(--bg-tint);border:1px solid var(--border);border-radius:12px;padding:8px 20px}
.cb ul:has(li strong) li{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:14px 0!important;border-bottom:1px solid var(--border-soft)!important;font-size:14.5px!important;line-height:1.55!important}
.cb ul:has(li strong) li:last-child,.cb ul:has(li strong) li:nth-last-child(2):nth-child(odd){border-bottom:none!important}
.cb ul:has(li strong) li strong{color:var(--text)!important;font-weight:700!important;display:inline-block;margin-right:4px}
@media(max-width:680px){
  .cb ul:has(li strong){grid-template-columns:1fr!important;padding:8px 16px}
  .cb ul:has(li strong) li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--border-soft)!important}
}

@media(max-width:900px){
  .cg{grid-template-columns:1fr!important;gap:32px!important}
  .cb{max-width:100%}
  .cb h3{margin-top:32px!important}
}
.cb ul li::before{content:''!important;display:inline-block!important;flex-shrink:0!important;width:24px!important;height:24px!important;border-radius:50%!important;background:rgba(192,0,14,.10)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0000e' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")!important;background-size:14px!important;background-position:center!important;background-repeat:no-repeat!important;color:transparent!important;font-weight:400!important;margin-top:1px!important}

/* Old sidebar (.sidebar) → polished sticky info card with red top */
.sidebar{background:#fff!important;border:1px solid var(--border)!important;border-top:3px solid var(--red)!important;border-left:none!important;border-radius:14px!important;padding:28px!important;color:var(--text)!important;box-shadow:var(--shadow)!important;position:sticky;top:96px}
.sidebar h3{font-family:'Inter',sans-serif!important;font-weight:800!important;font-size:11px!important;color:var(--red)!important;letter-spacing:.14em!important;margin-bottom:16px!important;text-transform:uppercase!important;display:inline-flex;align-items:center;gap:8px}
.sidebar h3::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red)}
.ir{font-family:'Inter',sans-serif!important;display:flex!important;justify-content:space-between!important;align-items:baseline;font-size:14px!important;padding:11px 0!important;border-bottom:1px solid var(--border-soft)!important;letter-spacing:0!important;gap:12px}
.ir:last-of-type{border-bottom:none!important}
.ir span:first-child{color:var(--text-mute)!important;text-transform:none!important;font-weight:500!important;font-size:13px!important}
.ir span:last-child{color:var(--text)!important;font-weight:700!important;text-align:right}
.sidebar p{font-family:'Inter',sans-serif!important;font-size:14px!important;color:var(--text-dim)!important;line-height:1.65!important;margin:0 0 12px!important}
.sidebar p:last-of-type{margin-bottom:0!important}
@media(max-width:900px){.sidebar{position:static}}

/* Reviews section — center the heading + cards on every page (old + new) */
.sec:has(.revs),.sa:has(.revs){text-align:center}
.sec:has(.revs) .lbl,.sa:has(.revs) .lbl{margin-left:auto;margin-right:auto}
.sec:has(.revs) .ttl,.sa:has(.revs) .ttl{text-align:center;margin-left:auto;margin-right:auto}
.sec:has(.revs) .dsc,.sa:has(.revs) .dsc{margin-left:auto!important;margin-right:auto!important;text-align:center}
.sec:has(.revs)>div,.sa:has(.revs)>div{max-width:1180px;margin-left:auto;margin-right:auto}
/* New homepage rev-grid centering too */
.rev-grid{justify-content:center;max-width:1180px;margin-left:auto!important;margin-right:auto!important}
.section:has(.rev-grid) .sec-head{text-align:center;justify-content:center}
.section:has(.rev-grid) .sec-head-text{margin-left:auto;margin-right:auto}
.section:has(.rev-grid) .sec-eyebrow{justify-content:center}

/* Old reviews (.revs / .rv) → new white review cards */
.revs{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;gap:18px!important;justify-content:center;max-width:1180px;margin:0 auto}
.revs .rv{text-align:left}
.rv{background:#fff!important;border:1px solid var(--border)!important;border-top:3px solid var(--red)!important;border-radius:14px!important;padding:30px 28px!important;color:var(--text)!important;box-shadow:var(--shadow-sm)!important}
.sts{color:#e5a30c!important;font-size:16px!important;letter-spacing:.06em!important;margin-bottom:14px!important}
.rv p{font-family:'Inter',sans-serif!important;font-size:15px!important;color:var(--text)!important;font-weight:400!important;line-height:1.65!important;font-style:normal!important;margin-bottom:18px!important}
.rv-n{font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:13px!important;letter-spacing:.02em!important;color:var(--text-mute)!important;text-transform:none!important}

/* Scrolling services ticker — hidden site-wide */
.ticker{display:none!important}

/* Old CTA band (.ctab) → white card with red top */
/* Bottom CTA card — wraps in tinted bg section with breathing room before footer */
.ctab{background:#fff!important;border:1px solid var(--border)!important;border-top:4px solid var(--red)!important;border-radius:20px!important;padding:56px 56px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:32px!important;flex-wrap:wrap!important;color:var(--text)!important;box-shadow:var(--shadow-lg)!important;margin:64px auto 64px auto!important;max-width:1080px!important;width:calc(100% - 48px)}
.ctab>div:first-child{flex:1;min-width:280px;max-width:560px}
.ctab h2{margin-bottom:10px!important}
.ctab p{margin:0!important}
.ctab .ctab-r{display:flex;flex-direction:column;gap:14px;align-items:flex-end!important;flex-shrink:0}
.ctab .cph{font-size:30px!important;font-weight:800!important;letter-spacing:-.6px!important;line-height:1!important;text-decoration:none}
.ctab .br{padding:14px 28px!important}
@media(max-width:900px){
  .ctab{margin:36px auto 36px auto!important;padding:40px 28px!important;flex-direction:column!important;align-items:center!important;text-align:center!important;width:calc(100% - 32px)}
  .ctab>div:first-child{text-align:center;max-width:100%}
  .ctab .ctab-r{width:100%;align-items:center!important}
  .ctab .cph{font-size:26px!important}
  .ctab .br{width:100%;justify-content:center;text-align:center}
}
.ctab::before{display:none!important}
.ctab h2{font-family:'Inter',sans-serif!important;font-weight:800!important;font-size:clamp(28px, 3.4vw, 40px)!important;letter-spacing:-1px!important;color:var(--text)!important;line-height:1.1!important;margin-bottom:10px!important;text-transform:none!important}
.ctab p{font-family:'Inter',sans-serif!important;font-size:16px!important;color:var(--text-dim)!important;font-weight:400!important;line-height:1.6!important}
.cph{font-family:'Inter',sans-serif!important;font-weight:800!important;font-size:28px!important;color:var(--text)!important;letter-spacing:-.6px!important}
.cph:hover{color:var(--red)!important}

/* Any section containing an .faq accordion gets the homepage's dark-navy + red-glow treatment */
section.sec:has(.faq),
section.sa:has(.faq){padding:80px max(24px, calc((100vw - 1180px) / 2))!important;background:radial-gradient(900px circle at 80% 20%, rgba(220,0,16,.20), transparent 60%), radial-gradient(700px circle at 15% 85%, rgba(192,0,14,.14), transparent 60%), linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%)!important;color:#fff!important;position:relative;overflow:hidden;isolation:isolate}
section.sec:has(.faq)::before,
section.sa:has(.faq)::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);background-size:42px 42px;opacity:.5;pointer-events:none;z-index:-1}
/* Center the FAQ section header and recolor */
section.sec:has(.faq)>div:first-child,
section.sa:has(.faq)>div:first-child,
section.sec:has(.faq)>.sc>div:first-child,
section.sa:has(.faq)>.sc>div:first-child{text-align:center;max-width:680px;margin:0 auto 36px}
section.sec:has(.faq) .lbl,
section.sa:has(.faq) .lbl{color:#ff5252!important;background:rgba(192,0,14,.14)!important;border:1px solid rgba(192,0,14,.32)!important;border-radius:999px!important;padding:6px 14px!important;display:inline-flex!important}
section.sec:has(.faq) .lbl::before,
section.sa:has(.faq) .lbl::before{background:#ff5252!important}
section.sec:has(.faq) .ttl,
section.sa:has(.faq) .ttl{color:#fff!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important}
section.sec:has(.faq) .dsc,
section.sa:has(.faq) .dsc{color:rgba(255,255,255,.78)!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important}
/* FAQ accordion items on dark — translucent glass cards */
section.sec:has(.faq) .faq,
section.sa:has(.faq) .faq{max-width:720px!important;margin:0 auto!important}
section.sec:has(.faq) .fi,
section.sa:has(.faq) .fi{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)!important;backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,.20)!important}
section.sec:has(.faq) .fi:hover,
section.sa:has(.faq) .fi:hover{background:rgba(255,255,255,.06)!important;border-color:rgba(192,0,14,.30)!important}
section.sec:has(.faq) .fi.open,
section.sa:has(.faq) .fi.open{border-color:rgba(192,0,14,.50)!important;background:rgba(255,255,255,.06)!important;box-shadow:0 8px 24px rgba(0,0,0,.30)!important}
section.sec:has(.faq) .fq,
section.sa:has(.faq) .fq{color:#fff!important}
section.sec:has(.faq) .fi:hover .fq,
section.sa:has(.faq) .fi:hover .fq{color:#fff!important}
section.sec:has(.faq) .fq::before,
section.sa:has(.faq) .fq::before{background:rgba(255,255,255,.18)!important}
section.sec:has(.faq) .fi:hover .fq::before,
section.sa:has(.faq) .fi:hover .fq::before{background:rgba(255,82,82,.50)!important}
section.sec:has(.faq) .fi.open .fq::before,
section.sa:has(.faq) .fi.open .fq::before{background:#ff5252!important;box-shadow:0 0 0 4px rgba(255,82,82,.16)!important}
section.sec:has(.faq) .fq::after,
section.sa:has(.faq) .fq::after{border-right-color:#ff5252!important;border-bottom-color:#ff5252!important}
section.sec:has(.faq) .fa,
section.sa:has(.faq) .fa{color:rgba(255,255,255,.72)!important}
/* "Still have questions?" CTA on dark bg */
section.sec:has(.faq) .faq-cta,
section.sa:has(.faq) .faq-cta{background:rgba(255,255,255,.04)!important;border:1px dashed rgba(255,82,82,.40)!important}
section.sec:has(.faq) .faq-cta-text strong,
section.sa:has(.faq) .faq-cta-text strong{color:#fff!important}
section.sec:has(.faq) .faq-cta-text span,
section.sa:has(.faq) .faq-cta-text span{color:rgba(255,255,255,.65)!important}

/* Old FAQ (.faq, .fi, .fq, .fa) — refined accordion w/ chevron, dot indicator, smoother feel */
.faq{display:flex!important;flex-direction:column!important;gap:10px!important;max-width:760px!important;margin:0 auto!important;padding:0!important}
.fi{background:#fff!important;border:1px solid var(--border)!important;border-radius:12px!important;overflow:hidden!important;transition:border-color .2s, box-shadow .2s, transform .2s!important}
.fi:hover{box-shadow:var(--shadow-sm)!important;border-color:rgba(192,0,14,.20)!important}
.fi.open{border-color:rgba(192,0,14,.45)!important;box-shadow:var(--shadow)!important}
.fq{font-family:'Inter',sans-serif!important;font-weight:600!important;font-size:16px!important;letter-spacing:-.1px!important;color:var(--text)!important;text-transform:none!important;padding:20px 24px 20px 50px!important;cursor:pointer;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:14px;position:relative;transition:color .15s}
.fq::before{content:'';position:absolute;left:22px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .2s, box-shadow .2s}
.fi:hover .fq::before{background:rgba(192,0,14,.30)}
.fi.open .fq::before{background:var(--red);box-shadow:0 0 0 4px rgba(192,0,14,.12)}
.fi:hover .fq{color:var(--red)}
.fi.open .fq{color:var(--text)}
.fq::after{content:''!important;width:14px!important;height:14px!important;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg) translateY(-2px);flex-shrink:0;transition:transform .25s ease;font-size:0!important}
.fi.open .fq::after{transform:rotate(225deg) translateY(2px)}
.fa{font-family:'Inter',sans-serif!important;font-size:14.5px!important;color:var(--text-dim)!important;font-weight:400!important;line-height:1.75!important;padding:0 24px 22px 50px!important;display:none}
.fi.open .fa{display:block;animation:fa-slide .25s ease both}
@keyframes fa-slide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* "Still have questions?" CTA after FAQ */
.faq-cta{max-width:760px;margin:24px auto 0;padding:24px 28px;background:var(--bg-tint);border:1px dashed rgba(192,0,14,.32);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.faq-cta-text{flex:1;min-width:240px}
.faq-cta-text strong{display:block;font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px}
.faq-cta-text span{font-family:'Inter',sans-serif;font-size:13.5px;color:var(--text-dim)}
.faq-cta a{flex-shrink:0}
@media(max-width:680px){
  .faq-cta{flex-direction:column;align-items:flex-start;padding:20px}
}

/* Same refinements for homepage's .faq-item / .faq-q / .faq-a */
.faq-item{transition:border-color .2s, box-shadow .2s!important}
.faq-item:hover{border-color:rgba(192,0,14,.20)!important}
.faq-q{padding:20px 24px 20px 50px!important;position:relative;transition:color .15s}
.faq-q::before{content:'';position:absolute;left:22px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .2s, box-shadow .2s}
.faq-item:hover .faq-q::before{background:rgba(192,0,14,.30)}
.faq-item.open .faq-q::before{background:var(--red);box-shadow:0 0 0 4px rgba(192,0,14,.12)}
.faq-item:hover .faq-q{color:var(--red)}
.faq-q::after{content:''!important;width:14px!important;height:14px!important;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg) translateY(-2px)!important;flex-shrink:0;transition:transform .25s ease;font-size:0!important}
.faq-item.open .faq-q::after{transform:rotate(225deg) translateY(2px)!important}
.faq-a{padding:0 24px 22px 50px!important}
.faq-item.open .faq-a{animation:fa-slide .25s ease both}

/* Old footer (footer / .ft / .fc / .fb / .fcp) → dark navy footer */
footer{background:#0e1726!important;color:#fff!important;border-top:none!important;padding:64px 60px 24px!important}
.ft{display:grid!important;grid-template-columns:1.6fr 1fr 1fr 1.2fr!important;gap:48px!important;margin-bottom:48px!important;max-width:1180px;margin-left:auto;margin-right:auto}
.fc h4{font-family:'Inter',sans-serif!important;font-weight:800!important;font-size:11px!important;letter-spacing:.12em!important;color:#fff!important;text-transform:uppercase!important;margin-bottom:18px!important}
.fc a, .fc span{font-family:'Inter',sans-serif!important;display:block;font-size:14px!important;letter-spacing:0!important;color:rgba(255,255,255,.55)!important;text-transform:none!important;font-weight:400!important;padding:5px 0!important;transition:color .15s}
.fc a:hover{color:#fff!important}
.fb{display:flex!important;justify-content:space-between!important;align-items:center!important;flex-wrap:wrap!important;gap:10px!important;padding-top:24px!important;border-top:1px solid rgba(255,255,255,.10)!important;max-width:1180px;margin-left:auto;margin-right:auto}
.fcp{font-family:'Inter',sans-serif!important;font-size:12px!important;letter-spacing:.02em!important;color:rgba(255,255,255,.45)!important;text-transform:none!important}
.fb a{color:rgba(255,255,255,.6)!important;padding:0 0 0 14px!important}
.fb a:hover{color:#fff!important}
/* Footer brand logo: keep colors, remove old AI brightness filter */
footer img[src*="logo"], .fc img{filter:none!important;height:40px!important}
/* Footer "PRO PDR" brand text — was hardcoded #444 inline (dark gray) — force white */
footer .fc>div{color:#fff!important;font-weight:800!important;font-size:1.1rem!important;letter-spacing:.04em!important}

/* Polished Google rating badge in footer brand column */
.foot-google{display:inline-flex;align-items:center;gap:12px;margin-top:14px;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:10px;text-decoration:none;transition:background .2s, border-color .2s, transform .15s;white-space:nowrap}
.foot-google:hover{background:rgba(255,255,255,.08);border-color:rgba(251,191,36,.40);transform:translateY(-1px)}
.foot-google-stars{color:#fbbf24;font-size:14px;letter-spacing:2px;line-height:1;flex-shrink:0}
.foot-google-text{display:flex;flex-direction:column;line-height:1.2}
.foot-google-text strong{font-size:13px;font-weight:800;color:#fff;letter-spacing:0;margin:0}
.foot-google-text span{font-size:11px;color:rgba(255,255,255,.55);font-weight:400;margin-top:2px;letter-spacing:0}

/* Convert the old inline-styled rating row on legacy pages into the same badge */
footer .fc div[style*="color:rgba(255,255,255,.7)"]{display:inline-flex!important;align-items:center!important;gap:12px!important;margin-top:14px!important;padding:10px 14px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:10px!important;white-space:nowrap!important;font-size:13px!important;color:#fff!important;font-weight:800!important;letter-spacing:0!important}
footer .fc div[style*="color:rgba(255,255,255,.7)"] span[style*="#fbbf24"]{color:#fbbf24!important;font-weight:800!important;letter-spacing:2px!important;font-size:14px!important}

/* Hide the author byline block (Joe Trevino / Published / Updated) on blog posts */
.author-byline{display:none!important}

/* Article-containing section: tinted background + reduced padding */
.sec:has(.article){padding:64px 24px 80px!important;background:var(--bg)!important}
.sa:has(.article){padding:64px 24px 80px!important;background:var(--bg)!important}
@media(max-width:900px){
  .sec:has(.article),.sa:has(.article){padding:32px 16px 56px!important}
}

/* Article (.article) — flowing long-form content, no card wrapper */
.article{max-width:760px!important;margin:0 auto!important;background:transparent!important;border:none!important;border-radius:0!important;padding:0 0!important;box-shadow:none!important;color:var(--text)}

/* Drop cap — first letter of the first paragraph after the meta row */
.article .blog-meta-top + p::first-letter,
.article > p:first-of-type::first-letter{font-family:'Inter',sans-serif;font-size:3.6em;font-weight:800;color:var(--red);float:left;line-height:.85;margin:.06em .1em 0 0;padding:0}

/* Inline pull-quote / callout — any blockquote inside an article */
.article blockquote{margin:32px 0!important;padding:20px 24px!important;background:var(--bg-tint);border-left:3px solid var(--red);border-radius:0 8px 8px 0;font-family:'Inter',sans-serif;font-size:17px;font-weight:500;color:var(--text);line-height:1.55;font-style:italic}
.article blockquote::before{content:'"';font-size:48px;line-height:0;vertical-align:-12px;color:var(--red);margin-right:6px;font-family:Georgia,serif;font-weight:700;font-style:normal}

/* Stronger h2 treatment — bigger, with a red rule below */
.article h2{padding:0 0 8px!important;border-bottom:2px solid var(--red);display:inline-block!important;margin:40px 0 20px!important}
.article h2::before{display:none!important}
.article h2:first-child{margin-top:0!important}

/* Service-page section variety — make 2nd .sec.sa compound a dark navy band */
section.sec.sa{padding:80px max(24px, calc((100vw - 1180px) / 2))!important;background:radial-gradient(900px circle at 80% 20%, rgba(220,0,16,.20), transparent 60%), radial-gradient(700px circle at 15% 85%, rgba(192,0,14,.14), transparent 60%), linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%)!important;color:#fff!important;position:relative;overflow:hidden;isolation:isolate}
section.sec.sa::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);background-size:42px 42px;opacity:.5;pointer-events:none;z-index:-1}
section.sec.sa>.ttl,
section.sec.sa>.sc>.ttl{color:#fff!important}
section.sec.sa>.lbl,
section.sec.sa>.sc>.lbl{color:#ff5252!important;background:rgba(192,0,14,.14)!important;border:1px solid rgba(192,0,14,.32)!important;border-radius:999px!important;padding:6px 14px!important}
section.sec.sa>.lbl::before,
section.sec.sa>.sc>.lbl::before{background:#ff5252!important}
section.sec.sa>.dsc,
section.sec.sa>.sc>.dsc{color:rgba(255,255,255,.78)!important}
/* Inside the dark .sec.sa, .cg sub-content gets translucent treatments */
section.sec.sa .cb h2,
section.sec.sa .cb h3{color:#fff!important;border-color:rgba(255,255,255,.10)!important}
section.sec.sa .cb h3::before{background:#ff5252!important}

/* Inside the dark .sec.sa, h3 subsections in the unclassed content column
   become numbered feature cards (auto-counter) — adds structure to walls of text */
section.sec.sa .cg>div:not(.sidebar){counter-reset:darksubsec}
section.sec.sa .cg>div:not(.sidebar) h3{counter-increment:darksubsec;color:#fff!important;font-family:'Inter',sans-serif!important;font-size:18px!important;font-weight:700!important;letter-spacing:-.2px!important;text-transform:none!important;line-height:1.3!important;margin:36px 0 14px!important;padding:0 0 0 52px!important;position:relative;min-height:36px;display:flex;align-items:center}
section.sec.sa .cg>div:not(.sidebar) h3:first-child{margin-top:0!important}
section.sec.sa .cg>div:not(.sidebar) h3::before{content:counter(darksubsec, decimal-leading-zero)!important;position:absolute;left:0;top:0;width:36px;height:36px;background:#c0000e!important;color:#fff!important;border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:0;box-shadow:0 4px 14px rgba(192,0,14,.40)}
/* Paragraphs after each h3 get indented to align with title text + subtle styling */
section.sec.sa .cg>div:not(.sidebar) p{font-family:'Inter',sans-serif!important;font-size:15px!important;color:rgba(255,255,255,.75)!important;font-weight:400!important;line-height:1.7!important;margin:0 0 14px 52px!important;padding-left:0!important}
section.sec.sa .cg>div:not(.sidebar) p:last-of-type{margin-bottom:0}
/* Add a subtle vertical line connecting numbered subsections */
section.sec.sa .cg>div:not(.sidebar){position:relative}
section.sec.sa .cg>div:not(.sidebar)::before{content:'';position:absolute;left:17px;top:36px;bottom:36px;width:2px;background:repeating-linear-gradient(to bottom, rgba(192,0,14,.30) 0 4px, transparent 4px 9px);z-index:0;pointer-events:none}
@media(max-width:680px){
  section.sec.sa .cg>div:not(.sidebar) h3{padding-left:48px!important;font-size:17px!important}
  section.sec.sa .cg>div:not(.sidebar) p{margin-left:48px!important}
  section.sec.sa .cg>div:not(.sidebar)::before{left:16px}
}
section.sec.sa .cb p{color:rgba(255,255,255,.78)!important}
section.sec.sa .cb p strong{color:#fff!important}
section.sec.sa .cb ul:has(li strong){background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.10)!important}
section.sec.sa .cb ul:has(li strong) li{color:rgba(255,255,255,.85)!important;border-bottom-color:rgba(255,255,255,.08)!important}
section.sec.sa .cb ul:has(li strong) li strong{color:#fff!important}
section.sec.sa .cb ul li{color:rgba(255,255,255,.85)!important}
/* Sidebar inside the dark band — keep white card for contrast */
section.sec.sa .sidebar{background:#fff!important;color:var(--text)!important}

/* Blog post meta row — sits at top of article (date · read time · tag) */
.blog-meta-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:0 0 28px;margin:0 0 32px;border-bottom:1px solid var(--border-soft);font-family:'Inter',sans-serif;font-size:13px;color:var(--text-mute)}
.blog-meta-top .meta-left{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap}
.blog-meta-top .meta-item{display:inline-flex;align-items:center;gap:6px}
.blog-meta-top .meta-item svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;color:var(--text-mute)}
.blog-meta-top .tag-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(192,0,14,.08);border:1px solid rgba(192,0,14,.18);border-radius:999px;font-size:11px;font-weight:700;color:var(--red);letter-spacing:.06em;text-transform:uppercase}

/* Back to blog index footer link */
.blog-back{display:inline-flex;align-items:center;gap:8px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border-soft);font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:var(--red);text-decoration:none;transition:gap .15s, color .15s}
.blog-back:hover{color:var(--red-bright);gap:12px}
.blog-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Related services section (bottom of service pages) — autohailtechs pattern */
.related-services{padding:72px max(24px, calc((100vw - 1180px) / 2))!important;background:var(--bg-alt)!important;color:var(--text)}
.related-services .rs-head{text-align:center;max-width:680px;margin:0 auto 36px}
.related-services .rs-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--red);text-transform:uppercase;margin-bottom:10px}
.related-services .rs-eyebrow::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red)}
.related-services h2{font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(24px, 3vw, 32px);letter-spacing:-.6px;color:var(--text);line-height:1.15}
.rs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1180px;margin:0 auto}
.rs-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .2s, border-color .2s, box-shadow .2s;box-shadow:var(--shadow-sm)}
.rs-card:hover{transform:translateY(-3px);border-color:rgba(192,0,14,.20);box-shadow:var(--shadow)}
.rs-card h3{font-family:'Inter',sans-serif;font-weight:700;font-size:16px;color:var(--text);letter-spacing:-.2px;margin-bottom:8px}
.rs-card p{font-family:'Inter',sans-serif;font-size:13.5px;color:var(--text-dim);line-height:1.55;margin-bottom:14px;flex:1}
.rs-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--red);margin-top:auto;transition:gap .15s}
.rs-card:hover .rs-link{gap:10px}
.rs-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .related-services{padding:48px 22px!important}
  .rs-grid{grid-template-columns:1fr;gap:14px}
}
@media(max-width:900px){.article{padding:32px 24px!important;border-radius:10px!important}}
/* The first h2 sits closer to top inside the card */
.article>h2:first-child,.article>h2:nth-child(-n+2){margin-top:0!important}
.article h2{font-family:'Inter',sans-serif!important;font-weight:800!important;letter-spacing:-.6px!important;color:var(--text)!important;text-transform:none!important;margin:32px 0 12px!important;font-size:clamp(20px, 2.6vw, 26px)!important;line-height:1.2!important;padding-left:18px!important;position:relative}
.article h2::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.article h3{font-family:'Inter',sans-serif!important;font-weight:700!important;letter-spacing:0!important;color:var(--text)!important;text-transform:none!important;margin:26px 0 10px!important;font-size:18px!important}
.article p{font-family:'Inter',sans-serif!important;font-size:1.05rem!important;color:var(--text)!important;font-weight:400!important;line-height:1.85!important;margin-bottom:16px!important}
.article ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:18px;padding:0}
.article ul li{display:flex;align-items:flex-start;gap:10px;font-family:'Inter',sans-serif!important;font-size:15.5px!important;color:var(--text)!important;font-weight:400!important;line-height:1.65!important}
.article ul li::before{content:'';display:inline-block;flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(192,0,14,.10);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0000e' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-size:13px;background-position:center;background-repeat:no-repeat;margin-top:2px;color:transparent}
.article-cta{background:#fff!important;border:1px solid var(--border)!important;border-left:3px solid var(--red)!important;border-radius:12px!important;padding:28px 32px!important;margin:36px 0!important;box-shadow:var(--shadow-sm)!important}
.article-cta p{color:var(--text)!important;font-weight:500!important;margin-bottom:14px!important}

/* Blog listings (.blog-grid / .blog-card) */
.blog-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:18px!important;margin-top:44px!important}
.blog-card{background:#fff!important;border:1px solid var(--border)!important;border-top:3px solid var(--red)!important;border-radius:14px!important;color:var(--text)!important;display:flex;flex-direction:column;text-decoration:none;transition:transform .2s, box-shadow .2s, border-color .2s;box-shadow:var(--shadow-sm)!important;overflow:hidden}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)!important;border-color:rgba(192,0,14,.20)!important}
.blog-card-body{padding:32px 28px!important}
.blog-cat{font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:11px!important;letter-spacing:.12em!important;color:var(--red)!important;text-transform:uppercase!important;margin-bottom:14px!important}
.blog-card h3{font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:18px!important;letter-spacing:-.3px!important;color:var(--text)!important;line-height:1.3!important;margin-bottom:10px!important;text-transform:none!important}
.blog-card p{font-family:'Inter',sans-serif!important;font-size:14px!important;color:var(--text-dim)!important;font-weight:400!important;line-height:1.6!important}
.blog-meta{font-family:'Inter',sans-serif!important;font-size:13px!important;letter-spacing:0!important;color:var(--text-mute)!important;text-transform:none!important;font-weight:500!important;border-top:1px solid var(--border-soft)!important;padding:14px 28px!important}

/* Video grids — light card wrappers with lazy-load YT facade */
.video-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:18px!important;max-width:1180px;margin:0 auto!important}
.video-card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s, box-shadow .2s, border-color .2s}
.video-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(192,0,14,.20)}
.vw{position:relative;width:100%;aspect-ratio:16/9;background:#0e1726;overflow:hidden}
.vw iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-facade{position:absolute;inset:0;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#0e1726}
.yt-facade img{width:100%;height:100%;object-fit:cover}
.yt-facade .yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:46px;display:flex;align-items:center;justify-content:center;transition:transform .2s, filter .2s}
.yt-facade:hover .yt-play{transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 4px 12px rgba(192,0,14,.5))}
.video-card-body{padding:18px 20px}
.vlbl{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:var(--text);text-transform:none;margin:0;line-height:1.3}
.vsub{font-family:'Inter',sans-serif;font-size:12.5px;color:var(--text-dim);margin-top:4px;font-weight:500}
@media(max-width:900px){
  .video-grid{grid-template-columns:1fr!important;gap:14px!important}
  .video-card-body{padding:14px 16px}
}

/* Mobile overrides for old pages */
@media(max-width:900px){
  nav{padding:10px 16px!important}
  .nav-links{display:none!important}
  .ph{padding:120px 22px 64px!important}
  .sec, .sa{padding:64px 22px!important}
  .ctab{padding:36px 22px!important;flex-direction:column;align-items:flex-start}
  footer{padding:40px 18px 24px!important}
  .ft{grid-template-columns:1fr 1fr!important;gap:32px!important}
  .ctab-r{align-items:flex-start!important}
  .top-bar{padding:8px 14px!important;gap:12px!important;flex-wrap:wrap}
  .cg{grid-template-columns:1fr!important;gap:36px!important}
  .blog-grid{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .ft{grid-template-columns:1fr!important}
  .cards{display:flex!important;flex-direction:column!important}
}

/* ============ CONTACT PAGE ============ */
/* Tight contact-page sections — half the typical .sec padding, all centered */
body:has(.contact-two-col) .sec,
body:has(.contact-two-col) .sa{padding:48px 24px!important;text-align:center!important}
body:has(.contact-two-col) .sec .sc,
body:has(.contact-two-col) .sa .sc{max-width:1180px;margin:0 auto;text-align:center!important}
body:has(.contact-two-col) .sec .lbl,
body:has(.contact-two-col) .sa .lbl{margin-left:auto!important;margin-right:auto!important}
body:has(.contact-two-col) .sec .ttl,
body:has(.contact-two-col) .sa .ttl{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
body:has(.contact-two-col) .sec .dsc,
body:has(.contact-two-col) .sa .dsc{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
body:has(.contact-two-col) .contact-details,
body:has(.contact-two-col) .contact-details *{text-align:center!important}
body:has(.contact-two-col) .contact-details{align-items:center}
@media(max-width:900px){
  body:has(.contact-two-col) .sec,
  body:has(.contact-two-col) .sa{padding:32px 16px!important}
}
/* Map + details two-col — constrain & card it */
.contact-two-col{display:grid!important;grid-template-columns:1.3fr 1fr;gap:24px;max-width:1080px;margin:32px auto 0}
.contact-map{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);min-height:340px}
.contact-map iframe{display:block;width:100%;height:100%;min-height:340px;border:0}
.contact-details{background:#fff;border:1px solid var(--border);border-top:3px solid var(--red);border-radius:14px;padding:32px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.contact-details h3{font-family:'Inter',sans-serif!important;font-size:11px!important;font-weight:800!important;letter-spacing:.12em!important;color:var(--red)!important;text-transform:uppercase!important;margin:14px 0 4px!important}
.contact-details h3:first-child{margin-top:0!important}
.contact-details p{font-family:'Inter',sans-serif!important;font-size:15px!important;color:var(--text)!important;font-weight:500!important;line-height:1.5!important;margin:0!important}
.contact-phone{font-family:'Inter',sans-serif!important;font-size:24px!important;font-weight:800!important;color:var(--text)!important;letter-spacing:-.6px!important;line-height:1.1!important;text-decoration:none;display:inline-block;margin-bottom:4px;transition:color .15s}
.contact-phone:hover{color:var(--red)!important}
@media(max-width:900px){
  .contact-two-col{grid-template-columns:1fr;gap:14px;margin-top:20px}
  .contact-details{padding:24px 22px}
  .contact-phone{font-size:22px!important}
}
/* Form wrapper — center, constrain width */
.contact-form-wrap{max-width:760px;margin:32px auto 0;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.contact-form-wrap iframe{display:block;width:100%;border:0}
@media(max-width:900px){.contact-form-wrap{margin-top:20px}}
/* Hide the redundant "GET STARTED TODAY" + final CTA bar — top-of-page contact info already covers it */
body:has(.contact-form-wrap) section.sa:last-of-type{display:none!important}
body:has(.contact-form-wrap)>.ctab.sec{display:none!important}

/* ============ MOBILE POLISH ============ */
@media(max-width:900px){
  /* Top strip: smaller text, tighter wrap */
  .topstrip{padding:7px 0!important;font-size:12px!important}
  .topstrip .container{gap:10px!important;padding:0 14px!important}
  .topstrip .div{display:none}

  /* Sticky nav: tighter padding */
  nav{padding:10px 14px!important}
  .nav-brand img{height:34px!important}
  .nav-wt{font-size:14px!important}
  .nav-ws{font-size:9px!important;letter-spacing:.06em!important}

  /* Comparison table: horizontal scroll on small screens */
  .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp{min-width:520px}
  .cmp thead th, .cmp tbody td{padding:12px 14px!important;font-size:13px!important}
  .cmp thead th .badge{display:none}

  /* Reviews/FAQ/cards padding tighter */
  .rv,.faq-item,.svc-card,.loc-card,.blog-card,.card{padding:22px 18px!important}

  /* CTA band stacks fully */
  .ctab{padding:32px 20px!important;text-align:center!important}
  .ctab h2{font-size:24px!important}
  .ctab-r{align-items:center!important;width:100%!important}
  .cph{font-size:24px!important}

  /* Footer 2-col on tablet, 1-col on phone */
  .ft{grid-template-columns:1fr 1fr!important;gap:28px!important}
  footer{padding:40px 22px 22px!important}

  /* Hero side card spacing */
  .hero-side{padding:22px!important}
  .hs-path{padding:12px!important}

  /* Tighter section heads on mobile */
  .sec-title{font-size:24px!important}
  .ttl{font-size:24px!important}
  .lbl{font-size:.7rem!important;letter-spacing:.14em!important}

  /* Article inside card: smaller h2 */
  .article h2{font-size:18px!important;padding-left:14px!important}
  .article h2::before{width:5px;height:5px}
  .article p{font-size:.98rem!important;line-height:1.7!important}

  /* Dropdown menus shouldn't matter on mobile - hamburger handles it */
  /* But ensure hamburger sits clean */
  .hamburger{top:9px!important;left:9px!important}
}

@media(max-width:560px){
  /* Hero h1 tighter */
  .ph h1{font-size:32px!important;line-height:1.05!important;letter-spacing:-1px!important}
  .ph p{font-size:.96rem!important}
  .ph-btns{flex-direction:column!important}
  .ph-btns .br,.ph-btns .bg{width:100%!important;justify-content:center}

  /* Top strip — single line of essential info only */
  .topstrip a:first-of-type{display:none}

  /* Footer single column */
  .ft{grid-template-columns:1fr!important;gap:22px!important}

  /* Comparison table tighter */
  .cmp{min-width:480px;font-size:12.5px!important}
  .cmp thead th, .cmp tbody td{padding:10px 12px!important;font-size:12.5px!important}

  /* Smaller article card padding */
  .article{padding:24px 18px!important}
}

/* Hide chat widget icon containers - keep them small/clean */
[class*=hl-chat],[class*=lc-widget],[id*=hl-chat],[id*=lc-widget]{position:fixed!important;bottom:20px!important;right:20px!important}

/* ========== BLOG POST OVERRIDES ==========
   Blog posts have their FAQ inside the .article element. Without this override,
   the section.sec:has(.faq) dark-navy rule applies to the whole article section,
   making body copy unreadable (dark text on dark bg). These rules force blog
   article sections back to the light theme. */
section.sec:has(.article),
section.sa:has(.article){
  background:var(--bg)!important;
  color:var(--text)!important;
  padding:64px 24px 80px!important;
}
section.sec:has(.article)::before,
section.sa:has(.article)::before{display:none!important}
section.sec:has(.article)::after,
section.sa:has(.article)::after{display:none!important}
/* Reset FAQ within blog post to light theme */
section.sec:has(.article) .fi,
section.sa:has(.article) .fi{
  background:#fff!important;
  border:1px solid var(--border)!important;
  backdrop-filter:none!important;
  box-shadow:var(--shadow-sm)!important;
}
section.sec:has(.article) .fi:hover,
section.sa:has(.article) .fi:hover{
  background:#fff!important;
  border-color:rgba(192,0,14,.30)!important;
}
section.sec:has(.article) .fi.open,
section.sa:has(.article) .fi.open{
  background:#fff!important;
  border-color:rgba(192,0,14,.40)!important;
}
section.sec:has(.article) .fq,
section.sa:has(.article) .fq{color:var(--text)!important}
section.sec:has(.article) .fa,
section.sa:has(.article) .fa{color:var(--text-dim)!important}
section.sec:has(.article) .fq::before,
section.sa:has(.article) .fq::before{background:rgba(192,0,14,.18)!important}
section.sec:has(.article) .fi.open .fq::before,
section.sa:has(.article) .fi.open .fq::before{background:var(--red)!important;box-shadow:0 0 0 4px rgba(192,0,14,.14)!important}
section.sec:has(.article) .fq::after,
section.sa:has(.article) .fq::after{
  border-right-color:var(--red)!important;
  border-bottom-color:var(--red)!important;
}
section.sec:has(.article) .faq-cta,
section.sa:has(.article) .faq-cta{
  background:var(--bg-tint)!important;
  border:1px dashed rgba(192,0,14,.32)!important;
}
section.sec:has(.article) .faq-cta-text strong,
section.sa:has(.article) .faq-cta-text strong{color:var(--text)!important}
section.sec:has(.article) .faq-cta-text span,
section.sa:has(.article) .faq-cta-text span{color:var(--text-dim)!important}
/* H2 inside .faq subsections inside blog articles use the article style */
section.sec:has(.article) .article > h2{color:var(--text)!important;text-align:left!important}
/* The .article element is the first child of the section. Reset text-align that
   leaks in from .sec:has(.faq) > div:first-child centering rule. */
section.sec:has(.article) > .article,
section.sa:has(.article) > .article{text-align:left!important}
section.sec:has(.article) .article *,
section.sa:has(.article) .article *{text-align:inherit}
section.sec:has(.article) .article p,
section.sa:has(.article) .article p,
section.sec:has(.article) .article h2,
section.sa:has(.article) .article h2,
section.sec:has(.article) .article h3,
section.sa:has(.article) .article h3,
section.sec:has(.article) .article ul,
section.sa:has(.article) .article ul,
section.sec:has(.article) .article li,
section.sa:has(.article) .article li{text-align:left!important}
/* Center FAQ accordion + bottom CTA + the meta row inside the article */
section.sec:has(.article) .article .blog-meta-top,
section.sa:has(.article) .article .blog-meta-top{display:flex!important}
/* Pricing table inside blog articles */
.article .pricing-table{width:100%;border-collapse:collapse;margin:24px 0 32px;font-family:'Inter',sans-serif}
.article .pricing-table th{font-size:13px;letter-spacing:.04em;color:var(--red);text-transform:uppercase;text-align:left;padding:14px 18px;border-bottom:2px solid rgba(192,0,14,.30);background:var(--bg-tint);font-weight:700}
.article .pricing-table td{font-size:15px;color:var(--text);font-weight:400;padding:14px 18px;border-bottom:1px solid var(--border-soft)}
.article .pricing-table tr:hover td{background:rgba(192,0,14,.04)}