/* Palette and type follow sandbrook.com: deep navy, electric blue, a green
   secondary, geometric sans for display and mono for labels. The variable
   names are unchanged from the previous warm scheme so every existing rule
   keeps working — only the values moved. */
:root{
  --ink:#011930;          /* deep navy — headings, primary text */
  --ink-2:#123957;        /* steel blue — body copy */
  --muted:#64748b;        /* cool grey — meta, captions */
  --line:#dfe3e8;
  --paper:#f5f6f7;        /* cool near-white page */
  --paper-2:#eceef1;
  --white:#ffffff;
  --brass:#0558f2;        /* electric blue — the accent formerly brass */
  --forest:#0c6b55;       /* green secondary */
  --mint:#00b86d;
  --navy-soft:rgba(1,25,48,.65);
  --shadow:0 1px 2px rgba(1,25,48,.05),0 8px 32px rgba(1,25,48,.08);
  --serif:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(1.25rem,5vw,6rem);
  --maxw:1240px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin:0}
h1{font-weight:300}
h1 strong,h2 strong{font-weight:800}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin:0 0 1.25rem;
}
.lede{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.6;color:var(--ink-2);font-weight:300}

/* ---------- concept ribbon ---------- */
.concept{
  position:fixed;left:14px;bottom:14px;z-index:200;max-width:min(88vw,380px);
  background:rgba(31,58,49,.95);color:#eae4d6;backdrop-filter:blur(8px);
  font-size:.72rem;line-height:1.5;padding:.7rem .9rem;border-radius:8px;
  box-shadow:0 6px 28px rgba(0,0,0,.24);
}
.concept b{color:#fff;font-weight:600}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:100;background:rgba(246,243,236,.86);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
header.stuck{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;gap:2rem;height:74px}
.brand{display:flex;align-items:baseline;gap:.7rem;text-decoration:none;margin-right:auto}
.mono{
  font-family:var(--serif);font-weight:800;font-size:1.2rem;letter-spacing:.02em;
  background:var(--ink);color:var(--white);padding:.3em .5em;line-height:1;
}
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand-txt .n{font-size:.94rem;font-weight:500;letter-spacing:.01em}
.brand-txt .b{font-size:.68rem;color:var(--muted);letter-spacing:.05em}
.nav a.lnk{
  text-decoration:none;font-size:.88rem;color:var(--ink-2);font-weight:400;
  position:relative;padding:.3rem 0;
}
.nav a.lnk::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ink);transition:right .35s cubic-bezier(.2,.7,.3,1);
}
.nav a.lnk:hover::after,
.nav a.lnk.active::after{right:0}
.nav a.lnk.active{color:var(--ink)}
.nav-links{display:flex;gap:1.5rem;flex:0 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav-links::-webkit-scrollbar{display:none}
.nav a.lnk{white-space:nowrap}
/* the sticky header would otherwise sit on top of the heading we jumped to */
section[id],main[id]{scroll-margin-top:90px}
.btn{
  display:inline-block;text-decoration:none;font-size:.85rem;font-weight:500;
  letter-spacing:.02em;padding:.72rem 1.4rem;border-radius:2px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:background .25s,color .25s;white-space:nowrap;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.lg{padding:.95rem 1.9rem;font-size:.9rem}
/* burger + mobile panel */
.burger{display:none;background:none;border:0;padding:.5rem;margin-left:.25rem;
  cursor:pointer;width:42px;height:42px}
.burger span{display:block;height:1px;background:var(--ink);margin:6px 0;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s}
.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)}
.panel{
  position:fixed;inset:74px 0 0;background:var(--paper);z-index:99;
  display:flex;flex-direction:column;padding:var(--pad);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s,transform .3s,visibility .3s;
}
.panel.open{opacity:1;visibility:visible;transform:none}
/* seven items at the old 1.9rem overflowed a short phone viewport */
.panel{overflow-y:auto}
.panel a{font-family:var(--serif);font-size:1.6rem;font-weight:300;text-decoration:none;
  padding:.5rem 0;border-bottom:1px solid var(--line)}
