/* ==========================================================================
   Roofing Relief — light theme
   Warm bone grounds, ink type, one copper accent. Self-hosted variable fonts.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 800;
  font-display:swap; src:url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 800;
  font-display:swap; src:url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('fonts/instrumentsans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('fonts/instrumentsans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens */
:root{
  --paper:#FFFFFF;
  --bone:#F8F5F0;          /* the page ground */
  --bone-2:#F0EBE3;        /* alternating band */
  --ink:#14202E;           /* headings */
  --body:#4B5463;          /* running text */
  --muted:#77808D;         /* secondary text */
  --line:#E4DED4;          /* hairlines */
  --line-2:#D3CBBE;

  --copper:#C9803F;        /* fills, 3D, marks */
  --copper-ink:#A2591B;    /* copper for text and links: passes AA on bone */
  --copper-soft:#F6EADC;   /* copper tint ground */

  --deep:#122033;          /* footer, dark controls */
  --deep-2:#1B2E47;

  --r:4px;
  --r-lg:8px;
  --shell:1220px;
  --gut:24px;

  --display:'Archivo',Impact,system-ui,sans-serif;
  --text:'Instrument Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --ease:cubic-bezier(.22,.68,.28,1);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bone); color:var(--body);
  font-family:var(--text); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--copper-ink); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--copper)}
h1,h2,h3,h4{margin:0; font-family:var(--display); color:var(--ink); font-weight:800}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em; padding-left:1.15em}
li{margin:.4em 0}
:focus-visible{outline:2px solid var(--copper-ink); outline-offset:3px; border-radius:2px}

