/* ============================================================
   STRUX — Design system v2
   Charcoal + warm paper + gold. Fraunces display, Archivo body.
   ============================================================ */
:root{
  --ink:#14120E; --ink-soft:#1E1B15; --ink-softer:#262219;
  --paper:#F5F0E6; --paper-dim:#E8E1D0; --paper-line:#DCD3BC;
  --gold:#C6A153; --gold-hi:#D8B876; --gold-ink:#241C08;
  --savings-green:#8DD470;
  --line:#332F27; --line-soft:#2A2620;
  --muted:#9C9483; --muted-dim:#6E6656; --muted-dark:#67604F;

  --font-display:"Fraunces",serif;
  --font-body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --t-display:clamp(2.75rem,6.4vw,4.75rem);
  --t-h2:clamp(1.9rem,3.6vw,2.75rem);
  --t-h3:clamp(1.25rem,2vw,1.5rem);
  --t-h3-sm:clamp(1.0625rem,1.4vw,1.1875rem);
  --t-body:1.0625rem;
  --t-label:.6875rem;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --measure:58ch;
  --stack:clamp(3.5rem,7vw,6rem);
  --header-h:82px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.6;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
/* <picture> is only a format switch — it must not add a box between the
   media container and the img that existing layout rules target. */
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,figure,dl{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- primitives ---------- */
.wrap{ max-width:1280px; margin:0 auto; padding-inline:var(--gutter); }
.measure{ max-width:var(--measure); }
.label{
  font-family:var(--font-body); font-size:var(--t-label); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.section{ padding-block:var(--stack); }
.section--tight{ padding-block:clamp(2.75rem,5vw,4.25rem); }
.section--dark{ background:var(--ink); color:var(--paper); }
.section--paper{ background:var(--paper); color:var(--ink); }
.section--dim{ background:var(--paper-dim); color:var(--ink); }
.section--dark .muted{ color:var(--muted); }
.section--paper .muted, .section--dim .muted{ color:var(--muted-dark); }

h1{ font-family:var(--font-display); font-weight:300; }
h2{ font-family:var(--font-display); font-weight:400; font-size:var(--t-h2); line-height:1.1; letter-spacing:-.012em; max-width:22ch; text-wrap:balance; }
h3{ font-family:var(--font-display); font-weight:400; font-size:var(--t-h3-sm); line-height:1.35; }
.lede{ font-size:clamp(1.0625rem,1.6vw,1.25rem); line-height:1.55; }
.small{ font-size:.9375rem; line-height:1.55; }
.muted{ color:var(--muted); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-body);
  font-size:.8125rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:1rem 1.85rem; cursor:pointer; border:1px solid transparent;
  transition:opacity .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ opacity:.88; }
.btn--gold{ background:var(--gold); color:var(--gold-ink); border-color:var(--gold); }
.btn--outline-dark{ background:transparent; color:var(--paper); border-color:rgba(245,240,230,.4); }
.btn--outline-dark:hover{ border-color:var(--paper); opacity:1; background:rgba(245,240,230,.06); }
.btn--outline-light{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--outline-light:hover{ background:var(--ink); color:var(--paper); opacity:1; }
.btn-row{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.link-arrow{ display:inline-flex; align-items:center; gap:.45rem; font-size:.75rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); transition:gap .18s var(--ease); }
.link-arrow svg{ width:14px; height:14px; flex:none; transition:transform .18s var(--ease); }
a:hover .link-arrow, .link-arrow:hover{ gap:.7rem; }
.tel-link{ font-size:.9375rem; border-bottom:1px solid currentColor; opacity:.85; padding-bottom:1px; transition:opacity .16s ease; }
.tel-link:hover{ opacity:1; }

/* ---------- header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(20,18,14,.5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(245,240,230,.1);
}
.header__in{ display:flex; align-items:center; gap:clamp(1.5rem,3vw,3rem); min-height:var(--header-h); max-width:1280px; margin:0 auto; padding-inline:var(--gutter); }
.wordmark{ font-family:var(--font-body); font-size:1.1875rem; font-weight:600; letter-spacing:.34em; color:var(--paper); padding-right:.34em; }
.nav{ display:flex; gap:2rem; margin-left:auto; }
.nav a{ font-size:.8125rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; color:var(--paper); opacity:.82; padding-block:.35rem; border-bottom:1px solid transparent; transition:opacity .16s ease, border-color .16s ease; }
.nav a:hover{ opacity:1; border-bottom-color:var(--gold); }
.header .btn{ padding:.75rem 1.4rem; white-space:nowrap; }
/* a contractor gets called as often as emailed — keep the number reachable at every
   width, and note the nav + estimate button both hide below 980px, so without this
   the mobile header would carry no call to action at all */
.header__tel{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:600; letter-spacing:.01em; color:var(--paper); white-space:nowrap; transition:color .16s ease; }
.header__tel svg{ width:16px; height:16px; flex:none; color:var(--gold); }
.header__tel:hover{ color:var(--gold); }
/* A visible phone number is itself a trust signal for a contractor, so buy room
   for it on laptop widths instead of dropping it: tighten the header's own gaps
   first, then shorten the longest nav label (the full text stays in the DOM for
   search and screen readers), and only then fall back to the phone icon — rather
   than wrapping the menu onto two lines. Thresholds are measured against the
   content box (bar width minus its own gutters, which is the mistake to avoid
   here): with the five-item nav the full "Windows & Doors" stops fitting at
   1160px and the full number at 1086px, so each rule sits just above its floor. */
@media (max-width:1400px){
  .header__in{ gap:1.5rem; }
  .nav{ gap:1.4rem; }
}
@media (max-width:1200px){
  .nav__and{ display:none; }
}
@media (max-width:1120px){
  .header__tel span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .header__tel svg{ width:20px; height:20px; color:var(--paper); }
  .header__tel:hover svg{ color:var(--gold); }
}
/* Last of the desktop compromises: tighten spacing so the estimate button keeps
   its place a little longer. The bar stops fitting altogether at 965px, so the
   drawer has to take over above that — it used to wait until 920px, which left a
   band where the header quietly overflowed its own gutter. */
@media (max-width:1040px){
  .header__in{ gap:1.1rem; }
  .nav{ gap:1rem; }
}
.nav-toggle{ display:none; background:none; border:0; color:var(--paper); padding:.4rem; cursor:pointer; margin-left:auto; }
.nav-toggle svg{ width:22px; height:22px; }
@media (max-width:980px){
  .nav{ display:none; }
  .header .btn--gold{ display:none; }
  .nav-toggle{ display:inline-flex; margin-left:0; }
  .header__in{ gap:1.1rem; }
  .header__tel{ margin-left:auto; padding:.7rem; }   /* 44px tap target */
  .header__tel svg{ width:22px; height:22px; color:var(--paper); }
  .header__tel span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}

/* Sticky call bar — below 980px the header drops both the phone number and the
   estimate button, so this picks them up. It is utility, not a pop-up: it appears
   only after the hero's own buttons have scrolled away, never covers content (the
   body reserves its height), interrupts nothing and offers no third choice. */
.callbar{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  border-top:1px solid var(--line-soft); background:rgba(20,18,14,.97);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transform:translateY(100%); transition:transform .28s var(--ease);
  padding-bottom:env(safe-area-inset-bottom); }
.callbar.is-on{ transform:translateY(0); }
.callbar__in{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; padding:.7rem var(--gutter); }
.callbar a{ display:flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:48px; font-size:.9375rem; font-weight:600; letter-spacing:.01em; text-decoration:none; }
.callbar__tel{ color:var(--paper); border:1px solid var(--line); }
.callbar__tel svg{ width:17px; height:17px; flex:none; color:var(--gold); }
.callbar__cta{ background:var(--gold); color:var(--gold-ink); }
@media (max-width:980px){
  .callbar{ display:block; }
  /* must match the bar's real height: 48px buttons + .7rem padding top and bottom
     + the 1px top border. Reserve less and the bar sits over the footer's last line. */
  body{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce){ .callbar{ transition:none; } }

/* mobile menu */
.mobile-menu{ position:fixed; inset:0; z-index:70; background:var(--ink); display:none; flex-direction:column; padding:1.5rem var(--gutter) 2.5rem; }
.mobile-menu.is-open{ display:flex; }
.mobile-menu__top{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); }
.mobile-menu__close{ background:none; border:0; color:var(--paper); padding:.4rem; }
.mobile-menu__close svg{ width:22px; height:22px; }
.mobile-menu nav{ margin-top:2rem; display:flex; flex-direction:column; gap:0; }
.mobile-menu nav a{ font-family:var(--font-display); font-size:2rem; font-weight:300; color:var(--paper); padding:.75rem 0; border-bottom:1px solid var(--line); }
.mobile-menu__foot{ margin-top:auto; display:flex; flex-direction:column; gap:1rem; }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; top:-15%; left:0; right:0; height:130%; z-index:0; will-change:transform; }
.hero__media img{ width:100%; height:100%; object-fit:cover; transform-origin:50% 50%; will-change:transform; }
/* Two layers: the vertical one shapes the photo, the horizontal one buys contrast
   only on the left, where the copy sits — measured against the actual pixels, the
   eyebrow and the top of the H1 were failing AA over the bright ceiling. The
   architecture on the right stays untouched. */
.hero__scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(10,9,6,.45) 0%, rgba(10,9,6,.31) 30%, rgba(10,9,6,0) 58%),
    linear-gradient(0deg, rgba(10,9,6,.92) 0%, rgba(10,9,6,.5) 38%, rgba(10,9,6,.08) 62%, rgba(10,9,6,.35) 100%); }