.panel a.active{color:var(--ink)}
/* raised from 860px when the strip went to six tabs — below this they no
   longer fit beside the brand and the wordmark, so use the menu instead */
@media(max-width:1080px){
  .nav-links{display:none}
  .burger{display:block}
  .nav .btn{padding:.62rem 1.05rem;font-size:.8rem}
  .brand-txt .b{display:none}
}
@media(min-width:1081px){.panel{display:none}}
@media(max-width:560px){
  .brand-txt .n{white-space:nowrap;font-size:.88rem}
  .mono{font-size:1.14rem;padding:.16em .36em}
  .brand{gap:.5rem}
  .nav{gap:.5rem}
}

/* ---------- image slots ---------- */
.slot{
  position:relative;overflow:hidden;background:var(--paper-2);
  background-image:
    linear-gradient(135deg,rgba(154,123,63,.07) 25%,transparent 25%,transparent 50%,
    rgba(154,123,63,.07) 50%,rgba(154,123,63,.07) 75%,transparent 75%);
  background-size:14px 14px;
}
.slot::after{
  content:attr(data-label);position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:82%;text-align:center;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);line-height:1.7;font-weight:500;
}
.slot img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.slot:has(img){background-image:none}
.slot:has(img)::after{content:none}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3rem,7vw,6rem) clamp(3rem,6vw,5.5rem)}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.4rem);font-weight:300;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--brass)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:end}
.hero-copy{max-width:34rem}
.hero .lede{margin:1.9rem 0 2.3rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-slot{aspect-ratio:4/5;border-radius:3px;box-shadow:var(--shadow)}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-slot{aspect-ratio:16/11;order:-1;margin-bottom:.5rem}
}

/* ---------- marquee strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--white)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,4rem);
  padding-block:1.15rem;align-items:center;justify-content:space-between}
.strip span{
  font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

/* ---------- sections ---------- */
section{padding-block:clamp(4rem,9vw,7.5rem)}
.sec-head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head h2{font-size:clamp(2rem,4.2vw,3.3rem);font-weight:300}
.sec-head p{margin:1.3rem 0 0}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.pillar{background:var(--paper);padding:clamp(1.75rem,3vw,2.6rem);transition:background .3s}
.pillar:hover{background:var(--white)}
.pillar .num{
  font-family:var(--serif);font-size:.9rem;color:var(--brass);
  display:block;margin-bottom:1.4rem;letter-spacing:.08em;
}
.pillar h3{font-size:1.42rem;margin-bottom:.85rem}
.pillar p{margin:0;font-size:.95rem;color:var(--ink-2);font-weight:300;line-height:1.7}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}

/* ---------- work ---------- */
.work{background:var(--white);border-block:1px solid var(--line)}
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3.4vw,3rem)}
.proj{text-decoration:none;display:block}
.proj .slot{aspect-ratio:3/2;border-radius:2px;margin-bottom:1.15rem}
.proj .slot img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.proj:hover .slot img{transform:scale(1.035)}
.proj h3{font-size:1.28rem;margin-bottom:.35rem}
.proj .meta{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.79rem;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase}
.proj .meta .tag{color:var(--brass)}
.proj .meta .ph{opacity:.55;font-style:italic;text-transform:none;letter-spacing:.02em}
@media(max-width:760px){.projects{grid-template-columns:1fr}}

