/* ---- fonts (self-hosted, no network call) ----
   OPTION B overrides the display face to Clash Display, below. Free Google display
   serifs - Playfair, Lora, Cormorant, Marcellus - were the single
   fastest mid-tier tell in the research, so none are used. */
@font-face{font-family:'Switzer';font-style:normal;font-weight:300;font-display:swap;src:url("switzer-300.woff2") format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:400;font-display:swap;src:url("switzer-400.woff2") format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:500;font-display:swap;src:url("switzer-500.woff2") format('woff2')}


/* ======== 2. BRAND ======== */
:root{
  --paper:    #F5F3EA;   /* oat ground. NOT white, on purpose. */
  --paper-2:  #FBFAF4;   /* raised */
  --paper-3:  #EBE7DA;   /* sunken band */
  --sand:     #DED7C7;   /* rules, fills */
  --stone:    #C3BCB1;   /* greige mid */
  --ink:      #1E1A15;   /* warm charcoal. NOT black, on purpose. */
  --ink-2:    #3A342B;
  --muted:    #6E6659;
  --accent:    #B33C0B;   /* THE accent. One hue. 5.30:1 on paper, 4.76:1 on paper-3. */
  --accent-l:  #E2652A;   /* DERIVED: same hue lifted for accent text on the dark bands.
                             #B33C0B measures 2.8:1 on --ink and fails. This is 5.05:1.
                             Not a second hue. Recolour --accent and lift this to match. */
  --accent-d:  #8A2F08;
  --line:     rgba(30,26,21,.14);
  --line-2:   rgba(30,26,21,.07);
  --display:  'Gambetta', Georgia, 'Times New Roman', serif;
  --body:     'Switzer', system-ui, -apple-system, sans-serif;
  --frame:    min(1560px, 90vw);
  --ease:     cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color:var(--ink);background:var(--paper)}
button{color:inherit;font:inherit}
body{font-family:var(--body);font-weight:400;background:var(--paper);color:var(--ink);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--accent);color:var(--paper)}

/* Display: sentence case, light weight, large. Never bold, never uppercase. */
h1,h2,h3,.disp{font-family:var(--display);font-weight:300;line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(2.9rem,6.6vw,7rem)}
h2{font-size:clamp(2.1rem,4.3vw,4.1rem)}
h3{font-size:clamp(1.35rem,1.7vw,1.72rem);line-height:1.14;letter-spacing:-.015em}
em.i{font-style:italic;font-weight:400}
.accent{color:var(--accent)}

.wrap{width:var(--frame);margin-inline:auto}
.measure{max-width:62ch}          /* wide frame, narrow measure */
.measure-sm{max-width:48ch}
section{position:relative}

/* The only uppercase in the file: an 11px micro-label. */
.label{font-family:var(--body);font-size:.688rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:.85em}
.label i{font-style:normal;color:var(--accent);font-variant-numeric:tabular-nums}
.label::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.65;flex:0 0 auto}

.lead{font-size:clamp(1.03rem,1.16vw,1.18rem);font-weight:300;color:var(--ink-2);line-height:1.62}
.sec-head{display:flex;flex-direction:column;gap:1.15rem}
.sec-head h2{margin-top:.15rem}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.on{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}
/* The expensive move: a mask wipe on imagery rather than a fade.
   AD SAFETY: .rv-mask is a MODIFIER and always rides on .rv. The ad
   re-arms .rv / .rv.on only, so a mask element that did not also carry
   .rv would never reveal and would render as a blank box in the ad's
   right pane. Never use .rv-mask on its own. */
.rv.rv-mask{clip-path:inset(0 0 100% 0);transform:none;
  transition:clip-path 1.25s var(--ease),opacity .8s var(--ease)}
.rv.rv-mask.on{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){
  .rv,.rv.rv-mask{opacity:1;transform:none;clip-path:none;transition:none}
}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.75rem;font-family:var(--body);
  font-weight:500;font-size:.875rem;letter-spacing:.005em;padding:1.06rem 2.05rem;border:none;cursor:pointer;
  border-radius:0;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-2}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);
  transition:transform .55s var(--ease)}
.btn:hover::after{transform:none}
.btn-solid{color:var(--paper)}
.btn-solid::before{background:var(--ink)}
.btn-solid::after{background:var(--accent)}
.btn-line{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-line::after{background:var(--ink)}
.btn-line:hover{color:var(--paper)}
.btn svg{width:1em;height:1em;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(5px)}

/* a quiet text link with a rule that draws in */
.tlink{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);padding-bottom:.45rem;position:relative}
.tlink::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);
  transition:width .6s var(--ease)}
.tlink:hover::after{width:100%}
.tlink svg{width:.85em;height:.85em;transition:transform .45s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ---------- nav ---------- */
/* A SOLID PAPER BAR AT ALL TIMES, on purpose. The editorial split hero
   puts photography under the right half of the nav, and a transparent bar
   left "Process" and "Questions" sitting unreadable on a dusk sky. A quiet
   paper bar with a hairline is also what the reference tier actually does. */
nav{position:fixed;inset:0 0 auto 0;z-index:100;padding:1.35rem 0;background:var(--paper);
  box-shadow:0 1px 0 var(--line-2);
  transition:padding .5s var(--ease),box-shadow .5s var(--ease)}
nav.solid{padding:.85rem 0;box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{display:flex;align-items:center;gap:.78rem}
.logo-mark{width:34px;height:34px;flex:0 0 auto;color:var(--accent)}
.logo-txt b{display:block;font-family:var(--display);font-weight:400;font-size:1.24rem;letter-spacing:-.02em;line-height:1}
.logo-txt span{display:block;font-size:.5rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);margin-top:.5em}
.nav-links{display:flex;gap:2.15rem;font-size:.855rem;font-weight:400}
.nav-links a{position:relative;padding:.35rem 0;color:var(--ink-2);transition:color .35s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:.1rem;width:0;height:1px;background:var(--accent);
  transition:width .5s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:1.6rem}
.nav-phone{font-size:.9rem;font-weight:500;white-space:nowrap;transition:color .35s var(--ease)}
.nav-phone:hover{color:var(--accent)}
.nav-right .btn{padding:.8rem 1.5rem;font-size:.815rem}
.burger{display:none;width:26px;height:14px;position:relative;background:none;border:0;cursor:pointer}
.burger span{position:absolute;left:0;width:100%;height:1.4px;background:var(--ink);transition:.4s var(--ease)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){bottom:0}
.burger.x span:nth-child(1){top:6px;transform:rotate(45deg)}
.burger.x span:nth-child(2){bottom:6.6px;transform:rotate(-45deg)}

/* ============ HERO ============
   Editorial split: type on paper, image full-bleed to the right
   and to the top. Not a scrim over a photo - that is the
   mid-tier hero. At 1280 the split is 44/56. */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);align-items:stretch;
  background:var(--paper)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;gap:1.9rem;
  padding:7.5rem clamp(2rem,4vw,5.2rem) 4.5rem clamp(1.6rem,5vw,calc((100vw - var(--frame))/2 + .5rem))}
