/* Tri Tech Restoration & Construction — site styles
   Brand: royal blue #1550c0 + emergency red #e21f26 (from the logo), navy depth. */
:root{
  --navy:#0c2340; --navy-2:#122f52; --steel:#1550c0; --steel-2:#2f6be0;
  --red:#e21f26; --red-dk:#bd1a20;
  --ground:#eef2f7; --panel:#ffffff; --panel-2:#f4f7fb;
  --ink:#0f1e2e; --muted:#586a7c; --line:#d8e1ec;
  --hazard:var(--red);
  --shadow:0 1px 2px rgba(12,35,64,.06),0 8px 24px rgba(12,35,64,.08);
  --shadow-lg:0 24px 60px rgba(12,35,64,.16);
  --maxw:1180px;
  --f-disp:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#081a2e; --navy-2:#0d2440; --steel:#3f7be6; --steel-2:#5f96f0;
    --red:#f0503f; --red-dk:#e21f26;
    --ground:#08131f; --panel:#0f2334; --panel-2:#12293b;
    --ink:#e7eef6; --muted:#9db1c4; --line:#213b52;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
    --shadow-lg:0 30px 70px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --navy:#081a2e; --navy-2:#0d2440; --steel:#3f7be6; --steel-2:#5f96f0;
  --red:#f0503f; --red-dk:#e21f26;
  --ground:#08131f; --panel:#0f2334; --panel-2:#12293b;
  --ink:#e7eef6; --muted:#9db1c4; --line:#213b52;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 30px 70px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:var(--f-disp);font-weight:700;line-height:1.03;
  letter-spacing:.01em;text-wrap:balance;margin:0}
p{margin:0}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.wrap.narrow{max-width:820px}
.eyebrow{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.16em;
  font-weight:600;font-size:.86rem;color:var(--steel)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-disp);
  font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:1.02rem;
  padding:.72em 1.25em;border-radius:6px;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}
.btn svg{width:1.15em;height:1.15em}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(226,31,38,.32)}
.btn-red:hover{background:var(--red-dk);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--red);border:0}
.btn-white:hover{background:#fff2f0;transform:translateY(-2px)}
.btn-block{width:100%;justify-content:center}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--steel-2);outline-offset:2px}

