/* =========================================================================
   DION CONSTRUCTION — design system
   Brand: #00B0A8 (from the column mark) + architectural ink + warm neutrals
   ====================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand */
  --brand:        #00B0A8;
  --brand-600:    #009A93;
  --brand-700:    #00827C;
  --brand-800:    #006B66;
  --brand-300:    #6FD8D2;
  --brand-100:    #C8EEEB;
  --brand-tint:   #E9F7F6;

  /* ink */
  --ink:          #0A1315;
  --ink-800:      #10201F;
  --ink-700:      #1A2E2E;
  --ink-600:      #2A4241;
  --ink-500:      #47605F;
  --ink-400:      #6E8483;
  --ink-300:      #9DAEAD;

  /* neutrals (warm, so the teal reads premium not clinical) */
  --paper:        #FBFAF7;
  --mist:         #F2F0EA;
  --stone:        #E5E1D8;
  --sand:         #D3CCBE;

  /* semantic */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --muted:        var(--ink-500);
  --line:         rgba(10,19,21,.12);
  --line-soft:    rgba(10,19,21,.07);
  --line-dark:    rgba(255,255,255,.14);

  /* type */
  --font-display: 'Archivo', 'Archivo Expanded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(.8125rem, .78rem + .16vw, .875rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.06rem + .32vw, 1.3125rem);
  --step-2:  clamp(1.375rem, 1.24rem + .64vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --step-4:  clamp(2rem, 1.62rem + 1.8vw, 3.15rem);
  --step-5:  clamp(2.25rem, 1.65rem + 2.6vw, 4rem);
  --step-6:  clamp(2.6rem, 1.6rem + 3.6vw, 5.25rem);

  /* space */
  --gut:      clamp(1.25rem, 4vw, 3rem);
  --section:  clamp(4.5rem, 9vw, 9.5rem);
  --section-sm: clamp(3rem, 6vw, 6rem);
  --wrap:     1280px;
  --wrap-wide:1560px;
  --wrap-text: 74ch;

  --radius:    2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(10,19,21,.05), 0 2px 8px rgba(10,19,21,.04);
  --shadow:    0 2px 4px rgba(10,19,21,.04), 0 12px 32px rgba(10,19,21,.08);
  --shadow-lg: 0 8px 24px rgba(10,19,21,.10), 0 32px 72px rgba(10,19,21,.14);

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

  --header-h:  78px;
}

@media (max-width:860px){ :root{ --header-h:64px; } }

