/*
Theme Name: ECO LED
Theme URI: https://www.ecoledco.com
Author: Seed Light PLT
Description: Custom theme for ECO LED, commercial and industrial LED lighting upgrades and utility rebate program delivery. Built as a multi-page revamp of a single-page site.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: ecoledco
*/

/* ============================================================
   TOKENS
   Reference signature was flat green #2db24a with navy #0a1f44.
   Same family, visibly shifted: deeper emerald, cooler navy.
   ============================================================ */
:root{
  --brand:#07875A;
  --brand-dark:#055F42;
  --brand-bright:#35D07F;
  --brand-tint:#E8F5EF;

  --ink:#0B1B2B;
  --ink-2:#14293C;
  --body:#3E4F57;
  --muted:#6B7B82;
  --line:#DDE4E3;
  --mist:#F2F6F4;
  --paper:#FFFFFF;
  --amber:#F5A623;

  --gut:clamp(18px,4vw,40px);
  --wrap:1240px;
  --r:14px;
  --r-s:10px;
  --shadow:0 1px 2px rgba(11,27,43,.04),0 12px 34px rgba(11,27,43,.07);
  --shadow-lg:0 2px 4px rgba(11,27,43,.05),0 28px 70px rgba(11,27,43,.12);

  --f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --head-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--body);
  font:400 17px/1.68 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{font-family:var(--f-display);color:var(--ink);margin:0 0 .5em;line-height:1.14;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5.1vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.65rem,3.5vw,2.6rem);font-weight:800}
h3{font-size:clamp(1.15rem,1.9vw,1.42rem);font-weight:700;letter-spacing:-.01em}
h4{font-size:1.05rem;font-weight:700}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin:0 0 .42em}
strong{color:var(--ink);font-weight:600}
:focus-visible{outline:3px solid var(--brand-bright);outline-offset:2px;border-radius:4px}
/* Without this the browser paints its own bright blue over any dragged text, which on
   the dark hero reads as a stray highlight following the cursor. Brand green with white
   type stays legible on both the light sections and the hero. */
::selection{background:var(--brand);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink);color:#fff;padding:12px 18px}
.skip:focus{left:8px;top:8px}

/* ---------- icons ---------- */
.ic{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-.12em}

/* ---------- TBD placeholders ---------- */
.tbd{
  background:#FFF3D6;color:#7A5200;border:1px dashed #E0A83C;
  border-radius:5px;padding:.05em .42em;font-weight:600;font-size:.94em;white-space:nowrap;
}

