/* Addition Building & Design, site v4. This file is the Fable 5 concept's stylesheet, lifted verbatim by
   build/from-concept.py; the two rules at the end are the only additions. Do not restyle here. */
/* Brand pass 2026-09-12: Christine's palette; --oxide now carries Deep Forest Green so every small label inherits it. */
:root{
  --ivory:#F4F0E8;
  --stone:#EAE4D7;
  --char:#2E2E2E;
  --char-soft:#3A3A3A;
  --taupe:#625C52;
  --oxide:#2F4A3C;
  --green:#2F4A3C;
  --gold:#C9A24E;
  --hairline:rgba(46,46,46,.16);
  --hairline-light:rgba(244,240,232,.22);
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.21,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  color:var(--taupe);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--char);color:var(--ivory)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--char);line-height:1.1}
em{font-style:italic;font-weight:400}

.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(1.4rem,5vw,4rem)}
section{scroll-margin-top:5rem}

/* ---------- type utilities ---------- */
.eyebrow{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:var(--oxide);
  display:flex;align-items:center;gap:1.1rem;
}
.eyebrow::after{content:"";height:1px;width:3.2rem;background:var(--gold);opacity:1}
.eyebrow.centered{justify-content:center}
.eyebrow.centered::before{content:"";height:1px;width:3.2rem;background:var(--gold);opacity:1}

/* ---------- reveal motion ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.12s}
.js .reveal.d2{transition-delay:.24s}
.js .reveal.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- header ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
header .bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem clamp(1.4rem,5vw,4rem);
  transition:padding .5s var(--ease);
}
header.scrolled{background:rgba(244,240,232,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--hairline)}
header.scrolled .bar{padding-top:1rem;padding-bottom:1rem}
.wordmark{line-height:1.2;letter-spacing:.3em;text-transform:uppercase;font-family:var(--serif);font-weight:400;color:var(--ivory);transition:color .5s}
.wordmark strong{display:block;font-size:15px;font-weight:400}
.wordmark span{display:block;font-size:8.5px;letter-spacing:.42em;font-family:var(--sans);font-weight:400;opacity:.75;margin-top:.28rem}
header.scrolled .wordmark,header.menu-open .wordmark{color:var(--char)}
nav.desktop{display:flex;align-items:center;gap:2.4rem}
nav.desktop a{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  color:var(--ivory);opacity:.85;transition:color .5s,opacity .3s;
}
nav.desktop a:hover{opacity:1}
header.scrolled nav.desktop a{color:var(--char)}
.cta-pill{
  border:1px solid var(--hairline-light);padding:.72em 1.7em;
  transition:color .5s,border-color .5s,background .3s;
}
header.scrolled .cta-pill{border-color:var(--hairline)}
nav.desktop a.cta-pill:hover{background:var(--char);border-color:var(--char);color:var(--ivory);opacity:1}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;z-index:60}
.burger span{display:block;width:26px;height:1px;background:var(--ivory);margin:7px 0;transition:all .4s var(--ease)}
header.scrolled .burger span,header.menu-open .burger span{background:var(--char)}
header.menu-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
header.menu-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
/* Sits OUTSIDE <header>: backdrop-filter on header.scrolled would otherwise
   re-anchor this fixed overlay to the header's box instead of the viewport.
   z-index below the header so the bar (wordmark + burger/X) stays on top. */
