/* ============================================================
   EMERALD ROOFING — design tokens
   ============================================================ */
:root{
  /* neutrals, biased faintly green so they read as chosen */
  --paper:#F7F7F3;
  --paper-2:#EFEFE8;
  --surface:#FFFFFF;
  --mint:#E9F4EF;
  --line:#DFDFD6;
  --line-soft:#E9E9E1;
  --text:#14201B;
  --text-2:#5C6863;
  --text-3:#8A938E;

  /* brand */
  --emerald:#2D5C35;      /* logo roofline */
  --emerald-br:#1F793D;   /* logo shamrock */
  --emerald-lt:#5AB06B;   /* lifted, for dark grounds */
  --brass:#B8912F;

  /* fixed dark band palette — identical in both themes, it is brand rhythm */
  --band:#0B1310;
  --band-2:#111C17;
  --band-text:#F2F6F3;
  --band-text-2:#9BA9A2;
  --band-line:rgba(255,255,255,.11);

  --shadow-1:0 1px 2px rgba(11,19,16,.05), 0 2px 8px rgba(11,19,16,.04);
  --shadow-2:0 2px 6px rgba(11,19,16,.06), 0 16px 40px -12px rgba(11,19,16,.16);
  --shadow-3:0 4px 12px rgba(11,19,16,.08), 0 40px 80px -24px rgba(11,19,16,.28);

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px;
  --gut:clamp(18px,5vw,64px);
  --maxw:1320px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0D1512; --paper-2:#121C18; --surface:#16211C;
    --mint:#10201A; --line:#26312B; --line-soft:#1E2823;
    --text:#EDF2EF; --text-2:#A3AFA9; --text-3:#7A857F;
    --emerald:#4A9A5A; --emerald-br:#5AB06B; --emerald-lt:#85CE93;
    --brass:#D9B457;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.6);
    --shadow-3:0 4px 12px rgba(0,0,0,.5), 0 40px 80px -24px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0D1512; --paper-2:#121C18; --surface:#16211C;
  --mint:#10201A; --line:#26312B; --line-soft:#1E2823;
  --text:#EDF2EF; --text-2:#A3AFA9; --text-3:#7A857F;
  --emerald:#4A9A5A; --emerald-br:#5AB06B; --emerald-lt:#85CE93;
  --brass:#D9B457;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.6);
  --shadow-3:0 4px 12px rgba(0,0,0,.5), 0 40px 80px -24px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ============================================================
   base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:400 17px/1.6 Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--emerald-br);outline-offset:3px;border-radius:3px}

h1,h2,h3,h4,.display{
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  font-stretch:112%;
  letter-spacing:-.035em;
  line-height:.98;
  text-wrap:balance;
  margin:0;
}
h3,h4{font-stretch:105%;letter-spacing:-.02em;line-height:1.1}
p{margin:0}

.eyebrow{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--emerald-br);margin:0;
}
.eyebrow--muted{color:var(--text-3)}
.eyebrow--onband{color:var(--emerald-lt)}
.mono{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.06em}

.h-xl{font-size:clamp(40px,7.6vw,92px)}
.h-lg{font-size:clamp(33px,5.4vw,66px)}
.h-md{font-size:clamp(26px,3.4vw,42px)}
.h-sm{font-size:clamp(20px,2.2vw,27px)}
.lede{font-size:clamp(17px,1.5vw,20.5px);line-height:1.62;color:var(--text-2);max-width:60ch}
.tnum{font-variant-numeric:tabular-nums}

/* layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.band{position:relative;padding-block:clamp(72px,10vw,140px)}
.band--tight{padding-block:clamp(56px,7vw,96px)}
.band--dark{background:var(--band);color:var(--band-text)}
.band--dark .lede{color:var(--band-text-2)}
.band--mint{background:var(--mint)}
.band--paper2{background:var(--paper-2)}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,40px)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.band--dark .rule{background:var(--band-line)}

/* section header with spec rail — recurring architectural device */
.sechead{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,44px);align-items:start}
.sechead__rail{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);padding-top:.7em;white-space:nowrap;
  border-top:2px solid var(--emerald-br);
}
.band--dark .sechead__rail{color:var(--band-text-2);border-top-color:var(--emerald-lt)}
@media (max-width:720px){.sechead{grid-template-columns:1fr;gap:18px}}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  font-family:Archivo,sans-serif;font-weight:700;font-stretch:105%;font-size:14px;
  letter-spacing:.055em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:transform .35s var(--ease-out), background-color .25s, color .25s, border-color .25s, box-shadow .35s var(--ease-out);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--emerald);color:#fff;box-shadow:0 6px 18px -6px rgba(45,92,53,.55)}
.btn--primary:hover{background:var(--emerald-br);box-shadow:0 14px 34px -10px rgba(31,121,61,.6)}
.btn--ghost{border-color:var(--line);background:transparent;color:var(--text)}
.btn--ghost:hover{border-color:var(--emerald-br);color:var(--emerald-br)}
.btn--onhero{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.07);backdrop-filter:blur(10px)}
.btn--onhero:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
.btn--onband{border-color:var(--band-line);color:var(--band-text);background:rgba(255,255,255,.05)}
.btn--onband:hover{border-color:var(--emerald-lt);color:var(--emerald-lt)}
.btn--sm{padding:11px 19px;font-size:12.5px}
.btn .arw{transition:transform .35s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:Archivo,sans-serif;font-weight:700;font-size:13.5px;font-stretch:105%;
  letter-spacing:.06em;text-transform:uppercase;color:var(--emerald-br);
  padding-bottom:3px;border-bottom:1.5px solid transparent;transition:border-color .3s,gap .3s var(--ease-out);
}
.link-arrow:hover{border-bottom-color:currentColor;gap:14px}

.stars{color:var(--brass);letter-spacing:.14em;font-size:13px;line-height:1}

/* ============================================================
   generated scene imagery
   Swap point: replace <svg class="scene"> blocks with
   <img src="your-photo.jpg" alt="..."> — the aspect boxes hold.
   ============================================================ */
/* A class with a display value outbeats the browser's own [hidden] rule, so
   anything hidden by script needs this or it renders empty on page load.
   That is exactly what happened to the diagnostic panel. */
[hidden]{display:none!important}

.scene{display:block;width:100%;height:100%;object-fit:cover}
.scene-box{position:relative;overflow:hidden;background:var(--band-2)}
.scene-box>.scene,.pf__i>.scene,.ba__thumb>.scene,.hero__media>.scene,.cta__media>.scene{position:absolute;inset:0;width:100%;height:100%}