.hero-copy h1{margin-top:.2rem}
.hero-ctas{display:flex;align-items:center;gap:1.7rem;flex-wrap:wrap;margin-top:.5rem}
.hero-phone{display:inline-flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:500;
  transition:color .35s var(--ease)}
.hero-phone svg{width:.95em;height:.95em;color:var(--accent)}
.hero-phone:hover{color:var(--accent)}
.hero-media{position:relative;overflow:hidden;background:var(--paper-3)}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a real vignette, not a coloured gradient wash */
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(20,17,12,.24) 100%)}
.hero-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;
  align-items:flex-end;gap:1rem;padding:1.7rem clamp(1.2rem,2.2vw,2.1rem);color:rgba(245,243,234,.9)}
.hero-meta span{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.hero-note{display:flex;align-items:center;gap:.7rem;font-size:.8rem;color:var(--muted);font-weight:300}
.hero-note b{width:5px;height:5px;background:var(--accent);flex:0 0 auto}

/* ============ STATS ============ */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:3.1rem 2rem 2.9rem;border-right:1px solid var(--line-2)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,3.5vw,3.4rem);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* NOTE the child combinator: .stat span would also select the counted
   span inside <b> and shrink the number to label size. */
.stat > span{display:block;margin-top:.85rem;font-size:.74rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.stat b span,.stat b i{display:inline}
.stat i{font-style:normal;color:var(--accent)}
.stat i.unit{font-size:.42em;letter-spacing:.02em;margin-left:.22em;color:var(--muted);vertical-align:baseline}

/* ============ SERVICES ============
   Art-directed, not a uniform grid: one tall portrait feature
   against three landscape cards. Bespoke ratios per slot. */
.services{padding:clamp(6rem,10vw,10.5rem) 0}
.svc-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);
  align-items:end;margin-bottom:clamp(3.2rem,5vw,5rem)}
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.2rem,2vw,2.1rem)}
.svc{position:relative;display:flex;flex-direction:column}
.svc-feature{grid-column:span 6;grid-row:span 2}
.svc-small{grid-column:span 3}
.svc-img{position:relative;overflow:hidden;background:var(--paper-3)}
.svc-feature .svc-img{aspect-ratio:3/4}
.svc-small .svc-img{aspect-ratio:4/5}
.svc-img img{width:100%;height:100%;object-fit:cover;
  transition:opacity .7s var(--ease)}     /* opacity only. never scale. */
.svc:hover .svc-img img{opacity:.9}
.svc-num{position:absolute;top:1.15rem;left:1.15rem;z-index:2;font-size:.66rem;font-weight:500;
  letter-spacing:.2em;color:rgba(245,243,234,.92);text-transform:uppercase}
.svc-body{padding-top:1.5rem;display:flex;flex-direction:column;gap:.78rem;flex:1}
.svc-body p{font-size:.925rem;font-weight:300;color:var(--muted);line-height:1.62;max-width:44ch}
.svc-feature .svc-body p{font-size:1rem;max-width:52ch}
.svc-more{margin-top:auto;padding-top:1.15rem}

/* ============ WIDE BAND ============ */
.band{position:relative;overflow:hidden;aspect-ratio:21/9;max-height:74vh}
.band img{width:100%;height:100%;object-fit:cover}
.band-cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.6rem,3vw,2.6rem);
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  background:linear-gradient(to top,rgba(20,17,12,.55),transparent 72%)}
.band-cap p{font-family:var(--display);font-weight:300;font-size:clamp(1.25rem,2.1vw,2rem);
  color:#F5F3EA;line-height:1.16;max-width:22ch;letter-spacing:-.02em}
.band-cap span{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,243,234,.72);white-space:nowrap}

/* ============ BEFORE / AFTER ============
   Research finding: ~3% of this trade puts one on the homepage,
   and for additions and second storeys it is the only image that
   communicates the achievement. It gets real room here. */
.ba{padding:clamp(6rem,10vw,10.5rem) 0;background:var(--paper-3)}
.ba-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);
  align-items:end;margin-bottom:clamp(2.6rem,4vw,3.6rem)}
.ba-frame{position:relative;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:none;
  aspect-ratio:16/9;background:var(--stone)}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-after-wrap{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.ba-tag{position:absolute;top:1.15rem;z-index:3;font-size:.64rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;padding:.5rem .85rem;pointer-events:none;color:#F5F3EA;
  background:rgba(20,17,12,.6);backdrop-filter:blur(6px)}
.ba-tag.b{left:1.15rem}
.ba-tag.a{right:1.15rem;background:rgba(92,100,68,.86)}
.ba-handle{position:absolute;top:0;bottom:0;width:1.5px;background:#F5F3EA;left:50%;z-index:4;pointer-events:none;
  box-shadow:0 0 0 1px rgba(20,17,12,.18)}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:52px;height:52px;
  transform:translate(-50%,-50%);border:1.5px solid #F5F3EA;background:rgba(20,17,12,.28);
  backdrop-filter:blur(6px);border-radius:50%}
.ba-handle::before{content:"";position:absolute;top:50%;left:50%;width:17px;height:9px;z-index:1;
  transform:translate(-50%,-50%);
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9' viewBox='0 0 17 9'%3E%3Cpath d='M5 .5L1 4.5l4 4M12 .5l4 4-4 4' fill='none' stroke='%23F5F3EA' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ba-note{margin-top:1.35rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--muted);font-weight:300}

/* ============ PROJECTS ============
   Name + place is the premium convention. The budget band and
   the week count are the differentiator: one firm in thirty
   publishes either. */
.projects{padding:clamp(6rem,10vw,10.5rem) 0}
.proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,3.4vw,3.9rem);
  margin-top:clamp(3rem,4.5vw,4.4rem)}