.hero__body{ position:relative; z-index:2; width:100%; padding-block:clamp(6rem,14vw,9rem) clamp(2.5rem,5vw,4rem); }
.hero__eyebrow{ margin-bottom:1.1rem; display:block; }
.hero h1{ color:#FBF8F1; font-size:clamp(2.6rem,6.4vw,4.75rem); line-height:1.03; letter-spacing:-.015em; max-width:15ch; text-wrap:balance; }
.hero__lede{ margin-top:1.25rem; max-width:44ch; color:#E4DECE; font-size:clamp(1.0625rem,1.6vw,1.1875rem); }
.hero__actions{ margin-top:2rem; }
.hero__trust{ margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.5rem; border-top:1px solid rgba(245,240,230,.16); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; }
.trust-item{ display:flex; align-items:flex-start; gap:.75rem; }
.trust-item svg{ width:22px; height:22px; flex:none; color:var(--gold); margin-top:.1rem; }
.trust-item b{ display:block; font-size:.8125rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:#F5F0E6; }
.trust-item span{ display:block; margin-top:.2rem; font-size:.8125rem; color:#B9B1A0; }
@media (max-width:860px){ .hero__trust{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .hero__trust{ grid-template-columns:1fr; } .hero{ min-height:92svh; } }

/* smaller sub-page hero */
.pagehero{ position:relative; min-height:62svh; display:flex; align-items:flex-end; overflow:hidden; }
.pagehero__media{ position:absolute; top:-15%; left:0; right:0; height:130%; z-index:0; will-change:transform; }
.pagehero__media img{ width:100%; height:100%; object-fit:cover; transform-origin:50% 50%; will-change:transform; }
/* Measured against every photo used behind a pagehero: the old top stops (.4/.3)
   left the eyebrow and lede below AA on the brighter renders. On narrow screens the
   copy covers the frame top to bottom, so it carries a heavier scrim than desktop,
   where the photo still has room to breathe above the text. */
.pagehero__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(8,7,5,.92) 0%, rgba(8,7,5,.76) 40%, rgba(8,7,5,.66) 72%, rgba(8,7,5,.48) 100%); }
@media (max-width:900px){
  .pagehero__scrim{ background:linear-gradient(0deg, rgba(8,7,5,.93) 0%, rgba(8,7,5,.80) 40%, rgba(8,7,5,.72) 72%, rgba(8,7,5,.70) 100%); }
}
/* Gold at kicker size never clears AA over photography, however hard the scrim is
   pushed — reaching it would cost roughly twice the darkening a paper kicker needs,
   and the photo pays for it. So over photos the kicker is paper; gold keeps its role
   everywhere the background is a flat colour. */
.hero__eyebrow, .pagehero__body .label{ color:var(--paper); }
.pagehero__body{ position:relative; z-index:2; width:100%; padding-block:clamp(5rem,12vw,7rem) clamp(2.25rem,4.5vw,3.25rem); }
.pagehero__back{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8125rem; color:#E4DECE; opacity:.85; margin-bottom:1.5rem; border-bottom:1px solid rgba(245,240,230,.35); padding-bottom:2px; }
.pagehero__back:hover{ opacity:1; }
.pagehero h1{ color:#FBF8F1; font-size:clamp(2.25rem,5.2vw,3.75rem); line-height:1.04; letter-spacing:-.012em; max-width:16ch; }
.pagehero__lede{ margin-top:1.1rem; max-width:48ch; color:#E4DECE; font-size:clamp(1.0625rem,1.4vw,1.1875rem); }
.pagehero__actions{ margin-top:1.75rem; }
.pagehero--tall{ min-height:100svh; }
.pagehero--tall .pagehero__body{ padding-block:clamp(6rem,14vw,9rem) clamp(2.5rem,5vw,4rem); }

/* ---------- services triptych ---------- */
.tri-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3rem); }
.tri-head h2{ margin-top:.6rem; }
.tri-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.25rem,2.5vw,2rem); }
.tri-card{ display:block; background:var(--ink-soft); border:1px solid var(--line); transition:transform .28s var(--ease), border-color .18s ease; }
.tri-card:hover{ transform:translateY(-4px); border-color:var(--gold); }
.tri-card__figure{ aspect-ratio:4/3.3; overflow:hidden; }
.tri-card__figure img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.tri-card:hover .tri-card__figure img{ transform:scale(1.045); }
.tri-card__body{ padding:1.5rem 1.6rem 1.75rem; }
.tri-icon{ width:34px; height:34px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.tri-icon svg{ width:16px; height:16px; color:var(--gold); }
.tri-card h3{ color:var(--paper); font-size:1.375rem; }
.tri-card p{ margin-top:.6rem; font-size:.9375rem; color:var(--muted); max-width:32ch; }
.tri-card__cta{ margin-top:1.25rem; }
@media (max-width:860px){ .tri-grid{ grid-template-columns:1fr; max-width:32rem; margin-inline:auto; } }

/* ---------- inline mid-page CTA ---------- */

/* ---------- aspirational render band ---------- */
.render-band{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; margin-top:clamp(2rem,4vw,3rem); }
.render-band__figure{ border:1px solid var(--paper-line); }
.render-band__figure img{ display:block; width:100%; height:auto; }
.render-band__text h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,3vw,2rem); line-height:1.15; }
.render-band__text p{ margin-top:1rem; font-size:.9688rem; color:var(--muted-dark); max-width:34ch; }
.section--dark .render-band__figure{ border-color:var(--line); }
.section--dark .render-band__text p{ color:var(--muted); }
@media (max-width:860px){ .render-band{ grid-template-columns:1fr; gap:1.5rem; } .render-band__text{ order:2; } }

/* ---------- lead-time note (windows) ----------
   The 6–10 week wait is the honest urgency on this page: state the arithmetic
   and let the reader draw the conclusion. No countdown, no manufactured scarcity. */
.timing-note{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(2rem,4vw,2.75rem);
  padding-top:clamp(1.75rem,3vw,2.25rem); border-top:1px solid var(--paper-line); }
.timing-note__lede{ margin-top:.7rem; font-size:clamp(1rem,1.5vw,1.125rem); line-height:1.55; color:var(--ink); max-width:62ch; }
.timing-note__text p + p{ margin-top:.8rem; font-size:.9375rem; line-height:1.7; color:var(--muted-dark); max-width:66ch; }
.timing-note .btn{ white-space:nowrap; }
/* the note hardwires ink text, so it goes invisible the moment its section turns
   dark — the same trap .also-build fell into. Palette-aware, like .titleblock. */
.section--dark .timing-note{ border-top-color:var(--line-soft); }
.section--dark .timing-note__lede{ color:var(--paper); }
.section--dark .timing-note__text p + p{ color:var(--muted); }
@media (max-width:860px){
  .timing-note{ grid-template-columns:1fr; align-items:start; }
  .timing-note .btn{ width:100%; justify-content:center; }
}

/* ---------- our standard: five principles, icon over column ----------
   Two lessons paid for here. The icons carry drafting detail — the finest stroke is
   2px on a 512px canvas — so at list-marker size it rendered at 0.16 of a screen
   pixel and simply vanished; they need ~100px to hold. And the first version's
   cramped 22-character measure was the fault of paragraph-length copy, not column
   width: at five to seven words the eye takes a fragment whole, so a narrow column
   reads fine. Short copy plus a real icon size, and the block is a third the height
   of the row layout that tried to fix the wrong cause. */
.standard-grid{ list-style:none; margin:clamp(1.75rem,3vw,2.25rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:2px solid var(--gold); }
.standard-item{ min-width:0; padding:clamp(1.5rem,2.6vw,1.9rem) clamp(.9rem,1.5vw,1.25rem) clamp(.5rem,1vw,.75rem);
  border-left:1px solid var(--paper-line); }
/* first and last in each row sit flush with the section's text column, so the
   grid's outer edges line up with the heading above it at every breakpoint */
.standard-item:first-child{ border-left:0; padding-left:0; }
.standard-item:last-child{ padding-right:0; }
.standard-item__icon{ display:block; width:clamp(76px,7.5vw,104px); margin-bottom:clamp(.9rem,1.6vw,1.15rem); }
.standard-item__icon img{ width:100%; height:auto; display:block; }
.standard-item h3{ font-family:var(--font-display); font-size:clamp(1rem,1.35vw,1.125rem);
  font-weight:400; line-height:1.2; color:var(--ink); }
.standard-item p{ margin-top:.5rem; font-size:.875rem; line-height:1.6; color:var(--muted-dark); }

@media (max-width:1080px){
  .standard-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .standard-item{ border-top:1px solid var(--paper-line); }
  .standard-item:nth-child(3n+1){ border-left:0; padding-left:0; }
  .standard-item:nth-child(3n), .standard-item:last-child{ padding-right:0; }
  .standard-item:first-child, .standard-item:nth-child(2), .standard-item:nth-child(3){ border-top:0; }
}
@media (max-width:680px){
  .standard-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .standard-item:nth-child(3n+1){ border-left:1px solid var(--paper-line); padding-left:clamp(.9rem,1.5vw,1.25rem); }
  .standard-item:nth-child(3n){ padding-right:clamp(.9rem,1.5vw,1.25rem); }
  .standard-item:nth-child(odd){ border-left:0; padding-left:0; }
  .standard-item:nth-child(even), .standard-item:last-child{ padding-right:0; }
  .standard-item:nth-child(3){ border-top:1px solid var(--paper-line); }
}
@media (max-width:440px){
  .standard-grid{ grid-template-columns:1fr; }
  .standard-item{ border-left:0; padding-left:0; padding-right:0; }
  .standard-item:nth-child(3n+1){ border-left:0; padding-left:0; }
  .standard-item:nth-child(2){ border-top:1px solid var(--paper-line); }
}

/* ---------- planning: flat price list ----------
   Replaced a nine-row accordion pair that showed 15 words and hid 179 behind eight
   clicks. The process half went with it: the immediate next steps already sit at the
   contact form and the full sequence, with real durations, is on each service page —
   so the heading dropped its process half rather than promise what isn't here. Every
   range is visible and each row is a route into its service page. */


.pricelist{ margin-top:clamp(1.75rem,3vw,2.25rem); border-top:1px solid var(--line-soft); }
.pricerow{ display:flex; align-items:baseline; gap:clamp(1rem,2.5vw,2rem);
  padding:clamp(.85rem,1.5vw,1.05rem) 0; border-bottom:1px solid var(--line-soft);
  transition:border-color .18s ease; }
.pricerow:hover{ border-bottom-color:var(--gold); }
.pricerow__name{ flex:1 1 12rem; min-width:0; font-size:1rem; font-weight:600; color:var(--paper); }
.pricerow__range{ flex:none; font-family:var(--font-display); font-size:clamp(1.0625rem,1.5vw,1.1875rem);
  font-weight:400; color:var(--gold); white-space:nowrap; }
.pricerow__link{ flex:none; display:inline-flex; align-items:center; gap:.4rem; width:11.5rem; justify-content:flex-end;
  font-size:.6875rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  transition:color .18s ease, gap .18s var(--ease); }
.pricerow__link svg{ width:13px; height:13px; flex:none; }
.pricerow:hover .pricerow__link{ color:var(--gold); gap:.6rem; }
.pricelist__lede{ margin-top:1rem; }

@media (max-width:760px){
  .pricerow{ flex-wrap:wrap; gap:.35rem 1rem; }
  .pricerow__name{ flex:1 1 auto; }
  .pricerow__link{ width:100%; justify-content:flex-start; margin-top:.3rem; }
}

/* ---------- custom home / capability bridge section ---------- */
.capability{ border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); }
.capability-grid{ display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1.8fr) minmax(0,1fr); gap:clamp(2rem,4vw,3rem); align-items:stretch; }
.capability-grid__figure{ border:1px solid var(--paper-line); }
.capability-grid__figure img{ display:block; width:100%; height:100%; object-fit:cover; }
.capability-grid__body{ display:flex; flex-direction:column; justify-content:center; }
.capability-grid__rule{ width:3rem; height:1px; background:var(--paper-line); border:none; margin:1.25rem 0 0; }
.capability-list{ list-style:none; margin-top:1.75rem; padding:0; }
.capability-list li{ display:flex; align-items:center; gap:.85rem; padding:.85rem 0; border-bottom:1px solid var(--paper-line); font-size:.9375rem; }
.capability-list li:last-child{ border-bottom:none; }
.capability-list svg{ width:18px; height:18px; flex:none; color:var(--gold); }
.capability-card{ background:var(--paper-dim); border:1px solid var(--paper-line); padding:clamp(1.5rem,2.5vw,2rem); align-self:center; }
.capability-card__icon{ width:40px; height:40px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.capability-card__icon svg{ width:18px; height:18px; color:var(--gold); }
.capability-card h3{ font-family:var(--font-display); font-size:1.375rem; font-weight:400; line-height:1.25; }
.capability-card p{ margin-top:.85rem; font-size:.875rem; color:var(--muted-dark); }
.capability-card .btn{ margin-top:1.5rem; width:100%; justify-content:center; }
/* custom homes is a supporting service — it points at proof, not at a second
   conversion ask competing with the page's one gold CTA */
.capability-card__link{ margin-top:1.5rem; }
@media (max-width:900px){
  .capability-grid{ grid-template-columns:1fr; gap:2rem; }
  .capability-grid__figure{ aspect-ratio:16/10; }
  .capability-card{ align-self:stretch; }
}

/* ---------- "our work" — always-visible curated carousel ---------- */
.work-carousel{ margin-top:clamp(2rem,4vw,2.75rem); }
.work-carousel__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; }
.work-carousel__nav{ display:flex; gap:.6rem; flex:none; }
.work-carousel__arrow{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-soft); background:none; color:inherit; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s ease, opacity .2s ease; }
.section--paper .work-carousel__arrow, .section--dim .work-carousel__arrow{ border-color:var(--paper-line); }
.work-carousel__arrow svg{ width:16px; height:16px; }
.work-carousel__arrow:hover:not(:disabled){ border-color:var(--gold); }
.work-carousel__arrow:disabled{ opacity:.3; cursor:default; }
.work-carousel__track{ display:flex; gap:1.25rem; margin-top:clamp(1.5rem,3vw,2rem); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; padding-bottom:.25rem; }
.work-carousel__track::-webkit-scrollbar{ display:none; }
.work-carousel__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.work-carousel__track .proc-card{ flex:0 0 clamp(17rem,26vw,21rem); scroll-snap-align:start; cursor:zoom-in; }
@media (max-width:860px){ .work-carousel__track .proc-card{ flex-basis:min(60vw,20rem); } }
@media (max-width:560px){ .work-carousel__track .proc-card{ flex-basis:min(80vw,21rem); } }
.work-carousel__track .proc-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- lightbox — minimal shared-element viewer for work-carousel images ---------- */
.lightbox{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(20,18,14,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.lightbox__stage{ position:relative; z-index:1; max-width:90vw; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.lightbox__img{ display:block; max-width:90vw; max-height:74vh; width:auto; height:auto; object-fit:contain; opacity:0; box-shadow:0 40px 90px -20px rgba(0,0,0,.6); }
.lightbox__caption{ margin-top:1.1rem; text-align:center; opacity:0; transition:opacity .3s ease .1s; }
.lightbox.is-open .lightbox__caption{ opacity:1; }
.lightbox__caption h3{ font-family:var(--font-display); font-weight:400; font-size:1.0625rem; color:var(--paper); }
.lightbox__caption span{ display:block; margin-top:.3rem; font-size:.8125rem; color:var(--gold); letter-spacing:.01em; }
.lightbox__close{ position:fixed; top:1.75rem; right:1.75rem; z-index:2; background:var(--ink); }
.lightbox__prev{ position:fixed; left:1.5rem; top:50%; transform:translateY(-50%); z-index:2; background:var(--ink); }
.lightbox__next{ position:fixed; right:1.5rem; top:50%; transform:translateY(-50%); z-index:2; background:var(--ink); }
@media (max-width:760px){
  .lightbox__prev, .lightbox__next{ display:none; }
  .lightbox__close{ top:1rem; right:1rem; width:38px; height:38px; }
  .lightbox__img{ max-height:66vh; }
}

/* ---------- navigation hub ---------- */
/* card-specific scrim override — taller/earlier dark zone so tightened content clears embedded graphics */
/* tight variant — reclaims vertical room for cards whose photo has a busy lower/mid zone */
/* above the 1100px tablet breakpoint there's ample clearance below the widget graphic — let the title match the other three cards at full size */
/* at the widest/shortest mobile crop the embedded widget leaves too little clearance for a title line — CTA alone (plus the icon/number badges and the widget graphic itself) still reads clearly; title stays in the accessible name via visually-hidden, not display:none */

/* index number — decoupled from the title block so it can sit in clean negative space, independent of content position */

/* ---------- window & door types — product browser ---------- */
/* ---------- image browser (window/door types, kitchen & bathroom directions) ----------
   One component under two class names. The two used to differ on seven counts —
   stage ratio, border, caption gradient and padding, and an entirely different nav —
   while doing the identical job on three sibling pages. Selectors are paired so they
   cannot drift again. Stage is 3:2 because every source image is 3:2; the old 16:9
   on the windows page was cropping 16% off each photo. */
.product-browser, .style-browser{ margin-top:clamp(2rem,4vw,3rem); }

.product-browser__stage, .style-browser__stage{ position:relative; width:100%; aspect-ratio:3/2;
  overflow:hidden; background:var(--paper-dim); border:1px solid var(--paper-line); }

.product-browser__figure, .style-browser__figure{ position:absolute; inset:0; margin:0;
  opacity:0; z-index:0; transition:opacity .5s var(--ease); }
.product-browser__figure.is-active, .style-browser__figure.is-active{ opacity:1; z-index:1; }
.product-browser__figure img, .style-browser__figure img{ width:100%; height:100%; object-fit:cover; display:block; }

.product-browser__figure figcaption, .style-browser__contents{
  position:absolute; left:0; right:0; bottom:0; z-index:2; display:grid;
  padding:clamp(1.5rem,3vw,2.5rem); padding-top:clamp(4rem,9vw,6rem); color:var(--paper);
  background:linear-gradient(180deg, rgba(20,18,14,0) 0%, rgba(20,18,14,.62) 55%, rgba(20,18,14,.9) 100%); }
.style-browser__content{ grid-area:1/1; opacity:0; transition:opacity .4s var(--ease); pointer-events:none; }
.style-browser__content.is-active{ opacity:1; pointer-events:auto; }

.product-browser__figure h3, .style-browser__content h3{ font-family:var(--font-display);
  font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:400; letter-spacing:-.01em; color:var(--paper); }
.product-browser__figure p, .style-browser__content p{ margin-top:.55rem; font-size:.9375rem;
  line-height:1.55; color:#D8D2C4; max-width:34em; }

.product-browser__list, .style-browser__nav{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem; }
.product-browser__item, .style-browser__nav-item{ flex:1 1 8rem; padding:1.15rem 1.25rem;
  border:1px solid var(--paper-line); background:transparent; font-family:var(--font-body);
  font-size:.875rem; font-weight:600; color:var(--ink); cursor:pointer; text-align:center;
  transition:border-color .2s ease, background .2s ease, color .2s ease; }
.product-browser__item:hover, .style-browser__nav-item:hover{ border-color:var(--gold); }
.product-browser__item.is-active, .style-browser__nav-item.is-active{
  border-color:var(--gold); background:var(--gold); color:var(--gold-ink); }
.product-browser__item:focus-visible, .style-browser__nav-item:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; }

@media (max-width:620px){
  .product-browser__item, .style-browser__nav-item{ flex:1 1 100%; padding:.95rem 1rem; }
}

/* ---------- the STRUX standard — principle plates (all 3 service pages) ---------- */
/* ============================================================
   Principles — "Why choose STRUX".
   Built like a construction drawing set: an index of plates across
   the top, and one sheet below holding the drawing beside its title
   block. The active tab is gold and sits flush on the sheet's gold
   top edge, so tab and sheet read as a single instrument rather than
   a widget floating above a picture.
   All wording lives in HTML — the artwork carries no baked-in copy —
   so it stays selectable, translatable and legible on small screens.
   ============================================================ */
.principles{ margin-top:clamp(1.75rem,3.5vw,2.5rem); }

/* plate index ------------------------------------------------ */
.principles__index{
  display:grid; grid-template-columns:repeat(5,1fr);
  border:1px solid var(--paper-line); border-bottom:0;
}
.principles__tab{
  display:flex; align-items:baseline; gap:.55rem; min-width:0;
  padding:.95rem clamp(.7rem,1.1vw,1.1rem);
  background:none; border:0; border-left:1px solid var(--paper-line);
  font:inherit; text-align:left; cursor:pointer; color:var(--muted-dark);
  transition:background-color .25s var(--ease), color .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.principles__tab:first-child{ border-left:0; }
.principles__tab:hover{ background:rgba(198,161,83,.12); color:var(--ink); }
.principles__tab:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.principles__tab.is-active{ background:var(--gold); color:var(--gold-ink); }
.principles__tab-no{
  flex:none; font-size:.6875rem; font-weight:600; letter-spacing:.1em;
  font-variant-numeric:tabular-nums; color:var(--muted);
  transition:color .25s var(--ease), opacity .25s var(--ease);
}
.principles__tab:hover .principles__tab-no{ color:var(--gold); }
.principles__tab.is-active .principles__tab-no{ color:var(--gold-ink); opacity:.6; }
.principles__tab-name{ font-size:.875rem; font-weight:600; line-height:1.25; }

/* sheet ------------------------------------------------------ */
.principles__sheet{
  display:grid; background:var(--paper);
  border:1px solid var(--paper-line); border-top:2px solid var(--gold);
}
.principles__panel{
  grid-area:1/1; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,336px);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility 0s linear .45s;
}
.principles__panel.is-active{
  opacity:1; visibility:visible;
  transition:opacity .45s var(--ease), visibility 0s;
}

.principles__plate{
  /* every plate is authored at 3:2 with its own internal margins, so the drawing
     fills the stage edge to edge and cutaways can bleed off the sheet as drawn */
  --plate-pad:0px;
  position:relative; margin:0; min-width:0; min-height:0; aspect-ratio:3/2;
}
/* the sheet governs the box and the drawing is contained inside it, never the
   reverse — pinned rather than sized in %, which a ratio-driven box can't resolve */
.principles__drawing{
  position:absolute; top:var(--plate-pad); left:var(--plate-pad);
  width:calc(100% - 2 * var(--plate-pad));
  height:calc(100% - 2 * var(--plate-pad));
  object-fit:contain; display:block;
}

/* title block ------------------------------------------------ */
.principles__block{
  display:flex; flex-direction:column; justify-content:center; gap:.8rem;
  padding:clamp(1.5rem,2.6vw,2.25rem);
  border-left:1px solid var(--paper-line);
}
.principles__meta{
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-dark); font-variant-numeric:tabular-nums;
}
.principles__meta b{ color:var(--gold); font-weight:600; }
.principles__name{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,2.1vw,1.9rem); line-height:1.14; letter-spacing:-.012em; color:var(--ink);
}
.principles__rule{ width:2.5rem; height:2px; background:var(--gold); transform-origin:left; }
.principles__copy{ font-size:.9375rem; line-height:1.62; color:var(--muted-dark); }
.principles__cta{ margin-top:.3rem; align-self:flex-start; }
.principles__cta:hover{ gap:.7rem; }
.principles__cta:hover svg{ transform:translateX(3px); }

@media (max-width:1080px){
  .principles__panel{ grid-template-columns:minmax(0,1fr) minmax(252px,292px); }
}

@media (max-width:860px){
  .principles__index{
    display:flex; overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .principles__index::-webkit-scrollbar{ display:none; }
  .principles__tab{ flex:0 0 auto; scroll-snap-align:start; }
  .principles__panel{ grid-template-columns:minmax(0,1fr); }
  .principles__block{ border-left:0; border-top:1px solid var(--paper-line); }
}

@media (prefers-reduced-motion:no-preference){
  .principles__panel.is-active .principles__drawing{ animation:plateIn .55s var(--ease) both; }
  .principles__panel.is-active .principles__meta{ animation:blockIn .5s var(--ease) .06s both; }
  .principles__panel.is-active .principles__name{ animation:blockIn .5s var(--ease) .12s both; }
  .principles__panel.is-active .principles__rule{ animation:ruleIn .55s var(--ease) .18s both; }
  .principles__panel.is-active .principles__copy{ animation:blockIn .5s var(--ease) .2s both; }
  .principles__panel.is-active .principles__cta{ animation:blockIn .5s var(--ease) .26s both; }
}
@keyframes plateIn{ from{ opacity:0; transform:scale(.985); } to{ opacity:1; transform:none; } }
@keyframes blockIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
@keyframes ruleIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---------- warranty band (all 3 service pages) ---------- */
.warranty{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,2.5vw,1.75rem); margin-top:clamp(2rem,4vw,2.75rem); }
@media (max-width:760px){ .warranty{ grid-template-columns:1fr; } }
.warranty__item{ border:1px solid var(--paper-line); padding:clamp(1.4rem,2.6vw,1.9rem); }
.warranty__term{ display:block; margin-top:1rem; font-family:var(--font-display); font-size:clamp(1.5rem,2.4vw,1.9rem); font-weight:400; line-height:1; color:var(--ink); }
.warranty__item h3{ margin-top:.5rem; font-family:var(--font-body); font-size:.9375rem; font-weight:600; letter-spacing:.005em; color:var(--ink); }
.warranty__item p{ margin-top:.6rem; font-size:.9375rem; line-height:1.6; color:var(--muted-dark); }
.warranty__note{ margin-top:clamp(1.25rem,2.5vw,1.6rem); padding-left:.9rem; border-left:2px solid var(--paper-line); font-size:.875rem; line-height:1.6; color:var(--muted-dark); max-width:70ch; }

/* founder block reuses .render-band, but carries four paragraphs instead of one,
   so it opts out of the 34ch cap that suits a single caption */
.render-band--founder .render-band__text p{ max-width:46ch; }
.render-band--founder .render-band__text p + p{ margin-top:.9rem; }
.founder-role{ margin-top:.5rem; font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--gold); }
.render-band--founder .render-band__text .founder-role{ max-width:none; }
.render-band--founder .render-band__text .founder-direct{ margin-top:1.25rem; font-size:.9375rem; color:var(--ink); max-width:none; }