/* scene colourways — one geometry, art-directed five ways */
.sc-dusk   {--sky-a:#F3D6A8;--sky-b:#C98C63;--sky-c:#7A5A63;--sun:#FFE7BE;--haze:#E8B98B;
            --roof-lit:#6E7A78;--roof-mid:#4E5A59;--roof-shade:#333E3E;--ridge:#8B9694;
            --wall:#E7E2D6;--wall-shade:#C3BCAC;--trim:#F7F7F3;--tree:#1B2A23;--tree-2:#2C4034;--ground:#24322A}
.sc-morning{--sky-a:#DCEAE6;--sky-b:#AFC9C4;--sky-c:#8DAAA6;--sun:#FFFFFF;--haze:#CFE0DB;
            --roof-lit:#7E8A87;--roof-mid:#5C6866;--roof-shade:#3D4847;--ridge:#9AA5A2;
            --wall:#F1EDE3;--wall-shade:#CFC8B9;--trim:#FFFFFF;--tree:#20342A;--tree-2:#31493B;--ground:#2A3A30}
.sc-storm  {--sky-a:#9AA3AE;--sky-b:#6B7480;--sky-c:#434B56;--sun:#C3C9D1;--haze:#8B95A0;
            --roof-lit:#5A6260;--roof-mid:#414948;--roof-shade:#2B3232;--ridge:#6E7674;
            --wall:#D7D3C9;--wall-shade:#A9A498;--trim:#E6E3DA;--tree:#1A2420;--tree-2:#26332C;--ground:#1F2A25}
.sc-emerald{--sky-a:#CFE6DA;--sky-b:#8FBFA6;--sky-c:#4E8C71;--sun:#F2FBF6;--haze:#A9D2BD;
            --roof-lit:#2E6B54;--roof-mid:#1F5140;--roof-shade:#143A2D;--ridge:#3F8468;
            --wall:#F3F1E7;--wall-shade:#CDCBBD;--trim:#FFFFFF;--tree:#12231B;--tree-2:#1D3529;--ground:#1A2B22}
.sc-slate  {--sky-a:#E4E7E4;--sky-b:#BFC6C3;--sky-c:#98A29E;--sun:#FFFFFF;--haze:#D2D8D5;
            --roof-lit:#3A4A52;--roof-mid:#2A373D;--roof-shade:#1C262B;--ridge:#4C5E67;
            --wall:#EDEAE0;--wall-shade:#C6C1B4;--trim:#FBFAF6;--tree:#1D2A24;--tree-2:#2A3B32;--ground:#23302A}
.sc-worn   {--sky-a:#D9DCD4;--sky-b:#B2B7AE;--sky-c:#8E948C;--sun:#EFF1EC;--haze:#C7CBC3;
            --roof-lit:#6B6A5E;--roof-mid:#525047;--roof-shade:#3A382F;--ridge:#7C7B6E;
            --wall:#DED9CB;--wall-shade:#B0AA99;--trim:#E9E5DA;--tree:#232A21;--tree-2:#333B2E;--ground:#2B3126}

.scrim{position:absolute;inset:0;pointer-events:none}
.scrim--hero{background:
  linear-gradient(180deg,rgba(9,16,13,.58) 0%,rgba(9,16,13,.24) 24%,rgba(9,16,13,.20) 50%,rgba(9,16,13,.88) 100%),
  linear-gradient(100deg,rgba(9,16,13,.90) 0%,rgba(9,16,13,.56) 44%,rgba(9,16,13,.04) 82%)}
.scrim--soft{background:linear-gradient(180deg,rgba(9,16,13,0) 40%,rgba(9,16,13,.72) 100%)}
.scrim--edge{background:linear-gradient(90deg,rgba(9,16,13,.55) 0%,rgba(9,16,13,0) 55%)}

/* ============================================================
   header + mega menu
   ============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:90;
  padding-top:env(safe-area-inset-top,0px);
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s;
  border-bottom:1px solid transparent;color:#fff;
}
.hdr__in{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);height:84px;
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.hdr.is-stuck{
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom-color:var(--line);color:var(--text);box-shadow:0 1px 24px -8px rgba(11,19,16,.22);
}
.hdr.is-stuck .hdr__in{height:72px}
.hdr.is-open{background:var(--paper);backdrop-filter:blur(18px);color:var(--text);border-bottom-color:var(--line)}

.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.logo__mark{width:34px;height:34px;flex:0 0 auto}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__name{font-family:Archivo,sans-serif;font-weight:800;font-stretch:112%;letter-spacing:-.025em;font-size:19px}
.logo__sub{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.62;margin-top:4px}

.nav{display:flex;align-items:center;gap:2px;margin-inline:auto;position:relative}
.nav__item{position:static}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;text-decoration:none;
  font-family:Archivo,sans-serif;font-weight:600;font-stretch:100%;font-size:15.5px;letter-spacing:-.008em;
  padding:9px 12px;border-radius:999px;transition:background-color .25s,opacity .25s;opacity:.95;
}
.nav__link:hover,.nav__link[aria-expanded="true"]{opacity:1;background:color-mix(in srgb,currentColor 11%,transparent)}
.nav__link{white-space:nowrap}
@media (max-width:1320px){.nav__link{font-size:14.5px;padding:8px 9px}}
@media (max-width:1200px){.nav__link{font-size:14px;padding:8px 7px}}
.nav__link .chev{width:9px;height:9px;transition:transform .3s var(--ease)}
.nav__link[aria-expanded="true"] .chev{transform:rotate(180deg)}

.hdr__actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.phone{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:"DM Mono",monospace;
  font-size:13.5px;letter-spacing:.02em;font-weight:500;white-space:nowrap;transition:color .25s}
.phone:hover{color:var(--emerald-br)}
.phone svg{width:14px;height:14px;opacity:.7}

.mega{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-8px);
  width:min(980px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);color:var(--text);
  padding:10px;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .38s var(--ease-out),visibility .28s;
}
.nav__item.is-open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega__grid{display:grid;grid-template-columns:.85fr 1.1fr .85fr;gap:10px}
.mega__feature{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:290px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff}
.mega__feature .scene{position:absolute;inset:0}
.mega__feature>*{position:relative}
.mega__list{padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.mega__link{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-decoration:none;
  padding:11px 14px;border-radius:var(--r-md);transition:background-color .22s,transform .3s var(--ease-out)}
.mega__link:hover{background:var(--mint);transform:translateX(3px)}
.mega__num{font-family:"DM Mono",monospace;font-size:11px;color:var(--emerald-br);letter-spacing:.08em}
.mega__t{font-family:Archivo,sans-serif;font-weight:700;font-size:15.5px;font-stretch:104%;letter-spacing:-.015em;display:block}
.mega__d{font-size:12.5px;color:var(--text-2);line-height:1.4;display:block;margin-top:2px}
.mega__cta{background:var(--band);color:var(--band-text);border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}

.burger{display:none;width:44px;height:44px;border:1px solid color-mix(in srgb,currentColor 26%,transparent);
  background:transparent;border-radius:999px;cursor:pointer;place-items:center;padding:0}
.burger span{display:block;width:17px;height:1.7px;background:currentColor;margin:3.4px auto;transition:transform .3s var(--ease),opacity .2s}
.hdr.is-open .burger span:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
.hdr.is-open .burger span:nth-child(2){opacity:0}
.hdr.is-open .burger span:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}

.drawer{display:none;background:var(--paper);border-top:1px solid var(--line);color:var(--text);
  max-height:calc(100dvh - 78px);overflow-y:auto;padding:14px var(--gut) 34px}
.drawer a{display:block;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line-soft);
  font-family:Archivo,sans-serif;font-weight:700;font-stretch:104%;font-size:19px;letter-spacing:-.02em}
.drawer .btn{width:100%;margin-top:20px}

@media (max-width:1200px){
  .nav,.hdr__actions .btn,.phone span{display:none}
  .burger{display:grid}
  .hdr__actions{margin-left:auto}
  .phone{font-size:0}.phone svg{width:17px;height:17px;opacity:1}
  .hdr.is-open .drawer{display:block}
}

/* ============================================================
   hero
   ============================================================ */
.hero{position:relative;background:var(--band);color:#fff;isolation:isolate;overflow:clip}
.hero__media{position:absolute;inset:0;z-index:0;transform-origin:52% 40%;will-change:transform}
.hero__in{position:relative;z-index:2;padding-top:clamp(128px,17vh,190px);padding-bottom:clamp(56px,8vh,96px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:end}
.hero h1{font-size:clamp(46px,9.4vw,124px);font-weight:800;font-stretch:118%;letter-spacing:-.045em;line-height:.88}
.hero h1 em{font-style:normal;color:var(--emerald-lt);display:block}
.hero__lede{font-size:clamp(16.5px,1.55vw,20px);line-height:1.6;color:rgba(255,255,255,.8);max-width:46ch;margin-top:26px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__side{display:flex;flex-direction:column;gap:14px;padding-bottom:6px}

.fcard{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-radius:var(--r-lg);padding:20px 22px;box-shadow:0 24px 60px -28px rgba(0,0,0,.8);
}
.fcard__q{font-family:Archivo,sans-serif;font-stretch:104%;font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.02em;margin-top:10px}
.fcard__by{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:10px}
.fcard--stat{display:flex;align-items:baseline;gap:14px}
.fcard--stat b{font-family:Archivo,sans-serif;font-stretch:112%;font-weight:800;font-size:clamp(34px,4vw,48px);letter-spacing:-.04em;line-height:1;color:var(--emerald-lt)}
.fcard--stat span{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);line-height:1.4}

.scrollcue{display:flex;align-items:center;gap:12px;margin-top:clamp(36px,6vh,62px);
  font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.scrollcue i{display:block;width:1px;height:38px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;align-items:start}
  /* horizontal card rail. the container has to clip on x, which means it also
     clips on y, so it needs real vertical padding or the drop shadow and the
     bottom rounded corners get sliced off. */
  .hero__side{flex-direction:row;align-items:stretch;overflow-x:auto;overflow-y:hidden;
    margin-top:8px;padding-block:10px 30px;scrollbar-width:none;
    scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .hero__side::-webkit-scrollbar{display:none}
  .hero__side>*{flex:0 0 74%;scroll-snap-align:start}
  .scrollcue{display:none}
  .hero__in{padding-bottom:clamp(40px,6vh,64px)}
  /* backdrop-filter inside a scrolling ancestor samples the wrong backdrop on
     iOS and leaves a hard seam along the bottom edge. solid ground instead. */
  .fcard{padding:16px 18px;backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(14,20,16,.66);border-color:rgba(255,255,255,.15);
    box-shadow:0 16px 34px -20px rgba(0,0,0,.75)}
  .fcard--stat b{font-size:32px}
}

/* trust panel — overlaps the hero seam */
.trust{position:relative;z-index:5;margin-top:clamp(-56px,-5vw,-40px)}
.trust__panel{
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-3);
  display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;
}
.trust__cell{padding:26px 22px;display:flex;flex-direction:column;gap:7px;justify-content:center;border-right:1px solid var(--line-soft)}
.trust__cell:last-child{border-right:0}
.trust__v{font-family:Archivo,sans-serif;font-weight:800;font-stretch:110%;font-size:clamp(22px,2.4vw,31px);letter-spacing:-.035em;line-height:1}
.trust__l{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);line-height:1.45}
@media (max-width:900px){
  .trust__panel{grid-template-columns:repeat(2,1fr)}
  .trust__cell{border-bottom:1px solid var(--line-soft)}
  .trust__cell:nth-child(2n){border-right:0}
  .trust__cell:nth-child(3){grid-column:1/-1;border-right:0}
}

/* ============================================================
   brand story
   ============================================================ */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.story__art{position:relative;padding-bottom:58px;padding-right:46px}
.story__main{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-3)}
.story__inset{
  position:absolute;right:0;bottom:0;width:60%;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;
  border:7px solid var(--paper);box-shadow:var(--shadow-2);
}
.annot{position:absolute;left:-6px;top:-26px;display:flex;align-items:center;gap:9px;transform:rotate(-2.4deg);
  font-family:"DM Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald-br)}
.annot svg{width:34px;height:20px;flex:0 0 auto}
.story__body p+p{margin-top:19px}
.story__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.story__facts b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-stretch:110%;font-size:clamp(25px,2.6vw,34px);letter-spacing:-.035em;line-height:1}
.story__facts span{display:block;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);margin-top:9px;line-height:1.4}
@media (max-width:900px){.story{grid-template-columns:1fr}.story__art{padding-right:34px;padding-bottom:44px}}

/* ============================================================
   services showcase
   ============================================================ */
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.24fr);gap:clamp(24px,4vw,64px);margin-top:clamp(40px,6vw,70px);align-items:start}
.svc__nav{display:flex;flex-direction:column;border-top:1px solid var(--band-line)}
.svc__tab{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--band-line);padding:clamp(17px,2vw,25px) 6px;cursor:pointer;
  color:var(--band-text-2);transition:color .3s,padding-left .4s var(--ease-out);position:relative;
}
.svc__tab::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--emerald-lt);transition:width .55s var(--ease-out)}
.svc__tab:hover{color:var(--band-text);padding-left:12px}
.svc__tab[aria-selected="true"]{color:var(--band-text);padding-left:12px}
.svc__tab[aria-selected="true"]::after{width:100%}
.svc__n{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--emerald-lt);opacity:.75}
.svc__t{font-family:Archivo,sans-serif;font-weight:700;font-stretch:108%;font-size:clamp(20px,2.5vw,30px);letter-spacing:-.03em;line-height:1.05}
.svc__go{opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .45s var(--ease-out);color:var(--emerald-lt)}
.svc__tab[aria-selected="true"] .svc__go{opacity:1;transform:none}

