/* ==========================================================================
   LEGACY HOME BUILDERS INC — Design System
   Type:  Fraunces (display serif) + Archivo (grotesque)
   Color: deep navy #001C34 dominant, brushed gold #C8A252 as sharp accent,
          limestone #F5F3EF for light passages
   ========================================================================== */

/* -------------------------------------------------- 1. Reset --------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:2px}
.skip{position:fixed;left:1rem;top:-6rem;z-index:2000;width:auto;max-width:calc(100vw - 2rem);
  transition:top .25s var(--ease)}
.skip:focus{top:1rem}

/* -------------------------------------------------- 2. Tokens -------- */
:root{
  /* navy */
  --navy-950:#000B15; --navy-900:#00121F; --navy-800:#001829;
  --navy-700:#001C34; --navy-600:#04243F; --navy-500:#072E4C;
  --navy-400:#0C3757; --navy-300:#14456B;

  /* gold */
  --gold-800:#6E541F; --gold-700:#8A6B2D; --gold-600:#A8863C;
  --gold-500:#C8A252; --gold-400:#D9BC74; --gold-300:#E8CE8F; --gold-100:#F3E6C6;
  --gold-sheen:linear-gradient(118deg,#8A6B2D 0%,#E4C67F 22%,#C8A252 44%,#F3E2B4 68%,#B8933F 100%);

  /* limestone / ink */
  --bone-50:#FBFAF7; --bone-100:#F5F3EF; --bone-200:#EDE9E1;
  --bone-300:#DFD9CD; --bone-400:#C6BEAE;
  --ink-900:#0B1620; --ink-700:#243240; --ink-500:#4C5A68; --ink-400:#6B7885;

  /* semantic */
  --bg:var(--navy-700);
  --hairline:rgba(200,162,82,.22);
  --hairline-soft:rgba(200,162,82,.12);
  --hairline-ink:rgba(11,22,32,.12);

  /* type */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --fx-display:"opsz" 144,"SOFT" 0,"WONK" 0;

  --t-hero:clamp(2.75rem,5.9vw,5.4rem);
  --t-d1:clamp(2.4rem,4.7vw,4.15rem);
  --t-d2:clamp(1.9rem,3vw,2.85rem);
  --t-d3:clamp(1.4rem,2vw,1.85rem);
  --t-lead:clamp(1.0625rem,1.35vw,1.28rem);
  --t-body:1.0625rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;
  --t-eyebrow:.72rem;

  /* space */
  --maxw:1240px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --sect:clamp(4.25rem,7.5vw,7rem);
  --r:3px;

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

/* -------------------------------------------------- 3. Base ---------- */
body{
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.68;
  color:var(--bone-100);
  background:var(--navy-700);
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:var(--fx-display);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h1{font-size:var(--t-d1)}
h2{font-size:var(--t-d2)}
h3{font-size:var(--t-d3);line-height:1.18}
p{text-wrap:pretty}
strong{font-weight:600}
::selection{background:var(--gold-500);color:var(--navy-900)}

/* -------------------------------------------------- 4. Layout -------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:840px}
.section{padding-block:var(--sect);position:relative}
.grid{display:grid;gap:clamp(1.5rem,3vw,2.75rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.grid>*,.split>*,.contact-grid>*,.band>*,.gal>*{min-width:0}
.stack>*+*{margin-top:1.15rem}

/* surfaces */
.s-navy{background:var(--navy-700);color:var(--bone-100)}
.s-deep{background:var(--navy-900);color:var(--bone-100)}
.s-bone{background:var(--bone-100);color:var(--ink-900)}
.s-bone-alt{background:var(--bone-200);color:var(--ink-900)}
.s-bone h1,.s-bone h2,.s-bone h3,.s-bone-alt h1,.s-bone-alt h2,.s-bone-alt h3{color:var(--ink-900)}
/* dark surfaces nested in a light section keep light type */
.s-bone .proj h3,.s-bone-alt .proj h3,
.s-bone .card:not(.card-light) h3,.s-bone-alt .card:not(.card-light) h3,
.s-bone .fig figcaption,.s-bone-alt .fig figcaption{color:var(--bone-100)}

/* atmospheric texture layers */
.tex-grid::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--hairline-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hairline-soft) 1px,transparent 1px);
  background-size:82px 82px;
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 34%,#000 10%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 62% at 50% 34%,#000 10%,transparent 78%);
  opacity:.75;
}
.tex-glow::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(58rem 40rem at 82% -8%,rgba(200,162,82,.15),transparent 62%),
             radial-gradient(44rem 34rem at 4% 96%,rgba(20,69,107,.42),transparent 66%);
}
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.033;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

/* -------------------------------------------------- 5. Type bits ----- */
.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font-family:var(--sans);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-400);
}
.eyebrow::before{content:"";width:2.1rem;height:1px;background:var(--gold-500);flex:none}
.eyebrow.is-center{justify-content:center}
.s-bone .eyebrow,.s-bone-alt .eyebrow{color:var(--gold-700)}
.s-bone .eyebrow::before,.s-bone-alt .eyebrow::before{background:var(--gold-600)}

.lead{font-size:var(--t-lead);line-height:1.62;color:rgba(245,243,239,.74);max-width:58ch}
.s-bone .lead,.s-bone-alt .lead{color:var(--ink-500)}
.muted{color:rgba(245,243,239,.62)}
.s-bone .muted,.s-bone-alt .muted{color:var(--ink-500)}
.gold{color:var(--gold-400)}
.s-bone .gold,.s-bone-alt .gold{color:var(--gold-700)}

/* gold italic emphasis inside display headings */
.accent{
  font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 1;
  background:var(--gold-sheen);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-400);
  padding-right:.06em;
}

.sect-head{max-width:66ch}
.sect-head h2{margin-top:1.1rem}
.sect-head .lead{margin-top:1.35rem}
.sect-head.is-center{margin-inline:auto;text-align:center}
.sect-head.is-center .lead{margin-inline:auto}

.rule{height:1px;background:linear-gradient(90deg,var(--gold-500),transparent);border:0}
.s-bone .rule{background:linear-gradient(90deg,var(--gold-600),transparent)}

/* -------------------------------------------------- 6. Buttons ------- */
.btn{
  --bh:3.55rem;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:var(--bh);padding:0 1.85rem;border-radius:var(--r);
  font-family:var(--sans);font-size:.845rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
             background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  overflow:hidden;isolation:isolate;
}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .45s var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:hover svg{transform:translateX(4px)}

.btn-gold{background:var(--gold-sheen);color:var(--navy-900);box-shadow:0 10px 30px -12px rgba(200,162,82,.6)}
.btn-gold::after{ /* travelling sheen */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .75s var(--ease-out);
}
.btn-gold:hover{box-shadow:0 18px 40px -14px rgba(200,162,82,.75)}
.btn-gold:hover::after{transform:translateX(120%)}

