/* ============================================================
   Critical Incident Recovery Services
   Shared stylesheet
   ============================================================ */

:root{
  --ink:#0B0B0D;
  --coal:#141519;
  --graphite:#22242A;
  --crimson:#B3121E;
  --crimson-deep:#7C0A14;
  --ember:#E23A45;
  --bone:#F5F3F1;
  --paper:#FFFFFF;
  --slate:#43464C;
  --line:rgba(255,255,255,.12);
  --line-dark:rgba(11,11,13,.12);

  --display:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1180px;
  --pad:clamp(20px,5vw,40px);
  --sect:clamp(56px,7vw,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:1.05rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--slate);
  background:var(--paper);
  padding-bottom:0;
}
img{max-width:100%;display:block}
a{color:var(--crimson);text-decoration:none}
a:hover{color:var(--crimson-deep);text-decoration:underline}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px}

h1,h2,h3,h4,.eyebrow,.btn,.nav a,.stat-num{font-family:var(--display)}
h1,h2,h3,h4{color:var(--ink);line-height:1.16;margin:0 0 .55em;letter-spacing:-.022em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem);font-weight:700}
h3{font-size:clamp(1.18rem,2vw,1.4rem);font-weight:700}
h4{font-size:1.05rem;font-weight:700}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.3em;padding-left:1.25em}
li{margin-bottom:.5em}
strong{color:var(--ink);font-weight:600}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.narrow{max-width:820px}
.section{padding:var(--sect) 0}
.section--bone{background:var(--bone)}
.section--dark{background:var(--ink);color:rgba(255,255,255,.78)}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark a{color:var(--ember)}

