/* Hallmark · macrostructure: Call-First Emergency · tone: rugged/utilitarian/urgent · anchor hue: hazard-amber
 * theme: custom (paper oklch(22% 0.012 250) steel · accent oklch(80% 0.158 78) hazard-amber · display Oswald + body Inter)
 * pre-emit critique: P5 H5 E4 S4 R4 V4
 */
:root{
  --steel-900: oklch(18% 0.012 250);
  --steel-800: oklch(22% 0.013 250);
  --steel-700: oklch(28% 0.014 250);
  --steel-600: oklch(38% 0.014 250);
  --paper:     oklch(98% 0.004 250);
  --paper-2:   oklch(95% 0.006 250);
  --ink:       oklch(24% 0.02 250);
  --ink-soft:  oklch(44% 0.015 250);
  --line:      oklch(89% 0.008 250);
  --line-dark: oklch(34% 0.014 250);
  --amber:     oklch(80% 0.158 78);
  --amber-deep:oklch(72% 0.165 70);
  --on-amber:  oklch(22% 0.04 80);
  --white:     oklch(99% 0.003 250);
  --mut-on-dark: oklch(78% 0.012 250);

  --font-display: "Oswald", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --space-xs:.5rem; --space-sm:.85rem; --space-md:1.4rem; --space-lg:2.4rem;
  --space-xl:4rem; --space-2xl:6rem;
  --radius:14px; --radius-lg:22px;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --maxw: 1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--paper);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  padding-bottom:64px; /* room for mobile call bar */
}
@media(min-width:760px){body{padding-bottom:0}}
h1,h2,h3{font-family:var(--font-display);font-weight:700;font-style:normal;line-height:1.04;letter-spacing:-.01em;text-transform:uppercase}
h2{font-size:clamp(1.7rem,4.5vw,2.9rem)}
h3{font-size:1.15rem;letter-spacing:0}
p{overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.2rem)}
.eyebrow{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--amber-deep)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}

/* ---- top nav ---- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklch,var(--steel-900) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line-dark);color:var(--white)}
.nav .wrap{display:flex;align-items:center;gap:1rem;height:64px}
.brand{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem;display:flex;align-items:center;gap:.55rem}
.brand .spark{width:11px;height:11px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px color-mix(in oklch,var(--amber) 30%,transparent)}
.nav-links{display:none;margin-left:auto;gap:1.6rem;font-size:.92rem;color:var(--mut-on-dark)}
.nav-links a:hover{color:var(--white)}
.nav-call{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;background:var(--amber);color:var(--on-amber);
  font-weight:700;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;
  padding:.6rem 1.05rem;border-radius:999px;white-space:nowrap;transition:transform .15s var(--ease-out),background .15s var(--ease-out)}
.nav-call:hover{background:var(--white);transform:translateY(-1px)}
@media(min-width:760px){.nav-links{display:flex}.nav-call{margin-left:0}}

/* ---- hero ---- */
.hero{position:relative;color:var(--white);background:var(--steel-900);overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in oklch,var(--steel-900) 70%,transparent),var(--steel-900) 88%),
  radial-gradient(120% 80% at 80% 0,color-mix(in oklch,var(--amber) 16%,transparent),transparent 60%)}
.hero .wrap{position:relative;padding-block:clamp(2.6rem,7vw,5rem) clamp(2.2rem,5vw,3.6rem);
  display:grid;gap:clamp(1.6rem,4vw,2.6rem)}
@media(min-width:920px){.hero .wrap{grid-template-columns:1.35fr .9fr;align-items:center}}
.hero h1{font-size:clamp(2.5rem,8vw,5rem);margin-block:.7rem .9rem}
.hero h1 span{color:var(--amber)}
.hero .lead{font-size:clamp(1.02rem,2.2vw,1.2rem);color:var(--mut-on-dark);max-width:46ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.02rem;padding:.95rem 1.5rem;border-radius:12px;
  white-space:nowrap;transition:transform .15s var(--ease-out),background .15s var(--ease-out),box-shadow .15s var(--ease-out);cursor:pointer;border:0}
.btn-primary{background:var(--amber);color:var(--on-amber);box-shadow:0 10px 30px -12px color-mix(in oklch,var(--amber) 80%,transparent)}
.btn-primary:hover{background:var(--white);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid var(--line-dark)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.hero-chips{display:flex;flex-direction:column;gap:.7rem;margin-top:1.8rem}
.hero-chips li{display:flex;gap:.7rem;align-items:flex-start;color:var(--mut-on-dark);font-size:.96rem;list-style:none}
.hero-chips .tick{color:var(--amber);font-weight:700;flex:none}
/* phone card */
.phonecard{background:color-mix(in oklch,var(--steel-800) 88%,transparent);border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);padding:1.6rem 1.5rem;text-align:center}
.phonecard .k{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--amber-deep)}
.phonecard .num{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,6vw,2.9rem);letter-spacing:.01em;display:block;margin:.4rem 0 .2rem}
.phonecard .num:hover{color:var(--amber)}
.phonecard .sub{color:var(--mut-on-dark);font-size:.9rem;margin-top:.5rem}
.badges{display:flex;gap:.6rem;justify-content:center;margin-top:1.1rem;flex-wrap:wrap}
.badge{font-family:var(--font-display);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;
  border:1px solid var(--line-dark);border-radius:999px;padding:.4rem .7rem;color:var(--mut-on-dark)}