.svc__stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--band-2);aspect-ratio:4/3.1;box-shadow:var(--shadow-3)}
.svc__stage .scene{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.2s var(--ease-out)}
.svc__stage .scene.is-on{opacity:1;transform:none}
.svc__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,3vw,34px);color:#fff}
.svc__cap p{font-size:clamp(15px,1.4vw,17.5px);line-height:1.55;color:rgba(255,255,255,.85);max-width:44ch;margin-top:12px}
.svc__cap .link-arrow{color:#fff;margin-top:20px}
.svc__cap .link-arrow:hover{color:var(--emerald-lt)}
.svc__specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.svc__specs li{list-style:none;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border:1px solid rgba(255,255,255,.26);border-radius:999px;color:rgba(255,255,255,.82)}
@media (max-width:900px){
  .svc{grid-template-columns:1fr}
  .svc__t{font-size:21px}
  /* The caption is absolutely positioned over the photo and anchored to the
     bottom. On a phone the stage is only ~280px tall while the caption needs
     well over 300px for its heading, lede, three spec chips and link, so the
     text overflowed upward and was sliced off by overflow:hidden.
     Let the stage grow to whatever the caption needs instead of forcing an
     aspect ratio, keep the photo covering the whole box, and put a scrim
     behind the text so it stays readable over the image. */
  .svc__stage{order:-1;aspect-ratio:auto;min-height:58vw;display:flex;align-items:flex-end}
  .svc__stage .scene{width:100%;height:100%;object-fit:cover}
  /* relative + z-index, not static: the .scene photos are absolutely
     positioned and come after the caption in the DOM, so a static caption
     gets painted over by them and disappears entirely. */
  .svc__cap{position:relative;z-index:1;width:100%;padding:96px 20px 22px;
    background:linear-gradient(to top,rgba(6,14,10,.94) 46%,rgba(6,14,10,.72) 72%,rgba(6,14,10,0) 100%)}
  .svc__cap p{max-width:none}
}

/* ============================================================
   diagnostic
   ============================================================ */
.dx__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(32px,4vw,48px)}
.dx__card{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 18px 18px;
  transition:border-color .3s,transform .4s var(--ease-out),box-shadow .4s var(--ease-out),background-color .3s;
}
.dx__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--emerald-lt)}
.dx__card[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:#fff;box-shadow:var(--shadow-2)}
.dx__card[aria-pressed="true"] .dx__icon{color:#fff}
.dx__icon{width:34px;height:34px;color:var(--emerald-br);transition:color .3s}
.dx__label{font-family:Archivo,sans-serif;font-weight:700;font-stretch:104%;font-size:15.5px;letter-spacing:-.02em;line-height:1.2}
.dx__panel{
  margin-top:14px;background:var(--band);color:var(--band-text);border-radius:var(--r-lg);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(22px,3vw,44px);
  padding:clamp(26px,3.4vw,44px);box-shadow:var(--shadow-2);
}
.dx__panel h3{font-size:clamp(23px,2.6vw,32px)}
.dx__panel p{color:var(--band-text-2);margin-top:14px;line-height:1.6;max-width:56ch}
.dx__meter{margin-top:24px}
.dx__bar{height:5px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:10px}
.dx__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--emerald-br),var(--emerald-lt));
  transition:width .8s var(--ease-out)}
.dx__next{background:rgba(255,255,255,.055);border:1px solid var(--band-line);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.dx__empty{margin-top:14px;border:1px dashed var(--line);border-radius:var(--r-lg);padding:30px;text-align:center;color:var(--text-3);
  font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:900px){.dx__grid{grid-template-columns:repeat(2,1fr)}.dx__panel{grid-template-columns:1fr}}

/* ============================================================
   before / after
   ============================================================ */
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9.6;background:var(--band-2);
  box-shadow:var(--shadow-3);touch-action:pan-y;user-select:none;margin-top:clamp(28px,4vw,44px)}
.ba__layer{position:absolute;inset:0}
.ba__layer .scene{transform:scaleX(-1)}
.ba__layer--after{clip-path:inset(0 0 0 var(--pos,55%))}
.ba__tag{position:absolute;top:18px;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;background:rgba(9,16,13,.6);color:#fff;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18)}
.ba__tag--b{left:18px}.ba__tag--a{right:18px}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos,55%);width:2px;background:#fff;box-shadow:0 0 22px rgba(0,0,0,.55);pointer-events:none}
.ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:999px;
  background:#fff;color:var(--band);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba__range:focus-visible+.ba__handle{outline:3px solid var(--emerald-lt);outline-offset:2px}
.ba__foot{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:flex-end;justify-content:space-between;margin-top:26px}
.ba__thumbs{display:flex;gap:10px;flex-wrap:wrap}
.ba__thumb{width:104px;aspect-ratio:3/2;border-radius:var(--r-sm);overflow:hidden;border:2px solid transparent;
  cursor:pointer;padding:0;background:none;position:relative;transition:border-color .3s,transform .35s var(--ease-out);filter:saturate(.7)}
.ba__thumb:hover{transform:translateY(-3px)}
.ba__thumb[aria-current="true"]{border-color:var(--emerald-br);filter:none}

/* ============================================================
   portfolio
   ============================================================ */
.pf{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.5vw,18px);margin-top:clamp(34px,4.5vw,52px)}
.pf__i{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--band-2);display:block;text-decoration:none;color:#fff}
.pf__i .scene{transition:transform 1.1s var(--ease-out)}
.pf__i:hover .scene{transform:scale(1.07)}
.pf__i--a{grid-column:span 4;aspect-ratio:16/10}
.pf__i--b{grid-column:span 2;aspect-ratio:3/4}
.pf__i--c{grid-column:span 2;aspect-ratio:1/1}
.pf__i--d{grid-column:span 2;aspect-ratio:1/1}
.pf__i--e{grid-column:span 2;aspect-ratio:1/1}
.pf__i--f{grid-column:span 6;aspect-ratio:21/7}
.pf__meta{position:absolute;inset:auto 0 0 0;padding:clamp(16px,2vw,26px);z-index:2;
  transform:translateY(10px);opacity:.92;transition:transform .5s var(--ease-out),opacity .4s}
