/* D&N Site Development — site styles. Palette taken from the logo. */
:root{
  --steel:#1F3A5F;        /* logo blue */
  --steel-dk:#152840;
  --steel-lt:#2E5384;
  --orange:#E87722;       /* logo orange — decorative use only (rules, pins, accents) */
  --orange-cta:#BC5A10;   /* filled buttons carrying white text — 4.56:1, AA at any size */
  --orange-dk:#B0540F;    /* orange text on light backgrounds — 5.10:1 on white */
  --tan:#B08D57;          /* logo bronze */
  --ink:#14181D;
  --ink-2:#2B3138;
  --body:#41484F;         /* 7.3:1 on white — passes WCAG AA */
  --line:#DDE2E8;
  --bg:#FFFFFF;
  --bg-2:#F4F6F9;
  --bg-3:#EAEEF3;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,24,29,.06),0 8px 24px rgba(20,24,29,.08);
  --wrap:1180px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.65;color:var(--body);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--steel-lt);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--orange-dk)}
h1,h2,h3,h4{color:var(--ink);line-height:1.18;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.6vw,3.25rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.22rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.45em}
hr{border:0;border-top:1px solid var(--line);margin:3rem 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:820px}
.section{padding:clamp(3rem,6vw,5rem) 0}
.section--alt{background:var(--bg-2)}
.section--ink{background:var(--steel-dk);color:#C9D4E2}
.section--ink h2,.section--ink h3{color:#fff}
.eyebrow{display:block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk);margin:0 0 .7rem}
.section--ink .eyebrow{color:#F0913F}
.lede{font-size:1.16rem;color:var(--ink-2)}
.section--ink .lede{color:#C9D4E2}
.center{text-align:center}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:8px;border:2px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;line-height:1.2;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--orange-cta);color:#fff;border-color:var(--orange-cta)}
.btn--primary:hover{background:var(--orange-dk);border-color:var(--orange-dk);color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn--dark{background:var(--steel);color:#fff;border-color:var(--steel)}
.btn--dark:hover{background:var(--steel-dk);border-color:var(--steel-dk);color:#fff}
.btn--lg{font-size:1.08rem;padding:1rem 1.85rem}
.btn--block{width:100%}
.btnrow{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 0}
.center .btnrow{justify-content:center}

/* ---------- top bar + header ---------- */
.topbar{background:var(--steel-dk);color:#C9D4E2;font-size:.86rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}
.topbar a{color:#fff;text-decoration:none;font-weight:700}
.topbar a:hover{color:#F0913F}
.topbar span{display:inline-flex;align-items:center;gap:.4rem}
/* Keep the separator glued to the phone number. On a narrow screen the number
   wraps to its own line, and a "·" left stranded at the end of the line above
   reads like the sentence was cut off. */
.topbar .nb{white-space:nowrap;gap:.35rem}
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.7rem;padding-bottom:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{height:54px;width:auto}
.brand b{display:block;font-size:1.06rem;color:var(--ink);font-weight:900;letter-spacing:-.02em;line-height:1.1}
.brand small{display:block;font-size:.72rem;color:var(--body);letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.nav{display:flex;align-items:center;gap:.25rem}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.95rem;padding:.55rem .7rem;border-radius:6px}
.nav a:hover,.nav a[aria-current=page]{background:var(--bg-2);color:var(--steel)}
.nav .btn{margin-left:.5rem}
.navtoggle{display:none;background:#fff;border:2px solid var(--line);border-radius:8px;padding:.5rem .7rem;font-size:1rem;font-weight:700;color:var(--ink);cursor:pointer;align-items:center;gap:.45rem}
.has-drop{position:relative}
.has-drop>.drop{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:.4rem;display:none;margin:0;list-style:none}
.has-drop:hover>.drop,.has-drop:focus-within>.drop{display:block}
.drop li{margin:0}
.drop a{display:block;padding:.6rem .75rem;font-size:.94rem}

/* ---------- hero ---------- */
.hero{position:relative;background:linear-gradient(180deg,#16263C 0%,#1F3A5F 60%,#24456E 100%);color:#DCE5F0;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 22px);pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;
  padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.hero h1{color:#fff}
.hero .lede{color:#C9D4E2;font-size:1.2rem;max-width:44ch}
.hero .pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem;padding:0;list-style:none}
.hero .pills li{margin:0;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:.35rem .8rem;border-radius:999px}
.hero-card{background:#fff;color:var(--body);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.3);padding:1.6rem}
.hero-card h2{font-size:1.35rem;margin-bottom:.25rem}
.hero-card .fineprint{font-size:.82rem;color:var(--body);margin:.9rem 0 0}
.trustline{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.6rem;padding:0;list-style:none;font-size:.9rem;color:#B9C6D8}
.trustline li{margin:0;display:flex;align-items:center;gap:.45rem}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:1.25rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
/* The "not sure what you need" card closes whatever gap the service cards
   leave in the last row, so the block stays flush however many services the
   site has. The spans are computed at build time from the service count and
   passed in as --span3 / --span2, one per column count. */
.card--fill{grid-column:span var(--span3,1)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column}
.card h3{margin-bottom:.4rem}
.card p{margin-bottom:1rem}
.card .more{margin-top:auto;font-weight:700;text-decoration:none;color:var(--steel);display:inline-flex;align-items:center;gap:.35rem}
.card .more:hover{color:var(--orange-dk)}
.card--link{transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.card--link:hover{transform:translateY(-3px);border-color:var(--tan);box-shadow:0 10px 30px rgba(20,24,29,.13)}
.icon{width:46px;height:46px;border-radius:10px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.icon .ic{width:26px;height:26px;stroke:var(--steel);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:1.1rem;grid-template-columns:repeat(4,1fr)}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;margin:0}
.steps li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:var(--orange-cta);color:#fff;font-weight:900;margin-bottom:.8rem}
.steps h3{font-size:1.05rem;margin-bottom:.35rem}
.steps p{margin:0;font-size:.95rem}

.checks{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 1.5rem}
.checks li{position:relative;padding-left:1.9rem;margin:0}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:3px solid var(--orange);
  border-bottom:3px solid var(--orange);transform:rotate(-45deg)}

.arealist{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem 1rem;font-size:.95rem}
.arealist li{margin:0}

/* ---------- faq ---------- */
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:.75rem;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.25rem;font-weight:700;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.25rem;top:1.45rem;width:10px;height:10px;
  border-right:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .answer{padding:0 1.25rem 1.2rem}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- offer strip ---------- */
.offer{background:linear-gradient(90deg,#C55F12 0%,#A9500E 100%);color:#fff}
.offer .wrap{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;justify-content:space-between;padding-top:1.6rem;padding-bottom:1.6rem}
.offer h2,.offer p{color:#fff;margin:0}
.offer h2{font-size:1.45rem}
.offer p{font-size:.98rem;opacity:.95}
.offer .btn--primary{background:#fff;color:var(--orange-dk);border-color:#fff}
.offer .btn--primary:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- form ---------- */
.form{display:grid;gap:.9rem}
.field label{display:block;font-weight:700;color:var(--ink);font-size:.9rem;margin-bottom:.3rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:2px solid var(--line);border-radius:8px;padding:.7rem .8rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--steel-lt);outline:none}
.field textarea{min-height:120px;resize:vertical}
.field .hint{font-size:.8rem;color:var(--body);margin:.3rem 0 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.formnote{font-size:.84rem;color:var(--body)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstatus{padding:.85rem 1rem;border-radius:8px;font-weight:600;font-size:.95rem;display:none}
.formstatus.ok{display:block;background:#E6F4EA;color:#14532D;border:1px solid #9AD0AC}
.formstatus.err{display:block;background:#FDECEC;color:#7F1D1D;border:1px solid #F0A9A9}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#A9B2BD;font-size:.94rem;padding:3.5rem 0 0}
.site-footer h3{color:#fff;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1rem}
.site-footer a{color:#D3DAE3;text-decoration:none}
.site-footer a:hover{color:#F0913F;text-decoration:underline}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.5rem}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
.footbrand img{height:66px;width:auto;margin-bottom:1rem}
.legal{border-top:1px solid #2A3037;margin-top:2.5rem;padding:1.25rem 0;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.85rem}

/* ---------- sticky mobile call bar ---------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--ink);
  border-top:1px solid #2A3037;padding:.55rem;gap:.5rem;box-shadow:0 -4px 16px rgba(0,0,0,.25)}
.callbar .btn{flex:1;padding:.8rem .5rem;font-size:.98rem}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.85rem;color:var(--body);padding:.9rem 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.crumbs li{margin:0}
.crumbs li+li::before{content:"›";margin-right:.4rem;color:var(--tan)}
.crumbs a{color:var(--body)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:2rem}
  .grid--3,.grid--4,.steps{grid-template-columns:repeat(2,1fr)}
  .card--fill{grid-column:span var(--span2,1)}
  .footgrid{grid-template-columns:1fr 1fr}
  .arealist{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .navtoggle{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:.6rem;box-shadow:var(--shadow);max-height:75vh;overflow:auto}
  .nav.open{display:flex}
  .nav a{padding:.75rem .8rem}
  .nav .btn{margin:.4rem 0 0}
  .has-drop>.drop{position:static;display:block;border:0;box-shadow:none;padding:0 0 0 .8rem;min-width:0}
  .site-header .wrap{position:relative}
  .callbar{display:flex}
  body{padding-bottom:64px}
  .grid--2,.grid--3,.grid--4,.steps,.checks,.two{grid-template-columns:1fr}
  .card--fill{grid-column:span 1}
  .arealist{grid-template-columns:repeat(2,1fr)}
  .footgrid{grid-template-columns:1fr}
  .topbar .wrap{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
@media print{.site-header,.topbar,.callbar,.site-footer,.offer{display:none}}

/* ==========================================================================
   PREMIUM LAYER — motion, depth, texture and micro-interactions
   ========================================================================== */

/* --- display type: tighter, heavier headline face --- */
h1,h2,.stat b,.brand b{font-family:"Barlow Condensed","Oswald",var(--font);letter-spacing:-.005em}
h1{font-weight:800;text-transform:none;line-height:1.05;font-size:clamp(2.3rem,5.4vw,4.05rem)}
h2{font-weight:800;line-height:1.08;font-size:clamp(1.85rem,3.4vw,2.85rem)}
.section-head{max-width:760px;margin:0 0 2.5rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{font-size:1.1rem;margin-bottom:0}
.rule{width:64px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--orange),var(--tan));margin:0 0 1.1rem}
.center .rule,.section-head.center .rule{margin-left:auto;margin-right:auto}

/* --- scroll reveal --- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js [data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}
[data-reveal][data-d="5"]{transition-delay:.4s}
.no-motion [data-reveal]{opacity:1;transform:none}

/* --- hero upgrade: mesh gradient + topographic texture + scrim --- */
.hero{background:radial-gradient(1200px 620px at 12% -10%,#2E5384 0%,transparent 60%),
                radial-gradient(900px 500px at 105% 110%,#3A2A18 0%,transparent 55%),
                linear-gradient(165deg,#101C2E 0%,#1B3352 55%,#16263C 100%)}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 50%,rgba(232,119,34,.13) 0,transparent 46%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1'><path d='M-20 60c60-40 140-40 200 0s120 40 180 0'/><path d='M-20 100c60-40 140-40 200 0s120 40 180 0'/><path d='M-20 140c60-40 140-40 200 0s120 40 180 0'/><path d='M-20 180c60-40 140-40 200 0s120 40 180 0'/><path d='M-20 220c60-40 140-40 200 0s120 40 180 0'/></g></svg>");
  background-size:auto,480px 480px}
.hero::after{background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 2px,transparent 2px 26px)}
.hero h1 em{font-style:normal;color:#F0913F;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:.1em;border-radius:2px;
  background:linear-gradient(90deg,var(--orange),rgba(232,119,34,0));transform:scaleX(0);transform-origin:left;
  animation:swipe .9s .35s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes swipe{to{transform:scaleX(1)}}
.hero-card{border:1px solid rgba(255,255,255,.85);position:relative;
  background:linear-gradient(180deg,#fff 0%,#FBFCFE 100%)}
.hero-card::before{content:"";position:absolute;inset:-1px;border-radius:15px;pointer-events:none;
  background:linear-gradient(140deg,rgba(232,119,34,.55),rgba(176,141,87,.25) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.hero-card .badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--orange-cta);padding:.32rem .7rem;border-radius:999px;margin-bottom:.85rem}
.scrollcue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;width:22px;height:34px;
  border:2px solid rgba(255,255,255,.35);border-radius:12px;display:none}
.scrollcue::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;border-radius:2px;background:#F0913F;
  transform:translateX(-50%);animation:cue 1.7s infinite}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}
@media (min-width:961px){.scrollcue{display:block}}

/* --- animated logo mark micro-interaction --- */
.brand img{transition:transform .35s cubic-bezier(.2,.7,.3,1),filter .35s ease}
.brand:hover img{transform:rotate(-3deg) scale(1.05)}

/* --- header shadow on scroll --- */
.site-header{transition:box-shadow .25s ease,background .25s ease}
.site-header.stuck{box-shadow:0 6px 26px rgba(20,24,29,.11)}
/* scroll progress bar */
.progress{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:linear-gradient(90deg,var(--orange),var(--tan));
  transition:width .1s linear;z-index:2}

/* --- stat band --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.stat b{display:block;font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:800;color:#fff;line-height:1;
  background:linear-gradient(180deg,#fff 0%,#C6D3E4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{display:block;font-size:.83rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#8FA3BC;margin-top:.5rem}

/* --- service cards: gradient edge + icon lift --- */
.card{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#FCFDFE 100%)}
.card--link::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--tan));transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.card--link:hover::after,.card--link:focus-within::after{transform:scaleX(1)}
.card .icon{transition:background .25s ease,transform .25s ease}
.card--link:hover .icon{background:var(--steel);transform:translateY(-2px)}
.card--link:hover .icon .ic{stroke:#fff}
.card .more::after{content:"→";transition:transform .2s ease;display:inline-block}
.card--link:hover .more::after{transform:translateX(4px)}
.card-media{margin:-1.5rem -1.5rem 1.2rem;height:132px;position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--steel-dk),var(--steel-lt))}
.card-media svg{position:absolute;inset:0;width:100%;height:100%}

/* --- numbered steps: connective spine --- */
.steps{position:relative}
.steps li{position:relative;background:linear-gradient(180deg,#fff,#FAFBFD)}
.steps li::before{box-shadow:0 6px 16px rgba(232,119,34,.35)}
@media (min-width:761px){
  .steps::before{content:"";position:absolute;left:8%;right:8%;top:1.4rem;height:2px;
    background:repeating-linear-gradient(90deg,var(--tan) 0 8px,transparent 8px 16px);opacity:.5;z-index:0}
  .steps li{z-index:1}
}

/* --- why-us feature tiles --- */
.feat{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem;border-radius:var(--radius);
  border:1px solid var(--line);background:#fff;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.feat:hover{transform:translateY(-2px);border-color:var(--tan);box-shadow:var(--shadow)}
.feat .dot{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#D66A18,#A9500E);color:#fff}
.feat .dot .ic{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:1.03rem;margin-bottom:.25rem}
.feat p{margin:0;font-size:.95rem}
.section--ink .feat{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.section--ink .feat:hover{border-color:var(--orange)}
.section--ink .feat p{color:#B9C6D8}

/* --- split feature block --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split .visual{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;position:relative;
  background:linear-gradient(150deg,var(--steel-dk),var(--steel-lt) 60%,var(--tan))}
.split .visual svg{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:760px){.split{grid-template-columns:1fr}}

/* --- offer strip: shine sweep --- */
.offer{position:relative;overflow:hidden}
.offer::after{content:"";position:absolute;top:0;left:-40%;width:35%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:sweep 5.5s ease-in-out infinite}
@keyframes sweep{0%{left:-40%}55%,100%{left:120%}}
.offer .wrap{position:relative;z-index:1}

/* --- FAQ polish --- */
.faq details{transition:box-shadow .2s ease,border-color .2s ease}
.faq details[open]{border-color:var(--tan);box-shadow:var(--shadow)}
.faq summary:hover{background:var(--bg-2)}

/* --- pill nav / anchor chips --- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0 0 2rem}
.chips li{margin:0}
.chips a{display:inline-block;font-size:.88rem;font-weight:700;text-decoration:none;color:var(--steel);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;transition:all .18s ease}
.chips a:hover{background:var(--steel);color:#fff;border-color:var(--steel)}

/* --- quote form card --- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:clamp(1.4rem,3vw,2.2rem)}
.field input,.field select,.field textarea{transition:border-color .18s ease,box-shadow .18s ease}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px rgba(46,83,132,.13)}
.btn--primary{box-shadow:0 6px 18px rgba(232,119,34,.3)}
.btn--primary:hover{box-shadow:0 10px 26px rgba(232,119,34,.38)}

/* --- sticky call bar polish --- */
.callbar{backdrop-filter:blur(8px);background:rgba(20,24,29,.96)}

/* --- back to top --- */
.totop{position:fixed;right:16px;bottom:80px;z-index:110;width:44px;height:44px;border-radius:50%;border:0;
  background:var(--steel);color:#fff;font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;transform:translateY(8px)}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--orange-cta)}
@media (min-width:761px){.totop{bottom:24px}}

/* --- inline icon defaults (any icon dropped into text, buttons or lists) --- */
svg.ic{width:1.05em;height:1.05em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;vertical-align:-.16em}
.topbar .ic,.trustline .ic,.btn .ic,.arealist .ic{opacity:.9}
.arealist .ic{stroke:var(--orange);margin-right:.35rem}
.site-footer .btn .ic{stroke:currentColor}
.icon .ic{width:26px;height:26px;stroke:var(--steel)}
.feat .dot .ic{width:20px;height:20px;stroke:#fff}
.card-media svg,.split .visual svg{width:100%;height:100%}
.faq summary .ic{display:none}

/* media blocks: photo when supplied, branded graphic otherwise */
.card-media img,.split .visual img{width:100%;height:100%;object-fit:cover;display:block}
.split .visual{background:none}
.card-media{background:none}
@media (max-width:560px){
  .topbar{font-size:.8rem}
  .topbar span:first-child{display:none}
  .hero .pills li{font-size:.74rem;padding:.3rem .65rem}
}

/* ==========================================================================
   COVERAGE MAP (/service-areas/)
   ========================================================================== */
.mapshell{max-width:960px;margin:0 auto}
.mapbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin:0 0 1.1rem}
.mapfilter{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.mapfilter label{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8FA3BC}
.selectwrap{position:relative}
.selectwrap::after{content:"";position:absolute;right:1rem;top:50%;width:8px;height:8px;
  margin-top:-6px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg);pointer-events:none}
.selectwrap select{appearance:none;-webkit-appearance:none;font:inherit;font-size:.98rem;font-weight:700;
  color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:10px;padding:.7rem 2.8rem .7rem 1.05rem;cursor:pointer;min-width:270px;
  transition:border-color .18s ease,background .18s ease}
.selectwrap select:hover{border-color:var(--orange);background:rgba(255,255,255,.1)}
.selectwrap select:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(232,119,34,.22)}
.selectwrap select option{background:#152840;color:#fff}
.maphint{margin:0;font-size:.88rem;color:#9FB3CC;display:flex;align-items:center;gap:.5rem}
.maphint strong{color:#fff}
.hintdot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(232,119,34,.22)}

.mapstage{position:relative;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.njmap{display:block;width:100%;height:auto}
.njmap .hit{fill:transparent;stroke:none}
.njmap .reach{stroke:none}
.njmap .grid line{stroke:#ffffff;stroke-opacity:.05;stroke-width:1}
.njmap .land{fill:url(#landg);stroke:#7FA0C8;stroke-width:1.2;stroke-opacity:.45}
.njmap .sea{fill:#5C7799;font-size:11px;font-weight:700;letter-spacing:4px;opacity:.65}
.njmap .ring{fill:none;stroke:#E87722;stroke-opacity:.34;stroke-width:1.1;stroke-dasharray:6 7}
.njmap .reach{pointer-events:none}
.njmap .frameline{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5}

.njmap .pin{cursor:pointer;outline:none;transition:opacity .25s ease}
.njmap .dot{fill:#F0913F;stroke:#0B1522;stroke-width:1.4;transition:r .18s ease,fill .18s ease}
.njmap .pin--hq .dot{fill:#fff;stroke:var(--orange);stroke-width:2.6}
.njmap .plabel{fill:#C9D4E2;font-size:11.5px;font-weight:700;letter-spacing:.2px;
  paint-order:stroke;stroke:#0B1522;stroke-width:3.5;stroke-linejoin:round;pointer-events:none}
.njmap .pin--hq .plabel{fill:#fff;font-size:12.5px}
.njmap .pulse{fill:#E87722;opacity:0;transform-origin:center;
  animation:ping 3.4s cubic-bezier(0,.6,.4,1) infinite;animation-delay:calc(var(--i) * .1s)}
.njmap .pin--hq .pulse{fill:#fff;animation-duration:2.4s;animation-delay:0s}
@keyframes ping{0%{opacity:.5;transform:scale(.45)}70%,100%{opacity:0;transform:scale(3.6)}}
.njmap .pin:hover .dot,.njmap .pin:focus-visible .dot,.njmap .pin.is-active .dot{r:7.5;fill:#fff}
.njmap .pin:hover .plabel,.njmap .pin.is-active .plabel{fill:#fff}
.njmap .pin:focus-visible .dot{stroke:#fff;stroke-width:2.6}
.njmap .pin.is-dim{opacity:.18}
.njmap .pin.is-dim .pulse{animation:none;opacity:0}

.townlist{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:.6rem}
.townlist li{margin:0}
.townlist li[hidden]{display:none}
.townlist button{width:100%;text-align:left;font:inherit;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:.7rem .85rem;transition:all .18s ease;display:flex;flex-direction:column;gap:.1rem}
.townlist button:hover,.townlist button.is-active{border-color:var(--orange);
  background:rgba(232,119,34,.12);transform:translateY(-2px)}
.townlist .tn{font-weight:700;color:#fff;font-size:.94rem}
.townlist .tc{font-size:.76rem;color:#8FA3BC}

@media (max-width:900px){.townlist{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .townlist{grid-template-columns:repeat(2,1fr)}
  .mapbar{flex-direction:column;align-items:flex-start}
  .njmap .plabel{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.njmap .pulse{animation:none;opacity:0}}

/* Available to screen readers and the heading outline, invisible on screen. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ==========================================================================
   FULL-WIDTH IMAGE BAND
   ========================================================================== */
.band{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(300px,38vw,420px);display:flex;align-items:center}
.band-art{position:absolute;inset:0;z-index:-2}
.band-art img,.band-art svg{width:100%;height:100%;object-fit:cover;display:block}
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,21,34,.92) 0%,rgba(11,21,34,.78) 45%,rgba(11,21,34,.35) 100%)}
.band-copy{width:100%;color:#C9D4E2;padding:clamp(2rem,5vw,3.5rem) 0}
.band-copy h2{color:#fff;max-width:16ch}
.band-copy p{max-width:52ch;font-size:1.06rem;margin-bottom:0}
.band-copy .eyebrow{color:#F0913F}
.band-copy .btnrow{margin-top:1.4rem}
@media (max-width:760px){
  .band::after{background:linear-gradient(180deg,rgba(11,21,34,.86) 0%,rgba(11,21,34,.92) 100%)}
  .band-copy h2{max-width:none}
}

/* ---------------------------------------------------------------- buttons --
   Container link rules (.nav a, .site-footer a) are (0,1,1) and outrank
   .btn--primary at (0,1,0), so a button dropped into the nav or the footer
   inherited that container's link colour instead of its own. In the footer
   that produced muted grey on orange — 3.23:1, under AA — on the call button.

   These are (0,1,1) too and sit at the end of the file, so they win on source
   order wherever a button appears. .offer .btn--primary stays (0,2,0) and
   keeps its inverted white-on-orange treatment. */
a.btn--primary,a.btn--primary:hover{color:#fff;text-decoration:none}
a.btn--dark,a.btn--dark:hover{color:#fff;text-decoration:none}