.btn-ghost{border:1px solid var(--hairline);color:var(--bone-100);background:rgba(245,243,239,.02)}
.btn-ghost:hover{border-color:var(--gold-500);background:rgba(200,162,82,.09);color:var(--gold-300)}
.s-bone .btn-ghost,.s-bone-alt .btn-ghost{border-color:rgba(138,107,45,.4);color:var(--ink-900)}
.s-bone .btn-ghost:hover,.s-bone-alt .btn-ghost:hover{border-color:var(--gold-600);background:rgba(200,162,82,.12);color:var(--gold-800)}

.btn-ink{background:var(--navy-700);color:var(--bone-100)}
.btn-ink:hover{background:var(--navy-500)}
.btn-lg{--bh:4rem;padding:0 2.3rem;font-size:.88rem}
.btn-block{width:100%}

.link-gold{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-400);padding-bottom:.35rem;position:relative;
}
.link-gold::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold-500);transform:scaleX(.32);transform-origin:left;
  transition:transform .5s var(--ease-out)}
.link-gold:hover::after{transform:scaleX(1)}
.link-gold svg{width:.95em;height:.95em;transition:transform .45s var(--ease-out)}
.link-gold:hover svg{transform:translateX(4px)}
.s-bone .link-gold,.s-bone-alt .link-gold{color:var(--gold-700)}

/* -------------------------------------------------- 7. Header -------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:1000;padding-top:env(safe-area-inset-top,0px);
  transition:background-color .45s var(--ease),backdrop-filter .45s,box-shadow .45s var(--ease),
             border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,11,21,.78),rgba(0,11,21,.28) 60%,transparent);
  transition:opacity .45s var(--ease)}
.hdr.is-stuck::before{opacity:0}
.hdr-in{position:relative;display:flex;align-items:center;gap:2rem;min-height:5.25rem;
  transition:min-height .4s var(--ease)}
.hdr.is-stuck{background:rgba(0,18,31,.92);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--hairline-soft);box-shadow:0 18px 44px -28px #000}
.hdr.is-stuck .hdr-in{min-height:4.45rem}

.brand{display:flex;align-items:center;gap:.72rem;color:var(--bone-100);flex:none}
.brand-mark{width:3rem;flex:none;transition:transform .5s var(--ease-out)}
.brand:hover .brand-mark{transform:translateY(-2px)}
.brand-text{display:flex;flex-direction:column;justify-content:center;gap:.16rem;line-height:1}
.brand-name{font-family:var(--display);font-variation-settings:var(--fx-display);
  font-size:1.05rem;font-weight:600;letter-spacing:.012em;color:var(--bone-100);white-space:nowrap}
.brand-suffix{font-family:var(--sans);font-size:.595rem;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold-400)}

.nav{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.nav a{
  position:relative;padding:.6rem .95rem;border-radius:var(--r);
  font-size:.815rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(245,243,239,.78);transition:color .3s var(--ease);
}
.nav a::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.3rem;height:1px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out)}
.nav a:hover{color:var(--bone-50)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.nav a[aria-current=page]{color:var(--gold-300)}

.hdr-cta{display:flex;align-items:center;gap:1.25rem;flex:none}
.hdr-tel{display:flex;align-items:center;gap:.55rem;font-size:.845rem;font-weight:600;
  letter-spacing:.06em;color:rgba(245,243,239,.82);transition:color .3s}
.hdr-tel svg{width:1rem;height:1rem;color:var(--gold-400)}
.hdr-tel:hover{color:var(--gold-300)}
.hdr .btn{--bh:2.95rem;padding:0 1.35rem;font-size:.775rem}

/* mobile drawer */
.burger{display:none;width:2.9rem;height:2.9rem;place-items:center;flex:none;
  border:1px solid var(--hairline-soft);border-radius:var(--r);margin-left:auto}
.burger span{display:block;width:1.15rem;height:1.5px;background:var(--bone-100);
  transition:transform .4s var(--ease),opacity .25s}
.burger span+span{margin-top:4px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:999;display:grid;align-content:center;
  padding:6rem var(--gut) 3rem;background:var(--navy-900);
  clip-path:circle(0% at 100% 0);transition:clip-path .7s var(--ease-out);
  visibility:hidden;
}
.drawer.is-open{clip-path:circle(150% at 100% 0);visibility:visible}
.drawer a{font-family:var(--display);font-variation-settings:var(--fx-display);
  font-size:clamp(2rem,9vw,2.9rem);line-height:1.5;color:var(--bone-100);
  border-bottom:1px solid var(--hairline-soft);display:flex;justify-content:space-between;
  align-items:center;padding-block:.35rem}
.drawer a span{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;color:var(--gold-600)}
.drawer a[aria-current=page]{color:var(--gold-300)}
.drawer-foot{margin-top:2.6rem;display:grid;gap:1rem}

/* -------------------------------------------------- 8. Hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:clamp(7.25rem,11.5vh,9rem);padding-bottom:var(--sect);
  background:
    radial-gradient(70rem 48rem at 88% -12%,rgba(200,162,82,.17),transparent 58%),
    radial-gradient(52rem 42rem at -6% 84%,rgba(20,69,107,.5),transparent 64%),
    linear-gradient(176deg,var(--navy-800) 0%,var(--navy-700) 46%,var(--navy-900) 100%);
}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2.5rem,5vw,5rem);
  align-items:center;position:relative;z-index:2}
.hero h1{font-size:var(--t-hero);margin-top:1.6rem;letter-spacing:-.028em;font-weight:300}
.hero h1 em{font-style:normal;display:block}
.hero .lead{margin-top:1.9rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem}

.hero-trust{display:flex;flex-wrap:wrap;gap:.6rem 1.9rem;margin-top:3rem;
  padding-top:1.9rem;border-top:1px solid var(--hairline-soft)}
.hero-trust li{display:flex;align-items:center;gap:.6rem;font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:rgba(245,243,239,.66);font-weight:600}
.hero-trust svg{width:1rem;height:1rem;color:var(--gold-500);flex:none}

/* chevron photo frame — echoes the brand card */
.chev{position:relative}
.chev-frame{
  background:var(--gold-sheen);padding:4px;
  clip-path:polygon(13% 0,100% 0,100% 100%,13% 100%,0 50%);
  box-shadow:0 44px 90px -40px rgba(0,0,0,.85);
}
.chev-frame img{clip-path:polygon(13% 0,100% 0,100% 100%,13% 100%,0 50%);width:100%;
  aspect-ratio:314/412;object-fit:cover}
.chev-badge{
  position:absolute;left:-1.5rem;bottom:2.2rem;z-index:3;
  background:rgba(0,18,31,.93);backdrop-filter:blur(10px);
  border:1px solid var(--hairline);border-left:2px solid var(--gold-500);
  padding:1.15rem 1.5rem;box-shadow:0 30px 60px -30px #000;
}
.chev-badge b{display:block;font-family:var(--display);font-variation-settings:var(--fx-display);
  font-size:2.1rem;font-weight:600;line-height:1;color:var(--gold-300)}
