/* ==========================================================================
   M&W GroundWorks — design system
   Palette derived from the client's existing logo files; typography pairing
   (Barlow Condensed / Barlow) per UI/UX Pro Max typography.csv.
   ========================================================================== */

/* ---- fonts (self-hosted, no external requests) ---- */
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal}

/* ---- tokens ---- */
:root{
  --ink-950:#070A08; --ink-900:#0B0F0C; --ink-850:#101610; --ink-800:#161E17;
  --ink-700:#1F2A20; --ink-600:#2C3A2D; --ink-500:#41533F;
  --bone:#F2EDE1; --bone-dim:#CFC8B8; --bone-mute:#9A9382;
  --moss-900:#223013; --moss-800:#33461B; --moss-700:#456022; --moss-600:#5E7F2C;
  --moss-500:#7A9A3E; --moss-400:#9AB85F; --moss-300:#BDD48E;
  --amber-600:#C9862A; --amber-500:#E8A33D; --amber-400:#F2BC69;
  --rust:#A84E24;

  --font-display:'Barlow Condensed',ui-sans-serif,'Arial Narrow',system-ui,sans-serif;
  --font-body:'Barlow',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* 8pt spacing scale */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4rem; --s7:6rem; --s8:8rem;

  --maxw:1240px; --gut:clamp(1.25rem,4vw,3rem);
  --r-sm:4px; --r-md:8px; --r-lg:14px;
  --nav-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --line:1px solid rgba(242,237,225,.12);
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink-900);color:var(--bone);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-top:var(--nav-h);
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:.98;
  letter-spacing:-.005em;margin:0;text-transform:uppercase}
h1{font-size:clamp(3.1rem,8.5vw,7rem)}
h2{font-size:clamp(2.3rem,5.2vw,4rem)}
h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
h4{font-size:clamp(1.1rem,1.6vw,1.3rem)}
p{margin:0 0 var(--s2)}
ul{margin:0;padding:0}

/* ---- a11y ---- */
:focus-visible{outline:3px solid var(--amber-500);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--amber-500);
  color:var(--ink-900);padding:.75rem 1.25rem;font-weight:700;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.skip:focus{left:0}
/* Every dimension is !important on purpose. A utility that means "not visible"
   has to beat component styling — .quote input{width:100%} was silently making
   hidden inputs 1440px wide and 31px tall, which put them back in the layout. */
.vh{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1500px;margin-inline:auto;padding-inline:var(--gut)}
section{position:relative}
.pad{padding-block:clamp(3.5rem,8vw,7rem)}
.pad-sm{padding-block:clamp(2.5rem,5vw,4rem)}
.bg-850{background:var(--ink-850)}
.bg-800{background:var(--ink-800)}
.bg-bone{background:var(--bone);color:var(--ink-900)}
.bg-bone h1,.bg-bone h2,.bg-bone h3{color:var(--ink-900)}
.bg-moss{background:var(--moss-800)}

/* ---- eyebrow / rules ---- */
.eyebrow{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.24em;font-size:.82rem;color:var(--moss-400);
  display:flex;align-items:center;gap:.75rem;margin-bottom:var(--s2)}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--moss-500);flex:none}
.bg-bone .eyebrow{color:var(--moss-700)}
.bg-bone .eyebrow::before{background:var(--moss-700)}
.rule{height:1px;background:rgba(242,237,225,.12);border:0;margin:0}

.lede{font-size:clamp(1.06rem,1.6vw,1.24rem);color:var(--bone-dim);max-width:62ch}
.bg-bone .lede{color:var(--ink-500)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:1.06rem;line-height:1;padding:1.05rem 1.9rem;
  border:2px solid transparent;border-radius:var(--r-sm);text-decoration:none;
  cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),
  border-color .18s var(--ease),transform .18s var(--ease);min-height:52px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--amber-500);color:var(--ink-900);border-color:var(--amber-500)}
.btn-primary:hover{background:var(--amber-400);border-color:var(--amber-400)}
.btn-ghost{background:transparent;color:var(--bone);border-color:rgba(242,237,225,.35)}
.btn-ghost:hover{border-color:var(--bone);background:rgba(242,237,225,.07)}
.bg-bone .btn-ghost{color:var(--ink-900);border-color:rgba(11,15,12,.3)}
.bg-bone .btn-ghost:hover{border-color:var(--ink-900);background:rgba(11,15,12,.05)}
.btn-moss{background:var(--moss-500);color:var(--ink-900);border-color:var(--moss-500)}
.btn-moss:hover{background:var(--moss-400);border-color:var(--moss-400)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}