/* ---------- transactions ---------- */
.tx-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  margin-top:clamp(2.5rem,5vw,3.5rem)}
.tx-col h3{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  font-family:var(--sans);font-weight:500;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.tx-col ul{list-style:none;padding:0;margin:0}
.tx-col li{display:flex;justify-content:space-between;align-items:baseline;gap:1.25rem;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.tx-col .a{font-size:.97rem;color:var(--ink);font-weight:300}
.tx-col .t{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  flex:none;text-align:right}
.tx-col .role{display:block;font-size:.73rem;letter-spacing:.05em;color:var(--muted);
  margin-top:.28rem;font-style:italic;text-transform:none}
@media(max-width:820px){.tx-grid{grid-template-columns:1fr;gap:2.5rem}}

/* ---------- before & after gallery ---------- */

/* lightbox */

/* comparison slider */
/* keep the two placeholder captions in their own halves so they don't
   overlap across the divider (moot once real photos are dropped in) */

/* ---------- feature (renovation) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.feature .slot{aspect-ratio:1/1;border-radius:3px}
.feature h2{font-size:clamp(1.9rem,3.8vw,3rem);font-weight:300;margin-bottom:1.4rem}
.feature p{color:var(--ink-2);font-weight:300}
.feature p + p{margin-top:1.1rem}
.pull{
  border-left:2px solid var(--brass);padding-left:1.4rem;margin:2rem 0;
  font-family:var(--serif);font-size:1.24rem;line-height:1.45;color:var(--ink);
}
@media(max-width:860px){.feature{grid-template-columns:1fr}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(2.5rem,5vw,4rem)}
.stat{background:var(--paper);padding:clamp(1.5rem,2.6vw,2.2rem);text-align:left}
.stat .v{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:300;
  line-height:1;display:block;margin-bottom:.5rem}
.stat .v.ph{color:var(--muted);opacity:.5}
.stat .k{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- about ---------- */
.about{background:var(--forest);color:#e9e4d8;border-block:1px solid var(--forest)}
.about .eyebrow{color:#c9ab6d}
.about h2{font-size:clamp(1.9rem,3.8vw,3rem);font-weight:300;color:#fffdf9}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about p{color:#c9c4b6;font-weight:300}
.about p + p{margin-top:1.05rem}
.about .slot{aspect-ratio:4/5;border-radius:3px;background:#26433a;
  background-image:linear-gradient(135deg,rgba(201,171,109,.09) 25%,transparent 25%,transparent 50%,rgba(201,171,109,.09) 50%,rgba(201,171,109,.09) 75%,transparent 75%)}
.about .slot::after{color:#8fa39a}
.creds{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.65rem}
.creds li{display:flex;gap:.8rem;font-size:.93rem;color:#c9c4b6}
.creds li::before{content:"—";color:#c9ab6d;flex:none}
@media(max-width:860px){.about-grid{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem)}
.contact h2{font-size:clamp(2rem,4.2vw,3.3rem);font-weight:300}
.cline{display:flex;justify-content:space-between;gap:1.5rem;padding:1.1rem 0;
  border-bottom:1px solid var(--line);font-size:.97rem}
.cline .k{color:var(--muted);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  padding-top:.2rem;flex:none}
.cline a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .25s}
.cline a:hover{border-bottom-color:var(--ink)}
.cline .ph{color:var(--muted);opacity:.6}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#9aa4a9;padding-block:clamp(2.5rem,5vw,4rem);font-size:.83rem}
.foot-top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;
  align-items:flex-start;padding-bottom:2rem;border-bottom:1px solid #2b3235}
.foot-brand{display:flex;align-items:baseline;gap:.7rem;color:var(--paper)}
.foot-brand .mono{border-color:#4a5357}
.foot-legal{margin-top:2rem;display:grid;gap:.8rem;line-height:1.7;max-width:70ch}
.foot-legal strong{color:#c9cdd0;font-weight:500}
.eho{display:flex;align-items:center;gap:.7rem;margin-top:.4rem}
.eho svg{flex:none}

/* ---------- motion ---------- */
:root{--ease:cubic-bezier(.22,.68,.24,1);--dur:.9s}

/* generic scroll reveal */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* Failsafe: everything above is hidden by default and only revealed when JS adds
   .in. If the script fails, is blocked, or the observer never fires, the content
   would be invisible rather than merely unanimated — so when JS hasn't marked the
   document, show it all. */
html:not(.js) .rv,
html:not(.js) .strip span,
html:not(.js) .hero .eyebrow,
html:not(.js) .hero .lede,
html:not(.js) .hero-cta{opacity:1!important;transform:none!important}
html:not(.js) .lines .ln > span{transform:none!important}
html:not(.js) .slot::before{display:none!important}
html:not(.js) .slot img{transform:none!important}
html:not(.js) .pull::before{transform:scaleY(1)!important}

/* line-by-line headline reveal */
.lines .ln{display:block;overflow:hidden}
.lines .ln > span{display:block;transform:translateY(105%);
  transition:transform 1.05s var(--ease);transition-delay:var(--d,0ms)}
.lines.in .ln > span{transform:none}

/* image curtain wipe + settle */
.slot{--curtain:var(--paper)}
.slot::before{
  content:"";position:absolute;inset:0;z-index:3;background:var(--curtain);
  transform:scaleY(1);transform-origin:top;
  transition:transform 1.1s var(--ease);transition-delay:var(--d,0ms);
}
.slot.in::before{transform:scaleY(0);transform-origin:bottom}
.slot img{transform:scale(1.09);transition:transform 1.5s var(--ease);transition-delay:var(--d,0ms)}
.slot.in img{transform:scale(1)}
.about .slot{--curtain:var(--forest)}
.work .slot{--curtain:var(--white)}
.band .slot{--curtain:var(--ink)}

/* parallax layer */
.px img{will-change:transform}

/* nav auto-hide */
/* the bar is pinned at all times — no scroll-direction hiding */
header{transition:border-color .3s,background .3s}

/* hero load-in */
.hero .eyebrow,.hero .lede,.hero-cta{opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.loaded .hero .eyebrow,.loaded .hero .lede,.loaded .hero-cta{opacity:1;transform:none}

/* strip stagger */
.strip span{opacity:0;transform:translateY(10px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.strip.in span{opacity:1;transform:none}

/* project card polish */
.proj .meta{transition:transform .5s var(--ease)}
.proj:hover .meta{transform:translateX(4px)}
.proj h3{transition:opacity .3s}

/* pull quote border grow */
.pull{position:relative;border-left:0;padding-left:1.4rem}
.pull::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--brass);transform:scaleY(0);transform-origin:top;
  transition:transform .9s var(--ease) .15s}
.pull.in::before{transform:scaleY(1)}

@media(prefers-reduced-motion:reduce){
  .rv,.strip span,.hero .eyebrow,.hero .lede,.hero-cta{opacity:1!important;transform:none!important;transition:none!important}
  .lines .ln > span{transform:none!important;transition:none!important}
  .slot::before{display:none}
  .slot img{transform:none!important;transition:none!important}
  .pull::before{transform:scaleY(1)!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- showcase page (work.html) ---------- */
.pg-head{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem)}
.pg-head h1{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:300;max-width:18ch}
.pg-head .lede{margin-top:1.4rem;max-width:52ch}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,2rem);
  margin-block:clamp(1.5rem,4vw,3rem)}
@media(max-width:980px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gal{grid-template-columns:1fr}}
.gal .card{display:block;text-decoration:none}
.gal .slot{aspect-ratio:3/2;border-radius:3px;box-shadow:var(--shadow)}
.gal h3{font-size:1.12rem;font-weight:400;margin:.85rem 0 .25rem}
.gal .town{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass)}
.gal .spec{font-size:.83rem;color:var(--muted);font-weight:300;margin:.3rem 0 0;line-height:1.5}
.gal .role{font-family:var(--mono);display:inline-block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--forest);border:1px solid var(--line);padding:.16rem .5rem;margin-top:.55rem}
.grp-head{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:clamp(2rem,5vw,3.5rem)}
.grp-head h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:300}
.grp-head p{color:var(--muted);font-size:.9rem;margin:.5rem 0 0}

/* ---------- about page (about.html) ---------- */
.ab-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:start;padding-bottom:clamp(2.5rem,6vw,4.5rem)}
@media(max-width:860px){.ab-grid{grid-template-columns:1fr}}
.ab-portrait{aspect-ratio:4/5;border-radius:3px;box-shadow:var(--shadow);position:sticky;top:100px}
@media(max-width:860px){.ab-portrait{position:static;aspect-ratio:16/11;max-width:26rem}}
.ab-body p{font-size:1.02rem;line-height:1.75;color:var(--ink-2);font-weight:300;margin:0 0 1.25rem}
.ab-body p.first{font-size:1.22rem;line-height:1.6;color:var(--ink);font-weight:300}
.ab-body h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:300;margin:2.4rem 0 1rem}
.facts{list-style:none;padding:0;margin:1.5rem 0 0;border-top:1px solid var(--line)}
.facts li{display:flex;gap:1.25rem;justify-content:space-between;align-items:baseline;
  padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.93rem;font-weight:300}
.facts .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  flex:0 0 auto}
/* first group sits right under the page intro — the section's own top padding
   plus this rule's margin left a screen-height of dead space */
.gal + .grp-head{margin-top:clamp(2rem,5vw,3.5rem)}
section > .grp-head:first-child{margin-top:0;border-top:0;padding-top:0}

/* ============ Sandbrook-style dark bands + motion ============ */

/* --- full-bleed navy hero, photo behind a gradient --- */
.hero.dark{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  max-width:none;padding-inline:0;
  min-height:min(88vh,780px);display:flex;align-items:flex-end;
}
.hero.dark .hero-bg{position:absolute;inset:0;z-index:0}
.hero.dark .hero-bg img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transition:transform 1.6s var(--ease)}
.hero.dark.in .hero-bg img{transform:scale(1)}
/* two stops: darken the bottom for the headline, cool the top for the nav */
.hero.dark .hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,25,48,.72) 0%,rgba(1,25,48,.35) 38%,rgba(1,25,48,.88) 100%);
}
.hero.dark .hero-inner{position:relative;z-index:1;width:100%;
  max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,12vw,8rem) var(--pad) clamp(3rem,6vw,5rem)}