.badge b{color:var(--amber);font-weight:700}

/* ---- trust strip ---- */
.strip{background:var(--steel-800);color:var(--white);border-block:1px solid var(--line-dark)}
.strip .wrap{display:grid;gap:1px;grid-template-columns:1fr;padding:0}
@media(min-width:680px){.strip .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}}
.strip .cell{padding:1.4rem clamp(1.1rem,4vw,2.2rem)}
.strip .cell+.cell{border-top:1px solid var(--line-dark)}
@media(min-width:680px){.strip .cell+.cell{border-top:0;border-left:1px solid var(--line-dark)}}
.strip h3{color:var(--amber);text-transform:uppercase;font-size:.95rem;letter-spacing:.04em}
.strip p{color:var(--mut-on-dark);font-size:.93rem;margin-top:.3rem}

/* ---- sections ---- */
section{padding-block:clamp(2.8rem,7vw,var(--space-2xl))}
.sec-head{max-width:60ch;margin-bottom:clamp(1.6rem,4vw,2.4rem)}
.sec-head h2{margin-top:.5rem}
.sec-head p{color:var(--ink-soft);margin-top:.7rem;font-size:1.04rem}

.grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:620px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;background:var(--white);
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s var(--ease-out);display:block}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px oklch(20% 0.02 250 / .35);border-color:var(--amber)}
.card .tag{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--amber-deep)}
.card h3{margin:.5rem 0 .5rem;text-transform:none;letter-spacing:0}
.card p{color:var(--ink-soft);font-size:.95rem}
.card .more{display:inline-block;margin-top:.9rem;font-weight:600;color:var(--ink);border-bottom:2px solid var(--amber);padding-bottom:1px}

/* steps */
.steps{counter-reset:s;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{border-top:3px solid var(--amber);background:var(--paper-2);border-radius:0 0 var(--radius) var(--radius);padding:1.4rem}
.step .n{font-family:var(--font-display);font-weight:700;font-size:2rem;color:var(--amber-deep);line-height:1}
.step h3{text-transform:none;letter-spacing:0;margin:.4rem 0 .4rem}
.step p{color:var(--ink-soft);font-size:.95rem}

/* coverage */
.areas{display:flex;flex-wrap:wrap;gap:.6rem}
.area{border:1px solid var(--line);border-radius:999px;padding:.6rem 1.05rem;font-weight:600;font-size:.95rem;
  transition:.15s var(--ease-out)}
.area:hover{background:var(--steel-900);color:var(--white);border-color:var(--steel-900)}

/* gallery */
.gallery{display:grid;gap:.8rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line)}

/* faq */
.faq{display:grid;gap:.7rem;max-width:820px}
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:.2rem 1.1rem}
.faq summary{cursor:pointer;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:1rem;padding:1rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--amber-deep);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-soft);padding:0 0 1.1rem;font-size:.97rem}

/* final cta */
.endcta{background:var(--steel-900);color:var(--white);text-align:center;border-radius:var(--radius-lg)}
.endcta .inner{padding:clamp(2.2rem,6vw,3.6rem) 1.4rem}
.endcta h2{color:var(--white)}
.endcta h2 span{color:var(--amber)}
.endcta p{color:var(--mut-on-dark);max-width:50ch;margin:.8rem auto 0}

/* footer */
footer{background:var(--steel-900);color:var(--mut-on-dark);border-top:1px solid var(--line-dark);font-size:.92rem}
footer .wrap{padding-block:2.4rem}
footer .frow{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;margin-bottom:1rem}
footer a:hover{color:var(--amber)}
footer .legal{display:flex;flex-wrap:wrap;gap:1rem;font-size:.82rem;opacity:.8;margin-top:1rem;border-top:1px solid var(--line-dark);padding-top:1rem}