/* ---- nav ---- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;
  background:rgba(11,15,12,.92);backdrop-filter:blur(14px);
  border-bottom:var(--line);transition:background .3s var(--ease)}
.nav-in{max-width:1500px;margin-inline:auto;padding-inline:var(--gut);height:100%;
  display:flex;align-items:center;gap:var(--s3)}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex:none}
.nav-logo img{height:44px;width:auto}
.nav-links{display:flex;gap:.35rem;margin-left:auto;list-style:none;align-items:center}
.nav-links a{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.95rem;text-decoration:none;color:var(--bone-dim);
  padding:.6rem .8rem;border-radius:var(--r-sm);transition:color .16s,background .16s;
  display:block}
.nav-links a:hover{color:var(--bone);background:rgba(242,237,225,.07)}
.nav-links a[aria-current="page"]{color:var(--moss-400)}
.nav-cta{margin-left:.6rem}
.nav-cta .btn{padding:.72rem 1.15rem;font-size:.92rem;min-height:44px}
.nav-tel{font-family:var(--font-display);font-weight:700;font-size:1.16rem;
  letter-spacing:.02em;text-decoration:none;color:var(--bone);white-space:nowrap;
  display:flex;align-items:center;gap:.45rem}
.nav-tel:hover{color:var(--amber-400)}
.burger{display:none;margin-left:auto;background:none;border:2px solid rgba(242,237,225,.25);
  border-radius:var(--r-sm);width:48px;height:48px;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--bone);transition:.22s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1080px){
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;
    background:var(--ink-850);border-bottom:var(--line);padding:var(--s2) var(--gut) var(--s3);
    gap:0;align-items:stretch;transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:.22s var(--ease);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:1rem .25rem;font-size:1.15rem;border-bottom:var(--line)}
  .nav-cta{margin:var(--s2) 0 0}
  .nav-cta .btn{width:100%;padding:1rem;font-size:1.05rem}
  .burger{display:flex}
  .nav-tel{display:none}
}

/* ---- sticky mobile action bar ---- */
.actionbar{display:none}
@media (max-width:760px){
  .actionbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;
    inset:auto 0 0 0;z-index:99;border-top:2px solid var(--moss-700)}
  .actionbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;
    padding:1rem .5rem;font-family:var(--font-display);font-weight:700;
    text-transform:uppercase;letter-spacing:.09em;text-decoration:none;font-size:1.05rem;
    min-height:56px}
  .actionbar .ab-call{background:var(--amber-500);color:var(--ink-900)}
  .actionbar .ab-quote{background:var(--ink-800);color:var(--bone)}
  body{padding-bottom:58px}
}

/* ---- hero ---- */
.hero{position:relative;min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));
  display:flex;align-items:center;overflow:hidden;background:var(--ink-950)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero{--scrim-k:1}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  transition:background .9s linear;
  background:
    /* One wide, soft ellipse anchored on the copy — no straight edge to cut
       across the scene. The old version had a visible knee between 50% and
       70% that sliced through the mark. */
    radial-gradient(78% 128% at 6% 52%,
      rgba(7,10,8,calc(.86 * var(--scrim-k))) 0%,
      rgba(7,10,8,calc(.78 * var(--scrim-k))) 22%,
      rgba(7,10,8,calc(.60 * var(--scrim-k))) 40%,
      rgba(7,10,8,calc(.38 * var(--scrim-k))) 56%,
      rgba(7,10,8,calc(.18 * var(--scrim-k))) 72%,
      rgba(7,10,8,calc(.06 * var(--scrim-k))) 86%,
      transparent 100%),
    linear-gradient(180deg,rgba(7,10,8,calc(.34 * var(--scrim-k))) 0%,transparent 22%),
    radial-gradient(120% 62% at 50% 122%,rgba(7,10,8,calc(.34 * var(--scrim-k))) 0%,transparent 66%)}