.mobile-menu{
  position:fixed;inset:0;background:var(--ivory);z-index:49;
  display:flex;flex-direction:column;justify-content:center;padding:0 clamp(1.4rem,8vw,4rem);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
header.menu-open + .mobile-menu{opacity:1;pointer-events:auto}
header.menu-open{background:none;box-shadow:none;backdrop-filter:none}
.mobile-menu a{
  font-family:var(--serif);font-size:clamp(2rem,8vw,3rem);color:var(--char);
  padding:.55rem 0;border-bottom:1px solid var(--hairline);
}
.mobile-menu a:last-child{border-bottom:0}
@media (max-width:900px){
  nav.desktop{display:none}
  .burger{display:block}
}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{
  width:100%;height:112%;object-fit:cover;object-position:center 40%;
  will-change:transform;
}
.js .hero-media img{animation:heroIn 2.6s var(--ease) both}
@keyframes heroIn{from{transform:scale(1.07);filter:brightness(.85)}to{transform:scale(1);filter:brightness(1)}}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,13,11,.72) 0%,rgba(15,13,11,.25) 42%,rgba(15,13,11,.12) 70%,rgba(15,13,11,.3) 100%);
}
.hero-inner{
  position:relative;z-index:2;width:100%;
  padding-bottom:clamp(3rem,7vh,5.5rem);
  color:var(--ivory);
}
.hero .eyebrow{color:var(--ivory);opacity:.85}
.hero .eyebrow::after{background:var(--ivory)}
.hero h1{
  color:var(--ivory);
  font-size:clamp(2.7rem,6.2vw,5.2rem);
  max-width:13.5em;
  margin:1.4rem 0 1.6rem;
  letter-spacing:-.005em;
}
.hero p.lede{
  max-width:34em;font-size:clamp(1rem,1.35vw,1.13rem);line-height:1.8;
  color:rgba(245,241,232,.82);
}
.hero-actions{display:flex;align-items:center;gap:2.2rem;margin-top:2.6rem;flex-wrap:wrap}
.btn{
  display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  padding:1.05em 2.6em;border:1px solid var(--ivory);color:var(--ivory);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.btn:hover{background:var(--ivory);color:var(--char)}
.btn.dark{border-color:var(--char);color:var(--char)}
.btn.dark:hover{background:var(--char);color:var(--ivory)}
.btn.solid{background:var(--ivory);color:var(--char);border-color:var(--ivory)}
.btn.solid:hover{background:transparent;color:var(--ivory)}
.quiet-link{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  color:rgba(245,241,232,.75);border-bottom:1px solid rgba(245,241,232,.35);
  padding-bottom:.45em;transition:color .3s,border-color .3s;
}
.quiet-link:hover{color:var(--ivory);border-color:var(--ivory)}
.hero-places{
  position:relative;z-index:2;
  margin-top:clamp(2.4rem,5vh,4rem);padding-top:1.6rem;
  border-top:1px solid rgba(245,241,232,.2);
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(245,241,232,.6);
  display:flex;flex-wrap:wrap;gap:.4rem 2.2rem;
}

/* ---------- section scaffolding ---------- */
.section{padding:clamp(6rem,11vw,9.5rem) 0}
.section-head{margin-bottom:clamp(3rem,6vw,5rem)}
.section-head h2{font-size:clamp(2rem,4vw,3.2rem);max-width:16em;margin-top:1.4rem;letter-spacing:-.005em}

/* ---------- signature work ---------- */
.work-item{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.5vw,2.5rem);align-items:end}
.work-item + .work-item{margin-top:clamp(4.5rem,9vw,8rem)}
.work-media{overflow:hidden;position:relative;background:var(--stone)}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.work-item:hover .work-media img{transform:scale(1.035)}
.work-1 .work-media{grid-column:1/9;aspect-ratio:16/10}
.work-1 .work-media img{transform:scale(1.17);transform-origin:14% 42%}
.work-1:hover .work-media img{transform:scale(1.21)}
.work-1 .work-caption{grid-column:9/13}
.work-2 .work-media{grid-column:6/13;aspect-ratio:16/10;order:2}
.work-2 .work-caption{grid-column:1/6;order:1;text-align:right}
.work-2 .work-caption .cap-rule{margin-left:auto}
.work-3 .work-media{grid-column:1/7;aspect-ratio:4/5}
.work-3 .work-media img{object-position:16% 50%;transform:scale(1.02)}
.work-3:hover .work-media img{transform:scale(1.055)}
.work-3 .work-caption{grid-column:7/11}
.work-caption{padding-bottom:.4rem}
.work-index{font-family:var(--serif);font-size:.95rem;color:var(--oxide);font-style:italic}
.work-caption h3{font-size:clamp(1.5rem,2.4vw,2.1rem);margin:.8rem 0 .7rem}
.work-caption p{font-size:.95rem;max-width:24em}
.work-2 .work-caption p{margin-left:auto}
.cap-rule{width:2.6rem;height:1px;background:var(--hairline);margin-top:1.5rem}
.work-more{margin-top:clamp(4rem,7vw,6rem);text-align:center}
.quiet-link.dark{color:var(--taupe);border-color:var(--hairline)}
.quiet-link.dark:hover{color:var(--char);border-color:var(--char)}
@media (max-width:760px){
  /* Short phone viewports: a fixed 100svh hero with flex-end content overflows
     out the TOP (under the header). Let the hero grow with its content instead,
     and give the content a top clearance the height of the header. */
  .hero{height:auto;min-height:100svh}
  .hero-inner{padding-top:7.5rem}
  .hero h1{font-size:clamp(2.25rem,7.5vw,3.2rem);margin:1.1rem 0 1.2rem}
  .hero p.lede{line-height:1.68}
  .hero-actions{margin-top:2rem;gap:1.3rem}
  .hero-places{margin-top:2rem;gap:.35rem 1.6rem}
  .hero::after{
    background:linear-gradient(to top,rgba(15,13,11,.8) 0%,rgba(15,13,11,.52) 45%,rgba(15,13,11,.2) 75%,rgba(15,13,11,.3) 100%);
  }
  .work-item{display:block}
  .work-item .work-media{aspect-ratio:16/11}
  .work-3 .work-media{aspect-ratio:4/5}
  .work-caption{padding-top:1.4rem}
  .work-2 .work-caption{text-align:left}
  .work-2 .work-caption p{margin-left:0}
  .work-2 .work-caption .cap-rule{margin-left:0}
}