.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--crimson);margin-bottom:.9rem;
}
.section--dark .eyebrow{color:var(--ember)}
.lede{font-size:1.16rem;line-height:1.62;color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-size:.86rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.95em 1.7em;border:2px solid transparent;border-radius:2px;
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{text-decoration:none}
.btn--red{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.btn--red:hover{background:var(--crimson-deep);border-color:var(--crimson-deep);color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{background:var(--crimson);border-color:var(--crimson);color:#fff}

/* ---------- Emergency top bar ---------- */
.topbar{background:var(--crimson);color:#fff;font-family:var(--display);font-size:.8rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;padding-top:.6rem;padding-bottom:.6rem}
.topbar a{color:#fff;font-weight:700;letter-spacing:.04em}
.topbar a:hover{color:#fff}
.live{display:inline-flex;align-items:center;gap:.55em;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.75);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}
  70%{box-shadow:0 0 0 11px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* ---------- Header / nav ---------- */
.header{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.85rem;padding-bottom:.85rem}
.brand{display:flex;align-items:center;gap:.8rem;color:#fff}
.brand:hover{text-decoration:none;color:#fff}
.mark{width:auto;height:52px;flex:none;display:block}
@media (max-width:520px){.mark{height:42px}}
.brand-name{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.01em;line-height:1.15}
.brand-sub{display:block;white-space:nowrap;font-family:var(--display);font-weight:500;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.25em}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{
  display:block;color:rgba(255,255,255,.85);font-size:.79rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:.6rem .7rem;border-radius:2px;
}
.nav a:hover{color:#fff;background:var(--graphite);text-decoration:none}
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--crimson)}
.has-sub{position:relative}
.has-sub>button{
  font-family:var(--display);background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.85);font-size:.79rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:.6rem .7rem;display:inline-flex;align-items:center;gap:.4em;
}
.has-sub>button:hover{color:#fff}
.has-sub>button::after{content:"";border:4px solid transparent;border-top-color:currentColor;margin-top:4px}
.sub{
  position:absolute;top:100%;left:0;min-width:266px;background:var(--coal);
  border:1px solid var(--line);border-top:2px solid var(--crimson);
  padding:.4rem;display:none;box-shadow:0 18px 40px rgba(0,0,0,.42);
}
.has-sub:hover .sub,.has-sub:focus-within .sub,.sub.open{display:block}
.sub a{text-transform:none;letter-spacing:0;font-size:.88rem;font-weight:500;padding:.55rem .7rem}

.nav-call{display:none}
.hamburger{
  display:none;background:none;border:1px solid var(--line);color:#fff;
  padding:.55rem .7rem;border-radius:2px;cursor:pointer;font-size:1.15rem;line-height:1;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:clamp(64px,9vw,124px) 0 clamp(56px,8vw,104px);
}
.hero::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:
    radial-gradient(90% 120% at 82% 0%,rgba(179,18,30,.42) 0%,rgba(179,18,30,0) 62%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 9px);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;max-width:19ch;margin-bottom:1.1rem}
.hero .lede{color:rgba(255,255,255,.86);max-width:62ch;font-size:1.2rem;line-height:1.6}
.hero-sub{
  position:relative;max-width:62ch;margin:1.3rem 0 0;padding-left:1.1rem;
  font-size:1rem;line-height:1.6;color:rgba(255,255,255,.66);
}
.hero-sub::before{
  content:"";position:absolute;left:0;top:.35em;bottom:.35em;
  width:2px;background:var(--crimson);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}
.hero-rule{width:74px;height:4px;background:var(--crimson);margin-bottom:1.6rem}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.9rem;margin-top:2.4rem;padding-top:1.5rem;
  border-top:1px solid var(--line);font-family:var(--display);font-size:.76rem;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62);
}

/* ---------- Trust strip ---------- */
.trust{background:var(--coal);color:#fff;border-top:3px solid var(--crimson)}
.trust .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.trust .cell{background:var(--coal);padding:2.3rem 1.7rem}
.trust h3{font-size:1.02rem;margin-bottom:.4rem;color:#fff}
.trust p{margin:0;font-size:.96rem;color:rgba(255,255,255,.66);line-height:1.6}
.trust .num{
  font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.18em;
  color:var(--ember);display:block;margin-bottom:.85rem;
}

/* ---------- Card grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.card{
  position:relative;background:var(--paper);border:1px solid var(--line-dark);
  border-top:4px solid var(--crimson);padding:1.9rem 1.7rem;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
/* red accent sweeps across the top rule on hover */
.card::after{
  content:"";position:absolute;left:0;right:100%;top:-4px;height:4px;
  background:var(--ember);transition:right .32s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,11,13,.13)}
.card:hover::after{right:0}
.section--bone .card{background:#fff}
.card h3{margin-bottom:.55rem}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--crimson);text-decoration:none}
.card p{font-size:1rem;margin-bottom:1rem}
.card .more{font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}

/* ---------- Response sequence (signature element) ---------- */
.seq{list-style:none;margin:0;padding:0;counter-reset:step}
.seq li{
  counter-increment:step;position:relative;padding:0 0 1.7rem 4.1rem;margin:0;
  border-left:2px solid var(--line-dark);
}
.seq li:last-child{border-left-color:transparent;padding-bottom:0}
.seq li::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:-1.05rem;top:-.15rem;
  width:2.1rem;height:2.1rem;background:var(--crimson);color:#fff;border-radius:2px;
  display:grid;place-items:center;font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.02em;
}
.seq h3{margin-bottom:.3rem;font-size:1.1rem}
.seq p{margin:0;font-size:1rem}
.section--dark .seq li{border-left-color:var(--line)}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.panel{background:var(--ink);color:rgba(255,255,255,.78);padding:2.3rem 2rem;border-left:4px solid var(--crimson)}
.panel h3{color:#fff}
.panel ul{list-style:none;padding:0;margin:0}
.panel li{padding-left:1.4rem;position:relative;font-size:.99rem}
.panel li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;background:var(--ember)}

.checks{list-style:none;padding:0;margin:0 0 1.3em}
.checks li{position:relative;padding-left:1.7rem}
.checks li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--crimson);transform:rotate(45deg);
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-dark)}
.faq details{border-bottom:1px solid var(--line-dark);padding:1.15rem 0}
.faq summary{
  cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--crimson);font-size:1.4rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details>*:not(summary){margin-top:.9rem;margin-bottom:0;font-size:1.01rem}

/* ---------- CTA band ---------- */
.cta{
  background:var(--crimson-deep);color:#fff;text-align:center;
  padding:clamp(48px,6vw,76px) 0;position:relative;
  border-top:3px solid var(--crimson);
}
/* subtle depth so the band does not read as one flat slab */
.cta::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:radial-gradient(70% 120% at 50% 0%,rgba(179,18,30,.55) 0%,rgba(179,18,30,0) 70%);
}
.cta > .wrap{position:relative;z-index:1}
.cta h2{color:#fff;margin-bottom:.5rem}
.cta p{color:rgba(255,255,255,.92);max-width:56ch;margin:0 auto 1.7rem}
.cta .phone{
  display:inline-block;font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(1.9rem,4.6vw,2.9rem);letter-spacing:-.02em;margin-bottom:1.1rem;
}
.cta .phone:hover{color:#fff;text-decoration:none;opacity:.86}

/* ---------- Note / crisis box ---------- */
.note{
  background:#fff;border:1px solid var(--line-dark);border-left:4px solid var(--ink);
  padding:1.5rem 1.6rem;margin:0 0 1.6rem;
}
.note h3{font-size:1.05rem;margin-bottom:.45rem}
.note p:last-child{margin-bottom:0}
.note--red{border-left-color:var(--crimson)}

/* ---------- Service areas ---------- */
.section--areas{
  position:relative;background:var(--ink);color:rgba(255,255,255,.82);
  overflow:hidden;padding:calc(var(--sect) * 1.1) 0;
}
.section--areas::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 78%);
}
.section--areas::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:radial-gradient(70% 90% at 88% 8%,rgba(179,18,30,.30) 0%,rgba(179,18,30,0) 60%);
}
.section--areas > .wrap{position:relative;z-index:1}
.section--areas h2,.section--areas h3{color:#fff}
.section--areas .eyebrow{color:var(--ember)}
.areas-lede{color:rgba(255,255,255,.84);max-width:62ch;font-size:1.2rem;line-height:1.68}

.areas-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;margin-top:2.8rem}
.county{
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-top:4px solid var(--crimson);padding:2.2rem 2.1rem;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.county-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line);
}
.county-head h3{margin:0;font-size:1.5rem}
.county-count{
  font-family:var(--display);font-size:.8rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ember);white-space:nowrap;
}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.chips li{
  margin:0;font-family:var(--display);font-size:.95rem;font-weight:500;letter-spacing:.015em;
  padding:.55em 1em;border:1px solid rgba(255,255,255,.22);border-radius:2px;
  color:rgba(255,255,255,.88);background:rgba(255,255,255,.05);line-height:1.4;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.chips li:hover{border-color:var(--crimson);color:#fff;background:rgba(179,18,30,.22)}

.areas-note{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;
  margin-top:1.8rem;padding:1.6rem 1.9rem;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-left:3px solid var(--crimson);
}
.areas-note p{margin:0;max-width:56ch;color:rgba(255,255,255,.86);font-size:1.1rem;line-height:1.6}
.areas-note .btn{flex:none}
@media (max-width:820px){
  .areas-grid{grid-template-columns:1fr}
  .areas-note{flex-direction:column;align-items:flex-start}
  .areas-note .btn{width:100%}
  .county{padding:1.7rem 1.4rem}
  .county-head h3{font-size:1.32rem}
  .chips li{font-size:.9rem;padding:.5em .85em}
  .areas-lede{font-size:1.1rem}
}

/* ---------- Breadcrumb ---------- */
.crumb{background:var(--bone);font-family:var(--display);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.crumb .wrap{padding-top:.9rem;padding-bottom:.9rem}
.crumb a{color:var(--slate)}
.crumb span{color:var(--crimson)}

/* ---------- Form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--full{grid-column:1/-1}
label{font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
input,select,textarea{
  font-family:var(--body);font-size:1rem;padding:.8rem .9rem;border:1px solid rgba(11,11,13,.24);
  border-radius:2px;background:#fff;color:var(--ink);width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--crimson);outline:none;box-shadow:0 0 0 3px rgba(179,18,30,.14)}
textarea{min-height:150px;resize:vertical}
.form-note{font-size:.88rem;color:var(--slate);grid-column:1/-1;margin:0}

/* ---------- Footer ---------- */
.footer{
  background:var(--ink);color:rgba(255,255,255,.66);
  font-size:.97rem;border-top:4px solid var(--crimson);
}

/* brand band */
.footer-band{
  background:linear-gradient(180deg,rgba(179,18,30,.16) 0%,rgba(179,18,30,0) 100%);
  border-bottom:1px solid var(--line);
}
.footer-band-inner{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.8rem;
  padding-top:2.4rem;padding-bottom:2.4rem;
}
.footer-brand{display:flex;align-items:center;gap:1.1rem}
.footer-brand img{height:64px;width:auto;flex:none}
.footer-brandname{
  display:block;font-family:var(--display);font-weight:800;font-size:1.22rem;
  color:#fff;letter-spacing:-.02em;line-height:1.2;
}
.footer-tagline{
  display:block;font-family:var(--display);font-weight:600;font-size:.7rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ember);margin-top:.45em;white-space:nowrap;
}
.footer-dispatch{text-align:right}
.footer-dispatch-label{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);
  font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:.35rem;
}
.footer-dispatch-label .dot{background:var(--ember);box-shadow:0 0 0 0 rgba(226,58,69,.7)}
.footer-phone{
  display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3vw,2.3rem);
  color:#fff;letter-spacing:-.03em;line-height:1;
}
.footer-phone:hover{color:var(--ember);text-decoration:none}

