/* ==========================================================================
   TYPEFACES  —  Barlow + Barlow Condensed, SIL Open Font License
   Self-hosted, latin subset, woff2 only. Nothing is fetched from a third party:
   no render-blocking external request, and no font CDN told who visited the site.
   Licence ships at /assets/fonts/OFL.txt.
   ========================================================================== */
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/barlow-400.b0a8ad37ac.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/barlow-500.cd759df8ef.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/barlow-700.2d797dd8b3.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/barlow-condensed-600.215a93c696.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/barlow-condensed-700.3787a5a419.woff2) format('woff2')}
@font-face{font-family:Oswald;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/oswald-500.571f3457da.woff2) format('woff2')}
@font-face{font-family:Oswald;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/oswald-600.571f3457da.woff2) format('woff2')}
@font-face{font-family:Oswald;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/oswald-700.571f3457da.woff2) format('woff2')}

/* ==========================================================================
   Red Hammer Roofing — site.css
   Layout system modelled on the supplied reference screenshot.
   No external requests. Fonts are self-hosted (see the @font-face block above).
   Single stylesheet (Phase 1.1).
   ========================================================================== */

:root{
  --navy-900:#0A1526;
  --navy-800:#0F1C31;
  --navy-700:#16253D;
  --navy-600:#1E3050;
  /* Accent moved from red to the reference site's amber-orange. The variable names stay
     --red-* so every existing rule keeps working; only the values changed. The brand mark
     itself is still red, which is deliberate: the company is called Red Hammer. */
  --red-600:#F5A623;
  --red-700:#DE8E0E;
  --red-050:#FEF3E0;
  --brand-red:#DF2E24;
  --amber-ink:#3A2A08;
  --ink:#16213A;
  --body:#5A6579;
  --muted:#8A93A3;
  --line:#E4E8EE;
  --line-soft:#EEF1F5;
  --bg:#F5F7F9;
  --white:#FFFFFF;
  --ok:#1B8F62;
  --warn:#B7791F;

  --wrap:1180px;
  --gap:24px;
  --r:10px;
  --r-lg:14px;
  --shadow-sm:0 1px 2px rgba(16,28,49,.06),0 1px 3px rgba(16,28,49,.05);
  --shadow-md:0 4px 16px rgba(16,28,49,.08);
  --shadow-lg:0 18px 48px rgba(10,21,38,.18);

  --sans:Barlow,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:Oswald,"Barlow Condensed",Barlow,"Arial Narrow",-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;font-family:var(--sans);color:var(--body);
  font-size:16px;line-height:1.65;background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe{max-width:100%}
img{height:auto;display:block}
a{color:var(--red-600);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--red-600);outline-offset:2px;border-radius:3px}