/* Header */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--panel) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;height:76px}
.brand{display:flex;align-items:center;margin-right:auto}
.logo-img{height:53px;width:auto;display:block}
:root[data-theme="dark"] .logo-img{background:#fff;border-radius:6px;padding:5px 8px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-img{background:#fff;border-radius:6px;padding:5px 8px}}
nav.main{display:flex;gap:26px;align-items:center}
nav.main a{font-family:var(--f-disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:.98rem;color:var(--ink);padding:6px 0;position:relative}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--red);transition:right .22s ease}
nav.main a:hover::after{right:0}
.hotline-mini{display:flex;flex-direction:column;align-items:flex-end;line-height:1;gap:2px}
.hotline-mini small{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600}
.hotline-mini a{font-family:var(--f-disp);font-weight:700;font-size:1.24rem;color:var(--red);font-variant-numeric:tabular-nums}
.navtoggle{display:none;flex-direction:column;gap:5px;width:44px;height:40px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);cursor:pointer;align-items:center;justify-content:center}
.navtoggle span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobilenav{display:none;flex-direction:column;gap:4px;padding:14px clamp(16px,4vw,40px) 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.mobilenav a{font-family:var(--f-disp);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:10px 0;border-bottom:1px solid var(--line)}
.mobilenav .btn{margin-top:10px;justify-content:center}
.mobilenav.open{display:flex}
/* Services dropdown (desktop) */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-toggle{display:inline-flex;align-items:center;gap:5px}
.nav-dd .chev{display:inline-flex;transition:transform .24s ease}
.nav-dd .chev svg{width:15px;height:15px;stroke-width:2.4}
.nav-dd::before{content:"";position:absolute;top:100%;left:-14px;right:-14px;height:18px} /* hover bridge */
.dd-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:296px;background:#0b1f39;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  box-shadow:var(--shadow-lg);overflow:hidden;padding:0;z-index:60;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.nav-dd:hover .dd-panel,.nav-dd:focus-within .dd-panel,.nav-dd.open .dd-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-dd:hover .chev,.nav-dd:focus-within .chev,.nav-dd.open .chev{transform:rotate(180deg)}
.dd-panel .dd-item{display:flex;align-items:center;gap:13px;padding:14px 18px;color:#c7d7e8;
  font-family:var(--f-disp);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.94rem;
  white-space:nowrap;border-top:1px solid rgba(255,255,255,.07);border-left:3px solid transparent;transition:background .18s ease,color .18s ease,border-color .18s ease}
.dd-panel .dd-item:first-child{border-top:0}
.dd-panel .dd-item::after{display:none} /* cancel the nav underline inside the panel */
.dd-panel .dd-item .dd-ic{display:inline-flex;color:#6f9ac2;transition:color .2s ease,transform .2s ease}
.dd-panel .dd-item .dd-ic svg{width:21px;height:21px}
.dd-panel .dd-item:hover,.dd-panel .dd-item:focus-visible{background:rgba(255,255,255,.07);color:#fff;border-left-color:var(--red)}
.dd-panel .dd-item:hover .dd-ic,.dd-panel .dd-item:focus-visible .dd-ic{color:var(--red);transform:translateX(2px) scale(1.08)}
/* Live dropdown icons on hover */
.dd-panel .dd-item:hover .dd-ic .drop,.dd-panel .dd-item:focus-visible .dd-ic .drop{animation:drip 1.1s ease infinite}
.dd-panel .dd-item:hover .dd-ic .flame,.dd-panel .dd-item:focus-visible .dd-ic .flame{animation:flick .5s ease-in-out infinite alternate;transform-origin:center bottom}
.dd-panel .dd-item:hover .dd-ic .shake,.dd-panel .dd-item:focus-visible .dd-ic .shake{animation:shake .35s linear infinite}
/* Two-column mega menu (Services has 11 items — keep it short) */
.dd-panel.dd-mega{left:0;transform:translateX(0) translateY(8px);min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:8px}
.nav-dd:hover .dd-panel.dd-mega,.nav-dd:focus-within .dd-panel.dd-mega,.nav-dd.open .dd-panel.dd-mega{transform:translateX(0) translateY(0)}
.dd-mega .dd-item{border-top:0;border-left:0;border-radius:8px;padding:12px 14px;font-size:.9rem}
.dd-mega .dd-item:hover,.dd-mega .dd-item:focus-visible{border-left-color:transparent;background:rgba(255,255,255,.08)}
@media(max-width:640px){.dd-panel.dd-mega{min-width:0}}
/* Services sub-list (mobile) */
.m-sub{display:flex;flex-direction:column;margin:2px 0 8px 6px;padding-left:12px;border-left:2px solid var(--line)}
.mobilenav .m-sub a{display:flex;align-items:center;gap:11px;padding:10px 0;font-size:.9rem;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}
.mobilenav .m-sub a:last-child{border-bottom:0}
.m-sub .dd-ic{display:inline-flex;color:var(--steel)}
.m-sub .dd-ic svg{width:18px;height:18px}
@media(max-width:980px){nav.main,.hotline-mini{display:none}.navtoggle{display:flex}}
@media(max-width:520px){.bar .btn-red{display:none}}

/* Hero — full-bleed building photo with a left-side fade */
.hero{position:relative;overflow:hidden;color:#eaf2fb;background:var(--navy);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:heroZoom 24s ease-in-out infinite alternate}
.hero-scrim{position:absolute;inset:0;
  background:
    radial-gradient(720px 480px at 66% 44%,rgba(255,255,255,.10),transparent 68%),
    linear-gradient(90deg,rgba(7,19,34,.96) 0%,rgba(7,19,34,.90) 26%,rgba(8,22,40,.62) 46%,rgba(9,25,45,.26) 66%,rgba(9,26,46,.04) 85%,rgba(9,26,46,0) 100%),
    linear-gradient(0deg,rgba(6,16,30,.62) 0%,rgba(6,16,30,0) 46%),
    radial-gradient(1100px 460px at 82% -8%,rgba(47,107,224,.24),transparent 62%)}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hero-bg img{animation:none}}
.hero .wrap{position:relative;z-index:2;display:flex;align-items:center;min-height:clamp(500px,66vh,680px);padding-block:clamp(56px,8vw,96px)}
.hero-copy{max-width:640px}
.hero-badge{position:absolute;right:16px;bottom:14px;z-index:2;font-family:var(--f-disp);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#cfe0f1;background:rgba(6,18,30,.5);border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:6px 13px;backdrop-filter:blur(3px)}
.kicker{display:inline-flex;align-items:center;gap:9px;color:#bcd6ea;font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:.9rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);padding:6px 14px;border-radius:100px}
.kicker b{color:#fff}
.hero h1{font-size:clamp(2.7rem,6.2vw,4.6rem);color:#fff;margin:20px 0 0}
.hero h1 em{font-style:normal;color:var(--hazard)}
.hero .sub{margin-top:18px;font-size:1.18rem;color:#c9dcee;max-width:36ch}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.trust-row{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.trust-row .t{display:flex;flex-direction:column;gap:2px}
.trust-row .t b{font-family:var(--f-disp);font-size:1.9rem;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.trust-row .t span{font-size:.82rem;color:#a9c4dc;text-transform:uppercase;letter-spacing:.08em}
.photo{position:relative;border-radius:14px;min-height:390px;overflow:hidden;background:linear-gradient(135deg,#163f6b,#0c2340);border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow-lg);display:flex;align-items:flex-end}
.photo::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 22px,transparent 22px 44px)}
.ph-badge{position:absolute;top:14px;left:14px;font-family:var(--f-disp);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#9fb9cf;background:rgba(8,20,32,.6);border:1px dashed rgba(255,255,255,.28);border-radius:6px;padding:5px 10px}
.ph-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.5;color:#4d80ae}
.ph-icon svg{width:96px;height:96px}
.photo .cap{position:relative;z-index:2;padding:18px 20px;width:100%;background:linear-gradient(0deg,rgba(6,18,30,.92),rgba(6,18,30,.35) 55%,transparent);color:#dbe8f4;font-size:.92rem;margin:0}
.photo .cap b{font-family:var(--f-disp);color:#fff;letter-spacing:.02em}
/* Real photograph variant */
.photo.has-img{margin:0;background:var(--navy)}
.photo.has-img::before{display:none}
.photo.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:860px){
  .hero .wrap{min-height:clamp(440px,80vh,560px)}
  .hero-bg img{object-position:66% 40%}
  .hero-scrim{background:
    linear-gradient(90deg,rgba(7,20,36,.92) 0%,rgba(7,20,36,.78) 55%,rgba(8,22,40,.55) 100%),
    linear-gradient(0deg,rgba(6,16,30,.82) 0%,rgba(6,16,30,.1) 55%)}
  .photo{min-height:240px}
}

/* Emergency band */
.emg{background:var(--red);color:#fff}
.emg .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-block:16px}
.pulse{width:12px;height:12px;border-radius:50%;background:#fff;flex:none;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 14px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.emg .txt{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:1.14rem}
.emg .num{margin-left:auto;font-family:var(--f-disp);font-weight:700;font-size:1.7rem;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:10px;color:#fff}
.emg .num svg{width:1em;height:1em}
@media(max-width:620px){.emg .num{margin-left:0}}

/* Section frame */
section.block{padding-block:clamp(52px,7vw,84px)}
.head{max-width:64ch;margin-bottom:40px}
.head h2{font-size:clamp(2rem,4.6vw,3rem);margin-top:10px;color:var(--ink)}
.head p{color:var(--muted);margin-top:12px;font-size:1.1rem}

/* Services grid */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:940px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svc-grid{grid-template-columns:1fr}}
.svc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px 22px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .22s ease}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc:hover::before{transform:scaleY(1)}
.ic{width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--panel-2);color:var(--steel);margin-bottom:16px;transition:background .2s ease,color .2s ease}
.ic svg{width:28px;height:28px;overflow:visible}
.svc:hover .ic{background:var(--red);color:#fff}
.svc h3{font-size:1.34rem;color:var(--ink)}
.svc p{color:var(--muted);font-size:.98rem;margin-top:7px}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--steel);font-family:var(--f-disp);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.86rem}
.svc:hover .more{color:var(--red)}
.more svg{width:15px;height:15px;transition:transform .2s ease}
.svc:hover .more svg{transform:translateX(4px)}
/* live icon motion (Scott's living-detail rule) */
.svc:hover .ic .drop{animation:drip 1.1s ease infinite}
@keyframes drip{0%,100%{transform:translateY(0)}45%{transform:translateY(2px)}}
.svc:hover .ic .flame{animation:flick .5s ease-in-out infinite alternate;transform-origin:center bottom}
@keyframes flick{from{transform:scaleY(1)}to{transform:scaleY(1.12) translateY(-1px)}}
.svc:hover .ic .shake{animation:shake .35s linear infinite}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}
/* ── Live icons site-wide: every icon animates on hover (Scott's living-icon rule) ── */
svg:hover .drop{animation:drip 1.1s ease infinite}
svg:hover .flame{animation:flick .5s ease-in-out infinite alternate;transform-origin:center bottom}
svg:hover .shake{animation:shake .35s linear infinite}
.svc .ic,.feat .ic,.why-card .ic,.shc-ic,.other-link .oi,.svc-hero-ic,.pk-ic{transition:transform .2s ease,background .2s ease,color .2s ease}
.why-card:hover .ic,.shc-row:hover .shc-ic,.other-link:hover .oi,.svc-hero-ic:hover,.packout:hover .pk-ic{transform:translateY(-2px) scale(1.05)}
.why-card:hover .ic .shake,.shc-row:hover .shc-ic .shake,.other-link:hover .oi .shake,.ins-inline:hover .shake,.svc-hero-ic:hover .shake,.packout:hover .pk-ic .shake{animation:shake .35s linear infinite}
.why-card:hover .ic .drop,.shc-row:hover .shc-ic .drop,.other-link:hover .oi .drop,.ins-inline:hover .drop,.packout:hover .pk-ic .drop{animation:drip 1.1s ease infinite}
.why-card:hover .ic .flame,.shc-row:hover .shc-ic .flame,.other-link:hover .oi .flame,.ins-inline:hover .flame{animation:flick .5s ease-in-out infinite alternate;transform-origin:center bottom}

/* Why us */
.why{background:var(--navy);color:#eaf2fb}
.why .head h2{color:#fff}.why .eyebrow{color:#8fb8d8}.why .head p{color:#bcd2e4}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:820px){.why-grid{grid-template-columns:repeat(2,1fr)}}
.why-card{background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;padding:22px}
.why-card .ic{background:var(--wash,#eef3fb);color:var(--red)}
.why-card h3{color:var(--ink);font-size:1.24rem}
.why-card p{color:var(--muted);font-size:.95rem;margin-top:6px}
/* dark "why" section keeps the light-on-navy treatment */
.why .why-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.why .why-card .ic{background:rgba(255,255,255,.08);color:var(--hazard)}
.why .why-card h3{color:#fff}
.why .why-card p{color:#b7cde0}

/* Process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.steps{grid-template-columns:1fr}}
.step{padding:26px 24px;border-left:1px solid var(--line)}
.step:first-child{border-left:0}
@media(max-width:820px){.step{border-left:0;border-top:1px solid var(--line)}}
.step .n{font-family:var(--f-disp);font-weight:700;font-size:2.6rem;color:var(--red);line-height:1;font-variant-numeric:tabular-nums}
.step h3{font-size:1.3rem;margin-top:8px;color:var(--ink)}
.step p{color:var(--muted);font-size:.96rem;margin-top:6px}

/* Insurance */
.ins{background:var(--panel-2);border-block:1px solid var(--line)}
.ins .wrap{padding-block:44px}
.ins-h{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-top:8px;max-width:24ch;color:var(--ink)}
.carriers{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.carriers span{font-family:var(--f-disp);font-weight:600;letter-spacing:.03em;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 15px;font-size:1rem}

/* Service area */
.area .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:820px){.area .wrap{grid-template-columns:1fr}}
.area-h{font-size:clamp(2rem,4.4vw,2.8rem);margin-top:10px;color:var(--ink)}
.area-p{color:var(--muted);margin-top:12px;max-width:52ch}
.area ul{margin:18px 0 0;padding:0;list-style:none;columns:2}
.area li{padding:5px 0 5px 26px;position:relative;color:var(--ink)}
.area li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:12px;border-radius:50%;border:3px solid var(--steel)}
.area-map{min-height:300px;background:linear-gradient(135deg,#12466b,#0c2340)}

/* Contact grid + quote form */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.cta-band{background:linear-gradient(120deg,var(--red),var(--red-dk));color:#fff;border-radius:16px;padding:clamp(28px,4vw,40px);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;justify-content:center}
.cta-eye{color:#ffd9d4}
.cta-band h2{font-size:clamp(1.7rem,3.4vw,2.3rem);color:#fff;margin-top:8px}
.cta-band p{margin-top:10px;color:#ffe3df;font-size:1.08rem}
.cta-band .num{font-family:var(--f-disp);font-weight:700;font-size:clamp(2.1rem,5.5vw,3rem);margin-top:14px;font-variant-numeric:tabular-nums}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.quote{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,30px);box-shadow:var(--shadow)}
.quote h3{font-size:1.5rem;color:var(--ink)}
.quote-sub{color:var(--muted);font-size:.96rem;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.field{margin-top:14px;display:flex;flex-direction:column;gap:5px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:440px){.field-row{grid-template-columns:1fr}}
.quote label{font-family:var(--f-disp);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;color:var(--muted)}
.quote input,.quote select,.quote textarea{font-family:var(--f-body);font-size:1rem;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:11px 12px;width:100%}
.quote textarea{resize:vertical}
.quote .btn{margin-top:18px}
.quote-note{margin-top:12px;font-size:.9rem;color:var(--muted);text-align:center}
.quote-note a{color:var(--red);font-weight:600}

/* Service page */
.svc-hero{background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#eaf2fb}
.svc-hero .wrap{padding-block:clamp(28px,5vw,56px)}
.crumb{display:inline-block;color:#a9c4dc;font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;margin-bottom:18px}
.svc-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
@media(max-width:820px){.svc-hero-grid{grid-template-columns:1fr}}
.svc-hero-ic{width:60px;height:60px;border-radius:12px;background:rgba(255,255,255,.08);color:var(--hazard);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.svc-hero-ic svg{width:32px;height:32px}
.svc-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);color:#fff}
.svc-hero .sub{margin-top:14px;color:#c9dcee;font-size:1.12rem;max-width:44ch}
.svc-hero .photo{min-height:300px}
.svc-body{display:grid;grid-template-columns:1.5fr .9fr;gap:36px;align-items:start}
@media(max-width:900px){.svc-body{grid-template-columns:1fr}}
.svc-detail h2{color:var(--ink);margin-top:8px;font-size:clamp(1.6rem,3.4vw,2.2rem)}
.lead{color:var(--muted);font-size:1.12rem;margin-top:14px;max-width:60ch}
.mini-steps{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.mini-step{display:flex;gap:14px;align-items:flex-start}
.mini-step .mn{flex:none;width:34px;height:34px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--red);font-family:var(--f-disp);font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.mini-step b{font-family:var(--f-disp);font-size:1.16rem;color:var(--ink)}
.mini-step p{color:var(--muted);font-size:.96rem;margin-top:2px}
.ins-inline{display:flex;gap:14px;align-items:flex-start;margin-top:28px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.ins-inline svg{width:28px;height:28px;color:var(--steel);flex:none}
.ins-inline b{color:var(--ink)}
.svc-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:92px}
@media(max-width:900px){.svc-side{position:static}}
.side-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.side-card.standalone{max-width:560px}
.side-card .quote{background:transparent;border:0;box-shadow:none;padding:0}
.side-card.other h4{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;color:var(--muted);margin:0 0 8px}
.other-link{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-family:var(--f-disp);font-weight:600;color:var(--ink)}
.other-link:first-of-type{border-top:0}
.other-link .oi{width:30px;height:30px;border-radius:7px;background:var(--panel-2);color:var(--steel);display:flex;align-items:center;justify-content:center;flex:none}
.other-link .oi svg{width:18px;height:18px}
.other-link>svg:last-child{width:15px;height:15px;margin-left:auto;color:var(--muted);transition:transform .2s}
.other-link:hover{color:var(--red)}.other-link:hover>svg:last-child{transform:translateX(4px);color:var(--red)}

/* Service page — rich sections */
.svc-tag{margin-top:12px;font-family:var(--f-disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;color:#bcd6ea}
.svc-hero-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-lg)}
.shc-row{display:flex;gap:13px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.10)}
.shc-row:last-child{border-bottom:0}
.shc-row .shc-ic{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);color:#8fb7e8;display:flex;align-items:center;justify-content:center}
.shc-row .shc-ic svg{width:21px;height:21px}
.shc-row b{display:block;font-family:var(--f-disp);color:#fff;font-size:1.06rem;letter-spacing:.01em}
.shc-row span{color:#a9c4dc;font-size:.9rem}
.svc-hero-card .btn-block{margin-top:14px}
.block.alt{background:var(--panel-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lead.wide{max-width:74ch}
/* Highlights grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px 22px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#c2d3e6}
.feat .ic{width:52px;height:52px;border-radius:12px;background:var(--panel-2);color:var(--steel);display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:background .2s,color .2s}
.feat .ic svg{width:27px;height:27px}
.feat:hover .ic{background:var(--red);color:#fff}
.feat:hover .ic .drop{animation:drip 1.1s ease infinite}
.feat:hover .ic .flame{animation:flick .5s ease-in-out infinite alternate;transform-origin:center bottom}
.feat:hover .ic .shake{animation:shake .35s linear infinite}
.feat h3{font-family:var(--f-disp);font-size:1.28rem;color:var(--ink)}
.feat p{color:var(--muted);margin-top:8px;font-size:.98rem}
/* Scope / covered checklist */
.covered-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
@media(max-width:860px){.covered-wrap{grid-template-columns:1fr;gap:28px}}
.covered-head .btn{margin-top:20px}
.covered-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
@media(max-width:620px){.covered-list{grid-template-columns:1fr}}
.covered-list li{display:flex;gap:11px;align-items:flex-start;color:var(--ink);font-size:1rem;line-height:1.45}
.covered-list .ck{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(21,80,192,.10);color:var(--steel);display:flex;align-items:center;justify-content:center;margin-top:1px}
.covered-list .ck svg{width:15px;height:15px;stroke-width:2.6}
/* Process */
.proc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 30px}
@media(max-width:760px){.proc-grid{grid-template-columns:1fr}}
.proc{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);transition:border-color .18s,transform .18s}
.proc:hover{border-color:var(--steel);transform:translateX(3px)}
.proc .pn{flex:none;width:40px;height:40px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.proc:hover .pn{background:var(--steel)}
.proc .pn svg{width:40px;height:40px;overflow:visible}
.proc .pn text{font-family:var(--f-disp);font-weight:700;font-size:23px;fill:#fff;stroke:#fff;stroke-width:0;paint-order:stroke fill}
/* Draw the step number dynamically on hover */
.proc:hover .pn text{animation:numdraw .95s ease forwards}
@keyframes numdraw{
  0%{fill:transparent;stroke-width:1.1;stroke-dasharray:105;stroke-dashoffset:105}
  65%{fill:transparent;stroke-width:1.1}
  100%{fill:#fff;stroke-width:0;stroke-dasharray:105;stroke-dashoffset:0}
}
.proc h3{font-family:var(--f-disp);font-size:1.16rem;color:var(--ink)}
.proc p{color:var(--muted);margin-top:3px;font-size:.95rem}
/* Know-the-damage types */
.type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
@media(max-width:520px){.type-grid{grid-template-columns:1fr}}
.type{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--steel);border-radius:12px;padding:22px 20px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.type:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-left-color:var(--steel-2)}
.type-mark{width:34px;height:4px;border-radius:3px;background:var(--steel);margin-bottom:14px;transition:width .32s cubic-bezier(.2,.8,.2,1),background .2s ease}
.type:hover .type-mark{width:62px;background:var(--steel-2)}
.type h3{transition:color .2s ease}
.type:hover h3{color:var(--steel)}
.type h3{font-family:var(--f-disp);font-size:1.24rem;color:var(--ink)}
.type p{color:var(--muted);margin-top:8px;font-size:.95rem;line-height:1.5}
/* FAQ */
.faq{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-family:var(--f-disp);font-weight:600;font-size:1.12rem;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .fq-ic{flex:none;color:var(--steel);transition:transform .22s ease}
.faq-item .fq-ic svg{width:20px;height:20px;stroke-width:2.4}
.faq-item[open] .fq-ic{transform:rotate(180deg)}
.faq-a{padding:0 20px 20px}
.faq-a p{color:var(--muted);font-size:1rem;line-height:1.6;max-width:70ch}
/* Outline button (calmer alt to solid red) */
.btn-outline{background:transparent;border:2px solid var(--steel);color:var(--steel)}
.btn-outline:hover{background:var(--steel);color:#fff;transform:translateY(-2px)}
.btn-outline svg{transition:transform .2s ease}.btn-outline:hover svg{transform:translateX(3px)}
/* Pack-out & contents restoration callout */
.packout{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#eaf2fb;border-radius:16px;padding:clamp(26px,4vw,40px);box-shadow:var(--shadow-lg)}
@media(max-width:640px){.packout{grid-template-columns:1fr;gap:18px}}
.packout .pk-ic{flex:none;width:66px;height:66px;border-radius:14px;background:rgba(255,255,255,.08);color:#8fb7e8;display:flex;align-items:center;justify-content:center}
.packout .pk-ic svg{width:34px;height:34px}
.packout .eyebrow{color:#8fb7e8}
.packout h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);margin-top:6px}
.packout p{color:#c9dcee;margin-top:12px;font-size:1.06rem;line-height:1.6;max-width:70ch}

/* Notices */
.notice{border-radius:14px;padding:22px 24px;margin-top:18px}
.notice.ok{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center;padding:40px}
.notice.ok .ic{width:64px;height:64px;border-radius:14px;background:var(--panel-2);color:var(--steel);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.notice.ok .ic svg{width:34px;height:34px}
.notice.ok h2{color:var(--ink)}
.notice.ok p{color:var(--muted);margin-top:10px}
.notice.ok .btn{margin-top:18px}
.notice.ok .back{margin-top:18px}.notice.ok .back a{color:var(--steel);font-weight:600}
.notice.err{background:#fdeceb;border:1px solid #f5bcb8;color:#8a1a14}
:root[data-theme="dark"] .notice.err{background:#3a1512;border-color:#7a241d;color:#f6b3ac}
.notice.err ul{margin:8px 0 0;padding-left:20px}

/* Resources pages — shared hero */
.page-hero{background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#eaf2fb}
.page-hero .wrap{padding-block:clamp(40px,6vw,72px)}
.page-hero .eyebrow{color:#8fb7e8}
.page-hero h1{font-size:clamp(2.4rem,5.5vw,3.6rem);color:#fff;margin-top:10px}
.page-hero .sub{margin-top:14px;color:#c9dcee;font-size:1.14rem;max-width:64ch}

/* Blog listing */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.post-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#c2d3e6}
.pc-cover{height:170px;background:linear-gradient(135deg,#163f6b,#0c2340);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.pc-mark{color:#4d80ae;opacity:.55;transition:transform .2s ease,opacity .2s ease}.pc-mark svg{width:52px;height:52px}
.post-card:hover .pc-mark{opacity:.85;transform:scale(1.08)}
.post-card:hover .pc-mark .drop{animation:drip 1.1s ease infinite}
.post-card:hover .pc-mark .flame{animation:flick .5s ease-in-out infinite alternate;transform-origin:center bottom}
.post-card:hover .pc-mark .shake{animation:shake .35s linear infinite}
.pc-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.pc-meta{display:flex;gap:10px;align-items:center;font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;color:var(--muted)}
.pc-cat{color:var(--steel)}
.post-card h3{font-family:var(--f-disp);font-size:1.3rem;color:var(--ink);line-height:1.1}
.post-card p{color:var(--muted);font-size:.96rem;flex:1}
.post-card .more{display:inline-flex;align-items:center;gap:6px;color:var(--steel);font-family:var(--f-disp);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.84rem}
.post-card:hover .more{color:var(--red)}
.post-card .more svg{width:14px;height:14px;transition:transform .2s ease}
.post-card:hover .more svg{transform:translateX(4px)}
.empty-state{text-align:center;max-width:520px;margin:10px auto;padding:40px 20px}
.empty-state .ic{width:70px;height:70px;border-radius:16px;background:var(--panel-2);color:var(--steel);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.empty-state .ic svg{width:34px;height:34px}
.empty-state h2{color:var(--ink)}.empty-state p{color:var(--muted);margin:10px 0 18px}
.cat-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.cat-chips .chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-disp);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.86rem;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:8px 15px;transition:background .16s,color .16s,border-color .16s}
.cat-chips .chip span{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cat-chips .chip:hover{border-color:var(--steel);color:var(--steel)}
.cat-chips .chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.cat-chips .chip.on span{color:#9fb9cf}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:34px}
.pager a{font-family:var(--f-disp);font-weight:600;min-width:40px;text-align:center;padding:9px 12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--panel);font-variant-numeric:tabular-nums}
.pager a:hover{border-color:var(--steel);color:var(--steel)}
.pager a.on{background:var(--red);border-color:var(--red);color:#fff}

/* Blog article */
.post{padding-block:clamp(30px,5vw,54px)}
.post .crumb{margin-bottom:12px}
.post-cat{display:inline-block;font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--steel);font-weight:600;margin-left:10px}
.post-title{font-size:clamp(2rem,4.5vw,3rem);color:var(--ink);margin:8px 0}
.post-meta{color:var(--muted);font-family:var(--f-disp);letter-spacing:.03em}
.post-cover{margin:26px 0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
.post-cover img{width:100%;display:block}
.post-body{margin-top:24px;font-size:1.09rem;line-height:1.75;color:var(--ink)}
.post-body h2{font-family:var(--f-disp);font-size:1.7rem;color:var(--ink);margin:32px 0 10px}
.post-body h3{font-family:var(--f-disp);font-size:1.35rem;color:var(--ink);margin:24px 0 8px}
.post-body p{margin:14px 0;color:var(--muted)}
.post-body ul,.post-body ol{margin:14px 0;padding-left:24px;color:var(--muted)}
.post-body li{margin:6px 0}
.post-body a{color:var(--steel);text-decoration:underline;font-weight:600}
.post-body strong{color:var(--ink)}
.post-body blockquote{margin:20px 0;padding:14px 20px;border-left:4px solid var(--steel);background:var(--panel-2);border-radius:0 10px 10px 0;color:var(--ink)}
.post-body blockquote p{color:var(--ink);margin:0}
.post-body img{border-radius:10px;margin:16px 0;max-width:100%}
.post-body code{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.92em}
.post-body hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.post-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:42px;padding:26px 28px;background:var(--panel-2);border:1px solid var(--line);border-radius:16px}
.post-cta h3{color:var(--ink);margin-top:4px}.post-cta p{color:var(--muted);margin-top:4px}

/* FAQ page groups */
.faq-group{margin-bottom:34px}
.faq-group-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.faq-group-head .fg-ic{width:44px;height:44px;border-radius:11px;background:var(--panel-2);color:var(--steel);display:flex;align-items:center;justify-content:center;flex:none;transition:background .2s,color .2s}
.faq-group-head:hover .fg-ic{background:var(--steel);color:#fff}
.faq-group-head .fg-ic svg{width:24px;height:24px}
.faq-group-head h2{font-size:1.6rem;color:var(--ink)}

/* Terms / glossary */
.terms-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.terms-search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:9px 16px;flex:1;min-width:220px;max-width:420px;box-shadow:var(--shadow)}
.terms-search svg{width:18px;height:18px;color:var(--muted);flex:none}
.terms-search input{border:0;background:transparent;font:inherit;color:var(--ink);width:100%;outline:none}
.terms-az{display:flex;flex-wrap:wrap;gap:4px}
.terms-az a{font-family:var(--f-disp);font-weight:600;font-size:.92rem;color:var(--steel);padding:4px 9px;border-radius:6px}
.terms-az a:hover{background:var(--steel);color:#fff}
.term-block{margin-bottom:28px;scroll-margin-top:100px}
.term-letter{font-family:var(--f-disp);font-size:1.7rem;color:var(--steel);border-bottom:2px solid var(--line);padding-bottom:6px;margin-bottom:14px}
.term-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 34px;margin:0}
@media(max-width:720px){.term-list{grid-template-columns:1fr}}
.term dt{font-family:var(--f-disp);font-size:1.14rem;color:var(--ink);font-weight:700}
.term dd{margin:3px 0 0;color:var(--muted);font-size:.98rem;line-height:1.5}
.terms-none{text-align:center;color:var(--muted);padding:30px}

/* ===== Community: accounts + forum ===== */
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:.86rem;margin-top:8px}
.page-hero.slim .wrap{padding-block:clamp(26px,4vw,42px)}
.crumb.light{color:#a9c4dc}
.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:20px}
.fwelcome{color:#c9dcee;font-family:var(--f-disp)}
.notice.ok-slim{background:#e7f6ec;border:1px solid #b6e0c4;color:#1c6b38;border-radius:10px;padding:10px 16px;margin-bottom:14px}
:root:not([data-theme="light"]) .notice.ok-slim,:root[data-theme="dark"] .notice.ok-slim{background:#12331f;border-color:#245c37;color:#8fe0a8}

/* avatars + header account chip */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex:none;background:var(--panel-2);border:1px solid var(--line)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.init{background:var(--steel);color:#fff;font-family:var(--f-disp);font-weight:700;letter-spacing:.02em}
.acct-mini{display:inline-flex;align-items:center;justify-content:center;margin-left:2px}
.acct-mini.login{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--ink);transition:border-color .2s,color .2s}
.acct-mini.login:hover{border-color:var(--steel);color:var(--steel)}
.acct-mini.login svg{width:20px;height:20px}
.m-acct{color:var(--steel)!important}
@media(max-width:980px){.acct-mini{display:none}}

/* social + auth */
.social-row{display:flex;flex-direction:column;gap:10px}
.btn-social{display:flex;align-items:center;justify-content:center;gap:10px;padding:.82em 1em;border-radius:8px;font-family:var(--f-disp);font-weight:600;font-size:1rem;border:1px solid var(--line);background:var(--panel);color:var(--ink);transition:transform .15s,box-shadow .15s}
.btn-social:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-social .si{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.btn-social.g .si{background:#fff;color:#4285F4;border:1px solid var(--line)}
.btn-social.f{background:#1877F2;color:#fff;border-color:#1877F2}
.btn-social.f .si{background:#fff;color:#1877F2}
.or-sep{display:flex;align-items:center;gap:12px;color:var(--muted);margin:18px 0;font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-tabs{display:flex;gap:6px;margin-bottom:16px}
.auth-tabs a{flex:1;text-align:center;padding:11px;font-family:var(--f-disp);font-weight:600;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--line);border-radius:8px;color:var(--muted);background:var(--panel)}
.auth-tabs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* account page */
.acct-head{display:flex;align-items:center;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.acct-head h2{color:var(--ink)}
.acct-logout{margin-left:auto}
.acct-card{margin-bottom:20px}
.acct-card h3{color:var(--ink);margin-bottom:12px}
.avatar-form{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.avatar-form input[type=file]{font:inherit;color:var(--muted)}
.acct-forum-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin-top:8px}
.acct-forum-cta span{font-family:var(--f-disp);font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.acct-forum-cta svg{width:20px;height:20px;color:var(--steel)}

/* forum home */
.forum-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:34px}
@media(max-width:700px){.forum-cats{grid-template-columns:1fr}}
.forum-cat{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.forum-cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#c2d3e6}
.fc-ic{width:52px;height:52px;border-radius:12px;background:var(--panel-2);color:var(--steel);display:flex;align-items:center;justify-content:center;flex:none;transition:background .2s,color .2s}
.forum-cat:hover .fc-ic{background:var(--steel);color:#fff}
.fc-ic svg{width:26px;height:26px}
.fc-main{flex:1;min-width:0}
.fc-main h3{font-family:var(--f-disp);font-size:1.25rem;color:var(--ink)}
.fc-main p{color:var(--muted);font-size:.92rem;margin-top:2px}
.fc-stat{text-align:center;flex:none}
.fc-stat b{font-family:var(--f-disp);font-size:1.5rem;color:var(--ink);display:block;line-height:1}
.fc-stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.recent-h{font-size:1.5rem;color:var(--ink);margin-bottom:14px}

/* thread list rows */
.forum-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.thread-list{display:flex;flex-direction:column;gap:10px}
.thread-row{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow);transition:border-color .18s,transform .18s}
.thread-row:hover{border-color:var(--steel);transform:translateX(3px)}
.tr-main{flex:1;min-width:0}
.tr-main h3{font-family:var(--f-disp);font-size:1.12rem;color:var(--ink);line-height:1.15}
.tr-meta{color:var(--muted);font-size:.86rem;margin-top:2px}
.tr-cat{color:var(--steel);font-weight:600}
.tr-count{text-align:center;flex:none}
.tr-count b{font-family:var(--f-disp);font-size:1.2rem;color:var(--ink);display:block;line-height:1}
.tr-count span{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

/* thread view */
.post-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.thread-op{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);margin-bottom:8px}
.pi-body{flex:1;min-width:0}
.pi-meta{font-family:var(--f-disp);color:var(--ink);margin-bottom:6px}
.pi-meta b{font-size:1.05rem}
.pi-meta span{color:var(--muted);font-weight:400;font-size:.88rem;font-family:var(--f-body)}
.pi-body .post-body{font-size:1rem;line-height:1.65;margin-top:0}
.pi-body .post-body p{margin:8px 0;color:var(--ink)}
.replies-h{font-family:var(--f-disp);color:var(--ink);font-size:1.2rem;margin:24px 0 4px}
.reply-form{margin-top:22px}
.reply-form label{display:block;font-family:var(--f-disp);font-weight:600;margin-bottom:8px;color:var(--ink)}
.reply-form textarea{width:100%;font:inherit;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px;resize:vertical}
.reply-form .btn{margin-top:12px}

/* Footer */
footer{background:var(--navy);color:#cdddec;padding-block:52px 26px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
footer h4{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;color:#fff;margin:0 0 14px}
footer a{color:#cdddec;display:block;padding:4px 0}
footer a:hover{color:#fff}
.foot-brand b{font-family:var(--f-disp);font-size:1.5rem;color:#fff;letter-spacing:.02em}
.foot-brand p{color:#9fb9cf;margin-top:10px;max-width:38ch;font-size:.96rem}
.foot-num{color:#fff;font-family:var(--f-disp);font-size:1.1rem}
.lic{display:inline-block;margin-top:14px;font-family:var(--f-disp);letter-spacing:.05em;border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:6px 12px;color:#fff;font-size:.9rem}
.foot-bot{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#89a5bc;font-size:.86rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- Social first-login: choose username ---- */
.welcome-card{border-top:4px solid var(--steel)}
.welcome-card .eyebrow{color:var(--red)}
.welcome-card h2.disp{margin:.25rem 0 .4rem}
.uname-field{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card,#fff)}
.uname-field .at{padding:0 .6rem;color:var(--muted);font-weight:700;font-family:var(--f-disp)}
.uname-field input{border:0;flex:1;padding:.7rem .6rem .7rem 0;background:transparent;color:var(--ink);font-size:1rem}
.uname-field input:focus-visible{outline:none}
.uname-field:focus-within{border-color:var(--steel-2);box-shadow:0 0 0 3px rgba(47,107,224,.18)}
.welcome-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
@media(max-width:520px){.welcome-actions .btn{flex:1 1 auto}}

/* ---- Forum: public vs private (Tri Tech only) ---- */
.vis-badge{display:inline-flex;align-items:center;gap:.32em;vertical-align:middle;
  font-family:var(--f-disp);font-weight:700;font-size:.62em;letter-spacing:.04em;text-transform:uppercase;
  padding:.28em .6em;border-radius:999px;white-space:nowrap;line-height:1}
.vis-badge svg{width:1.05em;height:1.05em;flex:0 0 auto}
.vis-badge.private{background:var(--red);color:#fff}
.thread-row .vis-badge, .tr-main .vis-badge{font-size:.6rem;margin-right:.45rem}

.vis-banner{display:flex;gap:.8rem;align-items:flex-start;border-radius:12px;padding:.9rem 1.1rem;margin-bottom:1.2rem;
  border:1px solid var(--line);font-size:.95rem;line-height:1.45}
.vis-banner .vb-ic{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:9px}
.vis-banner .vb-ic svg{width:20px;height:20px}
.vis-banner.private{background:rgba(226,31,38,.07);border-color:rgba(226,31,38,.35)}
.vis-banner.private .vb-ic{background:var(--red);color:#fff}
.vis-banner.private b{color:var(--red-dk)}
.vis-banner.public{background:rgba(21,80,192,.06);border-color:rgba(21,80,192,.28)}
.vis-banner.public .vb-ic{background:var(--steel);color:#fff}
.vis-banner.public b{color:var(--steel)}
.page-hero.private-hero{box-shadow:inset 0 4px 0 var(--red)}

/* choice cards on the new-topic form */
.vis-choose{border:0;padding:0;margin:0 0 1.1rem}
.vis-choose legend{font-family:var(--f-disp);font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:.5rem;padding:0}
.vis-opt{display:block;cursor:pointer;margin-bottom:.6rem}
.vis-opt input{position:absolute;opacity:0;width:0;height:0}
.vis-opt-card{display:flex;gap:.85rem;align-items:flex-start;border:2px solid var(--line);border-radius:12px;padding:.85rem 1rem;transition:border-color .15s,background .15s,box-shadow .15s}
.vis-opt-ic{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:var(--wash,#eef3fb);color:var(--steel)}
.vis-opt-ic svg{width:22px;height:22px}
.vis-opt-ic.priv{color:var(--red)}
.vis-opt-txt{display:flex;flex-direction:column;gap:.15rem}
.vis-opt-txt b{font-family:var(--f-disp);font-size:1rem}
.vis-opt-txt small{color:var(--muted);font-size:.86rem;line-height:1.4}
.vis-opt input:checked + .vis-opt-card{border-color:var(--steel);background:rgba(21,80,192,.05);box-shadow:0 0 0 3px rgba(21,80,192,.12)}
.vis-opt input[value="private"]:checked + .vis-opt-card{border-color:var(--red);background:rgba(226,31,38,.05);box-shadow:0 0 0 3px rgba(226,31,38,.12)}
.vis-opt input:focus-visible + .vis-opt-card{outline:3px solid var(--steel-2);outline-offset:2px}

/* ---- Contact page ---- */
.req{color:var(--red);font-weight:700}
.contact-page-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:1.8rem;align-items:start}
@media(max-width:820px){.contact-page-grid{grid-template-columns:1fr}}
.contact-info{display:flex;flex-direction:column;gap:.9rem}
.ci-card{display:flex;gap:.85rem;align-items:flex-start;background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
.ci-card .ci-ic{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--wash,#eef3fb);color:var(--steel)}
.ci-card .ci-ic svg{width:22px;height:22px}
.ci-card h3{margin:0 0 .2rem;font-family:var(--f-disp);font-size:1rem}
.ci-card p{margin:0;color:var(--muted);line-height:1.45}
.ci-card a{color:var(--steel);font-weight:600}
.ci-card.urgent{border-color:rgba(226,31,38,.35);background:rgba(226,31,38,.05)}
.ci-card.urgent .ci-ic{background:var(--red);color:#fff}
.ci-card .ci-big{font-family:var(--f-disp);font-weight:700;font-size:1.35rem;color:var(--red);font-variant-numeric:tabular-nums}
.contact-form-card h2.disp{margin:0 0 1rem}

/* ---- Legal pages (privacy, terms) ---- */
.legal-doc{max-width:74ch;line-height:1.7;color:var(--ink)}
.legal-doc h2{font-family:var(--f-disp);font-size:1.35rem;margin:2rem 0 .6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.legal-doc h3{font-family:var(--f-disp);font-size:1.06rem;margin:1.3rem 0 .4rem;color:var(--steel)}
.legal-doc p{margin:0 0 1rem}
.legal-doc ul{margin:0 0 1.1rem;padding-left:1.2rem}
.legal-doc li{margin:0 0 .5rem}
.legal-doc a{color:var(--steel);font-weight:600}
.foot-legal{display:inline-flex;gap:1.1rem}
.foot-legal a{color:inherit;opacity:.9;text-decoration:underline}
.foot-legal a:hover{opacity:1}

/* ---- Consent checkbox / note ---- */
.consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;color:var(--muted);line-height:1.45;margin:.2rem 0 1rem;cursor:pointer}
.consent input{margin-top:.2rem;flex:0 0 auto;width:16px;height:16px;accent-color:var(--red)}
.consent a{color:var(--steel);font-weight:600}
.consent-note{font-size:.82rem;color:var(--muted);text-align:center;margin:.7rem 0 0}
.consent-note a{color:var(--steel);font-weight:600}

/* ---- Reviews / testimonials ---- */
.reviews{background:var(--wash,#f5f8fc)}
.stars{display:inline-flex;gap:2px}
.stars .star{display:inline-flex;width:18px;height:18px}
.stars .star svg{width:18px;height:18px;fill:currentColor;stroke:none}
.stars .star.on{color:#f5a623}
.stars .star.off{color:var(--line)}
.yelp-badge{display:inline-flex;align-items:center;gap:.6rem;background:var(--card,#fff);border:1px solid var(--line);
  border-radius:100px;padding:.55rem 1.1rem;margin:0 auto 1.6rem;box-shadow:0 4px 14px rgba(12,35,64,.08);
  font-family:var(--f-disp);text-decoration:none;color:var(--ink);width:max-content}
.yelp-badge .yb-rating{font-size:1.5rem;font-weight:700;line-height:1;color:var(--red)}
.yelp-badge .yb-count{color:var(--muted);font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem}
.yelp-badge .yb-count b{color:#d32323}
.yelp-badge .yb-count svg{width:15px;height:15px}
.yelp-badge:hover{border-color:var(--steel);transform:translateY(-1px)}
.yelp-badge.light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff;margin-top:1.2rem}
.yelp-badge.light .yb-rating{color:#fff}
.yelp-badge.light .yb-count{color:rgba(255,255,255,.85)}
.yelp-badge.light .yb-count b{color:#fff}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem}
.review-grid.all{margin-top:.5rem}
.review-card{margin:0;background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;
  box-shadow:0 4px 16px rgba(12,35,64,.06);display:flex;flex-direction:column;gap:.8rem;transition:transform .18s,box-shadow .18s}
.review-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(12,35,64,.12)}
.review-card blockquote{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink)}
.review-card blockquote::before{content:"\201C";color:var(--steel);font-family:Georgia,serif;font-size:1.4em;line-height:0;vertical-align:-.35em;margin-right:.06em}
.review-card figcaption{margin-top:auto;display:flex;flex-direction:column;gap:.15rem;border-top:1px solid var(--line);padding-top:.7rem}
.review-card .rv-name{font-family:var(--f-disp);font-weight:700}
.review-card .rv-meta{color:var(--muted);font-size:.85rem}
.reviews-cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.btn-ghost-red{background:transparent;border:1px solid var(--red);color:var(--red)}
.btn-ghost-red:hover{background:var(--red);color:#fff}

/* ---- Review highlight bar (above hero) ---- */
.review-bar{background:var(--navy);color:#fff;border-bottom:2px solid var(--red)}
.review-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:46px;padding-block:.45rem;flex-wrap:wrap}
.review-bar .rb-rating{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;white-space:nowrap}
.review-bar .rb-rating>span{color:rgba(255,255,255,.9)}
.review-bar .rb-rating b{color:#fff}
.review-bar .stars .star{width:16px;height:16px}
.review-bar .stars .star svg{width:16px;height:16px}
.review-bar .stars .star.off{color:rgba(255,255,255,.28)}
.review-bar .rb-pill{display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:var(--navy);
  font-family:var(--f-disp);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;padding:.4rem .95rem;border-radius:100px;white-space:nowrap;transition:background .15s,color .15s,transform .15s}
.review-bar .rb-pill svg{width:15px;height:15px}
.review-bar .rb-pill:hover{background:var(--red);color:#fff;transform:translateY(-1px)}
}

/* ---- Why Us page stats band ---- */
.why-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
@media(max-width:640px){.why-stats{grid-template-columns:repeat(2,1fr)}}
.why-stats .ws{background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1rem}
.why-stats .ws b{display:block;font-family:var(--f-disp);font-size:2.1rem;line-height:1;color:var(--red)}
.why-stats .ws span{display:block;margin-top:.4rem;color:var(--muted);font-size:.88rem}

/* ---- Leave a testimonial ---- */
.leave-review{margin-top:2.4rem;background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;padding:1.8rem;box-shadow:0 4px 16px rgba(12,35,64,.06)}
.leave-review .lr-head{max-width:60ch;margin-bottom:1.2rem}
.leave-review .lr-head h2.disp{margin:.2rem 0 .4rem}
.leave-review .lr-head p{color:var(--muted);margin:0}
.leave-review .lr-head a{color:var(--steel);font-weight:600}
.lr-form{max-width:640px}

/* per-review "read on Yelp" link */
.review-card .rv-link{display:inline-flex;align-items:center;gap:.3rem;margin-top:.4rem;color:var(--steel);font-weight:600;font-size:.85rem;text-decoration:none}
.review-card .rv-link svg{width:14px;height:14px}
.review-card .rv-link:hover{color:var(--red)}

/* ---- Company pages (about / who-we-are / careers) ---- */
.prose{max-width:70ch;line-height:1.7}
.prose h2.disp{margin:0 0 .5rem}
.prose p{margin:0 0 1rem}
.prose b{color:var(--ink)}
.about-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.8rem}
@media(max-width:760px){.about-cards{grid-template-columns:1fr}}
.about-facts{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-top:.6rem}
.about-facts div{text-align:center}
.about-facts b{display:block;font-family:var(--f-disp);font-size:1.5rem;color:var(--red)}
.about-facts span{color:var(--muted);font-size:.88rem}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.team-card{background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;padding:1.6rem;text-align:center;box-shadow:0 4px 16px rgba(12,35,64,.06)}
.team-card .tm-photo{width:140px;height:140px;margin:0 auto 1.1rem;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--steel),var(--navy))}
.team-card .tm-photo img{width:100%;height:100%;object-fit:cover}
.team-card .tm-mono{font-family:var(--f-disp);font-weight:700;font-size:2.8rem;color:#fff}
.team-card h3{margin:0 0 .2rem;font-family:var(--f-disp);font-size:1.25rem}
.team-card .tm-role{color:var(--red);font-weight:600;font-size:.9rem;margin-bottom:.7rem}
.team-card p{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0;text-align:left}
.careers-apply{margin-top:1.8rem}
.careers-apply .eyebrow{color:var(--red)}
.careers-apply h3.disp{margin:.2rem 0 .5rem}
.careers-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}

/* ---- Header: keep the whole menu on one line ---- */
header .wrap.bar{max-width:1440px;gap:14px}
nav.main{gap:16px;flex-wrap:nowrap}
nav.main a,nav.main .nav-dd-toggle{white-space:nowrap;font-size:.92rem;letter-spacing:.02em}
.hotline-mini small{white-space:nowrap}
@media(max-width:1300px){
  nav.main{gap:12px}
  nav.main a,nav.main .nav-dd-toggle{font-size:.85rem}
  .bar .btn-red{padding-inline:.9em}
}
@media(max-width:1080px){nav.main,.hotline-mini{display:none}.navtoggle{display:flex}}


/* ---- Careers (modern) ---- */
.careers-hero{position:relative;background:var(--navy);background-size:cover;background-position:center 30%;
  display:flex;align-items:flex-end;min-height:clamp(360px,52vh,520px);overflow:hidden}
.careers-hero .ch-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,36,.92) 0%,rgba(8,20,36,.72) 42%,rgba(8,20,36,.30) 100%)}
.careers-hero .wrap{position:relative;z-index:2;padding-block:clamp(2.4rem,5vw,4rem)}
.careers-hero .ch-copy{max-width:640px;color:#fff}
.careers-hero h1{color:#fff;margin:.4rem 0 .8rem}
.careers-hero p{color:rgba(255,255,255,.9);font-size:1.08rem;line-height:1.6;margin:0 0 1.4rem}
.ch-cta{display:flex;gap:.7rem;flex-wrap:wrap}
.careers-stats{background:var(--navy-2,#122f52)}
.careers-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:1.5rem;text-align:center}
@media(max-width:640px){.careers-stats .wrap{grid-template-columns:repeat(2,1fr)}}
.careers-stats .cs b{display:block;font-family:var(--f-disp);font-size:2rem;line-height:1;color:#fff}
.careers-stats .cs span{display:block;margin-top:.35rem;color:rgba(255,255,255,.75);font-size:.86rem}
.feature-split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:center}
.feature-split.reverse .fs-media{order:2}
@media(max-width:820px){.feature-split .wrap{grid-template-columns:1fr}.feature-split.reverse .fs-media{order:0}}
.feature-split .fs-media img{width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:16px;box-shadow:0 14px 34px rgba(12,35,64,.16)}
.feature-split .fs-copy h2.disp{margin:.3rem 0 .6rem}
.feature-split .fs-copy p{color:var(--muted);line-height:1.7;margin:0;max-width:56ch}
.role-chips{display:flex;flex-wrap:wrap;gap:.7rem}
.role-chips span{display:inline-flex;align-items:center;gap:.5rem;background:var(--card,#fff);border:1px solid var(--line);
  border-radius:100px;padding:.6rem 1.05rem;font-family:var(--f-disp);font-weight:600;font-size:.95rem;transition:border-color .15s,transform .15s,box-shadow .15s}
.role-chips span svg{width:18px;height:18px;color:var(--steel)}
.role-chips span:hover{border-color:var(--steel);transform:translateY(-2px);box-shadow:0 8px 20px rgba(12,35,64,.1)}
.apply-band{background:linear-gradient(135deg,var(--navy),var(--navy-2,#122f52));color:#fff;border-radius:20px;padding:clamp(1.8rem,4vw,2.8rem);text-align:center}
.apply-band .eyebrow.light{color:#fff;opacity:.8}
.apply-band h2.disp{color:#fff;margin:.3rem 0 .6rem}
.apply-band p{color:rgba(255,255,255,.9);margin:0 auto 1.4rem;max-width:52ch}
.apply-band .ch-cta{justify-content:center}

/* ---- Why Us: core values (numbered, dark band) ---- */
.values{background:var(--navy);color:#eaf2fb}
.values .head h2{color:#fff}
.values .head .eyebrow{color:#8fb8d8}
.values .head p{color:#c6dbec}
.values .head p b{color:#fff}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:1.6rem}
@media(max-width:860px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.values-grid{grid-template-columns:1fr}}
.value-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:1.6rem 1.4rem;display:flex;flex-direction:column;transition:transform .18s,background .18s,border-color .18s}
.value-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28)}
.value-card .vnum{font-family:var(--f-disp);font-weight:700;font-size:2.1rem;line-height:1;color:#fff;letter-spacing:.02em}
.value-card .vrule{display:block;height:2px;width:100%;margin:1.1rem 0;background:linear-gradient(90deg,var(--red) 0 36px,rgba(255,255,255,.35) 36px)}
.value-card h3{font-family:var(--f-disp);font-size:1.4rem;color:#fff;margin:0 0 .5rem;letter-spacing:.01em}
.value-card p{color:#bcd2e4;line-height:1.6;margin:0;font-size:.95rem}
.value-card em{font-style:italic;color:#fff}
/* each card turns solid red on hover */
.value-card:hover{background:var(--red);border-color:var(--red);transform:translateY(-4px)}
.value-card:hover .vnum,.value-card:hover h3,.value-card:hover em{color:#fff}
.value-card:hover p{color:rgba(255,255,255,.95)}
.value-card:hover .vrule{background:linear-gradient(90deg,#fff 0 36px,rgba(255,255,255,.5) 36px)}

/* ============================================================
   Resource Hub signup — Tips & Insights hero (top-right card)
   ============================================================ */
.page-hero.has-hub .hub-wrap{
  display:flex; align-items:center; gap:clamp(24px,4vw,56px); flex-wrap:wrap;
}
.hub-intro{flex:1 1 320px; min-width:0}
.hub-card{
  flex:0 1 400px; align-self:flex-start;
  background:var(--panel); color:var(--ink);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.08);
}
.hub-head{
  background:linear-gradient(135deg,var(--red),var(--red-dk));
  color:#fff; padding:18px 22px 16px;
}
.hub-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font:800 .72rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase;
  color:#ffe3e1;
}
.hub-eyebrow svg{width:16px;height:16px}
.hub-head h2{
  margin:9px 0 0; font-family:var(--f-disp); font-weight:700;
  font-size:1.5rem; line-height:1.08; color:#fff;
}
.hub-body{padding:18px 22px 20px}
.hub-lead{margin:0 0 10px; font-weight:700; color:var(--ink)}
.hub-check{
  display:flex; align-items:center; gap:11px; padding:7px 0;
  cursor:pointer; font-size:1rem; color:var(--ink);
}
.hub-check input,.hub-consent input{
  width:20px; height:20px; flex:none; accent-color:var(--red); cursor:pointer;
}
.hub-check:hover span{color:var(--steel)}
.hub-row{display:flex; gap:10px; margin-top:14px}
.hub-email{
  flex:1 1 auto; min-width:0; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel-2);
  color:var(--ink); font:inherit;
}
.hub-email::placeholder{color:var(--muted)}
.hub-email:focus{outline:none; border-color:var(--steel); box-shadow:0 0 0 3px rgba(21,80,192,.18)}
.hub-submit{
  flex:none; padding:12px 22px; border:0; border-radius:10px; cursor:pointer;
  background:linear-gradient(135deg,var(--red),var(--red-dk)); color:#fff;
  font:800 .82rem/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase;
  transition:transform .12s ease, filter .12s ease;
}
.hub-submit:hover{filter:brightness(1.06); transform:translateY(-1px)}
.hub-submit:active{transform:translateY(0)}
.hub-consent{
  display:flex; align-items:flex-start; gap:9px; margin-top:14px;
  font-size:.82rem; line-height:1.35; color:var(--muted); cursor:pointer;
}
.hub-consent input{width:16px;height:16px;margin-top:1px}
.hub-consent a{color:var(--steel); text-decoration:underline}
.hub-hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0}
.hub-note{
  display:flex; align-items:flex-start; gap:8px; margin:0 0 14px;
  padding:11px 13px; border-radius:10px; font-size:.92rem; line-height:1.35;
}
.hub-note svg{width:18px;height:18px;flex:none;margin-top:1px}
.hub-note.ok{background:#e7f6ec; border:1px solid #b7e0c4; color:#1c6b39}
.hub-note.err{background:#fdeceb; border:1px solid #f4c3bf; color:#a4211b}
:root:not([data-theme="light"]) .hub-note.ok,:root[data-theme="dark"] .hub-note.ok{background:#12331f;border-color:#245c37;color:#8fe0a8}
:root:not([data-theme="light"]) .hub-note.err,:root[data-theme="dark"] .hub-note.err{background:#3a1512;border-color:#7a241d;color:#f6b3ac}
@media (max-width:760px){
  .hub-card{flex-basis:100%; width:100%}
}

/* ============================================================
   Sitewide real-time hazard ribbon (#tt-alertbar)
   Brand colors only — red = danger, navy/steel = warn/info.
   ============================================================ */
.tt-alertbar{width:100%; color:#fff; font-family:var(--f-body); position:relative; z-index:60}
.tt-alertbar[hidden]{display:none}
.tt-alertbar.lvl-danger{background:linear-gradient(135deg,var(--red),var(--red-dk))}
.tt-alertbar.lvl-warn{background:var(--navy); box-shadow:inset 4px 0 0 var(--red)}
.tt-alertbar.lvl-info{background:var(--navy-2); box-shadow:inset 4px 0 0 var(--steel-2)}
.tt-abar-strip{display:flex; align-items:center; gap:11px; padding:9px 16px; min-height:44px}
.tt-abar-ic{flex:none; display:inline-flex}
.tt-abar-ic svg{width:22px; height:22px; color:#fff}
.tt-alertbar.lvl-warn .tt-abar-strip > .tt-abar-ic svg,
.tt-alertbar.lvl-info .tt-abar-strip > .tt-abar-ic svg{color:#ffd7d3}
.tt-abar-txt{flex:1 1 auto; min-width:0; color:#fff; text-decoration:none; display:flex; align-items:baseline; gap:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.tt-abar-txt:hover .tt-abar-ttl{text-decoration:underline}
.tt-abar-src{flex:none; font:800 .66rem/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.16); padding:4px 8px; border-radius:20px}
.tt-abar-ttl{font-weight:700}
.tt-abar-det{color:rgba(255,255,255,.82); overflow:hidden; text-overflow:ellipsis}
.tt-abar-more{flex:none; background:rgba(255,255,255,.16); color:#fff; border:0; border-radius:20px; padding:5px 12px; font:700 .78rem/1 var(--f-body); cursor:pointer}
.tt-abar-more:hover{background:rgba(255,255,255,.28)}
.tt-abar-x{flex:none; background:transparent; color:#fff; border:0; font-size:1.5rem; line-height:1; width:30px; height:30px; border-radius:8px; cursor:pointer; opacity:.85}
.tt-abar-x:hover{opacity:1; background:rgba(255,255,255,.16)}
.tt-abar-panel{max-width:var(--maxw); margin:0 auto; padding:4px 16px 12px; display:flex; flex-direction:column; gap:6px}
.tt-abar-panel[hidden]{display:none}
.tt-abar-row{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.10); color:#fff; text-decoration:none}
.tt-abar-row:hover{background:rgba(255,255,255,.18)}
.tt-abar-row .tt-abar-ic svg{width:18px; height:18px}
.tt-abar-row.lvl-danger{box-shadow:inset 3px 0 0 #fff}
.tt-abar-rt{flex:1 1 auto; min-width:0}
.tt-abar-rt b{text-transform:uppercase; font-size:.66rem; letter-spacing:.08em; opacity:.9; margin-right:6px}
.tt-abar-ago{flex:none; font-size:.78rem; opacity:.72}
@media (max-width:640px){
  .tt-abar-det{display:none}
  .tt-abar-strip{gap:8px; padding:8px 12px}
  .tt-abar-src{display:none}
}

/* ============================================================
   Service-area map + ZIP coverage checker (#area)
   ============================================================ */
.area .wrap{align-items:start}
.area-map{min-height:0;height:460px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);background:#12466b;z-index:0}
@media(max-width:820px){.area-map{height:360px;margin-top:8px}}
.leaflet-container{font:inherit}
.leaflet-popup-content{font-family:var(--f-body);font-size:14px;line-height:1.4;color:#0f1e2e}
/* HQ pin */
.hq-pin{background:transparent;border:0}
.hq-pin span{display:block;width:18px;height:18px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 0 0 3px rgba(226,31,38,.35),0 2px 6px rgba(0,0,0,.4)}
/* ZIP checker */
.zipcheck{margin-top:20px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px}
.zip-lab{display:block;font-weight:800;color:var(--ink);margin-bottom:9px;font-size:1.02rem}
.zip-form{display:flex;gap:9px}
.zip-in{flex:1 1 auto;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit}
.zip-in::placeholder{color:var(--muted)}
.zip-in:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(21,80,192,.18)}
.zip-btn{flex:none;padding:12px 22px;border:0;border-radius:10px;cursor:pointer;background:linear-gradient(135deg,var(--red),var(--red-dk));color:#fff;font:800 .82rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;transition:transform .12s ease,filter .12s ease}
.zip-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.zip-result{margin-top:12px;padding:11px 13px;border-radius:10px;font-size:.96rem;line-height:1.4}
.zip-result.ok{background:#e7f6ec;border:1px solid #b7e0c4;color:#1c6b39}
.zip-result.no{background:#fdeceb;border:1px solid #f4c3bf;color:#a4211b}
.zip-result.warn{background:#fef6e7;border:1px solid #f3d9a6;color:#8a5a00}
.zip-result.load{background:var(--panel);border:1px solid var(--line);color:var(--muted)}
:root:not([data-theme="light"]) .zip-result.ok,:root[data-theme="dark"] .zip-result.ok{background:#12331f;border-color:#245c37;color:#8fe0a8}
:root:not([data-theme="light"]) .zip-result.no,:root[data-theme="dark"] .zip-result.no{background:#3a1512;border-color:#7a241d;color:#f6b3ac}
.area-list{margin-top:20px}

/* Footer social links (live icons — hover fills brand red) */
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social .soc-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#cdd9e6;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.foot-social .soc-link svg{width:20px;height:20px}
.foot-social .soc-link:hover{color:#fff;background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.foot-social .soc-link:hover svg .drop{transform:scale(1.08);transform-origin:center}