/* ---------- 2. Reset ---------- */
*,*::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(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.65;
  font-feature-settings:"kern","liga","calt"; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,h5{ margin:0 0 .5em; font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-.025em; text-wrap:balance; }
h1{ font-size:var(--step-5); letter-spacing:-.04em; }
h2{ font-size:var(--step-4); letter-spacing:-.035em; }
h3{ font-size:var(--step-2); letter-spacing:-.02em; }
h4{ font-size:var(--step-1); letter-spacing:-.015em; }
p{ margin:0 0 1.15em; text-wrap:pretty; }
a{ color:inherit; text-decoration-color:rgba(0,176,168,.45); text-underline-offset:.22em; }
a:hover{ text-decoration-color:var(--brand); }
ul,ol{ margin:0 0 1.2em; padding-left:1.15em; }
li{ margin-bottom:.4em; }
strong{ font-weight:650; }
hr{ border:0; border-top:1px solid var(--line); margin:var(--section-sm) 0; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--brand); color:#fff; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--wide{ max-width:var(--wrap-wide); }
.wrap--text{ max-width:calc(var(--wrap-text) + var(--gut)*2); }
.sr-only{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.skip{ position:absolute; left:-9999px; top:0; z-index:9999; background:var(--ink); color:#fff; padding:.8rem 1.2rem; }
.skip:focus{ left:1rem; top:1rem; }

/* ---------- 3. Primitives ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-size:.6875rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brand-800);
  margin:0 0 1.2rem;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--brand); flex:none; }
.eyebrow--light{ color:var(--brand-300); }
.eyebrow--light::before{ background:var(--brand-300); }
.eyebrow--plain::before{ display:none; }

.lede{ font-size:var(--step-1); line-height:1.5; color:var(--ink-700); max-width:62ch; }
.muted{ color:var(--muted); }
.mono-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

.btn{
  --bg-btn:var(--ink); --fg-btn:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  padding:1.05em 1.9em; border:1px solid transparent; border-radius:var(--radius);
  background:var(--bg-btn); color:var(--fg-btn);
  font-family:var(--font-body); font-size:.8125rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--brand);
  transform:translateY(101%); transition:transform .45s var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after{ transform:translateY(0); }
.btn:hover{ color:#fff; }
.btn .ico{ transition:transform .35s var(--ease); }
.btn:hover .ico{ transform:translateX(4px); }
.btn--brand{ --bg-btn:var(--brand); --fg-btn:#04211F; }
.btn--brand::after{ background:var(--ink); }
.btn--brand:hover{ color:#fff; }
.btn--ghost{ --bg-btn:transparent; --fg-btn:var(--ink); border-color:var(--line); }
.btn--ghost::after{ background:var(--ink); }
.btn--ghost:hover{ color:#fff; border-color:var(--ink); }
.btn--ghost-light{ --bg-btn:transparent; --fg-btn:#fff; border-color:rgba(255,255,255,.35); }
.btn--ghost-light::after{ background:#fff; }
.btn--ghost-light:hover{ color:var(--ink); border-color:#fff; }
.btn--sm{ padding:.8em 1.35em; font-size:.75rem; }
.btn--block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55em; text-decoration:none;
  font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-800); padding-bottom:.35em; border-bottom:1px solid rgba(0,176,168,.3);
  transition:border-color .3s var(--ease), color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow:hover{ border-color:var(--brand); gap:.9em; }
.link-arrow--light{ color:var(--brand-300); border-color:rgba(111,216,210,.35); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* Section frames */
.sec{ padding-block:var(--section); position:relative; }
.sec--sm{ padding-block:var(--section-sm); }
.sec--flush-top{ padding-top:0; }
.sec--dark{ background:var(--ink); color:#E9EFEF; }
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{ color:#fff; }
.sec--dark .lede{ color:rgba(233,239,239,.78); }
.sec--dark .muted{ color:var(--ink-300); }
.sec--mist{ background:var(--mist); }
.sec--tint{ background:var(--brand-tint); }

.sec__head{ display:grid; gap:var(--gut); margin-bottom:clamp(2.5rem,5vw,4.5rem); }
@media (min-width:900px){
  .sec__head--split{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:end; gap:clamp(2rem,5vw,5rem); }
}
.sec__title{ margin:0; }
.sec__aside{ max-width:52ch; }
.sec__aside p:last-child{ margin-bottom:0; }

/* Blueprint texture used behind dark sections */
.grid-tex{ position:relative; }
.grid-tex::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* Media frames + generated fallback "photography" */
.frame{ position:relative; overflow:hidden; background:var(--stone); border-radius:var(--radius); }
.frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.frame--4x3{ aspect-ratio:4/3; }
.frame--3x2{ aspect-ratio:3/2; }
.frame--1x1{ aspect-ratio:1/1; }
.frame--4x5{ aspect-ratio:4/5; }
.frame--16x9{ aspect-ratio:16/9; }
a:hover .frame img, .card:hover .frame img{ transform:scale(1.045); }

.ph{
  position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(0,176,168,.16), transparent 55%),
    linear-gradient(200deg, var(--ink-700), var(--ink) 70%);
}
.ph::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:44px 44px;
}
.ph::after{
  content:""; position:absolute; inset:-20%;
  background:
    repeating-linear-gradient(58deg, rgba(0,176,168,.10) 0 2px, transparent 2px 18px);
  opacity:.75;
}
.ph__mark{
  position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  color:rgba(255,255,255,.14);
}
.ph__mark svg{ width:34%; max-width:130px; height:auto; }
.ph--light{ background:linear-gradient(140deg,var(--stone),var(--mist)); }
.ph--light::before{ background-image:
    linear-gradient(rgba(10,19,21,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,19,21,.05) 1px, transparent 1px); }
.ph--light::after{ background:repeating-linear-gradient(58deg, rgba(0,176,168,.12) 0 2px, transparent 2px 18px); }
.ph--light .ph__mark{ color:rgba(10,19,21,.10); }

/* ---------- 4. Reveal animation ---------- */
.js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change:opacity,transform; }
.js [data-reveal].is-in{ opacity:1; transform:none; }
.js [data-reveal="fade"]{ transform:none; }
.js [data-reveal="left"]{ transform:translateX(-34px); }
.js [data-reveal="right"]{ transform:translateX(34px); }
.js [data-reveal="scale"]{ transform:scale(.965); }
.js [data-reveal].is-in{ transform:none; }
[data-reveal-delay="1"]{ transition-delay:.09s; }
[data-reveal-delay="2"]{ transition-delay:.18s; }
[data-reveal-delay="3"]{ transition-delay:.27s; }
[data-reveal-delay="4"]{ transition-delay:.36s; }
[data-reveal-delay="5"]{ transition-delay:.45s; }
[data-reveal-delay="6"]{ transition-delay:.54s; }

.mask-line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.js .mask-line > span{ display:block; transform:translateY(105%); transition:transform 1s var(--ease-out); }
.is-in .mask-line > span, .mask-line.is-in > span{ transform:none; }
.mask-line:nth-child(2) > span{ transition-delay:.1s; }
.mask-line:nth-child(3) > span{ transition-delay:.2s; }

@media (prefers-reduced-motion:reduce){
  [data-reveal],.js [data-reveal],[data-reveal].is-in{ opacity:1!important; transform:none!important; transition:none!important; }
  .mask-line > span,.js .mask-line > span{ transform:none!important; transition:none!important; }
  .frame img{ transition:none!important; }
}

/* ---------- 5. Top bar + header ---------- */
.topbar{
  background:var(--ink); color:rgba(233,239,239,.72);
  font-size:.75rem; letter-spacing:.04em;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:38px; }
.topbar__set{ display:flex; align-items:center; gap:1.6rem; }
.topbar a{ text-decoration:none; display:inline-flex; align-items:center; gap:.5em; color:inherit; transition:color .25s; }
.topbar a:hover{ color:var(--brand-300); }
.topbar .ico{ color:var(--brand); }
.topbar__accr{ display:inline-flex; align-items:center; gap:.5em; color:var(--ink-300); }
@media (max-width:880px){ .topbar__set--hide{ display:none; } .topbar__in{ justify-content:center; } }

.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(251,250,247,.86); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .45s var(--ease);
}
.site-header__in{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem); min-height:var(--header-h); }
.brand{ display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; flex:none; margin-right:auto; }
.brand img{ height:clamp(34px,3.6vw,42px); width:auto; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--font-display); font-weight:700; font-size:1.0625rem; letter-spacing:-.02em; color:var(--ink); }
.brand__sub{ font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brand-800); margin-top:.35em; }
.brand__mark{ width:44px; height:44px; flex:none; color:var(--brand); }
@media (max-width:360px){ .brand__text{ display:none; } }

/* Desktop nav */
.nav{ display:none; }
@media (min-width:1080px){ .nav{ display:block; } }
.nav__list{ display:flex; align-items:center; gap:.25rem; list-style:none; margin:0; padding:0; }
.nav__item{ margin:0; position:relative; }
.nav__link{
  display:inline-flex; align-items:center; gap:.4em; padding:.7rem .9rem;
  font-size:.8125rem; font-weight:550; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-700); border-radius:var(--radius);
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.45rem; height:1px;
  background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out);
}
.nav__item:hover > .nav__link, .nav__link:focus-visible,
.nav__item.current-menu-item > .nav__link,
.nav__item.current-menu-ancestor > .nav__link{ color:var(--ink); }
.nav__item:hover > .nav__link::after,
.nav__item.current-menu-item > .nav__link::after{ transform:scaleX(1); }
.nav__caret{ width:9px; height:9px; opacity:.5; transition:transform .3s; }
.nav__item:hover .nav__caret{ transform:rotate(180deg); }

.mega{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(10px);
  min-width:min(880px, 86vw); background:#fff; border:1px solid var(--line-soft);
  box-shadow:var(--shadow-lg); border-radius:var(--radius-lg); padding:1.75rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .35s var(--ease-out), visibility .3s;
  z-index:50;
}
.nav__item--mega:hover .mega, .nav__item--mega:focus-within .mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.mega__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.25rem 1.5rem; }
.mega__grid--areas{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.mega__col h5{ font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-800); font-family:var(--font-body); font-weight:600; margin:0 0 .6rem; }
.mega__link{
  display:flex; align-items:flex-start; gap:.7rem; padding:.6rem .7rem; border-radius:var(--radius);
  text-decoration:none; color:var(--ink-700); transition:background .25s, color .25s;
}
.mega__link:hover{ background:var(--brand-tint); color:var(--ink); }
.mega__link .ico{ color:var(--brand); flex:none; margin-top:.15rem; }
.mega__link b{ display:block; font-size:.875rem; font-weight:600; letter-spacing:-.01em; }
.mega__link span{ display:block; font-size:.75rem; color:var(--ink-400); line-height:1.45; }
.mega__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.4rem; padding-top:1.25rem; border-top:1px solid var(--line-soft); }
.mega__small{ font-size:.8125rem; color:var(--ink-400); margin:0; }
.mega__areaslink{ display:block; padding:.34rem 0; font-size:.8125rem; text-decoration:none; color:var(--ink-600); transition:color .2s, padding-left .25s; }
.mega__areaslink:hover{ color:var(--brand-800); padding-left:.3rem; }