.proj{display:flex;flex-direction:column}
.proj-img{position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:3/2}
.proj:nth-child(2) .proj-img,.proj:nth-child(3) .proj-img{aspect-ratio:16/11}
.proj-img img{width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease)}
.proj:hover .proj-img img{opacity:.9}
.proj-body{padding-top:1.55rem}
.proj-place{font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.proj-body h3{margin:.85rem 0 .75rem}
.proj-body p{font-size:.92rem;font-weight:300;color:var(--muted);line-height:1.62;max-width:46ch}
.proj-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.65rem;padding-top:1.3rem;
  border-top:1px solid var(--line)}
.proj-meta div span{display:block;font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted)}
.proj-meta div b{display:block;margin-top:.5rem;font-family:var(--display);font-weight:400;font-size:1.06rem;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.proj-note{margin-top:clamp(2.4rem,3.5vw,3.4rem);padding-top:1.6rem;border-top:1px solid var(--line);
  font-size:.82rem;font-weight:300;color:var(--muted)}

/* ============ PROCESS ============
   Five steps. "Conversation" first, warranty last - both are the
   trade's own conventions, measured across 14 published processes. */
.process{padding:clamp(6rem,10vw,10.5rem) 0;background:var(--ink);color:var(--paper)}
.process h2,.process h3{color:var(--paper)}
.process .label{color:rgba(245,243,234,.55)}
.process .label::before{background:var(--accent);opacity:1}
.process .lead{color:rgba(245,243,234,.72)}
.proc-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);
  align-items:end;margin-bottom:clamp(3.4rem,5vw,5rem)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(245,243,234,.16)}
.step{padding:2.4rem 1.6rem 0 0;border-right:1px solid rgba(245,243,234,.1);padding-right:1.6rem}
.step:last-child{border-right:0}
.step-n{font-family:var(--display);font-weight:300;font-size:2.2rem;color:var(--accent);line-height:1;
  font-variant-numeric:tabular-nums}
.step h3{margin:1.5rem 0 .8rem;font-size:1.16rem}
.step p{font-size:.87rem;font-weight:300;color:rgba(245,243,234,.62);line-height:1.62}
.step.last .step-n{color:var(--paper)}

/* ============ FAQ ============
   ~13% of this trade puts one on the homepage. The five questions
   are the five real fears, in the order homeowners ask them. */
.faq{padding:clamp(6rem,10vw,10.5rem) 0}
.faq-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,7rem);
  align-items:start}
.faq-aside{position:sticky;top:7rem;display:flex;flex-direction:column;gap:1.4rem}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--display);
  font-weight:300;font-size:clamp(1.16rem,1.55vw,1.48rem);letter-spacing:-.015em;color:var(--ink);
  padding:1.65rem 3rem 1.65rem 0;position:relative;line-height:1.24;transition:color .4s var(--ease)}
.faq-q:hover{color:var(--accent)}
.faq-q::after,.faq-q::before{content:"";position:absolute;right:.35rem;top:50%;background:var(--accent);
  transition:transform .5s var(--ease),opacity .5s var(--ease)}
.faq-q::after{width:13px;height:1.2px;transform:translateY(-50%)}
.faq-q::before{width:1.2px;height:13px;right:.35rem;margin-right:5.9px;transform:translateY(-50%)}
.faq-item.open .faq-q::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{font-size:.95rem;font-weight:300;color:var(--muted);line-height:1.68;max-width:58ch;
  padding-bottom:1.75rem}

/* ============ CRAFT / ABOUT ============ */
.craft{padding:clamp(6rem,10vw,10.5rem) 0;background:var(--paper-3)}
.craft-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,6rem);
  align-items:center}
.craft-imgs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.4vw,1.4rem)}
.craft-imgs .ph{overflow:hidden;background:var(--stone)}
.craft-imgs .ph:first-child{aspect-ratio:4/5;align-self:end}
.craft-imgs .ph:last-child{aspect-ratio:3/4}
.craft-imgs img{width:100%;height:100%;object-fit:cover}
.feats{display:flex;flex-direction:column;gap:0;margin-top:2.4rem;border-top:1px solid var(--line)}
.feat{padding:1.6rem 0;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:1.5rem;align-items:baseline}
.feat b{font-family:var(--display);font-weight:400;font-size:.95rem;color:var(--accent);
  font-variant-numeric:tabular-nums}
.feat p{font-size:.93rem;font-weight:300;color:var(--muted);line-height:1.6}
.feat p strong{font-weight:500;color:var(--ink);display:block;margin-bottom:.3rem;font-size:.97rem}

/* ============ REVIEWS ============ */
.reviews{padding:clamp(6rem,10vw,10.5rem) 0}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,2.6vw,3rem);
  margin-top:clamp(3rem,4.5vw,4.2rem)}
.rev{padding-top:1.9rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1.3rem}
.rev p{font-family:var(--display);font-weight:300;font-size:clamp(1.08rem,1.35vw,1.3rem);line-height:1.42;
  letter-spacing:-.012em}
.rev footer{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-top:auto}

/* ============ ABOUT ============ */
.about{padding:clamp(6rem,10vw,10.5rem) 0;border-top:1px solid var(--line)}
.about-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2.5rem,5vw,6rem);
  align-items:center}
.about-img{overflow:hidden;aspect-ratio:4/3;background:var(--stone)}
.about-img img{width:100%;height:100%;object-fit:cover}

/* ============ CONTACT ============ */
.contact{padding:clamp(6rem,10vw,10.5rem) 0;background:var(--ink);color:var(--paper)}
.contact h2{color:var(--paper)}
.contact .label{color:rgba(245,243,234,.55)}
.contact .label::before{background:var(--accent);opacity:1}
.contact .lead{color:rgba(245,243,234,.72)}
.contact-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2.5rem,6vw,7rem);
  align-items:start}
.contact-side{display:flex;flex-direction:column;gap:2.4rem}
.cinfo{display:flex;flex-direction:column;gap:1.35rem;padding-top:2rem;border-top:1px solid rgba(245,243,234,.16)}
.cinfo div span{display:block;font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,243,234,.5)}
.cinfo div a,.cinfo div p{display:block;margin-top:.45rem;font-size:1rem;font-weight:300;color:var(--paper)}
.cinfo div a:hover{color:var(--accent)}
form{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 1.4rem}
.f-full{grid-column:1/-1}
label{display:block;font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,243,234,.5);margin-bottom:.7rem}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(245,243,234,.24);
  color:var(--paper);font-family:var(--body);font-size:.97rem;font-weight:300;padding:.65rem 0;
  border-radius:0;transition:border-color .45s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--accent)}