@media (max-width:900px){
  /* The copy column is tall on a phone, so give the hero extra height and let
     the mark live in a clear band underneath it rather than behind the CTAs. */
  .hero{min-height:calc(100svh + 40px)}
  .hero::after{background:
    radial-gradient(150% 62% at 30% 18%,
      rgba(7,10,8,calc(.86 * var(--scrim-k))) 0%,
      rgba(7,10,8,calc(.70 * var(--scrim-k))) 38%,
      rgba(7,10,8,calc(.40 * var(--scrim-k))) 60%,
      rgba(7,10,8,calc(.12 * var(--scrim-k))) 80%,
      transparent 100%),
    linear-gradient(180deg,transparent 62%,rgba(7,10,8,calc(.40 * var(--scrim-k))) 100%)}
  .hero-in{padding-block:clamp(2.5rem,7vw,4rem) 0}
  .hero{align-items:flex-start}
}
.hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(3rem,9vw,6rem)}
.hero h1{max-width:15ch}
/* Local contrast lives on the glyphs now, so the scrim behind them can stay
   soft enough to leave the scene uncut. Layered shadows read as a halo, not
   as a drop shadow. */
.hero h1,.hero-sub,.hero-note,.hero .eyebrow,.hero-strap{
  text-shadow:
    0 1px 2px rgba(7,10,8,.55),
    0 2px 10px rgba(7,10,8,calc(.55 * var(--scrim-k))),
    0 4px 26px rgba(7,10,8,calc(.45 * var(--scrim-k)))}
.hero h1{text-shadow:
    0 2px 3px rgba(7,10,8,.6),
    0 3px 16px rgba(7,10,8,calc(.62 * var(--scrim-k))),
    0 6px 40px rgba(7,10,8,calc(.5 * var(--scrim-k)))}
.hero h1 .accent{color:var(--moss-300);display:block}
.hero-sub{margin-top:var(--s3);max-width:52ch;font-size:clamp(1.05rem,1.7vw,1.3rem);
  color:var(--bone-dim)}
.hero .btn-row{margin-top:var(--s4)}
.hero-strap{margin-top:var(--s2);display:flex;flex-wrap:wrap;align-items:center;
  gap:.55rem .95rem;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;font-size:clamp(.86rem,1.3vw,1.05rem);
  color:var(--bone)}
.hero-strap i{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--amber-500);font-style:normal;flex:none}
.hero-note{margin-top:var(--s3);font-size:.95rem;color:var(--bone-mute);
  display:flex;align-items:center;gap:.5rem}
.hero-scroll{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:4;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;color:var(--bone-mute);display:flex;flex-direction:column;
  align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;
  padding:.6rem 1rem;border-radius:var(--r-sm);transition:color .18s var(--ease)}
.hero-scroll:hover{color:var(--bone)}
.hero-scroll::after{content:"";width:1px;height:34px;background:linear-gradient(var(--moss-500),transparent);
  animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){.hero-scroll{display:none}}

/* ---- trust bar ---- */
.trust{background:var(--moss-800);border-block:1px solid rgba(242,237,225,.1)}
.trust ul{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;list-style:none;
  padding-block:1.1rem;justify-content:center}
.trust li{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);
  font-weight:600;text-transform:uppercase;letter-spacing:.13em;font-size:.92rem;
  color:var(--bone)}
.trust svg{width:17px;height:17px;flex:none;color:var(--moss-300)}

/* ---- section head ---- */
.shead{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:end;
  margin-bottom:var(--s5)}
.shead .lede{margin-top:var(--s2)}
@media (max-width:800px){.shead{grid-template-columns:1fr}}

/* ---- service grid ---- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:2px;
  background:rgba(242,237,225,.1);border:1px solid rgba(242,237,225,.1)}
.svc{background:var(--ink-850);padding:var(--s4) var(--s3) var(--s4);text-decoration:none;
  display:flex;flex-direction:column;gap:.85rem;position:relative;overflow:hidden;
  transition:background .22s var(--ease);min-height:250px}
.svc::before{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--moss-500);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.svc:hover{background:var(--ink-800)}
.svc:hover::before{transform:scaleX(1)}
.svc-ico{width:46px;height:46px;color:var(--moss-400);flex:none}
.svc:hover .svc-ico{color:var(--amber-500)}
.svc-ico svg{width:100%;height:100%}
.svc h3{font-size:1.42rem}
.svc p{font-size:.98rem;color:var(--bone-mute);margin:0;flex:1}
.svc .more{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;font-size:.82rem;color:var(--moss-400);display:flex;
  align-items:center;gap:.4rem}
.svc:hover .more{color:var(--amber-500)}
.svc:hover .more span{transform:translateX(4px)}
.svc .more span{transition:transform .22s var(--ease)}

/* ---- three-up story (clear/build/maintain) ---- */
.cbm{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(242,237,225,.12)}
@media (max-width:860px){.cbm{grid-template-columns:1fr}}
.cbm > div{background:var(--ink-900);padding:var(--s4) var(--s3)}
.cbm .n{font-family:var(--font-display);font-size:.8rem;letter-spacing:.24em;
  color:var(--moss-500);font-weight:600}