.chev-badge span{display:block;margin-top:.4rem;font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(245,243,239,.6)}

.scroll-cue{display:flex;align-items:center;gap:.8rem;margin-top:4rem;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,243,239,.42)}
.scroll-cue i{display:block;width:3.2rem;height:1px;background:var(--gold-600);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--gold-300);
  animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* -------------------------------------------------- 9. Marquee ------- */
.ticker{border-block:1px solid var(--hairline-soft);background:var(--navy-900);
  padding-block:1.35rem;overflow:hidden}
.ticker-in{display:flex;gap:3.5rem;width:max-content;animation:slide 42s linear infinite}
.ticker:hover .ticker-in{animation-play-state:paused}
.ticker li{display:flex;align-items:center;gap:.7rem;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(245,243,239,.52);white-space:nowrap}
.ticker svg{width:.95rem;height:.95rem;color:var(--gold-600)}
@keyframes slide{to{transform:translateX(-50%)}}

/* -------------------------------------------------- 10. Cards -------- */
.card{
  position:relative;padding:clamp(1.85rem,2.6vw,2.5rem);
  background:linear-gradient(168deg,var(--navy-600),var(--navy-800));
  border:1px solid var(--hairline-soft);border-radius:var(--r);
  transition:transform .55s var(--ease-out),border-color .45s,box-shadow .55s var(--ease-out);
  overflow:hidden;height:100%;
}
.card::before{content:"";position:absolute;top:0;left:0;height:2px;width:100%;
  background:var(--gold-sheen);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out)}
.card:hover{transform:translateY(-6px);border-color:var(--hairline);
  box-shadow:0 34px 64px -34px rgba(0,0,0,.8)}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:.85rem}
.card p{color:rgba(245,243,239,.68);font-size:var(--t-sm)}

.card-num{font-family:var(--display);font-variation-settings:var(--fx-display);
  font-size:.9rem;font-weight:700;letter-spacing:.2em;color:var(--gold-600);
  display:block;margin-bottom:1.5rem}
.card-ico{width:2.9rem;height:2.9rem;display:grid;place-items:center;margin-bottom:1.6rem;
  border:1px solid var(--hairline);border-radius:50%;color:var(--gold-400);
  transition:background-color .45s,color .45s,border-color .45s}
.card-ico svg{width:1.3rem;height:1.3rem}
.card:hover .card-ico{background:rgba(200,162,82,.1);border-color:var(--gold-600);color:var(--gold-300)}

/* light variant */
.card-light{background:var(--bone-50);border-color:var(--hairline-ink);color:var(--ink-900)}
.card-light p{color:var(--ink-500)}
.card-light .card-ico{border-color:rgba(138,107,45,.28);color:var(--gold-700)}
.card-light:hover{box-shadow:0 34px 64px -38px rgba(11,22,32,.4)}
.card-light:hover .card-ico{background:rgba(200,162,82,.14);color:var(--gold-800)}

/* feature list */
.ticks{display:grid;gap:.85rem;margin-top:1.5rem}
.ticks li{display:flex;gap:.8rem;font-size:var(--t-sm);line-height:1.55;color:rgba(245,243,239,.72)}
.ticks svg{width:1.05rem;height:1.05rem;color:var(--gold-500);flex:none;margin-top:.32rem}
.s-bone .ticks li,.s-bone-alt .ticks li,.card-light .ticks li{color:var(--ink-700)}
.s-bone .ticks svg,.s-bone-alt .ticks svg,.card-light .ticks svg{color:var(--gold-700)}

/* -------------------------------------------------- 11. Stats -------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline-soft);
  border:1px solid var(--hairline-soft)}
.stats li{background:var(--navy-800);padding:clamp(1.9rem,3vw,2.75rem) clamp(1.25rem,2vw,2rem);
  text-align:center;transition:background-color .5s var(--ease)}
.stats li:hover{background:var(--navy-600)}
.stats b{display:block;font-family:var(--display);font-variation-settings:var(--fx-display);
  font-size:clamp(2.6rem,4.6vw,3.9rem);font-weight:600;line-height:1;
  background:var(--gold-sheen);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.stats li>span{display:block;margin-top:.85rem;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(245,243,239,.55)}
.stats b span{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}

/* -------------------------------------------------- 12. Process ------ */
.steps{counter-reset:s;display:grid;gap:0}
.steps li{
  counter-increment:s;position:relative;display:grid;
  grid-template-columns:7.5rem 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(2rem,3.4vw,2.9rem);
  border-top:1px solid var(--hairline-ink);transition:background-color .5s var(--ease)
}
.steps li:last-child{border-bottom:1px solid var(--hairline-ink)}
.steps li::before{
  content:"0" counter(s);font-family:var(--display);font-variation-settings:var(--fx-display);
  font-size:clamp(2.6rem,4.4vw,3.6rem);font-weight:300;line-height:.9;color:var(--gold-600);
  opacity:.5;transition:opacity .5s var(--ease),transform .5s var(--ease-out)
}
.steps li:hover::before{opacity:1;transform:translateX(5px)}
.steps h3{margin-bottom:.7rem}
.steps p{color:var(--ink-500);font-size:var(--t-sm);max-width:62ch}

/* -------------------------------------------------- 13. Projects ----- */
.proj{position:relative;display:block;overflow:hidden;background:var(--navy-800);
  border:1px solid var(--hairline-soft);border-radius:var(--r);height:100%;
  transition:transform .6s var(--ease-out),border-color .5s,box-shadow .6s var(--ease-out)}
.proj:hover{transform:translateY(-7px);border-color:var(--hairline);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85)}
.proj-fig{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--navy-900)}
.proj-fig svg,.proj-fig img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out)}
.proj:hover .proj-fig svg,.proj:hover .proj-fig img{transform:scale(1.045)}
.proj-tag{position:absolute;top:1rem;left:1rem;z-index:2;padding:.45rem .85rem;
  background:rgba(0,18,31,.82);backdrop-filter:blur(6px);border:1px solid var(--hairline);
  font-size:.67rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-300)}
.proj-body{padding:clamp(1.5rem,2.4vw,2rem)}
.proj-body h3{margin-bottom:.4rem}
.proj-loc{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,243,239,.52);font-weight:600}
.proj-specs{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.35rem;padding-top:1.35rem;
  border-top:1px solid var(--hairline-soft)}
.proj-specs div{display:grid;gap:.2rem}
.proj-specs dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,243,239,.45);font-weight:600}
.proj-specs dd{font-size:var(--t-sm);font-weight:600;color:var(--bone-100)}
/* standalone spec list sitting on a light section */
.proj-specs.on-light{border-top-color:var(--hairline-ink)}
.proj-specs.on-light dt{color:var(--ink-400)}
.proj-specs.on-light dd{color:var(--ink-900)}

