/* ═══════════════════════════════════════════════════════════════════
   ALLSTEEL FENCE — main.css
   Brand: #F0CB00 (plate yellow) / #221E20 (plate black), sampled from logo
   ═══════════════════════════════════════════════════════════════════ */

/* ── tokens ──────────────────────────────────────────────────────── */
:root{
  --y:#F0CB00;
  --y-d:#D4B300;
  --blk:#221E20;

  --ink:#0C0C0E;          /* page ground        */
  --ink-2:#111114;        /* raised dark        */
  --ink-3:#17171B;        /* card dark          */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.055);

  --bone:#F4F2ED;         /* light ground       */
  --bone-2:#E9E5DC;       /* light deeper       */
  --bone-line:rgba(34,30,32,.12);

  --w:rgba(255,255,255,.94);
  --w-2:rgba(255,255,255,.62);
  --w-3:rgba(255,255,255,.50);   /* .42 measured 4.07:1 on --ink — below AA */
  --d:rgba(20,18,19,.92);
  --d-2:rgba(20,18,19,.66);

  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ser:'Instrument Serif',Georgia,'Times New Roman',serif;

  --wrap:1320px;
  --pad:clamp(20px,5vw,48px);
  --sec:clamp(72px,10vw,140px);

  --e:cubic-bezier(.22,1,.36,1);
  --hdr-h:76px;
}

/* ── reset ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{
  background:var(--ink);color:var(--w);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--y);color:var(--blk)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--y);color:var(--blk);
  padding:12px 20px;font-weight:700}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:2px solid var(--y);outline-offset:3px;border-radius:2px}

/* ── type scale ──────────────────────────────────────────────────── */
.h2{
  font-size:clamp(2.15rem,5.4vw,4.35rem);
  line-height:1.04;letter-spacing:-.028em;font-weight:800;
  font-variation-settings:'wdth' 92,'wght' 800;
  text-wrap:balance;
}
.h2 em{
  font-family:var(--ser);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.012em;
  font-size:1.06em;
}
.sec-lede{
  max-width:52ch;margin-top:24px;color:var(--w-2);
  font-size:clamp(1.02rem,1.5vw,1.2rem);
}
.sec-head{margin-bottom:clamp(48px,6vw,84px)}
.sec-head--c{text-align:center}
.sec-head--c .sec-lede{margin-inline:auto}

.sec-eyebrow,.eyebrow{
  display:flex;align-items:center;gap:14px;line-height:1.5;padding-block:2px;
  font-size:.735rem;font-weight:700;letter-spacing:.20em;text-transform:uppercase;
  color:var(--y);margin-bottom:22px;
}
.sec-head--c .sec-eyebrow{justify-content:center}
.sec-eyebrow__bar,.eyebrow__bar{display:block;width:34px;height:2px;background:var(--y);flex:none}

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{
  --bh:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--bh);padding:0 26px;border:1px solid transparent;border-radius:2px;
  font-size:.9rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;
  /* transform is composed from custom properties so the magnetic cursor
     (--mx/--my) and the hover lift (--lift) can never overwrite each other */
  transform:translate3d(var(--mx,0px),calc(var(--my,0px) + var(--lift,0px)),0);
  transition:transform .35s var(--e),background-color .3s,color .3s,border-color .3s;
  white-space:nowrap;
}
.btn > *{position:relative;z-index:1}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none;position:relative;z-index:1}
/* light sweep on hover */
.btn::after{
  content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transition:left .75s var(--e);pointer-events:none;
}
.btn:hover::after{left:170%}
.btn--ghost::after{background:linear-gradient(100deg,transparent,rgba(240,203,0,.22),transparent)}
.btn--lg{--bh:60px;padding:0 34px;font-size:.95rem}
.btn--full{width:100%}
.btn--y{background:var(--y);color:var(--blk)}
.btn--y:hover{background:#fff;--lift:-2px}
.btn--blk{background:var(--blk);color:var(--y)}
.btn--ghost{background:transparent;color:var(--w);border-color:rgba(255,255,255,.30)}
.btn--ghost:hover{border-color:var(--y);color:var(--y);--lift:-2px}

.lnk{
  display:inline-flex;align-items:center;gap:12px;margin-top:30px;
  font-size:.85rem;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--y);
}
.lnk span{display:block;width:38px;height:1px;background:var(--y);transition:width .4s var(--e)}
.lnk:hover span{width:58px}
.lnk--sm{margin-top:20px;font-size:.78rem}

/* ═══ HEADER ═════════════════════════════════════════════════════ */
.hdr{
  position:fixed;inset:0 0 auto;z-index:90;
  transition:transform .5s var(--e);
  will-change:transform;
}
/* The blurred plate lives on a pseudo-element that is present from first paint
   and only fades its opacity. Toggling `backdrop-filter` itself (the old
   approach) forced a new compositing layer mid-scroll — that was the jerk.
   Opacity is compositor-only, so this costs nothing per frame. */
.hdr::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:rgba(10,10,12,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  opacity:0;transition:opacity .4s var(--e);pointer-events:none;
}
.hdr--on::before,.hdr--mega::before{opacity:1}
.hdr--hide{transform:translateY(-100%)}
.hdr__in{
  position:relative;z-index:1;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  height:var(--hdr-h);display:flex;align-items:center;gap:clamp(16px,2vw,30px);
}
.hdr__logo{display:flex;align-items:center;min-height:44px}
.hdr__logo img{height:42px;width:auto}
/* Nothing in the header may wrap. Long category labels like
   "Commercial & Industrial" broke onto two lines and pushed the bar to 52px. */
.hdr__nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px);margin-left:auto}
.hdr__nav a{
  font-size:.82rem;font-weight:600;letter-spacing:.03em;color:var(--w-2);
  position:relative;padding:4px 0;transition:color .3s;white-space:nowrap;
}
.hdr__nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--y);
  transition:width .38s var(--e);
}
.hdr__nav a:hover{color:var(--w)}
.hdr__nav a:hover::after{width:100%}
/* mega trigger */
.navbtn{
  display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;padding:4px 0;
  font-size:.82rem;font-weight:600;letter-spacing:.03em;color:var(--w-2);
  position:relative;transition:color .3s;font-family:inherit;white-space:nowrap;
}
.navbtn::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--y);
  transition:width .38s var(--e);
}
.navbtn:hover,.navbtn[aria-expanded="true"]{color:var(--w)}
.navbtn:hover::after,.navbtn[aria-expanded="true"]::after{width:100%}
.navbtn__chev{width:9px;height:6px;fill:var(--y);transition:transform .35s var(--e);flex:none}
.navbtn[aria-expanded="true"] .navbtn__chev{transform:rotate(180deg)}

/* ── MEGA MENUS ──────────────────────────────────────────────────────
   Three category panels rather than one "Services" panel with 15 links.
   The customer picks by intent — home / business / access — and the SEO
   pages live underneath.
   ─────────────────────────────────────────────────────────────────── */
.mega{
  position:absolute;top:100%;left:0;right:0;z-index:0;
  background:rgba(10,10,12,.97);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translate3d(0,-10px,0);
  /* visibility flips instantly on open so the links are focusable at once,
     and only after the fade on close so they leave the tab order */
  transition:opacity .3s var(--e),transform .3s var(--e),visibility 0s linear .3s;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85);
}
.mega--on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .3s var(--e),transform .3s var(--e),visibility 0s;
}
.mega__in{
  display:grid;grid-template-columns:minmax(190px,.85fr) repeat(2,minmax(0,1fr)) minmax(210px,.8fr);
  gap:clamp(24px,3vw,44px);padding-block:clamp(28px,3vw,40px);
}
.mega__lead h2{
  font-size:1.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.1;
  font-variation-settings:'wdth' 92,'wght' 800;margin-top:4px;
}
.mega__kicker{
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--y);
}
.mega__all{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--y);
}
.mega__all span{transition:transform .35s var(--e)}
.mega__all:hover span{transform:translateX(5px)}

.mega__col{display:flex;flex-direction:column;gap:2px}
.mega__col a{
  display:block;padding:9px 10px 9px 0;border-radius:2px;
  transition:transform .3s var(--e);
}
.mega__col a span{
  display:block;font-size:.92rem;font-weight:700;color:var(--w);letter-spacing:-.005em;
  transition:color .25s;
}
.mega__col a em{
  display:block;font-style:normal;font-size:.76rem;color:var(--w-3);margin-top:2px;
  transition:color .25s;
}
.mega__col a:hover{transform:translateX(5px)}
.mega__col a:hover span{color:var(--y)}
.mega__col a:hover em{color:var(--w-2)}

.mega__feat{
  background:rgba(255,255,255,.045);border:1px solid var(--line);border-top:2px solid var(--y);
  border-radius:3px;padding:20px;display:flex;flex-direction:column;gap:12px;align-self:start;
}
.mega__feat-k{
  font-size:.64rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--y);
}
.mega__feat p:not(.mega__feat-k){font-size:.83rem;color:var(--w-2);line-height:1.6}
.mega__feat .btn{--bh:44px;font-size:.74rem}
.mega__tel{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:.92rem;font-weight:700;color:var(--y)}