.cbm h3{font-size:clamp(2rem,3.6vw,2.8rem);margin:.5rem 0 .75rem}
.cbm p{color:var(--bone-mute);font-size:.99rem;margin:0}
.cbm ul{list-style:none;margin-top:var(--s2);display:flex;flex-wrap:wrap;gap:.4rem}
.cbm li{font-family:var(--font-display);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.1em;border:1px solid rgba(242,237,225,.2);padding:.28rem .6rem;
  border-radius:99px;color:var(--bone-dim)}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:rgba(242,237,225,.12)}
.stat{background:var(--ink-850);padding:var(--s4) var(--s3);text-align:center}
.stat b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:var(--moss-400)}
.stat span{display:block;margin-top:.5rem;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;color:var(--bone-mute)}

/* ---- process ---- */
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:var(--s3)}
.step{position:relative;padding-top:var(--s4)}
.step::before{counter-increment:st;content:"0" counter(st);position:absolute;top:0;left:0;
  font-family:var(--font-display);font-weight:700;font-size:2.6rem;line-height:1;
  color:var(--moss-700)}
.step h3{margin-bottom:.4rem;font-size:clamp(1.1rem,1.6vw,1.3rem)}
.step p{font-size:.96rem;color:var(--bone-mute);margin:0}
.bg-bone .step p{color:var(--ink-500)}
.bg-bone .step::before{color:var(--moss-500)}

/* ---- before/after slider ---- */
.ba{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-md);
  border:1px solid rgba(242,237,225,.14);background:var(--ink-800);
  touch-action:pan-y;user-select:none;cursor:ew-resize}
.ba .lyr{position:absolute;inset:0}
.ba .aft{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .bef{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba .lyr svg{width:100%;height:100%;display:block}
.ba .lyr img{width:100%;height:100%;display:block;object-fit:cover}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;
  background:var(--bone);z-index:3;pointer-events:none;transform:translateX(-50%)}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:var(--bone);box-shadow:0 2px 14px rgba(0,0,0,.55)}
.ba-handle::before{content:"";position:absolute;top:50%;left:50%;z-index:1;
  transform:translate(-50%,-50%);width:18px;height:10px;
  background:var(--ink-900);
  clip-path:polygon(0 50%,32% 0,32% 100%,100% 50%,68% 0,68% 100%)}
.ba input[type=range]{position:absolute;inset:auto 0 0 0;width:100%;opacity:0;
  height:100%;margin:0;cursor:ew-resize;z-index:4}
.ba input[type=range]:focus-visible ~ .ba-handle{outline:3px solid var(--amber-500)}
.ba-tag{position:absolute;top:.85rem;z-index:2;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;
  padding:.3rem .7rem;border-radius:var(--r-sm);background:rgba(7,10,8,.8);color:var(--bone)}
.ba-tag.l{left:.85rem}.ba-tag.r{right:.85rem;background:var(--moss-500);color:var(--ink-900)}

/* ---- gallery / placeholders ---- */
.ph{position:relative;background:
    repeating-linear-gradient(45deg,var(--ink-800) 0 12px,var(--ink-850) 12px 24px);
  border:1px dashed rgba(154,147,130,.4);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--s3);aspect-ratio:4/3;overflow:hidden}
.ph-in{position:relative;z-index:1}
.ph b{display:block;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.16em;font-size:.86rem;color:var(--moss-400)}
.ph span{display:block;margin-top:.35rem;font-size:.82rem;color:var(--bone-mute);
  max-width:30ch}
.ph svg{width:40px;height:40px;color:var(--ink-600);margin:0 auto .6rem}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s2)}
.gal .tall{grid-row:span 2;aspect-ratio:3/4}