/* -------------------------------------------------- 14. Quote ------- */
.quote{position:relative;padding-left:clamp(1.5rem,3vw,2.75rem);border-left:2px solid var(--gold-600)}
.quote blockquote{font-family:var(--display);font-variation-settings:var(--fx-display);
  font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.42;font-weight:300;letter-spacing:-.012em}
.quote figcaption{margin-top:1.6rem;display:flex;align-items:center;gap:.9rem;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgba(245,243,239,.58)}
.quote figcaption i{width:1.9rem;height:1px;background:var(--gold-600);flex:none;display:block}
.s-bone .quote figcaption,.s-bone-alt .quote figcaption{color:var(--ink-400)}
.stars{display:flex;gap:.22rem;margin-bottom:1.4rem;color:var(--gold-500)}
.stars svg{width:1.05rem;height:1.05rem}

/* -------------------------------------------------- 15. Accordion ---- */
.acc{border-top:1px solid var(--hairline-ink)}
.acc details{border-bottom:1px solid var(--hairline-ink)}
.acc summary{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;
  padding-block:1.5rem;cursor:pointer;list-style:none;
  font-family:var(--display);font-variation-settings:var(--fx-display);
  font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.34;font-weight:500;
  transition:color .35s var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--gold-700)}
.acc summary i{flex:none;width:1.4rem;height:1.4rem;position:relative;margin-top:.28rem}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;inset:50% 0 auto;
  height:1.5px;background:var(--gold-600);transition:transform .45s var(--ease-out)}
.acc summary i::after{transform:rotate(90deg)}
.acc details[open] summary i::after{transform:rotate(0)}
.acc details[open] summary{color:var(--gold-700)}
.acc-body{padding-bottom:1.75rem;max-width:72ch;color:var(--ink-500);font-size:var(--t-sm)}
.acc details[open] .acc-body{animation:accIn .5s var(--ease-out)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* -------------------------------------------------- 16. Forms -------- */
.form{display:grid;gap:1.15rem}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.field{position:relative;display:grid;gap:.55rem}
.field label{font-size:var(--t-xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(245,243,239,.62)}
.field label .req{color:var(--gold-500)}
.field input,.field select,.field textarea{
  width:100%;padding:1rem 1.1rem;background:rgba(0,11,21,.45);
  border:1px solid var(--hairline-soft);border-radius:var(--r);color:var(--bone-100);
  font-size:var(--t-sm);transition:border-color .35s,background-color .35s,box-shadow .35s;
}
.field textarea{min-height:8.5rem;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23C8A252' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;background-size:.7rem;
  padding-right:2.6rem}
.field select option{background:var(--navy-800);color:var(--bone-100)}
.field input::placeholder,.field textarea::placeholder{color:rgba(245,243,239,.3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-600);background:rgba(0,11,21,.66);
  box-shadow:0 0 0 3px rgba(200,162,82,.13)}
.field .err{font-size:var(--t-xs);color:#E9967A;letter-spacing:.04em;text-transform:none;
  display:none}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#C9714F}
.field.is-bad .err{display:block}

.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:block;padding:.65rem 1.1rem;border:1px solid var(--hairline-soft);
  border-radius:var(--r);font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(245,243,239,.7);cursor:pointer;
  transition:all .3s var(--ease)}
.chip input:checked+span{border-color:var(--gold-500);background:rgba(200,162,82,.12);color:var(--gold-300)}
.chip input:focus-visible+span{outline:2px solid var(--gold-400);outline-offset:2px}

.form-note{font-size:var(--t-xs);color:rgba(245,243,239,.48);line-height:1.6}
.form-ok{display:none;padding:1.5rem 1.65rem;border:1px solid var(--gold-600);
  background:rgba(200,162,82,.1);border-left:2px solid var(--gold-500)}
.form-ok.is-on{display:block;animation:accIn .5s var(--ease-out)}
.form-ok b{display:block;font-family:var(--display);font-variation-settings:var(--fx-display);
  font-size:1.3rem;color:var(--gold-300);margin-bottom:.4rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* -------------------------------------------------- 17. Contact ------ */
.contact-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.info-list{display:grid;gap:1.6rem}
.info-list li{display:flex;gap:1.1rem;align-items:flex-start}
.info-ico{width:2.6rem;height:2.6rem;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--hairline);color:var(--gold-400)}
.info-ico svg{width:1.1rem;height:1.1rem}
.info-list dt{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,243,239,.5);margin-bottom:.3rem}
.info-list dd{font-size:1.02rem;font-weight:500}
.info-list dd a:hover{color:var(--gold-300)}

.map-panel{position:relative;border:1px solid var(--hairline-soft);background:var(--navy-900);
  padding:1.1rem;border-radius:var(--r)}
.map-svg{width:100%;height:auto;display:block}
.map-city{font-family:var(--sans);font-size:12px;font-weight:500;fill:var(--bone-100);opacity:.72}
.map-hq{font-family:var(--sans);font-size:13px;font-weight:700;fill:var(--gold-500);letter-spacing:.12em}
.map-county{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--gold-500);
  opacity:.45;letter-spacing:.2em}
.map-key{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;margin-top:1.2rem;padding-top:1.2rem;
  border-top:1px solid var(--hairline-soft)}
.map-key li{display:flex;align-items:center;gap:.6rem;font-size:var(--t-xs);
  color:rgba(245,243,239,.62)}
.map-key i{width:1.5rem;height:0;border-top:2px solid var(--gold-500);flex:none}
.map-key i.dash{border-top-style:dashed;opacity:.6}
.map-key i.dot{width:.62rem;height:.62rem;border:0;border-radius:50%;background:var(--gold-500)}

/* -------------------------------------------------- 18. CTA band ----- */
.cta{position:relative;overflow:hidden;text-align:center;
  background:
    radial-gradient(48rem 34rem at 50% 0%,rgba(200,162,82,.2),transparent 62%),
    linear-gradient(180deg,var(--navy-800),var(--navy-950));
  border-top:1px solid var(--hairline-soft)}
.cta h2{font-size:var(--t-d1);max-width:20ch;margin-inline:auto;font-weight:300}
.cta .lead{margin:1.6rem auto 0}
.cta-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.75rem}
.cta-sub{margin-top:2rem;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,243,239,.45)}

/* -------------------------------------------------- 19. Footer ------- */
.ftr{background:var(--navy-950);border-top:1px solid var(--hairline-soft);
  padding-block:clamp(3.5rem,6vw,5.5rem) 2rem}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(2rem,4vw,3.5rem)}