.hdr__act{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);margin-left:auto;flex:none}
.hdr__nav + .hdr__act{margin-left:0}
.hdr__tel{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;
  letter-spacing:0;white-space:nowrap}
.hdr__tel svg{width:15px;height:15px;fill:var(--y)}
.hdr__tel:hover{color:var(--y)}
.hdr__cta{--bh:44px;padding:0 18px;font-size:.76rem;white-space:nowrap}

.burger{
  display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
}
.burger span{display:block;width:22px;height:2px;background:var(--w);transition:transform .35s var(--e),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ── MOBILE DRAWER ───────────────────────────────────────────────────
   Utility navigation, not page headlines. Type is ~22% smaller than the
   previous version and vertical padding is tighter, so the whole menu —
   including the estimate button and phone number — fits without scrolling
   on a normal phone.
   ─────────────────────────────────────────────────────────────────── */
.mnav{
  position:fixed;inset:0;z-index:89;background:var(--ink);
  padding:calc(var(--hdr-h) + 12px) var(--pad) 20px;
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  opacity:0;transition:opacity .3s var(--e);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.mnav[hidden]{display:none}
.mnav--on{opacity:1}
.mnav__nav{display:flex;flex-direction:column}

/* top-level rows — categories and direct links share one scale */
.mnav__acc,
.mnav__nav > a{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;border-bottom:1px solid var(--line-2);cursor:pointer;
  font-family:inherit;color:var(--w);text-align:left;text-decoration:none;
  font-size:1.28rem;font-weight:800;letter-spacing:-.015em;line-height:1.25;
  font-variation-settings:'wdth' 96,'wght' 800;
  padding:13px 0;
}
.mnav__acc svg{width:13px;height:9px;fill:var(--y);flex:none;
  transition:transform .3s var(--e)}
.mnav__acc[aria-expanded="true"]{color:var(--y);border-bottom-color:transparent}
.mnav__acc[aria-expanded="true"] svg{transform:rotate(180deg)}

.mnav__sub{display:flex;flex-direction:column;padding:2px 0 10px 14px;
  border-left:2px solid rgba(240,203,0,.35);margin-bottom:10px}
.mnav__sub[hidden]{display:none}
.mnav__sub a{
  font-size:.95rem;font-weight:600;letter-spacing:0;color:var(--w-2);
  font-variation-settings:normal;padding:10px 0;border-bottom:1px solid var(--line-2);
}
.mnav__sub a:last-child{border-bottom:0}
.mnav__sub a:hover{color:var(--y)}
.mnav__all{color:var(--y) !important;font-weight:700 !important;
  letter-spacing:.06em;text-transform:uppercase;font-size:.78rem !important}

/* conversion footer — the menu ends somewhere, not just stops */
.mnav__ft{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.mnav__tel{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:1.16rem;font-weight:800;color:var(--y);letter-spacing:-.01em;
  padding:6px 0;
}
.mnav__tel svg{width:16px;height:16px;fill:currentColor}
.mnav__hours{text-align:center;font-size:.8rem;color:var(--w-3);margin-top:-6px}

/* appearance preference — in the layout, never floating over the menu */
.appearance{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line-2);
}
.appearance__k{
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--w-3);
}
.appearance__b{display:flex;gap:4px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:100px;padding:3px}
.appearance__b button{
  padding:7px 15px;border:0;border-radius:100px;background:none;cursor:pointer;
  font-family:inherit;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--w-2);
  transition:color .25s,background-color .25s;
}
.appearance__b button:hover{color:var(--w)}
.appearance__b button[aria-pressed="true"]{background:var(--y);color:var(--blk)}

/* ═══ HERO ═══════════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--hdr-h) + 56px) 0 96px;overflow:hidden;isolation:isolate;
}
.hero__bg{position:absolute;inset:-8% 0;z-index:-3;will-change:transform;
  transform:translate3d(0,var(--py,0px),0)}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(100deg,rgba(8,8,10,.95) 0%,rgba(8,8,10,.80) 38%,rgba(8,8,10,.30) 68%,rgba(8,8,10,.55) 100%),
    linear-gradient(to top,rgba(8,8,10,.98) 0%,rgba(8,8,10,0) 42%);
}
.hero__in{
  position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:clamp(40px,5vw,80px);
  align-items:center;
}
.hero__h1{
  font-size:clamp(2.7rem,7.2vw,6.4rem);line-height:1;letter-spacing:-.035em;font-weight:800;
  font-variation-settings:'wdth' 90,'wght' 800;margin-bottom:26px;
}
/* The reveal masks clip glyphs: overflow:hidden + line-height under 1 means
   descenders and the serif italic's ascenders get cut off. Pad the mask window
   and pull it back with a matching negative margin, so the window is taller
   than the text box but the layout is unchanged. */
.hero__h1 .ln{display:block;overflow:hidden;padding-block:.22em;margin-block:-.22em}
.hero__h1 .ln--ser{
  font-family:var(--ser);font-style:italic;font-weight:400;font-variation-settings:normal;
  letter-spacing:-.015em;color:var(--y);font-size:1.04em;
}
.hero__h1 .wd{display:inline-block;will-change:transform}
.hero__sub{max-width:48ch;color:var(--w-2);font-size:clamp(1.02rem,1.55vw,1.2rem)}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__trust{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px;
  font-size:.86rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--w-2);
}
.hero__trust i{font-style:normal;color:var(--y)}

.hero__cue{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:2;
  width:24px;height:38px;border:1px solid rgba(255,255,255,.28);border-radius:14px;
  display:grid;place-items:start center;padding-top:7px;
}
.hero__cue span{width:2px;height:7px;background:var(--y);border-radius:2px;animation:cue 1.8s var(--e) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(13px);opacity:0}100%{opacity:0}}

/* quick form card */
.qform{
  background:rgba(18,18,21,.86);backdrop-filter:blur(18px);
  border:1px solid var(--line);border-top:3px solid var(--y);
  padding:clamp(26px,3vw,36px);border-radius:3px;
  box-shadow:0 32px 80px -30px rgba(0,0,0,.9);
}
.qform__h{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  font-variation-settings:'wdth' 95,'wght' 800}
.qform__p{color:var(--w-3);font-size:.88rem;margin-top:8px;margin-bottom:22px}
.qform__f{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qform__fine{grid-column:1/-1;font-size:.74rem;color:var(--w-3);text-align:center;margin-top:-4px}

/* ── fields ──────────────────────────────────────────────────────── */
.fld{grid-column:1/-1;display:flex;flex-direction:column;gap:7px}
.fld--half{grid-column:span 1}
.fld label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--w-3)}
.fld input,.fld select,.fld textarea{
  width:100%;height:50px;padding:0 14px;border-radius:2px;
  /* background-color, never the `background` shorthand — the shorthand resets
     background-size/repeat/position, which blows up the select chevron below */
  background-color:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--w);
  font-size:.95rem;transition:border-color .25s,background-color .25s;
}
.fld textarea{height:auto;padding:13px 14px;resize:vertical;line-height:1.55}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.28)}
.fld select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23F0CB00' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;
  padding-right:36px;
}
.fld select:invalid{color:rgba(255,255,255,.28)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--y);background-color:rgba(255,255,255,.075);outline:none;
}
.fld--err input,.fld--err select,.fld--err textarea{border-color:#ff6b5e}
.fld .err{font-size:.72rem;color:#ff8b80;letter-spacing:.01em}
/* honeypot — offscreen, never announced, never focusable */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formmsg{grid-column:1/-1;font-size:.86rem;text-align:center;min-height:1px}
.formmsg--ok{color:var(--y);font-weight:600}
.formmsg--bad{color:#ff8b80}
.bigform button[disabled],.qform__f button[disabled]{opacity:.55;cursor:not-allowed}

/* ═══ TICKER ═════════════════════════════════════════════════════ */
.ticker{background:var(--y);color:var(--blk);overflow:hidden;padding:14px 0;
  border-block:1px solid rgba(0,0,0,.14)}
.ticker__track{display:flex;align-items:center;gap:22px;width:max-content;
  animation:tick 46s linear infinite}
.ticker span{font-size:.82rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  white-space:nowrap}
.ticker i{font-size:.5rem;opacity:.5;font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* ═══ STATS ══════════════════════════════════════════════════════ */
.stats{background:var(--ink);padding:clamp(48px,6vw,72px) 0;border-bottom:1px solid var(--line-2)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.stat{padding-left:22px;border-left:2px solid rgba(240,203,0,.35)}
.stat__n{font-size:clamp(2.2rem,4.6vw,3.5rem);font-weight:800;line-height:1;letter-spacing:-.03em;
  font-variation-settings:'wdth' 88,'wght' 800;font-variant-numeric:tabular-nums}
.stat__n--word{color:var(--y)}
.stat__l{margin-top:10px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--w-3);line-height:1.5}

/* ═══ LEGACY ═════════════════════════════════════════════════════ */
.legacy{background:var(--ink-2);padding:var(--sec) 0}
.legacy__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(40px,6vw,88px);align-items:center}
.legacy__media{position:relative}
.frame{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:4/3.2}
.frame img{width:100%;height:112%;object-fit:cover;will-change:transform;
  transform:translate3d(0,var(--py,0px),0)}
.frame::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,10,.45),transparent 55%)}
.badge-yrs{
  position:absolute;right:-14px;bottom:-24px;background:var(--y);color:var(--blk);
  padding:20px 26px;border-radius:2px;box-shadow:0 24px 50px -18px rgba(0,0,0,.75);
}
.badge-yrs b{display:block;font-size:2.2rem;font-weight:800;line-height:1;letter-spacing:-.03em;
  font-variation-settings:'wdth' 88,'wght' 800}