input::placeholder,textarea::placeholder{color:rgba(245,243,234,.32)}
select{cursor:pointer}
select option{background:#1E1A15;color:#F5F3EA}
textarea{resize:vertical;min-height:104px}
.f-note{grid-column:1/-1;font-size:.78rem;font-weight:300;color:rgba(245,243,234,.5);line-height:1.6}
form .btn{grid-column:1/-1;justify-self:start}
.contact .btn-solid{color:var(--ink)}
.contact .btn-solid::before{background:var(--paper)}
.contact .btn-solid::after{background:var(--accent)}
.contact .btn-solid:hover{color:var(--paper)}

/* ============ FOOTER ============ */
footer.site{background:var(--ink);color:rgba(245,243,234,.62);padding:0 0 3rem;font-size:.85rem;font-weight:300}
.foot-top{border-top:1px solid rgba(245,243,234,.14);padding:3.4rem 0 2.8rem;
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:2.5rem}
.foot-col h4{font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,243,234,.42);margin-bottom:1.2rem;font-family:var(--body)}
.foot-col a{display:block;padding:.3rem 0;transition:color .35s var(--ease)}
.foot-col a:hover{color:var(--accent)}
.foot-brand .logo-txt b{color:var(--paper);font-size:1.3rem}
.foot-brand p{margin-top:1.1rem;max-width:34ch;line-height:1.62}
.foot-bot{border-top:1px solid rgba(245,243,234,.1);padding-top:1.8rem;display:flex;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;font-size:.78rem;color:rgba(245,243,234,.44)}
.foot-bot a:hover{color:var(--accent)}
.demo-note{font-size:.72rem;color:rgba(245,243,234,.34);margin-top:1.1rem;max-width:52ch;line-height:1.6}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,260%);z-index:200;background:var(--accent);
  color:var(--paper);padding:.95rem 1.6rem;font-size:.87rem;font-weight:400;transition:transform .6s var(--ease)}
#toast.show{transform:translate(-50%,0)}

/* ---------- demo watermark ---------- */
.demo-media{position:relative}
.demo-stamp{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(-45deg,rgba(30,26,21,.05) 0 22px,transparent 22px 44px)}
.demo-stamp::after{content:"SAMPLE PHOTO";position:absolute;left:.7rem;bottom:.7rem;font-family:var(--body);
  font-size:.58rem;font-weight:500;letter-spacing:.2em;color:rgba(245,243,234,.9);
  background:rgba(30,26,21,.55);padding:.35rem .6rem}

/* ============ RESPONSIVE ============
   NAV BREAKPOINT IS 1000px AND MUST NOT BE RAISED.
   1280 is the only iframe width that keeps a real desktop nav in
   the ad's right pane. A hamburger there reads as a phone
   screenshot and kills the comparison the ad is making. */
@media(max-width:1200px){
  .steps{grid-template-columns:repeat(3,1fr);row-gap:2.4rem}
  .step:nth-child(3){border-right:0}
  .stats-in{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line-2)}
}
@media(max-width:1000px){
  .nav-links,.nav-right .btn{display:none}
  .burger{display:block}
  nav.open{background:var(--paper);box-shadow:0 1px 0 var(--line-2)}
  .nav-links.open{display:flex;position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0;
    background:var(--paper);padding:1rem 5vw 2rem;border-bottom:1px solid var(--line)}
  .nav-links.open a{padding:1rem 0;border-bottom:1px solid var(--line-2);font-size:1.02rem}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-copy{padding:8rem 5vw 3.5rem;order:2}
  .hero-media{order:1;aspect-ratio:auto;height:clamp(300px,52vh,460px);width:100%}
  .svc-top,.ba-head,.proc-top,.craft-in,.about-in,.contact-in,.faq-in{grid-template-columns:1fr}
  .faq-aside{position:static}
  .svc-feature,.svc-small{grid-column:span 6}
  .svc-feature .svc-img{aspect-ratio:4/5}
  .rev-grid{grid-template-columns:1fr;gap:2.2rem}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  :root{--frame:90vw}
  .proj-grid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(6,1fr)}
  .steps{grid-template-columns:1fr;border-top:0}
  .step{border-right:0;border-top:1px solid rgba(245,243,234,.16);padding:2rem 0 0}
  .stats-in{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line-2);padding:2.2rem 0}
  .stat:last-child{border-bottom:0}
  form{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .craft-imgs .ph:first-child{align-self:auto}
  .band{aspect-ratio:16/10}
}
/* ============ COLUMBINE ADDITIONS ============ */
/* The mold's band scrim (.55 black, fading out at 72%) was tuned against a dark
   dusk photograph. Over the bright, sunlit site-work band the caption drops to
   about 2.9:1 and washes out. Deeper, and carried further up the frame. */
.band-cap{background:linear-gradient(to top,rgba(20,17,12,.80),rgba(20,17,12,.42) 46%,transparent 88%)}
.band-cap span{color:rgba(245,243,234,.86)}

/* The mold's corner number is light type straight onto the photo with no scrim.
   That works on its own dark demo photography and disappears on a bright client
   kitchen. A small corner wash fixes it without touching the number itself. */
.svc-img::before{content:"";position:absolute;top:0;left:0;width:10rem;height:5.5rem;z-index:1;
  pointer-events:none;background:linear-gradient(135deg,rgba(30,26,21,.62),rgba(30,26,21,0) 72%)}

/* accent text on the dark bands takes the lifted step, or it fails AA at 11px */
.process .label i,.contact .label i,.hero-wide .label i,footer.site .label i,
.process .step-n{color:var(--accent-l)}
.process .label::before,.contact .label::before,.hero-wide .label::before{background:var(--accent-l)}

/* gallery: real client photography. Captions ALWAYS visible. */
.gal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.7vw,1.7rem);margin-top:clamp(3rem,4.4vw,4.6rem)}
.gal{display:block}
.gal-img{position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:4/3}
.gal-img img{width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease)}
.gal:hover .gal-img img{opacity:.86}
.gal figcaption{display:block;margin-top:.7rem;font-size:.83rem;color:var(--muted);line-height:1.5}
.gal figcaption b{display:block;font-weight:500;color:var(--ink-2);font-size:.688rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.3rem}
.gal-note{margin-top:clamp(2rem,2.6vw,2.6rem);font-size:.86rem;color:var(--muted)}

/* in-progress strip */
.studs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.7vw,1.7rem);margin-top:clamp(2.8rem,4vw,4.2rem)}
.studs figure{margin:0}
.studs .ph{position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:4/3}
.studs .ph img{width:100%;height:100%;object-fit:cover}
.studs figcaption{margin-top:.7rem;font-size:.83rem;color:var(--muted);line-height:1.5}