.ftr-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem}
.ftr-mark{width:3.45rem;flex:none}
.ftr-brand .brand-name{font-size:1.16rem}
.ftr-brand .brand-suffix{font-size:.63rem}
.ftr p{font-size:var(--t-sm);color:rgba(245,243,239,.55);max-width:34ch}
.ftr h4{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-500);margin-bottom:1.35rem;font-family:var(--sans)}
.ftr-links{display:grid;gap:.75rem}
.ftr-links a{font-size:var(--t-sm);color:rgba(245,243,239,.65);transition:color .3s,padding-left .3s}
.ftr-links a:hover{color:var(--gold-300);padding-left:4px}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.9rem;border-top:1px solid var(--hairline-soft);
  font-size:var(--t-xs);color:rgba(245,243,239,.42)}
.ftr-bot a:hover{color:var(--gold-400)}

/* -------------------------------------------------- 20. Page head ---- */
.phead{position:relative;overflow:hidden;padding-top:clamp(8.5rem,15vh,11.5rem);
  padding-bottom:clamp(3.5rem,6vw,5.5rem);
  background:
    radial-gradient(56rem 36rem at 84% -18%,rgba(200,162,82,.15),transparent 60%),
    linear-gradient(172deg,var(--navy-800),var(--navy-700) 60%,var(--navy-900));
  border-bottom:1px solid var(--hairline-soft)}
.phead h1{font-size:var(--t-d1);margin-top:1.4rem;font-weight:300}
.phead .lead{margin-top:1.6rem}
.crumb{display:flex;align-items:center;gap:.6rem;font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(245,243,239,.42);margin-bottom:1.6rem}
.crumb a:hover{color:var(--gold-400)}
.crumb svg{width:.8rem;height:.8rem;opacity:.5}

/* -------------------------------------------------- 21. Motion ------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
  transition-delay:var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}

@keyframes riseIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes chevIn{from{opacity:0;transform:translateX(38px) scale(.97)}to{opacity:1;transform:none}}
.a-rise{opacity:0;animation:riseIn .95s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
.a-fade{opacity:0;animation:fadeIn 1.2s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
.a-chev{opacity:0;animation:chevIn 1.15s var(--ease-out) forwards;animation-delay:var(--d,0ms)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .a-rise,.a-fade,.a-chev{opacity:1;animation:none}
}
html{scroll-behavior:smooth}

/* -------------------------------------------------- 22. Responsive --- */
@media (max-width:1080px){
  .hdr-tel{display:none}
  .nav a{padding:.6rem .7rem;font-size:.775rem}
  .brand-mark{width:2.7rem}
  .brand-name{font-size:.96rem}
  .brand-suffix{font-size:.56rem;letter-spacing:.3em}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
}
@media (max-width:920px){
  .nav,.hdr-cta{display:none}
  .burger{display:grid}
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
  .hero-grid{gap:3.5rem}
  .chev{max-width:26rem;margin-inline:auto;width:100%}
  .chev-badge{left:-.75rem}
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .split.is-flip>*:first-child{order:2}
}
@media (max-width:640px){
  :root{--t-body:1rem}
  .btn{white-space:normal;text-align:center;line-height:1.3;padding-inline:1.25rem;
    padding-block:1rem;min-height:0}
  .g-2,.g-3,.g-4,.row-2{grid-template-columns:1fr}
  .steps li{grid-template-columns:1fr;gap:.9rem}
  .steps li::before{font-size:2.2rem}
  .hero-trust{gap:.85rem 1.4rem}
  .chev-badge{position:static;margin-top:1.25rem;border-left-width:2px}
  .ftr-grid{grid-template-columns:1fr}
  .ftr-bot{flex-direction:column;gap:.6rem}
  .btn{width:100%}
  .hero-actions .btn,.cta-actions .btn{flex:1 1 100%}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr}
}

/* -------------------------------------------------- 23. Print -------- */
@media print{
  .hdr,.drawer,.grain,.cta,.scroll-cue,.ticker{display:none!important}
  body{background:#fff;color:#000}
  .section{padding-block:1.5rem}
}

/* ==========================================================================
   24. Photography layers (added once real project imagery was available)
   ========================================================================== */

/* ---- hero: chevron-clipped image plate, lifted from the brand card ------- */
.hero{display:flex;align-items:center;min-height:min(92vh,910px);padding-bottom:clamp(4rem,8vh,6rem)}
.hero-media{position:absolute;top:0;right:0;bottom:0;width:min(54%,840px);z-index:1;
  clip-path:polygon(17% 0,100% 0,100% 100%,17% 100%,0 50%)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(94deg,var(--navy-900) 2%,rgba(0,18,31,.86) 20%,
             rgba(0,18,31,.42) 46%,rgba(0,18,31,.12) 72%,transparent 92%)}
.hero-chev{position:absolute;top:0;right:0;bottom:0;width:min(54%,840px);z-index:2;
  height:100%;pointer-events:none}
.hero-in{position:relative;z-index:3;max-width:min(50ch,45%)}
.hero .lead{max-width:42ch}
.hero-actions{margin-top:2.2rem}
.hero-trust{margin-top:2.4rem;padding-top:1.6rem}
.scroll-cue{margin-top:2.6rem}

/* ---- framed figure ------------------------------------------------------ */
.fig{position:relative;overflow:hidden;border-radius:var(--r);background:var(--navy-900);
  border:1px solid var(--hairline-soft)}
.fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease-out)}
.fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.4rem .95rem;
  background:linear-gradient(0deg,rgba(0,11,21,.92),transparent);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,243,239,.82)}
.fig-gold{padding:4px;background:var(--gold-sheen);border:0}
.fig-gold>img{border-radius:1px}

/* ---- editorial photo band ---------------------------------------------- */
.band{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.75rem,1.4vw,1.25rem)}
.band .fig{grid-column:span 4;aspect-ratio:4/5}
.band .fig:nth-child(2){grid-column:span 4;aspect-ratio:4/5;margin-top:clamp(1.5rem,4vw,3.5rem)}
.band .fig:nth-child(3){grid-column:span 4;aspect-ratio:4/5}
.band .fig:hover img{transform:scale(1.05)}

/* ---- gallery ------------------------------------------------------------ */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.75rem,1.4vw,1.2rem)}
.gal .fig{grid-column:span 4;aspect-ratio:3/2}
.gal .fig.is-wide{grid-column:span 6;aspect-ratio:16/10}
.gal .fig.is-tall{grid-column:span 4;aspect-ratio:3/4}
.gal .fig.is-hero{grid-column:span 8;aspect-ratio:16/9}
.gal .fig:hover img{transform:scale(1.05)}

/* ---- project card with photography ------------------------------------- */
.proj-fig img{width:100%;height:100%;object-fit:cover}

/* ---- split media -------------------------------------------------------- */
.split-media{position:relative}
.split-media .fig{aspect-ratio:4/3}
.split-media .fig-sub{position:absolute;right:-1.5rem;bottom:-2.25rem;width:44%;
  aspect-ratio:1/1;border:4px solid var(--navy-700);z-index:2;box-shadow:0 28px 56px -28px #000}
.s-bone .split-media .fig-sub,.s-bone-alt .split-media .fig-sub{border-color:var(--bone-100)}

/* ---- stat strip over an image ------------------------------------------ */
.photo-cta{position:relative;overflow:hidden;isolation:isolate}
.photo-cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.photo-cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,18,31,.92),rgba(0,11,21,.86)),
             radial-gradient(40rem 30rem at 50% 0,rgba(200,162,82,.22),transparent 60%)}