.header__cta{ display:none; gap:.6rem; align-items:center; flex:none; }
@media (min-width:1080px){ .header__cta{ display:flex; } }
.header__phone{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:var(--font-display); font-weight:650; font-size:1rem; letter-spacing:-.01em; color:var(--ink);
  padding:.5rem .2rem;
}
.header__phone .ico{ color:var(--brand); }
.header__phone:hover{ color:var(--brand-800); }

.burger{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  margin-left:auto; padding:.7rem .95rem; background:var(--ink); color:#fff;
  border:0; border-radius:var(--radius); cursor:pointer;
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
@media (min-width:1080px){ .burger{ display:none; } }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:300; background:var(--ink); color:#E9EFEF;
  transform:translateX(100%); transition:transform .5s var(--ease-out);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
}
.drawer.is-open{ transform:none; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; padding:1rem var(--gut); border-bottom:1px solid var(--line-dark); position:sticky; top:0; background:var(--ink); z-index:2; }
.drawer__close{ background:transparent; border:1px solid var(--line-dark); color:#fff; padding:.6rem .8rem; border-radius:var(--radius); cursor:pointer; display:inline-flex; gap:.5rem; align-items:center; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; }
.drawer__body{ padding:1.5rem var(--gut) 2rem; flex:1; }
.drawer__list{ list-style:none; margin:0 0 1.5rem; padding:0; }
.drawer__list > li{ border-bottom:1px solid var(--line-dark); margin:0; }
.drawer__link{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 0; text-decoration:none; color:#fff;
  font-family:var(--font-display); font-size:1.375rem; font-weight:650; letter-spacing:-.02em;
}
.drawer__toggle{ background:transparent; border:0; color:var(--brand-300); padding:.4rem; cursor:pointer; display:inline-flex; }
.drawer__toggle .ico{ transition:transform .3s; }
.drawer__toggle[aria-expanded="true"] .ico{ transform:rotate(45deg); }
.drawer__sub{ display:none; padding:0 0 1.1rem; margin:0; list-style:none; }
.drawer__sub.is-open{ display:block; }
.drawer__sub li{ margin:0; }
.drawer__sub a{ display:block; padding:.5rem 0 .5rem 1rem; color:rgba(233,239,239,.72); text-decoration:none; font-size:.9375rem; border-left:1px solid var(--line-dark); }
.drawer__sub a:hover{ color:var(--brand-300); border-color:var(--brand); }
.drawer__foot{ display:grid; gap:.75rem; margin-top:1rem; }
.drawer__meta{ margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line-dark); font-size:.8125rem; color:var(--ink-300); }
.drawer__meta a{ color:var(--brand-300); text-decoration:none; }
body.is-locked{ overflow:hidden; }

/* Header over a dark hero: the header stays in flow and sticky, and the hero
   is pulled up underneath it so the photography runs to the top of the page. */
body.has-dark-hero .site-header{ background:transparent; border-color:transparent; }
body.has-dark-hero .hero,
body.has-dark-hero .phero{ margin-top:calc(var(--header-h) * -1); }
body.has-dark-hero .site-header .brand__name{ color:#fff; }
body.has-dark-hero .site-header .brand__sub{ color:var(--brand-300); }
body.has-dark-hero .site-header .nav__link{ color:rgba(255,255,255,.8); }
body.has-dark-hero .site-header .nav__item:hover > .nav__link{ color:#fff; }
body.has-dark-hero .site-header .header__phone{ color:#fff; }
body.has-dark-hero .site-header.is-stuck{
  background:rgba(10,19,21,.92); backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:rgba(255,255,255,.08);
}
.site-header.is-hidden{ transform:translateY(-100%); }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; min-height:clamp(540px, 78svh, 860px);
  display:flex; align-items:flex-end; overflow:hidden;
  background:var(--ink); color:#fff;
  padding-top:calc(var(--header-h) + 3rem); padding-bottom:clamp(3rem,7vw,6rem);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media img{ filter:saturate(.62) contrast(1.03) brightness(.88); }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(8,15,17,.92) 0%, rgba(8,15,17,.72) 30%, rgba(8,15,17,.36) 62%, rgba(8,15,17,.22) 82%, rgba(8,15,17,.50) 100%),
    linear-gradient(96deg, rgba(8,15,17,.62) 0%, rgba(8,15,17,.38) 45%, rgba(8,15,17,.06) 80%);
}
@media (max-width:860px){
  .hero__media::after{
    background:linear-gradient(to top, rgba(8,15,17,.94) 0%, rgba(8,15,17,.78) 34%, rgba(8,15,17,.52) 70%, rgba(8,15,17,.62) 100%);
  }
}
.hero__in{ position:relative; z-index:2; width:100%; }
.hero__grid{ display:grid; gap:clamp(2rem,5vw,4rem); }
@media (min-width:1000px){ .hero__grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); align-items:end; } }
.hero__title{
  font-size:var(--step-6); line-height:.92; letter-spacing:-.045em;
  margin:0 0 1.5rem; text-transform:uppercase; font-weight:700;
}
.hero__title em{ font-style:normal; color:var(--brand); display:block; }
.hero__lede{ font-size:var(--step-1); line-height:1.5; color:rgba(255,255,255,.8); max-width:56ch; margin-bottom:2.25rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }
.hero__side{ display:grid; gap:1.4rem; align-content:end; }
.hero__badge{
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg);
  background:rgba(8,16,18,.62); backdrop-filter:blur(10px) saturate(140%); padding:1.35rem 1.5rem;
}
.hero__badge b{ display:block; font-family:var(--font-display); font-size:1.5rem; letter-spacing:-.02em; color:#fff; }
.hero__badge span{ display:block; font-size:.8125rem; color:rgba(255,255,255,.66); margin-top:.3rem; line-height:1.45; }
.hero__scroll{
  position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%); z-index:3;
  display:inline-flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.5);
  text-decoration:none;
}
.hero__scroll .ico{ animation:nudge 2.4s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{transform:translateY(0);opacity:.6} 50%{transform:translateY(6px);opacity:1} }
@media (max-width:760px){ .hero__scroll{ display:none; } }