/* roll-off price table */
.bins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(2.6rem,3.6vw,3.8rem);border-top:1px solid var(--line)}
.bin{padding:clamp(1.7rem,2.3vw,2.4rem) clamp(1.3rem,1.8vw,2rem);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.bin:last-child{border-right:0}
.bin-size{font-family:var(--display);font-weight:300;font-size:clamp(2rem,3vw,2.9rem);line-height:1;letter-spacing:-.02em}
.bin-size span{font-size:.42em;color:var(--muted);letter-spacing:0;margin-left:.35em}
.bin-dim{margin-top:.75rem;font-family:var(--body);font-size:.688rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bin-p{margin-top:1.25rem;font-size:1.02rem;color:var(--ink-2)}
.bin-p b{color:var(--accent);font-weight:500}
.bin-fits{margin-top:.85rem;font-size:.9rem;color:var(--muted);line-height:1.55}
.bins-note{margin-top:1.4rem;font-size:.83rem;color:var(--muted)}

/* nav: the site-work tab reads as a separate destination */
.nav-links a.tab{color:var(--accent)}
.nav-links a.tab::after{background:var(--accent)}

/* excavation page: hero runs full-bleed rather than split */
.hero.hero-wide{display:block;padding:0;min-height:0}
.hero-wide .hw{position:relative;min-height:clamp(560px,84vh,860px);display:flex;align-items:flex-end;overflow:hidden}
.hero-wide .hw>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-wide .hw::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(30,26,21,.86) 0%,rgba(30,26,21,.66) 42%,rgba(30,26,21,.22) 78%,rgba(30,26,21,.34) 100%)}
.hero-wide .hw-in{position:relative;z-index:2;width:var(--frame);margin-inline:auto;padding:clamp(4rem,9vw,8.5rem) 0 clamp(3rem,5vw,4.6rem)}
.hero-wide h1,.hero-wide .lead{color:var(--paper)}
.hero-wide .label{color:rgba(245,243,234,.72)}
.hero-wide .hero-note{color:rgba(245,243,234,.72);border-top:1px solid rgba(245,243,234,.2)}
.hero-wide .hero-phone{color:var(--paper);border-bottom-color:rgba(245,243,234,.4)}
@media(max-width:900px){.hero-wide .hw::after{background:linear-gradient(180deg,rgba(30,26,21,.55) 0%,rgba(30,26,21,.78) 55%,rgba(30,26,21,.9) 100%)}}

/* excavation service list: two honest groups */
.grp{margin-top:clamp(3rem,4.4vw,4.6rem)}
.grp-h{display:flex;align-items:baseline;gap:1.1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.grp-h h3{font-size:clamp(1.25rem,1.55vw,1.6rem)}
.grp-h span{font-family:var(--body);font-size:.688rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.wcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.7vw,1.7rem);margin-top:clamp(1.6rem,2.2vw,2.2rem)}
.wc{display:flex;flex-direction:column}
.wc-img{position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:4/3}
.wc-img img{width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease)}
.wc:hover .wc-img img{opacity:.88}
.wc-n{position:absolute;left:0;top:0;z-index:3;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:.688rem;font-weight:500;letter-spacing:.18em;padding:.55rem .8rem}
.wc h4{font-family:var(--display);font-weight:300;font-size:clamp(1.18rem,1.45vw,1.42rem);line-height:1.14;
  letter-spacing:-.015em;margin-top:1.05rem}
.wc p{margin-top:.6rem;font-size:.93rem;color:var(--muted);line-height:1.6}

@media(max-width:1000px){
  .gal-grid,.studs-grid,.wcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bins{grid-template-columns:1fr}
  .bin{border-right:0}
}
@media(max-width:620px){
  .gal-grid,.studs-grid,.wcards{grid-template-columns:1fr}
}

/* ============ MULTI-PAGE ADDITIONS ============ */
/* sub-page hero: one photograph, title over it, clearing the fixed nav */
.phero{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(360px,52vh,560px)}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,12,.84),rgba(20,17,12,.40) 52%,rgba(20,17,12,.30))}
.phero-in{position:relative;z-index:2;width:var(--frame);margin-inline:auto;
  padding:clamp(7rem,12vw,10rem) 0 clamp(2.4rem,3.6vw,3.6rem)}
.phero h1{color:var(--paper);font-size:clamp(2.5rem,5.2vw,4.8rem);margin-top:.9rem}
.phero .label{color:rgba(245,243,234,.74)}
.phero .label::before{background:var(--accent-l);opacity:1}
.phero .label i{color:var(--accent-l)}
.phero .lead{color:rgba(245,243,234,.88);margin-top:1.15rem}

/* section intro used on the service pages */
.sec{padding:clamp(5rem,8vw,8rem) 0}
.sec.alt{background:var(--paper-3)}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,6rem);align-items:start}
.incl{list-style:none;margin-top:2rem;border-top:1px solid var(--line)}
.incl li{padding:.95rem 0 .95rem 2rem;border-bottom:1px solid var(--line-2);position:relative;
  font-size:.98rem;font-weight:300;color:var(--ink-2)}
.incl li::before{content:"";position:absolute;left:.15rem;top:1.45rem;width:9px;height:1px;background:var(--accent)}

/* compact CTA band closing every page. It is an ink ground, so its micro-label
   takes the same treatment as .process and .contact or it fails AA at 11px. */
.cta{background:var(--ink);color:var(--paper);padding:clamp(4rem,7vw,6.5rem) 0}
.cta .label{color:rgba(245,243,234,.72)}
.cta .label i{color:var(--accent-l)}
.cta .label::before{background:var(--accent-l);opacity:1}
.cta h2{color:var(--paper)}
.cta .lead{color:rgba(245,243,234,.74)}
.cta-in{display:flex;justify-content:space-between;align-items:flex-end;gap:2.5rem;flex-wrap:wrap}
.cta .btn-solid{color:var(--ink)}
.cta .btn-solid::before{background:var(--paper)}
.cta .btn-solid::after{background:var(--accent-l)}
.cta-phone{display:inline-flex;align-items:center;gap:.6rem;color:var(--paper);
  border-bottom:1px solid rgba(245,243,234,.4);padding-bottom:.2rem;font-size:1.02rem}
.cta-phone svg{width:17px;height:17px}
@media(max-width:900px){.two{grid-template-columns:1fr}.cta-in{flex-direction:column;align-items:flex-start}}

/* ============ REVIEW FIXES (2026-09-08) ============ */

/* 1. The site-work nav link was accent-coloured to mark it as a different
   destination. It reads as a mistake beside seven neutral links, so it now
   matches them and only the hover underline distinguishes it. */