/* ---------------------------------------------------------------- layout */
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}
.band{padding-block:clamp(78px,9vw,136px); position:relative}
.band--tint{background:var(--bone-2)}
.band--paper{background:var(--paper)}
.band--deep{background:var(--deep); color:#C5CFDC}
.band--deep h2,.band--deep h3{color:#fff}

/* ---------------------------------------------------------------- type */
.display{
  font-size:clamp(36px,4vw,58px); line-height:1.04; letter-spacing:-.03em;
  font-weight:800; color:var(--ink); text-wrap:balance;
}
.h2{font-size:clamp(28px,3.1vw,42px); line-height:1.08; letter-spacing:-.025em; text-wrap:balance; color:var(--ink)}
.h3{font-family:var(--display); font-size:clamp(19px,1.5vw,22px); line-height:1.28; letter-spacing:-.012em; font-weight:700; color:var(--ink)}
.lead{font-size:clamp(17px,1.35vw,20px); line-height:1.58; color:var(--muted); max-width:52ch}
.band--deep .lead{color:#95A3B5}
.label{
  font-family:var(--text); font-size:12px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--copper-ink); margin:0 0 16px;
}
.measure{max-width:66ch}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--text); font-weight:600; font-size:16px; line-height:1;
  padding:17px 26px; border-radius:var(--r); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .12s var(--ease);
}
.btn:active{transform:translateY(1px)}
/* copper fill with near-black type reads like a brass plate and passes AA */
.btn--copper{background:var(--copper); color:#12131A; border-color:var(--copper)}
.btn--copper:hover{background:#B8712F; border-color:#B8712F; color:#fff}
.btn--line{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--line:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn--dark{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn--dark:hover{background:var(--deep-2); border-color:var(--deep-2)}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.36)}
.btn--ghost:hover{background:#fff; color:var(--deep); border-color:#fff}
.btn svg{width:17px; height:17px; flex:none}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

.jump{
  font-family:var(--text); font-weight:600; font-size:15px; color:var(--copper-ink);
  text-decoration:none; display:inline-flex; align-items:center; gap:7px;
}
.jump svg{width:14px;height:14px; transition:transform .2s var(--ease)}
.jump:hover svg{transform:translateX(4px)}
.band--deep .jump{color:var(--copper)}

/* Section rhythm.
   The page alternated bone and white - two warm near-whites - with a single navy
   band right at the bottom, which is why it read as one colour however many were
   defined. --tint was declared and never used, and home.php asked for --navy and
   --bone2, which did not exist at all, so those sections silently fell back to
   bone. These give a page four distinct steps to move through.
   The dark band needs its own text rules: the defaults are tuned for dark-on-light
   and several of them (muted body copy, hairline borders) disappear on navy. */
.band--copper{background:var(--copper-soft)}

.band--deep .label{color:var(--copper)}
.band--deep .rows__row p,
.band--deep .step p{color:#9FADBE}
.band--deep .rows__row{border-bottom-color:rgba(255,255,255,.13)}
.band--deep .step__n{color:var(--copper)}
.band--deep .note{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); border-left-color:var(--copper)}
.band--deep .note p{color:#C5CFDC}
.band--deep .note b{color:#fff}
.band--deep .faq,
.band--deep .faq details{border-color:rgba(255,255,255,.14)}
.band--deep .faq summary{color:#fff}
.band--deep .faq__a p{color:#9FADBE}
.band--deep .btn--line{color:#fff; border-color:rgba(255,255,255,.34)}
.band--deep .btn--line:hover{background:#fff; color:var(--deep); border-color:#fff}

/* ---------------------------------------------------------------- hero
   One hero for every page that has one. A photograph with the copy on a scrim
   that fades out to the right, so the picture is clearest where no words sit on
   it. The header is fixed and transparent over the top, so the hero clears it. */
.hero{
  position:relative; isolation:isolate; overflow:hidden; background:var(--deep);
  padding-top:calc(76px + clamp(40px,5vw,80px));
  padding-bottom:clamp(40px,4.4vw,70px);
}
.hero__img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; object-position:64% 50%;
}
/* Two layers, because one gradient cannot both guarantee contrast on the left
   and leave the picture alone on the right. The first does the contrast; the
   second is a flat navy wash that pulls any photograph toward the palette, so a
   set of job photos taken on different days still looks like one set. */
.hero__scrim{position:absolute; inset:0; z-index:-1}
.hero__scrim::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(94deg,
    rgba(9,16,27,.95) 0%, rgba(9,16,27,.9) 34%, rgba(9,16,27,.62) 68%, rgba(9,16,27,.4) 100%);
}
.hero__scrim::after{
  content:""; position:absolute; inset:0;
  background:var(--deep); opacity:.22; mix-blend-mode:color;
}
.hero .shell{position:relative}
.hero__in{max-width:none}
.hero__in > *{max-width:660px}
.hero__trust{max-width:880px}
.hero__eyebrow{
  font-family:var(--text); font-size:12px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--copper); margin:0 0 15px;
}
.hero .display{color:#fff}
.hero .lead{color:#C8D2DF; margin:16px 0 24px}
.hero .lead a{color:var(--copper)}
.hero .hero__note{color:#A9B6C6}
.hero .hero__note b{color:#fff}
.hero__trust{
  list-style:none; margin:22px 0 0; padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.17);
  display:flex; flex-wrap:wrap; gap:10px 26px;
}
.hero__trust li{display:flex; align-items:center; gap:8px; font-size:14px; color:#BCC7D4; min-width:0}
.hero__trust svg{width:15px; height:15px; flex:none; color:var(--copper)}

/* The header is transparent until it sticks, so over a dark hero its navy logo
   and navy links would vanish. This only touches the unstuck state. */
.hdr--on-dark:not(.is-stuck):not(.is-nav-open) .brand__txt{color:#fff}
.hdr--on-dark:not(.is-stuck):not(.is-nav-open) .brand__txt small{color:var(--copper)}
.hdr--on-dark:not(.is-stuck):not(.is-nav-open) .rrmark .m1{stroke:#E0954C}
.hdr--on-dark:not(.is-stuck):not(.is-nav-open) .rrmark .m2{stroke:#fff}
.hdr--on-dark:not(.is-stuck):not(.is-nav-open) .rrmark .m3{stroke:#fff; opacity:.4}
.hdr--on-dark:not(.is-stuck):not(.is-nav-open) .nav > a,
.hdr--on-dark:not(.is-stuck):not(.is-nav-open) .nav__btn{color:#fff}
.hdr--on-dark:not(.is-stuck):not(.is-nav-open) .burger span,
.hdr--on-dark:not(.is-stuck):not(.is-nav-open) .burger span::before,
.hdr--on-dark:not(.is-stuck):not(.is-nav-open) .burger span::after{background:#fff}
.hero__note{
  margin:22px 0 0; max-width:62ch; font-size:14.5px; line-height:1.62;
  color:var(--muted); padding-left:15px; border-left:2px solid var(--copper);
}
.hero__note b{color:var(--ink)}
.band--deep .hero__note{color:#9FADBE}
.band--deep .hero__note b{color:#fff}

/* ---------------------------------------------------------------- header */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:80;
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr__in{display:flex; align-items:center; gap:32px; height:76px}
.hdr.is-stuck,.hdr.is-nav-open{
  background:rgba(255,255,255,.88); backdrop-filter:saturate(160%) blur(12px);
  border-bottom-color:var(--line); box-shadow:0 1px 24px -18px rgba(18,32,51,.5);
}
.hdr.is-nav-open{background:var(--paper)}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.brand__mark{width:37px; height:35px; flex:none; display:block}
.rrmark{width:100%; height:100%; display:block; fill:none;
  stroke-width:7; stroke-linecap:square; stroke-linejoin:miter}
.rrmark .m1{stroke:var(--copper)}
.rrmark .m2{stroke:var(--ink)}
.rrmark .m3{stroke:var(--ink); opacity:.32}
.brand__txt{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink); line-height:1.05}
.brand__txt small{display:block; font-family:var(--text); font-weight:500; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--copper-ink); margin-top:2px}
.nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav a{
  font-family:var(--text); font-size:15px; font-weight:500; color:var(--body);
  text-decoration:none; padding:9px 13px; border-radius:var(--r);
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.nav a:hover{color:var(--ink); background:rgba(18,32,51,.06)}
.hdr .btn{padding:13px 20px; font-size:15px}
.hdr__tel{display:flex; align-items:center; gap:12px; flex:none}
.burger{display:none; width:44px;height:44px; align-items:center; justify-content:center; background:none; border:1px solid var(--line-2); border-radius:var(--r); cursor:pointer}
.burger span{display:block; width:19px; height:1.5px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px; height:1.5px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}
.burger span,.burger span::before,.burger span::after{transition:transform .22s var(--ease), background-color .22s var(--ease), top .22s var(--ease)}

/* services dropdown -------------------------------------------------- */
.nav__group{position:relative}
.nav__btn{
  display:flex; align-items:center; gap:5px; cursor:pointer;
  font-family:var(--text); font-size:15px; font-weight:500; color:var(--body);
  background:none; border:0; padding:9px 13px; border-radius:var(--r);
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.nav__btn:hover{color:var(--ink); background:rgba(18,32,51,.06)}
.nav__chev{width:15px; height:15px; transition:transform .2s var(--ease)}
.nav__menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:60; min-width:248px;
  display:flex; flex-direction:column; padding:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 44px -14px rgba(18,32,51,.24);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__menu a{padding:9px 12px; font-size:14.5px; white-space:nowrap}
.nav__lbl{
  margin:8px 12px 4px; padding-top:9px; border-top:1px solid var(--line);
  font-family:var(--text); font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--copper-ink);
}
.nav__group.is-open > .nav__menu{opacity:1; visibility:visible; transform:none}
.nav__group.is-open > .nav__btn{color:var(--ink); background:rgba(18,32,51,.06)}
.nav__group.is-open .nav__chev{transform:rotate(180deg)}
@media (hover:hover){
  .nav__group:hover > .nav__menu{opacity:1; visibility:visible; transform:none}
  .nav__group:hover .nav__chev{transform:rotate(180deg)}
}

/* ---------------------------------------------------------------- trust */
.trust{background:var(--paper); border-block:1px solid var(--line)}
.trust__grid{display:grid; grid-template-columns:repeat(4,1fr)}
.trust__item{padding:30px; border-left:1px solid var(--line)}
.trust__item:first-child{border-left:0; padding-left:0}
.trust__item b{display:block; font-family:var(--display); font-weight:700; font-size:16.5px; color:var(--ink); letter-spacing:-.01em; margin-bottom:5px}
.trust__item span{font-size:14.5px; line-height:1.5; color:var(--muted); display:block}

/* ---------------------------------------------------------------- split */
.split{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:clamp(32px,4.2vw,68px); align-items:start}
.sec-head{max-width:58ch; margin-bottom:clamp(38px,4.4vw,64px)}
.sec-head .lead{margin-top:18px}

.feature{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--paper);
}
.feature .frame{aspect-ratio:3/2; border-radius:0}
.feature__body{padding:28px 30px 32px}
.feature__body h3{margin-bottom:12px}
.feature__body p{color:var(--body); font-size:16px; margin-bottom:18px}

.frame{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--bone-2)}
.frame__img{width:100%; height:100%; object-fit:cover; display:block}

.rows{border-top:1px solid var(--line)}
.rows__row{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:26px 0; border-bottom:1px solid var(--line)}
.rows__row h3{margin-bottom:7px}
.rows__row p{margin:0; font-size:15.5px; line-height:1.6; color:var(--muted); max-width:52ch}

/* ---------------------------------------------------------------- steps */
.steps{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,3.4vw,52px)}
.step{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start}
.step__n{
  font-family:var(--display); font-weight:800; font-size:44px; line-height:.85;
  color:var(--copper); letter-spacing:-.04em; min-width:48px;
  font-variant-numeric:tabular-nums;
}
.step h3{margin-bottom:9px}
.step p{margin:0; font-size:15.5px; line-height:1.62; color:var(--muted); max-width:44ch}

/* ---------------------------------------------------------------- prose */
.prose h2{margin:1.7em 0 .5em; font-size:clamp(23px,2.2vw,30px); line-height:1.14; letter-spacing:-.02em}
.prose h3{font-family:var(--display); font-weight:700; font-size:clamp(18.5px,1.6vw,21px); line-height:1.3; margin:1.6em 0 .4em; color:var(--ink); letter-spacing:-.012em}
.prose > *:first-child{margin-top:0}
.prose > *:last-child{margin-bottom:0}
.prose p,.prose li{font-size:17px; line-height:1.72; color:var(--body)}
.prose p,.prose ul,.prose ol{max-width:66ch}

.note{
  border:1px solid var(--line); border-left:2px solid var(--copper);
  background:var(--copper-soft);
  padding:24px 28px; margin:2em 0; border-radius:0 var(--r-lg) var(--r-lg) 0;
}
.note p{margin:0 0 .7em; font-size:16px; line-height:1.65; color:#48423A; max-width:64ch}
.note p:last-child{margin:0}
.note b{font-family:var(--display); font-weight:700; color:var(--ink)}

/* ---------------------------------------------------------------- areas */
.areas{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--line)}
.area{background:var(--paper); padding:30px 26px 28px; display:flex; flex-direction:column; gap:10px; text-decoration:none; position:relative; transition:background-color .22s var(--ease)}
/* the card is no longer one giant anchor - the link is the jump, and this keeps
   the whole card clickable without handing a crawler a paragraph of anchor text */
.area .jump::after{content:""; position:absolute; inset:0}
.area:hover, .area:focus-within{background:var(--copper-soft)}
.area p{margin:0; font-size:14.5px; line-height:1.55; color:var(--muted); flex:1}
.area .jump{margin-top:6px}

/* ---------------------------------------------------------------- faq */
.faq-split{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:clamp(32px,4.5vw,80px); align-items:start}
.faq-split .sec-head{margin-bottom:0; position:sticky; top:106px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:24px 48px 24px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:18px; line-height:1.4;
  color:var(--ink); letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:10px; top:50%; width:11px; height:2px; background:var(--copper-ink); transform:translateY(-50%)}
.faq summary::before{content:""; position:absolute; right:14px; top:50%; width:2px; height:11px; background:var(--copper-ink); transform:translateY(-50%); transition:opacity .2s var(--ease)}
.faq details[open] summary::before{opacity:0}
.faq__a{padding:0 0 26px; max-width:66ch}
.faq__a p{margin:0 0 .8em; font-size:16.5px; line-height:1.7; color:var(--body)}
.faq__a p:last-child{margin:0}

/* ---------------------------------------------------------------- close */
.close__grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,4vw,64px); align-items:center}
.close__grid .lead{margin-top:20px}
.tel{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(36px,4.4vw,58px); line-height:1; color:var(--copper);
  text-decoration:none; display:inline-block;
}
.tel:hover{color:#fff}
.meta{font-size:14.5px; line-height:1.75; color:#8A97A8; margin:18px 0 0}
.meta a{color:#8A97A8}
.meta a:hover{color:var(--copper)}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--deep); padding:clamp(56px,6vw,84px) 0 34px; color:#8A97A8}
.ftr__grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(28px,3.5vw,56px)}
.ftr .brand__txt{color:#fff}
.ftr .brand__txt small{color:var(--copper)}
.ftr .rrmark .m1{stroke:#E0954C}
.ftr .rrmark .m2{stroke:#fff}
.ftr .rrmark .m3{stroke:#fff; opacity:.40}
.ftr h4{font-family:var(--text); font-weight:600; font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:#fff; margin:0 0 18px}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{margin:0 0 11px}
.ftr a{color:#AEB9C8; text-decoration:none; font-size:15px}
.ftr a:hover{color:var(--copper)}
.ftr p{font-size:15px; line-height:1.7; color:#8A97A8; max-width:34ch}
.ftr__tel{font-family:var(--display); font-weight:800; font-size:21px; color:#fff !important; letter-spacing:-.02em}
.ftr__tel:hover{color:var(--copper) !important}
.ftr__base{margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.13); display:flex; flex-wrap:wrap; gap:12px 40px; justify-content:space-between}
.ftr__base p{font-size:13px; color:#6C7A8C; max-width:64ch; margin:0}

/* ---------------------------------------------------------------- callbar */
.callbar{display:none}

/* WhatsApp ------------------------------------------------------------
   Same number as the phone. The floating button sits clear of the sticky
   call bar on mobile, so it never covers the primary CTA. */
.wafab{
  position:fixed; right:18px; bottom:22px; z-index:85;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 8px 22px -6px rgba(37,211,102,.55), 0 2px 6px rgba(18,32,51,.18);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wafab svg{width:28px; height:28px; display:block}
.wafab:hover{transform:translateY(-2px); box-shadow:0 12px 26px -6px rgba(37,211,102,.6), 0 2px 6px rgba(18,32,51,.2)}
.wafab:focus-visible{outline:3px solid var(--copper); outline-offset:3px}
.ftr__wa{display:inline-flex; align-items:center; gap:7px}
.ftr__wa svg{width:16px; height:16px; flex:none; color:#25D366}
@media (prefers-reduced-motion:reduce){ .wafab{transition:none} .wafab:hover{transform:none} }

/* ---------------------------------------------------------------- reveal */
.rv{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .split,.close__grid,.faq-split{grid-template-columns:1fr}
  .faq-split .sec-head{position:static; margin-bottom:28px}
  .areas{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .burger{display:flex}
  .hdr__in{height:68px}
  .nav{
    display:flex; flex-direction:column; align-items:stretch; gap:0; margin:0;
    position:absolute; top:100%; left:0; right:0; z-index:70;
    max-height:calc(100dvh - 68px - 78px); overflow-y:auto; overscroll-behavior:contain;
    padding:10px 16px calc(18px + env(safe-area-inset-bottom));
    background:var(--paper); border-top:1px solid var(--line);
    box-shadow:0 22px 40px -18px rgba(18,32,51,.28);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .hdr.is-nav-open .nav{opacity:1; visibility:visible; transform:none}
  .nav a{padding:12px 4px; font-size:16.5px; border-radius:0}
  .nav > a{border-top:1px solid var(--line)}
  .nav__group{position:static}
  .nav__btn{display:none}
  .nav__menu{
    position:static; min-width:0; padding:0; margin:0;
    background:none; border:0; border-radius:0; box-shadow:none;
    opacity:1; visibility:visible; transform:none; transition:none;
  }
  .nav__menu a{padding:12px 4px; font-size:16.5px; white-space:normal}
  .nav__menu a + a{border-top:1px solid var(--line)}
  .nav__lbl{margin:16px 0 2px; padding-top:14px}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .trust__item{padding:22px}
  .trust__item:nth-child(odd){padding-left:0; border-left:0}
  .trust__item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .steps,.areas,.trust__grid,.ftr__grid{grid-template-columns:1fr}
  .hero{padding-top:calc(76px + 34px); padding-bottom:40px}
  .hero__in{max-width:none}
  .hero__scrim::before{background:linear-gradient(176deg,
    rgba(9,16,27,.86) 0%, rgba(9,16,27,.93) 42%, rgba(9,16,27,.96) 100%)}
  .hero__trust{gap:9px 18px; margin-top:20px; padding-top:15px}
  .hero__trust li{font-size:13.5px}
  .trust__item{padding:18px 0; border-left:0; border-top:1px solid var(--line)}
  .trust__item:first-child{border-top:0}
  .rows__row{grid-template-columns:1fr; gap:12px; align-items:start}
  .cta-row .btn{width:100%}
  .hdr__tel .btn span{display:none}
  /* lift the floating button above the call bar so they never overlap */
  .wafab{ bottom:calc(78px + env(safe-area-inset-bottom)); right:14px; width:48px; height:48px }
  .wafab svg{ width:26px; height:26px }
  .callbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; gap:9px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97); border-top:1px solid var(--line);
    box-shadow:0 -6px 24px -18px rgba(18,32,51,.6);
  }
  .callbar a{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:54px; border-radius:var(--r); text-decoration:none;
    font-family:var(--text); font-weight:600; font-size:15.5px;
  }
  .callbar .cb1{background:var(--copper); color:#12131A}
  .callbar .cb2{background:transparent; color:var(--ink); border:1px solid var(--line-2)}
  body{padding-bottom:78px}
}

/* ---------------------------------------------------------------- motion off */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rv{opacity:1; transform:none}
}

/* ------------------------------------------------- compact page header */
/* For pages where a 3D scene would be decoration rather than explanation. */
.phead{
  position:relative; background:var(--bone);
  padding:calc(78px + clamp(46px,6vw,86px)) 0 clamp(40px,5vw,64px);
  border-bottom:1px solid var(--line);
}
.phead::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 120% at 82% 0%, rgba(201,128,63,.13) 0%, transparent 62%);
}
.phead .shell{position:relative}
.phead .display{font-size:clamp(32px,3.3vw,46px); max-width:20ch}
.phead .lead{margin-top:18px}
.phead .meta{margin-top:20px; font-size:14px; color:var(--muted)}
.phead .meta a{color:var(--copper-ink)}

/* Article lead photo: the post's featured image, wider than the prose column. */
.art-img{margin:0; padding:clamp(28px,4vw,48px) 0 0; background:#FFFFFF}
.art-img img{display:block; width:100%; height:auto; aspect-ratio:21/9; object-fit:cover; border-radius:10px; background:#F2F6F9}
@media (max-width:768px){ .art-img img{aspect-ratio:16/10} }

/* Two dropdowns plus five links is a tight fit just above the burger
   breakpoint, so the top-level items close up a little there. */
@media (min-width:1081px) and (max-width:1279px){
  .hdr__in{gap:20px}
  .nav > a,.nav__btn{padding:9px 8px; font-size:14.5px}
}