/* ═══════════════════════════════════════════════════════════
THE ROOF SHEPHERD · v11 · June 2026
Design: Precision Guardian — tactical dark, balanced for
all ages. Barlow type system. HUD-inspired UI accents.
═══════════════════════════════════════════════════════════ */
/* Google Fonts loaded via HTML — no @import needed */
/* ── TOKENS ─────────────────────────────────────────────── */
:root{
--bg:#050810; --bg2:#0a1020; --bg3:#0e1628;
--panel:rgba(14,22,40,.9); --line:rgba(255,255,255,.10);
--text:#f0eee8; --body:#cdd9ed; --muted:#8898b4; --dim:#586475;
--orange:#e06a16; --orange-lo:rgba(224,106,22,.12); --orange-glow:rgba(224,106,22,.35);
--gold:#f5b33c; --red:#c9272f; --green:#1e7a4c; --purple:#8a6fc4; --cyan:#65d9ff;
--maroon:#b83a4a;
--bracket:rgba(224,106,22,.65); --bracket-dim:rgba(224,106,22,.22);
--glass:rgba(255,255,255,.038); --glass-hi:rgba(255,255,255,.062);
--max:1180px; --wide:1400px; --r:16px; --r-lg:22px;
--shadow:0 24px 72px rgba(0,0,0,.52);
--font-display:'Barlow Condensed',Impact,sans-serif;
--font-body:'Barlow',system-ui,sans-serif;
}
/* ── RESET & BASE ───────────────────────────────────────── */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
background:
radial-gradient(ellipse at 10% -5%,rgba(224,106,22,.18),transparent 32%),
radial-gradient(ellipse at 90% 0%,rgba(75,46,131,.14),transparent 28%),
linear-gradient(180deg,#050810 0%,#0a1020 50%,#060912 100%);
color:var(--text);
font:17px/1.65 var(--font-body);
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
/* Subtle grid texture */
body::before{
content:"";position:fixed;inset:0;z-index:-1;
background-image:
linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
background-size:44px 44px;
mask-image:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.12));
pointer-events:none;
}
/* Scan-line overlay */
body::after{
content:"";position:fixed;inset:0;z-index:-1;
background:repeating-linear-gradient(
0deg,
transparent,transparent 2px,
rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px
);
pointer-events:none;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{color:var(--body);margin:0 0 1rem;line-height:1.68}
ul,ol{color:var(--body)}
strong{color:#fff}
h1,h2{font-family:var(--font-display);line-height:1;letter-spacing:-.01em}
h3,h4{font-family:var(--font-body);font-weight:700;line-height:1.2;letter-spacing:0}
h4{font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:#fff;color:#000;padding:.7rem 1rem;border-radius:10px}
/* ── LAYOUT ─────────────────────────────────────────────── */
.wrap{max-width:var(--max);margin:auto;padding:0 1.25rem}
.wide{max-width:var(--wide);margin:auto;padding:0 1.25rem}
.section{padding:5rem 0}
.section.compact{padding:3.2rem 0}
.content{max-width:920px}
.content p,.content li{font-size:1.04rem}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2rem}
.section-head > div{flex:1;min-width:0}
.section-head > a,.section-head > div > a{flex-shrink:0;align-self:flex-end;white-space:nowrap}
.section-head .eyebrow{margin-bottom:.5rem}
.section-head h2{margin-bottom:.4rem}
.section-head > div > p{color:var(--body);font-size:1rem;max-width:600px;margin-bottom:0}
.section h2{font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.02;margin:0 0 .7rem;text-transform:uppercase}
.section h3{line-height:1.1;font-size:1.35rem}
/* ── EYEBROW (HUD marker) ────────────────────────────────── */
.eyebrow{
font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--orange);font-weight:700;font-family:var(--font-body);
display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.5rem;
flex-wrap:wrap;row-gap:.15rem;
}
.eyebrow::before{
content:"//";color:var(--orange-glow);font-weight:400;letter-spacing:-.04em;
}
/* ── HEADER ─────────────────────────────────────────────── */
.site-header{
position:sticky;top:0;z-index:100;
background:rgba(5,8,16,.92);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border-bottom:1px solid rgba(255,255,255,.10);
}
.topline{border-bottom:1px solid rgba(255,255,255,.06);color:#a8b8ce;font-size:.84rem}
.topline .wide,.topline-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.32rem 1.25rem}
.topline-left{display:flex;align-items:center;gap:.5rem;flex-shrink:0;min-width:200px}
@media(max-width:768px){.topline-ticker-wrap{display:none}.topline-left{min-width:0}.topline-trust{display:none}}
.pulse{
display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
background:var(--orange);margin-right:.45rem;vertical-align:middle;
box-shadow:0 0 8px var(--orange);
animation:pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot{
0%,100%{box-shadow:0 0 5px var(--orange)}
50%{box-shadow:0 0 18px var(--orange),0 0 36px rgba(224,106,22,.35)}
}
.navrow{
display:grid;grid-template-columns:minmax(300px,1fr) auto auto;
gap:clamp(.5rem,1.2vw,1rem);align-items:center;padding:.6rem 1.25rem;
}
.brand{display:flex;align-items:center;gap:.8rem;min-width:0}
.brand img{width:80px;height:auto;filter:drop-shadow(0 0 12px rgba(224,106,22,.30))}
.brand-name{
font-family:var(--font-display);font-weight:900;
text-transform:uppercase;letter-spacing:.05em;font-size:1.42rem;line-height:1.02;
color:#fff;
}
.brand-sub{
display:block;color:#8898b4;font-size:.72rem;
letter-spacing:.13em;font-weight:600;text-transform:uppercase;
margin-top:.2rem;white-space:nowrap;font-family:var(--font-body);
}
.nav{display:flex;justify-content:center;gap:.1rem;align-items:center}
.nav-item{position:relative}
.nav-item::after{content:"";position:absolute;bottom:-5px;left:0;width:100%;height:9px;background:transparent}
/* ── NAV LINK ─────────────────────────────────────────────────────────── */
.nav-link{
display:inline-flex;align-items:center;gap:.3rem;
border-radius:8px;padding:.48rem .7rem;
font-weight:600;color:#c8d8ee;font-size:.92rem;
transition:.15s ease;font-family:var(--font-body);
letter-spacing:.005em;
position:relative;
}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-link[aria-current="page"]{color:#fff}
/* Per-section bottom accent on hover */
/* Per-section nav accent colors */
.nav-item:nth-child(1){--nav-accent:var(--orange);--nav-accent-rgb:224,106,22}
.nav-item:nth-child(2){--nav-accent:var(--cyan);--nav-accent-rgb:101,217,255}
.nav-item:nth-child(3){--nav-accent:#f0564a;--nav-accent-rgb:240,86,74}
.nav-item:nth-child(4){--nav-accent:#2ecc7a;--nav-accent-rgb:46,204,122}
.nav-item:nth-child(5){--nav-accent:var(--gold);--nav-accent-rgb:245,179,60}
/* Hover: soft neutral background, no line */
.nav-item .nav-link:hover{
background:rgba(255,255,255,.06);
box-shadow:none;
}
/* Active page: subtle section-tinted pill + clean rounded underline accent */
.nav-item .nav-link[aria-current="page"]{
color:#fff;
background:rgba(var(--nav-accent-rgb),.12);
box-shadow:none;
position:relative;
}
.nav-item .nav-link[aria-current="page"]::before{
content:"";
position:absolute;
left:.7rem;right:.7rem;bottom:.18rem;
height:2px;border-radius:2px;
background:var(--nav-accent);
box-shadow:0 0 8px rgba(var(--nav-accent-rgb),.5);
}
/* Chevron: pure CSS, no SVG rendering issues */
.nav-chev{display:none}
.nav-link::after{content:none}
/* Plain nav items (no mega-panel children) drop the dropdown caret */
.nav-item--plain .nav-link::after{display:none}
/* ── MEGA MENU — SECTION-COLOR SYSTEM ─────────────────────────────────── */
.mega-panel{
position:absolute;left:50%;transform:translateX(-50%);
top:calc(100% + 5px);
display:none;
background:rgba(7,13,26,.97);
border:1px solid rgba(255,255,255,.1);
border-top:2px solid var(--panel-color,var(--orange));
border-radius:14px;
box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset;
padding:.65rem;
z-index:100;
overflow:hidden;
backdrop-filter:blur(12px);
}
.nav-item:hover .mega-panel,
/* panel reveal handled below (disclosure) */
/* Section-specific panel color tokens */
.mega-services{width:min(580px,calc(100vw - 1.5rem));--panel-color:var(--orange)}
.mega-lc{width:min(600px,calc(100vw - 1.5rem));--panel-color:var(--cyan)}
.mega-sa{width:min(560px,calc(100vw - 1.5rem));--panel-color:var(--gold)}
.mega-trust{width:min(580px,calc(100vw - 1.5rem));--panel-color:#2ecc7a}
.mega-about-new{width:min(320px,calc(100vw - 1.5rem));flex-direction:column;gap:.2rem;--panel-color:var(--orange)}
/* ── PANEL COLUMNS ─────────────────────────────────────────────────────── */
.mp-col{display:flex;flex-direction:column;gap:.12rem;flex:1;min-width:0}
.mp-section-label{
font-size:.62rem;font-weight:800;letter-spacing:.18em;
text-transform:uppercase;
color:var(--panel-color,var(--orange));
padding:.6rem .55rem .25rem;margin:0;font-family:var(--font-body);
opacity:1;
}
.mp-col + .mp-col{border-left:1px solid rgba(255,255,255,.06);padding-left:.4rem}
/* ── MNI ITEMS ─────────────────────────────────────────────────────────── */
.mni{
display:flex;align-items:center;gap:.65rem;
padding:.52rem .55rem;border-radius:9px;
text-decoration:none;transition:.13s ease;
}
.mni:hover{background:rgba(255,255,255,.05)}
.mni:hover .mni-label{color:#fff}
.mni-icon{
width:32px;height:32px;border-radius:8px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:rgba(var(--mc-rgb,224,106,22),.1);
border:1px solid rgba(var(--mc-rgb,224,106,22),.2);
transition:.14s ease;
}
.mni:hover .mni-icon{
background:rgba(var(--mc-rgb,224,106,22),.18);
border-color:rgba(var(--mc-rgb,224,106,22),.38);
}
.mni-icon svg{color:var(--mc,var(--orange));width:16px;height:16px;stroke-width:1.5;fill:none;stroke:currentColor}
/* Section-specific icon rgb values for alpha-based backgrounds */
.mega-services .mni-icon{--mc-rgb:224,106,22}
.mega-lc .mni-icon{--mc-rgb:101,217,255}
.mega-sa .mni-icon{--mc-rgb:245,179,60}
.mega-trust .mni-icon{--mc-rgb:46,204,122}
.mega-about-new .mni-icon{--mc-rgb:224,106,22}
/* Override icon color per mc token — keep individual item colors */
.mni-icon svg{color:var(--mc)}
.mni-text{display:flex;flex-direction:column;gap:.07rem;min-width:0}
.mni-label{
font-size:.84rem;font-weight:700;
color:#c0d0e0;font-family:var(--font-body);
line-height:1.2;transition:color .13s ease;
}
.mni-desc{
font-size:.73rem;color:#6a7f94;
line-height:1.4;font-family:var(--font-body);margin-top:.08rem;
}
/* Sub-items: compact, dimmer */
.mni-sub{padding:.38rem .55rem}
.mni-sub .mni-icon{
width:24px;height:24px;border-radius:6px;
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.08);
}
.mni-sub .mni-icon svg{width:12px;height:12px;color:var(--mc)}
.mni-sub:hover .mni-icon{
background:rgba(var(--mc-rgb,224,106,22),.12);
border-color:rgba(var(--mc-rgb,224,106,22),.28);
}
.mni-sub .mni-label{font-size:.8rem;font-weight:600;color:#8096aa}
.mni-sub:hover .mni-label{color:#fff}
/* Corridor color overrides for Service Areas panel */
[data-corridor="ct"] .mni-icon{--mc-rgb:224,106,22}
[data-corridor="ct"] .mni-icon svg{color:var(--orange)}
[data-corridor="dfw"] .mni-icon{--mc-rgb:101,217,255}
[data-corridor="dfw"] .mni-icon svg{color:var(--cyan)}
[data-corridor="hou"] .mni-icon{--mc-rgb:245,179,60}
[data-corridor="hou"] .mni-icon svg{color:var(--gold)}
/* ── DRAWER (MOBILE) ───────────────────────────────────────────────────── */
@media(max-width:1240px){.mega-panel{display:none}}
.drawer-overlay{
display:none;position:fixed;inset:0;
background:rgba(0,0,0,.65);z-index:199;
opacity:0;transition:opacity .28s ease;backdrop-filter:blur(3px);
}
.drawer-overlay.visible{opacity:1}
@media(max-width:1150px){.drawer-overlay{display:block;pointer-events:none}}
.drawer-overlay.visible{pointer-events:all}
.mobile-panel{
position:fixed;top:0;right:0;bottom:0;
width:min(320px,86vw);
background:rgba(7,11,20,.97);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border-left:1px solid rgba(255,255,255,.12);
padding:0;z-index:200;overflow-y:auto;
overscroll-behavior:contain;
transform:translateX(100%);
transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;
visibility:hidden;
}
.mobile-panel.open{visibility:visible}
.mobile-panel.open{transform:translateX(0)}
.drawer-header{
display:flex;align-items:center;justify-content:space-between;
padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer-header .brand-name{font-size:1.1rem}
.drawer-close{
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
color:#fff;border-radius:8px;padding:.45rem .65rem;cursor:pointer;
font-size:1.1rem;line-height:1;transition:.15s ease;
}
.drawer-close:hover{background:rgba(255,255,255,.14)}
.drawer-nav{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.35rem}
.drawer-nav a{
display:flex;align-items:center;justify-content:space-between;
padding:.8rem 1rem;border:1px solid rgba(255,255,255,.09);
background:rgba(255,255,255,.04);border-radius:12px;
font-weight:600;font-family:var(--font-body);color:var(--text);
transition:.15s ease;
}
.drawer-nav a:hover{background:var(--orange-lo);border-color:var(--bracket-dim);color:#fff}
.drawer-nav .chevron{color:var(--muted);font-size:.85rem}
.drawer-nav a svg{flex-shrink:0;opacity:.85}
.drawer-nav a:hover svg{opacity:1;filter:drop-shadow(0 0 4px currentColor)}
.drawer-nav a:nth-child(1) svg{color:var(--orange)}
.drawer-nav a:nth-child(2) svg{color:var(--cyan)}
.drawer-nav a:nth-child(3) svg{color:var(--gold)}
.drawer-nav a:nth-child(4) svg{color:#2ecc7a}
.drawer-nav a:nth-child(5) svg{color:var(--orange)}
.drawer-nav a:nth-child(6) svg{color:var(--orange)}
.drawer-actions{
padding:.75rem 1.25rem 2rem;
display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
}
body.drawer-open{overflow:hidden}
/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;justify-content:center;
gap:.45rem;border-radius:999px;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.05);
color:#fff;font-weight:700;letter-spacing:.025em;
padding:.72rem 1.1rem;line-height:1.1;cursor:pointer;
transition:.18s ease;position:relative;overflow:hidden;
font-family:var(--font-body);font-size:.95rem;
}
.btn:hover{
transform:translateY(-2px);
border-color:rgba(255,255,255,.32);
box-shadow:0 12px 32px rgba(0,0,0,.3);
}
.btn.primary{
background:linear-gradient(135deg,var(--orange),#ffac3d);
color:#130900;border:none;
box-shadow:0 0 24px rgba(224,106,22,.30);
font-weight:800;
}
.btn.primary::after{
content:"";position:absolute;
top:-60%;left:-80%;width:55%;height:220%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
transform:skewX(-22deg);
animation:btn-shimmer 3.2s ease-in-out infinite;
}
@keyframes btn-shimmer{0%,100%{left:-80%}60%{left:130%}}
.btn.primary:hover{
box-shadow:0 0 42px rgba(224,106,22,.46),0 12px 32px rgba(0,0,0,.3);
transform:translateY(-2px) scale(1.01);
}
.btn.call{background:rgba(101,217,255,.07);border-color:rgba(101,217,255,.32)}
.btn.call:hover{background:rgba(101,217,255,.14);border-color:rgba(101,217,255,.55)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.18)}
.btn.ghost:hover{border-color:rgba(224,106,22,.45);color:#fff;background:rgba(224,106,22,.05)}
.btn.small{font-size:.88rem;padding:.55rem .8rem}
.btn.block{width:100%}
/* ── HERO ─────────────────────────────────────────────────── */
/* Base .hero/.hero-inner rules live in the v12 section below;
this block intentionally left empty after dead-code removal. */
.kicker{
display:inline-flex;align-items:center;gap:.4rem;
padding:.28rem .65rem;border:1px solid rgba(224,106,22,.42);
background:rgba(224,106,22,.10);color:#ffe0ca;border-radius:999px;
font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
margin-bottom:.85rem;font-family:var(--font-body);
}
/* ── TEXAS COLLEGE TRIBUTE KEYFRAMES ─────────────────────────
Homepage hero H1 breathes through three Texas school colors:
Orange peak → UT Austin (brand primary)
Gold peak → Baylor Bears
Settle → back to base
Inner pages get enhanced static glow — bold, not animated.
──────────────────────────────────────────────────────────── */
@keyframes h1-texas-breathe{
0%,100%{
text-shadow:0 0 60px rgba(224,106,22,.18),0 2px 0 rgba(0,0,0,.5);
-webkit-text-stroke:0 transparent;
}
/* UT Austin — burnt orange peak */
30%{
text-shadow:
0 0 0 rgba(255,107,26,.0),
1px 1px 0 rgba(255,107,26,.28),
-1px -1px 0 rgba(255,107,26,.28),
1px -1px 0 rgba(255,107,26,.28),
-1px 1px 0 rgba(255,107,26,.28),
0 0 30px rgba(255,107,26,.65),
0 0 80px rgba(255,107,26,.30),
0 0 140px rgba(255,107,26,.12),
0 2px 0 rgba(0,0,0,.5);
-webkit-text-stroke:1.5px rgba(255,107,26,.45);
}
/* Baylor Bears — gold fade */
65%{
text-shadow:
1px 1px 0 rgba(245,179,60,.22),
-1px -1px 0 rgba(245,179,60,.22),
1px -1px 0 rgba(245,179,60,.22),
-1px 1px 0 rgba(245,179,60,.22),
0 0 28px rgba(245,179,60,.55),
0 0 70px rgba(245,179,60,.25),
0 0 130px rgba(245,179,60,.10),
0 2px 0 rgba(0,0,0,.5);
-webkit-text-stroke:1px rgba(245,179,60,.35);
}
/* Settle — fade back through Texas A&M maroon hue before reset */
85%{
text-shadow:
0 0 40px rgba(200,80,60,.20),
0 0 90px rgba(200,80,60,.08),
0 2px 0 rgba(0,0,0,.5);
-webkit-text-stroke:0.5px rgba(200,80,60,.15);
}
}
.hero h1{
font-family:var(--font-display);font-weight:900;
font-size:clamp(3.2rem,5.4vw,6rem);
line-height:.91;letter-spacing:-.01em;
text-transform:uppercase;
text-shadow:0 0 80px rgba(224,106,22,.18),0 2px 0 rgba(0,0,0,.45);
max-width:100%;margin:0 0 1rem;
color:#fff;
}
/* Homepage hero H1 — full Texas college breathing tribute */
.hero:not(.hero-inner) h1{
font-size:clamp(2.2rem,3.1vw,3.3rem);
line-height:.98;margin:0 0 .7rem;
animation:h1-texas-breathe 6s ease-in-out 1.2s infinite;
}
/* Inner page hero H1 — enhanced static glow, no animation */
.hero.hero-inner h1{
font-size:clamp(2.2rem,3.2vw,3.4rem);
line-height:.98;margin:0 0 .85rem;
text-shadow:
1px 1px 0 rgba(224,106,22,.15),
-1px -1px 0 rgba(224,106,22,.15),
0 0 40px rgba(224,106,22,.30),
0 0 100px rgba(224,106,22,.12),
0 2px 0 rgba(0,0,0,.5);
-webkit-text-stroke:.75px rgba(224,106,22,.20);
}
.hero.hero-inner .wrap{padding-top:2rem;padding-bottom:2rem}
@media(prefers-reduced-motion:reduce){
.hero:not(.hero-inner) h1{animation:none}
/* Banner hero headline: smaller + capped so it fits the fixed banner height */
.hero:not(.hero-inner) h1{
font-size:clamp(2.6rem,3.6vw,4rem);
line-height:.94;
}
}
.hero .lead{
font-size:clamp(1.08rem,1.8vw,1.38rem);
max-width:740px;color:#d4dff0;line-height:1.62;
}
.hero.hero-inner .lead{
font-size:clamp(1rem,1.3vw,1.12rem);
max-width:620px;line-height:1.5;
}
.hero:not(.hero-inner) .lead{
font-size:clamp(1rem,1.4vw,1.16rem);
line-height:1.5;margin:0 0 .9rem;
}
.hero-trust-line{
font-size:.9rem;color:#8898b4;margin-top:.6rem;margin-bottom:0;
font-style:italic;letter-spacing:.01em;
}
.backlink{
display:inline-flex;margin-bottom:1rem;color:#c8d6ec;
border:1px solid rgba(255,255,255,.10);border-radius:999px;
padding:.4rem .72rem;background:rgba(255,255,255,.04);
font-weight:600;font-size:.88rem;transition:.15s ease;
}
.backlink:hover{background:rgba(255,255,255,.09);color:#fff}
/* ── TRUST BADGES ────────────────────────────────────────── */
.trust-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:.9rem 0;max-width:100%}
.trust-badge{
display:inline-flex;align-items:center;gap:.38rem;
padding:.36rem .72rem;border-radius:999px;
border:1px solid rgba(245,179,60,.4);
background:rgba(245,179,60,.10);
color:#ffd88a;font-size:.76rem;font-weight:700;
font-family:var(--font-body);letter-spacing:.02em;
white-space:nowrap;
box-shadow:0 0 0 1px rgba(245,179,60,.08) inset;
}
.trust-badge svg{opacity:.9;color:#f5b33c}
a.trust-badge{cursor:pointer;text-decoration:none;transition:.15s ease}
a.trust-badge:hover{border-color:rgba(245,179,60,.65);background:rgba(245,179,60,.16);color:#ffe6b0}
.trust-badge--cta{
border-color:rgba(224,106,22,.45);background:rgba(224,106,22,.1);
color:var(--orange);text-decoration:none;cursor:pointer;
transition:background .18s,border-color .18s;
}
.trust-badge--cta:hover{background:rgba(224,106,22,.2);border-color:rgba(224,106,22,.7)}
/* ── STAT STRIP ──────────────────────────────────────────── */
.stat-strip{
display:grid;grid-template-columns:repeat(4,1fr);
gap:1px;background:var(--line);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat-item{
padding:1.35rem 1.1rem;background:rgba(10,16,32,.92);text-align:center;
position:relative;overflow:hidden;
}
.stat-item::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--orange),transparent);
opacity:0.6;
}
.stat-num{
font-family:var(--font-display);font-weight:900;
font-size:1.9rem;color:var(--orange);line-height:1;display:block;
letter-spacing:.02em;text-shadow:0 0 24px rgba(224,106,22,.3);
}
.stat-num .icon-svg{width:1.5em;height:1.5em;stroke-width:1.85;vertical-align:-.18em;filter:drop-shadow(0 0 14px rgba(224,106,22,.3))}
.stat-label{
font-size:.72rem;color:var(--muted);text-transform:uppercase;
letter-spacing:.12em;font-weight:700;margin-top:.28rem;display:block;
font-family:var(--font-body);
}
/* ── GRID SYSTEM ─────────────────────────────────────────── */
.grid{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center}
/* Each variant sets the item flex-basis so rows fill correctly
and orphaned last-row items center automatically */
.grid.two > *{flex:0 1 calc(50% - .55rem);min-width:0}
.grid.three > *{flex:0 1 calc(33.333% - .734rem);min-width:0}
.grid.four > *{flex:0 1 calc(25% - .825rem);min-width:0}
.grid.five > *{flex:0 1 calc(20% - .88rem);min-width:0}
/* A .faq nested directly in a grid must span the full row, not sit as a half/third-width cell */
.grid.two > .faq,.grid.three > .faq,.grid.four > .faq,.grid.five > .faq{flex:0 1 100%;width:100%;min-width:0;margin-top:0}
/* ── CARDS (glassmorphism + bracket corners) ─────────────── */
.card{
position:relative;
background:linear-gradient(150deg,var(--glass-hi),var(--glass));
border:1px solid rgba(255,255,255,.09);
border-radius:var(--r);padding:1.35rem;
box-shadow:0 8px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05);
overflow:hidden;transition:.22s ease;
isolation:isolate;
}
.card:hover{
border-color:rgba(224,106,22,.28);
box-shadow:0 16px 52px rgba(0,0,0,.46),0 0 0 1px rgba(224,106,22,.07),inset 0 1px 0 rgba(255,255,255,.07);
transform:translateY(-3px);
}
/* Card color variants — border accent only, no pseudo-element conflicts */
.card.red{border-color:rgba(201,39,47,.28);--accent-bar:rgba(201,39,47,.55)}
.card.red .icon{color:#ff5a5f;background:rgba(201,39,47,.16);border-color:rgba(201,39,47,.3)}
.card.orange{border-color:rgba(224,106,22,.28);--accent-bar:rgba(224,106,22,.62)}
.card.orange .icon{color:var(--orange)}
.card.green{border-color:rgba(37,160,106,.28);--accent-bar:rgba(37,160,106,.55)}
.card.green .icon{color:#2ecc7a;background:rgba(46,204,122,.16);border-color:rgba(46,204,122,.3)}
.card.purple{border-color:rgba(138,111,196,.32);--accent-bar:rgba(138,111,196,.6);box-shadow:0 8px 32px rgba(0,0,0,.38),0 0 24px rgba(138,111,196,.10),inset 0 1px 0 rgba(255,255,255,.05)}.card.cyan .icon{color:var(--cyan);background:rgba(101,217,255,.15);border-color:rgba(101,217,255,.28)}
.card.purple .icon{color:var(--purple);background:rgba(138,111,196,.15);border-color:rgba(138,111,196,.28)}
.card.cyan{border-color:rgba(101,217,255,.28);--accent-bar:rgba(101,217,255,.5)}
.card.maroon{border-color:rgba(184,58,74,.32);--accent-bar:rgba(184,58,74,.6);box-shadow:0 8px 32px rgba(0,0,0,.38),0 0 24px rgba(184,58,74,.10),inset 0 1px 0 rgba(255,255,255,.05)}
/* When card has icon box, h3 inline icon is redundant — hide it */
.card .icon ~ h3 > svg.icon-svg:first-child{display:none}
.card .icon ~ h3 > svg.icon-svg:first-child + *{display:inline}
.card h3{margin:.1rem 0 .6rem;font-size:1.15rem;color:#fff;font-family:var(--font-body);font-weight:700;letter-spacing:.01em;line-height:1.2}
.card p{font-size:.97rem;margin-bottom:.4rem}
/* ── SVG ICONS ───────────────────────────────────────────── */
/* ── ICON SIZE STANDARDS ─────────────────────────────────────────────────── */
/* Card primary icons — 36px */
.card .icon{
width:2.8rem;height:2.8rem;margin-bottom:.8rem;color:var(--orange);
display:flex;align-items:center;justify-content:center;
background:rgba(224,106,22,.15);border:1px solid rgba(224,106,22,.25);border-radius:10px;padding:.35rem;
}
.card.red .icon{color:#ff5a5f;background:rgba(201,39,47,.16);border-color:rgba(201,39,47,.3)}
.card.green .icon{color:#2ecc7a;background:rgba(46,204,122,.16);border-color:rgba(46,204,122,.3)}.card.cyan .icon{color:var(--cyan);background:rgba(101,217,255,.15);border-color:rgba(101,217,255,.28)}
.card.purple .icon{color:var(--purple);background:rgba(138,111,196,.15);border-color:rgba(138,111,196,.28)}
.card.gold .icon{color:var(--gold);background:rgba(245,179,60,.16);border-color:rgba(245,179,60,.3)}
/* Section-head icons — 24px enforced */
.section-head svg.icon-svg{width:24px!important;height:24px!important;color:var(--orange);opacity:.85}
/* FAQ summary icons — 18px */
.faq summary svg.icon-svg{width:18px!important;height:18px!important}
/* Inline text context — 16px default */
.icon-svg{display:inline-block;vertical-align:middle;flex-shrink:0;
width:16px;height:16px}
/* Trust badges — 14px */
.trust-badge svg.icon-svg{width:14px!important;height:14px!important}
.deploy-badge svg.icon-svg,.deploy-badge .icon-svg{width:12px!important;height:12px!important}
/* Footer icons — 15px */
.footer-col a svg.icon-svg{width:15px!important;height:15px!important}
.footer-badge svg.icon-svg{width:18px!important;height:18px!important}
/* ── PROCESS STEPS ───────────────────────────────────────── */
.process-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:step}
.process-step{
position:relative;padding:3.4rem 1.3rem 1.3rem;
border:1px solid rgba(255,255,255,.09);border-radius:var(--r);
background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
transition:.22s ease;
}
.process-step::before{
counter-increment:step;content:counter(step, decimal-leading-zero);
position:absolute;top:-1px;left:-1px;
width:2.8rem;height:2.8rem;
background:linear-gradient(135deg,var(--orange),var(--gold));
color:#130900;font-family:var(--font-display);font-weight:900;font-size:1.05rem;
display:flex;align-items:center;justify-content:center;
border-radius:var(--r) 0 var(--r) 0;
box-shadow:0 0 18px rgba(224,106,22,.3);
}
.process-step::after{display:none}/* override card bracket */
.process-step:nth-child(1){border-color:rgba(224,106,22,.22)}
.process-step:nth-child(2){border-color:rgba(101,217,255,.18)}
.process-step:nth-child(3){border-color:rgba(78,255,145,.18)}
.process-step:nth-child(1)::before{background:linear-gradient(135deg,var(--orange),var(--gold))}
.process-step:nth-child(2)::before{background:linear-gradient(135deg,var(--cyan),#3ab8d8)}
.process-step:nth-child(3)::before{background:linear-gradient(135deg,#4eff91,#1e9a5a)}
.process-step:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.process-step:nth-child(1):hover{border-color:rgba(224,106,22,.5);background:linear-gradient(160deg,rgba(224,106,22,.08),rgba(224,106,22,.02))}
.process-step:nth-child(2):hover{border-color:rgba(101,217,255,.4);background:linear-gradient(160deg,rgba(101,217,255,.06),rgba(101,217,255,.015))}
.process-step:nth-child(3):hover{border-color:rgba(78,255,145,.4);background:linear-gradient(160deg,rgba(78,255,145,.06),rgba(78,255,145,.015))}
.process-step h3{margin:.4rem 0 .65rem;font-size:1.18rem;color:#fff}
.process-step p{font-size:.97rem;margin:0;color:var(--body)}
/* ── TAGS / BADGES ───────────────────────────────────────── */
.tag{
display:inline-flex;align-items:center;gap:.35rem;
padding:.28rem .75rem;border-radius:999px;
background:transparent;border:1px solid rgba(224,106,22,.5);
color:var(--orange);font-size:.72rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;
font-family:var(--font-body);margin-top:auto
}
.badge-status{
display:inline-flex;align-items:center;gap:.38rem;
padding:.28rem .6rem;border-radius:999px;
border:1px solid rgba(101,217,255,.28);background:rgba(101,217,255,.06);
color:#a8ecff;font-size:.72rem;font-weight:700;letter-spacing:.06em;
font-family:var(--font-body);text-transform:uppercase;
}
/* ── PANEL / CTA BOXES ──────────────────────────────────── */
.panel{
border:1px solid rgba(224,106,22,.25);
background:linear-gradient(135deg,rgba(224,106,22,.09),rgba(101,217,255,.04));
border-radius:var(--r-lg);padding:1.4rem;
}
.panel::before,.panel::after{display:none}
.compliance{
border:1px solid rgba(245,179,60,.32);background:rgba(245,179,60,.065);
border-radius:var(--r);padding:1rem 1.1rem;color:#fde5a8;font-size:.96rem;
}
.compliance::before,.compliance::after{display:none}
.compliance p:last-child{margin-bottom:0}
/* ── RELATED LINKS ───────────────────────────────────────── */
.related{
display:flex;flex-wrap:wrap;gap:.6rem;
border-top:1px solid rgba(255,255,255,.08);padding-top:1rem;margin-top:1.5rem;
}
/* ── FAQ ACCORDION ───────────────────────────────────────── */
.faq{max-width:100%;display:flex;flex-direction:column;gap:.5rem;margin-top:1.2rem}
.faq details{
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.038);
border-radius:12px;padding:0;margin:.35rem 0;
transition:.18s ease;overflow:hidden;
}
.faq details::before,.faq details::after{display:none}
.faq details:hover{border-color:rgba(224,106,22,.20)}
.faq details[open]{
border-color:rgba(224,106,22,.30);
background:rgba(224,106,22,.038);
}
.faq summary{
cursor:pointer;color:#fff;font-weight:700;
padding:1.1rem 1.2rem;
list-style:none;display:flex;align-items:center;
justify-content:space-between;gap:.8rem;
font-family:var(--font-body);font-size:1rem;
letter-spacing:.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";flex-shrink:0;
width:1.6rem;height:1.6rem;
border-radius:50%;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.20);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a8bace' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
background-size:55%;background-position:center;background-repeat:no-repeat;
transition:transform .22s ease,background .15s ease,border-color .15s ease;
}
.faq details[open] > summary::after{
transform:rotate(180deg);
background:rgba(224,106,22,.12);
border-color:rgba(224,106,22,.35);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23e06a16' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
}
.faq details>p,.faq details>div{
padding:.1rem 1.1rem 1rem;font-size:.98rem;color:var(--body);
border-top:1px solid rgba(255,255,255,.07);padding-top:.8rem;
margin:0;line-height:1.65;
}
.faq details>p+p{margin-top:.6rem;padding-top:0;border-top:0}
/* ── TABLE ───────────────────────────────────────────────── */
.trs-table{width:100%;border-collapse:collapse;font-size:.94rem}
.trs-table th{
text-align:left;color:var(--orange);
font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;
font-weight:700;padding:.7rem .9rem;border-bottom:1px solid rgba(255,255,255,.12);
font-family:var(--font-body);
}
.trs-table td{
padding:.8rem .9rem;border-bottom:1px solid rgba(255,255,255,.06);
color:var(--body);vertical-align:top;line-height:1.55;
}
.trs-table tr:last-child td{border-bottom:0}
.trs-table tr:hover td{background:rgba(255,255,255,.024)}
/* ── CITY TILES ──────────────────────────────────────────── */
.city-list{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.city-search-bar{position:relative;max-width:440px;margin:0 0 1.1rem}
.city-search-bar .icon-svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.city-search-input{width:100%;border:1px solid rgba(255,255,255,.14);background:#0c1422;color:#fff;border-radius:12px;padding:.8rem .95rem .8rem 2.5rem;font:inherit;font-family:var(--font-body);transition:.15s ease}
.city-search-input:focus{outline:none;border-color:rgba(224,106,22,.5);box-shadow:0 0 0 3px rgba(224,106,22,.12)}
.city-search-input::placeholder{color:#5a6d84}
.city-no-match{grid-column:1 / -1;text-align:center;padding:1.5rem;border:1px dashed rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.025)}
.city-no-match p{color:var(--body);margin:0 0 .85rem;font-size:.95rem}
.city-tile{
display:block;padding:1.05rem 1.2rem;
border:1px solid rgba(255,255,255,.10);
background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
border-radius:14px;transition:.18s ease;
position:relative;overflow:hidden;
border-left:3px solid rgba(224,106,22,.35);
}
.city-tile::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--orange),transparent);
opacity:0;transition:.18s ease;
}
.city-tile:hover{background:rgba(224,106,22,.07);border-color:rgba(224,106,22,.30)}
.city-tile:hover::before{opacity:1}
.city-tile strong{display:block;color:#fff;font-weight:700;margin-bottom:.2rem;font-family:var(--font-display);font-size:1.05rem;letter-spacing:.02em}
.city-tile span{display:block;color:var(--muted);font-size:.82rem;font-family:var(--font-body)}
/* ── CHECKLIST ──────────────────────────────────────────── */
.check-list{
list-style:none;padding:0;margin-left:0;
display:flex;flex-direction:column;gap:.5rem;
}
.check-list li::before{
content:"";
flex-shrink:0;width:2rem;height:2rem;
display:inline-flex;align-items:center;justify-content:center;
background:var(--orange);
border-radius:50%;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
background-size:60%;
background-repeat:no-repeat;
background-position:center;
margin-top:.05rem;
}
.check-list li strong{display:block;color:#fff;margin-bottom:.25rem;font-size:1rem}
.check-list li{
display:flex;align-items:center;gap:1rem;
padding:1rem 1.2rem;
background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.09);
border-left:3px solid var(--orange);
border-radius:0 var(--r) var(--r) 0;
transition:.18s ease;
font-size:1rem;color:#d0dced;
}
.check-list li:hover{
background:linear-gradient(135deg,rgba(224,106,22,.06),rgba(224,106,22,.02));
border-left-color:rgba(224,106,22,.85);
border-color:rgba(224,106,22,.18);
transform:translateX(3px);
}
.check-list li::before{
content:"";
grid-column:1;grid-row:1/3;
align-self:start;margin-top:.15rem;
width:1.4rem;height:1.4rem;flex-shrink:0;
background:linear-gradient(135deg,var(--orange),var(--gold));
border-radius:50%;
box-shadow:0 0 10px rgba(224,106,22,.40);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23130900' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
background-size:60%;background-position:center;background-repeat:no-repeat;
}
/* Term label */
.check-list li strong{
grid-column:2;grid-row:1;
display:block;color:#fff;font-size:1rem;
font-weight:700;line-height:1.3;
font-family:var(--font-display);letter-spacing:.01em;
}
/* Description text (wrapped in span.cl-body) */
.check-list li .cl-body{
grid-column:2;grid-row:2;
display:block;color:#a8b8cc;font-size:.92rem;line-height:1.55;
margin-top:.1rem;
}
/* Plain-text items (no strong/span structure) */
.check-list li:not(:has(strong)){
grid-template-rows:auto;
font-size:.95rem;color:#c8d8e8;
}
.check-list li:not(:has(strong))::before{
grid-row:1;
}
/* Danger variant */
.check-list.danger li{
border-left-color:rgba(201,39,47,.55);
}
.check-list.danger li:hover{
border-left-color:rgba(201,39,47,.9);
border-color:rgba(201,39,47,.2);
background:linear-gradient(135deg,rgba(201,39,47,.06),rgba(201,39,47,.02));
}
.check-list.danger li::before{
box-shadow:0 0 9px rgba(201,39,47,.45);
background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") center/56% no-repeat;
}
/* ── DO / DON'T GRID ────────────────────────────────────── */
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.do-box,.dont-box{border-radius:var(--r);padding:1.2rem;border:1px solid}
.do-box{border-color:rgba(31,122,77,.35);background:rgba(31,122,77,.07)}
.dont-box{border-color:rgba(201,39,47,.32);background:rgba(201,39,47,.06)}
.do-box h3{color:#2ecc7a;font-size:1rem;margin-bottom:.65rem;letter-spacing:.04em}
.dont-box h3{color:#e05460;font-size:1rem;margin-bottom:.65rem;letter-spacing:.04em}
.do-box::before,.do-box::after,.dont-box::before,.dont-box::after{display:none}
/* ── SCROLL ANIMATION ────────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
/* ── ONPAGE NAV ──────────────────────────────────────────── */
.onpage{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0}
.onpage a{
display:inline-flex;border:1px solid rgba(255,255,255,.11);
background:rgba(255,255,255,.048);border-radius:999px;
padding:.48rem .72rem;color:#d0dcf4;font-weight:600;font-size:.87rem;
transition:.15s ease;
}
.onpage a:hover{background:var(--orange-lo);border-color:var(--bracket-dim);color:#fff}
/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer{
position:relative;border-top:1px solid rgba(255,255,255,.10);
background:linear-gradient(180deg,#080e1a,#05080f);overflow:hidden;
}
.site-footer::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(ellipse at 8% 10%,rgba(224,106,22,.20),transparent 30%),
radial-gradient(ellipse at 88% 0%,rgba(75,46,131,.15),transparent 28%),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:auto,auto,44px 44px;pointer-events:none;
}
.footer-badge{
display:inline-flex;align-items:center;gap:.45rem;margin:0;
padding:.32rem .72rem;border-radius:999px;
border:1px solid rgba(245,179,60,.45);
background:linear-gradient(135deg,rgba(245,179,60,.16),rgba(245,179,60,.05));
color:#fde5aa;font-weight:800;font-size:.7rem;
text-transform:uppercase;letter-spacing:.12em;
font-family:var(--font-body);transition:.18s ease;
box-shadow:0 0 0 0 rgba(245,179,60,0);
}
.footer-badge svg{
animation:star-pulse 3s ease-in-out infinite;
filter:drop-shadow(0 0 4px rgba(245,179,60,.7));
}
@keyframes star-pulse{
0%,100%{filter:drop-shadow(0 0 3px rgba(245,179,60,.5));transform:scale(1)}
50%{filter:drop-shadow(0 0 8px rgba(245,179,60,.95));transform:scale(1.18)}
}
.footer-badge:hover{
background:linear-gradient(135deg,rgba(245,179,60,.26),rgba(245,179,60,.08));
border-color:rgba(245,179,60,.7);
box-shadow:0 0 18px rgba(245,179,60,.25);
transform:translateY(-2px);
}
.footer-col h3{
margin:0 0 .85rem;color:#fff;font-size:.88rem;
text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-body);font-weight:800;
}
.footer-col a{
display:flex;align-items:center;gap:.4rem;color:#a8bace;
padding:.32rem 0;font-size:.92rem;transition:.14s ease;font-family:var(--font-body);
}
.footer-col a:hover{color:#fff}
.footer-col a svg{flex-shrink:0;opacity:.8;transition:.15s ease}
.footer-col a:hover svg{opacity:1;filter:drop-shadow(0 0 4px currentColor)}
/* Themed per column: Services (orange), Learning (cyan), Trust (gold) */
.footer-hud-col:nth-of-type(1) a svg{color:var(--orange)}
.footer-hud-col:nth-of-type(2) a svg{color:var(--cyan)}
.footer-hud-col:nth-of-type(3) a svg{color:#f5b33c}
.socials a{
font-size:.83rem;border:1px solid rgba(255,255,255,.10);border-radius:999px;
padding:.34rem .62rem;background:rgba(255,255,255,.04);transition:.15s ease;
}
.socials a:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#fff}
.footer-bottom{
position:relative;border-top:1px solid rgba(255,255,255,.08);
display:flex;flex-direction:column;gap:.55rem;
padding:1rem 1.25rem 1.1rem;color:#7a8fa6;font-size:.82rem;font-family:var(--font-body);
}
.footer-bottom-top{
display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
}
.footer-legal{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;justify-content:center}
.footer-legal a{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.footer-legal a:hover{color:#fff}
.footer-legal a:not(:last-child)::after{content:"·";margin-left:.9rem;color:#3e4f60}
.footer-legal a svg{flex-shrink:0;opacity:.8;transition:.15s ease}
.footer-legal a:hover svg{opacity:1;filter:drop-shadow(0 0 4px currentColor)}
.footer-legal a:nth-child(1) svg{color:var(--cyan)}
.footer-legal a:nth-child(2) svg{color:#b9c4d6}
.footer-legal a:nth-child(3) svg{color:#5ee69c}
.footer-legal a:nth-child(4) svg{color:#f5b33c}
.footer-legal a:nth-child(5) svg{color:#ff7a7a}
.footer-legal a:nth-child(6) svg{color:var(--orange)}
/* ── COMMUNITY PAGE ──────────────────────────────────────── */
.community-video{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem}
.community-video h3{font-size:1rem;font-weight:700;color:#fff;margin:.1rem 0 .25rem;line-height:1.25}
.community-video p{font-size:.84rem;color:#8898b4;line-height:1.5;margin:0 0 .5rem}
.community-video .btn{margin-top:auto}
.video-embed{
width:100%;max-width:240px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;
border:1px solid rgba(255,255,255,.1);background:#000;
box-shadow:0 12px 32px rgba(0,0,0,.4);margin:0 auto .5rem;
}
.video-embed iframe{width:100%;height:100%;border:0;display:block}
.community-video h3{font-size:1rem}
.community-video p{font-size:.85rem;color:var(--muted)}
.community-channel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;transition:.18s ease;border-color:color-mix(in srgb,var(--sc) 30%,transparent);--accent-bar:var(--sc)}
.community-channel .icon{width:2.8rem;height:2.8rem;margin-bottom:.2rem;padding:.35rem;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--sc);background:color-mix(in srgb,var(--sc) 14%,transparent);border:1px solid color-mix(in srgb,var(--sc) 26%,transparent)}
.community-channel h3{color:#fff;margin:0}
.community-channel:hover{transform:translateY(-3px);border-color:var(--sc);box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 0 1px var(--sc) inset}
.community-channel p{font-size:.85rem;color:var(--muted);margin:0}
/* ── MOBILE BOTTOM CTA ───────────────────────────────────── */
.mobile-cta{
display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;
background:rgba(5,8,16,.94);backdrop-filter:blur(18px);
border-top:1px solid rgba(255,255,255,.12);padding:.65rem;gap:.6rem;
}
.mobile-cta a{flex:1;min-width:0}
.mobile-cta .btn{padding:.7rem .6rem;font-size:.88rem;gap:.35rem;white-space:nowrap}
@media(max-width:380px){
.mobile-cta{padding:.5rem;gap:.4rem}
.mobile-cta .btn{font-size:.8rem;padding:.65rem .35rem;gap:.25rem}
}
/* ── FORM ELEMENTS ───────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:1.2rem;align-items:start}
.trs-form{display:grid;gap:.9rem}
.field label{display:block;color:#fff;font-weight:700;margin-bottom:.28rem;font-size:.94rem;font-family:var(--font-body)}
.field input,.field textarea,.field select{
width:100%;border:1px solid rgba(255,255,255,.14);background:#0c1422;
color:#fff;border-radius:12px;padding:.88rem .95rem;
font:inherit;color-scheme:dark;transition:.15s ease;font-family:var(--font-body);
}
.field input:focus,.field textarea:focus{
outline:none;border-color:rgba(224,106,22,.55);
box-shadow:0 0 0 3px rgba(224,106,22,.10);
}
.field select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#d0dcee 50%),linear-gradient(135deg,#d0dcee 50%,transparent 50%);
background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field textarea{min-height:148px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#5a6d84}
.split{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.gh-contact-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.1rem;margin-top:.7rem;font-size:.8rem}
.gh-contact-line a{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-weight:900;letter-spacing:.02em;text-decoration:none;transition:color .15s ease}
.gh-contact-line a[href^="tel:"]{color:var(--orange);letter-spacing:.03em}
.gh-contact-line a[href^="mailto:"]{color:#a8ecff}
.gh-contact-line a:not([href^="tel:"]):not([href^="mailto:"]){color:var(--muted)}
.gh-contact-line a:hover{color:#fff}
.gh-contact-line .icon-svg{width:14px;height:14px;flex-shrink:0}
.gh-contact-line a[href^="tel:"] .icon-svg{color:var(--orange)}
.gh-contact-line a[href^="mailto:"] .icon-svg{color:var(--cyan)}
.gh-contact-line a:not([href^="tel:"]):not([href^="mailto:"]) .icon-svg{color:var(--muted)}
.contact-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.contact-methods label{
position:relative;display:flex!important;align-items:center;justify-content:center;min-height:46px;
border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.052);
border-radius:12px;cursor:pointer;font-weight:700;color:#d4dff4;margin:0!important;
transition:.15s ease;font-family:var(--font-body);
}
.contact-methods input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.contact-methods label:has(input:checked){
background:rgba(224,106,22,.15);border-color:rgba(224,106,22,.65);color:#fff;
box-shadow:0 0 0 3px rgba(224,106,22,.08);
}
.trs-form input[name="_gotcha"]{display:none!important}
/* ── ACCESSIBILITY — Screen Reader Only ──────────────────── */
.sr-only,.visually-hidden{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.sr-only-focusable:focus,.sr-only-focusable:active{
position:static;width:auto;height:auto;overflow:visible;
clip:auto;white-space:normal;
}
/* ── ACCESSIBILITY ───────────────────────────────────────── */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btn:focus-visible,.nav-link:focus-visible{box-shadow:0 0 0 3px rgba(101,217,255,.22)}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
.fade-up{opacity:1!important;transform:none!important}
.btn.primary::after{display:none}
}
.hamb{
display:none;align-items:center;justify-content:center;
gap:.45rem;padding:.42rem .8rem;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.15);
border-radius:8px;cursor:pointer;
color:#c8d8e8;font-size:.82rem;font-weight:700;
font-family:var(--font-body);letter-spacing:.04em;
text-transform:uppercase;white-space:nowrap;
transition:.15s ease;
}
.hamb:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.hamb svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
/* ── FIELD REPORT CENTERING ─── */
.field-report-wrap{display:flex;justify-content:center}
.section-head.center-head{text-align:center}
.section-head.center-head h2,.section-head.center-head .eyebrow{text-align:center}
/* See How It Works — standalone below trust badges */
a.hero-see-how{
display:inline-flex;align-items:center;gap:.4rem;
margin-top:.7rem;
}
/* ── HAIL CALLOUT — inside storm card ─── */
.hail-callout{
margin:.8rem 0 1rem;padding:1rem 1.1rem;
border-left:3px solid var(--orange);
background:rgba(224,106,22,.06);
border-radius:0 8px 8px 0;
}
.hail-callout p{margin:0;font-size:.92rem;line-height:1.55;color:#c8d8e8}
.hail-callout strong{color:#fff}
/* ── SERVICE STANDARD PAGE SPACING ───────────────────────── */
.wrap.content .card + .compliance{margin-top:1.2rem}
.wrap.content .section-head{margin-bottom:1.4rem}
.compliance{padding:1.2rem 1.4rem;line-height:1.65}
.compliance p{margin:0}
/* ── LOOSE PARAGRAPH SECTIONS ─────── */
section > .wrap > p,
.section > .wrap > p{
max-width:840px;
}
/* ── CL-ITEM — action checklist items ─────────────────────── */
.checklist{display:flex;flex-direction:column;gap:.5rem}
.cl-item{
display:flex;flex-direction:column;gap:.25rem;
padding:1rem 1.2rem;
background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.09);
border-left:3px solid var(--orange);
border-radius:0 var(--r) var(--r) 0;
transition:.18s ease;
}
.cl-item:hover{
background:linear-gradient(135deg,rgba(224,106,22,.07),rgba(224,106,22,.02));
border-left-color:var(--orange);
border-color:rgba(224,106,22,.2);
}
.cl-item strong{
display:block;color:#fff;font-size:1rem;font-weight:700;
font-family:var(--font-body);
}
.cl-item .cl-body{
display:block;color:#a8b8cc;font-size:.93rem;line-height:1.55;
}
/* ── TABLE WRAP — depreciation / comparison tables ─── */
.table-wrap{
border-radius:var(--r);
border:1px solid rgba(255,255,255,.10);
overflow:hidden;margin:1.2rem 0 .5rem;;overflow-x:auto}
.table-wrap table{width:100%;border-collapse:collapse;font-size:.94rem}
.table-wrap th{
text-align:left;color:var(--orange);
font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;
font-weight:800;padding:.75rem 1rem;
background:rgba(224,106,22,.06);
border-bottom:1px solid rgba(224,106,22,.2);
font-family:var(--font-body);
}
.table-wrap th:not(:first-child){text-align:right}
.table-wrap td{
padding:.75rem 1rem;
border-bottom:1px solid rgba(255,255,255,.06);
color:#c8d8e4;vertical-align:top;
}
.table-wrap td:not(:first-child){text-align:right;color:#d8e8f4}
.table-wrap tr:last-child td{border-bottom:none}
.table-wrap tbody tr:hover td{background:rgba(255,255,255,.03)}
.table-wrap tbody tr td:first-child{color:#a8b8cc;font-size:.9rem}
.table-wrap td strong{color:#fff;font-weight:800}
.table-wrap tr.highlight td{background:rgba(224,106,22,.06);color:#fff}
/* ── SENTENCING LADDER (insurance-disclaimer penalty graphic) ── */
.pen-ladder{position:relative;margin:1.1rem 0;border:1px solid rgba(255,255,255,.09);border-radius:var(--r);background:linear-gradient(150deg,var(--glass-hi),var(--glass));box-shadow:0 8px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;isolation:isolate}
.pen-ladder::before{content:"";position:absolute;top:0;left:6%;right:6%;height:2px;background:linear-gradient(90deg,transparent,rgba(232,72,80,.7),transparent);box-shadow:0 2px 14px rgba(201,39,47,.35);opacity:.85;z-index:1}
.pen-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.75rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.07)}
.pen-head .pen-title{font-family:var(--font-display);font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text);font-weight:700}
.pen-head .pen-axis{font-family:var(--font-body);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.pen-tier{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;padding:.72rem 1.1rem;border-top:1px solid rgba(255,255,255,.05);border-left:3px solid var(--tier-accent,rgba(136,152,180,.45));cursor:default;transition:background .18s ease}
.pen-tier:hover,.pen-tier:focus-within{background:var(--tier-tint,rgba(255,255,255,.03));outline:none}
.pen-range{font-family:var(--font-body);font-weight:700;color:var(--body);min-width:9.5rem;font-size:.93rem}
.pen-grade{font-family:var(--font-body);font-weight:700;color:var(--tier-grade,var(--body));font-size:.93rem}
.pen-spacer{flex:1 1 auto}
.pen-cue{font-family:var(--font-body);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transition:opacity .18s ease}
.pen-tier:hover .pen-cue,.pen-tier:focus-within .pen-cue{opacity:0}
.pen-detail{flex-basis:100%;max-height:0;overflow:hidden;opacity:0;transform:translateY(-3px);transition:max-height .24s ease,opacity .2s ease,transform .2s ease}
.pen-tier:hover .pen-detail,.pen-tier:focus-within .pen-detail{max-height:4.5rem;opacity:1;transform:none}
.pen-detail span{display:inline-flex;align-items:center;gap:.5rem;margin-top:.55rem;font-family:var(--font-body);font-size:.82rem;color:var(--text);background:rgba(0,0,0,.28);border:1px solid var(--tier-accent,rgba(136,152,180,.3));border-radius:8px;padding:.4rem .65rem;line-height:1.25}
.pen-tier.misd{--tier-accent:rgba(245,179,60,.5);--tier-grade:var(--gold);--tier-tint:rgba(245,179,60,.05)}
.pen-line{display:flex;align-items:center;gap:.6rem;padding:.5rem 1.1rem;background:rgba(201,39,47,.13);border-top:1px solid rgba(201,39,47,.42);border-bottom:1px solid rgba(201,39,47,.42);border-left:3px solid var(--red)}
.pen-line b{font-family:var(--font-display);font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;color:#ff7a7a;font-weight:700;text-shadow:0 0 16px rgba(201,39,47,.45)}
.pen-line small{font-family:var(--font-body);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,122,122,.75)}
.pen-tier.fel{--tier-accent:rgba(201,39,47,.62);--tier-grade:#ff7a7a;--tier-tint:rgba(201,39,47,.06)}
.pen-tier.fel .pen-grade{text-shadow:0 0 14px rgba(201,39,47,.4)}
.pen-tier.fel-max{--tier-accent:rgba(201,39,47,.95);--tier-tint:rgba(201,39,47,.1)}
.pen-tier.fel-max .pen-grade{text-shadow:0 0 20px rgba(201,39,47,.6)}
@media(max-width:640px){.pen-detail{max-height:none;opacity:1;transform:none}.pen-cue{display:none}.pen-range{min-width:0;flex-basis:100%}.pen-grade{flex-basis:100%}}
/* FAQ on non-hub pages — fill available width */
.wrap > .faq,.wrap.content > .faq{max-width:100%}
/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1150px){
.nav{display:none}.hamb{display:inline-flex}
.navrow{grid-template-columns:minmax(0,1fr) auto;padding:.6rem 1.25rem}
.nav-actions .call{display:inline-flex}
.mobile-cta{display:flex}
body{padding-bottom:74px}
.grid.three > *,.grid.four > *{flex:0 1 calc(50% - .55rem)}
.grid.five > *{flex:0 1 calc(33.333% - .734rem)}
.stat-strip{grid-template-columns:repeat(2,1fr)}
.process-row{grid-template-columns:repeat(2,1fr)}
.city-list{grid-template-columns:repeat(2,1fr)}
.do-dont{grid-template-columns:1fr}
}
@media(max-width:760px){
body{font-size:16px}
.topline .wide{display:block}
.topline .wide div+div{margin-top:.2rem}
.brand img{width:58px}.brand-name{font-size:1.05rem}
.brand-sub{font-size:.6rem;white-space:normal;letter-spacing:.09em}
.hero{min-height:auto}
.hero .wrap{padding-top:3.5rem;padding-bottom:3.5rem;min-height:auto}
.hero.hero-inner .wrap{padding-top:2.2rem;padding-bottom:2.4rem}
.hero h1{font-size:clamp(2.4rem,12vw,3.8rem)}
.hero .lead{font-size:1.06rem}
.section{padding:3.2rem 0}.section.compact{padding:2.4rem 0}
.section-head{display:block}
.grid > *{flex:0 1 100%}
.footer-bottom-top{flex-direction:column;align-items:flex-start;gap:.3rem}
.footer-legal{margin-top:.2rem}
.nav-actions .btn{display:none}
.stat-strip{grid-template-columns:1fr 1fr}
.trs-table{font-size:.84rem}
.trs-table th,.trs-table td{padding:.6rem .7rem}
.contact-methods{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){
.navrow{gap:.4rem;padding:.5rem .9rem}
.brand img{width:48px}.brand-name{font-size:.92rem}
.hero h1{font-size:clamp(2rem,11vw,3.2rem)}
.stat-strip{grid-template-columns:1fr 1fr}
.stat-num{font-size:1.55rem}
}
/* ═══════════════════════════════════════════════════════════
ORGANISM LAYER · v11.1
Living system animations and status components
═══════════════════════════════════════════════════════════ */
/* ── ORGANISM KEYFRAMES ──────────────────────────────────── */
@keyframes heartbeat{
0%,100%{box-shadow:0 0 5px #4eff91,0 0 10px rgba(78,255,145,.3)}
14%{box-shadow:0 0 14px #4eff91,0 0 28px rgba(78,255,145,.6)}
28%{box-shadow:0 0 5px #4eff91,0 0 10px rgba(78,255,145,.3)}
42%{box-shadow:0 0 10px #4eff91,0 0 22px rgba(78,255,145,.5)}
}
@keyframes signal-ring{
0%{transform:scale(1);opacity:.7}
70%{transform:scale(2.8);opacity:0}
100%{transform:scale(2.8);opacity:0}
}
@keyframes breathe{
0%,100%{opacity:.10;transform:scale(1)}
50%{opacity:.22;transform:scale(1.12)}
}
@keyframes data-stream{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes flicker{
0%,96%,100%{opacity:1}
97%{opacity:.7}
98%{opacity:1}
99%{opacity:.8}
}
@keyframes node-ping{
0%{transform:translate(-50%,-50%) scale(1);opacity:1}
80%,100%{transform:translate(-50%,-50%) scale(3.5);opacity:0}
}
/* ── STATUS NODE ─────────────────────────────────────────── */
.status-node{
display:inline-flex;align-items:center;gap:.45rem;
padding:.32rem .72rem;border-radius:999px;
border:1px solid rgba(78,255,145,.28);
background:rgba(78,255,145,.07);
color:#a8ffd0;font-size:.7rem;font-weight:800;
text-transform:uppercase;letter-spacing:.12em;
font-family:var(--font-body);
}
.status-node .dot-live{
width:.45rem;height:.45rem;border-radius:50%;
background:#4eff91;flex-shrink:0;
animation:heartbeat 2.2s ease-in-out infinite;
}
.node-dot{
position:relative;width:.5rem;height:.5rem;flex-shrink:0;
}
.node-dot::before{
content:"";display:block;width:.5rem;height:.5rem;border-radius:50%;
background:var(--orange);
box-shadow:0 0 6px var(--orange);
}
.node-dot::after{
content:"";position:absolute;
top:50%;left:50%;transform:translate(-50%,-50%) scale(1);
width:.5rem;height:.5rem;border-radius:50%;
border:1.5px solid rgba(224,106,22,.6);
animation:node-ping 2.4s ease-out infinite;
}
/* ── HERO BREATHING GLOW ─────────────────────────────────── */
.hero-breathe{
position:absolute;
top:15%;left:5%;
width:520px;height:520px;
border-radius:50%;
background:radial-gradient(circle,rgba(224,106,22,.22),transparent 70%);
pointer-events:none;z-index:1;
animation:breathe 6s ease-in-out infinite;
}
/* ── BROADCAST STRIP ─────────────────────────────────────── */
.broadcast-strip{
position:relative;overflow:hidden;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
padding:1.6rem 1.25rem;
background:
linear-gradient(90deg,rgba(224,106,22,.06),rgba(101,217,255,.04),rgba(224,106,22,.06));
}
.broadcast-strip::before{
content:"";position:absolute;inset:0;
background:linear-gradient(270deg,
rgba(224,106,22,.18),rgba(101,217,255,.12),
rgba(75,46,131,.16),rgba(224,106,22,.18));
background-size:400% 400%;
animation:data-stream 8s ease infinite;
opacity:.55;mix-blend-mode:screen;pointer-events:none;
}
.broadcast-strip::after{
content:"";position:absolute;top:0;left:0;right:0;height:1.5px;
background:linear-gradient(90deg,
transparent 0%,rgba(224,106,22,.8) 25%,
rgba(101,217,255,.7) 50%,rgba(224,106,22,.8) 75%,transparent 100%);
background-size:400% 100%;
animation:data-stream 5s linear infinite;
}
.broadcast-inner{
position:relative;z-index:1;
max-width:var(--wide);margin:auto;
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:1rem;
}
.broadcast-left h3{
font-family:var(--font-display);font-weight:900;
font-size:clamp(1.6rem,2.6vw,2.4rem);
text-transform:uppercase;line-height:1;
margin:0 0 .3rem;letter-spacing:.01em;
}
.broadcast-left p{color:var(--body);margin:0;font-size:.96rem}
.broadcast-phone{
font-family:var(--font-display);font-weight:900;
font-size:clamp(1.8rem,3vw,2.8rem);
color:var(--orange);letter-spacing:.04em;
text-shadow:0 0 32px rgba(224,106,22,.4);
animation:flicker 7s ease-in-out infinite;
text-decoration:none;
transition:.15s ease;
}
.broadcast-phone:hover{color:#ffac3d}
/* ── FOOTER ORGANISM OVERRIDES ───────────────────────────── */
.footer-station{
position:relative;
}
.footer-station::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,
transparent 0%,rgba(224,106,22,.9) 20%,
rgba(101,217,255,.7) 50%,rgba(224,106,22,.9) 80%,transparent 100%);
background-size:300% 100%;
animation:data-stream 6s linear infinite;
}
.footer-field-header{
display:flex;align-items:center;gap:.7rem;margin:.8rem 0 .6rem;
}
.footer-field-label{
display:inline-flex;align-items:center;gap:.45rem;
padding:.32rem .72rem;border-radius:999px;
border:1px solid rgba(101,217,255,.28);background:rgba(101,217,255,.06);
color:#a8ecff;font-size:.7rem;font-weight:800;
text-transform:uppercase;letter-spacing:.12em;
font-family:var(--font-body);
}
.footer-field-label::before{
content:"";width:.45rem;height:.45rem;border-radius:50%;flex-shrink:0;
background:var(--cyan);box-shadow:0 0 6px var(--cyan);
}
.footer-coverage{
display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.6rem 0 1rem;
}
.footer-hud-col h3{
display:inline-flex;align-items:center;gap:.35rem;
font-size:.75rem!important;color:var(--orange)!important;
text-transform:uppercase;letter-spacing:.16em;
font-family:var(--font-body)!important;font-weight:800!important;
margin:0 0 .9rem!important;
}
.footer-hud-col h3::before{
content:"//";color:rgba(224,106,22,.45);font-weight:400;
letter-spacing:-.04em;font-size:.85em;
}
/* ── VITAL SIGNS STAT STRIP ──────────────────────────────── */
.stat-strip .stat-item{position:relative}
.stat-strip .stat-item::after{
content:"";position:absolute;bottom:0;left:10%;right:10%;height:1px;
background:linear-gradient(90deg,transparent,rgba(224,106,22,.4),transparent);
animation:data-stream 4s ease infinite;
animation-delay:var(--stat-delay,0s);
}
.stat-strip .stat-item:nth-child(1){--stat-delay:0s}
.stat-strip .stat-item:nth-child(2){--stat-delay:.6s}
.stat-strip .stat-item:nth-child(3){--stat-delay:1.2s}
.stat-strip .stat-item:nth-child(4){--stat-delay:1.8s}
/* ── TOPLINE ORGANISM ────────────────────────────────────── */
.topline-status{
display:inline-flex;align-items:center;gap:.5rem;color:#a8ffd0;
}
/* ── TOPLINE STATUS PILLS (3-pill system) ────────────────── */
.topline-pills{
display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;
}
.tl-pill{
display:inline-flex;align-items:center;gap:.4rem;
padding:.22rem .65rem;border-radius:999px;
font-size:.7rem;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;font-family:var(--font-body);
white-space:nowrap;
}
.tl-pill-active{
border:1px solid rgba(52,211,153,.35);
background:rgba(52,211,153,.07);
color:#6effc2;
}
.tl-pill-active .tl-dot{
width:.45rem;height:.45rem;border-radius:50%;
background:#34d399;
box-shadow:0 0 6px rgba(52,211,153,.8);
animation:pulse-dot 2.2s ease-in-out infinite;
flex-shrink:0;
}
.tl-pill-zone{
border:1px solid rgba(101,217,255,.3);
background:rgba(101,217,255,.06);
color:#65d9ff;
}
.tl-pill-zone .tl-dot{
width:.42rem;height:.42rem;border-radius:50%;
background:#65d9ff;opacity:.8;
flex-shrink:0;
}
.tl-pill-zone.zone-dfw{
border-color:rgba(224,106,22,.35);background:rgba(224,106,22,.07);color:#ffb07a;
}
.tl-pill-zone.zone-dfw .tl-dot{background:var(--orange);opacity:.9}
.tl-pill-zone.zone-hou{
border-color:rgba(245,179,60,.38);background:rgba(245,179,60,.08);color:#f5d88a;
}
.tl-pill-zone.zone-hou .tl-dot{background:var(--gold);opacity:.9}
.tl-pill-bbb{
border:1px solid rgba(245,179,60,.4);
background:rgba(245,179,60,.08);
color:#f5b33c;
}
.tl-pill-bbb svg{
width:11px;height:11px;flex-shrink:0;
color:#f5b33c;fill:none;stroke:currentColor;stroke-width:1.75;
}
@media(max-width:1100px){
.tl-pill-zone{display:none}
}
@media(max-width:860px){
.tl-pill-bbb{display:none}
}
@media(max-width:640px){
.topline-pills{display:none}
}
/* ── REDUCED MOTION OVERRIDES ────────────────────────────── */
@media(prefers-reduced-motion:reduce){
.hero-breathe,.broadcast-strip::before,.broadcast-strip::after,
.footer-station::before,.stat-strip .stat-item::after,
.broadcast-phone,.node-dot::after{animation:none!important}
.dot-live,.status-node .dot-live{animation:none!important;box-shadow:none}
}
/* Social link glow — organism layer */
.socials a{
transition:.18s ease;
}
.socials a:hover{
background:rgba(var(--sc-rgb, 224,106,22),.14)!important;
border-color:color-mix(in srgb, var(--sc, #e06a16) 55%, transparent)!important;
color:#fff!important;
box-shadow:0 0 18px color-mix(in srgb, var(--sc, #e06a16) 30%, transparent);
}
/* ═══════════════════════════════════════════════════════════
COD/WoW TACTICAL LAYER · v11.2
Systematic precision UI: four-corner brackets, eyebrow
category HUD, hero reticle, field-verified stamps,
mission-step chamfer badges, section micro-dividers.
═══════════════════════════════════════════════════════════ */
/* ── /* ── FOUR-CORNER CARD BRACKETS ───────────────────────────
Corner brackets use ::before and ::after pseudo-elements */
/* Color variant corner overrides */
.card.orange { --bracket-dim: rgba(224,106,22,.32) }
.card.red { --bracket-dim: rgba(201,39,47,.28) }
.card.green { --bracket-dim: rgba(31,122,77,.28) }.card.cyan{ --bracket-dim: rgba(101,217,255,.22) }
.card.purple{ --bracket-dim: rgba(138,111,196,.22) }
.card.maroon { --bracket-dim: rgba(184,58,74,.24) }
/* ── HERO TARGETING FRAME ────────────────────────────────
Injected by JS as .hero-frame > span.hf-{tl,tr,bl,br}
Creates a CoD "you are looking through something" feel */
.hero-frame {
position: absolute;
inset: 1.4rem 1.6rem;
pointer-events: none;
z-index: 3;
}
.hf-tl,.hf-tr,.hf-bl,.hf-br {
position: absolute;
width: 32px;
height: 32px;
}
.hf-tl {
top: 0; left: 0;
border-top: 1.5px solid rgba(224,106,22,.55);
border-left: 1.5px solid rgba(224,106,22,.55);
}
.hf-tr {
top: 0; right: 0;
border-top: 1.5px solid rgba(224,106,22,.28);
border-right: 1.5px solid rgba(224,106,22,.28);
}
.hf-bl {
bottom: 0; left: 0;
border-bottom: 1.5px solid rgba(224,106,22,.22);
border-left: 1.5px solid rgba(224,106,22,.22);
}
.hf-br {
bottom: 0; right: 0;
border-bottom: 1.5px solid rgba(224,106,22,.14);
border-right: 1.5px solid rgba(224,106,22,.14);
}
/* Diagonal tick marks on top-left corner — CoD reticle accent */
.hf-tl::after {
content: "";
position: absolute;
top: 3px; left: 3px;
width: 4px; height: 4px;
background: rgba(224,106,22,.6);
border-radius: 50%;
box-shadow: 0 0 8px rgba(224,106,22,.5);
}
/* ── EYEBROW CATEGORY HUD ────────────────────────────────
When data-cat="Category" is present, the ::before
renders as "// CATEGORY ·" in tactical format */
.eyebrow[data-cat]::before {
content: "// " attr(data-cat) " ·";
display: inline;
color: rgba(224,106,22,.55);
font-weight: 600;
letter-spacing: .1em;
font-size: .88em;
margin-right: .38em;
white-space: nowrap;
}
/* Override the base ::before for data-cat eyebrows
(base generates "//" — we replace that entirely) */
.eyebrow[data-cat] {
gap: 0;
}
.eyebrow[data-cat]::before {
/* already set above; remove the gap compensation */
gap: 0;
}
/* ── PROCESS STEP — CHAMFERED MISSION BADGE ─────────────
Replaces rounded corners with CoD mission-marker
chamfered polygon badge. Reads as tactical, not gamer. */
.process-step::before {
border-radius: 0;
clip-path: polygon(
0 0,
calc(100% - 8px) 0,
100% 8px,
100% 100%,
8px 100%,
0 calc(100% - 8px)
);
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: .1em;
}
/* ── COMPLIANCE / FIELD VERIFIED STAMP ───────────────────
CSS-only injection — no HTML changes needed */
.compliance::before {
content: "⬡ FIELD VERIFIED · INSURANCE-SAFE DOCUMENTATION";
display: block;
font-size: .62rem;
letter-spacing: .17em;
color: rgba(245,179,60,.72);
font-weight: 800;
text-transform: uppercase;
margin-bottom: .8rem;
font-family: var(--font-body);
padding-bottom: .55rem;
border-bottom: 1px solid rgba(245,179,60,.15);
}
/* ── SECTION MICRO-DIVIDERS ──────────────────────────────
Hairline data-transmission lines between stacked sections */
.section + .section,
.section.compact + .section,
.section + .section.compact,
.section.compact + .section.compact {
position: relative;
}
.section + .section::before,
.section.compact + .section::before,
.section + .section.compact::before,
.section.compact + .section.compact::before {
content: "";
position: absolute;
top: 0; left: 8%; right: 8%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(224,106,22,.12) 20%,
rgba(101,217,255,.08) 50%,
rgba(224,106,22,.12) 80%,
transparent
);
pointer-events: none;
}
/* ── TABLE — TACTICAL ROW TREATMENT ─────────────────────
CoD intel-readout style with target-lock highlight */
.trs-table thead tr {
position: relative;
}
.trs-table thead tr::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, rgba(224,106,22,.55), rgba(101,217,255,.35), rgba(224,106,22,.55));
}
.trs-table tr:hover td {
background: rgba(224,106,22,.045);
color: #dde8f5;
}
.trs-table td:first-child {
font-family: var(--font-display);
font-weight: 700;
color: #d4dff0;
letter-spacing: .02em;
}
/* ── HUD NAV LINK ACTIVE INDICATOR ──────────────────────
Active nav items get a small data-arc below the text */
/* ── STAT STRIP — DATA READOUT PRECISION ────────────────
Numbers feel like they're pulled from a live system */
.stat-num {
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: .06em;
position: relative;
}
.stat-num::after {
content: "";
position: absolute;
bottom: -4px; left: 15%; right: 15%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(224,106,22,.5), transparent);
}
/* ── BACKLINK — TACTICAL RETURN ─────────────────────────*/
.backlink::before {
content: "◂";
margin-right: .3rem;
color: var(--orange);
font-size: .9em;
}
/* ── KICKER — REFINED HUD PILL ──────────────────────────*/
/* ── REDUCED MOTION ──────────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
.hf-tl::after{animation:none}
.stat-num::after{animation:none}
}
/* ── RESPONSIVE CORNER FIXES ─────────────────────────────── */
@media(max-width:768px){
.hero-frame span{width:1.2rem;height:1.2rem;border-width:2px}
.card::before,.card::after{width:1rem;height:1rem;border-width:1.5px}
.process-step::after{display:none}
}
@media(max-width:480px){
.hero-frame span{width:.9rem;height:.9rem}
.card::before,.card::after{display:none}
}
/* Prevent corner brackets from overlapping interactive elements */
.card .btn,.card .tag,.need-option{position:relative;z-index:2}
.card::before,.card::after{z-index:0}
/* ── SITEWIDE HOVER INTERACTIONS ────────────────────────── */
.card,.city-tile,.need-option{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card:hover,.city-tile:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.card.orange:hover{border-color:rgba(224,106,22,.45);box-shadow:0 12px 40px rgba(224,106,22,.12)}
.card.red:hover{border-color:rgba(201,39,47,.4);box-shadow:0 12px 40px rgba(201,39,47,.1)}
.card.green:hover{border-color:rgba(30,122,76,.4);box-shadow:0 12px 40px rgba(78,255,145,.1)}
/* Mobile: persistent color borders instead of hover */
@media(hover:none){
.card.orange{border-color:rgba(224,106,22,.25)}
.card.red{border-color:rgba(201,39,47,.2)}
.card.green{border-color:rgba(30,122,76,.2)}
.card:active{transform:scale(.98)}
}
/* ── SOCIAL LINKS ────────────────────────────────────────── */
.socials{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.socials a{
display:inline-flex;align-items:center;gap:.4rem;
padding:.35rem .7rem;border-radius:8px;
background:rgba(255,255,255,.05);
border:1px solid color-mix(in srgb,var(--sc,#888) 30%,transparent);
color:color-mix(in srgb,var(--sc,#aaa) 80%,#fff);
font-size:.78rem;font-weight:600;font-family:var(--font-body);
transition:.15s ease;white-space:nowrap;
box-shadow:0 0 0 0 var(--sc,transparent);
}
.socials a:hover{
background:color-mix(in srgb,var(--sc,#888) 12%,transparent);
border-color:color-mix(in srgb,var(--sc,#888) 60%,transparent);
box-shadow:0 0 12px color-mix(in srgb,var(--sc,transparent) 25%,transparent);
color:#fff;transform:translateY(-2px);
}
/* ── TOPLINE TICKER ──────────────────────────────────────── */
.topline-ticker-wrap{
flex:1;overflow:hidden;position:relative;
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.topline-ticker{
display:flex;gap:0;width:max-content;
white-space:nowrap;
}
.topline-ticker:hover{animation-play-state:paused}
.topline-ticker span{
padding:0 2.5rem;color:#8ab0cc;font-size:.78rem;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:.6rem;
}
.topline-ticker span::before{
content:"●";color:var(--cyan);font-size:.5rem;flex-shrink:0;
}
@keyframes ticker-scroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.topline-trust{
display:flex;align-items:center;gap:.4rem;
color:#7a9ab8;font-size:.78rem;font-weight:600;
white-space:nowrap;padding-left:.8rem;
border-left:1px solid rgba(255,255,255,.08);
}
.topline-trust .trust-val{color:#c8d8e8;font-weight:700}
/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.75rem;color:rgba(200,216,232,.5);
font-family:var(--font-body);
font-weight:600;letter-spacing:.04em;
margin-bottom:0;
}
/* ── HERO META ROW — breadcrumb + kicker on one level ──────── */
.hero-meta-row{
display:flex;align-items:center;justify-content:space-between;
gap:.75rem;margin-bottom:.9rem;flex-wrap:wrap;
}
.hero-meta-row .breadcrumb{margin-bottom:0}
.hero-meta-row .kicker{margin-bottom:0;flex-shrink:0}
.breadcrumb a{color:rgba(200,216,232,.5);transition:.15s}
.breadcrumb a:hover{color:rgba(224,106,22,.9)}
.breadcrumb span{color:rgba(200,216,232,.25)}
.breadcrumb .current{color:rgba(224,106,22,.7)}
/* ── DEPLOYMENT FREQUENCY BADGE ─────────────────────────── */
.deploy-badge{
display:inline-flex;align-items:center;gap:.5rem;
padding:.22rem .65rem;border-radius:999px;
background:rgba(224,106,22,.08);border:1px solid rgba(224,106,22,.25);
font-size:.68rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--orange);
font-family:var(--font-body);
}
.signal-bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px;flex-shrink:0}
.signal-bars span{
display:inline-block;width:3px;border-radius:1px;background:rgba(224,106,22,.2);
transition:.15s;
}
.signal-bars span:nth-child(1){height:4px}
.signal-bars span:nth-child(2){height:6px}
.signal-bars span:nth-child(3){height:9px}
.signal-bars span:nth-child(4){height:12px}
.signal-bars.bars-4 span{background:var(--orange)}
.signal-bars.bars-3 span:nth-child(1),.signal-bars.bars-3 span:nth-child(2),.signal-bars.bars-3 span:nth-child(3){background:var(--orange)}
.signal-bars.bars-2 span:nth-child(1),.signal-bars.bars-2 span:nth-child(2){background:var(--orange)}
.signal-bars.bars-1 span:nth-child(1){background:var(--orange)}
/* Fix: .city-tile span{display:block} (higher specificity) was collapsing the
badge and its signal bars into stacked full-width blocks. Restore inline layout
and give the badge its own line within the tile. */
.city-tile .deploy-badge,
.city-tile .signal-bars,
.city-tile .signal-bars span{display:inline-flex}
.city-tile .signal-bars span{display:inline-block}
.city-tile .deploy-badge{
width:auto;align-self:flex-start;margin-top:.55rem;
}
/* ═══════════════════════════════════════════════════════════
v12 OVERRIDES · June 2026
Hero locked-frame, card top-accent bars, accent calibration,
compact mega menu, footer rebuild, FAQ hub, field reports,
service-area regions, deploy badges.
═══════════════════════════════════════════════════════════ */
/* ── 4.1 HERO — LOCKED STAR-TO-STAR FRAME ───────────────── */
.hero,
.hero.hero-inner{
position:relative;overflow:hidden;border-bottom:1px solid var(--line);
background:var(--bg);
display:flex;align-items:center;
}
/* Banner hero: FIXED height, does not flex with text length */
.hero:not(.hero-inner){
min-height:clamp(440px,40vw,560px);
}
/* Inner hero keeps a comfortable min-height */
.hero.hero-inner{
min-height:clamp(300px,26vw,380px);
}
.hero.hero-inner{min-height:auto}
/* Homepage hero — banner image with gradient overlay */
.hero:not(.hero-inner)::before{
content:"";position:absolute;inset:0;
background-image:
linear-gradient(90deg,rgba(5,8,16,.92) 0%,rgba(5,8,16,.78) 32%,rgba(5,8,16,.34) 62%,rgba(5,8,16,.30) 100%),
linear-gradient(180deg,rgba(5,8,16,.45) 0%,rgba(5,8,16,0) 18%,rgba(5,8,16,0) 78%,rgba(5,8,16,.55) 100%),
url('/assets/img/trs-banner-hero.webp');
background-size:cover,cover,cover;
background-position:center,center,center center;
background-repeat:no-repeat;
filter:saturate(1.08) contrast(1.03);
z-index:0;
}
.hero::after,
.hero.hero-inner::after{
content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at 72% 45%,rgba(224,106,22,.12),transparent 38%);
pointer-events:none;z-index:1;
}
.hero .hero-breathe{max-height:23.5vw}
.hero .wrap{
position:relative;z-index:2;
display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
padding-top:2.5rem;padding-bottom:2.5rem;
}
/* ── Hero text panel — constrain width, sit left over banner ──────────── */
.hero:not(.hero-inner) .wrap > div{
max-width:600px;
background:linear-gradient(135deg,rgba(7,11,20,.90),rgba(7,11,20,.74));
border:1px solid rgba(255,255,255,.10);
border-left:3px solid var(--orange);
border-radius:14px;
padding:1.35rem 1.8rem;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
box-shadow:0 24px 70px rgba(0,0,0,.55);
}
@media(max-width:768px){
.hero:not(.hero-inner) .wrap > div{padding:1.5rem 1.3rem;max-width:100%}
.hero,.hero.hero-inner{min-height:clamp(380px,80vw,520px)}
}
/* ── 4.1b HERO-INNER — no photo banner, tactical gradient only ──
The full "THE ROOF SHEPHERD" wordmark artwork is sized/cropped
for the homepage hero only. On inner pages it duplicated the
header logo and produced mid-letter cutoffs at every content
height. Inner pages instead use a clean dark tactical gradient
+ glow — guaranteed identical on every page, any content length. */
.hero.hero-inner{min-height:auto}
.hero.hero-inner::before{
height:auto;inset:0;
background-image:
radial-gradient(ellipse at 18% 30%,rgba(224,106,22,.10),transparent 45%),
linear-gradient(135deg,#0a0f1a,#070b14 60%,#05080f);
background-size:auto;
filter:none;
}
.hero.hero-inner::after{height:auto;inset:0}
.hero.hero-inner .hero-breathe{max-height:none}
.hero.hero-inner .wrap{min-height:clamp(220px,22vw,360px);padding:2.4rem 0}
/* Inner page hero panel fills full content column — matches section widths below */
.hero.hero-inner .wrap > div{max-width:100%}
/* minimum height floor so short-content pages (legal, about sub-pages)
render identically to content-heavy inner pages — no collapsing slivers */
/* ── HERO TEXT PANEL — consistent HUD readout, ensures legibility
on every page regardless of underlying banner artwork ────── */
.hero .wrap > div{
position:relative;max-width:760px;
padding:1.5rem 1.7rem;
background:linear-gradient(135deg,rgba(6,10,20,.78),rgba(6,10,20,.52));
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.09);
border-left:3px solid var(--orange);
border-radius:var(--r);
box-shadow:0 16px 48px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.05);
}
/* HUD corner ticks — top-right / bottom-left, tactical accent */
.hero .wrap > div::before,
.hero .wrap > div::after{
content:"";position:absolute;width:18px;height:18px;pointer-events:none;
}
.hero .wrap > div::before{
top:-1px;right:-1px;
border-top:1.5px solid rgba(224,106,22,.55);
border-right:1.5px solid rgba(224,106,22,.55);
border-radius:0 var(--r) 0 0;
}
.hero .wrap > div::after{
bottom:-1px;left:-1px;
border-bottom:1.5px solid rgba(224,106,22,.22);
border-left:1.5px solid rgba(224,106,22,.22);
border-radius:0 0 0 var(--r);
}
.hero .wrap > div > *:last-child{margin-bottom:0}
@media(max-width:760px){
.hero .wrap > div{padding:1.15rem 1.25rem;max-width:100%}
}
@media(max-width:1100px){
.hero,.hero.hero-inner{min-height:auto}
.hero .wrap{
min-height:auto;padding-top:2.4rem;padding-bottom:2.4rem;
justify-content:center;
}
.hero.hero-inner .wrap{min-height:clamp(200px,30vw,320px);padding-top:1.8rem}
}
@media(max-width:760px){
.hero,.hero.hero-inner{min-height:auto}
.hero::before{
background-position:center;
background-size:cover;
}
.hero .wrap{padding-top:2.2rem;padding-bottom:2.2rem}
.hero.hero-inner .wrap{min-height:clamp(180px,40vw,280px);padding-top:1.6rem;padding-bottom:1.8rem}
.hero h1{font-size:clamp(2.2rem,9vw,3.4rem)}
}
/* ── 4.4 TICKER — SLOWED 30% ─────────────────────────────── */
.topline-ticker{animation:ticker-scroll 180s linear infinite}
/* ── 4.5 / 4.6 CARD TOP ACCENT BAR (replaces bracket corners) ── */
.card::before,.card::after{
content:"";position:absolute;top:0;left:6%;right:6%;
height:2px;border:none;width:auto;bottom:auto;
background:linear-gradient(90deg,transparent,var(--accent-bar,rgba(224,106,22,.55)),transparent);
box-shadow:0 2px 12px var(--accent-bar,rgba(224,106,22,.25));
opacity:.72;border-radius:0;
transition:.22s ease;
}
.card::after{display:none}
.card{--accent-bar:rgba(224,106,22,.62)}
.card.orange{--accent-bar:rgba(255,150,60,.7)}
.card.red{--accent-bar:rgba(232,72,80,.65)}
.card.green{--accent-bar:rgba(60,200,130,.65)}.card.cyan{--accent-bar:rgba(101,217,255,.65)}
.card.purple{--accent-bar:rgba(138,111,196,.65)}
.card.maroon{--accent-bar:rgba(184,58,74,.6)}
.card:hover::before{opacity:1;height:4px;box-shadow:0 0 24px var(--accent-bar,rgba(224,106,22,.6)),0 0 48px var(--accent-bar,rgba(224,106,22,.2))}
.card:hover{border-color:rgba(224,106,22,.35);box-shadow:0 16px 52px rgba(0,0,0,.46),0 0 0 1px rgba(224,106,22,.1),inset 0 1px 0 rgba(255,255,255,.07)}
@media(hover:none){
.card::before{opacity:.85}
}
/* hero-frame corners remain the only bracket motif sitewide */
/* ── 4.3 STAT STRIP — CLICKABLE, HUD TICKS ───────────────── */
.stat-strip{grid-template-columns:repeat(5,1fr)}
.stat-item{
padding:1.25rem .9rem;position:relative;
transition:.18s ease;
}
a.stat-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none}
.stat-item::before{
opacity:0;transition:.18s ease;
}
.stat-item:hover::before{opacity:.9}
.stat-item:hover{background:rgba(224,106,22,.05)}
.stat-item:not(:last-child)::after{
content:"";position:absolute;top:50%;right:0;transform:translateY(-50%);
width:1px;height:55%;background:rgba(255,255,255,.08);
}
.stat-item.edu-first{grid-column:span 1}
.stat-item.edu-first .stat-num{font-size:1.35rem;line-height:1.15}
@media(max-width:1150px){
.stat-strip{grid-template-columns:repeat(2,1fr)}
.stat-item.edu-first{grid-column:span 2}
.stat-item:not(:last-child)::after{display:none}
}
/* ── 4.8 FOOTER REBUILD — 5 HORIZONTAL BANDS ─────────────── */
.f-band{
position:relative;border-bottom:1px solid rgba(255,255,255,.07);
padding:1.1rem 1.25rem;max-width:var(--wide);margin:auto;
}
.f-band:last-child{border-bottom:0}
.f-band1{
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
gap:1rem;flex-wrap:wrap;padding:1.3rem 1.25rem;
}
.f-band1-brand{display:flex;align-items:center;gap:.8rem}
.f-band1-brand img{width:56px;height:56px;border-radius:50%;filter:drop-shadow(0 0 12px rgba(224,106,22,.35))}
.f-band1-brand .fb-name{font-family:var(--font-display);font-weight:900;font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em;color:#fff;line-height:1.1}
.f-band1-brand .fb-slogan{display:block;color:#ffc87a;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-top:.18rem}
.f-band1-right{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center}
/* Footer pills — unified, linkable */
.footer-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.34rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#cdd7e4;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-body);text-decoration:none;transition:.16s ease;white-space:nowrap}
a.footer-pill:hover{border-color:rgba(224,106,22,.5);color:#fff;background:rgba(224,106,22,.08)}
.footer-pill svg{width:14px;height:14px}
.footer-pill--live{color:#8fe6b4;border-color:rgba(46,204,122,.28)}
.footer-pill--live .dot-live{width:7px;height:7px;border-radius:50%;background:#2ecc7a;box-shadow:0 0 8px #2ecc7a;display:inline-block}
.f-dispatch{text-align:center}
.f-dispatch .btn{justify-content:center}
.f-band2{
display:grid;grid-template-columns:repeat(4,1fr) minmax(220px,280px);gap:1.4rem;
padding:1.4rem 1.25rem;align-items:start;
}
.f-band2 h3{
display:inline-flex;align-items:center;gap:.35rem;
font-size:.75rem!important;color:var(--orange)!important;
text-transform:uppercase;letter-spacing:.16em;
font-family:var(--font-body)!important;font-weight:800!important;
margin:0 0 .7rem!important;
}
.f-band2 h3::before{content:"//";color:rgba(224,106,22,.45);font-weight:400;letter-spacing:-.04em;font-size:.85em}
.f-band2 a{display:flex;align-items:center;gap:.4rem;color:#a8bace;padding:.26rem 0;font-size:.88rem;transition:.14s ease}
.f-band2 a:hover{color:#fff}
.f-dispatch{
border:1px solid rgba(224,106,22,.25);background:rgba(224,106,22,.05);
border-radius:var(--r);padding:.9rem 1rem;
}
.f-dispatch h3{margin-bottom:.6rem!important}
.f-dispatch .btn{width:100%;margin-bottom:.5rem}
.f-dispatch p{font-size:.78rem;color:var(--muted);margin:.5rem 0 0}
.f-band3{padding:1rem 1.25rem}
.f-coverage{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.f-city-chip{
display:inline-flex;align-items:center;gap:.35rem;
padding:.3rem .65rem;border-radius:999px;font-size:.78rem;font-weight:600;
background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);color:#c4d8f0;
position:relative;
}
.f-city-chip .node-dot{position:relative;width:.4rem;height:.4rem}
.f-city-chip .node-dot::before{content:"";display:block;width:.4rem;height:.4rem;border-radius:50%;background:var(--orange);box-shadow:0 0 6px var(--orange)}
.f-city-chip .node-dot::after{
content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);
width:.4rem;height:.4rem;border-radius:50%;border:1.5px solid rgba(224,106,22,.6);
animation:node-ping 2.4s ease-out infinite;
}
.f-city-chip.base{border-color:rgba(78,255,145,.25);background:rgba(78,255,145,.05);color:#c8ffe4}
.f-city-chip.base .node-dot::before{background:#4eff91;box-shadow:0 0 8px #4eff91}
.f-city-chip.base .node-dot::after{border-color:rgba(78,255,145,.6);animation-duration:1.8s}
.f-city-chip.more{color:var(--orange);border-color:rgba(224,106,22,.3);background:rgba(224,106,22,.06);font-weight:700}
.f-band4{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
flex-wrap:wrap;padding:1.1rem 1.25rem;
}
.f-comms-left{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.f-phone{font-family:var(--font-display);font-weight:900;font-size:1.35rem;color:var(--orange);letter-spacing:.03em;display:inline-flex;align-items:center;gap:.4rem}
.f-email{
font-family:var(--font-display);font-weight:900;font-size:1.35rem;
color:#a8ecff;letter-spacing:.02em;
display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
transition:.18s ease;
}
.f-email svg{color:var(--cyan)}
.f-email:hover{color:#fff;text-shadow:0 0 18px rgba(101,217,255,.5)}
.f-social{display:flex;gap:.5rem}
.f-social a{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:12px;
background:rgba(255,255,255,.04);
border:1px solid color-mix(in srgb,var(--sc,#888) 30%,transparent);
color:color-mix(in srgb,var(--sc,#aaa) 85%,#fff);
transition:.18s ease;
}
.f-social a:hover{
background:color-mix(in srgb,var(--sc,#888) 14%,transparent);
border-color:color-mix(in srgb,var(--sc,#888) 60%,transparent);
box-shadow:0 0 14px color-mix(in srgb,var(--sc,transparent) 30%,transparent);
color:#fff;transform:translateY(-2px);
}
@media(hover:none){
.f-social a{box-shadow:0 0 8px color-mix(in srgb,var(--sc,transparent) 22%,transparent)}
}
.f-social svg{width:18px;height:18px}
@media(max-width:980px){
.f-band2{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
.f-band1{flex-direction:column;align-items:center;text-align:center}
.f-band1-brand{justify-content:center}
.f-band2{grid-template-columns:1fr 1fr}
.f-band2 .f-dispatch{grid-column:1/-1}
.f-band4{flex-direction:column;align-items:flex-start}
.f-comms-left{flex-direction:column;align-items:flex-start;gap:.6rem}
}
/* ── UNIVERSAL PROSE PANEL ───────────────────────────────────
.wrap.content is the standard class for all non-card content
sections sitewide. One rule enforces the box standard across
About, Learning Center, Services, Trust, and Legal pages.
──────────────────────────────────────────────────────────── */
.content{
background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
border:1px solid rgba(255,255,255,.08);
border-left:3px solid rgba(224,106,22,.4);
border-radius:0 var(--r) var(--r) 0;
padding:2rem 2.4rem;
margin:2.5rem auto;
}
.content p{
color:#c0d0e0;font-size:1rem;line-height:1.78;
margin-bottom:1.15rem;
}
.content p:last-child{margin-bottom:0}
.content h2{
color:#fff;font-family:var(--font-display);font-weight:800;
text-transform:uppercase;margin-bottom:.9rem;
}
.content h3{
color:#fff;font-family:var(--font-display);font-weight:800;
font-size:1.1rem;text-transform:uppercase;
margin:1.4rem 0 .5rem;
}
/* Plain prose links default to cyan. :where() holds this at low specificity so ANY
component link rule (.faq-viewall, .gh-contact-line a, future components) wins
automatically — no per-component override needed. */
.content :where(a){color:var(--cyan);text-underline-offset:3px}
.content :where(a):hover{color:#fff}
.content strong{color:#fff;font-weight:700}
.faq details{position:relative}
/* ── FAQ Get Help CTA (footer of each FAQ block) ── */
.faq-help{text-align:center;margin-top:1.1rem;padding:.95rem 1rem;border:1px solid rgba(224,106,22,.24);border-radius:12px;background:linear-gradient(150deg,rgba(224,106,22,.06),rgba(224,106,22,.015))}
.faq-help p{margin:0}
.faq-help-title{font-family:var(--font-display);font-size:1rem;letter-spacing:.03em;text-transform:uppercase;color:var(--text);font-weight:700;line-height:1.12}
.faq-help .faq-help-sub{margin-top:.25rem;font-family:var(--font-body);font-size:.82rem;color:var(--muted);line-height:1.3}
.faq-help-btn{display:inline-flex;margin-top:.7rem;padding:.45rem 1.2rem;font-size:.85rem;gap:.4rem}
@media(max-width:640px){.faq-help{padding:.85rem .9rem}.faq-help-title{font-size:.92rem}.faq-help .faq-help-sub{font-size:.78rem}}
.faq-viewall{
display:inline-flex;align-self:flex-start;align-items:center;gap:.4rem;margin-top:1rem;
border:1px solid color-mix(in srgb,var(--cc,var(--orange)) 38%,transparent);
background:color-mix(in srgb,var(--cc,var(--orange)) 9%,transparent);
border-radius:999px;padding:.5rem 1rem;color:color-mix(in srgb,var(--cc,var(--orange)) 70%,#fff);font-weight:700;font-size:.88rem;
transition:.15s ease;
}
.content a.faq-viewall{color:color-mix(in srgb,var(--cc,var(--orange)) 70%,#fff)}
.faq-viewall:hover{background:color-mix(in srgb,var(--cc,var(--orange)) 17%,transparent);border-color:color-mix(in srgb,var(--cc,var(--orange)) 58%,transparent)}
.content a.faq-viewall:hover{color:#fff}
/* ── FAQ HUB — CATEGORY JUMP NAV ─────────────────────────── */
.faq-hub-chips{
display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;gap:.35rem;margin:1.2rem 0 2rem;
position:sticky;top:var(--header-h,72px);z-index:30;
padding:.5rem .55rem;border-radius:14px;
background:rgba(8,12,22,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.faq-hub-chips::-webkit-scrollbar{display:none}
.faq-hub-chips a{
display:inline-flex;align-items:center;gap:.28rem;white-space:nowrap;flex-shrink:0;
border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
border-radius:999px;padding:.4rem .56rem;color:#d0dcf4;font-weight:700;font-size:.78rem;
transition:.15s ease;
}
.faq-hub-chips a svg{flex-shrink:0;width:14px;height:14px;color:var(--cc,var(--orange))}
.faq-hub-chips a:hover{background:color-mix(in srgb,var(--cc,var(--orange)) 14%,transparent);border-color:color-mix(in srgb,var(--cc,var(--orange)) 45%,transparent);color:#fff}
.faq-hub-chips a.active{background:color-mix(in srgb,var(--cc,var(--orange)) 16%,transparent);border-color:color-mix(in srgb,var(--cc,var(--orange)) 55%,transparent);color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cc,var(--orange)) 24%,transparent)}
.faq-hub-cat h2{display:flex;align-items:center;gap:.6rem}
.faq-hub-cat h2 svg{flex-shrink:0;color:var(--cc,var(--orange));width:1.05em;height:1.05em}
/* ── BACK TO TOP (sitewide, injected by JS) ───────────────── */
.back-to-top{
position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;
display:flex;align-items:center;justify-content:center;
width:46px;height:46px;border-radius:50%;
background:rgba(10,15,26,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(224,106,22,.35);color:var(--orange);
box-shadow:0 8px 24px rgba(0,0,0,.35);
opacity:0;visibility:hidden;transform:translateY(12px);
transition:opacity .25s ease,transform .25s ease,visibility .25s;
cursor:pointer;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:rgba(224,106,22,.14);border-color:rgba(224,106,22,.6);box-shadow:0 0 18px rgba(224,106,22,.25)}
@media(max-width:1150px){.back-to-top{right:.85rem;bottom:calc(74px + .85rem)}}
.faq-hub-cat{margin-bottom:2.6rem;scroll-margin-top:6rem}
.faq-hub-cat h2{margin-bottom:.3rem}
/* ── FIELD REPORTS / TESTIMONIALS ─────────────────────────── */
.field-report{
--fr-accent:var(--orange);
position:relative;background:linear-gradient(150deg,var(--glass-hi),var(--glass));
border:1px solid rgba(255,255,255,.09);border-top:3px solid var(--fr-accent);border-radius:var(--r);padding:1.3rem;
display:flex;flex-direction:column;gap:.6rem;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.field-report:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.field-report .stars{color:var(--fr-accent,var(--orange));font-size:.95rem;letter-spacing:.15em;text-shadow:0 0 5px color-mix(in srgb,var(--fr-accent,var(--orange)) 30%,transparent),0 0 2px color-mix(in srgb,var(--fr-accent,var(--orange)) 22%,transparent);animation:frBreathe 3.6s ease-in-out infinite}
.field-report p{font-size:.94rem;color:var(--body);margin:0;line-height:1.6}
.field-report .fr-name{font-family:var(--font-display);font-weight:800;color:#fff;font-size:.98rem}
.field-report .fr-city{display:block;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.field-report .fr-google{display:inline-flex;align-items:center;gap:.32rem;color:var(--muted);font-weight:700;font-size:.8rem;text-decoration:none;white-space:nowrap;transition:color .15s ease}
.field-report .fr-google:hover{color:#fff}
.field-report.thread{border-color:rgba(224,106,22,.18)}
.field-report .fr-response{
margin-top:.5rem;border-radius:10px;
background:rgba(224,106,22,.05);border:1px solid rgba(224,106,22,.14);
font-size:.88rem;color:#dde6f4;
}
.field-report .fr-response summary{
cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
padding:.6rem .9rem;color:var(--orange);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;font-family:var(--font-body);
}
.field-report .fr-response summary::-webkit-details-marker{display:none}
.field-report .fr-response summary::after{
content:"";flex-shrink:0;width:1.2rem;height:1.2rem;border-radius:50%;
background:rgba(224,106,22,.10);border:1px solid rgba(224,106,22,.25);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23e06a16' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
background-size:58%;background-position:center;background-repeat:no-repeat;transition:transform .22s ease;
}
.field-report .fr-response[open] summary::after{transform:rotate(180deg)}
.field-report .fr-response p{margin:0;padding:0 .9rem .75rem}
/* Review wall: cycling accent eye-candy + read-more clamp */
.grid > .field-report:nth-child(5n+1){--fr-accent:var(--orange)}
.grid > .field-report:nth-child(5n+2){--fr-accent:var(--cyan)}
.grid > .field-report:nth-child(5n+3){--fr-accent:var(--gold)}
.grid > .field-report:nth-child(5n+4){--fr-accent:#2ecc7a}
.grid > .field-report:nth-child(5n+5){--fr-accent:var(--purple)}
.field-report > p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.field-report > p.fr-expanded{-webkit-line-clamp:unset;overflow:visible;display:block}
.fr-more{
align-self:flex-start;background:none;border:0;cursor:pointer;padding:.1rem 0;margin-top:-.15rem;
color:var(--fr-accent,var(--orange));font-family:var(--font-body);font-weight:800;font-size:.82rem;letter-spacing:.03em;
}
.fr-more:hover{text-decoration:underline}
/* ── REGION CHIPS (Service Areas) ────────────────────────── */
.region-chip-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.region-chip{
display:inline-flex;align-items:center;gap:.55rem;
border:1px solid rgba(101,217,255,.28);background:rgba(101,217,255,.05);
border-radius:999px;padding:.38rem 1rem;
color:#a8ecff;font-weight:800;font-size:.76rem;
text-transform:uppercase;letter-spacing:.1em;
font-family:var(--font-body);transition:.18s ease;
}
.region-chip:hover{
background:rgba(101,217,255,.12);border-color:rgba(101,217,255,.55);
color:#fff;transform:translateY(-1px);
}
.region-chip.primary{
border-color:rgba(101,217,255,.65);
background:rgba(101,217,255,.08);
color:#65d9ff;
box-shadow:0 0 12px rgba(101,217,255,.15),inset 0 0 8px rgba(101,217,255,.06);
}
.region-chip.primary:hover{
background:rgba(101,217,255,.16);
border-color:rgba(101,217,255,.9);
color:#fff;
}
.region-chip.primary .rchip-dot{
width:.5rem;height:.5rem;
}
.rchip-dot{
width:.45rem;height:.45rem;border-radius:50%;flex-shrink:0;
animation:heartbeat 2.4s ease-in-out infinite;
}
.rchip-dot.green{
background:var(--gold);
box-shadow:0 0 8px rgba(245,179,60,.7);
animation:heartbeat 2.4s ease-in-out infinite;
}
.rchip-dot:not(.green){
background:var(--orange);
box-shadow:0 0 8px rgba(224,106,22,.6);
}
.region-chip:nth-child(2) .rchip-dot{background:var(--cyan);box-shadow:0 0 8px rgba(101,217,255,.7)}
/* ── FIELD NOTE PLACEHOLDER (city pages) ─────────────────── */
.field-note{
border:1px dashed rgba(101,217,255,.35);background:rgba(101,217,255,.04);
border-radius:var(--r);padding:1rem 1.2rem;color:#bfe6f7;font-size:.92rem;
font-style:italic;
}
.field-note::before{
content:"⬡ FIELD NOTE";display:block;font-style:normal;font-size:.65rem;
letter-spacing:.17em;color:#8ad8f0;font-weight:800;margin-bottom:.4rem;
font-family:var(--font-body);
}
/* ── ICON SELECT (Get Help "what can we help with") ──────── */
.iconselect{position:relative}
.sr-select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}
.iconselect-btn{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
border:1px solid rgba(255,255,255,.14);background:#0c1422;color:#fff;
border-radius:12px;padding:.62rem .85rem;font:inherit;font-size:.92rem;cursor:pointer;transition:.15s ease;
text-align:left;
}
.iconselect-btn:hover{border-color:rgba(224,106,22,.4)}
.iconselect.open .iconselect-btn,.iconselect-btn:focus-visible{
outline:none;border-color:rgba(224,106,22,.55);box-shadow:0 0 0 3px rgba(224,106,22,.10);
}
.iconselect-current{display:flex;align-items:center;gap:.7rem;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.iconselect-current svg{flex-shrink:0;color:var(--orange)}
.iconselect-btn .chev{transition:.2s ease;color:var(--muted);flex-shrink:0}
.iconselect.open .chev{transform:rotate(180deg)}
.iconselect-panel{
position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
background:rgba(8,12,22,.98);border:1px solid rgba(255,255,255,.12);
border-radius:14px;padding:.4rem;box-shadow:var(--shadow);
display:none;max-height:min(360px,60vh);overflow:auto;
}
.iconselect.open .iconselect-panel{display:block}
.iconselect-opt{
display:flex;align-items:flex-start;gap:.7rem;width:100%;text-align:left;
border:none;background:transparent;color:#d8e4f4;padding:.7rem .8rem;
border-radius:10px;cursor:pointer;font:inherit;transition:.12s ease;
}
.iconselect-opt svg{flex-shrink:0;margin-top:.1rem;transition:.15s ease}
/* Icon colors matched to site section system */
.iconselect-opt[data-value="roof-condition"] svg{color:var(--orange)}
.iconselect-opt[data-value="storm-damage"] svg{color:var(--red)}
.iconselect-opt[data-value="roof-leak"] svg{color:#ff7a7a}
.iconselect-opt[data-value="repair-replacement"] svg{color:var(--cyan)}
.iconselect-opt[data-value="property-protection"] svg{color:#25a06a}
.iconselect-opt[data-value="commercial"] svg{color:#a78bfa}
.iconselect-opt:hover svg{filter:drop-shadow(0 0 5px currentColor)}
.iconselect-opt:hover{background:rgba(224,106,22,.08);color:#fff}
.iconselect-opt.active{background:rgba(224,106,22,.13);color:#fff;box-shadow:0 0 0 1px rgba(224,106,22,.25) inset}
.iconselect-opt .opt-label{display:flex;flex-direction:column;font-weight:700}
.iconselect-opt .opt-sub{display:block;color:var(--muted);font-size:.79rem;font-weight:500;margin-top:.12rem}
/* ── CONTACT METHOD ICONS ─────────────────────────────────── */
.contact-methods label{gap:.45rem}
.contact-methods svg{flex-shrink:0}
/* ── CITY HERO META ───────────────────────────────────────── */
.city-meta-row{display:flex;flex-wrap:wrap;gap:.6rem;margin:.8rem 0}
/* ── NAV LINK — updated for SVG chevron ─────────────────────────────────── */
.nav-link{
display:inline-flex;align-items:center;gap:.3rem;
padding:.45rem .55rem;
font-weight:600;color:#c8d8e8;font-size:.88rem;
font-family:var(--font-body);white-space:nowrap;
transition:color .15s ease;position:relative;
border-radius:6px;
}
.nav-link:hover{color:#fff}
.nav-link[aria-current="page"]{color:#fff}
.nav-chev{
opacity:.6;transition:transform .2s ease,opacity .15s ease;
flex-shrink:0;margin-top:2px;
stroke:currentColor;fill:none;stroke-width:2.5;
width:11px;height:11px;
}
.nav-item:hover .nav-chev{transform:rotate(180deg);opacity:.9}
.nav-item:hover .nav-link{color:#fff}
/* ── FAQ ACCORDION ────────────────────────────────────────────────────────── */
/* FAQ accordion: single source of truth consolidated into the block above (2026-06) */
/* ── DRAWER NAV (updated) ─────────────────────────────────────────────────── */
.drawer-nav a svg{color:var(--orange);opacity:.9;flex-shrink:0;margin-right:.5rem}
.drawer-nav a[href="/learning-center/"] svg{color:var(--cyan)}
.drawer-nav a[href="/trust/"] svg{color:var(--gold)}
.drawer-nav a[href="/about/"] svg{color:var(--orange)}
/* ── SA MEGA CORRIDOR ICON COLORS ───────────────────────────────────────── */
[data-corridor="ct"] b svg{color:var(--orange)}
[data-corridor="dfw"] b svg{color:var(--cyan)}
[data-corridor="hou"] b svg{color:var(--gold)}
[data-corridor="all"] b svg{color:var(--muted)}
[data-corridor="ct"]:hover b{color:var(--orange)}
[data-corridor="dfw"]:hover b{color:var(--cyan)}
[data-corridor="hou"]:hover b{color:var(--gold)}
/* ── MOBILE OVERFLOW FIXES ───────────────────────────────────────────────── */
@media(max-width:760px){
.f-band2{grid-template-columns:1fr 1fr}
.f-band{padding-left:.9rem;padding-right:.9rem}
.wide{padding-left:.9rem;padding-right:.9rem}
.section-head{gap:.4rem}
.hero-badges{flex-wrap:wrap;gap:.35rem}
.trust-badge{font-size:.68rem;padding:.3rem .55rem}
.mega,.mega-services,.mega-about{
left:0;right:0;transform:none;
width:calc(100vw - 1rem);max-width:calc(100vw - 1rem);
}
}
@media(max-width:480px){
.f-band2{grid-template-columns:1fr}
.footer-chips{gap:.3rem}
.city-chip{font-size:.68rem;padding:.22rem .5rem}
.grid.two>*{flex:0 1 100%}
}
/* ── FOOTER MOBILE FIXES ──────────────────────────────────────────────────── */
@media(max-width:760px){
.footer-legal{gap:.3rem .6rem;font-size:.78rem}
.footer-legal a{font-size:.75rem;white-space:normal}
.footer-legal a:not(:last-child)::after{display:none}
.footer-bottom-top{gap:.5rem}
.footer-bottom-top > div{font-size:.78rem;line-height:1.4}
.f-comms-social{gap:.5rem}
}
@media(max-width:480px){
.footer-legal{gap:.25rem .4rem}
.footer-legal a{font-size:.7rem}
}
/* Mobile eyebrow + badge */
@media(max-width:480px){
.eyebrow{font-size:.62rem;letter-spacing:.1em;flex-wrap:wrap;row-gap:.1rem}
.card .eyebrow{font-size:.58rem;letter-spacing:.08em}
.deploy-badge{font-size:.58rem;letter-spacing:.06em;padding:.15rem .45rem;white-space:nowrap}
}
/* Community video mobile enhancements */
@media(max-width:760px){
.community-video .video-embed{max-width:260px}
.grid.three .community-video,.grid.two .community-video{width:100%}
}
@media(max-width:480px){
.community-video .video-embed{max-width:240px}
}
/* Mobile CTA fixes */
.mobile-cta{
display:none;position:fixed;bottom:0;left:0;right:0;width:100%;box-sizing:border-box;z-index:99;
background:rgba(5,8,16,.94);backdrop-filter:blur(18px);
border-top:1px solid rgba(255,255,255,.12);padding:.65rem;gap:.6rem;
}
.mobile-cta a{flex:1;min-width:0}
.mobile-cta .btn{padding:.7rem .6rem;font-size:.88rem;gap:.35rem;white-space:nowrap;min-width:0;flex:1}
@media(max-width:380px){
.mobile-cta{padding:.5rem;gap:.4rem}
.mobile-cta .btn{font-size:.8rem;padding:.65rem .35rem;gap:.25rem}
}
/* ── CORRIDOR CARDS ─────────────────────────────────────────────────────── */
.card.cyan{border-color:rgba(101,217,255,.25);box-shadow:0 0 0 1px rgba(101,217,255,.10) inset}
.card.cyan .icon{color:var(--cyan)}
.card.cyan::before{background:linear-gradient(135deg,rgba(101,217,255,.18) 0%,transparent 60%)}
.card.cyan::after{background:linear-gradient(315deg,rgba(101,217,255,.08) 0%,transparent 60%)}
.card.gold{border-color:rgba(245,179,60,.28);--accent-bar:rgba(245,179,60,.55)}
.card.gold .icon{color:var(--gold);background:rgba(245,179,60,.16);border-color:rgba(245,179,60,.3)}
.deploy-badge.cyan{background:rgba(101,217,255,.08);border-color:rgba(101,217,255,.28);color:var(--cyan)}
.deploy-badge.gold{background:rgba(245,179,60,.08);border-color:rgba(245,179,60,.28);color:var(--gold)}
/* ── BBB TRUST BADGE ANIMATION ───────────────────────────────────────────── */
.trust-badge--bbb{animation:bbb-glow 3.5s ease-in-out infinite}
.trust-badge--bbb svg{animation:star-pulse 3s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(245,179,60,.7))}
/* trust-badge--cta defined above */
@keyframes bbb-glow{
0%,100%{box-shadow:0 0 0 0 rgba(245,179,60,0),inset 0 1px 0 rgba(255,255,255,.06)}
50%{box-shadow:0 0 12px 2px rgba(245,179,60,.18),inset 0 1px 0 rgba(255,255,255,.06)}
}
@keyframes star-pulse{
0%,100%{filter:drop-shadow(0 0 4px rgba(245,179,60,.7))}
50%{filter:drop-shadow(0 0 8px rgba(245,179,60,1))}
}
@media(max-width:760px){
.city-grid,.city-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
.city-grid,.city-list{grid-template-columns:1fr}
}
/* ── FAQ show-all button ─────────────────────────────── */
.faq-show-all{display:block;margin:1rem auto 0;font-size:.85rem}
/* ── Form split — 1-col on mobile ─────────────────────── */
@media(max-width:600px){
.split{grid-template-columns:1fr}
}
/* Universal summary pointer — ensures all FAQ items are clickable */
details summary{cursor:pointer!important;user-select:none}
/* ── Sitewide framework polish ───────────────────────────────────────────── */
/* FAQ chevron handled by .faq details[open] summary::after above */
/* check-list: ensure li displays correctly with icon */
.check-list li{
align-items:flex-start;
}
.check-list li::before{
flex-shrink:0;
align-self:center;
}
/* Ensure all .icon SVGs inherit card color token when set */
.card .icon svg{stroke:currentColor}
.card.red .icon svg,.card.orange .icon svg,.card.green .icon svg,
.card.cyan .icon svg,.card.gold .icon svg{stroke:currentColor}
/* trust-bar: prevent layout shift from rotating text */
.trust-bar{min-height:2.2rem}
.lead[data-rotate]{min-height:5rem}
/* Uniform section spacing inside .wrap.content */
.wrap.content > .section-head + *{margin-top:1.2rem}
/* footer-legal links: ensure they don't wrap oddly */
.footer-legal{flex-wrap:wrap;gap:.5rem .8rem}
/* Commercial and other loose FAQ sections */
.section > .wrap > .faq,.section.compact > .wrap > .faq,
.section > .wrap.content > .faq,.section.compact > .wrap.content > .faq{
margin-top:1.2rem
}
/* Card h3: always use body font at 700 — never display condensed */
.card > h3,.card h3{font-family:var(--font-body)!important;font-weight:700!important;font-size:1.1rem;line-height:1.25;letter-spacing:.01em}
/* ── Unified trust pills (BBB / Google / Response) ───────────────────────── */
.gh-cta-block{margin-top:2rem}
.trust-pills{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:center;margin:1.1rem 0 1.2rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.trust-pill{
display:inline-flex;align-items:center;gap:.45rem;
padding:.42rem .85rem;border-radius:999px;
font-size:.8rem;font-weight:700;letter-spacing:.02em;
font-family:var(--font-body);
background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.12);
color:#c8d8e8;
white-space:nowrap;
}
.trust-pill svg{width:15px;height:15px;flex-shrink:0;stroke-width:1.75}
.trust-pill--bbb{border-color:rgba(245,179,60,.3)}
.trust-pill--bbb svg{color:var(--gold)}
.trust-pill--google{border-color:rgba(101,217,255,.3)}
.trust-pill--google svg{color:var(--cyan)}
.trust-pill--response{border-color:rgba(224,106,22,.3);color:var(--orange)}
.trust-pill--response svg{color:var(--orange)}
.trust-pill--note{color:#8fa3b8;border-color:rgba(255,255,255,.1)}
a.trust-pill{text-decoration:none;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
a.trust-pill:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.35)}
a.trust-pill--bbb:hover{border-color:rgba(245,179,60,.6)}
a.trust-pill--google:hover{border-color:rgba(101,217,255,.6)}
/* ── Table cells: always body font, never condensed display ──────────────── */
.trs-table td,.trs-table th,.table-wrap td,.table-wrap th{
font-family:var(--font-body)!important;
}
.trs-table td:first-child,.table-wrap td:first-child{
font-family:var(--font-body)!important;
font-weight:600;color:#c0d0e0;
}
/* ── Process steps (numbered step list — appraisal/claim walkthroughs) ── */
.process-steps{
display:flex;flex-direction:column;gap:1rem;margin:1.2rem 0 0;
}
.process-steps .step{
display:flex;gap:1rem;align-items:flex-start;
background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.09);
border-left:3px solid var(--orange);
border-radius:14px;padding:1.1rem 1.25rem;
}
.process-steps .step-num{
flex-shrink:0;
width:38px;height:38px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:800;font-size:1.25rem;
color:var(--orange);
background:rgba(224,106,22,.12);
border:1px solid rgba(224,106,22,.3);
}
.process-steps .step-body{flex:1;min-width:0}
.process-steps .step-body strong{
display:block;color:#fff;font-weight:700;font-size:1.02rem;
margin-bottom:.35rem;letter-spacing:.005em;
}
.process-steps .step-body p{
color:var(--body);font-size:.96rem;line-height:1.6;margin:0;
}
@media(max-width:600px){
.process-steps .step{padding:.95rem 1rem;gap:.8rem}
.process-steps .step-num{width:32px;height:32px;font-size:1.1rem}
}
.hero-date{
margin-top:.85rem;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
color:rgba(205,217,237,.55);font-weight:600;
}
/* ── Card spec rows — Label: value pattern inside cards ── */
.card p:has(> strong:first-child){
display:block;margin:0;padding:.5rem 0;
border-top:1px solid rgba(255,255,255,.06);
font-size:.94rem;line-height:1.5;color:var(--body);
}
.card p:has(> strong:first-child):first-of-type{border-top:none}
.card p > strong:first-child{
display:inline-block;min-width:0;
color:rgba(255,255,255,.92);font-weight:700;
letter-spacing:.01em;margin-right:.35rem;
}
/* fallback for browsers without :has() — keeps spacing reasonable */
@supports not (selector(:has(*))){
.card p{margin:.45rem 0}
}
.base-label{
font-family:var(--font-display);font-weight:800;letter-spacing:.03em;
text-transform:uppercase;color:#fff;
}
/* ── Spacing + color utilities (replace scattered inline styles) ── */
.mt-sm{margin-top:1rem}
.mt-md{margin-top:1.25rem}
.mt-lg{margin-top:1.5rem}
.mb-lg{margin-bottom:1.5rem}
.tx-orange{color:var(--orange)}
.tx-red{color:var(--red)}
.tx-fine{font-size:.78rem;color:var(--dim);margin-top:.5rem}
/* ── CHECK-LIST — consolidated authoritative component (2026-06-16) ──
Fixes prior bug where `background:gradient` was clobbered by a later
`background-image`, leaving a transparent, near-invisible icon. One
clean grid handles both plain
text and term
+ desc. Danger/field variants (extra
class = higher specificity) keep their own ::before. */
.check-list li{
display:grid;grid-template-columns:auto 1fr;
column-gap:1rem;row-gap:.12rem;align-items:center;
}
.check-list li::before{
content:"";grid-column:1;grid-row:1 / span 2;align-self:center;
width:1.6rem;height:1.6rem;border-radius:50%;box-shadow:0 0 9px var(--orange-glow);
background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") center/56% no-repeat;
}
.check-list li strong{grid-column:2;grid-row:1;align-self:end}
.check-list li .cl-body{grid-column:2;grid-row:2;align-self:start}
.check-list li:not(:has(strong)){grid-template-rows:auto}
.check-list li:not(:has(strong))::before{grid-row:1}
/* ── Reviews component v15: unified head/rate row, G logo, breathing glow, rating badge ── */
.field-report .fr-head{display:flex;flex-direction:column;gap:.1rem}
.field-report .fr-rate{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.g-logo{width:15px;height:15px;flex-shrink:0;display:inline-block;vertical-align:middle}
@keyframes frBreathe{
0%,100%{text-shadow:0 0 5px color-mix(in srgb,var(--fr-accent,var(--orange)) 30%,transparent),0 0 2px color-mix(in srgb,var(--fr-accent,var(--orange)) 22%,transparent)}
50%{text-shadow:0 0 16px color-mix(in srgb,var(--fr-accent,var(--orange)) 72%,transparent),0 0 6px color-mix(in srgb,var(--fr-accent,var(--orange)) 48%,transparent)}
}
@media (prefers-reduced-motion:reduce){.field-report .stars,.gr-badge .stars,.stat-stars{animation:none !important}}
/* Rating badge — replaces every review-count claim (no number, links to GBP) */
.gr-badge{--fr-accent:var(--gold);display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.04);font-family:var(--font-display);text-decoration:none;transition:border-color .15s ease,background .15s ease}
.gr-badge:hover{border-color:rgba(245,179,60,.45);background:rgba(245,179,60,.06)}
.gr-badge .g-logo{width:22px;height:22px}
.gr-badge .stars{color:var(--gold);font-size:1.05rem;letter-spacing:.04em;text-shadow:0 0 5px color-mix(in srgb,var(--gold) 30%,transparent);animation:frBreathe 3.6s ease-in-out infinite}
.gr-badge .gr-sep{width:1px;height:15px;background:rgba(255,255,255,.18)}
.gr-badge .gr-lbl{color:var(--muted);font-weight:700;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}
/* Home stat tile: stars instead of a count number */
.stat-stars{--fr-accent:var(--gold);color:var(--gold);letter-spacing:.06em;text-shadow:0 0 6px color-mix(in srgb,var(--gold) 35%,transparent);animation:frBreathe 3.6s ease-in-out infinite}
/* ===== v5 banded footer (.nf) — added trs-v15-20260618 ===== */
.nf{background:#070b14;border-top:1px solid rgba(255,255,255,.07);color:#e8edf6;font-family:'Barlow',system-ui,sans-serif}
.nf svg path,.nf svg circle,.nf svg rect,.nf svg line{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nf-b1{display:flex;align-items:center;gap:.7rem;padding:1.05rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.07)}
.nf-logo{border-radius:50%;flex:0 0 auto}
.nf-name{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:800;font-size:1.12rem;color:#fff;letter-spacing:.02em;line-height:1}
.nf-slogan{font-size:.8rem;color:#8898b4;margin-top:.12rem}
.nf-b2{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem 1rem;padding:1.25rem 1.5rem;max-width:1240px;margin:0 auto;width:100%;box-sizing:border-box}
.nf-col-h{display:flex;align-items:center;gap:.45rem;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:.84rem;font-weight:800;margin:0 0 .55rem;color:#fff}
.nf-ch{width:16px;height:16px;color:var(--ac);flex:0 0 auto}
.nf-colh{display:inline-flex;align-items:center;gap:.45rem;color:inherit;text-decoration:none;transition:color .15s ease}
.nf-colh:hover .nf-ch{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--ac) 60%,transparent))}
.nf-colh--active{color:var(--ac);text-decoration:underline;text-decoration-color:var(--ac);text-underline-offset:3px}
.nf-ic,.nf-lic,.nf-ch{transition:filter .15s ease}
.nf-sl:hover .nf-ic,.nf-legal:hover .nf-lic{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ac) 55%,transparent))}
@media(prefers-reduced-motion:reduce){.nf-ic,.nf-lic,.nf-ch{transition:none}}
.nf-sl{display:flex;align-items:center;gap:.5rem;color:#aab6cc;text-decoration:none;font-size:.83rem;padding:.3rem 0;min-height:24px;transition:color .15s ease}
.nf-ic{width:14px;height:14px;color:var(--ac);flex:0 0 auto}
.nf-sl:hover{color:#fff}
.nf-all{display:inline-flex;align-items:center;gap:.3rem;color:#65d9ff;font-size:.8rem;font-weight:600;text-decoration:none;padding:.35rem 0;min-height:24px}
.nf-arr{width:14px;height:14px}
.nf-b3{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.5rem;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap;max-width:1240px;margin:0 auto;width:100%;box-sizing:border-box}
.nf-legalrow{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center}
.nf-legal{display:inline-flex;align-items:center;gap:.38rem;color:#aab6cc;font-size:.78rem;text-decoration:none;min-height:24px;transition:color .15s ease}
.nf-lic{width:14px;height:14px;color:var(--ac);flex:0 0 auto}
.nf-legal:hover{color:#fff}
.nf-socrow{display:flex;gap:.5rem}
.nf-soc{width:36px;height:36px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--sc);border:1px solid color-mix(in srgb,var(--sc) 40%,transparent);background:color-mix(in srgb,var(--sc) 12%,transparent);position:relative;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
.nf-soc:hover,.nf-soc:focus-visible{color:#fff;background:var(--sc);border-color:var(--sc);box-shadow:0 0 12px color-mix(in srgb,var(--sc) 45%,transparent)}
.nf-sic{width:16px;height:16px}
.nf-tip{position:absolute;bottom:122%;left:50%;transform:translate(-50%,4px);background:#0e1628;color:#e8edf6;font-size:.66rem;padding:.18rem .45rem;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;border:1px solid rgba(255,255,255,.12)}
.nf-soc:hover .nf-tip,.nf-soc:focus-visible .nf-tip{opacity:1;transform:translate(-50%,0)}
.nf-b4{padding:.85rem 1.5rem;border-top:1px solid rgba(255,255,255,.05);font-size:.78rem;color:#8898b4;text-align:center;line-height:1.5}
.nf-nap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.25rem .55rem}
.nf-nap-i{display:inline-flex;align-items:center;gap:.32rem}
.nf-nap-i::before{content:"\00b7";color:#586475;margin-right:.5rem}
.nf-ni{width:13px;height:13px;color:var(--ac);flex:0 0 auto}
.nf-contact{color:#aab6cc;font-weight:600;text-decoration:none;transition:color .15s ease}
.nf-contact:hover{color:#fff}
.nf-serving{margin-top:.45rem;color:#8898b4;font-size:.76rem}
.nf-city{color:#8898b4;text-decoration:none;transition:color .15s ease}
.nf-city:hover{color:#fff;text-decoration:underline}
@media(prefers-reduced-motion:reduce){.nf-contact,.nf-city{transition:none}}
@media(max-width:900px){.nf-b2{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.nf-b1{flex-direction:column;align-items:center;text-align:center;gap:.55rem;padding:1.4rem 1rem 1.2rem}.nf-b1>div{text-align:center}.nf-name,.nf-slogan{text-align:center}.nf-b2{grid-template-columns:1fr;gap:1.5rem;padding:1.4rem 1rem;text-align:center}.nf-col{align-items:center}.nf-col-h{justify-content:center;margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.06)}.nf-colh{justify-content:center}.nf-sl,.nf-all{justify-content:center}.nf-b3{flex-direction:column;align-items:center;gap:1rem;text-align:center}.nf-legalrow{justify-content:center}.nf-socrow{justify-content:center}.nf-nap{flex-direction:column;gap:.4rem}.nf-nap-i::before{content:none}}
@media(prefers-reduced-motion:reduce){.nf-sl,.nf-legal,.nf-soc,.nf-tip,.nf-tel{transition:none}}
/* ===== nav mega-panels activated (disclosure pattern) — trs-v15-20260618 ===== */
.nav-item{display:inline-flex;align-items:center}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:#cdd9ed;cursor:pointer;min-width:22px;min-height:38px;padding:0 .1rem;margin-left:-.28rem;border-radius:6px;line-height:0}
.nav-toggle:hover{color:#fff}
.nav-chev{display:block;stroke:currentColor;fill:none;transition:transform .15s ease}
.nav-item.nav-open .nav-chev{transform:rotate(180deg)}
@media(hover:hover){.nav-item:hover .nav-chev{transform:rotate(180deg)}}
/* panel shell + positioning */
.mega-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:60;flex-direction:row;gap:.4rem;background:#0a1020;border:1px solid rgba(255,255,255,.10);border-radius:14px;box-shadow:0 22px 54px rgba(0,0,0,.5);padding:.75rem;min-width:max-content}
.nav-item.nav-open>.mega-panel{display:flex}
@media(hover:hover){.nav-item:hover>.mega-panel{display:flex}}
.nav-item:nth-child(4)>.mega-panel,.nav-item:nth-child(5)>.mega-panel{left:auto;right:0}
.mega-areas{min-width:300px}
.mp-col--areas{flex-direction:column}
/* clean icon-row re-skin (plain colored icon, subtext under title, top-aligned) */
.nav .mni{display:flex;align-items:flex-start;gap:.55rem;padding:.42rem .55rem;border-radius:9px;text-decoration:none;transition:background .15s ease}
.nav .mni:hover{background:color-mix(in srgb,var(--mc,var(--orange)) 11%,transparent)}
.nav .mni-icon{display:flex;background:none;color:var(--mc,var(--orange));flex:0 0 auto;margin-top:1px}
.nav .mni-icon svg{color:var(--mc,var(--orange));width:17px;height:17px;transition:filter .15s ease}
.nav .mni-sub .mni-icon svg{width:15px;height:15px}
.nav .mni:hover .mni-icon svg{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--mc,var(--orange)) 55%,transparent))}
.nav .mni-text{display:flex;flex-direction:column;gap:.08rem;min-width:0}
.nav .mni-label{color:#e8edf6;font-size:.85rem;font-weight:600;line-height:1.2}
.nav .mni-sub .mni-label{color:#c5d0e0;font-weight:500;font-size:.83rem}
.nav .mni:hover .mni-label,.nav .mni-sub:hover .mni-label{color:#fff}
.nav .mni-desc{color:#8898b4;font-size:.73rem;line-height:1.3}
.nav .mni-all{margin-top:.2rem;border-top:1px solid rgba(255,255,255,.07);padding-top:.5rem}
.nav .mni-all .mni-label{color:var(--cyan);font-weight:600}
@media(prefers-reduced-motion:reduce){.nav-chev,.nav .mni,.nav .mni-icon svg{transition:none}}
/* ===== nav heading icons (section-colored) — trs-v15-20260618 ===== */
.nav-link{display:inline-flex;align-items:center;gap:.34rem}
.nav{flex-wrap:nowrap}
.nav-link,.nav-link-t{white-space:nowrap}
.nav .mni-label{white-space:nowrap}
.nav .mp-section-label{white-space:nowrap}
.nav-ico{color:var(--nav-accent,var(--orange));flex:0 0 auto;display:inline-flex;align-items:center;transition:filter .15s ease}
.nav-ico svg{width:15px;height:15px}
.nav-ico svg{stroke:currentColor;fill:none}
.nav-item:hover .nav-ico{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--nav-accent,var(--orange)) 55%,transparent))}
.nav-link[aria-current="page"] .nav-link-t{color:var(--nav-accent,var(--orange))}
@media(prefers-reduced-motion:reduce){.nav-ico{transition:none}}
/* ===== NAV PANEL SYSTEM v2 — consolidated (single caret · translucent · aligned · all-platform) ===== */
.nav-link::after{content:none}
.nav-chev{display:block;width:13px;height:13px;stroke:currentColor;fill:none;opacity:.55;transition:transform .18s ease,opacity .15s ease}
.nav-item.nav-open .nav-chev,.nav-item:hover .nav-chev,.nav-toggle:focus-visible .nav-chev{opacity:.95;transform:rotate(180deg)}
.mega-panel{
position:absolute;top:calc(100% + 5px);left:0;right:auto;
display:flex;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
background:rgba(7,13,26,.90);
-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
border:1px solid rgba(255,255,255,.10);border-top:2px solid var(--panel-color,var(--orange));
border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.55);
padding:.65rem;z-index:100;overflow:hidden;
}
.nav-item.nav-open>.mega-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
@media(hover:hover){.nav-item:hover>.mega-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}}
.mega-services{--panel-color:var(--orange);width:min(580px,calc(100vw - 1.5rem))}
.mega-lc{--panel-color:#65d9ff;width:min(600px,calc(100vw - 1.5rem))}
.mega-areas{--panel-color:#f0564a;width:min(300px,calc(100vw - 1.5rem))}
.mega-trust{--panel-color:#2ecc7a;width:min(560px,calc(100vw - 1.5rem))}
.mega-about-new{--panel-color:var(--gold);width:min(320px,calc(100vw - 1.5rem));flex-direction:column}
.mega-areas .mni-icon{--mc-rgb:240,86,74}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mega-panel{background:rgba(7,13,26,.985)}}
@media(prefers-reduced-motion:reduce){.mega-panel{transition:opacity .01s linear}.nav-chev{transition:none}}