.nav-links a.tab{color:var(--ink-2)}
.nav-links a.tab:hover{color:var(--ink)}

/* 2. .svc-body is flex:1 and .svc-more is margin-top:auto, which bottom-aligns
   the link. Right for the three small cards, whose bodies match in height. The
   FEATURE card spans two grid rows, so its body stretched and the link fell most
   of a screen below its own paragraph. Only the feature card opts out. */
.svc-feature .svc-body{flex:0 0 auto}
.svc-feature .svc-more{margin-top:0}

/* 4. One weight for the micro-label rule everywhere: the dark-band overrides had
   pushed it to opacity 1 while the light sections sat at .65. line-height:1 makes
   the flex centring land on the uppercase glyphs instead of on a line box padded
   out with ascender and descender space, which is what left the dash sitting low. */
.label{line-height:1}
.label::before{opacity:1;height:1px}
.process .label::before,.contact .label::before,.cta .label::before,
.hero-wide .label::before,.phero .label::before{opacity:1;height:1px}

/* 5. A three-up grid strands 1 or 2 items whenever the count is not a multiple of
   three. Six columns with each item spanning two lets a trailing orphan widen to
   fill its row instead of sitting alone in column one. */
.gal-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.gal{grid-column:span 2}
.gal:last-child:nth-child(3n+1){grid-column:span 6}
.gal:last-child:nth-child(3n+1) .gal-img{aspect-ratio:21/9}
.gal:nth-last-child(2):nth-child(3n+1){grid-column:span 3}
.gal:last-child:nth-child(3n+2){grid-column:span 3}
.gal:nth-last-child(2):nth-child(3n+1) .gal-img,
.gal:last-child:nth-child(3n+2) .gal-img{aspect-ratio:3/2}

/* 3. Every page closes on a real form now, not a link to the contact page. */
.cta-in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:start}
.cta form{grid-template-columns:repeat(2,1fr);gap:1.15rem 1.1rem;margin-top:.35rem}
.cta-actions{display:flex;gap:1.7rem;align-items:center;flex-wrap:wrap;margin-top:1.9rem}
.cta .tlink{color:var(--paper)}
.cta .tlink::after{background:var(--accent-l)}

@media(max-width:1000px){
  /* four columns here, so two figures to a row and the orphan test is simply an
     odd count. The 3n selectors are the six column ones and have to be undone. */
  .gal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gal,
  .gal:last-child:nth-child(3n+1),
  .gal:nth-last-child(2):nth-child(3n+1),
  .gal:last-child:nth-child(3n+2){grid-column:span 2}
  .gal .gal-img,
  .gal:last-child:nth-child(3n+1) .gal-img,
  .gal:nth-last-child(2):nth-child(3n+1) .gal-img,
  .gal:last-child:nth-child(3n+2) .gal-img{aspect-ratio:4/3}
  .gal:last-child:nth-child(odd){grid-column:span 4}
  .gal:last-child:nth-child(odd) .gal-img{aspect-ratio:21/9}
}
@media(max-width:900px){.cta-in{grid-template-columns:1fr}}
@media(max-width:620px){
  /* one column: every span selector above has to come back to a single track */
  .gal-grid{grid-template-columns:1fr}
  .gal,.gal:last-child:nth-child(3n+1),.gal:nth-last-child(2):nth-child(3n+1),
  .gal:last-child:nth-child(3n+2),.gal:last-child:nth-child(odd){grid-column:span 1}
  .gal .gal-img,.gal:last-child:nth-child(3n+1) .gal-img,
  .gal:nth-last-child(2):nth-child(3n+1) .gal-img,
  .gal:last-child:nth-child(3n+2) .gal-img,
  .gal:last-child:nth-child(odd) .gal-img{aspect-ratio:4/3}
}

/* ============ SECTION RHYTHM (2026-09-08) ============ */
/* The stacked sections carried 144px of padding on each side, so any two of them
   put 288px of empty paper between the end of one and the label of the next.
   On the home and site work pages that gap sits either side of a photo band or a
   dark block, so it reads as separation. On the interior pages it is plain paper
   on plain paper and just reads as a hole. Two changes: bring the base rhythm
   down, then close the seam entirely where two sections share the same ground. */

.services,.ba,.projects,.process,.faq,.craft,.reviews,.about,.sec{
  padding-top:clamp(4rem,6.4vw,6.6rem);
  padding-bottom:clamp(4rem,6.4vw,6.6rem)
}
.cta{padding-top:clamp(3.6rem,6vw,5.4rem);padding-bottom:clamp(3.6rem,6vw,5.4rem)}
/* contact opens its page, so it keeps its top clearance; only the foot comes in */
.contact{padding-bottom:clamp(4rem,6.4vw,6.6rem)}

/* same ground twice in a row: one section's padding is the whole seam */
.sec:not(.alt) + .projects,
.sec:not(.alt) + .faq,
.projects + .projects,
.projects + .faq,
.projects + .sec:not(.alt),
.faq + .projects,
.faq + .sec:not(.alt){padding-top:0}

/* ============ HEADER COLOUR (2026-09-08) ============ */
/* The page headers read as grey. The photograph sat under a near black scrim
   that took most of the colour out of it, and every word was the same cream, so
   the only colour above the fold was a ten pixel dash. Two changes: the accent
   now carries the second half of each headline, and the photograph is turned up
   instead of being left flat under the gradient. The scrim comes down slightly
   in the middle to let more of the picture through, and up at the foot so the
   type stays crisp where it actually sits. */

/* photo headers: the sub-page hero and the full bleed site work hero */
.phero>img,.hero-wide .hw>img{filter:saturate(1.5) contrast(1.12) brightness(1.06)}
.phero::after{background:linear-gradient(to top,
  rgba(20,17,12,.86),rgba(20,17,12,.46) 54%,rgba(20,17,12,.30))}
.phero h1 em.i,.hero-wide h1 em.i{color:var(--accent-l)}

/* home: the headline sits on the cream panel, so it takes the deeper accent */
.hero-copy h1 em.i{color:var(--accent)}
.hero-media img,.hero-media video{filter:saturate(1.42) contrast(1.08)}

/* contact has no photo header - its opening block IS the header, so the
   headline there takes the accent too and the page is not the odd one out */
.contact .sec-head h2 em.i{color:var(--accent-l)}