.pf__i:hover .pf__meta{transform:none;opacity:1}
.pf__meta>span{display:block}
.pf__city{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald-lt)}
.pf__svcname{font-family:Archivo,sans-serif;font-weight:700;font-stretch:106%;font-size:clamp(17px,1.8vw,23px);letter-spacing:-.025em;margin-top:7px;line-height:1.1}
.pf__mat{font-size:13px;color:rgba(255,255,255,.72);margin-top:6px}
.pf__meta>span.pf__view{display:inline-flex}
.pf__view{align-items:center;gap:8px;margin-top:12px;font-family:"DM Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease-out),opacity .35s}
.pf__i:hover .pf__view{max-height:30px;opacity:1}
@media (max-width:820px){
  .pf{grid-template-columns:repeat(2,1fr)}
  .pf__i--a,.pf__i--f{grid-column:span 2;aspect-ratio:16/10}
  .pf__i--b{grid-column:span 2;aspect-ratio:4/3}
  .pf__meta{transform:none;opacity:1}.pf__view{max-height:30px;opacity:1}
}

/* ============================================================
   marquee
   ============================================================ */
.mq{overflow:hidden;padding-block:clamp(44px,6vw,72px);position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq__track{display:flex;gap:16px;width:max-content;animation:mqroll 62s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
@keyframes mqroll{to{transform:translateX(-50%)}}
.mq__q{flex:0 0 auto;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;box-shadow:var(--shadow-1)}
.mq__q p{font-size:15.5px;line-height:1.55;margin-top:11px}
.mq__q cite{display:block;font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);font-style:normal;margin-top:12px}

/* ============================================================
   service areas
   ============================================================ */
.areas{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:center;margin-top:clamp(32px,4vw,52px)}
.map{position:relative;width:100%;aspect-ratio:1000/680}
.map svg{width:100%;height:100%;display:block;overflow:visible}
.map__pin{cursor:pointer}
.map__dot{transition:r .35s var(--ease-out),fill .3s}
.map__pin:hover .map__dot,.map__pin[aria-current="true"] .map__dot{fill:var(--emerald-lt)}
.map__ring{opacity:0;transition:opacity .3s,transform .5s var(--ease-out);transform-box:fill-box;transform-origin:center}
.map__pin:hover .map__ring,.map__pin[aria-current="true"] .map__ring{opacity:1}
.map__name{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.06em;fill:var(--band-text-2);transition:fill .3s}
.map__pin:hover .map__name,.map__pin[aria-current="true"] .map__name{fill:var(--band-text)}
.area__card{background:rgba(255,255,255,.05);border:1px solid var(--band-line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px)}
.area__stats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0;padding-block:22px;border-block:1px solid var(--band-line)}
.area__stats b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-stretch:110%;font-size:27px;letter-spacing:-.035em}
.area__stats span{display:block;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--band-text-2);margin-top:7px}
.area__all{display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(30px,4vw,44px)}
.area__all button{background:none;border:1px solid var(--band-line);color:var(--band-text-2);border-radius:999px;
  padding:8px 14px;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.07em;cursor:pointer;transition:all .25s}
.area__all button:hover{border-color:var(--emerald-lt);color:var(--emerald-lt)}
.area__all button[aria-current="true"]{background:var(--emerald-lt);border-color:var(--emerald-lt);color:var(--band)}
@media (max-width:900px){.areas{grid-template-columns:1fr}}

/* ============================================================
   process / financing / faq
   ============================================================ */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(36px,5vw,56px);counter-reset:p}
.proc__s{position:relative;padding-top:30px;border-top:2px solid var(--line)}
.proc__s:first-child{border-top-color:var(--emerald-br)}
.proc__n{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--emerald-br);position:absolute;top:-2px;
  background:var(--paper);padding-right:10px;transform:translateY(-50%)}
.proc__s h3{font-size:clamp(18px,1.8vw,22px);margin-bottom:10px}
.proc__s p{font-size:14.5px;line-height:1.55;color:var(--text-2)}
.proc__s .mono{display:block;margin-top:12px;color:var(--text-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:900px){.proc{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.proc{grid-template-columns:1fr}}

.fin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,4vw,64px);align-items:center}
.fin__calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-2)}
.fin__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-block:14px;border-bottom:1px solid var(--line-soft)}
.fin__row:last-of-type{border-bottom:0}
.fin__row span{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-2)}
.fin__row b{font-family:Archivo,sans-serif;font-weight:700;font-stretch:108%;font-size:19px;letter-spacing:-.02em}
.fin__big{font-family:Archivo,sans-serif;font-weight:800;font-stretch:112%;font-size:clamp(44px,6vw,72px);letter-spacing:-.045em;line-height:1;color:var(--emerald)}
input[type=range].slider{width:100%;accent-color:var(--emerald-br);margin:18px 0 6px}
@media (max-width:900px){.fin{grid-template-columns:1fr}}

.faq{border-top:1px solid var(--line);margin-top:clamp(32px,4vw,48px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:Archivo,sans-serif;font-weight:700;font-stretch:106%;font-size:clamp(17px,1.8vw,22px);letter-spacing:-.022em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-6px;
  border-right:2px solid var(--emerald-br);border-bottom:2px solid var(--emerald-br);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq p{padding:0 8% 26px 0;color:var(--text-2);line-height:1.65;max-width:72ch}

/* ============================================================
   final CTA + footer
   ============================================================ */
.cta{position:relative;overflow:clip;background:var(--band);color:var(--band-text)}
.cta__media{position:absolute;inset:0;opacity:.32}
.cta__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(30px,5vw,80px);align-items:center}
.form{background:rgba(255,255,255,.055);border:1px solid var(--band-line);border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--band-text-2)}
.field input,.field select{
  background:rgba(255,255,255,.07);border:1px solid var(--band-line);border-radius:var(--r-sm);
  color:var(--band-text);padding:13px 14px;font:500 15px Manrope,sans-serif;transition:border-color .25s,background-color .25s}
.field input::placeholder{color:rgba(255,255,255,.34)}
.field input:focus,.field select:focus{border-color:var(--emerald-lt);background:rgba(255,255,255,.1);outline:none}
.field select option{background:#0B1310;color:#F2F6F3}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{min-width:0}
.field input,.field select,.field textarea{width:100%;min-width:0;box-sizing:border-box}
.form__note{font-size:12.5px;color:var(--band-text-2);margin-top:14px;line-height:1.5}
.form .btn{width:100%;margin-top:6px}
@media (max-width:900px){.cta__in{grid-template-columns:1fr}.form__row{grid-template-columns:1fr}}

.ftr{background:var(--band-2);color:var(--band-text);padding-block:clamp(56px,7vw,84px) 34px}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.ftr h4{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald-lt);font-weight:500;font-stretch:normal;margin-bottom:16px}
.ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.ftr a{text-decoration:none;color:var(--band-text-2);font-size:14.5px;transition:color .22s}
.ftr a:hover{color:var(--emerald-lt)}
.ftr__cities{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:20px}
.ftr__cities a{font-size:13px}
.ftr__bot{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;
  margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--band-line);
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--band-text-2)}
/* minmax(0,1fr), not a bare 1fr: a bare 1fr is minmax(auto,1fr), so a column
   whose content has a wide min-content width grows past its share and pushes
   the whole page sideways. That was the 4px horizontal scroll on every page. */
@media (max-width:820px){.ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The brand and contact block spans the full width: in a half column it is
     ~161px wide, and office@emeraldroofingnc.com needs about 170px, so the
     address was breaking mid-word as "office@emeraldroo / fingnc.com". */
  .ftr__top>:first-child{grid-column:1/-1}
  .ftr__top a,.ftr__top .ftr__h{overflow-wrap:break-word}}

/* sticky mobile action bar */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:1px;
  background:var(--band-line);padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--band-line)}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 8px;text-decoration:none;
  background:var(--band);color:var(--band-text);font-family:Archivo,sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.05em;text-transform:uppercase}
.mbar a.is-primary{background:var(--emerald-br);color:#06120D}
@media (max-width:1200px){.mbar{display:flex}body{padding-bottom:58px}}
/* the sticky bar floats over the fold, so the hero has to end above it */
@media (max-width:1200px){.hero__in{padding-bottom:calc(clamp(56px,8vh,96px) + 64px)}}

/* reveal — resting state is VISIBLE; motion only enhances */
.rv{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease-out),transform .95s var(--ease-out)}
  .js .rv.is-in{opacity:1;transform:none}
  .js .rv-d1{transition-delay:.08s}.js .rv-d2{transition-delay:.16s}.js .rv-d3{transition-delay:.24s}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .mq__track{animation:none}
}

/* ============================================================
   interior page components
   ============================================================ */