/* ---------- positioning ---------- */
.positioning{background:var(--stone)}
.positioning-inner{max-width:880px;margin:0 auto;text-align:center}
.positioning h2{
  font-size:clamp(1.9rem,3.6vw,3rem);
  margin:1.6rem 0 1.8rem;letter-spacing:-.005em;
}
.positioning p.body{max-width:38em;margin:0 auto;font-size:1.02rem}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  margin-top:clamp(3.5rem,6vw,5rem);padding-top:clamp(2.5rem,4vw,3.5rem);
  border-top:1px solid var(--hairline);
}
.stat .num{font-family:var(--serif);font-size:clamp(2.1rem,3.6vw,3rem);color:var(--char);line-height:1}
.stat .lbl{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;margin-top:.9rem;font-weight:400}
@media (max-width:640px){.stats{grid-template-columns:1fr;gap:2.4rem}}

/* ---------- interstitial ---------- */
.interstitial{position:relative;height:clamp(420px,72vh,680px);overflow:hidden}
.interstitial img{width:100%;height:120%;object-fit:cover;object-position:center 35%;will-change:transform}
.interstitial .tag{
  position:absolute;left:clamp(1.4rem,5vw,4rem);bottom:2.2rem;z-index:2;
  color:var(--ivory);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
}
.interstitial::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,13,11,.45),rgba(15,13,11,0) 45%)}

/* ---------- capabilities ---------- */
.cap-list{border-top:1px solid var(--hairline)}
.cap-row{
  display:grid;grid-template-columns:minmax(3rem,8rem) 1fr minmax(16rem,24rem) auto;
  gap:clamp(1rem,3vw,3rem);align-items:baseline;
  padding:clamp(1.8rem,3.4vw,2.8rem) 0;border-bottom:1px solid var(--hairline);
  transition:padding-left .5s var(--ease);
}
.cap-row:hover{padding-left:1rem}
.cap-row .idx{font-family:var(--serif);font-style:italic;color:var(--oxide);font-size:1rem}
.cap-row h3{font-size:clamp(1.4rem,2.6vw,2.2rem);transition:color .3s}
.cap-row p{font-size:.95rem}
.cap-row .arrow{font-family:var(--serif);color:var(--char);opacity:.35;font-size:1.4rem;transition:opacity .3s,transform .5s var(--ease)}
.cap-row:hover .arrow{opacity:.9;transform:translateX(6px)}
@media (max-width:820px){
  .cap-row{grid-template-columns:3rem 1fr;grid-template-rows:auto auto}
  .cap-row p{grid-column:2}
  .cap-row .arrow{display:none}
}

/* ---------- approach ---------- */
.approach{background:var(--green);color:rgba(244,240,232,.8)}
.approach .eyebrow{color:var(--ivory);opacity:.8}
.approach .eyebrow::after{background:var(--ivory)}
.approach h2{color:var(--ivory)}
.approach-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,7vw,7rem)}
.approach-intro p{font-size:1.02rem;max-width:26em}
.approach-intro .sticky{position:sticky;top:8rem}
.steps{counter-reset:step}
.step{
  padding:2.2rem 0;border-top:1px solid var(--hairline-light);
  display:grid;grid-template-columns:4.5rem 1fr;gap:1.5rem;align-items:baseline;
}
.step:last-child{border-bottom:1px solid var(--hairline-light)}
.step .n{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.05rem}
.step h3{color:var(--ivory);font-size:1.45rem;margin-bottom:.55rem}
.step p{font-size:.95rem;max-width:30em}
@media (max-width:820px){.approach-grid{grid-template-columns:1fr}.approach-intro .sticky{position:static}}

/* ---------- leadership ---------- */
.leaders-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(3rem,6vw,6rem);align-items:start}
.leaders-media{overflow:hidden;background:var(--stone)}
.leaders-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.leaders-media figcaption{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin-top:1.1rem;color:var(--taupe)}
.leader{padding:1.8rem 0;border-top:1px solid var(--hairline)}
.leader:first-of-type{margin-top:2.6rem}
.leader h3{font-size:1.5rem}
.leader .role{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--oxide);margin:.5rem 0 .9rem;font-weight:500}
.leader p{font-size:.95rem;max-width:30em}
@media (max-width:820px){.leaders-grid{grid-template-columns:1fr}}