/* ============================================================
   OPTION B - "SECTION". The dark sibling of the Editorial build.
   Same nine pages, same copy, same photographs. A different
   DESIGN, not a recolour:
     - deep warm charcoal ground instead of bone
     - Clash Display grotesk instead of Gambetta serif
     - full-bleed hero with the type over the photograph
     - services as alternating full-width rows, not a 12-col grid
     - two-up galleries at twice the size
   Tokens keep their meaning: --paper is the ground, --ink is text.
   ============================================================ */
@font-face{font-family:'Clash Display';font-style:normal;font-weight:500;font-display:swap;src:url("clash-display-500.woff2") format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:600;font-display:swap;src:url("clash-display-600.woff2") format('woff2')}

:root{
  --paper:    #16130F;   /* warm charcoal ground. NOT black, on purpose. */
  --paper-2:  #201C17;   /* raised */
  --paper-3:  #1B1712;   /* sunken band */
  --sand:     #2E2921;
  --stone:    #4A4238;
  --ink:      #F2EFE6;   /* warm cream text. NOT white, on purpose. */
  --ink-2:    #D8D3C6;
  --muted:    #9C9385;
  --accent:   #E2652A;   /* the SAME hue as Option A, lifted for a dark ground. 5.4:1 */
  --accent-d: #C4501B;
  --accent-l: #F08A52;
  --line:     rgba(242,239,230,.13);
  --line-2:   rgba(242,239,230,.065);
  --display:  'Clash Display','Switzer',system-ui,sans-serif;
}
html,body{background:var(--paper);color:var(--ink)}

/* Display is a grotesk here, so it wants weight and tighter tracking than
   Gambetta did. Large and MEDIUM, where Option A is large and light. */
h1,h2,h3,.disp{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.02}
h1{font-size:clamp(3rem,7vw,7.4rem)}
h2{font-size:clamp(2.2rem,4.6vw,4.3rem)}
h3{font-size:clamp(1.4rem,1.8vw,1.85rem);letter-spacing:-.02em}
em.i{font-style:normal;font-weight:600;color:var(--accent)}
/* Clash Display draws a SQUARE period (glyph bounds 136x155 at 1000upm). At display
   size a lone cream square trailing an orange phrase reads as a rendering fault, so
   the build moves that full stop inside the <em> and it takes the accent with it. */
.accent{color:var(--accent)}
::selection{background:var(--accent);color:var(--paper)}

/* nav */
nav{background:var(--paper);border-bottom:1px solid var(--line-2)}
.nav-links a{color:var(--ink-2)}
/* the site work tab sits in the row like any other link. Accent here read as a
   mistake rather than emphasis, so it matches its neighbours. */
.nav-links a.tab{color:var(--ink-2)}
.nav-links a.tab:hover{color:var(--ink)}
.btn-solid{color:var(--paper)}
.btn-solid::before{background:var(--ink)}
.btn-solid::after{background:var(--accent)}
.btn-line{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- HERO: full bleed, type over the photograph ---------- */
.hero{position:relative;display:block;min-height:clamp(600px,88vh,880px);
  padding:0;overflow:hidden;border-bottom:1px solid var(--line-2)}
.hero-media{position:absolute;inset:0;background:var(--paper-3)}
.hero-media::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(22,19,15,.93) 0%,rgba(22,19,15,.74) 40%,rgba(22,19,15,.26) 72%,rgba(22,19,15,.40) 100%)}
.hero-copy{position:relative;z-index:2;width:var(--frame);margin-inline:auto;
  padding:clamp(9rem,15vw,13rem) 0 clamp(3.5rem,6vw,6rem);max-width:none}
.hero-copy>*{max-width:min(46rem,88%)}
.hero-meta{z-index:3}
.hero-note{border-top:1px solid var(--line)}

/* sub-page hero, taller and heavier than Option A's */
.phero{min-height:clamp(420px,58vh,620px)}
.phero::after{background:linear-gradient(to top,rgba(22,19,15,.92),rgba(22,19,15,.52) 55%,rgba(22,19,15,.38))}
.phero h1{color:var(--ink)}
/* The excavation hero sets these to --paper, which was cream over its photo.
   Inverted that is dark type on a dark scrim and disappears completely.
   The checker cannot catch it: text on photography is judged by eye. */
.hero-wide h1,.hero-wide .lead,.hero-wide .hero-phone{color:var(--ink)}
.hero-wide .hero-phone{border-bottom-color:var(--line)}
.hero-wide .label,.hero-wide .hero-note{color:var(--ink-2)}
.phero .lead{color:var(--ink-2)}

/* ---------- SERVICES: alternating full-width rows ---------- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:clamp(3rem,5vw,5.5rem)}
.svc,.svc-feature,.svc-small{grid-column:auto;grid-row:auto}
.svc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4.5rem);align-items:center;
  padding-bottom:clamp(3rem,5vw,5.5rem);border-bottom:1px solid var(--line-2)}
.svc:last-child{border-bottom:0;padding-bottom:0}
.svc:nth-child(even) .svc-img{order:2}
.svc-img{aspect-ratio:4/3!important;background:var(--paper-2)}
.svc-feature .svc-img{aspect-ratio:4/3!important}
.svc-body{padding-top:0}
.svc-body p{max-width:46ch;color:var(--ink-2)}
.svc-feature .svc-body p{max-width:46ch}
.svc-num{color:var(--ink);background:var(--paper);padding:.5rem .75rem;top:0;left:0}
.svc-img::before{display:none}

/* ---------- GALLERIES: two up, larger ---------- */
/* ---------- gallery: two-up, on the shared six column grid ----------
   The shared sheet lays galleries out on SIX columns so a trailing orphan can
   widen to fill its row. Option B runs two-up, so each figure takes three of
   the six and a lone last figure takes all six. Declaring the six tracks here
   is the part that matters: with only two declared, the spans spill into
   implicit auto-sized columns and the row collapses into unequal slivers. */
.gal-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1.4rem,2.4vw,2.6rem)}
.gal,
.gal:last-child:nth-child(3n+1),
.gal:nth-last-child(2):nth-child(3n+1),
.gal:last-child:nth-child(3n+2){grid-column:span 3}
.gal .gal-img,
.gal:last-child:nth-child(3n+1) .gal-img,
.gal:nth-last-child(2):nth-child(3n+1) .gal-img,
.gal:last-child:nth-child(3n+2) .gal-img{aspect-ratio:4/3}
/* odd count: the last one runs the full width rather than sitting half empty */
.gal:last-child:nth-child(odd){grid-column:span 6}
.gal:last-child:nth-child(odd) .gal-img{aspect-ratio:21/9}
.gal-img{background:var(--paper-2)}
.gal figcaption{color:var(--muted)}
.gal figcaption b{color:var(--accent)}
.studs-grid{gap:clamp(1.4rem,2.4vw,2.6rem)}
.studs .ph{background:var(--paper-2)}
.studs figcaption{color:var(--muted)}