.bc{padding-top:calc(86px + env(safe-area-inset-top,0px));padding-bottom:6px}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;
  font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.bc a{color:var(--text-2);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.bc a:hover{color:var(--emerald-br);border-bottom-color:currentColor}
.bc li+li::before{content:"/";margin-right:8px;color:var(--line);font-weight:400}
.bc [aria-current]{color:var(--text)}
.band--dark .bc ol{color:var(--band-text-2)}
.band--dark .bc a{color:var(--band-text-2)}
.band--dark .bc [aria-current]{color:var(--band-text)}

.phero{position:relative;background:var(--band);color:var(--band-text);overflow:clip;isolation:isolate}
.phero__media{position:absolute;inset:0;z-index:0}
.phero__media>.scene{position:absolute;inset:0;width:100%;height:100%}
.phero__in{position:relative;z-index:2;padding-bottom:clamp(48px,7vw,86px)}
.phero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,60px);align-items:end;margin-top:clamp(26px,4vw,44px)}
.phero h1{font-size:clamp(38px,6.6vw,84px);font-weight:800;font-stretch:116%;letter-spacing:-.042em;line-height:.92}
.phero h1 em{font-style:normal;color:var(--emerald-lt);display:block}
.phero__lede{font-size:clamp(16.5px,1.5vw,20px);line-height:1.6;color:rgba(255,255,255,.82);max-width:52ch;margin-top:24px}
.phero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.phero__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding:0;list-style:none}
.phero__chips li{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:7px 12px;border:1px solid rgba(255,255,255,.26);border-radius:999px;color:rgba(255,255,255,.84)}
@media (max-width:900px){.phero__grid{grid-template-columns:1fr}}

.prose{max-width:68ch}
.prose p{margin-bottom:19px;line-height:1.68;color:var(--text-2)}
.prose p:first-child{font-size:clamp(17px,1.45vw,19.5px);color:var(--text)}
.prose p:last-child{margin-bottom:0}
.band--dark .prose p{color:var(--band-text-2)}
.band--dark .prose p:first-child{color:var(--band-text)}

.deflist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(30px,4vw,46px)}
.deflist>div{background:var(--surface);padding:clamp(20px,2.4vw,28px)}
.deflist dt{font-family:Archivo,sans-serif;font-weight:700;font-stretch:104%;font-size:16.5px;letter-spacing:-.02em;line-height:1.22}
.deflist dd{margin:9px 0 0;font-size:14.5px;line-height:1.58;color:var(--text-2)}
.band--dark .deflist{background:var(--band-line);border-color:var(--band-line)}
.band--dark .deflist>div{background:var(--band-2)}
.band--dark .deflist dd{color:var(--band-text-2)}
@media (max-width:760px){.deflist{grid-template-columns:1fr}}

.tablewrap{overflow-x:auto;margin-top:clamp(26px,3vw,38px);border:1px solid var(--line);border-radius:var(--r-lg);
  /* these tables are wider than a phone and scroll sideways. Without a hint
     the cut-off right edge reads as a broken layout, so fade the edge while
     there is more to scroll to and let it clear once you reach the end. */
  background:linear-gradient(to right,var(--bg) 30%,rgba(255,255,255,0)),
             linear-gradient(to left,var(--bg) 30%,rgba(255,255,255,0)) 100% 0,
             linear-gradient(to right,rgba(0,0,0,.22),rgba(0,0,0,0) 22px),
             linear-gradient(to left,rgba(0,0,0,.22),rgba(0,0,0,0) 22px) 100% 0;
  background-repeat:no-repeat;background-size:36px 100%,36px 100%,16px 100%,16px 100%;
  background-attachment:local,local,scroll,scroll}
table.spec{width:100%;border-collapse:collapse;min-width:560px;background:var(--surface)}
table.spec th,table.spec td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.spec thead th{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-2);font-weight:500;background:var(--paper-2)}
table.spec tbody th{font-family:Archivo,sans-serif;font-weight:700;font-stretch:104%;font-size:15.5px;letter-spacing:-.018em;width:34%}
table.spec td{font-size:14.5px;color:var(--text-2)}
table.spec td.num{font-family:"DM Mono",monospace;font-size:13.5px;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
table.spec tbody tr:last-child th,table.spec tbody tr:last-child td{border-bottom:0}

/* On a phone these stack into labelled cards instead of scrolling sideways,
   so the wrapper stops being a scroll container and loses the edge fades. */
@media (max-width:820px){
  .tablewrap{overflow-x:visible;background:none;border:0;border-radius:0}
  table.spec{min-width:0;background:none;display:block}
  table.spec thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  table.spec tbody,table.spec tr,table.spec th,table.spec td{display:block;width:auto}
  table.spec tbody tr{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-md);padding:4px 0;margin-bottom:12px}
  table.spec tbody tr:last-child{margin-bottom:0}
  table.spec th,table.spec td{border-bottom:0;padding:10px 16px;width:auto}
  /* width:auto repeated here: the base rule is table.spec tbody th, which is
     more specific than the th,td rule above, so it kept forcing 34%. */
  table.spec tbody th{font-size:17px;padding-bottom:2px;width:auto}
  table.spec td.num{white-space:normal}
  table.spec td[data-label]::before,table.spec tbody th[data-label]::before{
    content:attr(data-label);display:block;font-family:"DM Mono",ui-monospace,Menlo,monospace;
    font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald-lt);
    opacity:.85;margin-bottom:5px}
  table.spec tbody th[data-label]::before{color:var(--text-2);opacity:.65}
}

.checks{list-style:none;padding:0;margin:clamp(24px,3vw,36px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 34px}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;font-size:15px;line-height:1.55;color:var(--text-2)}
.checks svg{width:18px;height:18px;margin-top:3px;color:var(--emerald-br);flex:0 0 auto}
.checks b{color:var(--text);font-weight:600}
.band--dark .checks li{color:var(--band-text-2)}
.band--dark .checks b{color:var(--band-text)}
.band--dark .checks svg{color:var(--emerald-lt)}
@media (max-width:760px){.checks{grid-template-columns:1fr}}

.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:clamp(26px,3vw,38px)}
.linkcard{display:flex;flex-direction:column;gap:7px;text-decoration:none;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:20px;
  transition:transform .35s var(--ease-out),border-color .3s,box-shadow .35s var(--ease-out)}
.linkcard:hover{transform:translateY(-3px);border-color:var(--emerald-lt);box-shadow:var(--shadow-2)}
.linkcard b{font-family:Archivo,sans-serif;font-weight:700;font-stretch:104%;font-size:16px;letter-spacing:-.02em}
.linkcard span{font-size:13.5px;color:var(--text-2);line-height:1.45}
.linkcard i{font-family:"DM Mono",monospace;font-style:normal;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--emerald-br)}
.band--dark .linkcard{background:var(--band-2);border-color:var(--band-line)}
.band--dark .linkcard span{color:var(--band-text-2)}
.band--dark .linkcard i{color:var(--emerald-lt)}

.pilllinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0;list-style:none}
.pilllinks a{display:inline-block;text-decoration:none;border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-family:"DM Mono",monospace;font-size:11.5px;letter-spacing:.06em;color:var(--text-2);transition:all .22s}
.pilllinks a:hover{border-color:var(--emerald-br);color:var(--emerald-br)}
.band--dark .pilllinks a{border-color:var(--band-line);color:var(--band-text-2)}
.band--dark .pilllinks a:hover{border-color:var(--emerald-lt);color:var(--emerald-lt)}

.kfwrap{container-type:inline-size}
/* two up by default, and only as many across as there are facts once there
   is genuinely room. auto-fit was leaving an orphan cell in narrow columns. */
.keyfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(26px,3vw,38px)}
.keyfacts>div{background:var(--surface);padding:22px 20px}
@container (min-width:700px){.keyfacts{grid-template-columns:repeat(var(--kf,4),minmax(0,1fr))}}
@supports not (container-type:inline-size){
  .keyfacts{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
.keyfacts b{display:block;font-family:Archivo,sans-serif;font-weight:800;font-stretch:110%;
  font-size:clamp(20px,2.2vw,27px);letter-spacing:-.033em;line-height:1.05;
  overflow-wrap:anywhere;hyphens:none}
.keyfacts span{display:block;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);margin-top:8px;line-height:1.4}
.band--dark .keyfacts{background:var(--band-line);border-color:var(--band-line)}
.band--dark .keyfacts>div{background:var(--band-2)}
.band--dark .keyfacts span{color:var(--band-text-2)}

.callout{border-left:3px solid var(--emerald-br);background:var(--mint);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:22px 26px;margin-top:clamp(26px,3vw,36px);max-width:70ch}
.callout p{font-size:15px;line-height:1.62;color:var(--text)}
.callout strong{font-weight:700}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:center}
.split__art{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-3)}
.split__art>.scene{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:860px){.split{grid-template-columns:1fr}}

.toc{position:sticky;top:calc(80px + env(safe-area-inset-top,0px));align-self:start}
.toc ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:2px}
.toc a{display:block;text-decoration:none;padding:8px 0 8px 14px;border-left:2px solid var(--line);
  font-size:14px;color:var(--text-2);transition:all .25s}
.toc a:hover{border-left-color:var(--emerald-br);color:var(--text);padding-left:18px}
.withtoc{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:start}
@media (max-width:980px){.withtoc{grid-template-columns:1fr}.toc{display:none}}

/* breadcrumbs sitting inside a dark page hero */
.phero .bc ol{color:var(--band-text-2)}
.phero .bc a{color:var(--band-text-2)}
.phero .bc a:hover{color:var(--emerald-lt)}
.phero .bc [aria-current]{color:var(--band-text)}
.phero .bc li+li::before{color:rgba(255,255,255,.28)}