.badge-yrs span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;margin-top:5px;opacity:.72}
/* :not(.sec-eyebrow) — the eyebrow is also a <p>, and a bare `p` selector
   here outranks .sec-eyebrow and strips its accent colour */
.legacy__copy p:not(.sec-eyebrow){color:var(--w-2);margin-top:20px;max-width:56ch}
.legacy__copy strong{color:var(--w);font-weight:700}
.ticks{margin-top:30px;display:flex;flex-direction:column;gap:13px}
.ticks li{position:relative;padding-left:28px;color:var(--w-2);font-size:.96rem}
.ticks li::before{
  content:'';position:absolute;left:0;top:.62em;width:12px;height:7px;
  border-left:2px solid var(--y);border-bottom:2px solid var(--y);transform:rotate(-45deg);
}

/* ═══ SERVICES ═══════════════════════════════════════════════════ */
.svcs{background:var(--ink);padding:var(--sec) 0}
.svc-list{display:flex;flex-direction:column}
.svc{
  display:grid;grid-template-columns:78px minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(20px,4vw,52px);align-items:center;
  padding:clamp(26px,3.4vw,40px) 0;border-top:1px solid var(--line-2);
  transition:background-color .45s var(--e);
}
.svc:last-child{border-bottom:1px solid var(--line-2)}
.svc__n{
  font-family:var(--ser);font-style:italic;font-size:1.65rem;color:var(--y);
  line-height:1;padding-top:4px;
}
.svc__txt h3{
  font-size:clamp(1.5rem,2.9vw,2.35rem);font-weight:800;letter-spacing:-.028em;line-height:1.06;
  font-variation-settings:'wdth' 92,'wght' 800;
  transition:color .3s;
}
.svc__txt p{color:var(--w-2);margin-top:12px;max-width:56ch;font-size:.98rem}
.svc__img{overflow:hidden;border-radius:3px;aspect-ratio:16/10}
.svc__img img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--e),filter .6s;filter:grayscale(.55) brightness(.82)}
.svc:hover{background:rgba(255,255,255,.022)}
.svc:hover .svc__txt h3{color:var(--y)}
.svc:hover .svc__img img{transform:scale(1.07);filter:grayscale(0) brightness(1)}

/* ═══ SECTORS (light) ════════════════════════════════════════════ */
.sectors{background:var(--bone);color:var(--d);padding:var(--sec) 0}
.sectors .h2,.std .h2,.proc .h2{color:var(--blk)}
.sectors .h2 em,.std .h2 em,.proc .h2 em{color:#6E6000}
.sectors .sec-eyebrow,.std .sec-eyebrow,.proc .sec-eyebrow{color:#6E6000}
.sectors .sec-eyebrow__bar,.std .sec-eyebrow__bar,.proc .sec-eyebrow__bar{background:var(--y)}
.sect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
.sect{background:#fff;border:1px solid var(--bone-line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .5s var(--e),box-shadow .5s var(--e)}
.sect:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(34,30,32,.35)}
.sect__img{aspect-ratio:4/3;overflow:hidden}
.sect__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.sect:hover .sect__img img{transform:scale(1.06)}
.sect__body{padding:clamp(22px,2.4vw,30px);flex:1;display:flex;flex-direction:column;
  border-top:3px solid var(--y)}
.sect__body h3{font-size:1.42rem;font-weight:800;letter-spacing:-.02em;color:var(--blk);
  font-variation-settings:'wdth' 95,'wght' 800}
.sect__body p{color:var(--d-2);margin-top:12px;font-size:.95rem;flex:1}
.sect .lnk{color:#6E6000}
.sect .lnk span{background:#6E6000}

/* ═══ STANDARD (light) ═══════════════════════════════════════════ */
.std{background:var(--bone-2);color:var(--d);padding:var(--sec) 0}
.std-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bone-line);
  border:1px solid var(--bone-line)}
.std__i{background:var(--bone-2);padding:clamp(26px,2.8vw,38px)}
.std__n{font-family:var(--ser);font-style:italic;font-size:1.35rem;color:#6E6000;display:block;
  margin-bottom:14px}
.std__i h3{font-size:1.16rem;font-weight:800;letter-spacing:-.015em;color:var(--blk);
  font-variation-settings:'wdth' 97,'wght' 800}
.std__i p{color:var(--d-2);margin-top:10px;font-size:.92rem}

/* ═══ PROCESS (light) ════════════════════════════════════════════ */
/* ═══ REVIEWS ════════════════════════════════════════════════════ */
/* Dark, between two light sections — proof reads as its own panel and
   the yellow stars get a background worth sitting on. */
.revs{background:var(--ink);padding:var(--sec) 0}
.revs__grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(34px,6vw,80px);align-items:center}
.revs__n{font-size:clamp(3.6rem,7vw,5.4rem);font-weight:800;line-height:1;color:var(--y);
  letter-spacing:-.04em;font-variation-settings:'wdth' 88,'wght' 800;
  font-variant-numeric:tabular-nums;margin-top:6px}
.revs__stars{position:relative;display:inline-block;margin-top:14px;
  font-size:1.2rem;letter-spacing:.15em;line-height:1;color:rgba(255,255,255,.20)}
.revs__stars::before{content:"\2605\2605\2605\2605\2605"}
.revs__fill{position:absolute;inset:0;overflow:hidden;white-space:nowrap;color:var(--y)}
.revs__fill::before{content:"\2605\2605\2605\2605\2605"}
.revs__meta{margin-top:14px;color:var(--w-3);font-size:.92rem}
.revs__meta strong{color:var(--w);font-weight:700}
.revs__score .btn{margin-top:26px}
.revs__lede{color:var(--w-2);margin-top:20px;max-width:52ch;font-size:1.02rem}
.revs__lede strong{color:var(--w);font-weight:700}
.revs__topics{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;list-style:none;padding:0}
.revs__topics li{border:1px solid var(--line-2);background:rgba(255,255,255,.035);
  padding:9px 15px;border-radius:2px;font-size:.87rem;color:var(--w-2)}
.revs__note{margin-top:16px;color:rgba(255,255,255,.52);font-size:.8rem}

/* ═══ PROCESS ════════════════════════════════════════════════════ */
.proc{background:var(--bone-2);color:var(--d);padding:var(--sec) 0}
.proc-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3vw,44px)}
.proc__line{position:absolute;left:8%;right:8%;top:26px;height:2px;background:var(--bone-line)}
.proc__line i{display:block;height:100%;width:0;background:var(--y);transition:width 1.4s var(--e)}
.proc__line.is-on i{width:100%}
.proc__s{position:relative;text-align:center;padding-top:0}
.proc__n{
  display:grid;place-items:center;width:54px;height:54px;margin:0 auto 22px;
  background:var(--y);color:var(--blk);border-radius:50%;
  font-size:1.3rem;font-weight:800;font-variation-settings:'wdth' 95,'wght' 800;
  box-shadow:0 0 0 8px var(--bone-2);
}
.proc__s h3{font-size:1.28rem;font-weight:800;letter-spacing:-.02em;color:var(--blk);
  font-variation-settings:'wdth' 95,'wght' 800}
.proc__s p{color:var(--d-2);margin-top:12px;font-size:.95rem;max-width:38ch;margin-inline:auto}

/* ═══ AREAS ══════════════════════════════════════════════════════ */
.areas{background:var(--ink);padding:var(--sec) 0}
.areas__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(40px,6vw,88px);align-items:center}
.areas__copy p:not(.sec-eyebrow){color:var(--w-2);margin-top:20px;max-width:46ch}
.areas__copy .btn{margin-top:32px}
.areas__list{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2)}
.areas__list li{
  background:var(--ink);padding:20px 14px;text-align:center;font-size:.88rem;color:var(--w-2);
  letter-spacing:.02em;transition:background-color .3s,color .3s;
}
.areas__list li:hover{background:var(--y);color:var(--blk);font-weight:700}

/* ═══ BIG CTA ════════════════════════════════════════════════════ */
.cta{position:relative;background:var(--ink-2);padding:clamp(80px,10vw,140px) 0;
  overflow:hidden;text-align:center;isolation:isolate}
.cta__ghost{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:-1;
  font-size:clamp(6rem,19vw,17rem);font-weight:900;letter-spacing:-.04em;
  font-variation-settings:'wdth' 88,'wght' 900;
  -webkit-text-stroke:1px rgba(255,255,255,.055);color:transparent;
  white-space:nowrap;pointer-events:none;user-select:none;
}
.cta__h{font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1.04;letter-spacing:-.03em;font-weight:800;
  font-variation-settings:'wdth' 90,'wght' 800}