/* ---------- the ink-ground sections invert on a dark site ---------- */
.process,.contact,.cta{background:var(--paper-2);color:var(--ink)}
.process h2,.process h3,.cta h2,.contact h2{color:var(--ink)}
.process .label,.contact .label,.cta .label,footer.site .label{color:var(--muted)}
.process .lead,.contact .lead,.cta .lead{color:var(--ink-2)}
.process .label::before,.contact .label::before,.cta .label::before,.hero-wide .label::before,.phero .label::before{background:var(--accent)}
.process .label i,.contact .label i,.cta .label i,.hero-wide .label i,.phero .label i,footer.site .label i{color:var(--accent)}
.process .step-n,.step.last .step-n{color:var(--accent)}
.steps{border-top:1px solid var(--line)}
.step{border-right-color:var(--line)}
.step p{color:var(--ink-2)}
.cta .btn-solid{color:var(--paper)}
.cta .btn-solid::before{background:var(--ink)}
.cta .btn-solid::after{background:var(--accent)}
.cta-phone{color:var(--ink);border-bottom-color:var(--line)}
.cta .tlink{color:var(--ink)}
.cta .tlink::after{background:var(--accent)}

/* ---------- sections, forms, faq, footer ---------- */
.sec.alt{background:var(--paper-2)}
.services,.projects,.ba,.craft,.about,.faq{background:var(--paper)}
.craft{background:var(--paper-2)}
.incl li{color:var(--ink-2);border-bottom-color:var(--line-2)}
.incl{border-top-color:var(--line)}
.faq-item{border-color:var(--line)}
.faq-q{color:var(--ink)}
.faq-a p{color:var(--ink-2)}
.bins{border-top-color:var(--line)}
.bin{border-color:var(--line)}
.bin-p{color:var(--ink-2)}
.bin-p b{color:var(--accent)}
.bin-fits,.bins-note,.gal-note,.f-note{color:var(--muted)}
.grp-h{border-bottom-color:var(--line)}
.wc-img{background:var(--paper-2)}
.wc-n{background:var(--paper);color:var(--ink)}
.wc p{color:var(--ink-2)}
.feat p{color:var(--ink-2)}
.feat strong{color:var(--ink)}
.cinfo div{border-color:var(--line)}
.cinfo span{color:var(--muted)}
.cinfo div a,.cinfo div p{color:var(--ink)}   /* .cinfo div a beats .cinfo a */
.cinfo div a:hover{color:var(--accent)}
form label{color:var(--muted)}
form input,form select,form textarea{color:var(--ink);border-color:var(--line);background:transparent}
form input::placeholder,form textarea::placeholder{color:var(--stone)}
footer.site{background:var(--paper-2);color:var(--muted);border-top:1px solid var(--line-2)}
/* the light build sets this to --paper, which was cream on its ink footer.
   With the tokens inverted that is dark-on-dark and vanishes. */
.foot-brand .logo-txt b{color:var(--ink)}
.foot-brand p{color:var(--muted)}
footer.site a{color:var(--ink-2)}
footer.site h4{color:var(--ink)}
.foot-bot{border-top-color:var(--line-2)}
.lead{color:var(--ink-2)}
.label{color:var(--muted)}
.label i{color:var(--accent)}
.label::before{background:var(--accent)}
.tlink{color:var(--ink)}
.tlink::after{background:var(--accent)}
.band-cap{background:linear-gradient(to top,rgba(22,19,15,.86),rgba(22,19,15,.46) 46%,transparent 88%)}

@media(max-width:900px){
  .hero{min-height:auto}
  .hero-copy{padding:clamp(7rem,20vw,9rem) 0 clamp(3rem,8vw,4rem)}
  .hero-copy>*{max-width:100%}
  .hero-media::after{background:linear-gradient(180deg,rgba(22,19,15,.62) 0%,rgba(22,19,15,.86) 55%,rgba(22,19,15,.95) 100%)}
  .svc{grid-template-columns:1fr;gap:1.6rem}
  .svc:nth-child(even) .svc-img{order:0}
}
@media(max-width:620px){
  /* one column: undo every span the two-up rules set above */
  .gal-grid{grid-template-columns:1fr}
  .gal,.gal:last-child:nth-child(3n+1),.gal:nth-last-child(2):nth-child(3n+1),
  .gal:last-child:nth-child(3n+2),.gal:last-child:nth-child(odd){grid-column:span 1}
  .gal .gal-img,.gal:last-child:nth-child(3n+1) .gal-img,
  .gal:nth-last-child(2):nth-child(3n+1) .gal-img,
  .gal:last-child:nth-child(3n+2) .gal-img,
  .gal:last-child:nth-child(odd) .gal-img{aspect-ratio:4/3}
}



/* ---------- Go-live additions ---------- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
/* .f-note was renamed to .form-note so the kit's consent step can find it; carry its rules across */
.form-note{grid-column:1/-1;font-size:.78rem;font-weight:300;color:var(--muted);line-height:1.6}
.form-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(226,101,42,.38)}
.form-note a:hover{color:var(--accent-l);border-bottom-color:var(--accent-l)}
.form-err{grid-column:1/-1;font-size:.82rem;line-height:1.5;color:#F08A52;margin:0;padding:.7rem .9rem;
  border-left:2px solid #F08A52;background:rgba(240,138,82,.09)}
.ft-legal a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(245,243,234,.18);transition:color .3s,border-color .3s}
.ft-legal a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot-bot .ft-legal{margin-left:1.2rem}

/* MOLD BUG, fixed here so every sawtooth go-live gets it.
   .hero-meta is position:absolute;bottom:0 inside .hero-media. On desktop the
   photo is its own column and the caption sits neatly at its foot. At <=900px
   the mold turns .hero-media into a full-bleed background behind the copy and
   caps its height at clamp(300px,52vh,460px) - but .hero-meta still pins to the
   BOTTOM OF THE PHOTO, which now lands in the middle of the hero paragraph. At
   390x844 "Kitchen remodel / Est. 2005" prints straight through the third line
   of the lead, and it is painted on top (z-index:3 over the copy's z-index:2).
   The caption is decorative and its content is already in the label above
   ("Littleton, Colorado - Building since 2005"), so hide it in that mode.
   Worth fixing in Website Build Kit/sawtooth-remodeling-v2-dark too. */
@media(max-width:900px){ .hero-meta{display:none} }