/* real photography slots, with captions that dodge a burned in logo */
.pf__i picture{position:absolute;inset:0;display:block}
.pf__i picture .scene{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.pf__i:hover picture .scene{transform:scale(1.07)}
.scrim--soft-top{background:linear-gradient(0deg,rgba(9,16,13,0) 45%,rgba(9,16,13,.78) 100%)}
.pf__meta--top{inset:0 0 auto 0}
.split__art picture,.phero__media picture,.svc__stage picture,.mega__feature picture{position:absolute;inset:0;display:block}
.split__art picture .scene,.phero__media picture .scene,.svc__stage picture .scene{width:100%;height:100%;object-fit:cover}

/* certification badges in the trust panel */
/* the credentials get their own full width row under the numbers, instead
   of four logos fighting for one fifth of the panel */
.trust__cell--badges{grid-column:1/-1;padding:0;border-right:0;
  border-top:1px solid var(--line-soft)}
.trust__cell--badges .badges{border:0;border-radius:0;background:var(--line-soft);
  grid-template-columns:repeat(4,1fr)}
.trust__cell--badges .badge{padding:16px 12px 14px;background:var(--surface)}
.trust__cell--badges .badge:hover{background:#fff}
@media (max-width:640px){.trust__cell--badges .badges{grid-template-columns:repeat(2,1fr)}}
.badges{display:flex;align-items:center;justify-content:space-around;gap:clamp(8px,1.4vw,18px);flex-wrap:wrap}
.badge{margin:0;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;flex:0 1 auto}
.badge img{width:clamp(52px,5vw,74px);height:auto;display:block;mix-blend-mode:multiply}
:root[data-theme="dark"] .badge img{mix-blend-mode:normal;background:#fff;border-radius:8px;padding:3px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge img{mix-blend-mode:normal;background:#fff;border-radius:8px;padding:3px}}

@media (max-width:900px){
  .trust__panel{grid-template-columns:repeat(2,1fr)}
  .trust__cell--badges{grid-column:1/-1;border-right:0;border-bottom:0}
}
.story__inset{aspect-ratio:3/4;width:52%}

/* the panel background. the column count lives with the panel's own rule
   further up: this used to redefine it to four and was fighting it. */
.trust__panel{background:color-mix(in srgb,var(--surface) 93%,transparent)}
/* the badge cells are white now, so the logos no longer need their own chip */
.badge img{mix-blend-mode:normal;background:transparent;border-radius:0;padding:0;box-shadow:none}

/* badges: logos carry the meaning, captions were colliding and are gone.
   The label stays in the DOM for screen readers. */
.badge__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.badges{gap:clamp(10px,1.8vw,22px)}
.badge{flex:0 1 auto;min-width:0}
.badge img{width:clamp(58px,5.6vw,84px)}
@media (max-width:900px){.badge img{width:clamp(54px,14vw,76px)}}

/* footer section labels are not headings, they sit under the page h1/h2 tree */
.ftr .ftr__h{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--emerald-lt);font-weight:500;margin:0 0 16px}

/* ============================================================
   mobile drawer, simplified with two grouped sections
   ============================================================ */
.drawer__nav{display:flex;flex-direction:column}
.drawer a:not(.btn){display:block;text-decoration:none;padding:15px 0;border-bottom:1px solid var(--line-soft);
  font-family:Archivo,sans-serif;font-weight:700;font-stretch:104%;font-size:19px;letter-spacing:-.02em;color:var(--text)}
.drawer__group{border-bottom:1px solid var(--line-soft)}
.drawer__group summary{list-style:none;cursor:pointer;position:relative;padding:15px 34px 15px 0;
  font-family:Archivo,sans-serif;font-weight:700;font-stretch:104%;font-size:19px;letter-spacing:-.02em;color:var(--text)}
.drawer__group summary::-webkit-details-marker{display:none}
.drawer__group summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--emerald-br);border-bottom:2px solid var(--emerald-br);
  transform:rotate(45deg);transition:transform .28s var(--ease)}
.drawer__group[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.drawer__sub{padding:2px 0 12px 2px;display:flex;flex-direction:column}
.drawer__sub a:not(.btn){font-family:Manrope,sans-serif;font-weight:500;font-size:15.5px;letter-spacing:0;
  padding:10px 0 10px 16px;border-bottom:0;color:var(--text-2);border-left:2px solid var(--line)}
.drawer__sub a:not(.btn):hover{color:var(--emerald-br);border-left-color:var(--emerald-br)}
/* the CTA is a button, so it must not inherit the drawer link rules */
.drawer .btn.drawer__cta{display:flex;width:100%;margin-top:22px;color:#fff;
  align-items:center;justify-content:center;text-align:center;padding:17px 26px}
.drawer__phone{display:block;text-align:center;margin-top:16px;padding:0;border-bottom:0;
  font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:15px;letter-spacing:.04em;color:var(--text-2)}
.drawer a.drawer__phone{border-bottom:0;font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:15px;font-weight:500}

/* real project sequence: one job, three frames */
.seq{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px);margin-top:clamp(30px,4vw,48px)}
.seq__item{margin:0;position:relative}
.seq__item picture{display:block;position:relative;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-2)}
.seq__item picture .scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seq__item figcaption{display:block;margin-top:16px}
.seq__n{display:inline-block;font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:10.5px;
  letter-spacing:.14em;color:var(--emerald-lt);margin-bottom:8px}
.seq__item figcaption b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-stretch:106%;
  font-size:19px;letter-spacing:-.022em;color:var(--band-text)}
.seq__cap{display:block;font-size:14px;line-height:1.5;color:var(--band-text-2);margin-top:7px}
/* Portrait variant. Phone photos taken up a roof slope are 3:4, and forcing
   them into the 4:3 grid above crops the slope out of every frame. */
.seq--tall .seq__item picture{aspect-ratio:3/4}
@media (min-width:821px){.seq--tall{grid-template-columns:repeat(3,1fr);row-gap:clamp(24px,3vw,40px)}}
@media (max-width:820px){.seq{grid-template-columns:1fr}.seq__item picture{aspect-ratio:16/10}
  /* one per row: two portrait columns on a phone left each frame ~170px, too
     small to read what the photograph is actually showing */
  .seq--tall{grid-template-columns:1fr}
  .seq--tall .seq__item picture{aspect-ratio:3/4}}

/* live Google reviews widget */
.greviews{margin-top:clamp(28px,3.6vw,44px);min-height:220px}
.greviews .lede{color:var(--text-2)}

/* ============================================================
   Google Ads landing pages. No navigation out by design.
   ============================================================ */
.lp__bar{position:sticky;top:0;z-index:90;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line);color:var(--text);padding-top:env(safe-area-inset-top,0px)}
.lp__barin{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.lp__bar .logo{cursor:default}
.lp__baract{display:flex;align-items:center;gap:14px}
.lp__baract .phone{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:14px;font-weight:500;color:var(--text)}
@media (max-width:560px){.lp__baract .phone span{display:none}.lp__baract .phone svg{width:18px;height:18px}}

.lp__hero .phero__in{padding-bottom:clamp(44px,6vw,72px)}
.lp__formband{background:var(--paper-2);padding-block:clamp(44px,6vw,76px)}
.lp__formgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,4vw,64px);align-items:center}
.lp__form{background:var(--band);border:1px solid var(--band-line);box-shadow:var(--shadow-3)}
.lp__tel{font-family:Archivo,sans-serif;font-weight:700;font-stretch:106%;font-size:clamp(19px,2vw,25px);
  letter-spacing:-.025em;color:var(--emerald);text-decoration:none;border-bottom:2px solid var(--emerald-lt)}
.lp__privacy{margin-top:16px;border-top:1px solid var(--band-line);padding-top:14px}
.lp__privacy summary{cursor:pointer;list-style:none;font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--band-text-2)}
.lp__privacy summary::-webkit-details-marker{display:none}
.lp__privacy p{font-size:12.5px;line-height:1.55;color:var(--band-text-2);margin-top:10px}
@media (max-width:900px){.lp__formgrid{grid-template-columns:1fr}}

.lp__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(28px,3.6vw,44px)}
.lp__shot{margin:0}
.lp__shot picture{display:block;position:relative;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-2)}
.lp__shot picture .scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp__shot figcaption{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-3);margin-top:10px;line-height:1.4}
@media (max-width:820px){.lp__grid{grid-template-columns:repeat(2,1fr)}}

.lp__foot{background:var(--band-2);color:var(--band-text-2);padding-block:36px;text-align:center;font-size:14px;line-height:1.8}
.lp__foot a{color:var(--emerald-lt);text-decoration:none}
.lp__foot strong{color:var(--band-text)}
.lp__legal{font-size:12px;color:var(--band-text-2);margin-top:12px;opacity:.8}
@media (max-width:1200px){.lp__foot{padding-bottom:70px}}
.lp__formgrid .keyfacts{grid-template-columns:repeat(2,1fr)}

/* ============================================================
   the real Emerald Roofing logo
   ============================================================ */