.hero__ticker{
  position:relative; z-index:2; margin-top:clamp(2.5rem,6vw,4.5rem);
  border-top:1px solid rgba(255,255,255,.14); padding-top:1.5rem;
  display:flex; flex-wrap:wrap; gap:.6rem 2.5rem; align-items:center;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.hero__ticker span{ display:inline-flex; align-items:center; gap:.55em; }
.hero__ticker .ico{ color:var(--brand); }

/* Page hero (interior pages) */
.phero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(3rem,7vw,6rem)); padding-bottom:clamp(3rem,7vw,5.5rem);
}
.phero__media{ position:absolute; inset:0; z-index:0; opacity:.62; }
.phero__media img{ width:100%;height:100%;object-fit:cover; }
.phero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(10,19,21,.74) 0%, rgba(10,19,21,.88) 100%),
    linear-gradient(100deg, rgba(10,19,21,.62) 0%, transparent 70%);
}
.phero__in{ position:relative; z-index:2; }
.phero__grid{ display:grid; gap:clamp(1.5rem,4vw,3.5rem); }
@media (min-width:920px){ .phero__grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:end; } }
.phero__title{ font-size:var(--step-5); margin:0 0 1rem; }
.phero__lede{ font-size:var(--step-1); color:rgba(255,255,255,.78); max-width:56ch; margin:0; }
.phero__meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem; }
.phero__aside{ display:grid; gap:1rem; align-content:end; }
.phero__aside .btn{ justify-content:center; }
.phero--compact{ padding-bottom:clamp(2rem,4vw,3rem); }