.hero.dark h1{font-size:clamp(2.7rem,7vw,5.6rem);font-weight:200;color:#fff;max-width:16ch}
.hero.dark h1 strong{font-weight:800;letter-spacing:-.04em}
.hero.dark .eyebrow{color:#fff;opacity:.75}
.hero.dark .lede{color:rgba(255,255,255,.9);max-width:40rem;margin:1.8rem 0 2.4rem}
.hero.dark .btn{background:var(--brass);border-color:var(--brass);color:#fff}
.hero.dark .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hero.dark .btn.ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.hero.dark .btn.ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* scroll cue */
.scroll-cue{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border:1px solid rgba(255,255,255,.45);border-radius:50%;
  margin-top:clamp(2rem,5vw,3.5rem);color:#fff;text-decoration:none;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.scroll-cue:hover{background:rgba(255,255,255,.14);border-color:#fff}
.scroll-cue svg{animation:bob 2.2s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}

/* --- dark section band (used by Selected Work) --- */
.band{background:var(--ink);color:#fff}
.band h2,.band h3{color:#fff}
.band .lede,.band p{color:rgba(255,255,255,.82)}
.band .eyebrow{color:var(--mint)}
.band .meta span{color:rgba(255,255,255,.7)}
.band .tag{border-color:rgba(255,255,255,.35);color:#fff}
.band a{color:#fff}
.band .slot{background:rgba(255,255,255,.06)}

/* --- rule that draws itself left to right --- */
.rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease);margin-block:clamp(2rem,5vw,3.5rem)}
.rule.in{transform:scaleX(1)}
.band .rule{background:rgba(255,255,255,.28)}

/* --- buttons fill from the left --- */
.btn{position:relative;overflow:hidden;z-index:0}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:#fff;border-color:var(--brass)}
.btn.ghost:hover{color:#fff}

@media(prefers-reduced-motion:reduce){
  .rule,.hero.dark .hero-bg img{opacity:1;transform:none;transition:none}
  .scroll-cue svg{animation:none}
}
/* the base .hero padding and the .rv slide both fight the full-bleed hero:
   the padding stacks on top of .hero-inner's, and sliding an above-the-fold
   section looks like a layout jump rather than a reveal */
.hero.dark{padding-block:0}
.hero.dark.rv{transform:none}
.hero.dark .lede{margin:1.8rem 0 2.4rem}

/* --- navy header, as on the reference --- */
header{background:var(--ink)!important;border-bottom-color:transparent!important}
header.stuck{box-shadow:0 1px 0 rgba(255,255,255,.12)}
.nav a.lnk{color:rgba(255,255,255,.78)}
.nav a.lnk:hover,.nav a.lnk.active{color:#fff}
.nav a.lnk::after{background:#fff}
.brand-txt .n{color:#fff}
.brand-txt .b{color:rgba(255,255,255,.6)}
/* the wordmark was navy-on-navy once the bar went dark */
.mono{background:#fff;color:var(--ink)}
.nav .btn{background:var(--brass);border-color:var(--brass);color:#fff}
.nav .btn::before{background:#fff}
.nav .btn:hover{color:var(--ink);border-color:#fff}
.burger span{background:#fff}
/* mobile panel matches the bar it drops out of */
.panel{background:var(--ink)}
.panel a{color:#fff;border-bottom-color:rgba(255,255,255,.18)}
.panel a.active{color:var(--mint)}

/* the lede sat over sunlit grass and lost contrast — weight the lower stop */
.hero.dark .hero-bg::after{
  background:linear-gradient(180deg,
    rgba(1,25,48,.62) 0%,rgba(1,25,48,.30) 30%,
    rgba(1,25,48,.78) 62%,rgba(1,25,48,.94) 100%);
}
/* .proj .meta .tag out-specifies the .band override, and electric blue on navy
   fails contrast — mint is the reference's accent for dark sections */
.band .proj .meta .tag{color:var(--mint)}
.band .proj .meta span{color:rgba(255,255,255,.72)}

/* ---------- side rail: the homepage's own sections, off to the edge ---------- */
/* the top bar is for pages now; in-page sections live here so the two kinds of
   navigation stop competing */
.rail{
  position:fixed;top:50%;right:clamp(.75rem,2vw,1.75rem);transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;gap:.15rem;
  padding:.6rem .5rem;border-radius:999px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(1,25,48,.08);
  box-shadow:0 4px 24px rgba(1,25,48,.08);
  opacity:0;transition:opacity .5s var(--ease);
}
.rail.ready{opacity:1}
.rail a{
  display:flex;align-items:center;gap:.6rem;justify-content:flex-end;
  text-decoration:none;padding:.4rem .6rem;border-radius:999px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.rail a .dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(1,25,48,.22);transition:background .3s var(--ease),transform .3s var(--ease);
}
/* labels stay hidden until hover so the rail reads as a row of dots at rest */
.rail a .txt{
  max-width:0;overflow:hidden;opacity:0;
  transition:max-width .4s var(--ease),opacity .3s var(--ease);
}
.rail:hover a .txt{max-width:10rem;opacity:1}
.rail a:hover{color:var(--ink)}
.rail a:hover .dot{background:var(--brass)}
.rail a.active{color:var(--ink)}
.rail a.active .dot{background:var(--brass);transform:scale(1.45)}
/* over a dark band the light pill would vanish */
.rail.on-dark{background:rgba(1,25,48,.5);border-color:rgba(255,255,255,.16)}
.rail.on-dark a{color:rgba(255,255,255,.66)}
.rail.on-dark a .dot{background:rgba(255,255,255,.34)}
.rail.on-dark a:hover,.rail.on-dark a.active{color:#fff}
.rail.on-dark a:hover .dot,.rail.on-dark a.active .dot{background:var(--mint)}
/* no room beside the content on narrow screens; the burger menu covers it */
@media(max-width:900px){.rail{display:none}}
@media(prefers-reduced-motion:reduce){
  .rail,.rail a,.rail a .dot,.rail a .txt{transition:none}
  .rail:hover a .txt{max-width:10rem;opacity:1}
}
/* the page intro already carries bottom padding; the section's own top padding
   on top of it left a screenful of dead space before the contact details */
.pg-head + section > .contact-grid{margin-top:0}
.contact-grid{padding-top:0}

/* ---------- before / after crossfade cards ---------- */
.ba2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem)}
@media(max-width:900px){.ba2-grid{grid-template-columns:1fr;max-width:32rem;margin-inline:auto}}
.ba2{display:block;width:100%;padding:0;border:0;background:none;text-align:left;
  cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.ba2 .imgs{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:3px;
  box-shadow:var(--shadow);background:var(--paper-2)}
.ba2 .imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the after sits on top and fades in — both frames are the same crop, so the
   crossfade reads as the building changing rather than the camera moving */
.ba2 .imgs img.aft{opacity:0;transition:opacity .75s var(--ease)}
.ba2:hover .imgs img.aft,
.ba2:focus-visible .imgs img.aft,
.ba2.on .imgs img.aft{opacity:1}
.ba2 .chip{
  position:absolute;left:.7rem;top:.7rem;z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.32rem .6rem;border-radius:999px;color:#fff;
  background:rgba(1,25,48,.72);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.ba2 .chip .b,.ba2 .chip .a{display:block}
.ba2 .chip .a{display:none;color:var(--mint)}
.ba2:hover .chip .b,.ba2:focus-visible .chip .b,.ba2.on .chip .b{display:none}
.ba2:hover .chip .a,.ba2:focus-visible .chip .a,.ba2.on .chip .a{display:block}
.ba2 h3{font-size:1.05rem;font-weight:500;margin:.9rem 0 .2rem}
.ba2 .cap{font-size:.85rem;color:var(--muted);font-weight:300;line-height:1.5;margin:0}
.ba2 .hint{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.band .ba2 h3{color:#fff}
.band .ba2 .cap{color:rgba(255,255,255,.72)}
.band .ba2 .hint{color:var(--mint)}
@media(prefers-reduced-motion:reduce){.ba2 .imgs img.aft{transition:none}}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem)}
@media(max-width:900px){.quotes{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}}
.quote{border-top:2px solid var(--brass);padding-top:1.3rem}
.quote p{font-size:1rem;line-height:1.7;color:var(--ink-2);font-weight:300;margin:0 0 1.1rem}
.quote .who{display:flex;flex-direction:column;gap:.2rem}
.quote .who b{font-family:var(--sans);font-size:.92rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink)}
.quote .who span{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.quote.ph p{color:var(--muted);font-style:italic}
.quote.ph{border-top-color:var(--line)}

/* ---------- area buttons on the homepage ---------- */
.areas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.area-btn{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  border:1px solid var(--line);background:var(--white);border-radius:999px;
  padding:.55rem 1.05rem;font-size:.86rem;color:var(--ink);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.area-btn .ct{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.area-btn:hover{border-color:var(--brass);background:var(--paper-2);transform:translateY(-2px)}
.area-btn:hover .ct{color:var(--brass)}

/* ---------- communities page ---------- */
.town{border-top:1px solid var(--line);padding:clamp(1.6rem,3.5vw,2.6rem) 0;
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media(max-width:820px){.town{grid-template-columns:1fr;gap:1.2rem}}
.town h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:300}
.town .county{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass);margin-top:.5rem;display:block}
.town p{margin:0 0 1rem;color:var(--ink-2);font-weight:300;line-height:1.7}
.town dl{margin:1.2rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem}
.town dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding-top:.2rem}
.town dd{margin:0;font-size:.93rem;font-weight:300;color:var(--ink)}