.logo{display:flex;align-items:center;gap:0;text-decoration:none;flex:0 0 auto}
.logo__img{height:clamp(46px,5.2vw,60px);width:auto;display:block}
.logo__img--dark{display:none}
.hdr.is-stuck .logo__img--light{display:none}
.hdr.is-stuck .logo__img--dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hdr.is-stuck .logo__img--light{display:block}
  :root:not([data-theme="light"]) .hdr.is-stuck .logo__img--dark{display:none}
}
:root[data-theme="dark"] .hdr.is-stuck .logo__img--light{display:block}
:root[data-theme="dark"] .hdr.is-stuck .logo__img--dark{display:none}
.ftr .logo__img{height:64px}
.lp__bar .logo__img--dark{display:block}
.lp__bar .logo__img--light{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lp__bar .logo__img--dark{display:none}
  :root:not([data-theme="light"]) .lp__bar .logo__img--light{display:block}
}
:root[data-theme="dark"] .lp__bar .logo__img--dark{display:none}
:root[data-theme="dark"] .lp__bar .logo__img--light{display:block}

/* ============================================================
   google business profile map embed
   ============================================================ */
.gmap{margin-top:clamp(30px,4vw,44px)}
.gmap__frame{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2);
  box-shadow:0 30px 70px -44px rgba(0,0,0,.45)}
.gmap__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.gmap__frame iframe{display:block;width:100%;height:clamp(300px,42vw,460px);border:0}
.gmap__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:16px;
  font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2)}
.gmap__cap a{color:var(--emerald-br);text-decoration:none;border-bottom:1px solid currentColor}
.gmap__cap a:hover{color:var(--emerald)}
.band--dark .gmap__frame{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  box-shadow:0 34px 80px -48px rgba(0,0,0,.9)}
.band--dark .gmap__frame::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.band--dark .gmap__cap{color:var(--band-text-2)}
.band--dark .gmap__cap a{color:var(--emerald-lt)}
@media (max-width:640px){.gmap__frame iframe{height:290px}}

/* ============================================================
   lead forms: hero form, consent, success state
   ============================================================ */
.field textarea{
  background:rgba(255,255,255,.07);border:1px solid var(--band-line);border-radius:var(--r-sm);
  color:var(--band-text);padding:13px 14px;font:500 15px Manrope,sans-serif;resize:vertical;min-height:84px;
  transition:border-color .25s,background-color .25s}
.field textarea::placeholder{color:rgba(255,255,255,.34)}
.field textarea:focus{border-color:var(--emerald-lt);background:rgba(255,255,255,.1);outline:none}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#E2725B;background:rgba(226,114,91,.09)}

.consent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 18px;cursor:pointer}
.consent input{flex:0 0 auto;width:17px;height:17px;margin-top:2px;accent-color:var(--emerald-br)}
.consent span{font-size:11.5px;line-height:1.55;color:var(--band-text-2)}
.consent a{color:var(--emerald-lt)}

.form__done{text-align:left}
.form__done p{font-size:14px;line-height:1.6;color:var(--band-text-2);margin:0 0 14px}
.form__donet{font-family:Archivo,sans-serif;font-stretch:110%;font-weight:800;font-size:22px;
  letter-spacing:-.03em;color:var(--band-text)!important;margin-bottom:10px!important}
.form__done .btn{width:100%}
.form__call{display:block;margin-top:14px;text-align:center;text-decoration:none;
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--band-text-2)}
.form__call:hover{color:var(--emerald-lt)}
.form.is-sending{opacity:.6;pointer-events:none}

/* the hero form.

   A solid light panel, not a glass one. On a photographic hero the
   translucent treatment turns every input into mud, and a form nobody can
   read is a form nobody fills in. Light card, dark text, one green button. */
.heroform{background:var(--paper);border:1px solid rgba(16,21,18,.1);
  border-radius:var(--r-xl);padding:clamp(20px,1.8vw,26px);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.72),0 2px 8px -2px rgba(0,0,0,.3);
  color:var(--text)}
.heroform__head{padding:0 2px 16px;border-bottom:1px solid rgba(16,21,18,.09);margin-bottom:18px}
.heroform__t{font-family:Archivo,sans-serif;font-stretch:112%;font-weight:800;
  font-size:clamp(20px,2vw,25px);letter-spacing:-.035em;line-height:1.04;color:var(--text)}
.heroform__s{font-size:12.5px;line-height:1.5;color:var(--text-2);margin-top:8px}

.heroform .form{background:transparent;border:0;padding:0;border-radius:0;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.heroform .eyebrow,.heroform .eyebrow--onband{color:var(--emerald-br)}
.heroform .field{margin-bottom:10px}
.heroform .field label{color:var(--text-2);font-size:9.5px;letter-spacing:.14em}
.heroform .field input,.heroform .field select,.heroform .field textarea{
  background:#fff;border:1px solid rgba(16,21,18,.16);color:var(--text);
  padding:11px 12px;font-size:14.5px;border-radius:var(--r-sm)}
.heroform .field input::placeholder,.heroform .field textarea::placeholder{color:rgba(16,21,18,.34)}
.heroform .field input:focus,.heroform .field select:focus,.heroform .field textarea:focus{
  border-color:var(--emerald-br);background:#fff;box-shadow:0 0 0 3px rgba(31,121,61,.14)}
.heroform .field select option{background:#fff;color:var(--text)}
.heroform .form__row{gap:10px}

/* the consent block reads as fine print, but the wording stays whole,
   because that text is what the SMS registration is written against */
.heroform .consent{background:rgba(16,21,18,.035);border:1px solid rgba(16,21,18,.07);
  border-radius:var(--r-sm);padding:10px 11px;margin:12px 0 14px;align-items:flex-start}
.heroform .consent input{width:16px;height:16px;margin-top:1px}
.heroform .consent span{font-size:10px;line-height:1.45;color:var(--text-2)}
.heroform .consent a{color:var(--emerald-br);text-decoration:underline}
.heroform .btn{margin-top:0;font-size:13.5px;padding-block:15px}
.heroform .form__note{color:var(--text-2);font-size:11.5px;margin-top:11px;text-align:center}
.heroform .form__donet{color:var(--text)!important}
.heroform .form__done p{color:var(--text-2)}
.heroform .form__call{color:var(--text-2)}

/* a line of proof under the button, where the eye lands after the CTA */
.heroform__proof{display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:14px;padding-top:13px;border-top:1px solid rgba(16,21,18,.09);
  font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2)}
.heroform__proof .stars{color:#E3A62F;font-size:12px;letter-spacing:.06em}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .heroform{background:#121714;border-color:rgba(255,255,255,.12)}
  :root:not([data-theme="light"]) .heroform .field input,
  :root:not([data-theme="light"]) .heroform .field select,
  :root:not([data-theme="light"]) .heroform .field textarea{
    background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
  :root:not([data-theme="light"]) .heroform .consent{background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.09)}
}

@media (max-width:980px){.heroform{margin-top:28px}}
/* short fields stay paired on a phone. one field per row turns a six field
   form into a page of scrolling, which is where people give up. */
@media (max-width:900px){
  .heroform .form__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .heroform .field{margin-bottom:9px}
  .heroform .field input,.heroform .field select{padding:10px 11px;font-size:14px}
  .heroform .field label{font-size:9px}
}

/* the same form inside a page hero */
.phero__form{margin-top:6px}
@media (max-width:980px){.phero__form{margin-top:26px}}

/* ============================================================
   roofr instant estimator
   ============================================================ */
.roofr{margin-top:clamp(28px,4vw,42px);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);box-shadow:0 34px 80px -46px rgba(0,0,0,.45)}
.roofr iframe{display:block;width:100%;height:760px;border:0}
.roofr__note{margin-top:18px;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2)}
.roofr__note a{color:var(--emerald-br)}
@media (max-width:700px){.roofr iframe{height:680px}}

/* the hero form column on interior pages */
.phero__grid{align-items:start}
.phero__chips{margin-top:26px}
@media (max-width:980px){
  .phero__grid{grid-template-columns:1fr}
  .phero__form{margin-top:28px}
}

.form__demo{margin-top:14px!important;padding-top:12px;border-top:1px dashed rgba(127,127,127,.35);
  font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}

/* eight services in the menu now, so the list runs in two columns
   rather than one very tall one */
.mega__list{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;align-content:start;align-items:start}
.mega__list .mega__link{align-items:flex-start;padding:11px 12px}
.mega__list .mega__t{line-height:1.2}
.mega__cta{justify-content:space-between}
@media (max-width:1180px){.mega__list{grid-template-columns:1fr}}

/* ============================================================
   paid landing page: offer strip and credential row
   ============================================================ */
.tbar{background:var(--emerald-br);color:#fff}
.tbar__in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:10px 20px;padding-block:15px}
.tbar__flag{font-family:Archivo,sans-serif;font-stretch:118%;font-weight:800;
  font-size:clamp(20px,2.4vw,28px);letter-spacing:-.03em;line-height:1;text-transform:uppercase}