h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;line-height:1.15;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.1rem,4.6vw,3.35rem);letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,3.1vw,2.45rem)}
h3{font-size:1.14rem;letter-spacing:-.01em;font-weight:700}
h4{font-size:1rem;font-weight:700}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:700}
small{font-size:.82rem}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.section{padding:88px 0}
.section--tight{padding:62px 0}
.section--bg{background:var(--bg)}
.section--dark{background:var(--navy-900);color:#B9C4D4}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--line{border-top:1px solid var(--line)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border-radius:6px}

/* ---------- shared bits ---------- */
.eyebrow{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-600);margin:0 0 14px;
}
.section--dark .eyebrow{color:#FF6B5F}
.lede{font-size:1.05rem;max-width:60ch}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.sec-head{max-width:660px;margin:0 auto 46px}
.sec-head p{color:var(--body)}

.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  background:var(--red-600);color:#fff;font-weight:700;font-size:.94rem;
  padding:14px 26px;border-radius:8px;border:0;cursor:pointer;
  transition:background .18s ease,transform .18s ease;text-decoration:none;line-height:1;
}
.btn:hover{background:var(--red-700);text-decoration:none;transform:translateY(-1px)}
.btn--ghost{background:transparent;border:1.5px solid rgba(255,255,255,.28);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.09)}
.btn--line{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn--line:hover{background:var(--bg);border-color:#CFD6E0}
.btn--sm{padding:11px 20px;font-size:.87rem}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}

.link-more{
  font-size:.86rem;font-weight:700;color:var(--red-600);
  display:inline-flex;align-items:center;gap:6px;
}
.link-more:hover{text-decoration:none;gap:9px}

/* ---------- utility bar ---------- */
.util{background:var(--navy-900);color:#96A3B6;font-size:.775rem}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:38px;flex-wrap:wrap}
.util-l,.util-r{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.util a{color:#C9D3E0;display:inline-flex;align-items:center;gap:7px}
.util a:hover{color:#fff;text-decoration:none}
.util .phone{background:var(--red-600);color:#fff;padding:9px 15px;font-weight:700;border-radius:0}
.util .phone:hover{background:var(--red-700)}
.util .dot{width:5px;height:5px;border-radius:50%;background:#3D4C63}
.util-item{display:inline-flex;align-items:center;gap:7px}
@media(max-width:900px){.util-r{display:none}}

/* ---------- header ---------- */
.hdr{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.hdr .wrap{display:flex;align-items:center;gap:26px;min-height:76px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand:hover{text-decoration:none}
.brand-mark{width:38px;height:38px;flex-shrink:0}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-size:1.06rem;font-weight:900;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
.brand-sub{font-size:.56rem;font-weight:700;letter-spacing:.34em;color:var(--muted);text-transform:uppercase;margin-top:4px}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  color:#3E4A60;font-size:.9rem;font-weight:600;padding:9px 13px;border-radius:6px;
}
.nav a:hover{color:var(--red-600);text-decoration:none;background:var(--bg)}
.nav a[aria-current="page"]{color:var(--red-600)}
.hdr .btn{margin-left:14px}
.navtoggle{display:none;background:none;border:1.5px solid var(--line);border-radius:7px;padding:9px 11px;margin-left:auto;cursor:pointer}
.navtoggle span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px}
.navtoggle span+span{margin-top:4px}
@media(max-width:1000px){
  .nav{
    position:fixed;inset:114px 0 auto;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:10px 22px 26px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);display:none;margin-left:0;max-height:calc(100vh - 114px);overflow:auto;
  }
  .nav[data-open="true"]{display:flex}
  .nav a{padding:13px 4px;border-bottom:1px solid var(--line-soft);border-radius:0}
  .hdr .btn{margin:14px 0 0;width:100%}
  .navtoggle{display:block}
  .hdr .wrap{min-height:66px}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy-900);color:#C3CEDC;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 88% 8%,rgba(223,46,36,.36) 0%,rgba(223,46,36,0) 58%),
    radial-gradient(90% 120% at 4% 100%,rgba(30,48,80,.9) 0%,rgba(10,21,38,0) 60%),
    linear-gradient(112deg,#0A1526 0%,#132644 52%,#0C1A2E 100%);
  background-color:var(--navy-900);
}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent 78%);
          mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent 78%);
}
.hero .wrap{position:relative;z-index:2;padding-top:74px;padding-bottom:78px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:52px;align-items:start}
.hero h1{color:#fff}
.hero h1 .accent{color:var(--red-600)}
.hero-lede{color:#AEBCCD;font-size:1.02rem;max-width:52ch;margin-bottom:22px}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 15px;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;color:#D6DFEA;margin-bottom:24px;
  text-transform:uppercase;
}
.hero-badge .pip{width:6px;height:6px;border-radius:50%;background:var(--red-600)}

.trustrow{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px;padding:0;list-style:none}
.trustrow li{
  font-size:.71rem;font-weight:700;color:#B7C4D4;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:7px 11px;letter-spacing:.02em;
}

/* choose-your-path cards */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.path{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);padding:20px;transition:border-color .2s,background .2s;
  display:block;color:inherit;
}
.path:hover{background:rgba(255,255,255,.09);border-color:rgba(223,46,36,.55);text-decoration:none}
.path-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.path-ico{
  width:38px;height:38px;border-radius:9px;background:rgba(223,46,36,.16);
  display:grid;place-items:center;color:var(--red-600);
}
.path-arw{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#C3CEDC;font-size:.8rem}
.path-kicker{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:#8B9AAE;font-weight:800;display:block;margin-bottom:5px}
.path h3{color:#fff;font-size:1.08rem;margin:0 0 12px}
.path-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.path-tags li{font-size:.68rem;color:#9DACC0;background:rgba(255,255,255,.06);border-radius:4px;padding:4px 8px}

/* hero form card */
.formcard{
  background:rgba(13,25,44,.86);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-lg);
  backdrop-filter:blur(6px);
}
.formcard h2{font-size:1.28rem;color:#fff;margin-bottom:6px;letter-spacing:-.02em}
.formcard .sub{font-size:.84rem;color:#9EACC0;margin-bottom:16px}
.formcard .fine{font-size:.7rem;color:#7C8AA0;margin-top:14px;line-height:1.55}

.leadform{border-radius:8px;overflow-x:auto;background:#fff;max-width:100%;-webkit-overflow-scrolling:touch}
.leadform iframe{display:block;width:100%;max-width:100%;min-width:0;height:545px;border:0}

@media(max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .formcard{max-width:600px}
}
@media(max-width:560px){
  .paths{grid-template-columns:1fr}
  .hero .wrap{padding-top:48px;padding-bottom:52px}
}

/* ---------- split (who we are) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.split--top{align-items:start}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:40px}}

.figgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}
.figgrid figure{margin:0}
.ph{
  position:relative;border-radius:var(--r);overflow:hidden;background:#DDE3EB;
  display:grid;place-items:center;text-align:center;
}
.ph svg{display:block;width:100%;height:auto}
.ph-tag{
  position:absolute;left:9px;bottom:9px;background:rgba(10,21,38,.82);color:#F2C94C;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;padding:4px 8px;border-radius:4px;
  text-transform:uppercase;
}
.floatstat{
  position:absolute;right:-14px;top:-16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:12px 16px;box-shadow:var(--shadow-md);text-align:center;
}
.floatstat b{display:block;color:var(--red-600);font-size:1.15rem;font-weight:900;line-height:1}
.floatstat span{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
@media(max-width:640px){.floatstat{display:none}}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;padding-top:38px;border-top:1px solid var(--line)}
.stat b{display:block;font-size:2.05rem;font-weight:900;color:var(--red-600);line-height:1;letter-spacing:-.03em}
.stat span{display:block;font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-top:9px}
.stat small{display:block;font-size:.74rem;color:var(--body);margin-top:7px;line-height:1.5}
@media(max-width:760px){.stats{grid-template-columns:1fr;gap:22px}}

/* ---------- card grids ---------- */
.grid{display:grid;gap:var(--gap)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
  display:flex;flex-direction:column;
}
.card:hover{border-color:#CFD8E4;box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card h3{margin-bottom:9px}
.card p{font-size:.9rem;margin-bottom:16px}
.card .link-more{margin-top:auto}
.card-ico{
  width:42px;height:42px;border-radius:9px;background:var(--red-050);color:var(--red-600);
  display:grid;place-items:center;margin-bottom:18px;
}
.card--flat:hover{transform:none;box-shadow:none;border-color:var(--line)}
a.card{color:inherit}
a.card:hover{text-decoration:none}

/* feature list (why pick us) */
.featlist{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;list-style:none;margin:0;padding:0}
.featlist li{display:flex;gap:13px}
.featlist .ic{
  flex-shrink:0;width:30px;height:30px;border-radius:7px;background:var(--red-050);
  color:var(--red-600);display:grid;place-items:center;
}
.featlist h4{margin:1px 0 5px;font-size:.95rem}
.featlist p{font-size:.85rem;margin:0}
@media(max-width:760px){.featlist{grid-template-columns:1fr}}

/* checklist pills */
.pillgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pill{
  display:flex;align-items:flex-start;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:14px 16px;font-size:.87rem;color:var(--ink);font-weight:600;line-height:1.45;
}
.pill .ic{flex-shrink:0;width:18px;height:18px;color:var(--ok);margin-top:1px}
.pill--no .ic{color:var(--red-600)}
@media(max-width:760px){.pillgrid{grid-template-columns:1fr}}

/* ---------- projects (dark) ---------- */
.dark-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:38px;flex-wrap:wrap}
.dark-head p{color:#8FA0B6;max-width:46ch;margin:0}
.proj{border-radius:var(--r);overflow:hidden;background:var(--navy-700);position:relative}
.proj .cap{padding:14px 16px;background:var(--navy-700)}
.proj .cap b{display:block;color:#fff;font-size:.88rem;font-weight:700}
.proj .cap span{font-size:.72rem;color:#7F92AB}
.proj .flag{
  position:absolute;top:10px;left:10px;background:#F2C94C;color:#3A2E00;font-size:.58rem;
  font-weight:900;letter-spacing:.07em;text-transform:uppercase;padding:4px 8px;border-radius:4px;
}

/* ---------- source strip ---------- */
.sources{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.src{padding:22px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.src b{display:block;font-size:.86rem;color:var(--ink);font-weight:800;margin-bottom:5px}
.src span{display:block;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
@media(max-width:940px){.sources{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.sources{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);background:#fff}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 46px 19px 20px;position:relative;
  font-weight:700;color:var(--ink);font-size:.95rem;line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  color:var(--red-600);font-size:1.3rem;font-weight:400;line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--red-600)}
.faq .ans{padding:0 20px 21px;font-size:.9rem}
.faq .ans p:first-child{color:var(--ink);font-weight:600}

/* ---------- badge strip ---------- */
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.badges li{list-style:none;font-size:.76rem;font-weight:700;color:#48566D;display:flex;align-items:center;gap:8px}
.badges .ic{color:var(--red-600);width:15px;height:15px}

/* ---------- CTA band ---------- */
.cta{position:relative;background:var(--navy-900);overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 130% at 88% 50%,rgba(223,46,36,.4) 0%,rgba(223,46,36,0) 62%);
}
.cta .wrap{position:relative;z-index:2}
.cta h2{color:#fff;max-width:16ch}
.cta h2 .accent{color:var(--red-600)}
.cta p{color:#A3B2C6;max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.cta-phone{color:#fff;font-weight:800;font-size:1.02rem;display:inline-flex;align-items:center;gap:9px}
.cta-phone:hover{color:var(--red-600);text-decoration:none}

/* ---------- footer ---------- */
.ftr{background:var(--navy-900);color:#93A2B7;padding:64px 0 0;font-size:.87rem}
.ftr h4{color:#fff;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 18px;font-weight:800}
.ftr a{color:#93A2B7}
.ftr a:hover{color:#fff;text-decoration:none}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px}
.ftr-brand .brand-name{color:#fff}
.ftr-brand .brand-sub{color:#6A7B93}
.ftr-tag{color:var(--red-600);font-weight:700;font-size:.83rem;margin:20px 0 12px}
.ftr-brand p{font-size:.83rem;line-height:1.7}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:10px}
.ftr .contact li{display:flex;gap:10px;align-items:flex-start;line-height:1.55}
.ftr .contact .ic{color:var(--red-600);flex-shrink:0;margin-top:3px;width:15px;height:15px}
.ftr-note{
  margin-top:22px;padding:14px 16px;border:1px solid rgba(255,255,255,.12);
  border-radius:8px;font-size:.76rem;line-height:1.6;color:#8496AE;
}
.ftr-bot{
  margin-top:52px;border-top:1px solid rgba(255,255,255,.1);padding:20px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;
}
.ftr-bot ul{display:flex;gap:20px;flex-wrap:wrap}
.ftr-bot li{margin:0}
@media(max-width:940px){.ftr-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}}

/* ---------- inner page furniture ---------- */
.pagehead{background:var(--navy-900);color:#AEBCCD;padding:52px 0 56px;position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 92% 0%,rgba(223,46,36,.3) 0%,rgba(223,46,36,0) 60%)}
.pagehead .wrap{position:relative;z-index:2}
.pagehead h1{color:#fff;max-width:20ch;margin-bottom:16px}
.pagehead h1 .accent{color:var(--red-600)}
.pagehead .lede{color:#A9B8CA;font-size:1.02rem}
.crumbs{font-size:.76rem;color:#7D8DA4;margin-bottom:20px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs a{color:#A9B8CA}
.crumbs li+li::before{content:"/";margin-right:8px;color:#4C5C74}

.prose{max-width:none}
.prose h2{margin-top:0}
.prose h3{margin-top:32px}
.prose>*+h2{margin-top:52px}
.prose ul,.prose ol{padding-left:20px;margin:0 0 1.1em}
.prose li{margin-bottom:8px}
.prose table{width:100%;border-collapse:collapse;font-size:.88rem;margin:0 0 1.4em;background:#fff}
.prose th,.prose td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.prose th{background:var(--bg);font-weight:800;color:var(--ink);font-size:.8rem;letter-spacing:.03em;text-transform:uppercase}
.prose td b{color:var(--ink)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
@media(max-width:1000px){.layout{grid-template-columns:1fr;gap:44px}}
.rail{position:sticky;top:100px;display:grid;gap:18px}
@media(max-width:1000px){.rail{position:static}}
.railcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.railcard h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.railcard ul{list-style:none;margin:0;padding:0}
.railcard li{margin-bottom:9px;font-size:.88rem}
.railcard li:last-child{margin-bottom:0}
.railcard a{color:#3E4A60;font-weight:600}
.railcard a:hover{color:var(--red-600);text-decoration:none}

.answer{
  background:var(--bg);border-left:3px solid var(--red-600);border-radius:0 10px 10px 0;
  padding:22px 24px;margin:0 0 34px;
}
.answer p{font-size:1rem;color:var(--ink);margin-bottom:0}
.answer p+p{margin-top:.9em}

.note{
  border:1px solid var(--line);border-left:3px solid var(--warn);background:#FFFCF5;
  border-radius:0 10px 10px 0;padding:18px 20px;font-size:.86rem;margin:0 0 26px;
}
.note b{display:block;margin-bottom:5px;color:var(--ink);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase}
.note--red{border-left-color:var(--red-600);background:#FFF7F6}
.note--ok{border-left-color:var(--ok);background:#F4FBF8}

.srcnote{font-size:.76rem;color:var(--muted);line-height:1.6;margin-top:14px}
.srcnote a{color:var(--muted);text-decoration:underline}
.srcnote a:hover{color:var(--red-600)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:.88rem;margin:0 0 26px}
.kv dt{font-weight:800;color:var(--ink)}
.kv dd{margin:0}

.updated{font-size:.75rem;color:var(--muted);letter-spacing:.04em}

/* two-col compliance panel */
.docols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:760px){.docols{grid-template-columns:1fr}}
.docol{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.docol h3{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.docol ul{list-style:none;margin:0;padding:0}
.docol li{display:flex;gap:11px;font-size:.89rem;margin-bottom:13px;line-height:1.55}
.docol li:last-child{margin-bottom:0}
.docol .ic{flex-shrink:0;width:17px;height:17px;margin-top:3px}
.docol--yes .ic{color:var(--ok)}
.docol--no .ic{color:var(--red-600)}

/* sticky mobile CTA */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--navy-900);border-top:1px solid rgba(255,255,255,.12);
  padding:9px 12px;gap:9px;
}
.stickybar a{flex:1;justify-content:center;padding:13px 12px;font-size:.88rem}
@media(max-width:760px){
  .stickybar{display:flex}
  body{padding-bottom:70px}
}

/* status banner for held pages */
.holdbar{background:#FFF7E8;border-bottom:1px solid #F0D9A8;color:#7A5A12;font-size:.78rem;padding:9px 0}
.holdbar b{color:#5A4208}

/* ---------- fixes ---------- */
.section--dark .note b,.section--dark .note{color:#C6D2E0}
.section--dark .note b{color:#fff}
.sources .src:nth-child(4n){border-right:0}
.sources .src:nth-last-child(-n+4){border-bottom:0}
@media(max-width:940px){
  .sources .src:nth-child(4n){border-right:1px solid var(--line)}
  .sources .src:nth-child(2n){border-right:0}
  .sources .src:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
  .sources .src:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:520px){
  .sources .src{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .sources .src:last-child{border-bottom:0!important}
}
q[data-prohibited]{
  quotes:"\201C" "\201D";font-style:italic;color:var(--red-700);
  background:#FFF3F2;padding:1px 3px;border-radius:3px;
}
.prose table q[data-prohibited]{background:none;padding:0}
.hero h1{max-width:16ch}
.pagehead h1{max-width:22ch}
.railcard .cta-phone{color:#fff;display:inline-flex}
.railcard .cta-phone:hover{color:var(--red-600)}
.ftr-note strong{color:#fff}
.cta h2{max-width:20ch}

/* ---------- quoted prohibited phrases (editorial, gate-exempt) ---------- */
q[data-prohibited]{
  font-style:italic;color:var(--ink);background:#FFF3F2;
  border-bottom:1px dashed rgba(223,46,36,.5);padding:1px 3px;border-radius:3px;
}
.section--dark q[data-prohibited]{background:rgba(223,46,36,.14);color:#E8EEF6}

/* ---------- source strip: kill doubled outer borders ---------- */
.sources .src:nth-child(4n){border-right:0}
.sources .src:nth-last-child(-n+4){border-bottom:0}
@media(max-width:940px){
  .sources .src:nth-child(4n){border-right:1px solid var(--line)}
  .sources .src:nth-child(2n){border-right:0}
  .sources .src:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
  .sources .src:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:520px){
  .sources .src{border-right:0}
  .sources .src:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .sources .src:last-child{border-bottom:0}
}

/* ---------- prose table wrapper for small screens ---------- */
.prose table{display:block;overflow-x:auto;white-space:normal}
@media(min-width:700px){.prose table{display:table}}

/* ---------- code in prose ---------- */
code{font-family:var(--mono);font-size:.86em;background:var(--bg);padding:2px 5px;border-radius:4px;color:var(--ink)}
.holdbar code{background:rgba(0,0,0,.06)}

/* ---------- caption ---------- */
.prose caption{caption-side:top}


/* grid/flex children must be allowed to shrink or the 600px lead iframe
   forces a horizontal scrollbar on the whole document */
.hero-grid>*,.split>*,.layout>*,.grid>*,.docols>*,.pillgrid>*,.figgrid>*{min-width:0}
.formcard{max-width:100%}
.prose table{display:block;overflow-x:auto;max-width:100%}
@media(min-width:761px){.prose table{display:table}}


/* ==========================================================================
   PHOTOGRAPHY
   Illustrative stock only. Project-evidence slots keep .ph placeholders — the
   .shot-tag marker below is what tells the two apart on the page.
   Every rule here assumes the <img> carries width/height, so the box is
   reserved before the bytes land and CLS stays at zero.
   ========================================================================== */
.shot-fr,.shot-wrap{position:relative;overflow:hidden;border-radius:var(--r);background:#DDE3EB}
/* height:auto by default so the inline aspect-ratio on the <img> governs; containers that
   impose their own ratio (.shotpair, .card-media, .hero-media) override to 100% + cover. */
.shot-wrap img,.shot-fr img{display:block;width:100%;height:auto}
.shotpair .shot-wrap img{height:100%;object-fit:cover}
.shot{margin:0}
.shot-cap{
  display:block;margin-top:9px;font-size:.78rem;line-height:1.5;color:var(--muted);
}
.shot-tag{
  position:absolute;left:9px;bottom:9px;background:rgba(10,21,38,.82);color:#C3CEDC;
  font-size:.58rem;font-weight:800;letter-spacing:.06em;padding:4px 8px;border-radius:4px;
  text-transform:uppercase;pointer-events:none;
}

/* hero: photograph sits behind the navy panel, not beside it */
/* The decorative gradient layer is dropped well back on a photo hero, or it washes the
   photograph out into a flat navy panel. */
.hero--photo::before{opacity:.15}
/* Measured against this photograph the scrim alone clears AA for large text (white 13.9:1,
   the red accent 3.0:1). The accent has almost no headroom at that figure, and the image
   behind it can change, so the headline carries its own shadow rather than depending on
   the gradient staying exactly as tuned. */
.hero--photo h1{text-shadow:0 2px 18px rgba(6,12,22,.62),0 1px 3px rgba(6,12,22,.5)}
.hero--photo .hero-lede,
.hero--photo .hero-badge{text-shadow:0 1px 10px rgba(6,12,22,.55)}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* lifts the roofline out of the shadows once the scrim is this light */
  filter:brightness(1.22) contrast(1.05) saturate(1.06);
}
/* Left-to-right scrim. The h1 and lede sit in the left column, so the left stays dark
   enough for white text; the right is roughly half its previous density so the house and
   roofline actually read as a photograph rather than a texture. */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(10,21,38,.82) 0%,
      rgba(10,21,38,.74) 42%,
      rgba(10,21,38,.58) 60%,
      rgba(10,21,38,.32) 82%,
      rgba(10,21,38,.20) 100%),
    linear-gradient(180deg,rgba(10,21,38,.22) 0%,rgba(10,21,38,0) 36%,rgba(10,21,38,.34) 100%);
}
@media(max-width:940px){
  /* Text spans the full width here, so the scrim has to carry the whole panel. */
  .hero-media::after{
    background:linear-gradient(180deg,rgba(10,21,38,.84) 0%,rgba(10,21,38,.90) 55%,rgba(10,21,38,.95) 100%);
  }
}

/* card thumbnails on the service grid */
.card-media{
  position:relative;margin:-22px -22px 16px;border-radius:var(--r) var(--r) 0 0;
  overflow:hidden;aspect-ratio:16/9;background:#DDE3EB;
}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card:hover .card-media img{transform:scale(1.03)}
.card-media img{transition:transform .35s ease}
@media (prefers-reduced-motion:reduce){.card-media img{transition:none}}

/* banner strip above an article or section */
.shot-band{position:relative;overflow:hidden;border-radius:var(--r-lg);margin-bottom:26px;background:#DDE3EB}
.shot-band img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:21/9}
@media(max-width:700px){.shot-band img{aspect-ratio:16/10}}

/* two-up illustrative pair */
.shotpair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.shotpair{grid-template-columns:1fr}}
.shotpair .shot-wrap{aspect-ratio:4/3}

/* credits table */
.credits{width:100%;border-collapse:collapse;font-size:.84rem}
.credits th,.credits td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.credits th{color:var(--ink);font-weight:700}
.credits td{color:var(--body);vertical-align:top}
.credits .thumb{width:104px}
.credits .thumb img{width:96px;height:64px;object-fit:cover;border-radius:6px;display:block}

/* ---------- phone-first CTA band ---------- */
.callband{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:var(--navy-800);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);
  padding:22px 26px;margin:26px 0;
}
.callband-txt{min-width:0}
.callband-txt b{display:block;color:#fff;font-size:1.06rem;line-height:1.35;margin-bottom:5px}
.callband-txt span{display:block;color:#AEBCCD;font-size:.87rem;line-height:1.6;max-width:62ch}
.btn--call{
  display:inline-flex;align-items:center;gap:11px;background:var(--red-600);color:#fff;
  padding:13px 22px;border-radius:var(--r);font-weight:800;white-space:nowrap;flex-shrink:0;
}
.btn--call:hover{background:var(--red-700)}
.callband-num{font-size:1.1rem;letter-spacing:.01em}
.callband-lbl{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;opacity:.82;
  border-left:1px solid rgba(255,255,255,.35);padding-left:11px;
}
@media(max-width:620px){
  .callband{padding:18px;gap:16px}
  .btn--call{width:100%;justify-content:center}
}


/* ==========================================================================
   REVAMP — display typography, brand lockup, phone-first conversion path
   Loaded last so it overrides the earlier base rules by cascade order.
   The single organising idea: on a roofing site the phone number is the
   product. It is the largest interactive element in the header, it repeats
   at every scroll depth, and nothing else is allowed to outweigh it.
   ========================================================================== */

/* ---------- display type ---------- */
h1,h2,.dsp{
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  text-transform:uppercase;line-height:1.02;
}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,3.9vw,3rem);margin-bottom:.42em}
h3{font-family:var(--display);font-weight:600;font-size:1.28rem;text-transform:none;letter-spacing:0}
h4{font-family:var(--display);font-weight:600;letter-spacing:.01em;text-transform:uppercase;font-size:.92rem}
.lede{font-size:1.1rem;line-height:1.6}
.eyebrow{font-family:var(--display);font-size:.82rem;letter-spacing:.2em;font-weight:700}

/* ---------- brand lockup ---------- */
.brand-mark{width:42px;height:42px;border-radius:10px}
.brand-name{
  font-family:var(--display);font-size:1.5rem;font-weight:700;
  letter-spacing:.005em;line-height:.94;text-transform:uppercase;
}
.brand-sub{
  display:flex;align-items:center;gap:8px;margin-top:3px;
  font-family:var(--display);font-size:.72rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--red-600);
}
.brand-sub i{
  font-style:normal;letter-spacing:.12em;color:var(--muted);
  padding-left:8px;border-left:1px solid var(--line);
}
.ftr .brand-name{color:#fff}
.ftr .brand-sub i{color:#7C8AA0;border-left-color:rgba(255,255,255,.16)}

/* ---------- header: the phone is the primary control ---------- */
.hdr .wrap{min-height:84px;gap:20px}
.nav a{font-weight:600;font-size:.93rem}
.hdr-cta{display:flex;align-items:center;gap:12px;margin-left:18px;flex-shrink:0}
.callbtn{
  display:inline-flex;align-items:center;gap:11px;background:var(--red-600);color:#fff;
  padding:10px 20px 10px 16px;border-radius:9px;line-height:1.05;flex-shrink:0;
  box-shadow:0 6px 18px rgba(223,46,36,.28);transition:background .18s ease,transform .18s ease;
}
.callbtn:hover{background:var(--red-700);text-decoration:none;transform:translateY(-1px)}
.callbtn svg{flex-shrink:0}
.callbtn b{display:block;font-family:var(--display);font-size:1.32rem;font-weight:700;letter-spacing:.01em}
.callbtn span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.86}
@media(max-width:1180px){.callbtn b{font-size:1.12rem}}
@media(max-width:1000px){
  .hdr-cta{margin-left:auto;order:2}
  .callbtn{padding:9px 14px}
  .callbtn span{display:none}
  .navtoggle{margin-left:10px;order:3}
}
@media(max-width:520px){.callbtn b{font-size:0;gap:0}.callbtn b::after{content:"Call";font-size:1rem}}

/* ---------- hero ---------- */
.hero .wrap{padding-top:86px;padding-bottom:92px}
.hero h1{max-width:15ch}
.hero-lede{font-size:1.14rem;line-height:1.62;color:#BCC9DA;max-width:50ch}
.hero-badge{
  font-family:var(--display);letter-spacing:.18em;font-weight:600;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:30px 0 8px}
.callbtn--hero{padding:17px 30px 17px 24px;border-radius:11px;box-shadow:0 12px 34px rgba(223,46,36,.4)}
.callbtn--hero b{font-size:2.05rem;letter-spacing:0}
.callbtn--hero span{font-size:.68rem;letter-spacing:.18em}
@media(max-width:600px){
  .callbtn--hero{width:100%;justify-content:center}
  .callbtn--hero b{font-size:1.7rem}
  .callbtn--hero b::after{content:none}
}
.hero-alt{color:#9FB0C6;font-size:.9rem;display:flex;align-items:center;gap:9px}
.hero-alt a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.3)}
.hero-alt a:hover{text-decoration:none;border-bottom-color:#fff}

/* ---------- call band, upgraded ---------- */
.callband{
  background:linear-gradient(112deg,var(--navy-900) 0%,var(--navy-700) 100%);
  border:1px solid rgba(255,255,255,.09);padding:26px 30px;
}
.callband-txt b{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;letter-spacing:-.005em;line-height:1.08}
.btn--call{padding:15px 26px;border-radius:10px;box-shadow:0 10px 26px rgba(223,46,36,.34)}
.callband-num{font-family:var(--display);font-size:1.62rem;font-weight:700;letter-spacing:.01em}
.callband-lbl{font-family:var(--display);letter-spacing:.14em}

/* ---------- sticky mobile bar: call first, form second ---------- */
.stickybar{gap:10px;padding:10px 12px;background:rgba(10,21,38,.97);backdrop-filter:blur(8px)}
.stickybar .btn{flex:1;padding:14px 16px;font-size:.95rem}
.stickybar .btn--ghost{flex:0 0 auto}
.stickybar .btn--call{
  flex:2;background:var(--red-600);color:#fff;font-family:var(--display);
  font-size:1.22rem;font-weight:700;letter-spacing:.01em;box-shadow:none;
}

/* ---------- cards + CTA band polish ---------- */
.card{border-radius:12px}
.card h3{font-size:1.24rem}
.cta{background:linear-gradient(108deg,var(--navy-900) 0%,var(--navy-600) 62%,var(--navy-800) 100%)}
.cta h2{font-size:clamp(2.1rem,4.2vw,3.2rem)}
.cta-phone{
  font-family:var(--display);font-size:1.72rem;font-weight:700;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:10px;
}
.formcard h2{font-size:1.62rem}

/* hero sub-line: keep the icon on its own axis so the sentence wraps as a block */
.hero-alt{align-items:flex-start;line-height:1.55}
.hero-alt svg{margin-top:4px;flex-shrink:0}
/* mobile hero: lighter than it was, the photograph should still read on a phone */
@media(max-width:940px){
  .hero-media::after{
    background:linear-gradient(180deg,rgba(10,21,38,.62) 0%,rgba(10,21,38,.76) 45%,rgba(10,21,38,.88) 100%);
  }
}


/* ==========================================================================
   REFERENCE ALIGNMENT
   Matches the layout language of the supplied reference: dark header, Oswald
   display type, amber action colour, image-topped service cards, an amber
   full-width band before the footer. Content stays ours.
   ========================================================================== */

/* Amber needs dark text on it. White on #F5A623 is about 2.0:1 and fails outright,
   so every amber surface gets near-black ink instead. */
.btn,.btn--call,.callbtn{color:var(--amber-ink)}
.btn:hover,.btn--call:hover,.callbtn:hover{color:var(--amber-ink)}
.callbtn span{opacity:.78}
.stickybar .btn--call{color:var(--amber-ink)}

/* ---------- dark header, as the reference has it ---------- */
.util{background:#060D19}
.hdr{background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.08)}
.hdr .brand-name{color:#fff}
.hdr .brand-sub i{color:#8290A6;border-left-color:rgba(255,255,255,.18)}
.nav a{color:#C4CFDE}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a[aria-current="page"]{color:var(--red-600)}
.navtoggle{border-color:rgba(255,255,255,.22)}
.navtoggle span{background:#fff}
@media(max-width:1000px){
  .nav{background:var(--navy-900);border-bottom-color:rgba(255,255,255,.08)}
  .nav a{color:#C4CFDE}
}
/* the header sits on the hero, so the hero no longer needs its own top rule */
.hero{border-top:0}

/* ---------- display type, Oswald proportions ---------- */
h1{letter-spacing:.005em;line-height:.98}
h2{letter-spacing:.008em;line-height:1.03}
h3{font-family:var(--display);font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:1.12rem}
.eyebrow{font-weight:600;letter-spacing:.22em}
.brand-name{font-family:var(--display);font-weight:700;letter-spacing:.01em}
.callbtn b,.callband-num,.cta-phone{font-family:var(--display);font-weight:600}
.btn{font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.92rem}

/* ---------- section heads centred, as the reference does ---------- */
.sec-head{max-width:760px}
.sec-head .eyebrow{text-align:center}

/* ---------- service cards: image top, amber icon badge ---------- */
.card{border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden}
.card-media{margin:-22px -22px 0;border-radius:0;aspect-ratio:16/10}
.card-ico{
  position:relative;margin-top:-26px;margin-bottom:12px;z-index:2;
  width:52px;height:52px;border-radius:10px;background:var(--red-600);
  color:var(--amber-ink);display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(245,166,35,.34);
}
.card h3{margin-top:2px}
.card .link-more{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;font-weight:600;color:var(--ink);
}
.card:hover .link-more{color:var(--red-600)}

/* ---------- amber band before the footer ---------- */
.endband{background:var(--red-600);color:var(--amber-ink)}
.endband .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:34px;
  flex-wrap:wrap;padding-top:44px;padding-bottom:44px;
}
.endband h2{color:var(--amber-ink);margin:0 0 6px;font-size:clamp(1.9rem,3.6vw,2.7rem)}
.endband p{color:rgba(58,42,8,.82);margin:0;max-width:56ch;font-size:1rem}
.endband-cta{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.endband .btn--dark{
  background:var(--navy-900);color:#fff;padding:15px 26px;border-radius:9px;
}
.endband .btn--dark:hover{background:#060D19;color:#fff}
.endband .btn--out{
  background:transparent;color:var(--amber-ink);border:2px solid rgba(58,42,8,.45);
  padding:13px 24px;border-radius:9px;
}
.endband .btn--out:hover{background:rgba(58,42,8,.09);color:var(--amber-ink)}

/* ---------- service-area block, modelled on the reference's counties panel ---------- */
.areawrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media(max-width:940px){.areawrap{grid-template-columns:1fr;gap:34px}}
.areapanel{background:var(--navy-900);border-radius:var(--r-lg);padding:30px 32px;color:#B9C4D4}
.arealist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
@media(max-width:520px){.arealist{grid-template-columns:1fr}}
.arealist li{display:flex;align-items:flex-start;gap:11px;font-size:.94rem;line-height:1.4}
.arealist .tick{
  flex-shrink:0;width:20px;height:20px;border-radius:5px;background:var(--red-600);
  color:var(--amber-ink);display:inline-flex;align-items:center;justify-content:center;margin-top:1px;
}
.arealist b{display:block;color:#fff;font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;font-size:.96rem;line-height:1.2}
.arealist span{display:block;color:#8B99AE;font-size:.8rem;margin-top:1px}
.areanote{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.86rem;color:#93A2B8}

/* The call button's sub-label was set at .78 alpha on amber, which measured too faint to
   read at 11px. Full-strength ink, slightly heavier, and it holds up. */
.callbtn span{opacity:1;color:var(--amber-ink);font-weight:800}
.callbtn--hero span{font-size:.72rem;letter-spacing:.14em}
.btn--call .callband-lbl{border-left-color:rgba(58,42,8,.4);opacity:1}
/* amber links on white need a darker tone than the amber surface colour */
a{color:var(--red-700)}
.link-more{color:var(--red-700)}
.card:hover .link-more{color:var(--red-700)}
.hero-alt a,.ftr a,.util a,.nav a,.section--dark a,.areapanel a{color:inherit}

/* number-only call button: nothing under the digits, so centre them on the icon */
.callbtn--bare .callbtn-txt{display:flex;align-items:center}
.callbtn--bare b{line-height:1}
.callbtn--hero.callbtn--bare{padding:18px 32px 18px 26px}

/* credits table: the photo reference that replaced the outbound link */
.credits .srcid{color:var(--muted);font-family:var(--mono);font-size:.72rem;letter-spacing:.01em}