/* ---------- energy calculator (dark section) ---------- */
.energy-calc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4rem); align-items:start; margin-top:clamp(2.5rem,5vw,3.5rem); }
@media (max-width:860px){ .energy-calc{ grid-template-columns:1fr; gap:2.5rem; } }
.energy-calc__inputs{ display:flex; flex-direction:column; gap:2.25rem; }
.energy-calc__field-label{ display:block; font-size:.8125rem; font-weight:600; letter-spacing:.02em; margin-bottom:.85rem; color:#B9B1A0; text-transform:uppercase; }
.energy-calc__slider-label{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.energy-calc__slider-label span{ font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:#B9B1A0; text-transform:uppercase; }
.energy-calc__slider-label b{ font-family:var(--font-display); font-size:1.875rem; font-weight:400; color:var(--gold); flex:none; }
.energy-calc__slider input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px; background:rgba(245,240,230,.22); outline:none; cursor:pointer; }
.energy-calc__slider input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--gold); border:3px solid var(--ink); box-shadow:0 0 0 1px var(--gold); cursor:pointer; }
.energy-calc__slider input[type="range"]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--gold); border:3px solid var(--ink); box-shadow:0 0 0 1px var(--gold); cursor:pointer; }
.energy-calc__slider input[type="range"]:focus{ outline:none; }
.energy-calc__slider input[type="range"]:focus::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(198,161,83,.3); }
.energy-calc__toggle{ display:flex; gap:.6rem; flex-wrap:wrap; }
.energy-calc__toggle button{ flex:1; min-width:130px; padding:.85rem 1rem; border:1px solid rgba(245,240,230,.25); background:transparent; color:var(--paper); font-family:var(--font-body); font-size:.8125rem; cursor:pointer; transition:border-color .2s ease,background .2s ease,color .2s ease; }
.energy-calc__toggle button:hover{ border-color:var(--gold); }
.energy-calc__toggle button.is-active{ border-color:var(--gold); background:var(--gold); color:var(--gold-ink); }
.energy-calc__result{ border:1px solid rgba(245,240,230,.18); padding:clamp(1.75rem,3vw,2.25rem); }
.energy-calc__result-row{ padding:.9rem 0; border-bottom:1px solid rgba(245,240,230,.18); }
.energy-calc__result-row:first-child{ padding-top:0; }
.energy-calc__result-row span{ display:block; font-size:.75rem; color:#B9B1A0; text-transform:uppercase; letter-spacing:.08em; }
.energy-calc__result-row b{ display:block; margin-top:.4rem; font-family:var(--font-display); font-size:2.1rem; font-weight:400; color:var(--savings-green); }
.energy-calc__disclaimer{ margin-top:1.25rem; font-size:.8125rem; color:#B9B1A0; }
.energy-calc .btn{ margin-top:1.5rem; width:100%; text-align:center; }

/* ---------- secondary capabilities strip ---------- */
.also-build{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:1.5rem 0; border-top:1px solid var(--paper-line); margin-top:clamp(2.5rem,5vw,3.5rem); }
/* this block only ever sits in a --paper section; it was carrying the dark-section
   palette, which rendered the bold lead-in at 1:1 against its own background */
.also-build p{ font-size:.9688rem; color:var(--muted-dark); flex:1 1 24rem; }
.also-build p b{ color:var(--ink); font-weight:500; }

/* ---------- featured projects ---------- */
/* the work-carousel photo cards are the same card as everywhere else — one
   component, three endings: --link goes to a page, the plain one expands in
   place, --zoom opens the photo. Only the closing affordance differs, because
   only the action does; the arrow glyph stays reserved for "this navigates". */
.proc-card--zoom .proc-card__more svg{ transition:transform .25s var(--ease); }
.proc-card--zoom:hover .proc-card__more svg{ transform:scale(1.12); }


/* ---------- proof / before-after ---------- */

/* ---------- condensed process + investment (homepage) ---------- */
.snap-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
.snap-grid--intro{ grid-template-columns:1.3fr 1fr; }
@media (max-width:900px){ .snap-grid, .snap-grid--intro{ grid-template-columns:1fr; gap:clamp(2.5rem,5vw,3rem); } }
/* Both lists run unnumbered: the process reads as a sequence from its own order and
   the "What happens next" heading, the investment column is a plain list. Titles in
   both columns start at the rule, so the two halves of the block align. */

/* ---------- CTA band / close ---------- */
.cta-band{ text-align:center; }
.cta-band__inner{ max-width:44rem; margin:0 auto; }
.cta-band h2{ margin:0 auto; }
.cta-band p{ margin-top:1rem; max-width:40ch; margin-inline:auto; }
.cta-band .btn-row{ margin-top:2.25rem; justify-content:center; }
.cta-band .tel-link{ display:block; margin-top:1.25rem; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:var(--muted); border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,4rem) 1.75rem; font-size:.875rem; }
.foot__grid{ display:flex; flex-wrap:wrap; gap:2.5rem 4rem; padding-bottom:clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line); }
.foot__brand{ flex:1 1 18rem; }
.foot__brand .wordmark{ color:var(--paper); }
.foot__brand p{ margin-top:1rem; max-width:26rem; color:var(--muted); }
.foot__brand .foot__legal{ margin-top:.75rem; }
.foot__col{ flex:1 1 10rem; }
.foot__col h3{ font-family:var(--font-body); margin:0 0 .9rem; font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.foot__col li{ padding:.28rem 0; }
.foot__col a{ color:var(--muted); transition:color .16s ease; }
.foot__col a:hover{ color:var(--paper); }
.foot__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:1.5rem; font-size:.8125rem; color:var(--muted-dim); }