.cta__h em{font-family:var(--ser);font-style:italic;font-weight:400;color:var(--y);
  font-variation-settings:normal;font-size:1.05em}
.cta__in p{color:var(--w-2);margin-top:22px;max-width:46ch;margin-inline:auto}
.cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px}

/* ═══ CONTACT ════════════════════════════════════════════════════ */
.contact{background:var(--ink);padding:var(--sec) 0}
.contact__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(40px,6vw,84px);align-items:start}
.cinfo{margin-top:44px;display:flex;flex-direction:column;gap:26px}
.cinfo li{display:flex;flex-direction:column;gap:6px;padding-left:20px;
  border-left:2px solid rgba(240,203,0,.35)}
.cinfo__k{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--w-3)}
.cinfo__v{font-size:1.02rem;color:var(--w);line-height:1.5}
a.cinfo__v:hover{color:var(--y)}
.cinfo__v--big{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:800;letter-spacing:-.025em;
  font-variation-settings:'wdth' 92,'wght' 800}
.contact__form{background:var(--ink-3);border:1px solid var(--line);border-top:3px solid var(--y);
  padding:clamp(26px,3.2vw,42px);border-radius:3px}
.bigform{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ═══ FOOTER ═════════════════════════════════════════════════════ */
.ft{background:#08080A;padding:clamp(56px,7vw,88px) 0 0;border-top:1px solid var(--line-2)}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px)}
.ft__brand img{height:52px;width:auto;margin-bottom:20px}
.ft__brand p{color:var(--w-3);font-size:.9rem;max-width:38ch}
.ft__col h3{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--y);margin-bottom:18px}
.ft__col{display:flex;flex-direction:column;gap:9px}
.ft__col a,.ft__col p{color:var(--w-3);font-size:.9rem;transition:color .25s}
.ft__col a:hover{color:var(--y)}
.ft__col strong{color:var(--w);font-size:1.05rem;font-weight:700}
.ft__links{display:block}
.ft__inner{display:flex;flex-direction:column;gap:9px}

/* The column heading is a <button> so mobile can collapse it. On desktop it
   must look and behave exactly like the plain <h3> it replaced — no chevron,
   no pointer, no focus ring on click. */
.ft__toggle{all:unset;font:inherit;color:inherit;letter-spacing:inherit;
  text-transform:inherit;display:block;width:100%}
.ft__toggle span{display:none}
.ft__all{color:var(--y)!important;font-weight:600;margin-top:4px}
.ft__all span{display:inline-block;transition:transform .25s}
.ft__all:hover span{transform:translateX(4px)}

/* Footer CTA — the call/estimate pair stays prominent, not buried in a list. */
.ft__cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.ft__tel{display:inline-flex;align-items:center;gap:8px;color:var(--w);
  font-weight:700;font-size:1.02rem;transition:color .25s}
.ft__tel svg{width:17px;height:17px;fill:var(--y);flex:none}
.ft__tel:hover{color:var(--y)}
.ft__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-top:clamp(40px,5vw,64px);padding-block:26px;border-top:1px solid var(--line-2)}
.ft__bot p{color:rgba(255,255,255,.52);font-size:.8rem}   /* .30 measured 2.57:1 */

/* ═══ STICKY CALL BAR (mobile) ═══════════════════════════════════ */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:88;display:none;
  border-top:1px solid rgba(0,0,0,.25);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);transition:transform .45s var(--e);
}
.callbar--on{transform:translateY(0)}
.callbar__a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;height:58px;
  font-size:.86rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.callbar__a svg{width:17px;height:17px;fill:currentColor}
.callbar__a--tel{background:var(--y);color:var(--blk)}
.callbar__a--est{background:var(--blk);color:var(--y)}

/* ═══ REVEAL ═════════════════════════════════════════════════════ */
[data-rise]{opacity:0;transform:translate3d(0,26px,0)}
[data-rise].is-in{opacity:1;transform:none;
  transition:opacity .85s var(--e),transform .85s var(--e)}

/* ═══ ELEGANCE LAYER ═════════════════════════════════════════════ */

/* scroll progress hairline */
.prog{
  position:fixed;top:0;left:0;height:2px;z-index:95;width:100%;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--y),#fff8c4);pointer-events:none;
}

/* headline mask reveal — each line rises out from behind its own edge */
.is-masked .mline__i{
  transform:none;opacity:1;
  transition:transform 1.05s var(--e),opacity .8s var(--e);
}
.is-masked .mline:nth-child(2) .mline__i{transition-delay:.10s}
.is-masked .mline:nth-child(3) .mline__i{transition-delay:.20s}

/* Image wipe-in — a brand-yellow curtain slides OFF the photo.
   Deliberately fail-safe: the image is never hidden by CSS. The curtain sits
   at scaleY(0) until JS adds .wipe-in, so if the script never runs, errors, or
   the observer never fires, you simply don't get the effect — you never get a
   missing photo. The previous clip-path version hid every image by default,
   which is the wrong failure mode on a page where the photos are the product. */
.svc__img,.sect__img,.frame{position:relative}
.wipe{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--y);transform:scaleY(0);transform-origin:50% 100%;
}
.wipe-in .wipe{animation:wipeOff .85s var(--e) forwards}
@keyframes wipeOff{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* service rows: yellow rule draws across, row eases right */
.svc{position:relative;padding-left:0;transition:background-color .45s var(--e),padding-left .5s var(--e)}
.svc::before{
  content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--y);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--e);
}
.svc:hover::before{transform:scaleX(1)}
.svc:hover{padding-left:14px}
.svc__n{transition:transform .5s var(--e),opacity .4s;opacity:.75}
.svc:hover .svc__n{transform:translateY(-4px);opacity:1}

/* editorial section counter, right edge */
.counter{
  position:fixed;right:20px;top:50%;translate:0 -50%;z-index:80;
  /* vertical-rl already stacks the children top-to-bottom, so the flex
     row axis must stay `row` — forcing `column` here lays them sideways */
  display:flex;align-items:center;gap:10px;
  writing-mode:vertical-rl;
  font-size:.7rem;font-weight:700;letter-spacing:.26em;
  color:var(--w-3);pointer-events:none;
  opacity:0;transition:opacity .5s var(--e);
}
.counter.is-on{opacity:1}
.counter b{color:var(--y);font-weight:800;font-variant-numeric:tabular-nums}
.counter i{display:block;width:1px;height:44px;background:currentColor;opacity:.35;font-style:normal}

/* ticker leans with scroll velocity */
.ticker{transform:skewY(var(--tskew,0deg));transition:transform .5s var(--e)}

/* ═══ REVEAL ═════════════════════════════════════════════════════ */
[data-rise]{opacity:0;transform:translate3d(0,26px,0)}
[data-rise].is-in{opacity:1;transform:none;
  transition:opacity .85s var(--e),transform .85s var(--e)}

/* ═══ ELEGANCE LAYER ═════════════════════════════════════════════ */

/* scroll progress hairline */
.prog{
  position:fixed;top:0;left:0;height:2px;z-index:95;width:100%;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--y),#fff8c4);pointer-events:none;
}

/* headline mask reveal — each line rises out from behind its own edge */
.mline{display:block;overflow:hidden;padding-block:.22em;margin-block:-.22em}
.mline__i{display:block;transform:translate3d(0,120%,0);opacity:0}
.is-masked .mline__i{
  transform:none;opacity:1;
  transition:transform 1.05s var(--e),opacity .8s var(--e);
}
.is-masked .mline:nth-child(2) .mline__i{transition-delay:.10s}
.is-masked .mline:nth-child(3) .mline__i{transition-delay:.20s}

/* Image wipe-in — a brand-yellow curtain slides OFF the photo.
   Deliberately fail-safe: the image is never hidden by CSS. The curtain sits
   at scaleY(0) until JS adds .wipe-in, so if the script never runs, errors, or
   the observer never fires, you simply don't get the effect — you never get a
   missing photo. The previous clip-path version hid every image by default,
   which is the wrong failure mode on a page where the photos are the product. */
.svc__img,.sect__img,.frame{position:relative}
.wipe{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--y);transform:scaleY(0);transform-origin:50% 100%;
}
.wipe-in .wipe{animation:wipeOff .85s var(--e) forwards}
@keyframes wipeOff{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* service rows: yellow rule draws across, row eases right */
.svc{position:relative;padding-left:0;transition:background-color .45s var(--e),padding-left .5s var(--e)}
.svc::before{
  content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--y);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--e);
}
.svc:hover::before{transform:scaleX(1)}
.svc:hover{padding-left:14px}
.svc__n{transition:transform .5s var(--e),opacity .4s;opacity:.75}
.svc:hover .svc__n{transform:translateY(-4px);opacity:1}

/* editorial section counter, right edge */
.counter{
  position:fixed;right:20px;top:50%;translate:0 -50%;z-index:80;
  /* vertical-rl already stacks the children top-to-bottom, so the flex
     row axis must stay `row` — forcing `column` here lays them sideways */
  display:flex;align-items:center;gap:10px;
  writing-mode:vertical-rl;
  font-size:.7rem;font-weight:700;letter-spacing:.26em;
  color:var(--w-3);pointer-events:none;
  opacity:0;transition:opacity .5s var(--e);
}
.counter.is-on{opacity:1}
.counter b{color:var(--y);font-weight:800;font-variant-numeric:tabular-nums}
.counter i{display:block;width:1px;height:44px;background:currentColor;opacity:.35;font-style:normal}

