:root{
  --ink:#101C17;
  --green:#1B3A2F;
  --green-deep:#132A22;
  --brass:#B08D57;        /* structural: rules, borders, drawing lines */
  --brass-lt:#D9B87C;     /* text and UI on dark grounds, 6.6:1 on green */
  --brass-lo:#6E5530;     /* text on light grounds, 6.2:1 on paper */
  --dim:#A3ADA6;          /* quiet text on dark grounds, 5.7:1 */
  --plaster:#E8E6DE;
  --paper:#F3F1EA;
  --putty:#C4BFAF;
  --stone:#7C776B;

  --display:"EB Garamond",Garamond,"Adobe Garamond Pro",Georgia,serif;
  --body:"Karla",system-ui,-apple-system,sans-serif;
  --label:"Karla",system-ui,-apple-system,sans-serif;
  --figure:"EB Garamond",Garamond,Georgia,serif;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --measure:64rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--plaster);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.55vw + .9rem,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--display);
  font-weight:500;
  line-height:1.1;
  letter-spacing:0;
  margin:0;
  text-wrap:balance;
  font-feature-settings:"liga" 1,"kern" 1;
}
p{margin:0 0 1.1em}
a{color:inherit}
img,svg{max-width:100%}

.eyebrow{
  font-family:var(--label);
  font-weight:600;
  font-size:.73rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--brass-lo);
  margin:0 0 1.4rem;
  display:block;
}
.on-dark .eyebrow{color:var(--brass-lt)}

.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--pad)}
.wrap--wide{max-width:78rem}

/* ---- meeting rail divider: the join where two sashes overlap ---- */
.rail{border:0;height:0;border-top:3px solid var(--brass);box-shadow:0 4px 0 -3px var(--brass);margin:0;opacity:.55}

/* ---------------- header ---------------- */
.site-head{background:var(--green);color:var(--paper);position:relative;z-index:5}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.35rem}
.brand{font-family:var(--display);font-size:clamp(1.6rem,3vw,1.85rem);font-weight:500;letter-spacing:.02em;text-decoration:none;line-height:1.02;white-space:nowrap}
.brand small{display:block;font-family:var(--label);font-weight:600;font-size:clamp(.58rem,1.3vw,.65rem);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt);margin-top:.42rem;white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:1.9rem;font-size:.9rem}
.site-nav a{text-decoration:none;opacity:.85;padding-block:.3rem;border-bottom:1px solid transparent}
.site-nav a:hover,.site-nav a:focus-visible{opacity:1;border-bottom-color:var(--brass)}
.tel{font-family:var(--label);font-weight:500;font-size:.9rem;letter-spacing:.02em;color:var(--brass-lt);white-space:nowrap;text-decoration:none;font-variant-numeric:tabular-nums}
@media(max-width:860px){.site-nav{display:none}}

