/* North Shore dispatch system: dark industrial surfaces, hazard dividers, dense service modules, and direct-call conversion. */

:root { --ink:#0d0e10; --panel:#151719; --line:#282c2e; --gold:#ffb000; --gold-dim:#c98a00; --red:#b51e23; --paper:#f1eee7; --muted:#999c9c; --white:#fff; --display:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif; --condensed:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif; --body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { background:var(--ink); scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--white); font-family:var(--body); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin-top:0; }
.wrap { width:min(100%,76rem); margin:0 auto; padding-inline:1.25rem; }
.narrow-wrap { max-width:54rem; }
.skip-link { position:fixed; z-index:100; top:-5rem; left:1rem; padding:.7rem 1rem; color:#000; background:#fff; font-weight:800; }
.skip-link:focus { top:1rem; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.ticker { height:22px; overflow:hidden; display:flex; align-items:center; color:rgba(255,255,255,.72); background:#0a0b0c; border-bottom:1px solid rgba(255,255,255,.08); font:700 .56rem/1 var(--condensed); letter-spacing:.075em; text-transform:uppercase; white-space:nowrap; }
.ticker-track { display:flex; min-width:max-content; gap:3rem; animation:ticker 42s linear infinite; }
.ticker-track span::before { content:"◆"; color:var(--gold); margin-right:.45rem; font-size:.5rem; }
@keyframes ticker { to { transform:translateX(-50%); } }
.site-header { background:#17181b; border-bottom:1px solid #24272a; }
.header-inner { min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.brand-command { position:relative; display:flex; align-items:center; gap:.5rem; min-width:0; padding-left:.55rem; border-left:3px solid var(--red); }
.brand-command::after { content:""; position:absolute; left:-3px; right:0; bottom:-.38rem; height:1px; background:linear-gradient(90deg,var(--red),rgba(181,30,35,0)); }
.brand-command > span { display:none; color:rgba(255,255,255,.5); font:800 .5rem/1.2 var(--condensed); letter-spacing:.11em; text-transform:uppercase; }
.official-wordmark { display:block; width:140px; height:auto; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.38)); }
.call-button { display:inline-flex; align-items:center; justify-content:center; gap:.52rem; width:232px; height:50px; min-height:50px; padding:0 .9rem; color:#fff; background:var(--red); border:1px solid rgba(255,255,255,.26); box-shadow:0 5px 0 #781217; font:700 1.02rem/1 var(--condensed); letter-spacing:.035em; white-space:nowrap; transition:transform .16s ease,background .16s ease; }
.call-button:active { transform:translateY(3px); box-shadow:0 2px 0 #781217; }
.call-button:focus-visible,.sticky-call:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.call-button--small { width:137px; height:36px; min-height:36px; padding-inline:.48rem; box-shadow:0 3px 0 #781217; font-size:.7rem; }

.hero { position:relative; isolation:isolate; min-height:438px; overflow:hidden; display:flex; align-items:stretch; background:#151618; }
.hero-image { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; object-position:61% center; filter:saturate(.55) brightness(.68); }
.hero-overlay { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(8,9,10,.96) 0%,rgba(8,9,10,.78) 36%,rgba(8,9,10,.26) 68%,rgba(8,9,10,.4) 100%); }
.hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(255,176,0,.08) 1px,transparent 1px),linear-gradient(rgba(255,176,0,.06) 1px,transparent 1px); background-size:43px 43px; mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.35) 53%,transparent 88%); }
.hero-content { width:100%; padding-top:4.25rem; padding-bottom:3.85rem; }
.live-pill { display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .68rem; color:#fff; background:rgba(181,30,35,.22); border:1px solid rgba(181,30,35,.72); border-radius:99px; font:700 .63rem/1 var(--condensed); letter-spacing:.12em; text-transform:uppercase; }
.live-pill i { width:6px; height:6px; display:block; border-radius:100%; background:var(--gold); }
h1 { max-width:510px; margin:1rem 0 .95rem; color:#fff; font:700 clamp(2.9rem,7.6vw,5.6rem)/.9 var(--display); letter-spacing:-.025em; text-transform:uppercase; text-shadow:0 2px 14px rgba(0,0,0,.5); }
h1 span { display:block; color:var(--gold); }
.hero-location { margin-bottom:1.35rem; color:rgba(255,255,255,.85); font:700 .76rem/1.65 var(--condensed); letter-spacing:.12em; text-transform:uppercase; }
.call-button--large { width:244px; height:58px; min-height:58px; font-size:1rem; }
.dispatch-note { margin:1rem 0 0; color:rgba(255,255,255,.64); font:700 .6rem/1.3 var(--condensed); letter-spacing:.12em; text-transform:uppercase; }
.hazard-stripe { height:12px; background:repeating-linear-gradient(135deg,var(--gold) 0 14px,#121416 14px 27px); }

.dark-section { background:var(--ink); }
.qualify-section { padding:3.5rem 0 3.6rem; }
.eyebrow { display:flex; align-items:center; gap:.45rem; margin-bottom:.7rem; color:var(--gold); font:700 .68rem/1 var(--condensed); letter-spacing:.15em; text-transform:uppercase; }
.eyebrow::before { content:""; width:16px; height:2px; background:var(--red); }
.chip-row { display:flex; flex-wrap:wrap; gap:.48rem; }
.chip-row span { padding:.44rem .64rem; color:var(--gold); border:1px solid rgba(255,176,0,.34); border-radius:99px; background:rgba(255,176,0,.08); font:700 .68rem/1 var(--condensed); letter-spacing:.02em; }
.exclusion-panel { max-width:650px; margin-top:1rem; padding:.9rem; border:1px solid rgba(181,30,35,.38); border-radius:.75rem; background:linear-gradient(135deg,rgba(95,12,24,.28),rgba(34,12,16,.45)); }
.exclusion-panel h3 { margin:0 0 .72rem; color:rgba(255,255,255,.72); font:700 .62rem/1 var(--condensed); letter-spacing:.13em; text-transform:uppercase; }
.exclusion-row { display:flex; flex-wrap:wrap; gap:.45rem; }
.exclusion-row span { padding:.45rem .64rem; color:#ff7181; border:1px solid rgba(181,30,35,.48); border-radius:99px; background:rgba(181,30,35,.12); font:700 .68rem/1 var(--condensed); letter-spacing:.02em; }
.qualify-copy { max-width:660px; margin:1.45rem 0 1.45rem; color:rgba(255,255,255,.66); font-size:.9rem; line-height:1.72; }
.call-button--wide { width:232px; height:48px; min-height:48px; font-size:.94rem; }

.stats { background:#111315; border-block:1px solid #2a2c2e; }
.stats-grid { display:grid; grid-template-columns:1fr; }
.stats-grid div { display:flex; flex-direction:column; gap:.25rem; padding:1.45rem 0; border-bottom:1px solid #27292b; }
.stats-grid div:last-child { border-bottom:0; }
.stats-grid strong { color:var(--gold); font:700 clamp(1.4rem,2.5vw,2rem)/1 var(--display); letter-spacing:-.02em; text-transform:uppercase; }
.stats-grid span { color:rgba(255,255,255,.65); font:700 .62rem/1.2 var(--condensed); letter-spacing:.12em; text-transform:uppercase; }

.services-section { padding:4.3rem 0; }
h2 { margin-bottom:1.45rem; color:#fff; font:700 clamp(1.9rem,3.8vw,3.25rem)/.98 var(--display); letter-spacing:-.025em; text-transform:uppercase; }
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid #303234; background:#303234; gap:1px; }
.service-card { min-height:220px; padding:1.2rem; display:flex; flex-direction:column; background:#17191b; }
.service-icon { width:29px; height:29px; display:grid; place-items:center; margin-bottom:1.5rem; color:var(--gold); border:1px solid rgba(255,176,0,.4); font:800 1rem/1 var(--condensed); }
.service-card h3 { margin-bottom:.58rem; color:#fff; font:700 clamp(1rem,2vw,1.2rem)/1.04 var(--condensed); letter-spacing:.015em; text-transform:uppercase; }
.service-card p { margin-bottom:0; color:rgba(255,255,255,.55); font-size:.76rem; line-height:1.55; }

.gallery-section { padding:4.1rem 0 4.35rem; }
.gallery-section h2 { max-width:540px; }
.gallery-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
.gallery-grid figure { position:relative; min-height:205px; margin:0; overflow:hidden; background:#202225; }
.gallery-grid img { display:block; width:100%; height:100%; min-height:205px; object-fit:cover; filter:saturate(.78) contrast(1.03); }
.gallery-grid figcaption { position:absolute; left:0; bottom:0; padding:.6rem .75rem; color:#fff; background:rgba(10,11,12,.9); border-left:3px solid var(--gold); font:700 .62rem/1 var(--condensed); letter-spacing:.1em; text-transform:uppercase; }

.proof-section { padding:4.6rem 0; color:#111; background:var(--paper); }
.eyebrow--dark { color:#9b6b00; }
.proof-section h2 { color:#151719; }
.proof-intro > p:last-child { max-width:540px; color:#5c5e5b; font-size:.95rem; line-height:1.7; }
.proof-grid { display:grid; grid-template-columns:repeat(2,1fr); margin-top:2rem; border:1px solid #d2cfc4; background:#d2cfc4; gap:1px; }
.proof-grid article { min-height:190px; padding:1.1rem; background:#faf8f2; }
.proof-grid b { color:var(--gold-dim); font:700 .75rem/1 var(--condensed); letter-spacing:.1em; }
.proof-grid h3 { margin:1.25rem 0 .55rem; color:#151719; font:700 1rem/1.04 var(--condensed); letter-spacing:.02em; text-transform:uppercase; }
.proof-grid p { margin:0; color:#5a5d5d; font-size:.75rem; line-height:1.5; }

.area-section { padding:4.4rem 0; background:radial-gradient(circle at 74% 20%,rgba(255,176,0,.1),transparent 24rem),#111315; }
.area-section h2 { max-width:540px; }
.area-section p:not(.eyebrow) { max-width:590px; color:rgba(255,255,255,.67); font-size:.95rem; line-height:1.68; }
.area-list { display:flex; flex-wrap:wrap; gap:.45rem; margin:1.6rem 0 1.7rem; }
.area-list span { padding:.45rem .6rem; color:rgba(255,255,255,.76); border:1px solid #3b3d3f; font:700 .66rem/1 var(--condensed); letter-spacing:.05em; text-transform:uppercase; }

.faq-section { padding:4.2rem 0; background:#f6f4ee; color:#151719; }
.faq-section h2 { color:#151719; }
details { border-top:1px solid #d6d1c5; }
details:last-child { border-bottom:1px solid #d6d1c5; }
summary { position:relative; padding:1.05rem 1.7rem 1.05rem 0; cursor:pointer; color:#151719; font:700 1rem/1.25 var(--condensed); letter-spacing:.02em; text-transform:uppercase; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:0; color:var(--gold-dim); font:900 1.45rem/1 var(--condensed); }
details[open] summary::after { content:"−"; }
details p { max-width:680px; margin:0 0 1.2rem; color:#595c59; font-size:.88rem; line-height:1.62; }

.final-call { padding:4.5rem 0 5rem; background:var(--red); }
.final-call .eyebrow { color:rgba(255,255,255,.75); }
.final-call h2 { max-width:620px; margin-bottom:1rem; }
.final-call p:not(.eyebrow) { max-width:600px; color:rgba(255,255,255,.8); font-size:.98rem; line-height:1.65; }
.final-call .call-button { margin-top:.75rem; color:#fff; background:#111315; border-color:#111315; box-shadow:0 5px 0 rgba(0,0,0,.38); }

.site-footer { padding:2.35rem 0 calc(2.35rem + 58px + env(safe-area-inset-bottom)); background:#0b0c0d; border-top:1px solid #25272a; }
.footer-inner { display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; }
.footer-inner .brand-command img { display:block; width:194px; height:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.38)); }
.footer-inner span { color:rgba(255,255,255,.5); font:700 .58rem/1.3 var(--condensed); letter-spacing:.11em; text-transform:uppercase; }
.footer-inner a { color:var(--gold); font:700 1.2rem/1 var(--condensed); letter-spacing:.04em; }

.sticky-call { position:fixed; z-index:70; right:0; bottom:0; left:0; height:calc(58px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; gap:.62rem; padding:.72rem 1rem calc(.72rem + env(safe-area-inset-bottom)); color:#0d0e10; border-top:2px solid #cc8c00; background:var(--gold); font:700 1.05rem/1 var(--condensed); letter-spacing:.035em; white-space:nowrap; }
.sticky-call span { display:grid; place-items:center; width:28px; height:28px; color:#0d0e10; border:1px solid rgba(13,14,16,.25); border-radius:50%; font-size:.9rem; }
.sticky-call strong { color:#0d0e10; }

@media (min-width:560px) { .wrap { padding-inline:1.75rem; } .brand-command > span { display:block; } .official-wordmark { width:160px; } .hero { min-height:510px; } .hero-content { padding-top:5.2rem; } .stats-grid { grid-template-columns:repeat(3,1fr); } .stats-grid div { min-height:116px; padding:1.6rem 1.1rem; border-bottom:0; border-right:1px solid #27292b; } .stats-grid div:first-child { padding-left:0; } .stats-grid div:last-child { border-right:0; } .services-grid { grid-template-columns:repeat(3,1fr); } .gallery-grid { grid-template-columns:repeat(3,1fr); } .gallery-grid figure,.gallery-grid img { min-height:240px; } .proof-layout { display:grid; grid-template-columns:.86fr 1.14fr; gap:3rem; } .proof-grid { margin-top:0; } .site-footer { padding-bottom:2.35rem; } .sticky-call { display:none; } }
@media (min-width:900px) { .hero { min-height:568px; } .hero-content { padding-left:clamp(2rem,8vw,8rem); } .services-grid { grid-template-columns:repeat(3,1fr); } .service-card { min-height:250px; padding:1.45rem; } .area-layout { display:grid; grid-template-columns:1fr .82fr; gap:3.5rem; align-items:center; } .area-layout .call-button { grid-column:1 / -1; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .ticker-track { animation:none; } * { transition:none !important; } }