@media (max-width:920px){
  /* copy leads, photograph follows the call to action */
  .hero{min-height:0;display:flex;flex-direction:column;align-items:stretch;padding-bottom:0;
    padding-top:clamp(6.5rem,18vw,8rem)}
  .hero>.wrap{order:1}
  .hero-media{order:2}
  /* the chevron notch reads as a glitch at phone width — go full-bleed instead */
  .hero-media,.hero-chev{position:relative;width:auto;inset:auto;margin:2.75rem 0 0;
    clip-path:none;aspect-ratio:16/11;border-top:2px solid transparent;
    border-image:var(--gold-sheen) 1}
  .hero-chev{display:none}
  .hero-media::after{background:linear-gradient(0deg,rgba(0,18,31,.5),transparent 55%)}
  .hero-in{max-width:none}
  .band .fig,.band .fig:nth-child(2),.band .fig:nth-child(3){grid-column:span 6;margin-top:0}
  .gal .fig,.gal .fig.is-wide,.gal .fig.is-tall,.gal .fig.is-hero{grid-column:span 6;aspect-ratio:3/2}
  .split-media .fig-sub{right:0;bottom:-1.5rem;width:38%}
}
@media (max-width:560px){
  .band .fig,.band .fig:nth-child(2),.band .fig:nth-child(3),
  .gal .fig,.gal .fig.is-wide,.gal .fig.is-tall,.gal .fig.is-hero{grid-column:span 12}
  .split-media .fig-sub{display:none}
}

/* -------------------------------------------------- 23. Service areas -
   Primary-nav mega menu, mobile collapsible submenu, and the county /
   town page furniture.
   -------------------------------------------------------------------- */

/* --- desktop mega menu --- */
.nav-has-sub{position:relative;display:flex;align-items:center}
.nav-trigger{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.nav-chev{width:.72em;height:.72em;flex:none;transition:transform .35s var(--ease-out)}
.nav-has-sub:hover .nav-chev,.nav-has-sub:focus-within .nav-chev{transform:rotate(180deg)}

.mega{
  position:absolute;top:calc(100% + .55rem);left:50%;translate:-50% 0;z-index:40;
  min-width:min(46rem,calc(100vw - 2.5rem));
  background:rgba(0,18,31,.97);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--hairline);border-radius:calc(var(--r) * 1.5);
  box-shadow:0 30px 70px -30px #000;padding:1.5rem 1.5rem 1.1rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease-out),visibility .28s;
}
.nav-has-sub:hover .mega,.nav-has-sub:focus-within .mega{
  opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega::before{content:"";position:absolute;top:-.6rem;left:0;right:0;height:.7rem}
.mega-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.mega-col{display:grid;gap:.1rem;align-content:start}
.mega-col a{padding:.3rem .4rem;font-size:.8rem;font-weight:500;letter-spacing:.02em;
  text-transform:none;color:rgba(245,243,239,.66);border-radius:4px;
  transition:color .2s,background-color .2s}
.mega-col a:hover{color:var(--bone-50);background:rgba(200,162,82,.1)}
.mega-col a::after{display:none}
.mega-head{font-family:var(--sans);font-size:.7rem!important;font-weight:700!important;
  letter-spacing:.17em!important;text-transform:uppercase!important;
  color:var(--gold-500)!important;margin-bottom:.45rem;
  padding-bottom:.5rem!important;border-bottom:1px solid var(--hairline-soft)}
.mega-head:hover{color:var(--gold-300)!important;background:none!important}
.mega-all{display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--hairline-soft);
  font-size:.7rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-400)}
.mega-all:hover{color:var(--gold-300)}
.mega-all::after{display:none}
.mega-all svg{width:.9em;height:.9em;transition:transform .35s var(--ease-out)}
.mega-all:hover svg{transform:translateX(3px)}

/* --- mobile drawer submenu --- */
.drawer{align-content:start;overflow-y:auto;overscroll-behavior:contain;
  padding-top:5.9rem;padding-bottom:2.5rem}
/* keeps scrolled menu items from showing through the fixed header */
.drawer::before{content:"";position:fixed;top:0;left:0;right:0;z-index:1;
  height:calc(5.25rem + env(safe-area-inset-top,0px));
  background:var(--navy-900);pointer-events:none}
.drawer nav{display:block}
.dsub{border-bottom:1px solid var(--hairline-soft)}
.dsub>summary{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding-block:.35rem;cursor:pointer;list-style:none;
  font-family:var(--display);font-variation-settings:var(--fx-display);
  font-size:clamp(1.75rem,7.4vw,2.6rem);line-height:1.5;color:var(--bone-100)}
.dsub>summary::-webkit-details-marker{display:none}
.dsub>summary span{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;
  color:var(--gold-600);margin-left:auto}
.dsub>summary .nav-chev{width:.55em;height:.55em;color:var(--gold-500);
  transition:transform .3s var(--ease-out)}
.dsub[open]>summary .nav-chev{transform:rotate(180deg)}
.dsub-in{padding:.4rem 0 1.15rem}
.dsub-all{font-family:var(--sans)!important;font-size:.72rem!important;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-400)!important;
  border-bottom:0!important;padding-block:.5rem!important}
.dsub-head{font-family:var(--sans)!important;font-size:.7rem!important;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-500)!important;
  border-bottom:0!important;padding:.9rem 0 .35rem!important}
.dsub-towns{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;
  padding-bottom:.35rem}
.dsub-towns a{font-family:var(--sans)!important;font-size:1rem!important;
  font-weight:500;color:rgba(245,243,239,.72)!important;
  border-bottom:0!important;padding-block:.72rem!important;line-height:1.35;
  min-height:44px;align-items:center}
.dsub-towns a:hover{color:var(--gold-300)!important}

/* --- prose column on area pages --- */
/* keeps the reading column aligned with the page-head text rather than
   floating centred against it */
.wrap-prose>*{max-width:74ch}
.prose{margin-top:1.5rem}
.prose p{margin-top:1.15rem;color:var(--ink-700);font-size:var(--t-body);line-height:1.78}
.prose p:first-child{margin-top:0}
.prose .ticks{margin-top:1.35rem}
.prose .ticks li{align-items:flex-start}
.prose a{color:var(--gold-800);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(138,107,45,.45)}
.prose a:hover{text-decoration-color:var(--gold-700)}
.s-bone-alt .prose p,.s-bone .prose p{color:var(--ink-700)}

/* --- fast facts --- */
.fastfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1px;background:var(--hairline-ink);border:1px solid var(--hairline-ink);
  border-radius:var(--r);overflow:hidden}