/* ---- towns ---- */
.towns{display:flex;flex-wrap:wrap;gap:.55rem}
.town{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;font-size:.94rem;padding:.5rem .95rem;border-radius:99px;
  border:1px solid rgba(242,237,225,.2);color:var(--bone-dim);
  transition:.16s var(--ease)}
.town.key{border-color:var(--moss-500);color:var(--moss-300);background:rgba(122,154,62,.1)}
.bg-bone .town{border-color:rgba(11,15,12,.2);color:var(--ink-500)}
.bg-bone .town.key{border-color:var(--moss-700);color:var(--moss-800);background:rgba(122,154,62,.14)}

/* ---- seasonal calendar ---- */
.cal{border:1px solid rgba(242,237,225,.14);border-radius:var(--r-md);overflow:hidden}
.cal-row{display:grid;grid-template-columns:190px 1fr;border-bottom:1px solid rgba(242,237,225,.1)}
.cal-row:last-child{border-bottom:0}
.cal-row.head{background:var(--ink-800)}
.cal-lbl{padding:.8rem var(--s2);font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;
  border-right:1px solid rgba(242,237,225,.1);display:flex;align-items:center}
.cal-months{display:grid;grid-template-columns:repeat(12,1fr)}
.cal-months span{padding:.8rem 0;text-align:center;font-family:var(--font-display);
  font-size:.74rem;letter-spacing:.06em;color:var(--bone-mute);
  border-right:1px solid rgba(242,237,225,.06)}
.cal-months i{display:block;height:100%;min-height:40px;border-right:1px solid rgba(242,237,225,.06)}
/* Peak season stays on the green ramp. Amber is the action colour and the
   whole reason it works is that it is the only saturated warm thing on the
   page — the moment it fills a chart, the eye stops going straight to the
   estimate button. Light-vs-mid green separates the two states fine. */
.cal-months i.on{background:var(--moss-700)}
.cal-months i.peak{background:var(--moss-400)}
@media (max-width:760px){
  .cal-row{grid-template-columns:1fr}
  .cal-lbl{border-right:0;border-bottom:1px solid rgba(242,237,225,.1);padding:.6rem var(--s2)}
  .cal-months span{font-size:.6rem}
}
.cal-key{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:var(--s2);font-size:.88rem;
  color:var(--bone-mute)}
.cal-key b{display:inline-block;width:13px;height:13px;border-radius:3px;margin-right:.45rem;
  vertical-align:-1px}

/* ---- form ---- */
.quote{background:var(--ink-850);border:1px solid rgba(242,237,225,.14);
  border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,2.5rem)}
.bg-bone .quote{background:#fff;border-color:rgba(11,15,12,.14)}
.qstep{display:none}
.qstep.on{display:block;animation:fadein .3s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qbar{display:flex;gap:.4rem;margin-bottom:var(--s3)}
.qbar i{flex:1;height:4px;border-radius:99px;background:rgba(242,237,225,.16)}
.bg-bone .qbar i{background:rgba(11,15,12,.14)}
.qbar i.on{background:var(--moss-500)}
.qcount{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.18em;
  font-size:.78rem;color:var(--bone-mute);margin-bottom:.5rem}
.bg-bone .qcount{color:var(--ink-500)}
fieldset{border:0;padding:0;margin:0}
legend{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.35rem,2.4vw,1.7rem);margin-bottom:var(--s2);padding:0;line-height:1.1}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.6rem}
.tile{position:relative}
/* The input covers the whole tile and the label ignores pointer events, so the
   entire card is the hit target. A 1px input behind a label works only until
   something overlaps it, and then it fails silently. */
.tile input{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  margin:0;cursor:pointer;z-index:1}
.tile label{pointer-events:none;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
  padding:.95rem;border:2px solid rgba(242,237,225,.18);border-radius:var(--r-md);
  cursor:pointer;font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:.94rem;line-height:1.2;transition:.16s var(--ease);
  min-height:96px;justify-content:flex-end}
.bg-bone .tile label{border-color:rgba(11,15,12,.16)}
.tile label svg{width:26px;height:26px;color:var(--moss-400)}
.tile label:hover{border-color:var(--moss-500)}
.tile input:checked + label{border-color:var(--amber-500);background:rgba(232,163,61,.1)}
.tile input:checked + label svg{color:var(--amber-500)}
.tile input:focus-visible + label{outline:3px solid var(--amber-500);outline-offset:2px}
.field{margin-bottom:var(--s2)}
.field label{display:block;font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;margin-bottom:.4rem;
  color:var(--bone-dim)}