.tbar__t{font-family:Manrope,sans-serif;font-weight:600;font-size:clamp(14px,1.5vw,17.5px);
  line-height:1.3;color:rgba(255,255,255,.95)}
.tbar__cta{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:#0B1310;color:#fff;border-radius:999px;padding:11px 22px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;
  transition:transform .2s var(--ease),background-color .2s}
.tbar__cta svg{width:16px;height:16px}
.tbar__cta:hover{background:#000;transform:translateY(-1px)}

.tstrip{background:var(--paper-2);border-bottom:1px solid var(--line)}
.tstrip__in{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,2vw,28px);
  padding-block:clamp(22px,3vw,34px);text-align:center}
.tstrip__i b{display:block;font-family:Archivo,sans-serif;font-stretch:112%;font-weight:800;
  font-size:clamp(21px,2.5vw,31px);letter-spacing:-.035em;line-height:1;color:var(--text)}
.tstrip__i span{display:block;margin-top:8px;font-family:"DM Mono",monospace;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);line-height:1.45}
.tstrip__i .tstrip__star{color:#E3A62F;letter-spacing:.16em;font-size:13px;display:inline-block;margin-bottom:4px}
.tstrip__badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,3vw,44px);padding-bottom:clamp(20px,2.6vw,30px)}
.tstrip__badges .badge img{width:clamp(56px,6vw,76px);height:auto}
@media (max-width:820px){
  .tstrip__in{grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .tstrip__i:last-child{grid-column:span 2}
  .tbar__in{flex-direction:column;text-align:center;gap:8px;padding-block:18px}
}

/* ============================================================
   credential badges: one plate, four cells, all clickable
   ============================================================ */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(16,21,18,.1);border:1px solid rgba(16,21,18,.1);
  border-radius:var(--r-lg);overflow:hidden}
.badge{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:10px;padding:18px 12px 15px;background:#fff;text-decoration:none;
  transition:background-color .22s var(--ease),transform .22s var(--ease)}
.badge img{width:clamp(50px,5vw,66px);height:auto;display:block;
  transition:transform .3s var(--ease)}
.badge__l{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);text-align:center;line-height:1.35}
.badge:hover{background:#F7FAF8}
.badge:hover img{transform:scale(1.07)}
.badge:focus-visible{outline:2px solid var(--emerald-br);outline-offset:-2px}
.band--dark .badges,.trust__panel .badges{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.14)}
@media (max-width:640px){.badges{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   social proof row
   ============================================================ */
.sp{margin-top:clamp(26px,3.4vw,40px)}
.sp__head{margin-bottom:16px}
.sp__h{font-family:Archivo,sans-serif;font-stretch:110%;font-weight:800;
  font-size:clamp(17px,1.8vw,21px);letter-spacing:-.03em;color:var(--band-text)}
.sp__s{font-size:13px;line-height:1.5;color:var(--band-text-2);margin-top:6px}
.sp__row{display:flex;flex-wrap:wrap;gap:9px}
.sp__i{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:8px 15px 8px 9px;
  transition:background-color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.sp__ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:#fff;flex:0 0 auto}
.sp__ic svg{width:19px;height:19px;display:block}
.sp__tx{display:flex;flex-direction:column;line-height:1.15}
.sp__tx b{font-family:Manrope,sans-serif;font-weight:700;font-size:13.5px;color:var(--band-text)}
.sp__note{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--band-text-2);margin-top:3px}
.sp__i:hover{background:rgba(255,255,255,.1);border-color:var(--emerald-lt);transform:translateY(-2px)}
.sp__i:focus-visible{outline:2px solid var(--emerald-lt);outline-offset:2px}
.sp--foot{margin-top:clamp(30px,4vw,44px);padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--band-line)}

/* on a light ground */
.sp--light .sp__h{color:var(--text)}
.sp--light .sp__s{color:var(--text-2)}
.sp--light .sp__i{background:var(--surface);border-color:var(--line)}
.sp--light .sp__ic{background:var(--paper-2);border:1px solid var(--line)}
.sp--light .sp__tx b{color:var(--text)}
.sp--light .sp__note{color:var(--text-2)}
.sp--light .sp__i:hover{background:#fff;border-color:var(--emerald-br)}
.sp--center .sp__row{justify-content:center}
.sp--center .sp__head{text-align:center}

/* ============================================================
   about: mission, core values, the story
   ============================================================ */
.ticks{list-style:none;padding:0;margin:18px 0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:30px;line-height:1.6;color:var(--text-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;
  border-radius:50%;background:var(--emerald-br)}
.ticks li::after{content:"";position:absolute;left:5px;top:calc(.45em + 5px);width:6px;height:3px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin-top:clamp(28px,3.5vw,42px)}
.vcard{background:var(--surface);padding:clamp(24px,2.6vw,32px)}
.vcard h3{font-family:Archivo,sans-serif;font-stretch:110%;font-weight:800;
  font-size:clamp(18px,1.9vw,22px);letter-spacing:-.03em;color:var(--text)}
.vcard p{margin-top:12px;font-size:14.5px;line-height:1.65;color:var(--text-2)}

.storygrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);margin-top:clamp(28px,3.5vw,42px);align-items:start}
.prose--band p{color:var(--band-text-2)}
.pullquote{border-left:2px solid var(--emerald-lt);padding:6px 0 6px 22px}
.pullquote__t{font-family:Archivo,sans-serif;font-stretch:106%;font-weight:700;
  font-size:clamp(18px,2vw,23px);line-height:1.3;letter-spacing:-.025em;color:var(--band-text)}
.pullquote__b{margin-top:14px;font-family:"DM Mono",monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--band-text-2)}
@media (max-width:900px){.storygrid{grid-template-columns:1fr}}

/* ============================================================
   blog
   ============================================================ */
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(18px,2.4vw,28px);margin-top:clamp(26px,3.4vw,40px)}
.bcard{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--emerald-br)}
.bcard__art{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.bcard__art picture{position:absolute;inset:0;display:block}
.bcard__art .scene{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.bcard:hover .bcard__art .scene{transform:scale(1.05)}
.bcard__body{display:flex;flex-direction:column;padding:clamp(18px,2vw,24px);gap:9px;flex:1}
.bcard__cat{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--emerald-br)}
.bcard__t{font-family:Archivo,sans-serif;font-stretch:108%;font-weight:800;
  font-size:clamp(17px,1.8vw,21px);letter-spacing:-.03em;line-height:1.2;color:var(--text)}
.bcard__d{font-size:13.5px;line-height:1.55;color:var(--text-2);flex:1}
.bcard__m{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}

.phero--post .phero__in{padding-block:clamp(90px,12vh,150px) clamp(36px,5vh,60px)}
.post__h1{font-size:clamp(30px,4.6vw,58px);font-weight:800;font-stretch:112%;
  letter-spacing:-.04em;line-height:1.02;margin-top:16px;max-width:20ch}
.post__meta{margin-top:18px;font-family:"DM Mono",monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}

.post{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(32px,5vw,64px);align-items:start}
.post__body{max-width:72ch}
.post__body h2{font-family:Archivo,sans-serif;font-stretch:110%;font-weight:800;
  font-size:clamp(22px,2.5vw,30px);letter-spacing:-.035em;line-height:1.15;
  margin-top:clamp(34px,3.6vw,48px)}
.post__body h3{font-family:Archivo,sans-serif;font-stretch:106%;font-weight:700;
  font-size:clamp(17px,1.9vw,21px);letter-spacing:-.025em;margin-top:28px}
.post__body p{margin-top:16px;line-height:1.72;color:var(--text-2);font-size:16px}
.post__body strong{color:var(--text);font-weight:700}
.post__body ul{margin:18px 0 0;padding-left:0;list-style:none;display:grid;gap:10px}
.post__body li{position:relative;padding-left:26px;line-height:1.65;color:var(--text-2)}
.post__body li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--emerald-br)}

.post__rail{position:sticky;top:96px}
.post__card{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--paper-2)}
.post__cardt{font-family:Archivo,sans-serif;font-stretch:108%;font-weight:800;font-size:19px;
  letter-spacing:-.03em;line-height:1.2;color:var(--text)}
.post__cardd{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.post__card .btn{width:100%;margin-top:18px}
.post__tel{display:block;margin-top:12px;text-align:center;text-decoration:none;
  font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2)}
@media (max-width:900px){
  .post{grid-template-columns:1fr}
  .post__rail{position:static}
}

/* calendly inline booking */
.cal{margin-top:clamp(26px,3.4vw,40px);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface);box-shadow:0 30px 70px -46px rgba(0,0,0,.4)}
.cal__note{margin-top:18px;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2)}
.cal__note a{color:var(--emerald-br)}
.mega__acts{display:grid;gap:9px}
.mega__acts .btn{width:100%}

/* two real before and after jobs stacked in one band */
.ba__job--sep{margin-top:clamp(52px,6vw,84px);padding-top:clamp(48px,5.5vw,76px);
  border-top:1px solid var(--band-line)}