/* ticker leans with scroll velocity */
.ticker{transform:skewY(var(--tskew,0deg));transition:transform .5s var(--e)}

/* version switcher — DEMO CONTROL, remove before launch */
/* ═══ INNER PAGES ════════════════════════════════════════════════ */

/* Full-height page hero. The earlier version was a short padded band, which
   cropped the photo to a letterbox strip — it read as half an image. */
.phero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(520px,78svh,760px);
  display:flex;align-items:flex-end;
  padding:calc(var(--hdr-h) + clamp(72px,9vw,120px)) 0 clamp(64px,7vw,96px);
}
.phero__bg{position:absolute;inset:-8% 0;z-index:-3;
  transform:translate3d(0,var(--py,0px),0)}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.phero__scrim{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(100deg,rgba(8,8,10,.94) 0%,rgba(8,8,10,.78) 42%,rgba(8,8,10,.32) 100%),
    linear-gradient(to top,rgba(12,12,14,1) 0%,rgba(12,12,14,0) 46%);
}
.phero__in{width:100%}
.phero__cue{
  position:absolute;left:50%;bottom:22px;translate:-50% 0;
  width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--y));
  opacity:.6;
}
/* inner pages run one step below the home page's display scale — the home
   hero earns 4.4rem, a service page does not */
.phero__h1{
  font-size:clamp(2.15rem,4.4vw,3.5rem);line-height:1.02;letter-spacing:-.03em;font-weight:800;
  font-variation-settings:'wdth' 90,'wght' 800;max-width:18ch;text-wrap:balance;
}
.rel .h2,.inline-form .h2,.areas .h2,.contact .h2{
  font-size:clamp(1.8rem,3.2vw,2.7rem);
}
.phero__h1 em{font-family:var(--ser);font-style:italic;font-weight:400;color:var(--y);
  font-variation-settings:normal;font-size:1.05em}
.phero__lede{margin-top:22px;max-width:60ch;color:var(--w-2);
  font-size:clamp(1rem,1.5vw,1.16rem)}
.phero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:26px;
  font-size:.76rem;letter-spacing:.06em;color:var(--w-3)}
.crumb a{color:var(--w-3);transition:color .25s}
.crumb a:hover{color:var(--y)}
.crumb span:last-child{color:var(--w-2)}

/* ── long-form body copy ─────────────────────────────────────────
   Reading rules, in priority order:
   • measure caps at 68ch — 920px of unconstrained text is ~95 characters
     per line, roughly a third wider than anyone reads comfortably
   • body is 1.06rem / 1.78, not 1.02 / 1.65 — these are pages people
     actually read, not captions
   • three distinct levels (h2 / h3 / body) that can be told apart at a
     glance without reading them
   ───────────────────────────────────────────────────────────────── */
.prose{background:var(--ink-2);padding:clamp(48px,6vw,86px) 0}
.prose__main{max-width:62ch;margin-inline:auto}
/* a grid escapes the reading column — it scans, it isn't read line by line */
.prose__main:has(.featgrid){max-width:1000px}

.featgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);
  margin:clamp(20px,2.6vw,34px) 0}
.featgrid li{
  padding:22px 24px;border-radius:3px;
  background:rgba(255,255,255,.035);border:1px solid var(--line-2);
  border-top:2px solid rgba(240,203,0,.45);
  transition:border-top-color .3s,background-color .3s;
}
.featgrid li:hover{border-top-color:var(--y);background:rgba(255,255,255,.055)}
.featgrid h3{
  font-size:1.05rem;font-weight:800;letter-spacing:-.015em;color:var(--w);line-height:1.3;
  font-variation-settings:'wdth' 96,'wght' 800;
}
.featgrid p{margin-top:9px;color:var(--w-2);font-size:.93rem;line-height:1.68}

/* ── shared block heading ────────────────────────────────────────── */
.blk-h{
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.12;letter-spacing:-.025em;
  font-weight:800;font-variation-settings:'wdth' 92,'wght' 800;
  margin-bottom:clamp(24px,3vw,36px);text-wrap:balance;
}

/* ── intro statement ─────────────────────────────────────────────── */
.intro{background:var(--ink);padding:clamp(56px,7vw,100px) 0}
.intro__in{max-width:64ch;margin-inline:auto}
.stmt{
  font-size:clamp(1.7rem,3.4vw,2.85rem);line-height:1.12;letter-spacing:-.03em;
  font-weight:800;font-variation-settings:'wdth' 90,'wght' 800;
  margin-bottom:26px;text-wrap:balance;
}
.intro p{color:var(--w-2);font-size:1.06rem;line-height:1.78;margin-bottom:16px}
.intro__lede{font-size:clamp(1.14rem,1.7vw,1.32rem) !important;line-height:1.6 !important;
  color:var(--w) !important}

/* ── what's included ─────────────────────────────────────────────── */
.incl{background:var(--ink-2);padding:clamp(56px,7vw,100px) 0}
.incl__list{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-2);border:1px solid var(--line-2)}
.incl__list li{
  background:var(--ink-2);padding:20px 22px 20px 46px;position:relative;
  transition:background-color .3s;
}
.incl__list li:hover{background:rgba(255,255,255,.03)}
.incl__list li::before{
  content:'';position:absolute;left:20px;top:1.65em;width:11px;height:6px;
  border-left:2px solid var(--y);border-bottom:2px solid var(--y);transform:rotate(-45deg);
}
.incl__list b{display:block;font-size:1rem;font-weight:700;color:var(--w);letter-spacing:-.008em}
.incl__list span{display:block;margin-top:5px;font-size:.9rem;color:var(--w-2);line-height:1.6}

/* ── how it works ────────────────────────────────────────────────── */
.steps{background:var(--ink);padding:clamp(56px,7vw,100px) 0}
.steps__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.steps__list li{position:relative;padding-top:22px;border-top:2px solid var(--line)}
.steps__list li::after{
  content:'';position:absolute;left:0;top:-2px;width:38px;height:2px;background:var(--y);
}
.steps__n{
  display:block;font-family:var(--ser);font-style:italic;font-size:2rem;
  color:var(--y);line-height:1;margin-bottom:12px;
}
.steps__list h3{font-size:1.16rem;font-weight:800;letter-spacing:-.018em;color:var(--w);
  font-variation-settings:'wdth' 96,'wght' 800}
.steps__list p{margin-top:10px;color:var(--w-2);font-size:.96rem;line-height:1.7}

/* ── why ─────────────────────────────────────────────────────────── */
.why{background:var(--bone);color:var(--d);padding:clamp(56px,7vw,100px) 0}
.why .blk-h{color:var(--blk)}
.why__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
.why__list li{background:#fff;border:1px solid var(--bone-line);border-top:3px solid var(--y);
  border-radius:3px;padding:clamp(22px,2.4vw,30px)}
.why__list h3{font-size:1.12rem;font-weight:800;letter-spacing:-.018em;color:var(--blk);
  font-variation-settings:'wdth' 96,'wght' 800}
.why__list p{margin-top:10px;color:var(--d-2);font-size:.93rem;line-height:1.68}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq{background:var(--ink-2);padding:clamp(56px,7vw,100px) 0}
.faq__in{max-width:820px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-size:1.06rem;font-weight:700;color:var(--w);letter-spacing:-.01em;line-height:1.4;
  transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--y)}
.faq summary::after{
  content:'';position:absolute;right:8px;top:1.55em;width:11px;height:11px;
  border-right:2px solid var(--y);border-bottom:2px solid var(--y);
  transform:rotate(45deg);transition:transform .3s var(--e);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 44px 22px 0}
.faq__a p{color:var(--w-2);font-size:1rem;line-height:1.75}
.faq__more{margin-top:28px}
.faq__more a{
  display:inline-flex;align-items:center;gap:12px;font-size:.8rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--y);
}
.faq__more a span{display:block;width:32px;height:1px;background:var(--y);transition:width .4s var(--e)}
.faq__more a:hover span{width:52px}

/* ── related links ───────────────────────────────────────────────── */
.rellinks{background:var(--ink);padding:clamp(52px,6vw,88px) 0;border-top:1px solid var(--line-2)}
.rellinks__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,60px);align-items:start}
.rellinks__in > div p{color:var(--w-2);max-width:38ch;font-size:.98rem;line-height:1.7}
.rellinks__nav{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,40px)}
.rellinks__nav a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line-2);
  font-size:1.02rem;font-weight:600;color:var(--w);transition:color .25s,padding-left .35s var(--e);
}
.rellinks__nav a span{color:var(--y);transition:transform .35s var(--e)}
.rellinks__nav a:hover{color:var(--y);padding-left:8px}
.rellinks__nav a:hover span{transform:translateX(5px)}