/* mobile sticky call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;
  background:var(--steel-900);border-top:1px solid var(--line-dark)}
.callbar a{padding:1rem;text-align:center;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--white)}
.callbar a.call{background:var(--amber);color:var(--on-amber)}
@media(min-width:760px){.callbar{display:none}}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.nav-call:hover{transform:none}
}
/* hazard-stripe brand motif */
.hazard{height:12px;background:repeating-linear-gradient(45deg,var(--steel-900) 0 16px,var(--amber) 16px 32px)}
/* live availability pill */
.live{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.12em;font-size:.74rem;color:var(--white);border:1px solid var(--line-dark);border-radius:999px;padding:.42rem .85rem;margin-bottom:1rem}
.live .pdot{width:9px;height:9px;border-radius:50%;background:oklch(80% 0.17 145);box-shadow:0 0 0 0 oklch(80% 0.17 145 / .6);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 oklch(80% 0.17 145 / .55)}70%{box-shadow:0 0 0 11px oklch(80% 0.17 145 / 0)}100%{box-shadow:0 0 0 0 oklch(80% 0.17 145 / 0)}}
/* hero slow zoom-in (one-shot) */
.hero-bg img{animation:kenburns 16s var(--ease-out) forwards}
@keyframes kenburns{from{transform:scale(1.09)}to{transform:scale(1)}}
/* why-us band */
.why{background:var(--paper-2)}
.why .item{display:flex;gap:.9rem;align-items:flex-start}
.why .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--steel-900);color:var(--amber);display:grid;place-items:center;font-size:1.25rem}
.why h3{text-transform:none;letter-spacing:0;font-size:1.05rem;margin-bottom:.25rem}
.why p{color:var(--ink-soft);font-size:.93rem}
/* coverage map */
.cov{display:grid;gap:1.6rem;align-items:center}
@media(min-width:860px){.cov{grid-template-columns:1.05fr .95fr}}
.covmap{background:var(--steel-900);border-radius:var(--radius-lg);padding:1.3rem;border:1px solid var(--line-dark)}
.covmap svg{width:100%;height:auto;display:block}
.covmap .ring{fill:none;stroke:var(--line-dark)}
.covmap .route{stroke:var(--steel-600);stroke-dasharray:3 4}
.covmap .pin{fill:var(--amber)}
.covmap .hub{fill:var(--white)}
.covmap .lbl{fill:var(--mut-on-dark);font-family:var(--font-body);font-size:11px}
.covmap .lbl-hub{fill:var(--white);font-family:var(--font-display);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
/* reviews-ready */
.rev{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:760px){.rev{grid-template-columns:repeat(3,minmax(0,1fr))}}
.revcard{border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;background:var(--white)}
.revcard .stars{color:var(--amber-deep);letter-spacing:.18em;font-size:1.05rem}
.revcard p{color:var(--ink-soft);font-size:.95rem;margin:.55rem 0}
.revcard .who{font-weight:600;font-size:.9rem;color:var(--ink)}
.rev-note{font-size:.86rem;color:var(--ink-soft);margin-top:1rem;background:var(--paper-2);border:1px dashed var(--line);border-radius:10px;padding:.8rem 1rem}
@media(prefers-reduced-motion:reduce){.hero-bg img{animation:none}.live .pdot{animation:none}}
/* ===== background variants (preview toggle) ===== */
/* amber wash — warm, brand-tied, pops */
html[data-bg="amber"]{--paper:oklch(94.5% 0.03 82);--paper-2:oklch(91% 0.044 80);--white:oklch(98.5% 0.012 82);--line:oklch(87% 0.035 80)}
html[data-bg="amber"] body{background-image:radial-gradient(125% 70% at 50% 0,color-mix(in oklch,var(--amber) 26%,transparent),transparent 58%);background-attachment:fixed}
/* sand — warm cream + faint dot grid */
html[data-bg="sand"]{--paper:oklch(95% 0.016 82);--paper-2:oklch(92% 0.022 82);--white:oklch(99% 0.006 82);--line:oklch(88% 0.02 82)}
html[data-bg="sand"] body{background-image:radial-gradient(color-mix(in oklch,var(--ink) 8%,transparent) 1px,transparent 1px);background-size:22px 22px}
/* blueprint — cool light + technical grid */
html[data-bg="blueprint"]{--paper:oklch(95% 0.014 240);--paper-2:oklch(92% 0.02 240);--white:oklch(99% 0.005 240);--line:oklch(86% 0.022 240)}
html[data-bg="blueprint"] body{background-image:linear-gradient(color-mix(in oklch,var(--ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,var(--ink) 6%,transparent) 1px,transparent 1px);background-size:34px 34px}
/* steel-tint — soft cool grey, calm but not white */
html[data-bg="steel"]{--paper:oklch(93% 0.008 250);--paper-2:oklch(89% 0.011 250);--white:oklch(99% 0.003 250);--line:oklch(85% 0.012 250)}
/* bg switcher bar */
.bgbar{background:var(--steel-800);color:var(--mut-on-dark);text-align:center;font-size:.8rem;padding:.5rem 1rem;font-family:var(--font-body)}
.bgbar a{color:var(--white);border:1px solid var(--line-dark);border-radius:999px;padding:.2rem .7rem;margin:0 .15rem;display:inline-block}
.bgbar a:hover{border-color:var(--amber);color:var(--amber)}
.preview-flag{background:var(--amber);color:var(--on-amber);text-align:center;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;font-weight:700;padding:.4rem}