.bg-bone .field label{color:var(--ink-500)}
.field .hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--bone-mute);
  font-family:var(--font-body);font-size:.85rem}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:.85rem .95rem;background:var(--ink-900);color:var(--bone);
  border:2px solid rgba(242,237,225,.18);border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:1rem;transition:border-color .16s}
.bg-bone input,.bg-bone select,.bg-bone textarea{background:#fff;color:var(--ink-900);
  border-color:rgba(11,15,12,.18)}
input:hover,select:hover,textarea:hover{border-color:rgba(242,237,225,.34)}
input:focus,select:focus,textarea:focus{border-color:var(--moss-500);outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--amber-500);outline-offset:1px}
textarea{min-height:110px;resize:vertical}
.qnav{display:flex;gap:.7rem;margin-top:var(--s3);flex-wrap:wrap}
.qnav .btn{flex:1;min-width:130px}
.err{color:var(--amber-400);font-size:.9rem;margin-top:.4rem;display:none}
.err.on{display:block}
.qdone{text-align:center;padding:var(--s4) var(--s2)}
.qdone svg{width:64px;height:64px;color:var(--moss-400);margin:0 auto var(--s2)}

/* ---- FAQ ---- */
.faq details{border-bottom:1px solid rgba(242,237,225,.14)}
.bg-bone .faq details{border-color:rgba(11,15,12,.14)}
.faq summary{cursor:pointer;padding:1.25rem 2.5rem 1.25rem 0;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,1.9vw,1.35rem);
  text-transform:uppercase;letter-spacing:.02em;list-style:none;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:1.65rem;width:14px;height:14px;
  border-right:2px solid var(--moss-500);border-bottom:2px solid var(--moss-500);
  transform:rotate(45deg);transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.9rem}
.faq p{padding-bottom:1.25rem;color:var(--bone-mute);max-width:72ch;margin:0}
.bg-bone .faq p{color:var(--ink-500)}

/* ---- footer ---- */
.foot{background:var(--ink-950);border-top:1px solid rgba(242,237,225,.12);
  padding-block:var(--s6) var(--s3)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--s4)}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr}}
.foot h3{font-size:.9rem;letter-spacing:.2em;color:var(--moss-400);margin-bottom:var(--s2)}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.foot a{color:var(--bone-dim);text-decoration:none;font-size:.98rem}
.foot a:hover{color:var(--bone)}
.foot-logo{height:60px;width:auto;margin-bottom:var(--s2)}
.foot-tel{font-family:var(--font-display);font-weight:700;font-size:1.9rem;
  color:var(--bone);text-decoration:none;display:block;line-height:1.1}
.foot-tel:hover{color:var(--amber-400)}
.foot-bot{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgba(242,237,225,.1);
  display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;
  font-size:.86rem;color:var(--bone-mute)}

/* ---- notice (client to-do) ---- */
.notice{border:1px dashed var(--amber-600);background:rgba(232,163,61,.07);
  border-radius:var(--r-md);padding:var(--s2) var(--s3);display:flex;gap:.85rem;
  align-items:flex-start;font-size:.94rem;color:var(--bone-dim)}
.notice svg{width:20px;height:20px;color:var(--amber-500);flex:none;margin-top:3px}
.notice b{color:var(--amber-400);font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.1em;font-size:.86rem;display:block;margin-bottom:.2rem}

/* ---- logo showcase page ---- */
.logo-card{border:1px solid rgba(242,237,225,.14);border-radius:var(--r-md);overflow:hidden;
  background:var(--ink-850)}
.logo-view{padding:var(--s4);display:flex;align-items:center;justify-content:center;
  min-height:300px;background:var(--ink-950)}
.logo-view.on-bone{background:var(--bone)}
.logo-view img{max-height:290px;width:auto}
.logo-meta{padding:var(--s3);border-top:1px solid rgba(242,237,225,.14)}
.logo-meta h3{margin-bottom:.5rem}
.logo-meta p{color:var(--bone-mute);font-size:.96rem;margin-bottom:var(--s2)}
.logo-meta .tags{display:flex;flex-wrap:wrap;gap:.4rem}
.logo-meta .tags span{font-family:var(--font-display);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.11em;border:1px solid rgba(242,237,225,.2);padding:.24rem .6rem;
  border-radius:99px;color:var(--bone-dim)}