/* content blocks */
.prose__b{padding-block:clamp(16px,1.8vw,24px)}
.prose__h2{
  font-size:clamp(1.42rem,2.3vw,1.95rem);line-height:1.14;letter-spacing:-.022em;
  font-weight:800;font-variation-settings:'wdth' 94,'wght' 800;
  margin:clamp(20px,2.4vw,32px) 0 14px;text-wrap:balance;
}
.prose__b:first-child .prose__h2{margin-top:0}
.prose__h3{
  position:relative;padding-left:16px;margin:26px 0 10px;
  font-size:1.06rem;font-weight:700;line-height:1.35;letter-spacing:-.008em;
  font-variation-settings:'wdth' 100,'wght' 700;color:var(--w);
}
.prose__h3::before{
  content:'';position:absolute;left:0;top:.34em;width:4px;height:1em;
  background:var(--y);border-radius:1px;
}
/* scoped to __main — a bare `.prose p` also matches the rail's own labels
   and was overriding them at body size */
.prose__main p{color:var(--w-2);margin-bottom:15px;font-size:1.06rem;line-height:1.78}
.prose__main p:last-child{margin-bottom:0}
.prose__lead{
  font-size:clamp(1.12rem,1.6vw,1.28rem) !important;line-height:1.62 !important;
  color:var(--w) !important;
}

/* checklists */
.checks{margin:18px 0 4px;display:grid;gap:10px}
.checks li{
  position:relative;padding:11px 14px 11px 40px;border-radius:3px;
  background:rgba(255,255,255,.035);border:1px solid var(--line-2);
  color:var(--w-2);font-size:.96rem;line-height:1.55;
}
.checks li::before{
  content:'';position:absolute;left:15px;top:1.05em;width:11px;height:6px;
  border-left:2px solid var(--y);border-bottom:2px solid var(--y);transform:rotate(-45deg);
}

/* mid-content conversion strip */
.midcta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:clamp(26px,3vw,38px) 0;padding:22px 24px;border-radius:3px;
  background:rgba(240,203,0,.07);border:1px solid rgba(240,203,0,.28);
}
.midcta__k{
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--y);
}
.midcta__t{font-size:1.02rem;font-weight:600;color:var(--w);margin-top:5px}
.midcta__b{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.midcta__b .btn{--bh:46px;font-size:.78rem}
.midcta__tel{font-weight:700;font-size:1rem;color:var(--y);white-space:nowrap}

/* inline estimate block */
.inline-form{background:var(--ink);padding:clamp(56px,7vw,100px) 0}
.inline-form__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(36px,5vw,72px);align-items:start}
.inline-form p{color:var(--w-2);margin-top:20px;max-width:48ch}
.inline-form .qform__f{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* related services */
.rel{background:var(--bone);color:var(--d);padding:clamp(56px,7vw,100px) 0}
.rel .h2{color:var(--blk)}
.rel .h2 em{color:#6E6000}
.rel .sec-eyebrow{color:#6E6000}
.rel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.rel__c{background:#fff;border:1px solid var(--bone-line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .5s var(--e),box-shadow .5s var(--e)}
.rel__c:hover{transform:translateY(-5px);box-shadow:0 26px 52px -28px rgba(34,30,32,.34)}
.rel__img{aspect-ratio:16/9;overflow:hidden}
.rel__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)}
.rel__c:hover .rel__img img{transform:scale(1.06)}
.rel__b{padding:20px 22px 24px;border-top:3px solid var(--y);flex:1}
.rel__b h3{font-size:1.1rem;font-weight:800;letter-spacing:-.015em;color:var(--blk);
  font-variation-settings:'wdth' 96,'wght' 800}
.rel__b p{margin-top:7px;font-size:.86rem;color:var(--d-2)}

/* city grid on the service-area page */
.areas__cities{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-2);border:1px solid var(--line-2)}
.areas__cities a{background:var(--ink);padding:22px 14px;text-align:center;font-size:.92rem;
  font-weight:600;color:var(--w-2);transition:background-color .3s,color .3s}
.areas__cities a:hover{background:var(--y);color:var(--blk)}

/* current page markers */
.hdr__nav a[aria-current],.mega__col a[aria-current] span{color:var(--y)}
.hdr__nav a[aria-current]::after{width:100%}

/* ═══ RESPONSIVE ═════════════════════════════════════════════════ */
@media (max-width:1400px){ .counter{display:none} }
@media (max-width:1180px){
  .hdr__nav{gap:22px}
  .hdr__nav a{font-size:.79rem}
  .hero__in{grid-template-columns:minmax(0,1fr) minmax(320px,.9fr)}
}
@media (max-width:1024px){
  .rel__grid{grid-template-columns:1fr 1fr}
  .inline-form__grid{grid-template-columns:1fr}
  .areas__cities{grid-template-columns:repeat(3,1fr)}
  .prose__main{max-width:64ch;margin-inline:auto}
  .steps__list,.why__list{grid-template-columns:1fr}
  .rellinks__in{grid-template-columns:1fr}
  .incl__list{grid-template-columns:1fr}
}
@media (max-width:760px){
  .rel__grid{grid-template-columns:1fr}
  .areas__cities{grid-template-columns:repeat(2,1fr)}
  .phero__btns{flex-direction:column;align-items:stretch}
  .phero__btns .btn{width:100%}
  .inline-form .qform__f{grid-template-columns:1fr}
  .prose__main{max-width:none}
  .prose__main p,.intro p{font-size:1.02rem;line-height:1.72}
  .rellinks__nav{grid-template-columns:1fr}
  .featgrid{grid-template-columns:1fr}
  /* 44px minimum tap targets */
  .crumb a{padding-block:11px}
  .crumb{margin-bottom:16px}
  .faq__more a{padding-block:12px}
  .phero{min-height:clamp(440px,68svh,600px)}
  .midcta{flex-direction:column;align-items:flex-start}
  .midcta__b{width:100%}
  .midcta__b .btn{flex:1}
}
@media (max-width:1240px){
  .mega__in{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .mega__feat{grid-column:1/-1;flex-direction:row;align-items:center;gap:20px}
  .mega__feat-img{width:200px;flex:none;aspect-ratio:4/3}
  .mega__feat h3,.mega__feat p{flex:none}
  .mega__feat .btn{width:auto;padding-inline:24px}
}
@media (max-width:1200px){
  /* six labels + phone + CTA need ~1050px. Below that, hand it to the burger
     rather than letting the bar wrap to two lines. */
  .hdr__nav,.hdr__tel{display:none}
  .burger{display:flex}
  .mega{display:none}
}
@media (max-width:1024px){
  .mega{display:none}
  .burger{display:flex}
  .hero__in{grid-template-columns:1fr;gap:44px}
  .qform{max-width:560px}
  .legacy__grid,.areas__grid,.contact__grid{grid-template-columns:1fr}
  .legacy__media{order:-1;max-width:620px}
  .sect-grid{grid-template-columns:1fr 1fr}
  .std-grid{grid-template-columns:1fr 1fr}
  .svc{grid-template-columns:56px minmax(0,1fr);gap:20px 26px}
  .svc__img{grid-column:2/-1;max-width:420px;margin-top:18px}
  .ft__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  :root{--hdr-h:66px}
  .hdr__logo img{height:36px}
  .hdr__cta{display:none}
  .hero{min-height:auto;padding:calc(var(--hdr-h) + 46px) 0 72px}
  /* portrait crops leave bright sky behind the copy — flatten it */
  .hero__scrim{background:linear-gradient(to bottom,
      rgba(8,8,10,.93) 0%,rgba(8,8,10,.74) 26%,rgba(8,8,10,.88) 60%,rgba(8,8,10,.97) 100%)}
  .hero__cue{display:none}
  .hero__trust{gap:8px 18px}
  .hero__trust li{font-size:.78rem}
  .stats__grid{grid-template-columns:1fr 1fr;gap:26px}
  .sect-grid,.std-grid,.proc-grid{grid-template-columns:1fr}
  .proc__line{display:none}
  .areas__list{grid-template-columns:repeat(2,1fr)}
  .qform__f,.bigform{grid-template-columns:1fr}
  .fld--half{grid-column:1/-1}
  .badge-yrs{right:0;bottom:-18px;padding:16px 20px}
  .badge-yrs b{font-size:1.7rem}
  .cta__btns{flex-direction:column}
  .cta__btns .btn{width:100%}
  .ft__grid{grid-template-columns:1fr;gap:0}
  .ft__bot{flex-direction:column;text-align:center}
  .callbar{display:flex}
  .ft{padding-bottom:64px}
  .svc:hover{padding-left:0}
  /* 44px minimum tap targets */
  .lnk{padding-block:12px}
  .ft__col{gap:2px}
  .ft__col a{padding-block:10px}

  /* ── mobile density ───────────────────────────────────────────
     The page ran to 10.6 screens, and several sections were saying the
     same thing at the same size. Tightening the rhythm rather than
     cutting sections: the personality ("A reputation built in the
     ground", "Sixty years", "The Allsteel standard") is the point. */
  :root{--sec:50px}
  .sec-head{margin-bottom:30px!important}
  .sec-eyebrow{margin-bottom:14px!important}

  /* proof bar — a compact horizontal strip, not three stacked blocks */
  .stats{padding:24px 0}
  .stats__grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .stat{padding-left:0;border-left:0;border-top:2px solid rgba(240,203,0,.35);
    padding-top:12px;text-align:center}
  .stat__n{font-size:1.6rem}
  .stat__l{margin-top:5px;font-size:.6rem;letter-spacing:.10em;line-height:1.35}

  /* service cards — the image was doing more scrolling than selling */
  .hubc__img{height:132px}
  .hubc__b{padding:16px 18px 18px}
  .hubc__go{margin-top:11px}
  .hubc__list{margin-top:7px}
  .hub__all{margin-top:0}
  .hub__all .lnk{padding-block:8px}

  /* the four standards read as a scannable list, not four stacked cards —
     number beside the heading, and it must span both rows or the <p>
     drops into the number column */
  .std__i{padding:17px 18px}
  .std__i{display:grid;grid-template-columns:30px 1fr;gap:0 12px;align-items:start}
  .std__n{grid-row:1 / span 2;margin:0;font-size:1.15rem}
  .std__i p{margin-top:6px;font-size:.88rem}

  /* project gallery — the spec wants FEWER, LARGER photos. Four in a
     clean 2x2 beats six crammed into four rows. */
  .work__grid{grid-auto-rows:170px}
  .work__i--wide{grid-column:span 1}
  .work__i:nth-child(n+5){display:none}

  /* three steps — keep the steps, drop the essays */
  .proc-grid{gap:20px}
  .proc__s{display:grid;grid-template-columns:44px 1fr;gap:14px;text-align:left;
    align-items:start}
  /* span both rows, or the <p> (the third child) flows into the 44px
     number column and one short sentence renders 200px tall */
  .proc__n{grid-row:1 / span 2;width:44px;height:44px;margin:0;font-size:1.05rem;box-shadow:none}
  .proc__s p{margin-top:5px;font-size:.9rem;max-width:none}
  .proc__s h3{font-size:1.1rem}

  .revs__grid{grid-template-columns:1fr;gap:28px}
  .revs__n{font-size:3.2rem}
  .revs__topics{gap:7px}
  .revs__topics li{padding:7px 12px;font-size:.8rem}

  /* service area — local relevance and a route to the page, nothing more */
  .areas__copy p:not(.sec-eyebrow){margin-top:14px}
  .areas__copy .btn{margin-top:22px}
  .areas__list li{padding:12px 8px;font-size:.8rem}
  .legacy__media{margin-bottom:26px}

  /* ── collapsible footer sections ──────────────────────────────
     Listing every link makes the mobile footer a second nav menu and a
     lot of scrolling. Sections start collapsed and animate open on tap;
     JS mirrors the state in aria-expanded. */
  .ft__brand{margin-bottom:30px}
  .ft__col{border-top:1px solid rgba(255,255,255,.10)}  /* --line-2 (.055) is too faint to read as a divider */
  /* .ft__col is a column flex container; as a flex item .ft__links resolves
     its 1fr track against the flex base size, not the content, so the panel
     opens to nothing. Block flow is what the 0fr/1fr trick needs. */
  .ft__col--acc{display:block}
  .ft__col h3{margin-bottom:0}
  .ft__toggle{display:flex;align-items:center;justify-content:space-between;
    padding-block:17px;cursor:pointer}
  .ft__toggle span{display:block;position:relative;width:13px;height:13px;flex:none}
  .ft__toggle span::before,.ft__toggle span::after{content:"";position:absolute;
    inset:50% 0 auto 0;height:1.5px;background:var(--y);transition:transform .3s}
  .ft__toggle span::after{transform:rotate(90deg)}
  .ft__toggle[aria-expanded="true"] span::after{transform:rotate(0deg)}
  /* The grid 0fr/1fr trick resolves the open track to the item's minimum
     here rather than its content, so the panel opens to nothing. An explicit
     height, set from scrollHeight by JS, is deterministic.
     Gated on .ft-acc, which the script adds only once it has wired the
     buttons up — with JS off the sections stay open instead of being
     permanently clipped to zero. */
  .ft-acc .ft__links{height:0;overflow:hidden;
    transition:height .34s cubic-bezier(.4,0,.2,1)}
  .ft__inner{gap:2px;padding-bottom:14px}
  .cinfo__v{padding-block:4px}
  a.cinfo__v{padding-block:8px}
}
@media (max-width:420px){
  .hero__btns{flex-direction:column;align-items:stretch}
  .hero__btns .btn{width:100%}
}

/* ═══ MOTION / PRINT ═════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-rise]{opacity:1 !important;transform:none !important}
  .hero__bg,.frame img{transform:none !important}
  .ticker__track{animation:none}
  .proc__line i{width:100%}
  .mline__i{transform:none !important;opacity:1 !important}
  .wipe{display:none}
  .ticker{transform:none !important}
  .btn::after{display:none}
}

/* ── CATEGORY HUB CARDS ──────────────────────────────────────────── */
.hub{background:var(--ink-2);padding:clamp(56px,7vw,100px) 0}
.hub__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.hubc{
  background:rgba(255,255,255,.035);border:1px solid var(--line-2);
  border-top:3px solid var(--y);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .5s var(--e),background-color .4s;
}
.hubc:hover{transform:translateY(-5px);background:rgba(255,255,255,.06)}
.hubc__img{aspect-ratio:16/9;overflow:hidden}
.hubc__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)}
.hubc:hover .hubc__img img{transform:scale(1.06)}
.hubc__b{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.hubc h3{font-size:1.1rem;font-weight:800;letter-spacing:-.018em;color:var(--w);
  font-variation-settings:'wdth' 96,'wght' 800}
.hubc p{margin-top:8px;font-size:.9rem;color:var(--w-2);line-height:1.65;flex:1}
.hubc__go{display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--y)}
.hubc__go i{font-style:normal;transition:transform .35s var(--e)}
.hubc:hover .hubc__go i{transform:translateX(5px)}
.hub__repair{margin-top:clamp(24px,3vw,36px);font-size:1rem;color:var(--w-2)}
.hub__repair a{color:var(--y);font-weight:700}
.hub__repair a span{display:inline-block;transition:transform .35s var(--e)}
.hub__repair a:hover span{transform:translateX(5px)}
.hub__all{margin-top:14px}