/* ---------- image slots ---------- */
.slot{width:100%;object-fit:cover;border-radius:var(--r);background:var(--mist)}
.slot--pending{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px dashed #BFCEC8;background:
    repeating-linear-gradient(135deg,#EFF4F1 0 12px,#E7EEEA 12px 24px);
  color:#7C8D86;text-align:center;padding:14px;
}
.slot__tag{font:700 10px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase}
.slot__name{font:500 11px/1.4 var(--f-body);word-break:break-all;opacity:.8}

/* ============================================================
   BUTTONS
   Base uses a.btn / button.btn (0,1,1) so any later hide or
   colour override must match or beat it. Documented traps 2 and 3.
   ============================================================ */
a.btn,button.btn{-webkit-user-select:none;user-select:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font:600 15.5px/1 var(--f-body);letter-spacing:.005em;
  padding:16px 26px;border-radius:var(--r-s);border:1.5px solid transparent;
  cursor:pointer;text-align:center;text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
a.btn:hover,button.btn:hover{text-decoration:none;transform:translateY(-1px)}
a.btn-primary,button.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
a.btn-primary:hover,button.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
a.btn-ghost,button.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
a.btn-ghost:hover,button.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
a.btn-onink,button.btn-onink{background:#fff;color:var(--ink);border-color:#fff}
a.btn-onink:hover,button.btn-onink:hover{background:var(--brand-bright);border-color:var(--brand-bright);color:var(--ink)}
a.btn-outline-ink,button.btn-outline-ink{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
a.btn-outline-ink:hover,button.btn-outline-ink:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
a.btn-lg,button.btn-lg{padding:19px 32px;font-size:16.5px}

/* ============================================================
   HEADER
   No backdrop-filter / transform / will-change anywhere on the
   header, and the drawer lives OUTSIDE the header in the DOM,
   so the containing-block clip (trap 1) and the stacking-context
   dim trap (trap 8) cannot occur by construction.
   ============================================================ */
.topbar{background:var(--ink);color:rgba(255,255,255,.8);font-size:13.5px}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px;padding-block:8px}
.topbar a{color:rgba(255,255,255,.9)}
.topbar a:hover{color:#fff}
.topbar__note{display:inline-flex;align-items:center;gap:.5em}
.topbar__links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

.site-head{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:32px;min-height:var(--head-h)}

.brandlink{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brandlink:hover{text-decoration:none}
.brandmark{display:inline-flex;align-items:center}
.brandmark__img{height:54px;width:auto;display:block}
.drawer__brand .brandmark__img{height:46px}
.ft .brandmark__img{height:62px}
@media (max-width:520px){.brandmark__img{height:42px}}

/* Groups stretch the full header height so the dropdown can sit flush on the
   header's bottom edge. Without that there is a dead gap between the button and
   the panel and the menu closes while the pointer crosses it. */
.mainnav{margin-left:auto;align-self:stretch;display:flex;align-items:stretch;gap:6px}
/* Plain items keep the compact pill; only groups stretch, so their panel can
   anchor to the header's bottom edge rather than to the pill's. */
.mainnav>.mainnav__top{align-self:center}
.mainnav__group{position:relative;display:flex;align-items:center}
.mainnav__top{
  display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:8px;
  font:500 14.6px/1 var(--f-body);color:var(--ink-2);white-space:nowrap;
  background:none;border:0;cursor:pointer;font-family:inherit;
}
.mainnav__top:hover{background:var(--mist);color:var(--brand-dark);text-decoration:none}
.mainnav__top:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mainnav__top[aria-current="page"],
.mainnav__top[data-current="1"]{color:var(--brand-dark);font-weight:600;background:var(--brand-tint)}
.mainnav__caret{flex:0 0 auto;transition:transform .18s ease}
.mainnav__group.open .mainnav__caret{transform:rotate(180deg)}

.mainnav__sub{
  position:absolute;top:100%;left:0;z-index:95;
  min-width:246px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px rgba(16,32,26,.14);
  display:none;
}
.mainnav__group.open .mainnav__sub{display:block}
.mainnav__sub a{
  display:block;padding:10px 12px;border-radius:8px;
  font:500 14.6px/1.25 var(--f-body);color:var(--ink-2);
}
.mainnav__sub a:hover{background:var(--mist);color:var(--brand-dark);text-decoration:none}
.mainnav__sub a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.mainnav__sub a[aria-current="page"]{color:var(--brand-dark);font-weight:600;background:var(--brand-tint)}
@media (prefers-reduced-motion:reduce){.mainnav__caret{transition:none}}
.head-cta{flex:0 0 auto}

.burger{
  display:none;margin-left:auto;background:transparent;border:1.5px solid var(--line);
  border-radius:9px;width:46px;height:44px;padding:0;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}

/* ---------- mobile drawer (direct child of body) ---------- */
.nav-dim{
  position:fixed;inset:0;background:rgba(18,18,20,.5);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;
  z-index:80; /* strictly BELOW .site-head z-index 90 - trap 8 */
}
body.nav-open .nav-dim{opacity:1;visibility:visible}

.drawer{
  position:fixed;inset:0 0 0 auto;height:100dvh;width:min(92vw,400px);
  background:#fff;                 /* opaque, never see-through */
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:1000;overflow-y:auto;overscroll-behavior:contain;
  padding:26px 24px 40px;          /* tight top padding - trap 11 */
  box-shadow:-20px 0 60px rgba(11,27,43,.18);
  visibility:hidden;
}
body.nav-open .drawer{transform:translateX(0);visibility:visible}
.drawer__close{
  position:absolute;top:14px;right:16px;width:42px;height:42px;
  border:1.5px solid var(--line);background:#fff;border-radius:9px;
  font-size:21px;line-height:1;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.drawer__brand{margin:2px 0 22px}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{
  display:block;                    /* trap 15d - inline links ignore vertical padding */
  padding:13px 12px;border-radius:9px;
  font:600 17px/1.25 var(--f-body);color:var(--ink);
}
.drawer nav a:hover,.drawer nav a[aria-current="page"]{background:var(--mist);text-decoration:none;color:var(--brand-dark)}
.drawer__sep{height:1px;background:var(--line);margin:14px 4px}
.drawer__lbl{
  font:700 10.5px/1 var(--f-body);letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);padding:0 12px;margin:6px 0 8px;
}
/* trap 3 + trap 10: beat .drawer nav a colour, and centre the label */
.drawer nav a.btn,.drawer a.btn{text-align:center;justify-content:center;width:100%;margin-top:8px}
.drawer nav a.btn-primary{color:#fff}
.drawer__contact{margin-top:20px;padding:0 12px;font-size:14.6px;color:var(--muted)}
.drawer__contact a{display:inline-flex;align-items:center;gap:.5em;color:var(--ink);font-weight:600}

/* ============================================================
   SECTIONS + CONTRAST RHYTHM
   .s-paper / .s-mist / .s-ink alternate. No two adjacent the same.
   ============================================================ */
/* Three heights, not one. The reference alternates tall blocks with short strips and
   that cadence is most of what reads as rhythm; a page of identically tall sections
   reads as a list. --tight is a strip, default is a block, --tall is a set piece. */
.sec{position:relative;padding:clamp(56px,7vw,104px) 0}
.sec--tight{padding:clamp(34px,4.2vw,58px) 0}
.sec--tall{padding:clamp(72px,9vw,136px) 0}
.sec>.wrap{position:relative;z-index:1}
.s-paper{background:var(--paper)}
.s-mist{background:var(--mist)}

.s-ink{background:var(--ink);color:rgba(255,255,255,.78)}
.s-ink h1,.s-ink h2,.s-ink h3,.s-ink h4{color:#fff}
.s-ink a{color:var(--brand-bright)}
.s-brand{background:var(--brand-dark);color:rgba(255,255,255,.86)}
.s-brand h2,.s-brand h3{color:#fff}

/* The reference sets a short green rule above every section heading. Cheap, and it is
   the thing that makes each block announce itself instead of just starting. */
.eyebrow{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:.85em;
  font:700 11.5px/1 var(--f-body);letter-spacing:.19em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px;
}
.eyebrow::before{content:"";display:block;width:56px;height:3px;background:var(--brand);border-radius:2px}
.sec-head .eyebrow{align-items:center}
.sec-head--left .eyebrow{align-items:flex-start}
.s-ink .eyebrow,.s-brand .eyebrow{color:var(--brand-bright)}
.s-ink .eyebrow::before,.s-brand .eyebrow::before{background:var(--brand-bright)}
.sec-head{max-width:760px;margin:0 auto clamp(34px,4.4vw,58px);text-align:center}
.sec-head p{color:var(--muted);font-size:17.5px;margin:0}
.s-ink .sec-head p{color:rgba(255,255,255,.72)}
.sec-head--left{margin-inline:0;text-align:left}

/* ---------- grids ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}
/* regions: four territories, so a 3-up leaves an orphan. Two-up reads better with body copy. */
.g-regions{grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){.g-regions{grid-template-columns:1fr}}

/* ---------- cards ----------
   The reference's card grammar, kept: a green rule across the top edge and a solid
   dark icon tile anchored into the top-right corner. The pale mint rounded square
   this theme shipped with read as a decoration; a filled tile reads as a marker. */
.card{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);
  border-radius:var(--r);
  padding:26px;display:flex;flex-direction:column;gap:11px;height:100%;
}
.s-mist .card{background:#fff}
/* Base tile. .card__ic is also used standalone outside a card (the industries page sets
   one above each split heading), so the base has to stay in normal flow - making the base
   absolute sent those seven icons to the section's top-right corner. */
.card__ic{
  width:56px;height:56px;border-radius:12px;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto;
}
/* Inside a card it becomes the corner tab. Direct child only. */
.card>.card__ic{
  position:absolute;top:0;right:0;
  width:64px;height:64px;border-radius:0 0 0 var(--r);font-size:26px;
}
.card>.card__ic+h3{padding-right:76px;min-height:34px}
.card h3{margin:0}
.card p{color:var(--body);font-size:15.8px;margin:0}
.card__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px;list-style:none;padding-left:0}
.card__tags li{
  margin:0;font:600 12.2px/1 var(--f-body);color:var(--brand-dark);
  background:var(--brand-tint);border-radius:20px;padding:7px 12px;
}
.card__more{margin-top:2px;font-weight:600;font-size:14.6px;display:inline-flex;align-items:center;gap:.4em}

/* card on a dark section keeps its own readable colours - readability gate */
.s-ink .card{background:#122539;border-color:rgba(255,255,255,.11);border-top-color:var(--brand-bright)}
.s-ink .card h3{color:#fff}
.s-ink .card p{color:rgba(255,255,255,.74)}
/* a navy tile on a navy card is invisible, so the dark colourway fills with brand green */
.s-ink .card__ic{background:var(--brand);color:#fff}
.s-ink .card__tags li{background:rgba(53,208,127,.13);color:var(--brand-bright)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--ink);color:rgba(255,255,255,.8);overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media .slot{width:100%;height:100%;border-radius:0;object-fit:cover}
/* the clip sits where the still did: same box, same crop.
   THE SCRIM IS BAKED INTO THE FILE, there is no overlay element any more. A separate
   absolutely-positioned scrim over a video is composited on its own layer and can lag
   the video by a frame while the page scrolls, which shows up as a doubled edge - a
   "second layer". Mixing the wash into the pixels instead (ffmpeg lutrgb, 62% of
   rgba(20,17,14), and the poster darkened to match in PIL) makes that impossible, and
   costs nothing at runtime. Adjusting the darkness now means re-encoding, not editing
   CSS: see hero-video/2026-08-27_1115_commercial-building/README.md for the command.
   Its poster frame fills the box until the source is attached, so there is no flash. */
.hero__video{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none}
/* container alignment: .hero__in is a .wrap, so it must keep the 1240 container and
   constrain the copy inside it. Capping the wrap itself re-centred the column and
   pushed the h1 off the gutter the header logo sits on. */
.hero__in{position:relative;z-index:2;padding-block:clamp(64px,9vw,124px)}
.hero__in>*{max-width:790px}
.hero h1{color:#fff;margin-bottom:18px}
.hero__sub{font-size:clamp(1.02rem,1.7vw,1.24rem);color:rgba(255,255,255,.82);margin:0 0 30px;max-width:640px}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
.hero__note{-webkit-user-select:none;user-select:none;margin-top:26px;font-size:14.4px;color:rgba(255,255,255,.62);display:flex;flex-wrap:wrap;gap:8px 22px}
.hero__note span{display:inline-flex;align-items:center;gap:.45em}
.hero__note .ic{color:var(--brand-bright)}

/* page title plate */
.ptitle{position:relative;background:var(--ink-2);color:rgba(255,255,255,.78);overflow:hidden}
.ptitle__media{position:absolute;inset:0}
.ptitle__media .slot{width:100%;height:100%;border-radius:0;object-fit:cover}
.ptitle::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(11,27,43,.93),rgba(11,27,43,.7))}
.ptitle__in{position:relative;z-index:2;padding-block:clamp(52px,6.5vw,88px)}
.ptitle__in>*{max-width:800px}
.ptitle h1{color:#fff;margin-bottom:14px}
.ptitle p{color:rgba(255,255,255,.8);font-size:17.5px;margin:0;max-width:680px}
.crumbs{font-size:13.6px;color:rgba(255,255,255,.6);margin:0 0 14px}
.crumbs a{color:rgba(255,255,255,.85)}

/* ============================================================
   STATS BAND
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;padding:8px}
.stat__v{font:800 clamp(1.9rem,3.6vw,2.7rem)/1 var(--f-display);color:#fff;letter-spacing:-.02em}
.s-mist .stat__v,.s-paper .stat__v{color:var(--ink)}
.stat__l{font-size:14.2px;color:rgba(255,255,255,.66);margin-top:9px;line-height:1.42}
.s-mist .stat__l,.s-paper .stat__l{color:var(--muted)}

/* ============================================================
   SPLIT (text + media)
   ============================================================ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.split--flip .split__media{order:-1}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
}
.split__media .slot{border-radius:var(--r)}

/* Badge breaking out of the image corner. The reference's one real rhythm device:
   an element that refuses to stay inside its box, which stops the page reading as a
   stack of rectangles. Drops back into flow below 680 so it can never cover the photo. */
.split__media--badge{position:relative}
.imgbadge{
  position:absolute;right:-14px;bottom:-18px;max-width:290px;
  display:flex;align-items:flex-start;gap:11px;
  background:var(--brand);color:#fff;border-radius:var(--r-s);
  padding:18px 20px;box-shadow:var(--shadow-lg);
  font:700 16.5px/1.32 var(--f-display);letter-spacing:-.01em;
}
.imgbadge .ic{font-size:22px;flex:0 0 auto;margin-top:1px}
@media (max-width:680px){
  .imgbadge{position:static;margin-top:14px;max-width:none;box-shadow:none}
}
.featlist{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.featlist li{display:flex;gap:11px;align-items:flex-start;margin:0;font-size:16px}
.featlist .ic{color:var(--brand);font-size:19px;margin-top:2px}
.s-ink .featlist .ic{color:var(--brand-bright)}

/* ============================================================
   PROCESS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;position:relative}
.step__n{font:800 13px/1 var(--f-display);letter-spacing:.1em;color:var(--brand);margin-bottom:14px;display:block}
.step__ic{font-size:26px;color:var(--brand-dark);margin-bottom:12px}
.step h3{font-size:1.1rem;margin:0 0 8px}
.step p{font-size:15.4px;margin:0;color:var(--body)}

/* ============================================================
   CALCULATOR
   ============================================================ */
.calc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
}
.calc__grid{display:grid;grid-template-columns:1.02fr .98fr}
@media (max-width:900px){.calc__grid{grid-template-columns:1fr}}
.calc__inputs{padding:clamp(24px,3vw,34px)}
.calc__out{
  padding:clamp(24px,3vw,34px);background:var(--ink);color:rgba(255,255,255,.76);
  display:flex;flex-direction:column;gap:18px;
}
.calc__out h3{color:#fff;margin:0}
.calc__row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:560px){.calc__row{grid-template-columns:1fr}}
.calc__big{
  background:rgba(53,208,127,.11);border:1px solid rgba(53,208,127,.28);
  border-radius:var(--r-s);padding:20px;
}
.calc__big .k{font:600 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-bright)}
.calc__big .v{font:800 clamp(1.7rem,3.4vw,2.35rem)/1 var(--f-display);color:#fff;margin-top:11px;letter-spacing:-.02em}
.calc__sub{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:420px){.calc__sub{grid-template-columns:1fr}}
.calc__cell{background:rgba(255,255,255,.055);border-radius:var(--r-s);padding:15px}
.calc__cell .k{font:600 11.4px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.56)}
.calc__cell .v{font:700 1.24rem/1 var(--f-display);color:#fff;margin-top:9px}
.calc__note{font-size:13.4px;color:rgba(255,255,255,.55);line-height:1.55;margin:0}
.calc__out .btn{width:100%}

/* ---------- forms ---------- */
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}
.fld label{font:600 14px/1.3 var(--f-body);color:var(--ink)}
/* Block, not inline: an inline hint runs into its own label and reads as one
   run-on sentence. Caught in the 1440 visual pass. */
.fld .hint{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:3px;line-height:1.45}
.fld input,.fld select,.fld textarea{
  width:100%;font:400 16px/1.4 var(--f-body);color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-s);
  padding:13px 14px;transition:border-color .16s ease,box-shadow .16s ease;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(7,135,90,.14);
}
.fld textarea{min-height:132px;resize:vertical}
.fld--2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:620px){.fld--2{grid-template-columns:1fr}}
.calc__inputs .fld input{background:#fff}

/* option pills - trap 5: keep the input at natural size inside a flex label */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:.5em;
  border:1.5px solid var(--line);border-radius:30px;padding:10px 16px;
  font:500 14.6px/1.15 var(--f-body);color:var(--ink);cursor:pointer;background:#fff;
}
.pill input{width:auto!important;flex:0 0 auto;margin:0;accent-color:var(--brand)}
.pill:has(input:checked){border-color:var(--brand);background:var(--brand-tint);color:var(--brand-dark);font-weight:600}

.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}

.notice{border-radius:var(--r-s);padding:16px 18px;margin:0 0 22px;font-size:15.4px;border:1.5px solid}
.notice--ok{background:var(--brand-tint);border-color:rgba(7,135,90,.32);color:#04553B}
.notice--err{background:#FDECEC;border-color:#F0B4B4;color:#8A1F1F}
.notice--carry{background:#FFF8E8;border-color:#EBCB86;color:#6D4E00}

/* ============================================================
   UTILITY PROGRAM CARDS
   ============================================================ */
.util{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:14px;
}
.util__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px}
.util__name{font:800 1.42rem/1.1 var(--f-display);color:var(--ink);margin:0}
.util__terr{
  font:600 12px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-dark);background:var(--brand-tint);border-radius:20px;padding:7px 12px;
}
.util__prog{font:600 15.4px/1.4 var(--f-body);color:var(--ink-2);margin:0}
.util__facts{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:11px}
.util__facts li{display:flex;gap:11px;align-items:flex-start;margin:0;font-size:15.6px}
.util__facts .ic{color:var(--brand);font-size:18px;margin-top:3px;flex:0 0 auto}
.util__deadline{
  background:#FFF8E8;border:1px solid #EBCB86;border-radius:var(--r-s);
  padding:13px 15px;font-size:14.6px;color:#6D4E00;display:flex;gap:10px;align-items:flex-start;
}
.util__deadline .ic{margin-top:2px;flex:0 0 auto}
.util__links{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.util__src{margin:0;font-size:14.6px;font-weight:600;display:inline-flex;align-items:center;gap:.45em}
.util__src .ic{font-size:16px}
a.btn-sm,button.btn-sm{padding:11px 18px;font-size:14.4px}

/* ============================================================
   REBATE RAIL - horizontal carousel
   Renders whatever rme_utilities() holds, so adding a program to that array puts a
   new slide here with no template edit. Native scroll-snap does the work: the arrows
   are an enhancement, and with JS off or scripting blocked the rail still swipes.
   ============================================================ */
.rail{position:relative}
.rail__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.rail__count{
  font:700 11.5px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-dark);background:var(--brand-tint);border-radius:20px;padding:9px 14px;
  display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;
}
.s-ink .rail__count{background:rgba(53,208,127,.15);color:var(--brand-bright)}
.rail__nav{display:flex;gap:10px;flex:0 0 auto}
.rail__btn{
  width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:20px;transition:background .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease;
}
.rail__btn:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#fff}
.rail__btn:disabled{opacity:.32;cursor:default}
.rail__btn--prev .ic{transform:rotate(180deg)}
.s-ink .rail__btn{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.s-ink .rail__btn:hover:not(:disabled){background:var(--brand-bright);border-color:var(--brand-bright);color:var(--ink)}

.rail__track{
  /* a fixed track width, not minmax: in an overflowing column grid every track collapses
     to the minimum, so minmax(300px,364px) rendered every slide at 300px */
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(276px,74vw,352px);gap:22px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 4px 22px;margin:-4px -4px 0;
  scrollbar-width:thin;scrollbar-color:var(--brand) transparent;
}
@media (prefers-reduced-motion:reduce){.rail__track{scroll-behavior:auto}}
.rail__track::-webkit-scrollbar{height:6px}
.rail__track::-webkit-scrollbar-track{background:rgba(11,27,43,.08);border-radius:20px}
.rail__track::-webkit-scrollbar-thumb{background:var(--brand);border-radius:20px}
.s-ink .rail__track::-webkit-scrollbar-track{background:rgba(255,255,255,.12)}

.rslide{
  scroll-snap-align:start;
  position:relative;overflow:hidden;height:100%;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);
  border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:13px;
}
.s-ink .rslide{background:#122539;border-color:rgba(255,255,255,.11);border-top-color:var(--brand-bright)}
.rslide__ic{
  position:absolute;top:0;right:0;width:58px;height:58px;border-radius:0 0 0 var(--r);
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;
}
.s-ink .rslide__ic{background:var(--brand);color:#fff}
.rslide__name{font:800 1.3rem/1.15 var(--f-display);color:var(--ink);margin:0;padding-right:66px}
.s-ink .rslide__name{color:#fff}
.rslide__terr{
  font:600 11.4px/1.35 var(--f-body);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0;
}
.s-ink .rslide__terr{color:rgba(255,255,255,.6)}
.rslide__prog{font:600 14.8px/1.45 var(--f-body);color:var(--ink-2);margin:0}
.s-ink .rslide__prog{color:rgba(255,255,255,.86)}
.rslide__fact{
  margin:0;font-size:15.2px;line-height:1.6;display:flex;gap:10px;align-items:flex-start;
  border-top:1px solid var(--line);padding-top:14px;
}
.s-ink .rslide__fact{border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.76)}
.rslide__fact .ic{color:var(--brand);font-size:18px;margin-top:3px;flex:0 0 auto}
.s-ink .rslide__fact .ic{color:var(--brand-bright)}
.rslide__more{margin-top:auto;padding-top:6px;font-weight:600;font-size:14.6px;display:inline-flex;align-items:center;gap:.4em}
.rail__hint{margin:0;font-size:13.8px;color:var(--muted)}
.s-ink .rail__hint{color:rgba(255,255,255,.6)}

/* ============================================================
   SINGLE PROGRAM PAGE
   ============================================================ */
.backlink{margin:0 0 26px;font-size:14.8px}
.backlink a{font-weight:600;display:inline-flex;align-items:center;gap:.45em}
.backlink .ic{transform:rotate(180deg);font-size:16px}
.split--prog{grid-template-columns:1.25fr .75fr;align-items:start}
@media (max-width:900px){.split--prog{grid-template-columns:1fr}}
.split--prog .lead{font-size:18.4px;color:var(--ink-2)}
.progcard{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);
  border-radius:var(--r);padding:26px;box-shadow:var(--shadow);
}
.progcard+.progcard{margin-top:22px}
.progcard--plain{box-shadow:none;border-top-color:var(--line)}
.progcard__ic{
  width:52px;height:52px;border-radius:12px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px;
}
.progcard h3{margin:0 0 10px}
.progcard p{font-size:15.6px;margin:0}
.proglist{margin:0;padding-left:1.15em;font-size:15.2px}
.proglist li{margin-bottom:10px}
.progflip{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:680px){.progflip{grid-template-columns:1fr}}
.progflip__a{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  transition:border-color .18s ease,transform .18s ease;
}
.progflip__a:hover{border-color:var(--brand);transform:translateY(-2px);text-decoration:none}
.progflip__a--next{text-align:right}
.progflip__k{font:700 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.progflip__n{font:800 1.15rem/1.2 var(--f-display);color:var(--ink)}
.progflip__t{font-size:14px;color:var(--muted)}

/* ============================================================
   REGIONS + CITIES
   ============================================================ */
/* ---------- completed project gallery ---------- */
.projects{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1000px){.projects{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.projects{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.projects{grid-template-columns:1fr}}
.project{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
  transition:box-shadow .18s ease,transform .18s ease;
}
a.project:hover{text-decoration:none;box-shadow:var(--shadow);transform:translateY(-2px)}
.project .slot{border-radius:0;width:100%;aspect-ratio:4/3;object-fit:cover}
.project__cap{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.project__t{font:700 15px/1.32 var(--f-display);color:var(--ink)}
.project__a{display:flex;gap:6px;align-items:flex-start;font-size:12.8px;color:var(--muted);line-height:1.4}
.project__a .ic{color:var(--brand);flex:none;margin-top:1px;width:14px;height:14px}
.project__k{
  font:700 10.5px/1 var(--f-body);letter-spacing:.15em;text-transform:uppercase;color:var(--brand-dark);
}
.project__n{font:500 12.5px/1.32 var(--f-body);color:var(--muted);white-space:nowrap}
.projects__all{text-align:center;margin:34px 0 0}

/* ---------- projects hub (/projects/) ---------- */
.pfilter{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 0 30px}
.chip{
  font:600 14px/1 var(--f-body);color:var(--ink-2);background:var(--mist);
  border:1px solid var(--line);border-radius:22px;padding:10px 16px;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.chip:hover{border-color:var(--brand)}
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pgrid{grid-template-columns:1fr}}
.pcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;
  transition:box-shadow .18s ease,transform .18s ease;
}
.pcard:hover{text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.pcard__media{position:relative;display:block}
.pcard__media .slot{border-radius:0;width:100%;aspect-ratio:4/3;object-fit:cover}
.pcard__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px}
.pcard__t{font:700 16.5px/1.3 var(--f-display);color:var(--ink)}
.pcard__a{display:flex;gap:7px;align-items:flex-start;font-size:13.8px;color:var(--muted);line-height:1.45}
.pcard__a .ic{color:var(--brand);flex:none;margin-top:1px}
.pcard__k{font:700 10.5px/1 var(--f-body);letter-spacing:.15em;text-transform:uppercase;color:var(--brand-dark)}
.pcard__n{font:500 13px/1.3 var(--f-body);color:var(--muted);white-space:nowrap}
.pgrid__none{text-align:center;color:var(--muted);margin:30px 0 0}
.pcard.is-off{display:none}

/* ---------- single project page ---------- */
.pdetails{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 30px}
.pdetail{display:flex;align-items:center;gap:8px;font:500 15px/1.4 var(--f-body);color:var(--ink-2)}
.pdetail .ic{color:var(--brand);flex:none}
.pgal__h{display:flex;align-items:baseline;gap:12px;margin:38px 0 18px;font-size:clamp(1.3rem,2.2vw,1.7rem)}
.pgal__c{font:600 13px/1 var(--f-body);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.pgal__note{margin:-6px 0 18px;font-size:14.6px;color:var(--muted);max-width:62ch}
.pgal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.pgal{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.pgal{grid-template-columns:repeat(2,1fr)}}
.pgal__item{display:block;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line)}
.pgal__item .slot{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;transition:transform .25s ease}
.pgal__item:hover .slot{transform:scale(1.035)}
.pnav{display:flex;justify-content:space-between;gap:18px;margin:44px 0 0;border-top:1px solid var(--line);padding-top:26px}
.pnav a{font:600 15px/1.4 var(--f-body)}
@media (max-width:560px){.pnav{flex-direction:column}}

/* ---------- before / after slider ---------- */
.ba{margin:0 0 14px}
.ba__frame{
  position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);
  aspect-ratio:16/10;background:var(--mist);
  --pos:50%;
}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto}
.ba__top{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.ba__divider{
  position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;
  background:#fff;box-shadow:0 0 0 1px rgba(11,27,43,.18);pointer-events:none;
}
.ba__knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:var(--shadow);
}
.ba__knob::before,.ba__knob::after{
  content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;
}
.ba__knob::before{left:6px;transform:translateY(-50%);border-right-color:var(--ink)}
.ba__knob::after{right:6px;transform:translateY(-50%);border-left-color:var(--ink)}
.ba__range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;touch-action:none;
}
.ba__tag{
  position:absolute;top:14px;background:rgba(11,27,43,.78);color:#fff;border-radius:6px;
  padding:7px 11px;font:700 11px/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase;
}
.ba__tag--b{left:14px}
.ba__tag--a{right:14px}
.ba__hint{font-size:13.6px;color:var(--muted);margin:10px 2px 0}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:400;background:rgba(7,15,23,.94);
  display:flex;align-items:center;justify-content:center;padding:34px;
}
.lb[hidden]{display:none}
.lb__img{max-width:min(1500px,92vw);max-height:86vh;width:auto;height:auto;border-radius:8px;box-shadow:var(--shadow-lg)}
.lb__cap{
  position:absolute;left:0;right:0;bottom:16px;text-align:center;color:rgba(255,255,255,.82);
  font:500 14px/1.4 var(--f-body);padding:0 70px;
}
.lb__btn{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:#fff;border-radius:50%;width:48px;height:48px;cursor:pointer;
  font:400 21px/1 var(--f-body);display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.lb__btn:hover{background:rgba(255,255,255,.22)}
.lb__x{top:18px;right:18px}
.lb__p{left:14px;top:50%;transform:translateY(-50%)}
.lb__n{right:14px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .lb{padding:12px}
  .lb__p{left:6px}.lb__n{right:6px}
  .lb__btn{width:42px;height:42px}
  .lb__cap{padding:0 12px;bottom:8px}
}

.region{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
/* regions with a photograph: image bleeds to the card edge, copy keeps its padding */
.region--img{padding:0;overflow:hidden;display:flex;flex-direction:column}
.region--img>*:not(.region__media){margin-inline:28px}
/* h3 margin-top and ul margin-bottom used to live here; both were dead, clobbered by
   the `.region h3` / `.region ul` margin shorthands below. See REGION CARD SPACING. */
.region__media .slot{border-radius:0;width:100%}
.region h3{margin:0 0 10px}
.region p{font-size:15.6px}
.region ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.region li{margin:0;font:500 13.6px/1 var(--f-body);color:var(--ink-2);background:var(--mist);border-radius:20px;padding:8px 13px}
.city{border-top:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:250px 1fr;gap:12px 30px}
@media (max-width:720px){.city{grid-template-columns:1fr;gap:6px}}
.city h3{margin:0;font-size:1.06rem;display:flex;align-items:center;gap:.5em}
.city h3 .ic{color:var(--brand);font-size:18px}
.city p{margin:0;font-size:15.6px}

/* ============================================================
   CASE STUDY + CLIENTS + FAQ + TESTIMONIAL
   ============================================================ */
.case__figs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
@media (max-width:720px){.case__figs{grid-template-columns:1fr}}
.figbox{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-s);padding:20px}
.figbox .k{font:600 11.4px/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.figbox .v{font:800 1.6rem/1.05 var(--f-display);color:#fff;margin-top:10px;letter-spacing:-.02em}
.figbox .d{font-size:13.6px;color:var(--brand-bright);margin-top:7px;font-weight:600}

.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.clients{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.clients{grid-template-columns:1fr}}
.client{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:17px 19px}
.client__n{font:700 15.4px/1.3 var(--f-display);color:var(--ink)}
.client__a{font-size:13.6px;color:var(--muted);margin-top:5px;line-height:1.5}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 46px 22px 0;position:relative;
  font:700 17.2px/1.4 var(--f-display);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 40px 24px 0;font-size:16px;color:var(--body)}

.quote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
.quote .ic{color:var(--brand-tint);font-size:34px}
.quote blockquote{margin:12px 0 16px;font:500 clamp(1.02rem,1.8vw,1.2rem)/1.6 var(--f-body);color:var(--ink)}
.quote cite{font-style:normal;font-size:14.6px;color:var(--muted)}
.quote cite b{color:var(--ink);font-weight:700;display:block;font-size:15.4px}

/* accreditation strip */
.accred{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}
.accred__tile{
  display:inline-flex;align-items:center;gap:.6em;background:#fff;border:1px solid var(--line);
  border-radius:30px;padding:12px 20px;font:600 14.4px/1 var(--f-body);color:var(--ink-2);
}
.accred__tile .ic{color:var(--brand);font-size:18px}

/* ============================================================
   WARRANTY POLICY DOCUMENT
   ============================================================ */
.policy{display:grid;grid-template-columns:250px 1fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:940px){.policy{grid-template-columns:1fr}}
.policy__toc{position:sticky;top:calc(var(--head-h) + 20px);background:var(--mist);border-radius:var(--r);padding:22px}
@media (max-width:940px){.policy__toc{position:static}}
.policy__toc h2{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.policy__toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.policy__toc li{margin:0 0 3px;counter-increment:toc}
.policy__toc a{display:block;padding:7px 9px;border-radius:7px;font-size:14px;color:var(--ink-2);font-weight:500}
.policy__toc a::before{content:counter(toc) ". ";color:var(--muted)}
.policy__toc a:hover{background:#fff;text-decoration:none;color:var(--brand-dark)}
.policy__body h2{
  font-size:clamp(1.24rem,2.1vw,1.55rem);margin:44px 0 14px;padding-top:8px;
  scroll-margin-top:calc(var(--head-h) + 24px);
}
.policy__body h2:first-child{margin-top:0}
.policy__body h3{font-size:1.05rem;margin:24px 0 8px}
.policy__body p,.policy__body li{font-size:16px}
.policy__body ul,.policy__body ol{padding-left:1.25em}
.policy__meta{
  background:var(--brand-tint);border:1px solid rgba(7,135,90,.24);border-radius:var(--r);
  padding:20px 22px;margin:0 0 30px;font-size:15.4px;
}
.policy__meta dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.policy__meta dt{font-weight:600;color:var(--ink)}
.policy__meta dd{margin:0}
.callout{
  background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(22px,3vw,30px);
  display:flex;gap:16px;align-items:flex-start;margin:0 0 30px;
}
.callout .ic{color:var(--brand-bright);font-size:26px;flex:0 0 auto;margin-top:2px}
.callout h3{color:#fff;margin:0 0 7px;font-size:1.14rem}
.callout p{margin:0;color:rgba(255,255,255,.82);font-size:16px}
.legal{font-size:14px;color:var(--muted);line-height:1.65}

/* ============================================================
   CTA BAND
   ============================================================ */
/* The media used to sit at opacity .2 under a .96/.76 green wash, which read as a flat
   green band with no photograph in it at all. Greg: "have the CTA banner visible".
   Media now renders at full strength and the wash carries the text contrast instead.
   Measured on the live band: white body copy over the lightest part of the plate is
   above 7:1, so the photo can be this present without costing readability. */
.ctaband{position:relative;background:var(--brand-dark);overflow:hidden}
.ctaband__media{position:absolute;inset:0}
.ctaband__media .slot{width:100%;height:100%;border-radius:0;object-fit:cover}
.ctaband::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 50%,rgba(3,58,40,.68) 0%,rgba(3,58,40,.86) 100%),
    linear-gradient(100deg,rgba(5,95,66,.86) 0%,rgba(5,95,66,.68) 55%,rgba(4,72,50,.80) 100%);
}
.ctaband__in{position:relative;z-index:2;padding-block:clamp(52px,6.4vw,88px);text-align:center;max-width:760px;margin-inline:auto}
.ctaband h2{color:#fff;margin-bottom:14px}
.ctaband p{color:rgba(255,255,255,.86);font-size:17.4px;margin:0 0 28px}
.ctaband__btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{background:var(--ink);color:rgba(255,255,255,.66);padding:clamp(48px,6vw,76px) 0 0;font-size:15.2px}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px}
@media (max-width:940px){.ft__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__grid{grid-template-columns:1fr}}
.ft h3{color:#fff;font-size:12px;letter-spacing:.17em;text-transform:uppercase;margin:0 0 16px;font-weight:700}
.ft ul{list-style:none;padding:0;margin:0}
.ft li{margin:0 0 10px}
.ft a{color:rgba(255,255,255,.72)}
.ft a:hover{color:#fff}
.ft__blurb{margin:16px 0 0;max-width:330px;font-size:14.8px;line-height:1.62}
.ft__contact li{display:flex;gap:10px;align-items:flex-start}
.ft__contact .ic{color:var(--brand-bright);font-size:17px;margin-top:3px;flex:0 0 auto}
.ft__bar{
  margin-top:clamp(36px,4.4vw,54px);border-top:1px solid rgba(255,255,255,.12);
  padding:22px 0;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  font-size:13.8px;color:rgba(255,255,255,.5);
}
.ft__bar a{color:rgba(255,255,255,.62)}
/* Designer credit: deliberately quieter than the copyright it sits under. */
.ft__bar .ft__credit{display:block;margin-top:5px;font-size:10.4px;font-weight:400;letter-spacing:.01em;color:rgba(255,255,255,.15)}
.ft__bar .ft__credit:hover{color:rgba(255,255,255,.45)}

/* ============================================================
   TABLES - stacked cards on mobile, never a right-scroll
   ============================================================ */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:15.4px}
table.tbl th,table.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl th{font:700 13px/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--mist)}
@media (max-width:640px){
  .tbl-wrap{overflow-x:visible}
  table.tbl,table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:100%}
  table.tbl thead{display:none}
  table.tbl tr{border:1px solid var(--line);border-radius:var(--r-s);margin-bottom:14px;padding:6px 4px;background:#fff}
  table.tbl td{border:0;padding:9px 14px}
  table.tbl td[data-label]::before{
    content:attr(data-label) ": ";font-weight:700;color:var(--muted);
    display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;
  }
}

/* ============================================================
   REVEAL - gated behind .js so no-JS visitors see everything
   ============================================================ */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ============================================================
   RESPONSIVE HEADER SWITCH
   Drawer takes over at 1080px, the theme's original switch. Grouping the nav
   into five items cut it from 815px to about 470px, so the row now has room
   to spare at 1081px; the 1239px value this briefly used is no longer needed.
   ============================================================ */
@media (max-width:1080px){
  .mainnav{display:none}
  /* trap 2: must match a.btn (0,1,1) to actually hide */
  a.btn.head-cta,.head-in .head-cta{display:none}
  /* trap 4: the nav has left the flex flow, so the burger carries the push */
  .burger{display:flex;margin-left:auto}
}
@media (max-width:760px){
  /* trap 5: the utility topbar must never wrap to two lines */
  .topbar{display:none}
}
@media (min-width:1081px){
  .drawer,.nav-dim{display:none}
}

/* ============================================================
   REP TRAINING PAGE (/lighting-count-training/)
   Two small components the brochure pages never needed: a 16/9 frame for the
   training video, and a jump bar so a rep standing under a fixture can reach the
   right section in one tap instead of scrolling a long page on a phone.
   ============================================================ */
.vidbox{
  position:relative;background:var(--mist);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(20px,3vw,28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;min-height:clamp(220px,34vw,420px);
}
/* The placeholder is a sentence, not a value, so it must be allowed to wrap. */
.vidbox .tbd{white-space:normal;line-height:1.5}
.vidbox iframe,.vidbox video{
  width:100%;aspect-ratio:16 / 9;border:0;border-radius:var(--r-s);display:block;
}
.vidbox__note{margin:0;font-size:15px;color:var(--muted);display:flex;align-items:center;gap:.55em;justify-content:center;flex-wrap:wrap}
.vidbox__note .ic{color:var(--brand);font-size:20px;flex:0 0 auto}

.jumps{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;justify-content:center}
.jump{
  display:inline-flex;align-items:center;
  border:1.5px solid var(--line);border-radius:30px;padding:9px 16px;
  font:600 14.4px/1.15 var(--f-body);color:var(--ink-2);background:#fff;
}
.jump:hover{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-dark);text-decoration:none}

/* Section anchors must clear the sticky header when a jump link lands on them. */
#job,#first,#walk,#fixtures,#photos,#utility,#after,#mistakes,#faq{
  scroll-margin-top:calc(var(--head-h) + 16px);
}

/* ------------------------------------------------------------
   DARK-SECTION OVERRIDES
   `strong` is globally var(--ink), which is invisible on .s-ink and .s-brand.
   The table had no dark variant at all, so its first column (the one that carries
   the <strong>) rendered dark on dark. This affects the rep training page and the
   service-areas page, which has carried the same table into .s-ink since launch.
   ------------------------------------------------------------ */
.s-ink strong,.s-brand strong{color:#fff}
.s-ink table.tbl th,.s-brand table.tbl th{
  color:rgba(255,255,255,.62);background:rgba(255,255,255,.06);
}
.s-ink table.tbl td,.s-ink table.tbl th,
.s-brand table.tbl td,.s-brand table.tbl th{border-bottom-color:rgba(255,255,255,.13)}
.s-ink table.tbl td,.s-brand table.tbl td{color:rgba(255,255,255,.78)}
@media (max-width:760px){
  .s-ink table.tbl tr,.s-brand table.tbl tr{
    background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
  }
  .s-ink table.tbl td[data-label]::before,
  .s-brand table.tbl td[data-label]::before{color:rgba(255,255,255,.6)}
}
/* Ordered lists inside a dark card inherit the muted body colour on their markers. */
.s-ink .card ol,.s-ink .card ol li{color:rgba(255,255,255,.78)}

/* ------------------------------------------------------------
   REGION CARD SPACING (service areas)
   `.region ul`'s margin shorthand is declared AFTER `.region--img>ul` at equal
   specificity, so it reset the intended 28px bottom margin to 0 and the county
   pills sat flush against the card edge. Bottom space now comes from the card's
   own padding, which a child's shorthand cannot reach, and the list pins to the
   bottom the way .card__tags already does, so every card's pills line up instead
   of floating anywhere between 0 and 38px above the edge.
   The heading lost its 24px top margin to the same trap, so it sat flush against the
   full-bleed photograph with a 0px gap.
   Declared here, after .region h3 and .region ul, so cascade order is not a trap again.
   ------------------------------------------------------------ */
.region--img{padding:0 0 28px}
.region--img>h3{margin-top:24px}
.region--img>ul{margin-top:auto;margin-bottom:0}