/* ============================================================
   Deep-page components — service pages, project pages,
   Process / Investment / About.
   ============================================================ */

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.25rem,2.5vw,1.75rem); }
@media (max-width:860px){ .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .gallery{ grid-template-columns:1fr; } }
.gallery--pair{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:56rem; }
@media (max-width:560px){ .gallery--pair{ grid-template-columns:1fr; } }
.shot{ margin:0; }
.shot img{ width:100%; height:auto; display:block; background:var(--line-soft); }
.shot figcaption{ margin-top:.7rem; padding-top:.55rem; border-top:1px solid var(--line-soft); }
.section--paper .shot figcaption, .section--dim .shot figcaption{ border-top-color:var(--paper-line); }
.shot__tag{ display:block; font-size:var(--t-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.25rem; }
.shot__note{ font-size:.8125rem; line-height:1.45; }

/* process steps (deep page) */
.proc-steps{ display:flex; flex-direction:column; gap:clamp(2.25rem,4.5vw,3.25rem); margin-top:clamp(1.5rem,3vw,2.25rem); }
.proc-step{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.75rem,3.5vw,3rem); align-items:center; }
.proc-step:nth-child(even) .proc-step__figure{ order:2; }
.proc-step__figure img{ width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover; background:var(--line-soft); }
.proc-step__body h3{ font-family:var(--font-body); font-size:1rem; font-weight:600; margin-top:.5rem; }
.proc-step__body p{ margin-top:.6rem; font-size:.9375rem; }
@media (max-width:760px){ .proc-step{ grid-template-columns:1fr; } .proc-step:nth-child(even) .proc-step__figure{ order:0; } }
/* process — compact 3-up card grid, click to expand (windows-doors.html) */
.proc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:clamp(2rem,4vw,2.75rem); align-items:stretch; }
.proc-grid.has-open{ align-items:start; }
@media (max-width:860px){ .proc-grid{ grid-template-columns:1fr; max-width:28rem; margin-inline:auto; } }
.proc-grid.proc-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .proc-grid.proc-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; margin-inline:0; } }
@media (max-width:560px){ .proc-grid.proc-grid--4{ grid-template-columns:1fr; max-width:28rem; margin-inline:auto; } }
.proc-note{ display:flex; align-items:center; gap:.75rem; margin-top:clamp(2rem,4vw,2.75rem); padding-top:clamp(1.5rem,3vw,2rem); border-top:1px solid var(--line-soft); }
.proc-note svg{ width:20px; height:20px; flex:none; color:var(--gold); }
.proc-note p{ font-size:.9375rem; color:var(--muted); }
.proc-card{ display:flex; flex-direction:column; border:1px solid var(--paper-line); background:var(--paper); transition:border-color .25s ease, box-shadow .25s ease; }
.proc-card:hover{ border-color:var(--gold); box-shadow:0 8px 24px rgba(20,18,14,.08); }
.proc-card__figure{ aspect-ratio:3/2; overflow:hidden; }
.proc-card__figure img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.proc-card:hover .proc-card__figure img{ transform:scale(1.05); }
.proc-card__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:clamp(1.25rem,2.5vw,1.6rem); }
/* same role as .label everywhere else on the site, so same typography — this one
   had drifted to 12px at half the tracking. The nested duration overrides both. */