.scaletest{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3);background:var(--ink-950);border-top:1px solid rgba(242,237,225,.14)}
.scaletest figure{margin:0;text-align:center}
.scaletest figcaption{font-family:var(--font-display);font-size:.7rem;letter-spacing:.14em;
  color:var(--bone-mute);margin-top:.5rem;text-transform:uppercase}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s2)}
.sw{border-radius:var(--r-md);overflow:hidden;border:1px solid rgba(242,237,225,.14)}
.sw .chip{height:82px}
.sw .info{padding:.7rem .8rem;background:var(--ink-850);font-size:.82rem}
.sw .info b{display:block;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.1em;font-size:.8rem}
.sw .info code{color:var(--bone-mute);font-size:.78rem}

/* ---- reveal ---- */
[data-rv]{opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
[data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- utility ---- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:900px){.grid-2{grid-template-columns:1fr;gap:var(--s4)}}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--s3)}
.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}
.tc{text-align:center}
.mx{margin-inline:auto}
.chk{list-style:none;display:grid;gap:.7rem}
.chk li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem}
.chk svg{width:19px;height:19px;color:var(--moss-400);flex:none;margin-top:5px}
.bg-bone .chk svg{color:var(--moss-700)}


/* ---- specificity guards -------------------------------------------------
   .nav-links a and .foot a are (0,1,1) and appear later in the cascade than
   the .btn-* rules (0,1,0), so they were winning and repainting button text.
   These same-specificity, later-in-file rules restore the intended colours. */
.nav-links a.btn-primary,.foot a.btn-primary,a.btn-primary{color:var(--ink-900)}
.nav-links a.btn-moss,.foot a.btn-moss,a.btn-moss{color:var(--ink-900)}
.nav-links a.btn-ghost,.foot a.btn-ghost,a.btn-ghost{color:var(--bone)}
.bg-bone a.btn-ghost{color:var(--ink-900)}
.foot a.btn:hover,.nav-links a.btn:hover{color:var(--ink-900)}
.foot a.btn-ghost:hover{color:var(--bone)}


/* ---- hero preset switcher (preview only — delete with the markup) ---- */
.preset-switch{position:absolute;right:var(--gut);bottom:1.4rem;z-index:5;
  display:flex;align-items:center;gap:.4rem;background:rgba(7,10,8,.72);
  backdrop-filter:blur(10px);border:1px solid rgba(242,237,225,.2);
  border-radius:99px;padding:.4rem .5rem .4rem .95rem}
.preset-switch span{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.16em;font-size:.68rem;color:var(--bone-mute);margin-right:.3rem}
.preset-switch button{font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;font-size:.76rem;
  background:transparent;border:1px solid transparent;color:var(--bone-dim);
  padding:.42rem .7rem;border-radius:99px;cursor:pointer;min-height:32px}
.preset-switch button:hover{color:var(--bone);border-color:rgba(242,237,225,.28)}
.preset-switch button[aria-pressed="true"]{background:var(--amber-500);
  color:var(--ink-900);border-color:var(--amber-500)}
.preset-switch input[type=range]{width:150px;accent-color:var(--amber-500);
  height:22px;cursor:pointer}
.preset-switch .tval{font-family:var(--font-display);font-weight:700;
  font-size:.8rem;color:var(--bone);min-width:8.5rem;text-align:right;
  letter-spacing:.04em}
@media (max-width:760px){
  .preset-switch{right:auto;left:var(--gut);bottom:4.6rem;padding:.35rem .4rem .35rem .75rem}
  .preset-switch span{display:none}
  .preset-switch button{font-size:.7rem;padding:.4rem .6rem}
}


/* ---- phone hero: tighten the copy so the mark still lands on screen ---- */
@media (max-width:620px){
  .hero h1{font-size:clamp(2.5rem,10.5vw,3.3rem);max-width:13ch}
  .hero-strap{margin-top:.7rem;font-size:.8rem;letter-spacing:.16em;gap:.4rem .7rem}
  .hero-sub{margin-top:.9rem;font-size:1rem;line-height:1.5;max-width:36ch}
  .hero .btn-row{margin-top:1.15rem;gap:.6rem}
  .hero .btn{padding:.95rem 1.4rem;min-height:50px;font-size:1rem}
  .hero-note{margin-top:.9rem;font-size:.88rem}
  .hero-in{padding-block:1.6rem 0}
}