@media (max-width:1024px){
  .mega__in{grid-template-columns:1fr 1fr;gap:26px}
  .mega__lead,.mega__feat{grid-column:1/-1}
  .hub__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hub__grid{grid-template-columns:1fr}
  .appearance{flex-direction:row}
}

/* ── BLOG ────────────────────────────────────────────────────────── */
.post{background:var(--ink);padding:clamp(48px,6vw,80px) 0 clamp(24px,3vw,40px)}
.post__head{max-width:64ch;margin-inline:auto}
.post__h1{
  font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.08;letter-spacing:-.03em;font-weight:800;
  font-variation-settings:'wdth' 92,'wght' 800;text-wrap:balance;
}
.post__lede{margin-top:22px;font-size:clamp(1.1rem,1.6vw,1.28rem);line-height:1.62;color:var(--w)}

.postlist{background:var(--ink-2);padding:clamp(56px,7vw,100px) 0}
.postlist__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.postc{
  display:flex;flex-direction:column;padding:26px 26px 28px;border-radius:3px;
  background:rgba(255,255,255,.035);border:1px solid var(--line-2);
  border-top:3px solid var(--y);
  transition:transform .5s var(--e),background-color .4s;
}
.postc:hover{transform:translateY(-5px);background:rgba(255,255,255,.06)}
.postc h2{
  font-size:1.14rem;font-weight:800;letter-spacing:-.018em;line-height:1.28;color:var(--w);
  font-variation-settings:'wdth' 96,'wght' 800;
}
.postc p{margin-top:11px;font-size:.9rem;color:var(--w-2);line-height:1.65;flex:1}
.postc__go{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--y)}
.postc__go i{font-style:normal;transition:transform .35s var(--e)}
.postc:hover .postc__go i{transform:translateX(5px)}