/* ---------- final cta ---------- */
.finale{background:var(--green);text-align:center}
.finale .eyebrow{color:var(--ivory);opacity:.8}
.finale h2{
  color:var(--ivory);font-size:clamp(2.4rem,5vw,4rem);
  margin:1.6rem auto 1.4rem;max-width:12em;letter-spacing:-.005em;
}
.finale p{max-width:30em;margin:0 auto;color:rgba(244,240,232,.8);font-size:1.02rem}
.finale-actions{margin-top:3rem;display:flex;justify-content:center;align-items:center;gap:2.4rem;flex-wrap:wrap}
.finale .phone{font-family:var(--serif);font-size:1.15rem;color:rgba(245,241,232,.85);letter-spacing:.04em}
.finale .phone:hover{color:var(--ivory)}

/* ---------- footer ---------- */
footer{padding:clamp(4rem,7vw,6rem) 0 2.6rem;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3.5rem}
.foot-grid h4{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--char);
  font-weight:500;font-family:var(--sans);margin-bottom:1.2rem;
}
.foot-grid ul{list-style:none}
.foot-grid li{margin:.45rem 0}
.foot-grid a:hover{color:var(--char)}
.foot-brand .wordmark{color:var(--char)}
.foot-logo img{width:min(260px,100%);height:auto;display:block}
.foot-brand p{margin-top:1.4rem;max-width:20em;font-size:.9rem}
.foot-bottom{
  border-top:1px solid var(--hairline);padding-top:2rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);
}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- additions for the inner pages (build/from-concept.py) ---------- */
nav.desktop a.on{position:relative;opacity:1}
nav.desktop a.on::after{content:"";position:absolute;left:0;right:0;bottom:-.35em;height:1px;background:currentColor;opacity:.6}
header.on-light .wordmark,header.on-light nav.desktop a{color:var(--char)}
header.on-light .cta-pill{border-color:var(--hairline)}
header.on-light .burger span{background:var(--char)}
/* ---------- the header is a site nav (2026-09-13): Where We Build opens a panel of the pillars, towns and fire pages ---------- */
/* 2026-09-15: the wrapper divs inherited the body's 17px type, so their line box stood 10px taller than the plain
   links' 11px one and align-items:center set Where/How We Build ~2px lower than What We Build and About. The
   wrapper takes the nav links' size so every label shares one baseline. */