.fastfacts>div{background:var(--bone-50);padding:1.15rem 1.25rem}
.fastfacts dt{font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-700);font-family:var(--sans)}
.fastfacts dd{margin:.5rem 0 0;font-size:var(--t-sm);color:var(--ink-900);line-height:1.5}

/* --- town cards on a county page --- */
.town-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.town-card{display:block;padding:1.35rem 1.4rem;border:1px solid var(--hairline-soft);
  border-radius:var(--r);background:rgba(245,243,239,.03);
  transition:border-color .35s var(--ease),background-color .35s var(--ease),transform .35s var(--ease-out)}
.town-card:hover{border-color:rgba(200,162,82,.42);background:rgba(200,162,82,.07);
  transform:translateY(-3px)}
.town-card h3{font-size:1.28rem;font-weight:400;color:var(--bone-50)}
.town-card p{margin-top:.5rem;font-size:var(--t-xs);color:rgba(245,243,239,.52);line-height:1.5}
.town-card-go{display:flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-400)}
.town-card-go svg{width:.95em;height:.95em;transition:transform .35s var(--ease-out)}
.town-card:hover .town-card-go svg{transform:translateX(4px)}

/* --- sibling town links --- */
.sib-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.sib-links a{display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem 1rem;border:1px solid rgba(138,107,45,.3);border-radius:100px;
  font-size:.8rem;font-weight:600;color:var(--ink-700);
  transition:border-color .3s,background-color .3s,color .3s}
.sib-links a:hover{border-color:var(--gold-600);background:rgba(200,162,82,.1);
  color:var(--gold-800)}
.sib-links svg{width:.85em;height:.85em;opacity:.55}

/* --- the hub page --- */
.area-list{display:grid;gap:1.25rem}
.area-block{padding:1.75rem 1.9rem;border:1px solid var(--hairline-ink);
  border-radius:calc(var(--r) * 1.4);background:var(--bone-50)}
.area-county{display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-variation-settings:var(--fx-display);
  font-size:clamp(1.5rem,2.6vw,2rem);font-weight:400;color:var(--ink-900)}
.area-county svg{width:.68em;height:.68em;color:var(--gold-700);
  transition:transform .35s var(--ease-out)}
.area-county:hover{color:var(--gold-800)}
.area-county:hover svg{transform:translateX(4px)}
.area-block>p{margin-top:.75rem;font-size:var(--t-sm);color:var(--ink-500);max-width:62ch;
  line-height:1.7}
.area-towns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.35rem;
  padding-top:1.35rem;border-top:1px solid var(--hairline-ink)}
.area-towns a{display:inline-block;padding:.45rem .9rem;border-radius:100px;
  background:var(--bone-200);font-size:.8rem;font-weight:600;color:var(--ink-700);
  transition:background-color .3s,color .3s}
.area-towns a:hover{background:rgba(200,162,82,.2);color:var(--gold-800)}

/* --- responsive --- */
@media (max-width:1240px){
  .hdr-tel{display:none}
  .nav a,.nav .nav-trigger{padding:.6rem .62rem;font-size:.76rem}
  .mega-col a{font-size:.775rem}
}
@media (max-width:920px){
  .dsub-towns{grid-template-columns:1fr}
  .fastfacts{grid-template-columns:1fr}
}
@media (max-width:560px){
  .area-block{padding:1.4rem 1.25rem}
  .sib-links a{font-size:.76rem;padding:.5rem .85rem}
}

/* map key marker for town dots, and inline links inside tick lists */
.map-key i.town{width:.62rem;height:.62rem;border-radius:50%;border:0;
  background:rgba(245,243,239,.7)}
.link-inline{color:var(--gold-700);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(138,107,45,.45)}
.link-inline:hover{color:var(--gold-800);text-decoration-color:var(--gold-700)}

/* --- header fit: six nav items plus the phone and CTA need more room than
       the original five did, so tighten the row and hand over to the drawer
       earlier than the old 920px breakpoint --- */
.hdr-in{gap:1.15rem}
.nav{gap:.1rem}
.nav a,.nav .nav-trigger{padding:.6rem .62rem;font-size:.775rem}
.nav a::after{left:.62rem;right:.62rem}
.hdr-cta{gap:.9rem}
@media (max-width:1320px){
  .hdr-tel{display:none}
}
@media (max-width:1080px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
}

/* -------------------------------------------------- 24. Coming Soon ---
   Overlay treatment for work that is drawn but not yet built. The label is
   CSS over the image rather than burned into the file, so the same asset
   can be reused unchanged once the project completes.
   -------------------------------------------------------------------- */
.fig.soon{position:relative}
.fig.soon::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(190deg,rgba(0,18,31,.46),rgba(0,18,31,.12) 42%,rgba(0,18,31,.5));
  transition:opacity .5s var(--ease)}
.fig.soon:hover::after{opacity:.45}
.soon-tag{
  position:absolute;top:1rem;left:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:100px;
  background:rgba(0,18,31,.82);backdrop-filter:blur(8px);
  border:1px solid rgba(200,162,82,.55);
  font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-300);
  white-space:nowrap}
.soon-tag::before{content:"";width:.42rem;height:.42rem;border-radius:50%;
  background:var(--gold-400);flex:none;
  box-shadow:0 0 0 0 rgba(200,162,82,.6);animation:soonPulse 2.8s var(--ease) infinite}