@media (max-width:1024px){ .postlist__grid{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .postlist__grid{grid-template-columns:1fr} }

/* ═══ MOBILE HEADER ══════════════════════════════════════════════
   [ LOGO ]                          [ PHONE ]  [ ☰ ]
   Light at rest AND on scroll — the client prefers the light scheme,
   so the header must not flip to the dark plate on mobile.
   ═══════════════════════════════════════════════════════════════ */
.hdr__telbtn{display:none}

@media (max-width:1200px){
  :root{--hdr-h:70px}
  .hdr__telbtn{
    display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
    transition:background-color .25s;
  }
  .hdr__telbtn svg{width:21px;height:21px;fill:var(--y)}
  .hdr__telbtn:active{background:rgba(240,203,0,.16)}
  .burger{width:44px;height:44px}
  .hdr__logo img{height:38px}
  .hdr__in{gap:12px}
  .hdr__act{gap:2px}
  /* compact, and the plate stays light rather than switching to dark */
  .hdr::before{
    background:rgba(251,249,245,.96);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(34,30,32,.10);
  }
  .hdr--on::before{opacity:1}
  .burger span{background:var(--blk)}
  /* the bar is light from the top, so the logo needs its own plate behind it */
  .hdr:not(.hdr--on)::before{opacity:1}
}

/* slide-in drawer from the right, not a dropdown */
@media (max-width:1200px){
  .mnav{
    left:auto;right:0;width:min(420px,92vw);
    transform:translateX(100%);opacity:1;
    transition:transform .38s var(--e);
    box-shadow:-24px 0 60px -20px rgba(0,0,0,.45);
  }
  .mnav--on{transform:none}
  .mnav::before{
    content:'';position:fixed;inset:0;right:min(420px,92vw);z-index:-1;
    background:rgba(12,12,14,.42);opacity:0;transition:opacity .38s var(--e);
  }
  .mnav--on::before{opacity:1}
}

/* ═══ HOMEPAGE RESTRUCTURE ═══════════════════════════════════════ */

/* hero is one column now — the form moved to the foot of the page so we
   sell before asking for a phone number */
.hero__in--solo{grid-template-columns:minmax(0,1fr);max-width:940px}
.hero__ticks{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:32px;
  list-style:none;padding:0}
.hero__ticks li{
  display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--w-2);
  line-height:1.6;padding-block:2px;
}
.hero__ticks li::before{
  content:'';width:12px;height:7px;flex:none;
  border-left:2px solid var(--y);border-bottom:2px solid var(--y);
  transform:rotate(-45deg);margin-top:-4px;
}

/* about, shortened */
.legacy__lede{font-size:clamp(1.1rem,1.6vw,1.28rem) !important;line-height:1.6 !important;
  color:var(--w) !important;margin-top:22px}
.legacy__three{margin-top:16px;font-weight:700;letter-spacing:.01em;color:var(--y) !important}

/* four-up standard grid */
.std-grid--4{grid-template-columns:repeat(4,1fr)}

/* recent work */
.work{background:var(--ink);padding:var(--sec) 0}
.work__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:180px;gap:clamp(10px,1.4vw,16px);
}
.work__i{position:relative;overflow:hidden;border-radius:3px;margin:0}
.work__i--tall{grid-row:span 2}
.work__i--wide{grid-column:span 2}
.work__i img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--e),filter .5s;filter:grayscale(.3) brightness(.9)}
.work__i:hover img{transform:scale(1.06);filter:none}
/* A caption sits over whatever photo the client uploads, so it needs a real
   scrim rather than trusting text-shadow against an unknown background. */
.work__i::after{
  content:'';position:absolute;inset:auto 0 0 0;height:48%;pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,10,.85),rgba(8,8,10,0));
}
.work__i figcaption{
  position:absolute;left:14px;bottom:11px;z-index:1;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;line-height:1.6;
}
.work__cta{margin-top:clamp(24px,3vw,36px);text-align:center}
.work__cta a,.areas__more a{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.8rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--y);line-height:1.6;padding-block:6px;
}
.work__cta a span,.areas__more a span{transition:transform .35s var(--e)}
.work__cta a:hover span,.areas__more a:hover span{transform:translateX(5px)}
.areas__more{margin-top:20px}

/* homepage estimate block — compact, integrated, not a floating card */
.estimate{background:var(--ink-2);padding:var(--sec) 0}
.estimate__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.estimate__copy p{color:var(--w-2);margin-top:18px;max-width:40ch}
.estimate__since{font-weight:600;color:var(--w) !important;font-size:.95rem}
.estimate__tel{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:800;color:var(--y);
  letter-spacing:-.02em;line-height:1.4;
}
.estimate__tel svg{width:19px;height:19px;fill:currentColor}

/* flat form: ~18% shorter fields, softer labels, yellow action */
.qform--flat{
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-top:2px solid var(--y);border-radius:3px;
  padding:clamp(22px,2.6vw,30px);
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.qform--flat .fld label{letter-spacing:.06em;font-size:.7rem;text-transform:none;
  font-weight:600;line-height:1.5}
.qform--flat .fld input,.qform--flat .fld select{height:44px}
.qform--flat .btn{margin-top:2px}
.qform--flat .qform__fine{margin-top:2px;letter-spacing:.04em}

.fld__opt{font-weight:400;opacity:.7;text-transform:none;letter-spacing:0}
.fld__hint{font-size:.74rem;color:var(--w-3);line-height:1.55;margin-top:2px}
.fld input[type=file]{
  height:auto;padding:11px 14px;font-size:.85rem;cursor:pointer;
}

/* Spec: reduce field height and vertical spacing 15-20% — a fence estimate
   should not feel like a mortgage application. 50px -> 42px is ~16%. */
.bigform{gap:13px}
.bigform .fld{gap:5px}
.bigform .fld input,.bigform .fld select{height:42px}
.bigform .fld label{letter-spacing:.05em;font-size:.71rem;text-transform:none;
  font-weight:600;line-height:1.5}
.bigform textarea{padding:10px 14px}

/* the estimate page already IS the conversion — a second sticky
   "Free estimate" button competes with the form's own submit */
body.has-form .callbar__a--est{display:none}
body.has-form .callbar__a--tel{flex:1}

@media (max-width:1024px){
  .std-grid--4{grid-template-columns:1fr 1fr}
  .estimate__in{grid-template-columns:1fr}
  .work__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
}
@media (max-width:760px){
  .std-grid--4{grid-template-columns:1fr}
  .qform--flat{grid-template-columns:1fr}
  .hero__ticks{gap:8px 18px}
  .hero__ticks li{font-size:.86rem}
  .work__grid{grid-template-columns:1fr 1fr;grid-auto-rows:130px}
  .work__i--wide{grid-column:span 2}
  .work__i--tall{grid-row:span 1}
}
.hubc__list{margin-top:10px;font-size:.78rem;letter-spacing:.06em;color:var(--w-3);line-height:1.7}

/* ═══ MOBILE HEADER + HERO POLISH ════════════════════════════════ */
@media (max-width:1200px){
  /* `.hdr__nav + .hdr__act{margin-left:0}` still matched with the nav at
     display:none, so the phone + burger sat mid-header instead of right. */
  .hdr__nav + .hdr__act{margin-left:auto}
  .hdr__act{gap:3px}
  /* pull the burger's 44px box out so the ICON lands ~22px from the edge
     while the tap target keeps its full size */
  .burger{margin-right:-10px}
  /* charcoal reads harder than yellow on a cream bar */
  .hdr__telbtn svg{fill:var(--blk)}
  .hdr__telbtn:active{background:rgba(34,30,32,.08)}
}

@media (max-width:760px){
  /* one headline unit: the serif line sits under, and below, the first */
  .hero__h1{margin-bottom:20px}
  .hero__h1 .ln--ser{font-size:.86em;margin-top:-.06em}

  /* the paragraph sits over photography — darken the type and thicken the
     plate behind it rather than trusting the image to stay light */
  .hero__sub{color:var(--w) !important;max-width:34ch}

  /* the gate scrollwork competes with the headline, so fade the image
     harder across the top third only */
  .hero__scrim{
    background:linear-gradient(to bottom,
      rgba(8,8,10,.96) 0%,rgba(8,8,10,.90) 34%,rgba(8,8,10,.80) 58%,rgba(8,8,10,.97) 100%);
  }

  /* the phone is the secondary action — it should not match the yellow */
  .hero__btns .btn--ghost{--bh:52px;font-size:.86rem;opacity:.92}

  /* tighter foot: get the next section into view sooner */
  .hero{padding-bottom:36px}
  .hero__ticks{margin-top:24px;gap:9px}
}

html.t-light .hero__sub{color:var(--ink-t) !important}
@media (max-width:760px){
  html.t-light .hero__scrim{
    background:linear-gradient(to bottom,
      rgba(251,249,245,.97) 0%,rgba(251,249,245,.93) 34%,rgba(251,249,245,.86) 58%,rgba(251,249,245,1) 100%);
  }
}

/* Ticker: an infinite marquee always has a partial word at each edge — that
   is the loop, not a bug. Fade the ends so words enter and leave cleanly
   instead of being hard-clipped mid-glyph. */
.ticker{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
}

/* Appearance control — a DEMO control, so it has to be reachable at a glance.
   The spec's objection was that it floated OVER the mobile navigation and the
   phone CTA, not that it floated at all. So:
     mobile  -> lives in the menu footer, in flow, obscuring nothing
     desktop -> floats bottom-left, where there is no drawer or call bar to hide
   Burying it at the foot of a 7,000px page technically ships it and practically
   removes it. */
.appearance--ft{
  position:fixed;left:20px;bottom:20px;z-index:96;
  margin:0;padding:8px 8px 8px 16px;border-top:0;
  gap:12px;border-radius:100px;
  background:rgba(12,12,14,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.7);
}
.appearance--ft .appearance__k{color:rgba(255,255,255,.55);font-size:.62rem}
.appearance--ft .appearance__b{background:none;border:0;padding:0}
.appearance--ft .appearance__b button{font-size:.66rem;padding:6px 13px;color:rgba(255,255,255,.62)}
.appearance--ft .appearance__b button:hover{color:#fff}
.appearance--ft .appearance__b button[aria-pressed="true"]{background:var(--y);color:var(--blk)}

@media (max-width:760px){
  /* the menu already carries one — don't show it twice on a phone */
  .appearance--ft{display:none}
}