/* ---------------- hero ---------------- */
.hero{background:var(--green);color:var(--paper);padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__fig{margin:0}
.hero h1{font-size:clamp(3rem,7.2vw,5.4rem);font-weight:400;line-height:1.02;letter-spacing:-.012em}
.hero h1 em{font-style:italic;font-weight:400;display:block;color:var(--brass-lt)}
.hero__lede{font-size:clamp(1.05rem,.5vw + .95rem,1.25rem);color:#D8DED9;max-width:36ch;margin-top:1.6rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero__note{font-family:var(--label);font-weight:500;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-top:1.5rem}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__fig{max-width:360px;margin:2.6rem auto 0}
  .hero__lede{max-width:none}
}

.btn{
  display:inline-block;font-family:var(--body);font-weight:600;font-size:.95rem;
  padding:.9rem 1.6rem;text-decoration:none;border:1px solid var(--brass);
  transition:background .18s ease,color .18s ease;cursor:pointer;
}
.btn--solid{background:var(--brass-lt);color:var(--green-deep)}
.btn--solid:hover,.btn--solid:focus-visible{background:#EBCD97}
.btn--ghost{color:var(--paper);border-color:var(--brass-lt)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:rgba(217,184,124,.2)}

/* ---------------- the drawing ---------------- */
.sash-dwg{display:block;width:100%;height:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.sash-dwg .frame{fill:none;stroke:var(--brass-lt);stroke-width:1.6}
.sash-dwg .thin{fill:none;stroke:var(--brass-lt);stroke-width:.9;opacity:.85}
.sash-dwg .glass{fill:rgba(232,230,222,.06);stroke:var(--brass-lt);stroke-width:.8;opacity:.8}
.sash-dwg .lead{stroke:var(--brass-lt);stroke-width:.7;opacity:.65;fill:none}
.sash-dwg .lbl{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.11em;fill:var(--brass-lt);text-transform:uppercase}
.sash-dwg .dim{stroke:var(--dim);stroke-width:.6;fill:none;opacity:.7}

/* interactive annotations */
.sash-dwg .anno{cursor:pointer}
.sash-dwg .anno .hit{fill:transparent;stroke:none}
.sash-dwg .anno:hover .lbl,.sash-dwg .anno:focus-visible .lbl{fill:#F2E3C4}
.sash-dwg .anno:hover .lead,.sash-dwg .anno:focus-visible .lead{opacity:1}
.sash-dwg .anno:focus{outline:none}
.sash-dwg .anno:focus-visible .hit{stroke:var(--brass-lt);stroke-width:1;stroke-dasharray:3 3}
.sash-dwg .anno.is-on .lbl{fill:#0B1A15}
.sash-dwg .anno.is-on .chip{fill:var(--brass-lt)}
.sash-dwg .anno.is-on .lead{opacity:1}
.sash-dwg .chip{fill:transparent;transition:fill .2s ease}

/* the sash itself opens */
.sash-dwg.ready #lowerSash{animation:none;transition:transform .6s cubic-bezier(.33,.85,.3,1)}
.sash-dwg.ready #upperSash{transition:transform .6s cubic-bezier(.33,.85,.3,1) .08s}
.sash-dwg.ready.is-open #lowerSash{transform:translateY(-186px)}
.sash-dwg.ready.is-open #upperSash{transform:translateY(64px)}

/* double-hung: top drops, bottom rises */
.sash-dwg.ready #dualUpper,.sash-dwg.ready #dualLower{transition:transform .65s cubic-bezier(.33,.85,.3,1)}
.sash-dwg.ready.is-open #dualUpper{transform:translateY(126px)}
.sash-dwg.ready.is-open #dualLower{transform:translateY(-126px)}

/* light-ground variant for the paper sections */
.sash-dwg--light .frame{stroke:var(--green);stroke-width:1.5}
.sash-dwg--light .thin{stroke:var(--green);opacity:.55}
.sash-dwg--light .glass{fill:rgba(27,58,47,.05);stroke:var(--green);opacity:.45;stroke-width:.7}
.sash-dwg--light .lead{stroke:var(--brass-lo);opacity:.55}
.sash-dwg--light .lbl{fill:var(--brass-lo)}
.sash-dwg--light .anno:hover .lbl,.sash-dwg--light .anno:focus-visible .lbl{fill:var(--green)}
.sash-dwg--light .anno:focus-visible .hit{stroke:var(--green)}
.sash-dwg--light .anno.is-on .lbl{fill:var(--paper)}
.sash-dwg--light .anno.is-on .chip{fill:var(--green)}
.sash-dwg--light .anno{opacity:1;animation:none}

.dwg--light .dwg-hint{color:#6E766F}
.dwg--light .dwg-caption{border-color:var(--putty);background:rgba(27,58,47,.04)}
.dwg--light .dwg-caption h4{color:var(--brass-lo)}
.dwg--light .dwg-caption p{color:#44504A}

/* doors: leaves swing back, a figure steps through */
.sash-dwg.ready #doorLeft,.sash-dwg.ready #doorRight{
  transition:transform .7s cubic-bezier(.33,.85,.3,1)}
.sash-dwg #doorLeft{transform-box:view-box;transform-origin:104px 330px}
.sash-dwg #doorRight{transform-box:view-box;transform-origin:456px 330px}
.sash-dwg.ready.is-open #doorLeft{transform:scaleX(.22)}
.sash-dwg.ready.is-open #doorRight{transform:scaleX(.22)}

.windows-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.doors-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);margin-top:3rem;align-items:start}
@media(max-width:900px){.doors-grid{grid-template-columns:1fr;gap:3.5rem}}

/* french doors: both leaves swing clear */
.sash-dwg.ready #fdLeft,.sash-dwg.ready #fdRight{transition:transform .7s cubic-bezier(.33,.85,.3,1)}
.sash-dwg #fdLeft{transform-box:view-box;transform-origin:106px 300px}
.sash-dwg #fdRight{transform-box:view-box;transform-origin:458px 300px}
.sash-dwg.ready.is-open #fdLeft{transform:scaleX(.2)}
.sash-dwg.ready.is-open #fdRight{transform:scaleX(.2)}

/* single leaf doors: swing clear of the opening */
.sash-dwg.ready #bdLeaf,.sash-dwg.ready #fdrLeaf{transition:transform .7s cubic-bezier(.33,.85,.3,1)}
.sash-dwg #bdLeaf{transform-box:view-box;transform-origin:166px 300px}
.sash-dwg #fdrLeaf{transform-box:view-box;transform-origin:414px 300px}
.sash-dwg.ready.is-open #bdLeaf{transform:scaleX(.18)}
.sash-dwg.ready.is-open #fdrLeaf{transform:scaleX(.18)}

/* bi-fold: the leaves concertina to one side */
.sash-dwg.ready #bfA,.sash-dwg.ready #bfB,.sash-dwg.ready #bfC{transition:transform .8s cubic-bezier(.33,.85,.3,1)}
.sash-dwg #bfA,.sash-dwg #bfB,.sash-dwg #bfC{transform-box:view-box;transform-origin:82px 300px}
.sash-dwg.ready.is-open #bfA,.sash-dwg.ready.is-open #bfB,.sash-dwg.ready.is-open #bfC{transform:scaleX(.14)}
@media(max-width:980px){.windows-grid{grid-template-columns:1fr}.dwg--light{max-width:400px;margin-inline:auto}}

.dwg-hint{
  font-family:var(--label);font-weight:500;font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);margin:.4rem 0 0;text-align:center;
  transition:opacity .3s ease;
}
.dwg-caption{
  margin:1rem 0 0;padding:1rem 1.1rem;min-height:6.4rem;
  border:1px solid rgba(217,184,124,.35);background:rgba(217,184,124,.06);
}
.dwg-caption h4{
  margin:0 0 .45rem;font-family:var(--label);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt);
}
.dwg-caption p{margin:0;font-size:.92rem;line-height:1.6;color:#D8DED9}
@media(max-width:900px){.dwg-caption{min-height:0}}

/* ---------------- generic section ---------------- */
.band{padding-block:clamp(3.5rem,8vw,6.5rem)}
.band--paper{background:var(--paper)}
.band--plaster{background:var(--plaster)}
.band--green{background:var(--green);color:var(--paper)}
.band--ink{background:var(--ink);color:var(--paper)}
.band h2{font-size:clamp(2.15rem,4.1vw,3.35rem);max-width:22ch;line-height:1.06;letter-spacing:-.008em}
.band__lede{max-width:52ch;margin-top:1.3rem;color:var(--stone)}
.band--green .band__lede,.band--ink .band__lede{color:#B9C2BC}

/* ---------------- specification cards ---------------- */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:3rem}
.spec__card{background:var(--paper);padding:1.9rem 1.5rem 2.1rem;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--putty)}
.spec__tag{font-family:var(--label);font-weight:600;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lo);margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--putty)}
.spec__card h3{font-size:1.45rem;margin-bottom:.7rem}
.spec__card p{font-size:.94rem;color:#4A5450;flex:1;margin-bottom:0}
@media(max-width:940px){.spec{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.spec{grid-template-columns:1fr}}

/* ---------------- pricing ---------------- */
.price-table{width:100%;border-collapse:collapse;margin-top:3rem;font-size:.95rem}
.price-table th{
  font-family:var(--label);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass-lo);font-weight:600;text-align:left;padding:0 0 .9rem;border-bottom:1px solid var(--putty);
}
.price-table th:last-child,.price-table td:last-child{text-align:right}
.price-table td{padding:1.15rem 0;border-bottom:1px solid var(--putty);vertical-align:top}
.price-table .grade{font-family:var(--display);font-size:1.35rem;font-weight:500;display:block;margin-bottom:.2rem;line-height:1.2}

/* small elevations, same drawing language as the large ones */
.pt-row{display:flex;gap:1.15rem;align-items:flex-start}
.pt-thumb{flex:0 0 auto;width:64px;height:auto;display:block;margin-top:.15rem}
.pt-thumb .f{fill:none;stroke:var(--green);stroke-width:1.7;stroke-linejoin:miter}
.pt-thumb .t{fill:none;stroke:var(--green);stroke-width:1;opacity:.5}
.pt-thumb .g{fill:rgba(27,58,47,.05);stroke:var(--green);stroke-width:.7;opacity:.45}
.pt-thumb .a{fill:none;stroke:var(--brass-lo);stroke-width:1.8}
.pt-thumb .ad{fill:var(--brass-lo)}
@media(max-width:640px){.pt-row{gap:.9rem}.pt-thumb{width:54px}}
.price-table .desc{font-size:.88rem;color:#4A5450;max-width:46ch;display:block}
.price-table .figure-note{
  display:block;font-family:var(--label);font-weight:500;font-size:.72rem;
  letter-spacing:.02em;color:#6E766F;margin-top:.25rem;white-space:nowrap;
}
.price-table .figure{font-family:var(--figure);font-size:1.4rem;font-weight:500;color:var(--green);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.005em}
@media(max-width:640px){
  .price-table thead{display:none}
  .price-table tr{display:block;border-bottom:1px solid var(--putty);padding:1.2rem 0}
  .price-table td{display:block;border:0;padding:0}
  .price-table td:last-child{text-align:left;margin-top:.7rem}
}
.note-line{font-family:var(--label);font-size:.85rem;letter-spacing:0;color:#5C6560;margin-top:1.4rem;line-height:1.8}

/* ---------------- two-column split ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.reasons{list-style:none;padding:0;margin:2rem 0 0}
.reasons li{position:relative;padding-left:2.2rem;margin-bottom:1.4rem;color:#C8D0CA}
.reasons li::before{content:"";position:absolute;left:0;top:.85rem;width:1.1rem;height:1px;background:var(--brass-lt)}
.reasons strong{color:var(--paper);font-weight:600}
@media(max-width:880px){.split{grid-template-columns:1fr}}

.quote{border-left:3px solid var(--brass-lt);padding-left:1.6rem;margin:2.5rem 0 0;font-family:var(--display);font-style:italic;font-weight:400;font-size:1.65rem;line-height:1.32;letter-spacing:.002em}

/* ---------------- sticky scroll nav ---------------- */
.subnav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(11,26,21,.985);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(217,184,124,.45);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.7);
  transform:translateY(-101%);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.subnav.is-visible{transform:translateY(0)}
.subnav__in{
  max-width:78rem;margin:0 auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:1.1rem;min-height:3.75rem;
}
.subnav__brand{
  font-family:var(--display);font-weight:500;
  font-size:1.22rem;letter-spacing:.02em;color:var(--paper);text-decoration:none;white-space:nowrap;flex:0 0 auto;
}
.subnav__links{
  display:flex;align-items:center;gap:.3rem;flex:1 1 auto;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;padding-block:.4rem;
}
.subnav__links::-webkit-scrollbar{display:none}
.subnav__links a{
  font-family:var(--label);font-weight:600;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  color:#E1E7E2;text-decoration:none;padding:.5rem .85rem;white-space:nowrap;
  border:1px solid transparent;scroll-snap-align:start;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.subnav__links a:hover{color:#FFF;background:rgba(217,184,124,.14);border-color:rgba(217,184,124,.5)}
.subnav__links a.is-active{color:#0B1A15;background:var(--brass-lt);border-color:var(--brass-lt);font-weight:700}
.subnav__cta{
  flex:0 0 auto;font-family:var(--body);font-weight:600;font-size:.84rem;
  padding:.55rem 1.1rem;background:var(--brass-lt);color:var(--green-deep);
  text-decoration:none;border:1px solid var(--brass);white-space:nowrap;
}
.subnav__cta:hover{background:#EBCD97}
.subnav__tel{flex:0 0 auto;font-family:var(--label);font-weight:500;font-size:.88rem;color:var(--brass-lt);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:1080px){.subnav__tel{display:none}}
@media(max-width:720px){.subnav__brand{display:none}}
@media(max-width:520px){.subnav__cta{display:none}}

/* keep anchored sections clear of the fixed bar */
#windows,#prices,#doors,#projects,#estimate,#why,#process,#areas,#survey{scroll-margin-top:4rem}

@media(prefers-reduced-motion:reduce){.subnav{transition:none}}

/* ---------------- quote builder ---------------- */
.qb{margin-top:3rem;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
@media(max-width:940px){.qb{grid-template-columns:1fr}}

.qb-panel{background:var(--paper);border:1px solid var(--putty);padding:clamp(1.4rem,2.5vw,2rem)}
.qb-panel h3{font-size:1.32rem;margin-bottom:1.2rem}

.qb-guide{background:var(--green);color:#DDE3DE;padding:clamp(1.4rem,2.5vw,2rem);margin-top:3rem}
.qb-guide h3{color:var(--paper);font-size:1.38rem;margin-bottom:1.2rem}
.qb-guide ol{margin:0;padding-left:1.3rem}
.qb-guide li{margin-bottom:.8rem;font-size:.94rem;line-height:1.7}
.qb-guide li::marker{color:var(--brass-lt);font-family:var(--label);font-weight:700;font-size:.9rem}
.qb-guide strong{color:var(--paper)}
.qb-guide .note-line{color:var(--dim);margin-top:1.2rem}

.qb-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.9rem}
.qb-row--three{grid-template-columns:1fr 1fr .8fr}
@media(max-width:560px){.qb-row,.qb-row--three{grid-template-columns:1fr}}

.qb-field label{display:block;font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-lo);margin-bottom:.45rem}
.qb-field input,.qb-field select{
  width:100%;background:#FBFAF6;border:1px solid var(--putty);color:var(--ink);
  font-family:var(--body);font-size:.95rem;padding:.7rem .8rem;border-radius:0;
}
.qb-field input:focus,.qb-field select:focus{outline:2px solid var(--brass);outline-offset:1px}

.qb-opts{border-top:1px solid var(--putty);margin-top:1.2rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:.7rem 1.4rem}
.qb-check{display:flex;align-items:center;gap:.5rem;font-size:.88rem;cursor:pointer}
.qb-check input{width:1rem;height:1rem;accent-color:var(--green);margin:0}

.qb-add{margin-top:1.4rem}
.qb-btn{
  font-family:var(--body);font-weight:600;font-size:.9rem;padding:.75rem 1.3rem;
  border:1px solid var(--green);background:var(--green);color:var(--paper);cursor:pointer;
  transition:background .18s ease;
}
.qb-btn:hover{background:#25503F}
.qb-btn--quiet{background:transparent;color:var(--green);border-color:var(--putty)}
.qb-btn--quiet:hover{background:rgba(27,58,47,.06)}

.qb-list{list-style:none;padding:0;margin:0 0 1.4rem}
.qb-list li{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid var(--putty);font-size:.9rem}
.qb-list .qb-desc{color:#4A5450}
.qb-list .qb-desc b{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem}
.qb-list .qb-sum{font-family:var(--figure);font-size:1.15rem;font-weight:500;white-space:nowrap;color:var(--green);font-variant-numeric:tabular-nums}
.qb-del{background:none;border:0;color:#6E766F;font-family:var(--label);font-weight:600;font-size:.72rem;letter-spacing:.08em;cursor:pointer;padding:.25rem 0 0;text-transform:uppercase}
.qb-del:hover{color:#8B3A2F}

.qb-empty{color:var(--stone);font-size:.9rem;padding:1.5rem 0;border-bottom:1px solid var(--putty)}

.qb-totals{font-family:var(--label);font-size:.92rem;font-variant-numeric:tabular-nums}
.qb-totals div{display:flex;justify-content:space-between;padding:.45rem 0;color:#4A5450}
.qb-totals .qb-grand{border-top:1px solid var(--putty);margin-top:.6rem;padding-top:1rem;color:var(--ink)}
.qb-grand span:last-child{font-family:var(--display);font-size:1.55rem;font-weight:500;color:var(--green)}
.qb-range{font-family:var(--display);font-size:1.7rem;font-weight:500;line-height:1.25;color:var(--green);margin:.4rem 0 0}

.qb-access{font-family:var(--label);font-size:.82rem;line-height:1.6;color:#5C6560;margin:.7rem 0 0;padding-left:.9rem;border-left:2px solid var(--putty)}
.qb-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.qb-foot{font-family:var(--label);font-size:.8rem;letter-spacing:0;line-height:1.8;color:#5C6560;margin-top:1.4rem}
.qb-attached{
  border:1px solid rgba(217,184,124,.5);background:rgba(217,184,124,.07);
  padding:1rem 1.1rem;margin-bottom:1.5rem;
}
.qb-attached p{margin:0;font-size:.88rem;color:#DDE3DE;line-height:1.6}
.qb-attached strong{color:var(--brass-lt);display:block;font-family:var(--label);font-weight:600;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.45rem}
.qb-attached button{
  background:none;border:0;padding:.6rem 0 0;cursor:pointer;
  font-family:var(--label);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:underline;text-underline-offset:3px;
}
.qb-attached button:hover{color:var(--paper)}

.qb-saved{
  font-family:var(--label);font-weight:600;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green);border:1px solid var(--putty);background:rgba(27,58,47,.05);
  padding:.5rem .8rem;margin:1.2rem 0 0;display:none;
}
.qb-saved.is-on{display:block}

.qb-sticky{position:sticky;top:1.5rem}
@media(max-width:940px){.qb-sticky{position:static}}

/* ---------------- projects ---------------- */
.proj-item{margin-top:3.4rem}
.proj-item h3{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 .8rem}
.proj-item__intro{max-width:58ch;color:var(--stone);margin-bottom:2rem}

.proj__spec{list-style:none;padding:0;margin:1.4rem 0 0}
.proj__spec li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;font-size:.94rem;color:#44504A}
.proj__spec li::before{content:"";position:absolute;left:0;top:.72rem;width:.9rem;height:1px;background:var(--brass-lo)}
.proj__meta{border-top:1px solid var(--putty);margin-top:1.5rem;padding-top:1.1rem}
.proj__meta dt{font-family:var(--label);font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lo)}
.proj__meta dd{margin:.15rem 0 .9rem;font-size:.95rem}
.proj__more{font-family:var(--label);font-size:.85rem;color:#5C6560;margin-top:2.4rem;padding-left:1rem;border-left:2px solid var(--putty)}

/* ---------------- process ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3rem}
.step{border-top:1px solid var(--putty);padding-top:1.3rem}
.step__n{font-family:var(--label);font-weight:600;font-size:.72rem;letter-spacing:.15em;color:var(--brass-lo);display:block;margin-bottom:.9rem}
.step h3{font-size:1.32rem;margin-bottom:.55rem}
.step p{font-size:.92rem;color:#4A5450;margin:0}
@media(max-width:880px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------------- areas ---------------- */
.area-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,3vw,3rem);margin-top:2.8rem}
@media(max-width:880px){.area-groups{grid-template-columns:1fr;gap:2.2rem}}
.area-group h3{
  font-family:var(--label);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-lt);font-weight:600;margin:0 0 1.1rem;padding-bottom:.8rem;
  border-bottom:1px solid rgba(217,184,124,.3);
}
.areas{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.areas li{font-family:var(--label);font-weight:500;font-size:.82rem;letter-spacing:.02em;border:1px solid rgba(217,184,124,.5);padding:.45rem .85rem;color:#E2E7E3}

/* ---------------- proof strip ---------------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(196,191,175,.35);margin-top:3rem}
.proof div{background:var(--paper);padding:1.5rem 1.2rem}
.proof dt{font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-lo);margin-bottom:.5rem}
.proof dd{margin:0;font-family:var(--display);font-size:1.28rem;font-weight:500;line-height:1.28}
@media(max-width:820px){.proof{grid-template-columns:repeat(2,1fr)}}

/* ---------------- form ---------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:1rem}
@media(max-width:880px){.form-grid{grid-template-columns:1fr}}
.field{margin-bottom:1.3rem}
.field label{display:block;font-family:var(--label);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:.55rem}
.field input,.field select,.field textarea{
  width:100%;background:rgba(243,241,234,.06);border:1px solid rgba(196,191,175,.4);
  color:var(--paper);font-family:var(--body);font-size:1rem;padding:.85rem 1rem;border-radius:0;
}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:transparent}
.field select option{color:#101C17}
.hp{position:absolute;left:-9999px}
.form-note{font-family:var(--label);font-size:.85rem;color:var(--dim);line-height:1.75;margin-top:1.2rem}

/* WhatsApp, in the house colours rather than its own */
.wa{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);font-weight:600;font-size:.92rem;
  padding:.7rem 1.15rem;text-decoration:none;
  border:1px solid var(--brass-lt);color:var(--brass-lt);
  transition:background .18s ease,color .18s ease;
}
.wa:hover,.wa:focus-visible{background:var(--brass-lt);color:var(--green-deep)}
.wa svg{flex:0 0 auto}
.wa--light{border-color:var(--brass-lo);color:var(--brass-lo)}
.wa--light:hover,.wa--light:focus-visible{background:var(--brass-lo);color:var(--paper)}
.wa--plain{border:0;padding:0;font-weight:500;font-size:inherit}
.wa--plain:hover,.wa--plain:focus-visible{background:none;color:var(--paper)}

/* floating badge, bottom right, appears once past the hero */
.wa-float{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:55;
  width:56px;height:56px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--green-deep);color:var(--brass-lt);
  border:1px solid var(--brass-lt);
  text-decoration:none;
  box-shadow:0 10px 28px -12px rgba(0,0,0,.7);
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.3,1),background .18s ease,color .18s ease;
}
.wa-float.is-on{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover,.wa-float:focus-visible{background:var(--brass-lt);color:var(--green-deep)}
.wa-float svg{width:26px;height:26px}
.wa-float .wa-float__label{
  position:absolute;right:calc(100% + .55rem);white-space:nowrap;
  font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.01em;
  background:var(--green-deep);color:var(--brass-lt);
  border:1px solid var(--brass-lt);padding:.42rem .7rem;
  opacity:0;transform:translateX(6px);transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;
}
.wa-float:hover .wa-float__label,.wa-float:focus-visible .wa-float__label{opacity:1;transform:none}
@media(max-width:560px){
  .wa-float{width:52px;height:52px;right:1rem;bottom:1rem}
  .wa-float svg{width:24px;height:24px}
  .wa-float .wa-float__label{display:none}
}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}}

/* ---------------- footer ---------------- */
.site-foot{background:var(--ink);color:#A9B3AC;padding-block:3.5rem 2.5rem;font-size:.85rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.site-foot h4{font-family:var(--label);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-lt);margin:0 0 1rem;font-weight:600}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:.5rem}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--paper)}
.legal{border-top:1px solid rgba(152,162,156,.2);margin-top:2.8rem;padding-top:1.6rem;font-family:var(--label);font-size:.78rem;line-height:1.9;letter-spacing:.01em}

:focus-visible{outline:2px solid var(--brass-lt);outline-offset:3px}

/* ---------------- motion ---------------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@keyframes sashClose{from{transform:translateY(20px)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#lowerSash{animation:sashClose 1.1s cubic-bezier(.16,.84,.24,1) both}
.sash-dwg .anno{opacity:0;animation:fadeUp .6s ease forwards}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  #lowerSash{animation:none}
  .sash-dwg.ready.is-open #lowerSash,
  .sash-dwg.ready.is-open #upperSash,
  .sash-dwg.ready.is-open #dualUpper,
  .sash-dwg.ready.is-open #dualLower,
  .sash-dwg.ready.is-open #fdLeft,
  .sash-dwg.ready.is-open #fdRight,
  .sash-dwg.ready.is-open #bfA,
  .sash-dwg.ready.is-open #bfB,
  .sash-dwg.ready.is-open #bfC,
  .sash-dwg.ready.is-open #bdLeaf,
  .sash-dwg.ready.is-open #fdrLeaf{transform:none}
  .sash-dwg .anno{opacity:1;animation:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------------- about ---------------- */
.person{display:grid;grid-template-columns:220px 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start;margin-top:3rem}
@media(max-width:700px){.person{grid-template-columns:1fr}}
.person__mark{width:220px;height:220px;background:var(--green-deep);display:flex;align-items:center;justify-content:center;border:1px solid var(--brass-lt)}
.person__mark span{font-family:var(--display);font-size:4.4rem;font-weight:500;color:var(--brass-lt);letter-spacing:.02em}
@media(max-width:700px){.person__mark{width:150px;height:150px}.person__mark span{font-size:3rem}}
.person__name{font-family:var(--display);font-size:1.9rem;font-weight:500;line-height:1.1;margin:0}
.person__role{font-family:var(--label);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lo);margin:.5rem 0 1.2rem}
.person p{max-width:56ch}

/* active page in the navigation */
.site-nav a.is-active{border-bottom-color:var(--brass-lt);opacity:1}
.subnav__links a.is-active{color:var(--green-deep);background:var(--brass-lt);border-color:var(--brass-lt);font-weight:700}

/* ---------------- project grid and lightbox ---------------- */
.proj-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.7rem,1.4vw,1.1rem);margin-top:2rem;
}
.proj-grid--two{grid-template-columns:repeat(2,1fr);max-width:66%}
@media(max-width:900px){.proj-grid{grid-template-columns:repeat(2,1fr)}.proj-grid--two{max-width:none}}
@media(max-width:520px){.proj-grid,.proj-grid--two{grid-template-columns:1fr}}

.proj-tile{
  display:block;padding:0;margin:0;width:100%;aspect-ratio:1/1;
  border:1px solid var(--putty);background:var(--plaster);
  overflow:hidden;cursor:zoom-in;position:relative;
  transition:border-color .2s ease;
}
.proj-tile img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.proj-tile:hover,.proj-tile:focus-visible{border-color:var(--brass-lo)}
.proj-tile:hover img,.proj-tile:focus-visible img{transform:scale(1.035)}
.proj-tile::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);pointer-events:none;
}

.lightbox{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(16,28,23,.94);padding:clamp(1rem,4vw,3rem);
}
.lightbox[hidden]{display:none}
.lightbox__img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  border:1px solid var(--brass-lt);display:block;
}
.lightbox__close{
  position:absolute;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem);
  font-family:var(--label);font-weight:600;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-lt);
  background:transparent;border:1px solid var(--brass-lt);
  padding:.6rem 1.1rem;cursor:pointer;
}
.lightbox__close:hover{background:var(--brass-lt);color:var(--green-deep)}
@media(prefers-reduced-motion:reduce){.proj-tile img{transition:none}}

/* ---------------- our work, on the homepage ---------------- */
.work-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:880px){.work-split{grid-template-columns:1fr}}
.work-split img{display:block;width:100%;height:auto;border:1px solid var(--putty)}