/* columns */
.footer-grid{
  display:grid;grid-template-columns:1.45fr 1fr 1fr 1.15fr;gap:2.8rem;
  padding-top:clamp(38px,5vw,58px);padding-bottom:clamp(30px,4vw,44px);
}
.footer h4{
  color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  margin:0 0 1.3rem;padding-top:.9rem;border-top:2px solid var(--crimson);display:block;
}
.footer p{line-height:1.65}
.footer a{color:rgba(255,255,255,.66);transition:color .15s ease}
.footer a:hover{color:#fff}
.footer ul{list-style:none;padding:0;margin:0}

.footer-links li{margin-bottom:.15rem}
.footer-links a{
  display:block;padding:.34rem 0 .34rem .95rem;position:relative;
  border-left:2px solid transparent;transition:border-color .15s ease,padding .15s ease,color .15s ease;
}
.footer-links a:hover{border-left-color:var(--crimson);padding-left:1.25rem;text-decoration:none}

.footer-contact li{margin-bottom:1rem;line-height:1.55}
.fc-label{
  display:block;font-family:var(--display);font-size:.64rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:.2rem;
}

.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.footer-badges span{
  font-family:var(--display);font-size:.66rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);
  padding:.44em .8em;border-radius:2px;
}

/* legal bar */
.footer-legal{background:#070709;border-top:1px solid var(--line);padding:1.7rem 0}
.footer-legal-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;
  padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-legal-top p{margin:0;font-size:.83rem;color:rgba(255,255,255,.5)}
.footer-parent{
  font-family:var(--display);font-size:.71rem!important;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(255,255,255,.72)!important;
}
.footer-disclaimer{
  margin:0 0 .55em;font-size:.81rem;line-height:1.6;color:rgba(255,255,255,.42);max-width:96ch;
}
.footer-disclaimer:last-child{margin-bottom:0}

/* ---------- Mobile call bar ---------- */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--crimson);color:#fff;text-align:center;padding:.95rem 1rem;
  font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:.06em;
  text-transform:uppercase;box-shadow:0 -6px 20px rgba(0,0,0,.3);
}
.callbar:hover{color:#fff;text-decoration:none}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .trust .grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.2rem}
  .footer-band-inner{gap:1.4rem}
  .footer-dispatch{text-align:left}
}
@media (max-width:820px){
  .hamburger{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--coal);
    flex-direction:column;align-items:stretch;gap:0;padding:.6rem;
    border-bottom:3px solid var(--crimson);max-height:76vh;overflow:auto;
  }
  .nav.open{display:flex}
  .header{position:relative}
  .header .wrap{position:relative}
  .nav a,.has-sub>button{width:100%;text-align:left;padding:.8rem .8rem}
  .sub{position:static;display:block;border:0;border-left:2px solid var(--crimson);
       margin:0 0 .4rem .8rem;box-shadow:none;min-width:0;background:transparent}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-band-inner{flex-direction:column;align-items:flex-start}
  .footer-dispatch{text-align:left}
  .footer-legal-top{flex-direction:column;align-items:flex-start}
  body{padding-bottom:60px}
  .callbar{display:block}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ---------- Brand mark & card ---------- */