.proc-card__step{ display:block; font-size:var(--t-label); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.proc-card__duration{ font-weight:500; letter-spacing:.04em; color:var(--muted-dark); text-transform:none; }
.proc-card__body h3{ font-family:var(--font-body); font-size:1.0625rem; font-weight:600; margin-top:.5rem; color:var(--ink); }
.proc-card__teaser{ margin-top:.6rem; font-size:.875rem; line-height:1.6; color:var(--muted-dark); }

.proc-card__more{ display:flex; align-items:center; width:100%; margin-top:auto; padding-top:1.1rem; padding:0; border:none; background:none; font-family:var(--font-body); font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--gold); cursor:pointer; text-align:left; }
.proc-card__more svg{ width:14px; height:14px; margin-left:auto; transition:transform .25s ease; }
.proc-card__more[aria-expanded="true"] svg{ transform:rotate(180deg); }
.proc-card__detail{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.proc-card__detail.is-open{ grid-template-rows:1fr; }
.proc-card__detail-inner{ overflow:hidden; }
.proc-card__detail p{ padding-top:.9rem; font-size:.875rem; color:var(--muted-dark); }
.proc-card__detail ul{ padding-top:.7rem; }
.proc-card__detail li{ position:relative; padding-left:1.1rem; font-size:.8438rem; color:var(--muted-dark); margin-top:.5rem; }
.proc-card__detail li:first-child{ margin-top:0; }

/* project cards are the same card with a destination instead of a disclosure —
   one component for "what happens next" and "what we have built" */
.proc-card--link{ text-decoration:none; color:inherit; }
.proc-card--link .proc-card__more{ margin-top:auto; padding-top:1.1rem; }
.proc-card--link .proc-card__more svg{ transition:transform .18s var(--ease); }
.proc-card--link:hover .proc-card__more svg{ transform:translateX(3px); }
.proc-card__detail li::before{ content:""; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:50%; background:var(--gold); }

/* FAQ */
.faq{ margin-top:clamp(1.5rem,3vw,2.25rem); max-width:840px; }
.faq-item{ border-top:1px solid var(--line-soft); }
.faq-item:last-child{ border-bottom:1px solid var(--line-soft); }
.faq-item__head{ display:flex; align-items:center; gap:1.25rem; width:100%; padding:clamp(1.15rem,2vw,1.5rem) 0; background:none; border:0; cursor:pointer; text-align:left; font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
.faq-item__head h3{ flex:1; font-family:var(--font-body); font-size:1rem; font-weight:600; }
.faq-item__icon{ flex:none; width:1rem; height:1rem; position:relative; }
.faq-item__icon::before,.faq-item__icon::after{ content:''; position:absolute; background:var(--gold); transition:opacity .25s ease,transform .25s ease; }
.faq-item__icon::before{ left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%); }
.faq-item__icon::after{ top:0; left:50%; width:1.5px; height:100%; transform:translateX(-50%); }
.faq-item.is-open .faq-item__icon::after{ opacity:0; transform:translateX(-50%) rotate(90deg); }
.faq-item__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.faq-item.is-open .faq-item__body{ grid-template-rows:1fr; }
.faq-item__body-inner{ overflow:hidden; }
.faq-item__body p{ padding-bottom:clamp(1.15rem,2vw,1.5rem); font-size:.9375rem; }

/* titleblock */
/* Light surface is the default here, dark is the exception. This table sits on paper
   on five of the six pages that use it, and the previous dark-first defaults never
   reached .contact-hero — leaving that card with near-black rules and a 2.1:1 label.
   Unlike the section kickers, these labels are the only name their value has:
   "License" is what makes CGC1541514 mean anything, so it reads in ink. */
.titleblock{ border:1px solid var(--ink); }
.titleblock__row{ display:flex; border-bottom:1px solid var(--paper-line); }
.titleblock__row:last-child{ border-bottom:0; }
.titleblock dt{ flex:0 0 7.5rem; padding:.65rem .9rem; border-right:1px solid var(--paper-line); font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.section--dark .titleblock{ border-color:var(--line); }
.section--dark .titleblock__row{ border-bottom-color:var(--line-soft); }
.section--dark .titleblock dt{ border-right-color:var(--line-soft); color:var(--gold); }
.titleblock dd{ margin:0; padding:.65rem .9rem; font-size:.9375rem; min-width:0; flex:1 1 auto; overflow-wrap:break-word; }
.titleblock--invite dt, .titleblock--invite dd{ padding-block:.95rem; }

/* phase list (Process page) */

/* investment cards (Investment page) */
.drivers li{ padding:.6rem 0; font-size:.9375rem; border-bottom:1px solid var(--line-soft); }
.drivers li:first-child{ border-top:1px solid var(--line-soft); }
.drivers--dot li{ padding-left:1rem; position:relative; }
.drivers--dot li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--gold); }