@keyframes soonPulse{
  0%{box-shadow:0 0 0 0 rgba(200,162,82,.55)}
  70%{box-shadow:0 0 0 .55rem rgba(200,162,82,0)}
  100%{box-shadow:0 0 0 0 rgba(200,162,82,0)}
}
@media (prefers-reduced-motion:reduce){
  .soon-tag::before{animation:none}
}
/* blueprints are line drawings, so show the whole sheet rather than cropping */
.fig.soon img{background:#fff}
@media (max-width:560px){
  .soon-tag{top:.6rem;left:.6rem;padding:.42rem .8rem;font-size:.56rem;letter-spacing:.18em}
}

/* line drawings: show the whole sheet, undarkened, caption below not over */
.gal .fig.soon-hero{grid-column:span 12;aspect-ratio:3/2}
.gal .fig.soon-doc{grid-column:span 6;aspect-ratio:auto;align-self:start;
  display:flex;flex-direction:column;background:#fff;border-color:var(--hairline-ink)}
.fig.soon-doc img{object-fit:contain;height:auto;width:100%}
.fig.soon-doc:hover img{transform:none}
.fig.soon-doc::after{background:none}
.fig.soon-doc figcaption{position:static;background:var(--navy-900);color:var(--bone-100);
  padding:.9rem 1.15rem;border-top:1px solid var(--hairline-soft)}
.s-bone .fig.soon-doc figcaption,.s-bone-alt .fig.soon-doc figcaption{color:var(--bone-100)}
.fig.soon-doc .soon-tag{background:rgba(0,18,31,.9)}
@media (max-width:920px){
  .gal .fig.soon-hero,.gal .fig.soon-doc{grid-column:span 12}
  .gal .fig.soon-hero{aspect-ratio:3/2}
}

/* the design board carries its own labels, so keep our caption clear of them */
.gal .fig.soon-hero{aspect-ratio:auto;display:flex;flex-direction:column;align-self:start}
.fig.soon-hero img{aspect-ratio:3/2;object-fit:cover}
.fig.soon figcaption{position:static;background:var(--navy-900);color:var(--bone-100);
  padding:.9rem 1.15rem;border-top:1px solid var(--hairline-soft)}
.fig.soon::after{inset:0 0 auto 0;aspect-ratio:3/2}
.fig.soon-doc::after{display:none}

/* -------------------------------------------------- 25. Brand lockup --
   Matches the stacked wordmark in the source logo: LEGACY over
   HOME BUILDERS INC., set beside the icon rather than under it.
   -------------------------------------------------------------------- */
.brand-text{gap:.28rem}
.brand-text{--lockup-name:1.44rem}
.brand-name{font-size:var(--lockup-name);font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;line-height:1}
.brand-suffix{font-size:.455rem;letter-spacing:.183em;line-height:1;
  white-space:nowrap}
.ftr-brand .brand-text{--lockup-name:1.6rem}
.ftr-brand .brand-name{font-size:var(--lockup-name)}
.ftr-brand .brand-suffix{font-size:.505rem;letter-spacing:.183em}
@media (max-width:1240px){
  .brand-text{--lockup-name:1.24rem}
  .brand-name{font-size:var(--lockup-name)}
  .brand-suffix{font-size:.392rem;letter-spacing:.183em}
}
@media (max-width:420px){
  .brand-text{--lockup-name:1.12rem}
  .brand-name{font-size:var(--lockup-name)}
  .brand-suffix{font-size:.354rem;letter-spacing:.183em}
  .brand-mark{width:2.4rem}
}

/* -------------------------------------------------- 26. Site credit --- */
.ftr-bot{align-items:center}
.hp-credit{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  color:rgba(245,243,239,.5);transition:color .3s var(--ease)}
.hp-credit:hover{color:rgba(245,243,239,.8)}
.hp-lead{font-size:var(--t-xs);letter-spacing:.04em}
.hp-mark{width:1.35rem;height:auto;flex:none;
  transition:transform .4s var(--ease-out)}
.hp-credit:hover .hp-mark{transform:translateX(2px)}
.hp-word{font-family:var(--sans);font-size:.92rem;font-weight:800;
  letter-spacing:-.03em;color:var(--bone-100)}
.hp-word span{font-weight:500;color:rgba(245,243,239,.66)}
.hp-url{font-size:var(--t-xs);letter-spacing:.04em;
  padding-left:.5rem;margin-left:.1rem;border-left:1px solid var(--hairline-soft)}
@media (max-width:640px){
  .hp-url{border-left:0;padding-left:0;width:100%}
}
/* the bottom bar's copyright should not inherit the narrow column measure */
.ftr-bot p{max-width:none}
.ftr-bot{gap:1rem 2rem}

/* -------------------------------------------------- 27. Header fixes --
   1. The skip link is a .btn, and .btn sets position:relative later in this
      file, which beat .skip's position:fixed. That left the link in normal
      flow taking ~57px of height above <main>, which read as an unexplained
      gap at the top of every page on both desktop and phone.
   2. Tidier, less bulky burger.
   3. One typeface in the mobile drawer, with hierarchy from size and weight
      rather than from switching between the serif and the sans.
   -------------------------------------------------------------------- */
.skip{position:fixed}

/* Optical alignment. Fraunces sets the L with noticeably more left side
   bearing than Archivo gives the H, so the subtitle starts fractionally left
   of the L unless it is nudged. --lockup-name is the LEGACY size and
   --lockup-nudge is that fraction of it, so the shift scales with the lockup
   at every breakpoint. Raise or lower the one number to taste. */
.brand-text{--lockup-nudge:.052}
.brand-suffix{padding-left:calc(var(--lockup-name) * var(--lockup-nudge))}

/* --- burger --- */
.burger{width:2.45rem;height:2.45rem;border-radius:8px;
  flex-direction:column;align-items:center;justify-content:center;
  border-color:rgba(200,162,82,.22);transition:border-color .3s var(--ease),
  background-color .3s var(--ease)}
.burger:hover,.burger[aria-expanded=true]{border-color:rgba(200,162,82,.5);
  background:rgba(200,162,82,.08)}
.burger span{width:1.02rem;height:1.5px;border-radius:1px}
.burger span+span{margin-top:4px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media (max-width:920px){
  .hdr-in{min-height:4.6rem}
  .hdr.is-stuck .hdr-in{min-height:4.2rem}
  .drawer{padding-top:5.2rem}
  .drawer::before{height:calc(4.6rem + env(safe-area-inset-top,0px))}
}

/* --- drawer typography: Archivo throughout --- */
.drawer a,.dsub>summary{
  font-family:var(--sans);font-variation-settings:normal;
  font-size:.95rem;font-weight:600;letter-spacing:.135em;text-transform:uppercase;
  line-height:1.3;padding-block:1.02rem;color:rgba(245,243,239,.9)}
.drawer a:hover,.dsub>summary:hover{color:var(--bone-50)}
.drawer a[aria-current=page]{color:var(--gold-300)}
.drawer a span,.dsub>summary span{font-family:var(--sans);font-size:.62rem;
  font-weight:600;letter-spacing:.16em;color:var(--gold-600)}
.dsub>summary .nav-chev{width:.78em;height:.78em;color:var(--gold-500);margin-left:.5rem;
  margin-right:auto}
.dsub-in{padding:.1rem 0 .9rem}
.dsub-all{font-size:.66rem!important;font-weight:700;letter-spacing:.2em;
  color:var(--gold-400)!important;padding-block:.62rem!important}
.dsub-head{font-size:.63rem!important;font-weight:700;letter-spacing:.2em;
  color:var(--gold-500)!important;padding:.95rem 0 .2rem!important}
.dsub-towns a{font-size:.83rem!important;font-weight:500;letter-spacing:.055em;
  text-transform:none;color:rgba(245,243,239,.72)!important;
  padding-block:.68rem!important;min-height:44px}

/* --- drawer call to action: was wrapping onto two lines at phone width --- */
.drawer-foot{margin-top:1.9rem;gap:.7rem}
.drawer-foot .btn{--bh:2.85rem;min-height:2.85rem;font-size:.715rem;
  letter-spacing:.12em;padding-block:0;padding-inline:1rem;
  white-space:nowrap;line-height:1;
  /* .drawer a sets space-between for the numbered menu rows; the buttons
     want their label centred instead */
  justify-content:center;gap:.6rem}
.drawer-foot .btn svg{width:.95rem;height:.95rem}