.brandcard{
  background:var(--bone);border:1px solid var(--line-dark);border-top:3px solid var(--crimson);
  padding:1.4rem;text-align:center;
}
.brandcard img{width:100%;height:auto;max-width:420px;margin:0 auto}
.brandcard p{
  font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);margin:1.1rem 0 0;line-height:1.7;
}



/* ---------- Image placeholders ---------- */
.ph{margin:0;position:relative}
.ph img{width:100%;height:auto;display:block;border:1px solid var(--line-dark)}
.section--dark .ph img,.section--areas .ph img{border-color:var(--line)}
.ph figcaption{
  font-family:var(--display);font-size:.66rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate);opacity:.72;margin-top:.7rem;line-height:1.6;
}
.section--dark .ph figcaption{color:rgba(255,255,255,.45)}

/* full-bleed band */
.ph-band{margin:0;position:relative;background:var(--ink)}
.ph-band img{width:100%;height:clamp(220px,32vw,380px);object-fit:cover;display:block}
.ph-band figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem var(--pad);
  font-family:var(--display);font-size:.66rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  background:linear-gradient(180deg,rgba(11,11,13,0) 0%,rgba(11,11,13,.9) 100%);
}

/* paired / row layouts */
.ph-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.ph-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.ph-lead{max-width:900px;margin:0 auto}
@media (max-width:820px){
  .ph-pair,.ph-row{grid-template-columns:1fr}
}


/* ---------- Stat band ---------- */
.statband{background:var(--coal);border-top:3px solid var(--crimson);color:#fff}
.statband .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.statband .stat{background:var(--coal);padding:2.1rem 1.5rem}
.stat-num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.5rem);
  color:#fff;line-height:1;letter-spacing:-.03em;margin-bottom:.5rem}
.stat-num em{font-style:normal;color:var(--ember)}
.stat-lbl{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.55);display:block;line-height:1.5}

/* ---------- Pull quote ---------- */
.pullquote{border-left:4px solid var(--crimson);padding:.4rem 0 .4rem 2rem;margin:0}
.pullquote p{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.7rem);
  line-height:1.34;letter-spacing:-.02em;color:var(--ink);margin:0}
.section--dark .pullquote p{color:#fff}
.pullquote cite{display:block;font-family:var(--display);font-style:normal;font-size:.7rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson);margin-top:1rem}

/* ---------- Data table ---------- */
.dtable{width:100%;border-collapse:collapse;font-size:1rem;margin:0 0 1.4rem}
.dtable caption{text-align:left;font-family:var(--display);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--crimson);padding-bottom:.9rem}
.dtable th,.dtable td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line-dark);vertical-align:top}
.dtable thead th{font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;background:var(--ink);border-bottom:0}
.dtable tbody th{font-weight:600;color:var(--ink);width:34%}
.dtable tbody tr:nth-child(odd) td,.dtable tbody tr:nth-child(odd) th{background:rgba(11,11,13,.028)}
.dtable .yes{color:var(--crimson);font-weight:600}

/* ---------- Fact grid ---------- */
.factgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.factgrid.cols-2{grid-template-columns:repeat(2,1fr)}
.factgrid.cols-3{grid-template-columns:repeat(3,1fr)}
.factgrid.cols-5{grid-template-columns:repeat(5,1fr)}
.fact{border-top:3px solid var(--crimson);padding:1.2rem 0 0}
.fact h3{font-size:1.02rem;margin-bottom:.4rem}
.fact p{font-size:.97rem;margin:0;line-height:1.6}
.section--dark .fact{border-top-color:var(--ember)}

/* ---------- Compare panels ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.compare-col{padding:1.7rem 1.6rem;border:1px solid var(--line-dark);background:#fff}
.compare-col--do{border-top:3px solid var(--crimson)}
.compare-col--dont{border-top:3px solid var(--slate);background:var(--bone)}
.compare-col h3{font-size:1.05rem;margin-bottom:1rem}
.compare-col ul{list-style:none;padding:0;margin:0}
.compare-col li{position:relative;padding-left:1.6rem;font-size:.98rem;margin-bottom:.6rem}
.compare-col--do li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  background:var(--crimson);transform:rotate(45deg)}
.compare-col--dont li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:2px;
  background:var(--slate)}

/* ---------- Inline CTA card ---------- */
.inline-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;
  background:var(--ink);color:#fff;padding:1.5rem 1.8rem;border-left:4px solid var(--crimson);margin:2rem 0}