nav.desktop .has-sub{position:relative;font-size:11px}
nav.desktop .has-sub>a::after{content:"";display:inline-block;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin:0 0 3px 9px;opacity:.7}
nav.desktop .sub{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);padding-top:14px;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:70}
nav.desktop .sub-panel{background:var(--ivory);color:var(--char);border:1px solid var(--hairline);box-shadow:0 14px 34px rgba(0,0,0,.09);padding:1.3rem 1.6rem 1.4rem;display:grid;grid-template-columns:auto auto auto;gap:0 2.4rem;white-space:nowrap}
nav.desktop .has-sub:hover .sub,nav.desktop .has-sub:focus-within .sub,nav.desktop .has-sub.open .sub{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
nav.desktop .sub-panel.one{grid-template-columns:auto;min-width:13rem}
nav.desktop .sub-panel span.hd{display:block;font-family:var(--serif);font-size:15px;letter-spacing:0;text-transform:none;color:var(--char);padding:0 0 .45rem;margin-bottom:.35rem;border-bottom:1px solid var(--hairline)}
nav.desktop .sub-panel span.hd.mt{margin-top:1.1rem}
nav.desktop .sub-panel a{display:block;color:var(--char);opacity:.8;font-size:11px;letter-spacing:.14em;padding:.3rem 0}
nav.desktop .sub-panel a:hover,nav.desktop .sub-panel a.on{opacity:1}
nav.desktop .sub-panel a.on::after{display:none}
/* 2026-09-14: on the page a dropdown item points to, the current-page underline (a.on::after) was overwriting the
   chevron (::after) and left a stray mark. The chevron keeps ::after; the underline moves to ::before. */
nav.desktop .has-sub>a.on::after{position:static;left:auto;right:auto;bottom:auto;height:5px;background:none;opacity:.7}
nav.desktop .has-sub>a.on::before{content:"";position:absolute;left:0;right:0;bottom:-.35em;height:1px;background:currentColor;opacity:.6}
.mobile-menu{justify-content:flex-start;padding-top:7.5rem;padding-bottom:2rem;overflow:auto}
/* 2026-09-14: the open menu scrolls on short phones and its first row slid under the logo; the bar is opaque while the menu is open */
header.menu-open{background:var(--ivory)}
.mobile-menu .sub-m{display:flex;flex-wrap:wrap;gap:.1rem 1.1rem;padding:.4rem 0 .9rem;border-bottom:1px solid var(--hairline)}
.mobile-menu .sub-m a{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:.3rem 0;border:0;opacity:.75}
/* 2026-09-15: the same guard on desktop that the phone media query already carries: a fixed 100svh hero with
   flex-end content overflows out the TOP, under the fixed header, when the window is short (snapped or
   half-height windows). Let the hero grow with its content and keep a top clearance the height of the header.
   Identical rendering at normal window heights. Scoped above 760px so the phone rules keep their own values. */
@media (min-width:761px){
  .hero{height:auto;min-height:max(640px,100svh)}
  .hero-inner{padding-top:8.5rem}
}

/* ---------- header aligned with the content column (Caleb, 2026-09-13: on a wide screen the logo sat far left of
   the text, "in a column of its own"; the bar now shares the 1280 px column and gutters of .wrap) ---------- */
header .bar{max-width:1280px;margin:0 auto}
/* ---------- header logo: the ABD BUILD lockup (build/from-concept.py, brand pass) ---------- */
.logo{display:block;line-height:0}
.logo img{height:64px;width:auto;display:block;transition:height .5s var(--ease)}
.logo .logo-dark{display:none}
header.scrolled .logo img,header.on-light .logo img{height:50px}
header.scrolled .logo .logo-light,header.on-light .logo .logo-light,header.menu-open .logo .logo-light{display:none}
header.scrolled .logo .logo-dark,header.on-light .logo .logo-dark,header.menu-open .logo .logo-dark{display:block}
@media (max-width:760px){.logo img{height:56px}header.scrolled .logo img{height:46px}}
/* ---------- phone hero (Caleb, 2026-09-13, three passes: "very crowded", "still very congested looking and there is a
   lot of open space between the header and the text", then a phone screenshot: "something about this that doesnt look
   clean and professional"). What was not clean: the label wrapped like an accident (a long line, then a two-word
   orphan), four lines of body copy sat on the busiest part of the photograph (the pillar edge, the wall, the palms),
   the quiet link hung under the button, and the heavy veil turned the picture muddy. The fix is the luxury-builder
   phone hero: a label, a headline, one button, on a photograph that stays a photograph. Same words, phone only.
   The label's three phrases stack as three short lines (intentional, not wrapped). The lede and the quiet link are
   desktop-only (the lede's substance is the capabilities section; the work is the next scroll). The button runs the
   column. The veil is bottom-weighted and lighter. Desktop untouched. ---------- */
/* Georgia has no light cut, so the concept's 340-weight headline size reads heavier in Georgia; a step smaller keeps
   the two-line headline from dominating the frame (2026-09-13, the side-by-side). */
.hero h1{font-size:clamp(2.7rem,5.6vw,4.7rem);text-shadow:0 2px 28px rgba(15,13,11,.45),0 1px 3px rgba(15,13,11,.25)}
/* Caleb, 2026-09-13: "do you see any issues with the contrast in the words build firm in?" Yes: the end of the first
   headline line sits past the scrim, on pale sky and sunlit trees. The soft shadow above lifts it; the scrim below
   also fades out later (to 92% instead of 80%) so the headline's right end still has a whisper of veil under it. */
.hero .eyebrow,.hero p.lede,.hero-actions,.hero-places{text-shadow:0 1px 12px rgba(15,13,11,.3)}
.hero .eyebrow i{font-style:normal}
/* ---------- desktop hero scrim (Caleb, 2026-09-13: "do the desktop shadow too"). The concept's veil darkened the
   photograph top and bottom only, so the headline and lede sat across its hardest edge (the dark pillar meeting the
   lit wall) and read as text pasted on a picture. A left-weighted scrim under the text column, a lighter bottom band
   and a thin band under the header; the right half of the frame stays clean. The phone rule below overrides it. */
.hero::after{background:
  linear-gradient(to right,rgba(15,13,11,.5) 0%,rgba(15,13,11,.36) 30%,rgba(15,13,11,.16) 58%,rgba(15,13,11,.06) 78%,rgba(15,13,11,0) 92%),
  linear-gradient(to top,rgba(15,13,11,.5) 0%,rgba(15,13,11,0) 40%),
  linear-gradient(to bottom,rgba(15,13,11,.26) 0%,rgba(15,13,11,0) 22%)}
@media (max-width:760px){
  .hero{align-items:center}
  .hero-inner{padding-top:7.5rem;padding-bottom:3rem}
  .hero .eyebrow{font-size:10px;letter-spacing:.22em;gap:0;line-height:2;display:block}
  .hero .eyebrow::after{display:none}
  .hero .eyebrow b{display:block;white-space:nowrap;font-weight:inherit}
  .hero .eyebrow i{display:none}
  .hero h1{font-size:clamp(2.4rem,10vw,3.1rem);margin:1.4rem 0 2.2rem;line-height:1.08;max-width:9em}
  .hero h1 em{white-space:nowrap}
  .hero p.lede{display:none}
  .hero .hero-actions{margin-top:0;gap:0;flex-direction:column;align-items:stretch}
  .hero .btn{padding:1.15em 2em;text-align:center}
  .hero .quiet-link{display:none}
  .hero-places{display:none}
  .hero::after{background:linear-gradient(to top,rgba(15,13,11,.74) 0%,rgba(15,13,11,.38) 40%,rgba(15,13,11,.1) 70%,rgba(15,13,11,.26) 100%)}
}

/* ---------- capabilities: the stacked cards (Caleb, 2026-09-12: "clickable stacked-card module, four overlapping
   cards, editorial and tactile; the stack subtly expands on hover, the hovered card rises to the front, shadows deepen,
   siblings separate just enough to reveal platform order; restrained, premium, physically believable") ---------- */
.stack{position:relative;height:clamp(400px,33vw,480px);margin-top:clamp(1rem,2vw,2rem)}
.card{position:absolute;top:0;left:calc(var(--i) * 16.4%);width:47%;height:100%;background:#fff;border:1px solid var(--hairline);
  display:flex;flex-direction:column;overflow:hidden;z-index:calc(1 + var(--i));
  transform:translateY(calc(var(--i) * 8px));
  box-shadow:0 1px 2px rgba(46,46,46,.05),0 22px 44px -26px rgba(46,46,46,.38);
  transition:transform .75s var(--ease),box-shadow .75s var(--ease),left .75s var(--ease)}
.stack:hover .card{left:calc(var(--i) * 16.4% + var(--i) * 1.1%)}
.card:hover,.card:focus-visible{transform:translateY(calc(var(--i) * 8px - 16px)) scale(1.012);z-index:10;
  box-shadow:0 2px 4px rgba(46,46,46,.06),0 44px 80px -30px rgba(46,46,46,.5)}
.card:focus-visible{outline:1px solid var(--green);outline-offset:4px}
.card-media{height:56%;overflow:hidden;background:var(--stone);margin:0}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.card:hover .card-media img{transform:scale(1.03)}
.card-body{position:relative;flex:1;padding:1.25rem 3.2rem 1.4rem 1.4rem;border-top:1px solid var(--hairline)}
.card-body h3{font-size:clamp(1.1rem,1.55vw,1.4rem);margin:.45rem 0 .45rem;max-width:12em}
.card-body p{font-size:.88rem;line-height:1.55;max-width:26em}
.card-arrow{position:absolute;right:1.4rem;bottom:1.25rem;font-family:var(--serif);color:var(--char);opacity:.35;font-size:1.3rem;transition:opacity .3s,transform .5s var(--ease)}
.card:hover .card-arrow{opacity:.9;transform:translateX(6px)}
@media (max-width:1000px){.card{width:58%;left:calc(var(--i) * 14%)}.stack:hover .card{left:calc(var(--i) * 14% + var(--i) * 1.2%)}}
@media (max-width:760px){
  .stack{height:auto;display:grid;gap:1rem}
  .card{position:relative;left:0!important;width:100%;height:auto;transform:none!important;z-index:auto}
  .card-media{height:auto;aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){.card,.card-media img,.card-arrow{transition:none}}

/* ---------- approach A: the picture follows the phase ---------- */
.approach-a .ap-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(3rem,7vw,7rem);align-items:start}
.approach-a h2{font-size:clamp(2rem,3.6vw,3rem);margin-top:1.4rem;max-width:11em}
.approach-a .ap-lede{margin-top:1.6rem;font-size:1.02rem;max-width:28em}
.ap-steps{list-style:none;margin-top:2.6rem;border-top:1px solid var(--hairline-light)}
.ap-step{display:grid;grid-template-columns:4.5rem 1fr;gap:1.5rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--hairline-light);cursor:pointer;outline:none;transition:padding-left .6s var(--ease)}
.ap-step .n{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.05rem;opacity:.55;transition:opacity .4s}
.ap-step h3{color:var(--ivory);font-size:1.35rem;opacity:.6;transition:opacity .5s,transform .5s var(--ease)}
.ap-step p{font-size:.95rem;max-width:30em;max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .7s var(--ease),opacity .6s var(--ease),margin-top .5s var(--ease)}
.ap-step.on{padding-left:.6rem}
.ap-step.on .n{opacity:1}
.ap-step.on h3{opacity:1}
.ap-step.on p{max-height:9em;opacity:1;margin-top:.55rem}
.ap-pic{position:sticky;top:6rem;aspect-ratio:4/5;overflow:hidden;background:var(--char-soft);margin:0}
.ap-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1s var(--ease),transform 1.8s var(--ease)}
.ap-pic img.drawing{object-fit:contain;background:var(--ivory);padding:6%}
.ap-pic img.on{opacity:1;transform:none}
.ap-pic figcaption{position:absolute;left:1.2rem;bottom:1.1rem;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,240,232,.9);text-shadow:0 1px 8px rgba(0,0,0,.45);z-index:2}
.ap-count{position:absolute;right:1.2rem;top:1.1rem;font-family:var(--serif);font-style:italic;color:rgba(244,240,232,.85);font-size:.95rem;z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.ap-count b{font-weight:400;color:var(--gold)}
@media (max-width:860px){
  .approach-a .ap-grid{grid-template-columns:1fr}
  .ap-pic{position:relative;top:0;aspect-ratio:4/3;order:-1;margin-bottom:.5rem}
  .ap-step p{max-height:none;opacity:1;margin-top:.55rem}
  .ap-step h3{opacity:1}
}
/* ---------- approach B: five frames ---------- */
.approach-b{padding-bottom:0}
.fb-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.fb-lede{font-size:1.02rem;max-width:28em}
.frames{display:flex;height:clamp(520px,60vw,760px);background:var(--char)}
.fr{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;color:var(--ivory);transition:flex-grow .9s var(--ease)}
.fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.8s var(--ease),filter .8s var(--ease);filter:brightness(.82)}
.fr img.drawing{object-fit:cover;background:#fff;filter:none;transform:scale(1.15)}
.fr-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(47,74,60,.92) 0%,rgba(47,74,60,.55) 32%,rgba(47,74,60,0) 62%);pointer-events:none}
.fr-n{position:absolute;left:1.4rem;top:1.3rem;font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.15rem;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.fr-body{position:absolute;left:1.4rem;right:1.4rem;bottom:1.4rem;display:block}
.fr-t{display:block;font-family:var(--serif);font-size:clamp(1.25rem,1.8vw,1.7rem);line-height:1.15}
.fr-p{display:block;font-size:.9rem;line-height:1.55;color:rgba(244,240,232,.85);max-width:24em;margin-top:.7rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .8s var(--ease),opacity .7s var(--ease)}
.fr + .fr{border-left:1px solid rgba(244,240,232,.12)}
.frames:hover .fr{flex-grow:.82}
.fr:hover,.fr:focus-visible{flex-grow:2.2;outline:none}
.fr:hover img,.fr:focus-visible img{transform:scale(1);filter:brightness(.95)}
.fr:hover img.drawing,.fr:focus-visible img.drawing{transform:scale(1.08)}
.fr:hover .fr-p,.fr:focus-visible .fr-p{max-height:12em;opacity:1}
@media (max-width:860px){
  .fb-head{grid-template-columns:1fr}
  .frames{flex-direction:column;height:auto}
  .fr{height:64vw;min-height:280px;flex:none}
  .fr + .fr{border-left:0;border-top:1px solid rgba(244,240,232,.12)}
  .fr-p{max-height:none;opacity:1}
  .fr img{filter:brightness(.85)}
}
/* ---------- approach C: the ledger ---------- */
.approach-c{background:var(--ivory);color:var(--taupe)}
.approach-c .eyebrow{color:var(--oxide);opacity:1}
.approach-c .eyebrow::after{background:var(--gold)}
.approach-c h2{color:var(--char)}
.lg-head-row{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.lg-lede{font-size:1.02rem;max-width:28em}
.ledger{border-top:1px solid var(--hairline)}
.lg-row{border-bottom:1px solid var(--hairline)}
.lg-head{font:inherit;background:none;border:0;cursor:pointer;width:100%;display:grid;grid-template-columns:clamp(5rem,9vw,8rem) 1fr auto;align-items:center;gap:clamp(1rem,3vw,3rem);padding:clamp(1.2rem,2.2vw,1.8rem) 0;text-align:left;color:var(--char);transition:padding-left .6s var(--ease)}
.lg-n{font-family:var(--serif);font-size:clamp(2.6rem,6vw,5.2rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(201,162,78,.9);letter-spacing:.02em;transition:color .5s var(--ease)}
.lg-row.on .lg-n{color:var(--gold);-webkit-text-stroke:1px var(--gold)}
.lg-t{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.1}
.lg-pm{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--oxide);transition:transform .5s var(--ease)}
.lg-row.on .lg-pm{transform:rotate(45deg)}
.lg-head:hover{padding-left:.6rem}
.lg-body{max-height:0;overflow:hidden;transition:max-height .8s var(--ease)}
.lg-row.on .lg-body{max-height:640px}
.lg-inner{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding:.4rem 0 clamp(2rem,3.5vw,3rem) clamp(5rem,9vw,8rem)}
.lg-p{font-size:1.05rem;max-width:30em}
.lg-who{margin-top:1.4rem;font-size:.95rem;color:var(--char);max-width:28em}
.lg-k{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--oxide);margin-bottom:.4rem;font-weight:400}
.lg-pic{margin:0;overflow:hidden;background:var(--stone);position:relative;aspect-ratio:4/3}
.lg-pic img{width:100%;height:100%;object-fit:cover;display:block}
.lg-pic img.drawing{object-fit:contain;background:#fff;padding:5%}
.lg-pic figcaption{position:absolute;left:1rem;bottom:.9rem;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,240,232,.9);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.lg-pic img.drawing + figcaption{color:var(--taupe);text-shadow:none}
@media (max-width:860px){
  .lg-head-row{grid-template-columns:1fr}
  .lg-head{grid-template-columns:3.6rem 1fr auto}
  .lg-inner{grid-template-columns:1fr;padding-left:0}
  .lg-row.on .lg-body{max-height:1200px}
}
/* ---------- approach D: the film, scrubbed by scroll ---------- */
.approach-d{padding:0;background:var(--char)}
.film{position:relative;height:520vh}
.film-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--char)}
.film-poster,.film-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-poster{z-index:0}
.film-canvas{z-index:1}
.film-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(20,22,20,.78) 0%,rgba(20,22,20,.35) 34%,rgba(20,22,20,0) 60%),linear-gradient(to bottom,rgba(20,22,20,.45) 0%,rgba(20,22,20,0) 28%)}
.film-head{position:absolute;left:0;right:0;bottom:clamp(4rem,11vh,7rem);z-index:3;color:var(--ivory);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.film-head .eyebrow{color:var(--ivory);opacity:.85}
.film-head .eyebrow::after{background:var(--gold);opacity:1}
.film-head h2{color:var(--ivory);font-size:clamp(1.8rem,3.2vw,2.8rem);max-width:12em;margin-top:1rem;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.film.past-intro .film-head{opacity:0;transform:translateY(10px)}
.film:not(.past-intro) .film-beat{opacity:0;transform:translateY(18px)}
.film-beats{position:absolute;left:0;right:0;bottom:clamp(4rem,11vh,7rem);z-index:3;color:var(--ivory)}
.film-beat{position:absolute;left:clamp(1.4rem,5vw,4rem);bottom:0;max-width:30em;opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.film-beat.on{opacity:1;transform:none}
.film-beat .n{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.1rem}
.film-beat h3{color:var(--ivory);font-size:clamp(1.9rem,3.6vw,3.2rem);margin:.3rem 0 .6rem;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.film-beat p{font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.6;color:rgba(244,240,232,.86);max-width:28em}
.film-progress{position:absolute;right:clamp(1.4rem,5vw,4rem);bottom:clamp(2rem,5vh,3rem);z-index:3;display:flex;gap:6px;width:min(220px,30vw)}
.film-progress i{flex:1;height:1px;background:rgba(244,240,232,.28);position:relative;overflow:hidden}
.film-progress i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(var(--p,0));transform-origin:left}
.film-note{position:absolute;left:clamp(1.4rem,5vw,4rem);bottom:clamp(2rem,5vh,3rem);z-index:3;margin:0;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(244,240,232,.6);transition:opacity .6s}
.film.past-intro .film-note{opacity:0}
.film-fallback{padding:clamp(5rem,9vw,8rem) 0;color:var(--ivory)}
.film-fallback ol{list-style:none;margin-top:2rem}
.film-fallback li{padding:.8rem 0;border-top:1px solid var(--hairline-light)}
@media (max-width:760px){
  .film{height:420vh}
  .film-head h2{font-size:1.7rem}
  .film-beat h3{font-size:1.8rem}
  .film-beat{max-width:none;right:clamp(1.4rem,5vw,4rem)}
  .film-progress{width:120px}
}
@media (prefers-reduced-motion:reduce){
  .film{height:auto}
  .film-stage{position:relative;height:70vh}
  .film-beat{position:relative;opacity:1;transform:none;margin-top:1rem}
  .film-beats{position:relative;padding:2rem 0}
  .film-head{position:relative;bottom:auto;padding-top:2rem}
}