/* founder card (About page) */

/* checklist (used in service intros) */

/* contact hero + floating card (Contact page) */
.contact-hero{ position:relative; overflow:hidden; }
.contact-hero__media{ position:absolute; inset:0; z-index:0; }
.contact-hero__media img{ width:100%; height:100%; object-fit:cover; transition:opacity .35s ease; }
/* The top of this hero is text over a still-visible photo. Measured, the old .3/.72
   opening left the back link, kicker and lede between 1.3:1 and 2.1:1 — unreadable.
   Washing the photo out far enough to rescue muted text would have erased it, so the
   copy up there goes to full ink instead and the scrim only rises enough to steady it. */
.contact-hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(165deg, rgba(245,240,230,.45) 0%, rgba(245,240,230,.8) 32%, var(--paper) 66%, var(--paper) 100%); }
.contact-hero .label{ color:var(--ink); }
.contact-hero__inner{ position:relative; z-index:2; padding-block:clamp(4.5rem,9vw,6.5rem) clamp(3rem,6vw,5rem); }
.contact-hero__body{ max-width:36rem; }
.contact-hero__back{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8125rem; color:var(--ink); margin-bottom:1.5rem; border-bottom:1px solid var(--paper-line); padding-bottom:2px; }
.contact-hero__back:hover{ color:var(--ink); }
.contact-hero h1{ color:var(--ink); font-size:clamp(2.25rem,5.2vw,3.75rem); line-height:1.04; letter-spacing:-.012em; }
.contact-hero__lede{ margin-top:1.1rem; max-width:44ch; color:var(--ink); font-size:clamp(1.0625rem,1.4vw,1.1875rem); }
.contact-card{ background:var(--paper-dim); border:1px solid var(--paper-line); box-shadow:0 40px 80px -30px rgba(20,18,14,.35); padding:clamp(1.75rem,4vw,3rem); margin-top:clamp(2.5rem,5vw,3.5rem); max-width:68rem; }
@media (max-width:760px){ .contact-card{ box-shadow:0 20px 40px -20px rgba(20,18,14,.3); padding:clamp(1.5rem,5vw,2rem); } }
.contact-card__head{ margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.contact-card__head h2, .contact-card__head h3{ font-size:1.25rem; color:var(--ink); }
.contact-card__head p{ margin-top:.5rem; font-size:.9375rem; color:var(--muted-dark); }

.contact-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:clamp(2.5rem,5vw,3rem); } }
.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 1.5rem; min-width:0; }
@media (max-width:640px){ .contact-form{ grid-template-columns:1fr; } }
.form-row{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.form-row--full{ grid-column:1 / -1; }
.form-row label{ font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.form-row input, .form-row select, .form-row textarea{
  font-family:var(--font-body); font-size:.9375rem; padding:1rem 1.1rem;
  border:1px solid var(--paper-line); background:var(--paper); color:var(--ink); border-radius:0; width:100%;
}
.form-row textarea{ resize:vertical; min-height:8rem; font-family:inherit; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(198,161,83,.2);
}
.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; -webkit-appearance:none; padding-right:2.5rem; cursor:pointer; }
.select-wrap::after{
  content:""; position:absolute; right:1.1rem; top:50%; width:7px; height:7px;
  border-right:1.5px solid var(--muted-dark); border-bottom:1.5px solid var(--muted-dark);
  transform:translateY(-65%) rotate(45deg); pointer-events:none;
}
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form__submit{ grid-column:1 / -1; display:flex; align-items:center; gap:1.25rem; margin-top:.5rem; flex-wrap:wrap; }
.form-note{ font-size:.875rem; color:var(--muted-dark); }
.form-trust{ grid-column:1 / -1; margin-top:.85rem; font-size:.8125rem; line-height:1.5; color:var(--muted-dark); }
.form-status{ grid-column:1 / -1; font-size:.9375rem; padding:1.1rem 1.3rem; border-left:2px solid var(--gold); background:var(--paper-dim); }
.form-status--ok{ border-left-color:#5C7A52; }
.form-status--error{ border-left-color:#A3503D; }
.contact-info{ border:1px solid #C9BF9F; padding:clamp(1.75rem,3vw,2.25rem); min-width:0; }
.contact-info h3{ font-size:1.125rem; }
.contact-info p{ margin-top:.65rem; font-size:.9375rem; color:var(--muted-dark); }
.contact-info .titleblock{ margin-top:1.5rem; }

/* evidence / weekly-update sample (Process page) */

/* motion */
@media (prefers-reduced-motion:no-preference){
  .reveal{ animation:fadeUp .6s var(--ease) both; }
  .hero h1, .hero__lede, .hero__actions, .hero__trust, .hero__eyebrow{ animation:fadeUp .7s var(--ease) both; }
  .hero__eyebrow{ animation-delay:.05s; }
  .hero h1{ animation-delay:.12s; }
  .hero__lede{ animation-delay:.22s; }
  .hero__actions{ animation-delay:.32s; }
  .hero__trust{ animation-delay:.42s; }

  /* cinematic Ken Burns drift — hero & pagehero photography.
     Custom easing (near-linear through the middle, soft only at the very
     ends) reads as a steady dolly rather than a spring that snaps back —
     the uneven keyframe spacing also keeps scale and drift from bottoming
     out in visual sync, so the reversal point is never obvious. */
  .hero__media img, .pagehero__media img{
    animation:kenburns 64s cubic-bezier(.37,0,.63,1) infinite alternate;
  }
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes kenburns{
  0%   { transform:scale(1.025) translate3d(0,0,0); }
  55%  { transform:scale(1.06) translate3d(-0.85%,-0.45%,0); }
  100% { transform:scale(1.07) translate3d(-1.4%,-0.7%,0); }
}