.inline-cta p{margin:0;max-width:52ch;color:rgba(255,255,255,.82)}
.inline-cta strong{color:#fff}

@media (max-width:960px){
  .statband .grid{grid-template-columns:repeat(2,1fr)}
  .factgrid,.factgrid.cols-3,.factgrid.cols-5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .compare{grid-template-columns:1fr}
  .factgrid,.factgrid.cols-3,.factgrid.cols-5{grid-template-columns:1fr}
  .statband .grid{grid-template-columns:1fr}
  .pullquote{padding-left:1.3rem}
  .dtable{font-size:.95rem}
  .dtable th,.dtable td{padding:.7rem .6rem}
  .dtable tbody th{width:38%}
  .inline-cta{flex-direction:column;align-items:flex-start}
}


/* ---------- Contrast safety on dark surfaces ---------- */
.section--dark .lede,.section--areas .lede,.panel .lede{color:rgba(255,255,255,.85)}
.section--dark .faq summary{color:#fff}
.section--dark strong,.section--areas strong,.panel strong,.inline-cta strong,
.hero strong,.cta strong,.statband strong,.trust strong,.footer strong,
.ph-band figcaption strong{color:#fff}
.section--dark em,.panel em,.inline-cta em{color:#fff}
.section--dark .note,.section--areas .note{background:var(--coal);border-color:var(--line)}
.section--dark .note h3{color:#fff}
.section--dark .note p{color:rgba(255,255,255,.8)}
.section--dark .checks li::before,.section--areas .checks li::before{background:var(--ember)}
.section--dark table.dtable tbody th,.section--dark table.dtable td{color:rgba(255,255,255,.82)}
.section--dark .dtable tbody tr:nth-child(odd) td,
.section--dark .dtable tbody tr:nth-child(odd) th{background:rgba(255,255,255,.04)}
.section--dark .dtable th,.section--dark .dtable td{border-bottom-color:var(--line)}

/* ---------- Balanced panels: no tall dead columns ---------- */
.panel ul.two-col{columns:2;column-gap:1.7rem}
.panel ul.two-col li{break-inside:avoid;-webkit-column-break-inside:avoid}
.panel--wide{border-left:0;border-top:4px solid var(--crimson)}
.panel--wide ul.three-col{columns:3;column-gap:2rem}
.panel--wide ul.three-col li{break-inside:avoid;-webkit-column-break-inside:avoid}
@media (max-width:820px){
  .panel ul.two-col,.panel--wide ul.three-col{columns:1}
}

/* keep split columns from leaving a long empty gutter */
.split--even{align-items:stretch}
.split--even > *{display:flex;flex-direction:column}
.split--even .panel{flex:1}


/* ---------- Light-surface components placed on dark sections ---------- */
/* Compare panels adopt the dark surface treatment rather than sitting as white slabs */
.section--dark .compare-col,.section--areas .compare-col{
  background:rgba(255,255,255,.045);border-color:var(--line);
  color:rgba(255,255,255,.84);
}
.section--dark .compare-col h3,.section--areas .compare-col h3{color:#fff}
.section--dark .compare-col li,.section--areas .compare-col li{color:rgba(255,255,255,.84)}
.section--dark .compare-col--do,.section--areas .compare-col--do{border-top-color:var(--crimson)}
.section--dark .compare-col--do li::before,.section--areas .compare-col--do li::before{background:var(--ember)}
.section--dark .compare-col--dont,.section--areas .compare-col--dont{
  background:rgba(255,255,255,.02);border-top-color:rgba(255,255,255,.38);
}
.section--dark .compare-col--dont li::before,.section--areas .compare-col--dont li::before{
  background:rgba(255,255,255,.5);
}

/* Any genuinely white card dropped on a dark section keeps dark text */
.section--dark .card,.section--areas .card,
.section--dark .brandcard,.section--areas .brandcard{color:var(--slate)}
.section--dark .card h3,.section--areas .card h3,
.section--dark .card h3 a,.section--areas .card h3 a,
.section--dark .brandcard h3,.section--areas .brandcard h3{color:var(--ink)}
.section--dark .card p,.section--areas .card p{color:var(--slate)}
.section--dark .brandcard p,.section--areas .brandcard p{color:var(--slate)}

/* Fact grids and checklists inherit, so keep them explicit too */
.section--dark .fact p,.section--areas .fact p{color:rgba(255,255,255,.8)}
.section--dark .checks li,.section--areas .checks li{color:rgba(255,255,255,.84)}


/* ---------- Typography polish and reading comfort ---------- */
/* Cap the measure so full-width sections never run to 120 characters */
p,li{max-width:76ch}
.wrap > p,.wrap > .lede,.section--dark > .wrap > p{max-width:70ch}
.narrow p,.narrow li{max-width:none}
.card p,.fact p,.seq p,.compare-col li,.panel li,.chips li,
.footer p,.footer li,.trust p,.stat-lbl,.dtable td,.dtable th{max-width:none}

/* Headings break sensibly instead of leaving one orphan word */
h1,h2{text-wrap:balance}
h3,h4,.lede{text-wrap:pretty}

/* Vertical rhythm: more air above a heading than below it */
h2:not(:first-child){margin-top:2.1rem}
h3:not(:first-child){margin-top:1.6rem}
.split h2:first-child,.narrow h2:first-child,.wrap > h2:first-child,
.eyebrow + h1,.eyebrow + h2,.eyebrow + h3{margin-top:0}
.seq h3,.fact h3,.card h3,.panel h3,.compare-col h3,.county-head h3,.note h3{margin-top:0}

/* Lists: tighter leading between items, clearer indent */
ul,ol{padding-left:1.15em}
li{margin-bottom:.42em;line-height:1.62}
.checks li,.panel li,.compare-col li{margin-bottom:.55em}

/* Body links: readable underline rather than a bare color change */
.section p a,.narrow p a,.faq p a,.note p a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(179,18,30,.42);
}
.section p a:hover,.narrow p a:hover,.faq p a:hover{text-decoration-color:var(--crimson)}
.section--dark p a{text-decoration-color:rgba(226,58,69,.55)}

/* FAQ: bigger hit area and calmer open state */
.faq details{padding:1.25rem 0}
.faq summary{gap:2rem;line-height:1.45;padding-right:.25rem}
.faq details[open]{padding-bottom:1.5rem}
.faq details[open] summary{color:var(--crimson)}
.faq details > *:not(summary){max-width:74ch}

/* Tables: quieter rules, clearer rhythm */
.dtable th,.dtable td{padding:.9rem 1rem;line-height:1.55}
.dtable thead th{padding-top:.8rem;padding-bottom:.8rem}

/* Eyebrow sits closer to the heading it labels */
.eyebrow{margin-bottom:.7rem}

/* Small-screen reading comfort */
@media (max-width:640px){
  body{font-size:1.02rem;line-height:1.66}
  .lede{font-size:1.08rem}
  h2:not(:first-child){margin-top:1.7rem}
}


/* ---------- Grid safety: never leave a half-empty row ---------- */
/* If a grid is short of a full row, remaining items stretch to fill the width */
.factgrid{grid-auto-flow:row dense}
.factgrid > .fact{min-width:0}

/* Two-up fact cards read better with a little more room */
.factgrid.cols-2 .fact{padding-top:1.35rem}
.factgrid.cols-2 .fact h3{font-size:1.12rem}
.factgrid.cols-2 .fact p{font-size:1rem}

/* ---------- Keyline callout: breaks up long prose runs ---------- */
.keyline{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:2.2rem 0}
.keyline div{
  position:relative;background:var(--bone);border:1px solid var(--line-dark);
  border-left:4px solid var(--crimson);padding:1.4rem 1.5rem;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.keyline div:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,11,13,.1)}
.keyline dt{
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--crimson);margin-bottom:.6rem;
  padding-bottom:.6rem;border-bottom:1px solid rgba(179,18,30,.22);
}
.keyline dd{margin:0;font-size:1rem;line-height:1.58;color:var(--slate)}

/* on white sections the tinted fill reads best; on bone, invert to white */
.section--bone .keyline div{background:#fff}

/* dark surfaces */
.section--dark .keyline div,.section--areas .keyline div{
  background:rgba(255,255,255,.045);border-color:var(--line);border-left-color:var(--crimson);
}
.section--dark .keyline div:hover,.section--areas .keyline div:hover{
  box-shadow:0 12px 26px rgba(0,0,0,.4);border-color:rgba(255,255,255,.22);
  border-left-color:var(--crimson);
}
.section--dark .keyline dt,.section--areas .keyline dt{
  color:var(--ember);border-bottom-color:rgba(226,58,69,.3);
}
.section--dark .keyline dd,.section--areas .keyline dd{color:rgba(255,255,255,.84)}

@media (max-width:820px){
  .keyline{grid-template-columns:1fr;gap:1rem}
}


/* ---------- Formatting refinements ---------- */
/* Cards: equal height with the link locked to the bottom edge */
.card{display:flex;flex-direction:column}
.card p{flex:0 1 auto}
.card .more{margin-top:auto;padding-top:.4rem}

/* Anchored sections clear the sticky header instead of hiding under it */
:target,[id]{scroll-margin-top:96px}

/* Long strings (emails, URLs) wrap instead of overflowing their column */
a,p,li,dd,td{overflow-wrap:break-word}
body{hyphens:none}

/* Tables scroll rather than squash on small screens */
.dtable{display:table}
@media (max-width:640px){
  .dtable{display:block;overflow-x:auto;white-space:normal;-webkit-overflow-scrolling:touch}
  .dtable tbody th{width:auto;min-width:9rem}
}

/* Hero meta reads as discrete facts, not a run-on line */
.hero-meta span{position:relative;padding-right:1.9rem}
.hero-meta span::after{
  content:"";position:absolute;right:.85rem;top:50%;transform:translateY(-50%);
  width:4px;height:4px;background:var(--crimson);border-radius:50%;
}
.hero-meta span:last-child{padding-right:0}
.hero-meta span:last-child::after{display:none}

/* Figure captions sit quietly under their image */
.ph figcaption{opacity:.6;font-size:.63rem}

/* Consistent spacing where a component follows body copy */
.keyline + p,.dtable + p,.factgrid + p,.compare + p,.ph-pair + p{margin-top:1.6rem}
p + .keyline,p + .factgrid,p + .compare{margin-top:1.8rem}

/* Slightly calmer FAQ rhythm now that it closes every page */
.faq details:last-child{border-bottom:0}
.faq{border-top-color:var(--line-dark)}

/* Print: give them something usable if a family prints the page */
@media print{
  .header,.topbar,.callbar,.cta,.hero-actions,.pv-bar,.pv-panel{display:none!important}
  body{color:#000;background:#fff;font-size:11pt}
  .section{padding:12pt 0}
  .panel,.section--dark,.section--areas{background:#fff!important;color:#000!important}
  .panel h3,.section--dark h2,.section--dark h3{color:#000!important}
  a{color:#000;text-decoration:underline}
}


/* ============================================================
   No horizontal scroll, full-width on mobile
   ============================================================ */

/* overflow-x:clip contains overflow WITHOUT breaking position:sticky,
   which overflow-x:hidden on an ancestor would do. */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%;width:100%;position:relative}
@supports not (overflow:clip){
  html,body{overflow-x:hidden}
}

/* Nothing may exceed its container */
img,svg,video,iframe,table,pre,code{max-width:100%}
.section,.hero,.footer,.statband,.trust,.cta,.faq{max-width:100%}
/* keep the centered content column (a block can never exceed the viewport anyway) */
.wrap{max-width:var(--wrap);margin-left:auto;margin-right:auto}

/* Grid and flex children default to min-width:auto, which lets long
   content push a track wider than the viewport. This is the usual cause. */
.grid-2 > *,.grid-3 > *,.split > *,.factgrid > *,.compare > *,
.areas-grid > *,.footer-grid > *,.statband .grid > *,.trust .grid > *,
.ph-pair > *,.ph-row > *,.keyline > *,.form > *,
.header .wrap > *,.topbar .wrap > *,.footer-band-inner > *,
.inline-cta > *,.areas-note > *,.hero-actions > *{min-width:0}

/* Header: the tagline was locked to one line and could push the bar wide */
@media (max-width:560px){
  .brand-sub{white-space:normal}
  .brand-name{font-size:.92rem}
  .header .wrap{gap:.6rem}
}
@media (max-width:380px){
  .brand-sub{display:none}
}

/* Tables scroll inside their own box from tablet down */
@media (max-width:820px){
  .dtable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .dtable tbody th{width:auto;min-width:8.5rem}
}

/* Decorative art must never create scrollable width */
.hero{overflow:hidden}
.hero-shield{max-width:60%}
.section--areas,.section--dark{overflow:hidden}

/* Use the full screen width on phones: tighter gutters, nothing letterboxed */
@media (max-width:560px){
  :root{--pad:16px}
  .wrap{width:100%;padding-left:var(--pad);padding-right:var(--pad)}
  .ph-band figcaption{padding-left:var(--pad);padding-right:var(--pad)}
  .hero{padding-top:44px;padding-bottom:40px}
  .county{padding:1.5rem 1.2rem}
  .compare-col,.panel,.note,.inline-cta{padding-left:1.2rem;padding-right:1.2rem}
  .cta{padding-left:0;padding-right:0}
}

/* Long unbroken tokens (emails, URLs) cannot widen a column */
a[href^="mailto:"],a[href^="http"],.fc-label + a,.urlbar{
  overflow-wrap:anywhere;word-break:break-word;
}


/* ---------- Section joins ---------- */
/* Two sections sharing a background should read as one block,
   not two with a double gap between them. */
.section:not(.section--bone):not(.section--dark):not(.section--areas)
  + .section:not(.section--bone):not(.section--dark):not(.section--areas){padding-top:0}
.section--bone + .section--bone{padding-top:0}
.section--dark + .section--dark{padding-top:0}

/* Dark band meeting the service-area band: one seam, not two paddings */
.section--dark + .section--areas{
  padding-top:calc(var(--sect) * .6);
  border-top:1px solid rgba(255,255,255,.1);
}

/* Footer legal bar: even spacing, no stray rule above the parent-company line */
.footer-legal-top{align-items:baseline}
.footer-parent{margin:0}
@media (max-width:700px){
  .footer-legal-top{gap:.35rem}
}


/* CTA band on the deeper red */
.cta .btn--ghost{border-color:rgba(255,255,255,.7)}
.cta .btn--ghost:hover{background:#fff;color:var(--crimson-deep);border-color:#fff}
.cta .phone:hover{color:#fff;opacity:.82}


/* ---------- Button text must win over section link colours ----------
   .section--dark a and .footer a are (0,1,1) and were overriding
   .btn--red (0,1,0), rendering button labels red-on-red.
   Doubling the class gives (0,2,0) so the button always wins.        */
.btn.btn--red,.btn.btn--red:hover,.btn.btn--red:focus,.btn.btn--red:visited{color:#fff}
.btn.btn--dark,.btn.btn--dark:hover,.btn.btn--dark:focus{color:#fff}
.btn.btn--ghost,.btn.btn--ghost:focus{color:#fff}
.btn.btn--ghost:hover{color:var(--ink)}
.cta .btn.btn--ghost:hover{color:var(--crimson-deep)}
.btn:hover{text-decoration:none}

/* buttons never inherit the body-link underline treatment */
.section p a.btn,.narrow p a.btn,.footer a.btn,.section--dark a.btn{text-decoration:none}

/* ---------- Spacing between stacked components ---------- */
.factgrid + .pullquote,.compare + .pullquote,.dtable + .pullquote,
.keyline + .pullquote,.grid-3 + .pullquote,.grid-2 + .pullquote,
.split + .pullquote{margin-top:2.6rem}
.pullquote + .split,.pullquote + .factgrid,.pullquote + .keyline,
.pullquote + .compare,.pullquote + .grid-3,.pullquote + .dtable{margin-top:2.2rem}
.pullquote + p{margin-top:1.5rem}
.factgrid + .factgrid,.keyline + .keyline{margin-top:1.4rem}

@media (max-width:640px){
  .hero .lede{font-size:1.09rem}
  .hero-sub{font-size:.96rem;padding-left:.9rem}
}


/* ---------- Homepage hero shield ---------- */
.hero-shield{
  position:absolute;left:calc(75% + 15px);top:46%;
  transform:translate(-50%,-50%);
  height:290px;max-height:56%;width:auto;opacity:.95;z-index:0;
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.55));
}
@media (max-width:1320px){.hero-shield{height:250px;left:calc(76% + 10px)}}
@media (max-width:1180px){.hero-shield{height:215px;left:79%}}
@media (max-width:1080px){.hero-shield{opacity:.13;left:86%;height:300px}}
@media (max-width:700px){.hero-shield{display:none}}

/* ---------- In-page photography ---------- */
/* Images are never cropped: height is auto so the whole frame is visible. */
.photo{position:relative;margin:0}
.photo img{
  width:100%;height:auto;display:block;position:relative;z-index:1;
  border:1px solid rgba(255,255,255,.14);
}
/* corner brackets echo the brand mark and tie the photo to the page */
.photo::before,.photo::after{
  content:"";position:absolute;width:52px;height:52px;z-index:2;pointer-events:none;
}
.photo::before{top:-9px;left:-9px;border-top:3px solid var(--crimson);border-left:3px solid var(--crimson)}
.photo::after{bottom:-9px;right:-9px;border-bottom:3px solid var(--crimson);border-right:3px solid var(--crimson)}
.photo figcaption{
  font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);margin-top:1rem;line-height:1.6;
  padding-left:.9rem;border-left:2px solid var(--crimson);
}
.section--dark .photo figcaption,.section--areas .photo figcaption,
.section--bone .photo img,.section .photo img{border-color:var(--line-dark)}

/* Full-width feature: dark backdrop with the same dot texture used elsewhere */
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem}
.photo-lead{max-width:820px;margin:0 auto}
@media (max-width:820px){
  .photo-pair{grid-template-columns:1fr;gap:2.4rem}
  .photo::before,.photo::after{width:34px;height:34px}
}


/* Feature meeting another dark band: one seam, not two stacked paddings */
/* keep the corner brackets inside the viewport on narrow screens */
@media (max-width:560px){
  .photo::before,.photo::after{width:26px;height:26px}
  .photo::before{top:-5px;left:-5px}
  .photo::after{bottom:-5px;right:-5px}
}


/* ============================================================
   Photo layout variants: one treatment per page
   ============================================================ */

/* CARD - standalone photo: image flush to the frame, caption as a footer bar */
.photo-card{
  max-width:none;margin:0;background:#fff;padding:0;overflow:hidden;
  border:1px solid var(--line-dark);border-top:4px solid var(--crimson);
  box-shadow:0 14px 34px rgba(11,11,13,.09);
}
.photo-card::before,.photo-card::after{display:none}
.photo-card img{border:0;display:block;width:100%;height:auto}
.photo-card figcaption{
  margin:0;border:0;padding:.95rem 1.2rem;
  background:var(--bone);border-top:1px solid var(--line-dark);
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);opacity:1;line-height:1.5;
  display:flex;align-items:center;gap:.75rem;
}
.photo-card figcaption::before{content:"";flex:none;width:3px;height:1.05em;background:var(--crimson)}
.section--dark .photo-card,.section--areas .photo-card{
  background:rgba(255,255,255,.05);border-color:var(--line);
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}
.section--dark .photo-card figcaption,.section--areas .photo-card figcaption{
  background:rgba(255,255,255,.06);border-top-color:var(--line);color:rgba(255,255,255,.72);
}
@media (max-width:560px){.photo-card figcaption{padding:.85rem 1rem;font-size:.63rem}}

/* MEDIA CONTAINERS - the photo lives inside the content block itself,
   flush to its edges, with the heading and copy beneath it. */
.panel--media{padding:0;overflow:hidden}
.panel--media > img{display:block;width:100%;height:auto;border:0}
.panel--media .panel-body{padding:1.9rem 1.8rem}
.panel--media .panel-body > :first-child{margin-top:0}
.panel--media .panel-cap{
  display:flex;align-items:center;gap:.75rem;margin:0;padding:.9rem 1.8rem;
  background:rgba(255,255,255,.06);border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.66);line-height:1.5;
}
.panel--media .panel-cap::before{content:"";flex:none;width:3px;height:1.05em;background:var(--crimson)}

.card--media{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--media > img{display:block;width:100%;height:auto;border:0}
.card--media .card-body{padding:1.7rem 1.6rem}
.card--media .card-body > :first-child{margin-top:0}
.card--media .card-body h3{margin-bottom:.5rem}
.card--media .card-cap{
  display:flex;align-items:center;gap:.7rem;margin:0;padding:.85rem 1.6rem;
  background:var(--bone);border-bottom:1px solid var(--line-dark);
  font-family:var(--display);font-size:.65rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);line-height:1.5;
}
.card--media .card-cap::before{content:"";flex:none;width:3px;height:1.05em;background:var(--crimson)}
@media (max-width:560px){
  .panel--media .panel-body{padding:1.5rem 1.2rem}
  .panel--media .panel-cap,.card--media .card-cap{padding-left:1.2rem;padding-right:1.2rem}
}

/* stacked pair inside one column */
.photo-stack{display:grid;gap:1.6rem}

@media (max-width:820px){
}


/* ============================================================
   Hero photography (service and contact pages only)
   ============================================================ */
.hero-media{position:absolute;top:0;right:0;bottom:0;width:62%;z-index:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center right;display:block}
/* shifts the visible crop toward the lower part of the frame */
.hero-media--low img{object-position:right 95%}
/* shifts the visible crop upward so tall subjects are not decapitated */
.hero-media--high img{object-position:right 20%}
/* fades the photograph into the panel the copy sits on */
.hero-media::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:
    linear-gradient(90deg,
      var(--ink) 0%,
      rgba(11,11,13,.96) 16%,
      rgba(11,11,13,.6) 44%,
      rgba(11,11,13,.22) 74%,
      rgba(11,11,13,.45) 100%),
    linear-gradient(180deg,
      rgba(11,11,13,.4) 0%,
      rgba(11,11,13,0) 38%,
      rgba(11,11,13,.5) 100%);
}
.hero-media::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;
  background:radial-gradient(80% 100% at 88% 18%,rgba(179,18,30,.24) 0%,rgba(179,18,30,0) 62%);
  mix-blend-mode:screen;pointer-events:none;
}
.hero .wrap{position:relative;z-index:2}
@media (max-width:1180px){.hero-media{width:70%}}
@media (max-width:820px){
  .hero-media{width:100%}
  .hero-media img{object-position:center}
  .hero-media--low img{object-position:center 88%}
  .hero-media--high img{object-position:center 22%}
  .hero-media::after{
    background:linear-gradient(180deg,rgba(11,11,13,.9) 0%,rgba(11,11,13,.94) 55%,rgba(11,11,13,.97) 100%);
  }
  .hero-media::before{opacity:.5}
}