.pill{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.45em .95em; border:1px solid rgba(255,255,255,.2); border-radius:100px;
  font-size:.75rem; letter-spacing:.06em; color:rgba(255,255,255,.75); text-decoration:none;
  transition:border-color .25s, color .25s, background .25s;
}
.pill:hover{ border-color:var(--brand); color:#fff; background:rgba(0,176,168,.12); }
.pill--dark{ border-color:var(--line); color:var(--ink-600); background:#fff; }
.pill--dark:hover{ border-color:var(--brand); color:var(--ink); }
.pill--solid{ background:var(--brand); border-color:var(--brand); color:#04211F; font-weight:600; }

/* Breadcrumbs */
.crumbs{ border-bottom:1px solid var(--line-soft); background:var(--paper); }
.crumbs__list{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:.9rem 0; font-size:.75rem; color:var(--ink-400); }
.crumbs__item{ margin:0; display:inline-flex; align-items:center; gap:.5rem; }
.crumbs__item + .crumbs__item::before{ content:"/"; color:var(--ink-300); }
.crumbs a{ text-decoration:none; color:var(--ink-500); }
.crumbs a:hover{ color:var(--brand-800); }
.crumbs [aria-current]{ color:var(--ink); }

/* ---------- 7. Stats ---------- */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:860px){ .stats__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat{ padding:clamp(2rem,4vw,3.25rem) clamp(1rem,2.5vw,2rem); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (min-width:860px){ .stat{ border-bottom:0; } .stat:last-child{ border-right:0; } }
@media (max-width:859px){ .stat:nth-child(2n){ border-right:0; } .stat:nth-last-child(-n+2){ border-bottom:0; } }
.stat__value{ font-family:var(--font-display); font-size:clamp(2.75rem,6vw,4.25rem); font-weight:700; letter-spacing:-.045em; line-height:1; color:var(--ink); display:flex; align-items:baseline; }
.stat__suffix{ color:var(--brand); }
.stat__label{ margin:.75rem 0 0; font-size:.8125rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-400); }
.sec--dark .stat{ border-color:var(--line-dark); }
.sec--dark .stat__value{ color:#fff; }

/* ---------- 8. Service cards ---------- */
.svc-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:680px){ .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .svc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.svc{
  position:relative; display:flex; flex-direction:column; gap:1rem;
  padding:clamp(1.75rem,3vw,2.5rem); background:var(--paper); text-decoration:none; color:inherit;
  min-height:260px; isolation:isolate; overflow:hidden;
  transition:color .4s var(--ease);
}
.svc::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(100%); transition:transform .55s var(--ease-out);
}
.svc:hover{ color:#fff; }
.svc:hover::before{ transform:none; }
.svc__n{ font-size:.6875rem; letter-spacing:.2em; color:var(--ink-300); font-variant-numeric:tabular-nums; }
.svc:hover .svc__n{ color:var(--brand-300); }
.svc__icon{ color:var(--brand); transition:transform .5s var(--ease-out); }
.svc:hover .svc__icon{ transform:translateY(-4px); }
.svc__title{ font-size:var(--step-2); margin:0; letter-spacing:-.025em; }
.svc:hover .svc__title{ color:#fff; }
.svc__desc{ margin:0; color:var(--ink-500); font-size:.9375rem; line-height:1.6; }
.svc:hover .svc__desc{ color:rgba(255,255,255,.72); }
.svc__go{ margin-top:auto; display:inline-flex; align-items:center; gap:.5em; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-800); }
.svc:hover .svc__go{ color:var(--brand-300); }
.svc:hover .svc__go .ico{ transform:translateX(5px); }
.svc__go .ico{ transition:transform .35s var(--ease); }
.svc--feature{ grid-column:span 1; }
@media (min-width:1040px){ .svc--wide{ grid-column:span 2; flex-direction:row; align-items:flex-end; } .svc--wide .svc__body{ max-width:46ch; } }

/* ---------- 9. Project cards ---------- */
.proj-grid{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
@media (min-width:720px){ .proj-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .proj-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.proj{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.proj .frame{ margin-bottom:1.25rem; }
.proj__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.proj__tag{ font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-800); }
.proj__tag + .proj__tag::before{ content:"·"; margin-right:.5rem; color:var(--ink-300); }
.proj__title{ font-size:var(--step-2); margin:0 0 .5rem; transition:color .3s; }
.proj:hover .proj__title{ color:var(--brand-800); }
.proj__meta{ display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.8125rem; color:var(--ink-400); margin-top:auto; padding-top:.75rem; }
.proj__meta span{ display:inline-flex; align-items:center; gap:.4em; }
.proj--tall .frame{ aspect-ratio:4/5; }

/* Featured project band */
.feat{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.feat__grid{ display:grid; }
@media (min-width:980px){ .feat__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:stretch; } }
.feat__media{ position:relative; min-height:clamp(320px,52vh,660px); }
.feat__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.8); }
.feat__body{ padding:clamp(2.5rem,6vw,5.5rem) clamp(1.75rem,5vw,4.5rem); display:flex; flex-direction:column; justify-content:center; }
.feat__title{ font-size:var(--step-4); margin:0 0 1rem; }
.feat__list{ list-style:none; padding:0; margin:1.75rem 0 2.25rem; display:grid; gap:.9rem; }
.feat__list li{ display:flex; gap:.85rem; align-items:flex-start; margin:0; color:rgba(255,255,255,.76); font-size:.9375rem; }
.feat__list .ico{ color:var(--brand); flex:none; margin-top:.2rem; }

/* ---------- 10. Before / after slider ---------- */
.ba{ position:relative; overflow:hidden; border-radius:var(--radius); user-select:none; touch-action:pan-y; cursor:ew-resize; aspect-ratio:16/10; background:var(--ink); }
.ba__layer{ position:absolute; inset:0; }
.ba__layer img{ width:100%; height:100%; object-fit:cover; }
.ba__layer--after{ clip-path:inset(0 0 0 var(--pos,50%)); }
.ba__tag{
  position:absolute; top:1rem; z-index:3; padding:.4rem .85rem; border-radius:100px;
  background:rgba(10,19,21,.66); backdrop-filter:blur(6px); color:#fff;
  font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
}
.ba__tag--l{ left:1rem; } .ba__tag--r{ right:1rem; }
.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:#fff; z-index:4;
  box-shadow:0 0 0 1px rgba(10,19,21,.2);
}
.ba__knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:#fff; color:var(--ink);
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.ba__knob::before,.ba__knob::after{ content:""; width:0;height:0;border-block:5px solid transparent; position:absolute; }
.ba__knob::before{ border-right:7px solid var(--ink); left:14px; }
.ba__knob::after{ border-left:7px solid var(--ink); right:14px; }
.ba__input{ position:absolute; inset:0; opacity:0; width:100%; cursor:ew-resize; z-index:5; }

/* ---------- 11. Process timeline ---------- */
.proc{ display:grid; gap:0; counter-reset:step; }
@media (min-width:980px){ .proc{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.proc__step{ position:relative; padding:2rem 1.5rem 2rem 0; border-top:2px solid var(--line); }
@media (min-width:980px){ .proc__step{ padding:2.5rem 1.75rem 0 0; } }
.proc__step::after{
  content:""; position:absolute; top:-2px; left:0; width:0; height:2px; background:var(--brand);
  transition:width 1.1s var(--ease-out);
}
.proc__step.is-in::after{ width:100%; }
.proc__n{ font-family:var(--font-display); font-size:.875rem; font-weight:700; letter-spacing:.14em; color:var(--brand); display:block; margin-bottom:1rem; }
.proc__title{ font-size:var(--step-2); margin:0 0 .6rem; }
.proc__body{ font-size:.9375rem; color:var(--ink-500); margin:0; line-height:1.62; }
.sec--dark .proc__step{ border-color:var(--line-dark); }
.sec--dark .proc__body{ color:rgba(233,239,239,.66); }

/* ---------- 12. USP grid ---------- */
.usp-grid{ display:grid; gap:1px; background:var(--line); }
@media (min-width:640px){ .usp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .usp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.usp{ background:var(--paper); padding:clamp(1.75rem,3vw,2.5rem); }
.usp__icon{ color:var(--brand); margin-bottom:1.1rem; }
.usp__title{ font-size:var(--step-1); margin:0 0 .55rem; }
.usp__body{ font-size:.9375rem; color:var(--ink-500); margin:0; line-height:1.62; }
.sec--dark .usp-grid{ background:var(--line-dark); }
.sec--dark .usp{ background:var(--ink); }
.sec--dark .usp__body{ color:rgba(233,239,239,.66); }
.sec--mist .usp{ background:var(--mist); }

/* ---------- 13. Testimonials ---------- */
.testi-rail{ display:flex; gap:clamp(1rem,2.5vw,1.75rem); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1.5rem; margin-inline:calc(var(--gut)*-1); padding-inline:var(--gut); scrollbar-width:thin; }
.testi-rail::-webkit-scrollbar{ height:3px; }
.testi-rail::-webkit-scrollbar-thumb{ background:var(--brand); }
.testi-rail::-webkit-scrollbar-track{ background:rgba(255,255,255,.12); }
.testi-rail{ scrollbar-color:var(--brand) rgba(255,255,255,.12); }
.testi{
  flex:0 0 min(420px, 84vw); scroll-snap-align:start;
  background:#fff; border:1px solid var(--line); padding:clamp(1.75rem,3vw,2.5rem);
  display:flex; flex-direction:column; gap:1.25rem; border-radius:var(--radius);
}
.sec--dark .testi{ background:var(--ink-800); border-color:var(--line-dark); }
.testi__stars{ display:flex; gap:.2rem; color:var(--brand); }
.testi__stars .ico{ fill:currentColor; stroke-width:1; }
.testi__quote{ font-family:var(--font-display); font-size:var(--step-1); line-height:1.44; letter-spacing:-.015em; margin:0; color:var(--ink); }
.sec--dark .testi__quote{ color:#fff; }
.testi__by{ margin-top:auto; padding-top:1rem; border-top:1px solid var(--line-soft); }
.sec--dark .testi__by{ border-color:var(--line-dark); }
.testi__name{ display:block; font-weight:650; font-size:.9375rem; }
.testi__role{ display:block; font-size:.8125rem; color:var(--ink-400); margin-top:.15rem; }
.rail-nav{ display:flex; gap:.5rem; }
.rail-btn{
  width:48px; height:48px; border:1px solid var(--line); background:transparent; color:var(--ink);
  display:grid; place-items:center; cursor:pointer; border-radius:var(--radius); transition:background .3s, color .3s, border-color .3s;
}
.rail-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.rail-btn[disabled]{ opacity:.3; cursor:default; }
.sec--dark .rail-btn{ border-color:var(--line-dark); color:#fff; }
.sec--dark .rail-btn:hover{ background:#fff; color:var(--ink); }
.rail-btn .ico--flip{ transform:rotate(180deg); }

/* ---------- 14. Coverage map + borough grid ---------- */
.map-sec{ position:relative; }
.map-layout{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
@media (min-width:1000px){ .map-layout{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:stretch; } }
.map-box{
  position:relative; min-height:clamp(380px,60vh,640px); border:1px solid var(--line-dark);
  border-radius:var(--radius); overflow:hidden; background:var(--ink-800);
}
.map-box .leaflet-container{ width:100%; height:100%; position:absolute; inset:0; background:#0E1B1D; font-family:var(--font-body); }
.map-box .leaflet-tile-pane{ filter:grayscale(1) invert(1) brightness(.96) contrast(.86); }
.leaflet-control-attribution{ background:rgba(10,19,21,.72)!important; color:rgba(255,255,255,.5)!important; font-size:10px!important; }
.leaflet-control-attribution a{ color:var(--brand-300)!important; }
.leaflet-bar a{ background:var(--ink-800)!important; color:#fff!important; border-color:rgba(255,255,255,.14)!important; }
.leaflet-bar a:hover{ background:var(--brand-800)!important; }
.dion-pin{ background:transparent; border:0; }
.dion-pin i{
  display:block; width:13px; height:13px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 4px rgba(0,176,168,.22), 0 0 0 1px rgba(255,255,255,.5);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.dion-pin:hover i{ transform:scale(1.35); box-shadow:0 0 0 7px rgba(0,176,168,.28), 0 0 0 1px #fff; }
.dion-pin--hq i{ width:17px; height:17px; background:#fff; box-shadow:0 0 0 5px rgba(0,176,168,.5); }
.leaflet-popup-content-wrapper{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:0; }
.leaflet-popup-content{ margin:0; width:246px!important; }
.leaflet-popup-tip{ background:#fff; }
.mpop{ padding:1.1rem 1.2rem; }
.mpop h4{ font-size:1.0625rem; margin:0 0 .3rem; }
.mpop p{ font-size:.75rem; color:var(--ink-400); margin:0 0 .85rem; line-height:1.5; }
.mpop a{ display:inline-flex; align-items:center; gap:.4em; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--brand-800); text-decoration:none; }
.mpop a:hover{ gap:.75em; }

.map-side{ display:flex; flex-direction:column; gap:1.25rem; }
.region-list{ display:grid; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); }
.region-btn{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
  padding:1.15rem 1.35rem; background:var(--ink); color:#fff; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-size:1.0625rem; font-weight:650; letter-spacing:-.015em;
  transition:background .3s var(--ease), color .3s;
}
.region-btn:hover, .region-btn.is-active{ background:var(--brand); color:#04211F; }
.region-btn small{ font-family:var(--font-body); font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; opacity:.62; }

.borough-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:560px){ .borough-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:860px){ .borough-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1200px){ .borough-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.borough{
  display:flex; flex-direction:column; gap:.35rem; padding:1.15rem 1.35rem;
  background:var(--paper); text-decoration:none; color:inherit; position:relative;
  transition:background .3s var(--ease), color .3s;
}
.borough:hover{ background:var(--ink); color:#fff; }
.borough b{ font-family:var(--font-display); font-size:1.0625rem; font-weight:650; letter-spacing:-.015em; }
.borough span{ font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); }
.borough:hover span{ color:var(--brand-300); }
.borough[hidden]{ display:none; }

.region-filter{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.75rem; }
.chip{
  padding:.6rem 1.1rem; border:1px solid var(--line); background:transparent; cursor:pointer;
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500);
  border-radius:100px; transition:all .3s var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ---------- 15. Accordion / FAQ ---------- */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.6rem 0; background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-size:var(--step-1); font-weight:650; letter-spacing:-.018em; line-height:1.34;
  color:var(--ink); transition:color .25s;
}
.acc__btn:hover{ color:var(--brand-800); }
.acc__ind{ flex:none; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--brand-800); transition:transform .4s var(--ease), background .3s, color .3s, border-color .3s; margin-top:.1rem; }
.acc__btn[aria-expanded="true"] .acc__ind{ transform:rotate(45deg); background:var(--brand); border-color:var(--brand); color:#04211F; }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-out); }
.acc__panel.is-open{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__inner > div{ padding-bottom:1.75rem; max-width:72ch; color:var(--ink-600); }
.acc__inner p:last-child{ margin-bottom:0; }
.sec--dark .acc,.sec--dark .acc__item{ border-color:var(--line-dark); }
.sec--dark .acc__btn{ color:#fff; }
.sec--dark .acc__ind{ border-color:var(--line-dark); color:var(--brand-300); }
.sec--dark .acc__inner > div{ color:rgba(233,239,239,.7); }

/* ---------- 16. Editorial / prose ---------- */
.prose{ max-width:var(--wrap-text); }
.prose > * + *{ margin-top:1.1em; }
.prose h2{ font-size:var(--step-3); margin-top:2.2em; }
.prose h3{ font-size:var(--step-2); margin-top:1.8em; }
.prose ul,.prose ol{ padding-left:1.25em; }
.prose li::marker{ color:var(--brand); }
.prose blockquote{
  margin:2em 0; padding:1.5em 0 1.5em 2em; border-left:2px solid var(--brand);
  font-family:var(--font-display); font-size:var(--step-2); line-height:1.4; letter-spacing:-.02em; color:var(--ink);
}
.prose blockquote p:last-child{ margin-bottom:0; }
.prose img{ border-radius:var(--radius); margin-block:2em; }
.prose table{ width:100%; border-collapse:collapse; font-size:.9375rem; margin-block:2em; }
.prose th,.prose td{ padding:.85rem 1rem; border-bottom:1px solid var(--line); text-align:left; }
.prose th{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); font-weight:600; }
.prose a{ color:var(--brand-800); }

.two-col{ display:grid; gap:clamp(1.75rem,4vw,3.5rem); }
@media (min-width:860px){ .two-col{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.side-layout{ display:grid; gap:clamp(2rem,5vw,4.5rem); }
@media (min-width:1000px){ .side-layout{ grid-template-columns:minmax(0,1fr) 340px; align-items:start; } }
.sticky-side{ position:sticky; top:calc(var(--header-h) + 1.5rem); display:grid; gap:1.25rem; }

/* Fact / spec cards */
.fact{
  border:1px solid var(--line); border-left:2px solid var(--brand); padding:1.5rem 1.65rem; background:#fff;
}
.fact__v{ font-family:var(--font-display); font-size:var(--step-3); font-weight:700; letter-spacing:-.035em; line-height:1; color:var(--ink); }
.fact__l{ margin:.65rem 0 0; font-size:.875rem; color:var(--ink-500); line-height:1.55; }
.sec--dark .fact{ background:var(--ink-800); border-color:var(--line-dark); border-left-color:var(--brand); }
.sec--dark .fact__v{ color:#fff; }
.sec--dark .fact__l{ color:rgba(233,239,239,.66); }

.numbered{ list-style:none; padding:0; margin:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.numbered li{ margin:0; background:var(--paper); padding:clamp(1.4rem,2.5vw,2rem); display:grid; gap:.5rem; }
@media (min-width:760px){ .numbered li{ grid-template-columns:minmax(0,.4fr) minmax(0,.6fr); gap:1.5rem; align-items:start; } }
.numbered__name{ font-family:var(--font-display); font-size:var(--step-1); font-weight:650; letter-spacing:-.018em; display:flex; align-items:baseline; gap:.7rem; }
.numbered__i{ font-size:.6875rem; letter-spacing:.14em; color:var(--brand); font-variant-numeric:tabular-nums; }
.numbered__body{ margin:0; color:var(--ink-500); font-size:.9375rem; line-height:1.62; }
.numbered__note{ display:inline-block; margin-top:.6rem; font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-800); background:var(--brand-tint); padding:.3rem .65rem; border-radius:100px; }

.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:1.1rem; }
.checklist li{ display:flex; gap:.9rem; align-items:flex-start; margin:0; }
.checklist .ico{ color:var(--brand); flex:none; margin-top:.22rem; }
.checklist b{ display:block; margin-bottom:.15rem; }
.checklist span{ color:var(--ink-500); font-size:.9375rem; line-height:1.6; }

.tag-row{ display:flex; flex-wrap:wrap; gap:.45rem; }
.tag{ font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); border:1px solid var(--line); padding:.4rem .8rem; border-radius:100px; background:#fff; }
.sec--dark .tag{ background:transparent; border-color:var(--line-dark); color:rgba(233,239,239,.66); }

/* ---------- 17. CTA band ---------- */
.cta{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.cta__in{ position:relative; z-index:2; padding-block:clamp(4rem,9vw,8rem); }
.cta__grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (min-width:900px){ .cta__grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); } }
.cta__title{ font-size:var(--step-5); margin:0 0 1rem; text-transform:uppercase; letter-spacing:-.04em; }
.cta__title em{ font-style:normal; color:var(--brand); }
.cta__lede{ color:rgba(255,255,255,.72); font-size:var(--step-1); margin:0; max-width:48ch; }
.cta__actions{ display:grid; gap:.85rem; }
.cta__actions .btn{ justify-content:center; }
.cta__alt{ margin:1rem 0 0; font-size:.8125rem; color:rgba(255,255,255,.5); }
.cta__alt a{ color:var(--brand-300); text-decoration:none; }

/* ---------- 18. Forms + multi-step quote ---------- */
.field{ display:grid; gap:.5rem; margin-bottom:1.15rem; }
.field > label,.legend{ font-size:.75rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-500); }
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],.field input[type=number],.field select,.field textarea{
  width:100%; padding:1rem 1.15rem; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; color:var(--ink); font:inherit; font-size:1rem;
  transition:border-color .25s, box-shadow .25s;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,176,168,.16); }
.field__hint{ font-size:.8125rem; color:var(--ink-400); }
.field--half{ }
@media (min-width:680px){ .field-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.15rem; } }
.hp{ position:absolute!important; left:-9999px; opacity:0; height:0; width:0; }

.optgrid{ display:grid; gap:.75rem; }
@media (min-width:560px){ .optgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){ .optgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.opt__box{
  display:flex; align-items:center; gap:.9rem; padding:1.1rem 1.2rem; height:100%;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; cursor:pointer;
  transition:border-color .25s var(--ease), background .25s, box-shadow .25s;
}
.opt__box .ico{ color:var(--brand); flex:none; }
.opt__box b{ font-size:.9375rem; font-weight:600; letter-spacing:-.01em; }
.opt__box small{ display:block; font-size:.75rem; color:var(--ink-400); margin-top:.15rem; line-height:1.4; }
.opt input:hover + .opt__box{ border-color:var(--ink-300); }
.opt input:checked + .opt__box{ border-color:var(--brand); background:var(--brand-tint); box-shadow:0 0 0 1px var(--brand) inset; }
.opt input:focus-visible + .opt__box{ outline:2px solid var(--brand); outline-offset:2px; }

.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.quote__head{ padding:1.5rem clamp(1.5rem,3vw,2.5rem); border-bottom:1px solid var(--line); background:var(--mist); }
.quote__bar{ height:3px; background:var(--stone); border-radius:100px; overflow:hidden; margin-top:1rem; }
.quote__fill{ height:100%; width:25%; background:var(--brand); transition:width .5s var(--ease-out); }
.quote__steps{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-300); }
.quote__steps b{ color:var(--ink); font-weight:600; }
.quote__steps span.is-done{ color:var(--brand-800); }
.quote__body{ padding:clamp(1.5rem,3vw,2.75rem); }
.quote__step{ display:none; }
.quote__step.is-active{ display:block; animation:stepIn .45s var(--ease-out); }
@keyframes stepIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
.quote__legend{ font-family:var(--font-display); font-size:var(--step-2); font-weight:700; letter-spacing:-.025em; margin:0 0 .4rem; }
.quote__sub{ color:var(--ink-500); font-size:.9375rem; margin:0 0 1.75rem; }
.quote__nav{ display:flex; gap:.75rem; justify-content:space-between; align-items:center; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line-soft); }
.quote__err{ color:#B3261E; font-size:.875rem; margin:.75rem 0 0; }
.quote__done{ text-align:center; padding:clamp(2rem,5vw,4rem) 1rem; }
.quote__done .ico{ color:var(--brand); margin:0 auto 1.25rem; }
.quote fieldset{ border:0; padding:0; margin:0 0 1.15rem; }
.drop{
  border:1px dashed var(--sand); border-radius:var(--radius); padding:1.5rem; text-align:center;
  background:var(--mist); cursor:pointer; transition:border-color .25s, background .25s;
}
.drop:hover,.drop.is-over{ border-color:var(--brand); background:var(--brand-tint); }
.drop input{ display:none; }
.drop__list{ margin:.85rem 0 0; font-size:.8125rem; color:var(--ink-500); list-style:none; padding:0; }

/* ---------- 19. Contact ---------- */
.contact-grid{ display:grid; gap:clamp(2rem,5vw,4rem); }
@media (min-width:980px){ .contact-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.cinfo{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.cinfo__row{ background:var(--paper); padding:1.4rem 1.5rem; display:flex; gap:1rem; align-items:flex-start; }
.cinfo__row .ico{ color:var(--brand); flex:none; margin-top:.2rem; }
.cinfo__row h4{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); margin:0 0 .35rem; font-family:var(--font-body); font-weight:600; }
.cinfo__row a,.cinfo__row p{ margin:0; font-family:var(--font-display); font-size:1.125rem; font-weight:650; letter-spacing:-.018em; text-decoration:none; color:var(--ink); line-height:1.35; }
.cinfo__row a:hover{ color:var(--brand-800); }
.hours{ list-style:none; padding:0; margin:0; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line-soft); font-size:.9375rem; margin:0; }
.hours li:last-child{ border-bottom:0; }
.hours span:last-child{ color:var(--ink-500); font-variant-numeric:tabular-nums; }

/* ---------- 20. Floating actions + mobile CTA bar ---------- */
.floaters{ position:fixed; right:clamp(.85rem,2vw,1.5rem); bottom:clamp(.85rem,2vw,1.5rem); z-index:180; display:grid; gap:.6rem; }
@media (max-width:760px){ .floaters{ display:none; } }
.float{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  color:#fff; text-decoration:none; box-shadow:var(--shadow);
  transition:transform .3s var(--ease), background .3s;
}
.float--wa{ background:#25D366; color:#0B2E18; }
.float--tel{ background:var(--ink); }
.float:hover{ transform:translateY(-3px) scale(1.04); }
.float span{ position:absolute; right:calc(100% + .6rem); white-space:nowrap; background:var(--ink); color:#fff; font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; padding:.45rem .75rem; border-radius:var(--radius); opacity:0; pointer-events:none; transition:opacity .25s; }
.float{ position:relative; }
.float:hover span{ opacity:1; }
@media (max-width:760px){ .float span{ display:none; } }

.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:190; display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--ink); border-top:1px solid rgba(255,255,255,.1);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (min-width:761px){ .mbar{ display:none; } }
.mbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  padding:.7rem .4rem; color:rgba(255,255,255,.8); text-decoration:none;
  font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase; min-height:64px;
}
.mbar a .ico{ color:var(--brand); }
.mbar a:last-child{ background:var(--brand); color:#04211F; }
.mbar a:last-child .ico{ color:#04211F; }
@media (max-width:760px){ body{ padding-bottom:64px; } }

/* ---------- 21. Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(233,239,239,.7); position:relative; }
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer a:hover{ color:var(--brand-300); }
.foot__top{ padding-block:clamp(3.5rem,7vw,6rem); border-bottom:1px solid var(--line-dark); }
.foot__grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
@media (min-width:760px){ .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .foot__grid{ grid-template-columns:1.4fr 1fr 1fr 1.1fr; } }
.foot__brand .brand__name{ color:#fff; }
.foot__brand .brand__sub{ color:var(--brand-300); }
.foot__blurb{ margin:1.5rem 0; font-size:.9375rem; line-height:1.68; max-width:36ch; }
.foot h5{ font-family:var(--font-body); font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin:0 0 1.15rem; }
.foot__list{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.foot__list li{ margin:0; font-size:.9375rem; }
.foot__contact{ display:grid; gap:1rem; }
.foot__contact a{ display:flex; gap:.75rem; align-items:flex-start; font-size:.9375rem; line-height:1.5; overflow-wrap:anywhere; }
.foot__contact .ico{ color:var(--brand); flex:none; margin-top:.15rem; }
.foot__areas{ padding-block:clamp(2.5rem,5vw,3.5rem); border-bottom:1px solid var(--line-dark); }
.foot__areas h5{ margin-bottom:1.35rem; }
.foot__arealist{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; list-style:none; padding:0; margin:0; }
.foot__arealist li{ margin:0; }
.foot__arealist a{ display:inline-block; font-size:.8125rem; color:rgba(233,239,239,.55); padding:.35rem .7rem; border:1px solid var(--line-dark); border-radius:100px; transition:border-color .25s, color .25s; }
.foot__arealist a:hover{ border-color:var(--brand); color:var(--brand-300); }
.foot__bot{ padding-block:1.75rem; display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; font-size:.8125rem; color:var(--ink-300); }
.foot__legal{ display:flex; flex-wrap:wrap; gap:1.25rem; list-style:none; padding:0; margin:0; }
.foot__legal li{ margin:0; }
.accr-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.accr{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem; border:1px solid var(--line-dark); border-radius:var(--radius); font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase; color:rgba(233,239,239,.66); }
.accr .ico{ color:var(--brand); }

/* ---------- 22. Blog + misc ---------- */
.post-grid{ display:grid; gap:clamp(1.75rem,3vw,2.5rem); }
@media (min-width:700px){ .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1060px){ .post-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pcard{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.pcard .frame{ margin-bottom:1.15rem; }
.pcard__date{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); margin-bottom:.5rem; }
.pcard__title{ font-size:var(--step-1); margin:0 0 .5rem; transition:color .3s; }
.pcard:hover .pcard__title{ color:var(--brand-800); }
.pcard__ex{ font-size:.9375rem; color:var(--ink-500); margin:0; }
.pagination{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:3rem; }
.pagination .page-numbers{ display:grid; place-items:center; min-width:44px; height:44px; padding:0 .6rem; border:1px solid var(--line); text-decoration:none; font-size:.875rem; }
.pagination .current{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pagination a:hover{ border-color:var(--ink); }

.notice{ padding:1.25rem 1.5rem; border-left:2px solid var(--brand); background:var(--brand-tint); font-size:.9375rem; }
.notice p:last-child{ margin-bottom:0; }
.notice--dark{ background:rgba(0,176,168,.08); color:rgba(233,239,239,.8); }

.err404{ text-align:center; padding-block:clamp(5rem,14vw,10rem); }
.err404 .big{ font-family:var(--font-display); font-size:clamp(6rem,22vw,16rem); line-height:.82; letter-spacing:-.06em; color:var(--stone); margin:0 0 1rem; }

.gallery-masonry{ columns:1; column-gap:clamp(1rem,2.5vw,1.75rem); }
@media (min-width:640px){ .gallery-masonry{ columns:2; } }
@media (min-width:1040px){ .gallery-masonry{ columns:3; } }
.gallery-masonry > *{ break-inside:avoid; margin-bottom:clamp(1rem,2.5vw,1.75rem); }

/* Print */
@media print{
  .site-header,.topbar,.mbar,.floaters,.cta,.drawer,.hero__scroll{ display:none!important; }
  body{ color:#000; background:#fff; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.75em; }
}


/* ---------- 23. Classic WP sub-menu fallback ---------- */
.nav__list .sub-menu{
  position:absolute; top:calc(100% + 4px); left:0; min-width:250px; z-index:60;
  list-style:none; margin:0; padding:.5rem; background:#fff;
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .28s var(--ease), transform .3s var(--ease-out), visibility .28s;
}
.nav__list li{ position:relative; }
.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:none; }
.nav__list .sub-menu li{ margin:0; }
.nav__list .sub-menu a{
  display:block; padding:.55rem .75rem; font-size:.875rem; color:var(--ink-700);
  text-decoration:none; border-radius:var(--radius); transition:background .22s, color .22s;
}
.nav__list .sub-menu a:hover{ background:var(--brand-tint); color:var(--ink); }
.nav__list .sub-menu .sub-menu{ top:-.5rem; left:100%; }


/* ---------- 24. Empty states ---------- */
.empty{
  border:1px solid var(--line); border-left:2px solid var(--brand);
  padding:clamp(2rem,4vw,3.25rem); background:#fff; max-width:70ch;
}
.empty h3{ font-size:var(--step-2); margin:0 0 .75rem; }
.empty p{ color:var(--ink-500); }
.empty p:last-of-type{ margin-bottom:1.5rem; }
.sec--dark .empty{ background:var(--ink-800); border-color:var(--line-dark); border-left-color:var(--brand); }
.sec--dark .empty p{ color:rgba(233,239,239,.7); }
.editor-note{
  margin-top:1.5rem; padding:1rem 1.25rem; border:1px dashed var(--sand);
  background:var(--mist); font-size:.875rem; color:var(--ink-500); border-radius:var(--radius);
}
.editor-note p{ margin:0; }