/* Master Builders of Colorado, v2.
   The Scribed Joint brand guide 1.0: Architectural black, Limestone, Muted bronze,
   Mineral slate. Arial only. The site speaks in drawing-set language:
   sheets, title blocks, detail bubbles, section cuts. */

:root {
  --black: #242622;
  --limestone: #ECE8DF;
  --bronze: #8B7760;
  --slate: #5B625C;
  --paper: #F6F4EF;
  --sheet: #FAF9F5;
  --slab-b: #DFDBD2;
  --ink: #242622;
  --ink-soft: #5B625C;
  --on-dark-soft: #A09E97;
  --on-dark-mid: #CBC8C0;
  --rule-dark: rgba(236, 232, 223, 0.16);
  --rule-light: rgba(36, 38, 34, 0.18);
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --gutter: clamp(1rem, 0.4rem + 3vw, 4rem);
  --measure: 80rem;
  --tb-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --stone-tex:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .15 0 0 0 0 .13 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .018' numOctaves='4' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='.22'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--tb-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, canvas { display: block; max-width: 100%; }
svg { display: block; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  padding: 0.75rem 1.1rem; background: var(--limestone); color: var(--black);
  font-weight: 700; text-decoration: none;
  transform: translateY(-180%); transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- shared ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-size: 0.72rem; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft);
}
.eyebrow::before { content: ""; flex: none; width: 2.25rem; height: 1px; background: var(--bronze); }
.on-dark .eyebrow { color: var(--on-dark-soft); }

.section-head { max-width: 50rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section-head h2 { margin-top: 1.2rem; font-size: clamp(2rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; }
.section-head p { max-width: 40rem; margin: 1.3rem auto 0; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); }
.on-dark .section-head p { color: var(--on-dark-mid); }

.text-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 0.2rem;
}
.text-link svg, .btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.3s var(--ease); }
.text-link:hover svg, .btn:hover svg { transform: translateX(4px); }
.section-more { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 3.25rem; padding: 0 1.5rem;
  font-size: 0.95rem; font-weight: 700; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn--sm { min-height: 2.6rem; padding: 0 1.1rem; font-size: 0.85rem; }
.btn--solid { background: var(--limestone); color: var(--black); border-color: var(--limestone); }
.btn--solid:hover { background: #FFFFFF; border-color: #FFFFFF; }
.btn--ink { background: var(--black); color: var(--limestone); border-color: var(--black); }
.btn--ink:hover { background: #3A3C36; border-color: #3A3C36; }
.btn--line { color: var(--limestone); border-color: rgba(236, 232, 223, 0.42); }
.btn--line:hover { border-color: var(--limestone); background: rgba(236, 232, 223, 0.07); }
.btn--line-ink { color: var(--ink); border-color: rgba(36, 38, 34, 0.45); }
.btn--line-ink:hover { border-color: var(--ink); background: rgba(36, 38, 34, 0.05); }

/* ---------- title-block header ---------- */

.tb {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--tb-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  column-gap: clamp(1rem, 2vw, 2rem);
  padding: 0 var(--gutter);
  background: var(--black);
  color: var(--limestone);
  border-bottom: 1px solid var(--rule-dark);
  transition: transform 0.45s var(--ease);
}
.tb.is-hidden { transform: translateY(-100%); }
.tb__logo { display: block; padding: 8px 0; }
.tb__logo img { width: 320px; height: auto; }
.tb__nav ul { display: flex; justify-content: center; gap: clamp(1.25rem, 2.2vw, 2.5rem); }
.tb__nav a {
  position: relative; display: inline-block; padding: 0.5rem 0;
  font-size: 0.9rem; text-decoration: none; color: var(--on-dark-mid);
  transition: color 0.25s var(--ease);
}
.tb__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px;
  background: var(--bronze); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.tb__nav a:hover { color: var(--limestone); }
.tb__nav a:hover::after { transform: scaleX(1); }
.tb__sheet {
  display: grid; align-content: center;
  height: calc(var(--tb-h) - 22px);
  min-width: 10.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--rule-dark);
  overflow: hidden;
}
.tb__sheet-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-soft); }
.tb__sheet-val { display: flex; gap: 0.55rem; align-items: baseline; font-size: 0.85rem; white-space: nowrap; }
.tb__sheet-val b { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.tb__sheet-val span { color: var(--on-dark-mid); }
.tb__index {
  display: none;
  min-height: 2.6rem; padding: 0 1rem;
  border: 1px solid rgba(236, 232, 223, 0.42);
  font-size: 0.85rem; font-weight: 700;
}
@media (max-width: 1099px) {
  .tb { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .tb__nav { display: none; }
  .tb__index { display: inline-flex; align-items: center; }
  .tb__sheet { justify-self: end; }
}
@media (max-width: 799px) {
  .tb__cta { display: none; }
}
@media (max-width: 699px) {
  :root { --tb-h: 64px; }
  .tb { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .tb__logo img { width: min(320px, calc(100vw - 2rem)); }
  .tb__sheet, .tb__index { display: none; }
}

/* services mega menu */
.tb__mega-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0; font-size: 0.9rem; color: var(--on-dark-mid); transition: color 0.25s var(--ease); }
.tb__mega-btn svg { width: 0.7rem; height: 0.7rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.3s var(--ease); }
.tb__mega-btn:hover, .tb__mega-btn[aria-expanded="true"] { color: var(--limestone); }
.tb__mega-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--black); color: var(--limestone);
  border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark);
  box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.6);
}
.mega[hidden] { display: none; }
.motion .mega:not([hidden]) { animation: mega-in 0.35s var(--ease) both; }
@keyframes mega-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.mega__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(1.5rem, 3vw, 3rem); max-width: var(--measure); margin: 0 auto; padding: 2rem var(--gutter) 2.25rem; }
.mega__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.mega__group { padding-bottom: 0.6rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--rule-dark); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-soft); }
.mega__col a { display: grid; gap: 0.2rem; padding: 0.6rem 0.5rem 0.65rem; margin: 0 -0.5rem; text-decoration: none; transition: background-color 0.2s var(--ease); }
.mega__col a:hover, .mega__col a:focus-visible { background: rgba(236, 232, 223, 0.06); }
.mega__name { font-size: 0.98rem; font-weight: 700; }
.mega__teaser { font-size: 0.8rem; line-height: 1.45; color: var(--on-dark-soft); }
.mega__feature { margin: 0; }
.mega__feature img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity 0.25s var(--ease); }
.mega__feature figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.8rem; font-size: 0.72rem; color: var(--on-dark-soft); }
.mega__feature .text-link { font-size: 0.88rem; color: var(--limestone); }
@media (max-width: 1299px) { .mega__inner { grid-template-columns: minmax(0, 1fr); } .mega__feature { display: none; } }

/* floating index button, phones only */
.fab { display: none; }
@media (max-width: 699px) {
  .fab {
    position: fixed; z-index: 55;
    right: calc(1rem + env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom));
    display: grid; justify-items: start; align-content: center;
    min-width: 5.25rem; min-height: 3.5rem; padding: 0.4rem 0.8rem;
    background: var(--limestone); color: var(--black);
    border: 1px solid var(--black);
    box-shadow: 0 10px 30px -12px rgba(36, 38, 34, 0.6);
    text-align: left;
  }
  .fab { transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); }
  .fab.is-hidden { transform: translateY(140%); opacity: 0; }
  .fab__label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
  .fab__no { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
}

/* drawing index dialog */
.index {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; gap: 2rem;
  padding: calc(1.25rem + env(safe-area-inset-top)) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--black); color: var(--limestone);
  overflow-y: auto;
}
.index[hidden] { display: none; }
.motion .index:not([hidden]) { animation: index-wipe 0.55s var(--ease) both; }
@keyframes index-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.index__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-dark); }
.index__head h2 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; }
.index__close { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--rule-dark); }
.index__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.index__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 6vw, 6rem); max-width: 70rem; width: 100%; margin: 0 auto; }
.index__group { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark-soft); padding-bottom: 0.75rem; }
.index li { border-top: 1px solid var(--rule-dark); }
.index a { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: baseline; padding: 0.95rem 0; text-decoration: none; font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem); }
.index a b { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--on-dark-soft); font-variant-numeric: tabular-nums; }
.index a:hover { color: #FFFFFF; }
.index > .btn { align-self: center; }
@media (max-width: 699px) { .index__cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- A-000 cover + A-001 intent ---------- */

.run { position: relative; background: var(--black); }
.run__stage { position: relative; }
.cover {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background: var(--black);
  --ex: 1; --ey: 1;
  --lpx: 22%; --lpy: 18%;
}
.slab {
  position: absolute; inset: 0;
  /* both slabs carry the same full-bleed photograph, so it reads as one picture split along the joint */
  background:
    radial-gradient(circle at var(--lpx) var(--lpy), rgba(255, 236, 200, 0.16) 0, rgba(255, 236, 200, 0) 30%),
    linear-gradient(90deg, rgba(36, 38, 34, 0.86) 0%, rgba(36, 38, 34, 0.76) 36%, rgba(36, 38, 34, 0.42) 54%, rgba(36, 38, 34, 0) 72%),
    linear-gradient(180deg, rgba(36, 38, 34, 0.35) 0%, rgba(36, 38, 34, 0) 22%),
    url("/assets/img/illustrative-hero-neighborhood-home-2560.webp") 62% 50% / cover no-repeat,
    var(--black);
  will-change: transform;
}
.slab--b {
  /* the second mass is the finished home */
  background:
    radial-gradient(circle at var(--lpx) var(--lpy), rgba(255, 236, 200, 0.16) 0, rgba(255, 236, 200, 0) 30%),
    linear-gradient(90deg, rgba(36, 38, 34, 0.86) 0%, rgba(36, 38, 34, 0.76) 36%, rgba(36, 38, 34, 0.42) 54%, rgba(36, 38, 34, 0) 72%),
    linear-gradient(180deg, rgba(36, 38, 34, 0.35) 0%, rgba(36, 38, 34, 0) 22%),
    url("/assets/img/illustrative-hero-neighborhood-home-2560.webp") 62% 50% / cover no-repeat,
    var(--black);
}
@media (max-width: 699px) {
  .slab, .slab--b {
    background:
      linear-gradient(180deg, rgba(36, 38, 34, 0.84) 0%, rgba(36, 38, 34, 0.7) 45%, rgba(36, 38, 34, 0.2) 66%, rgba(36, 38, 34, 0.1) 100%),
      url("/assets/img/illustrative-hero-neighborhood-home-1280.webp") 74% 50% / cover no-repeat,
      var(--black);
  }
}
/* static seam, drawn in percentages so the page reads without JavaScript */
.slab--a { clip-path: polygon(-1% -1%, calc(66% - 5px) -1%, calc(66% - 5px) 47%, calc(57.5% - 5px) 56%, calc(57.5% - 5px) 101%, -1% 101%); }
.slab--b { clip-path: polygon(calc(66% + 5px) -1%, 101% -1%, 101% 101%, calc(57.5% + 5px) 101%, calc(57.5% + 5px) 56%, calc(66% + 5px) 47%); }
.seam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.seam path { fill: none; stroke-linejoin: miter; }

.slab__copy {
  position: absolute;
  left: var(--gutter);
  /* centred in the space below the header, and kept clear of the joint line at 57.5% */
  top: calc(50% + var(--tb-h) / 2);
  transform: translateY(-50%);
  width: min(calc(57.5vw - var(--gutter) * 2 - 1rem), 62rem);
}
.cover__title {
  margin-top: 1.3rem;
  font-weight: 700;
  font-size: clamp(3rem, 0.5rem + 5.4vw, 7.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.engrave {
  color: var(--limestone);
  /* the shadow still falls away from the light the cursor casts */
  text-shadow: calc(var(--ex) * 3px) calc(var(--ey) * 3px) 14px rgba(20, 21, 19, 0.55);
}
.cover .eyebrow { color: var(--on-dark-mid); font-size: clamp(0.72rem, 0.6rem + 0.25vw, 0.9rem); }
.cover__lede { max-width: 40rem; margin-top: clamp(1.4rem, 3vh, 2.25rem); font-size: clamp(1.05rem, 0.75rem + 0.75vw, 1.55rem); line-height: 1.55; color: var(--limestone); }
.cover__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: clamp(2rem, 4.5vh, 3rem); }
.cover__actions .btn { min-height: clamp(3.25rem, 2.6rem + 1.2vw, 4.1rem); padding: 0 clamp(1.5rem, 1rem + 1vw, 2.2rem); font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.12rem); }
.cover__hint {
  position: absolute; left: var(--gutter); bottom: 1.6rem;
  font-size: 0.75rem; letter-spacing: 0.06em; color: var(--on-dark-mid);
}
.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint-fine { display: none; } .hint-touch { display: inline; } }
.w { display: inline-block; }
.motion .cover__title .w { animation: rise 1s var(--ease) both; animation-delay: calc(var(--i) * 60ms + 100ms); }
.motion .cover__rise { animation: rise-sm 0.9s var(--ease) both; animation-delay: 0.55s; }
@keyframes rise { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
@keyframes rise-sm { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.titleblock {
  position: absolute;
  right: var(--gutter); bottom: clamp(1.5rem, 5vh, 3rem);
  width: min(22rem, calc(42.5vw - var(--gutter) * 2));
  border: 1px solid rgba(36, 38, 34, 0.55);
  font-size: 0.82rem;
  background: rgba(250, 249, 245, 0.94);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.55);
}
.titleblock div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); border-top: 1px solid rgba(36, 38, 34, 0.3); }
.titleblock div:first-child { border-top: 0; }
.titleblock dt, .titleblock dd { padding: 0.55rem 0.75rem; }
.titleblock dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); border-right: 1px solid rgba(36, 38, 34, 0.3); align-self: stretch; display: flex; align-items: center; }
.titleblock dd { color: var(--ink); }
.titleblock__light dd { font-weight: 700; }
.titleblock__photo dd { font-size: 0.72rem; line-height: 1.4; color: var(--ink-soft); }
.titleblock__photo a { color: var(--ink); }

/* portrait: the seam turns horizontal, copy on top, title block below */
@media (max-aspect-ratio: 9/10), (max-width: 699px) {
  .slab--a { clip-path: polygon(-1% -1%, 101% -1%, 101% calc(71% - 5px), 56% calc(71% - 5px), 46% calc(63% - 5px), -1% calc(63% - 5px)); }
  .slab--b { clip-path: polygon(-1% calc(63% + 5px), 46% calc(63% + 5px), 56% calc(71% + 5px), 101% calc(71% + 5px), 101% 101%, -1% 101%); }
  .slab__copy { top: calc(var(--tb-h) + 1.25rem); right: var(--gutter); width: auto; transform: none; }
  .cover__title { font-size: clamp(2.1rem, 1.2rem + 4.2vw, 3.6rem); margin-top: 0.9rem; }
  .cover__lede { margin-top: 1rem; font-size: 0.98rem; line-height: 1.55; }
  .cover__actions { margin-top: 1.25rem; gap: 0.5rem; }
  .cover__actions .btn { min-height: 2.9rem; padding: 0 1rem; font-size: 0.88rem; }
  .cover__hint { display: none; }
  .cover .eyebrow { letter-spacing: 0.16em; font-size: 0.66rem; }
  .titleblock { left: var(--gutter); right: calc(6.5rem + var(--gutter)); bottom: calc(1rem + env(safe-area-inset-bottom)); width: auto; font-size: 0.74rem; }
  .titleblock div { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .titleblock dt, .titleblock dd { padding: 0.32rem 0.55rem; }
  .titleblock div:nth-child(1), .titleblock div:nth-child(2) { display: none; }
}
@media (max-width: 699px) and (min-width: 1px) {
  .titleblock { right: calc(7.25rem + env(safe-area-inset-right)); }
}

.intent {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 9vw, 7rem) var(--gutter);
  background: var(--black);
  color: var(--limestone);
}
/* timber joinery behind the copy, held down by a scrim that keeps the text at AA contrast */
.intent__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
.intent::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(36, 38, 34, 0.93) 0%, rgba(36, 38, 34, 0.86) 42%, rgba(36, 38, 34, 0.7) 100%); }
.intent__credit { position: absolute; left: var(--gutter); bottom: 1.1rem; z-index: 1; font-size: 0.72rem; color: var(--on-dark-soft); }
.intent__credit a { color: var(--on-dark-mid); }
@media (max-width: 899px) { .intent::before { background: linear-gradient(180deg, rgba(36, 38, 34, 0.9) 0%, rgba(36, 38, 34, 0.82) 100%); } }
.intent__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
  max-width: var(--measure);
  margin: 0 auto;
}
.intent__copy h2 {
  margin-top: 1.2rem;
  font-size: clamp(2.3rem, 1.1rem + 3.3vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.intent__body { max-width: 30rem; margin: 1.5rem 0 2rem; font-size: 1.0625rem; line-height: 1.7; color: var(--on-dark-mid); }
.intent__figure { position: relative; margin: 0; padding-left: clamp(0rem, 9vw, 9rem); }
.intent__photo { position: relative; overflow: hidden; height: min(68vh, 42rem); background: #33352F; }
.intent__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.04); transition: transform 1.2s var(--ease); }
.intent__figure figcaption { margin-top: 0.7rem; font-size: 0.74rem; color: var(--on-dark-soft); text-align: right; }

/* the three principles step down across the photo's edge, like the joint in the mark */
.plates { position: absolute; left: 0; top: 0; bottom: 2rem; width: 29rem; display: grid; align-content: space-between; padding: 7% 0; pointer-events: none; }
.plate {
  pointer-events: auto;
  position: relative;
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 0.4rem;
  padding: 1rem 1.2rem 1.05rem;
  background: var(--limestone);
  color: var(--ink);
  box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.8);
  transition: transform 0.45s var(--ease), background-color 0.3s var(--ease);
}
.plate { width: 21rem; }
.plate:nth-child(1) { margin-left: 0; }
.plate:nth-child(2) { margin-left: 4rem; }
.plate:nth-child(3) { margin-left: 8rem; }
.plate::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bronze); transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--ease); }
.plate:hover { transform: translateX(10px); }
.plate:hover::before { transform: scaleY(1); }
.plate__no { grid-row: span 2; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); padding-top: 0.2rem; letter-spacing: 0.06em; }
.plate h3 { font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.plate p { margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 899px) {
  .intent__grid { grid-template-columns: minmax(0, 1fr); }
  .intent__figure { padding-left: 0; }
  .intent__photo { height: auto; aspect-ratio: 4 / 3; }
  .plates { position: relative; width: auto; padding: 0; margin-top: -3rem; gap: 0.6rem; bottom: auto; }
  .plate { width: auto; }
  .plate:nth-child(1) { margin: 0 3rem 0 0.75rem; }
  .plate:nth-child(2) { margin: 0 1.5rem 0 2.25rem; }
  .plate:nth-child(3) { margin: 0 0 0 3.75rem; }
  .intent__figure figcaption { text-align: left; }
}

/* motion: the run pins; the intent waits behind the slabs */
.motion .run { height: 230vh; height: 230svh; }
.motion .run__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.motion .cover { position: absolute; inset: 0; z-index: 2; height: auto; min-height: 0; background: transparent; }
.motion .intent { position: absolute; inset: 0; z-index: 1; display: grid; align-items: center; padding-top: calc(var(--tb-h) + 1.5rem); padding-bottom: 1.5rem; }
.motion .intent__grid { opacity: 0; }
.motion .run.run--flow { height: auto; }
.motion .run--flow .run__stage { position: relative; height: auto; overflow: visible; }
.motion .run--flow .cover { position: relative; height: 100svh; min-height: 34rem; background: var(--black); }
.motion .run--flow .intent { position: relative; display: block; padding: clamp(5rem, 10vw, 8rem) var(--gutter); }
.motion .run--flow .intent__grid { opacity: 1; }
@media (max-width: 699px) {
  .motion .run { height: 200vh; height: 200svh; }
}

/* ---------- A-200 services: one list over a stack of backdrop videos ---------- */

.cap { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5.5rem, 10vw, 9rem) var(--gutter) clamp(5rem, 9vw, 8rem); background: var(--black); color: var(--limestone); }
.cap__media { position: absolute; inset: 0; z-index: -2; }
.cap__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); }
.cap__layer.is-on { opacity: 1; }
.cap__poster, .cap__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cap__video { opacity: 0; transition: opacity 0.6s var(--ease); }
.cap__video.is-playing { opacity: 1; }
/* a heavy scrim so the type never fights the footage */
.cap::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(36, 38, 34, 0.94) 0%, rgba(36, 38, 34, 0.86) 45%, rgba(36, 38, 34, 0.62) 100%),
  linear-gradient(180deg, rgba(36, 38, 34, 0.55) 0%, rgba(36, 38, 34, 0) 25%, rgba(36, 38, 34, 0) 75%, rgba(36, 38, 34, 0.6) 100%); }
.cap__inner { position: relative; max-width: var(--measure); margin: 0 auto; }
.cap__head { max-width: 46rem; margin: 0 auto clamp(3rem, 6vw, 4.5rem); text-align: center; }
.cap__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--on-dark-mid); }
.cap__head h2 { margin-top: 1.1rem; font-size: clamp(2.2rem, 1.2rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.025em; }
.cap__head p:last-child { max-width: 36rem; margin: 1.2rem auto 0; font-size: 1.05rem; line-height: 1.65; color: var(--on-dark-mid); }
.cap__list { max-width: 60rem; border-top: 1px solid var(--rule-dark); }
.cap__row { position: relative; border-bottom: 1px solid var(--rule-dark); }
.cap__row::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--bronze); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease); }
.cap__row.is-on::before { transform: scaleY(1); }
.cap__btn { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto 2.5rem; align-items: center; gap: 1rem; width: 100%; padding: clamp(0.9rem, 1.6vw, 1.3rem) 0.5rem clamp(0.9rem, 1.6vw, 1.3rem) 1.25rem; text-align: left; transition: transform 0.45s var(--ease), color 0.3s var(--ease); color: var(--on-dark-mid); }
.cap__row.is-on .cap__btn { transform: translateX(6px); color: var(--limestone); }
.cap__no { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--on-dark-soft); }
.cap__name { font-size: clamp(1.5rem, 0.9rem + 2vw, 2.7rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }
.cap__group { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-soft); }
.cap__arrow svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.4s var(--ease); }
.cap__row.is-on .cap__arrow svg { transform: translate(3px, -3px); }
.cap__btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
/* expansion without measuring height */
.cap__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.cap__row.is-on .cap__panel { grid-template-rows: 1fr; }
.cap__panel-in { overflow: hidden; padding: 0 0.5rem 0 calc(1.25rem + 3.25rem + 1rem + 6px); }
.cap__panel-in p { max-width: 34rem; font-size: 1.02rem; line-height: 1.6; color: var(--on-dark-mid); }
.cap__panel-in .text-link { margin: 0.9rem 0 1.4rem; color: var(--limestone); }
.cap__more { margin-top: 2.25rem; }
.cap__more .text-link { color: var(--limestone); }
.cap__ghost { position: absolute; right: var(--gutter); bottom: -0.12em; z-index: 0; font-size: clamp(10rem, 22vw, 24rem); font-weight: 700; line-height: 1; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(236, 232, 223, 0.32); pointer-events: none; font-variant-numeric: tabular-nums; transition: opacity 0.4s var(--ease); }
.cap__ghost.is-swap { opacity: 0; }
.cap__credit { position: absolute; left: var(--gutter); bottom: 1rem; font-size: 0.72rem; color: var(--on-dark-soft); }
@media (max-width: 899px) {
  .cap__layer.is-on { opacity: 0.55; }
  .cap::before { background: linear-gradient(180deg, rgba(36, 38, 34, 0.9) 0%, rgba(36, 38, 34, 0.84) 50%, rgba(36, 38, 34, 0.92) 100%); }
  .cap__btn { grid-template-columns: 2.4rem minmax(0, 1fr) 2rem; gap: 0.6rem; padding-left: 0.9rem; }
  .cap__group { display: none; }
  .cap__panel-in { padding-left: calc(0.9rem + 2.4rem + 0.6rem); }
  .cap__ghost { font-size: 9rem; opacity: 0.6; }
  .cap__credit { position: static; margin-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .cap__video { display: none; } }

/* ---------- A-201 directions: a photo grid of home styles ---------- */

.dirs { padding: clamp(5rem, 9vw, 8rem) var(--gutter) clamp(4rem, 7vw, 6rem); background: var(--paper); }
.dirs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); max-width: var(--measure); margin: 0 auto; }
.dir__link { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--black); color: var(--limestone); text-decoration: none; }
.dir__link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.6s var(--ease); }
.dir__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 38, 34, 0) 45%, rgba(36, 38, 34, 0.82) 100%); transition: background-color 0.5s var(--ease); }
.dir__strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: baseline; gap: 0.9rem; padding: 1.1rem 1.25rem; border-top: 1px solid rgba(236, 232, 223, 0.35); transition: transform 0.55s var(--ease); }
.dir__strip b { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--on-dark-mid); font-variant-numeric: tabular-nums; }
.dir__name { font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); font-weight: 700; }
.dir__more { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 0.9rem; padding: 0 1.25rem 1.25rem; font-size: 0.95rem; line-height: 1.55; opacity: 0; transform: translateY(16px); transition: opacity 0.45s var(--ease), transform 0.55s var(--ease); }
.dir__cta { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.85rem; border-bottom: 1px solid currentColor; justify-self: start; padding-bottom: 0.15rem; }
.dir__cta svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (hover: hover) {
  .dir__link:hover img, .dir__link:focus-visible img { transform: scale(1.06); }
  .dir__link:hover::after, .dir__link:focus-visible::after { background-color: rgba(36, 38, 34, 0.45); }
  .dir__link:hover .dir__strip, .dir__link:focus-visible .dir__strip { transform: translateY(-7.5rem); }
  .dir__link:hover .dir__more, .dir__link:focus-visible .dir__more { opacity: 1; transform: none; }
}
@media (hover: none) {
  /* touch screens show the description by default */
  .dir__link { display: flex; flex-direction: column; justify-content: flex-end; }
  .dir__strip, .dir__more { position: relative; transform: none; }
  .dir__more { opacity: 1; }
  .dir__strip { border-top: 0; padding-bottom: 0.6rem; }
  .dir__link::after { background: linear-gradient(180deg, rgba(36, 38, 34, 0) 25%, rgba(36, 38, 34, 0.9) 100%); }
}
.dir { position: relative; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --px: 0px; --py: 0px; }
/* depth: the tile tilts toward the pointer, the photo drifts the other way, a soft light follows */
.js .dir__link { transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 0.6s var(--ease); }
.js .dir.is-tilting .dir__link { transition: transform 0.12s linear; }
.js .dir__link img { transform: translate(var(--px), var(--py)) scale(1.08); }
@media (hover: hover) { .js .dir__link:hover img, .js .dir__link:focus-visible img { transform: translate(var(--px), var(--py)) scale(1.12); } }
.dir__link::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease);
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 248, 232, 0.22) 0, rgba(255, 248, 232, 0) 45%); }
.dir.is-tilting .dir__link::before { opacity: 1; }
/* stepped reveal: each tile opens along the joint, one after another */
.motion .dir.is-hidden .dir__link { clip-path: polygon(0 0, 0 0, 0 47%, 0 56%, 0 100%, 0 100%); }
.motion .dir.is-shown .dir__link { animation: dir-open 0.95s var(--ease) both; animation-delay: calc(var(--n) * 110ms); }
@keyframes dir-open {
  from { clip-path: polygon(0 0, 0% 0, 0% 47%, -9% 56%, -9% 100%, 0 100%); }
  to { clip-path: polygon(0 0, 109% 0, 109% 47%, 100% 56%, 100% 100%, 0 100%); }
}
/* save toggle */
.dir__save { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.5rem; padding: 0 0.85rem;
  background: rgba(36, 38, 34, 0.72); color: var(--limestone); border: 1px solid rgba(236, 232, 223, 0.35);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); }
.dir__save svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: fill 0.25s var(--ease); }
.dir__save:hover { background: rgba(36, 38, 34, 0.9); }
.dir__save[aria-pressed="true"] { background: var(--limestone); color: var(--black); border-color: var(--limestone); }
.dir__save[aria-pressed="true"] svg { fill: currentColor; }
.dir__save.is-pop { animation: save-pop 0.45s var(--ease); }
@keyframes save-pop { 40% { transform: scale(1.12); } }
.dir.is-saved .dir__link { box-shadow: inset 0 0 0 2px var(--limestone); }
/* shortlist tray */
.dirs__tray { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.25rem; max-width: var(--measure); margin: 1.25rem auto 0; padding: 0.9rem 1.1rem; background: var(--limestone); border-left: 3px solid var(--bronze); }
.dirs__tray[hidden] { display: none; }
.motion .dirs__tray:not([hidden]) { animation: rise-sm 0.45s var(--ease) both; }
.dirs__tray p { flex: 1 1 18rem; font-size: 0.95rem; line-height: 1.5; }
.dirs__clear { min-height: 2.6rem; padding: 0 0.6rem; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.dirs__note { max-width: var(--measure); margin: 0.9rem auto 0; font-size: 0.74rem; color: var(--ink-soft); text-align: right; }
@media (max-width: 899px) { .dirs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .dirs__grid { grid-template-columns: minmax(0, 1fr); } .dir__link { aspect-ratio: 4 / 4.4; } }

/* ---------- full-bleed photo band ---------- */

.band { position: relative; isolation: isolate; overflow: hidden; min-height: min(82vh, 46rem); display: grid; align-items: center; padding: clamp(5rem, 9vw, 8rem) var(--gutter); background: var(--black); color: var(--limestone); }
.band__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 120%; max-width: none; object-fit: cover; object-position: 60% 50%; will-change: transform; }
.band__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0; transition: opacity 0.8s var(--ease); }
.band__video.is-playing { opacity: 1; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(36, 38, 34, 0.9) 0%, rgba(36, 38, 34, 0.74) 40%, rgba(36, 38, 34, 0.25) 75%, rgba(36, 38, 34, 0.1) 100%); }
.band__inner { width: 100%; max-width: var(--measure); margin: 0 auto; }
.band h2 { max-width: 13ch; font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.03em; }
.band p { max-width: 32rem; margin-top: 1.4rem; font-size: 1.08rem; line-height: 1.65; color: var(--limestone); }
.band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.band__credit { position: absolute; right: var(--gutter); bottom: 1.1rem; font-size: 0.72rem; color: var(--on-dark-mid); }
@media (max-width: 699px) { .band::before { background: linear-gradient(180deg, rgba(36, 38, 34, 0.86) 0%, rgba(36, 38, 34, 0.8) 100%); } }

/* ---------- G-003 guides: a stack of drawing sheets with file tabs ---------- */

.gx { padding: clamp(5rem, 9vw, 8rem) var(--gutter); background: var(--paper); overflow: hidden; }
.gx__wrap { max-width: var(--measure); margin: 0 auto; }
.gx__tabs { display: none; }
.js .gx__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; padding-left: 1rem; }
.gx__tab { position: relative; display: grid; gap: 0.2rem; padding: 0.85rem 1rem 0.95rem; text-align: left; background: var(--limestone); border: 1px solid var(--rule-light); border-bottom: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); transition: background-color 0.3s var(--ease), transform 0.3s var(--ease); transform: translateY(6px); }
.gx__tab b { font-size: 0.7rem; letter-spacing: 0.16em; color: var(--ink-soft); }
.gx__tab span { font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: var(--ink-soft); }
.gx__tab:hover { transform: translateY(2px); }
.gx__tab[aria-selected="true"] { background: var(--sheet); transform: none; border-color: var(--ink); }
.gx__tab[aria-selected="true"] span, .gx__tab[aria-selected="true"] b { color: var(--ink); }
.gx__tab:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.gx__stack { position: relative; }
.js .gx__stack { display: grid; }
.gx__sheet { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); background: var(--sheet); border: 1px solid var(--ink); box-shadow: 0 30px 50px -36px rgba(36, 38, 34, 0.55); }
.gx__sheet + .gx__sheet { margin-top: 2rem; }
.js .gx__sheet + .gx__sheet { margin-top: 0; }
.js .gx__sheet { grid-area: 1 / 1; transition: transform 0.7s var(--ease), opacity 0.5s var(--ease); transform-origin: 50% 100%; }
/* the stack: sheets behind the front one fan out slightly, like drawings on a table */
.js .gx__sheet[data-pos="0"] { z-index: 3; transform: none; }
.js .gx__sheet[data-pos="1"] { z-index: 2; transform: translate(14px, 14px) rotate(0.8deg); }
.js .gx__sheet[data-pos="2"] { z-index: 1; transform: translate(28px, 28px) rotate(1.6deg); }
.js .gx__sheet[data-pos="1"] > *, .js .gx__sheet[data-pos="2"] > * { opacity: 0; transition: opacity 0.3s var(--ease); }
.js .gx__sheet > * { transition: opacity 0.45s var(--ease) 0.15s; }
.js .gx__wrap:hover .gx__sheet[data-pos="1"] { transform: translate(22px, 18px) rotate(1.4deg); }
.js .gx__wrap:hover .gx__sheet[data-pos="2"] { transform: translate(44px, 34px) rotate(2.8deg); }
.js .gx__sheet.is-leaving { z-index: 4; transform: translate(-60%, -4%) rotate(-7deg); opacity: 0; }
.gx__photo { position: relative; min-height: 26rem; overflow: hidden; border-right: 1px solid var(--ink); }
.gx__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.gx__sheet[data-pos="0"] .gx__photo img { transform: none; }
.gx__stamp { position: absolute; left: 1rem; top: 1rem; padding: 0.4rem 0.65rem; background: rgba(36, 38, 34, 0.86); color: var(--limestone); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.gx__body { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.5rem); }
.gx__kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.gx__body h3 { margin-top: 0.7rem; font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.3rem); line-height: 1.1; letter-spacing: -0.02em; }
.gx__text { margin-top: 0.9rem; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.gx__label { margin-top: 1.4rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule-light); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.gx__inside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.gx__inside li { display: flex; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule-light); font-size: 0.9rem; line-height: 1.35; }
.gx__inside li span { font-size: 0.72rem; font-weight: 700; color: var(--bronze); padding-top: 0.12rem; }
.motion .gx__sheet[data-pos="0"] .gx__inside li { animation: rise-sm 0.5s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms + 250ms); }
.gx__cta { margin-top: auto; align-self: flex-start; }
.gx__inside + .gx__cta { margin-top: 1.75rem; }
.gx__progress { height: 2px; margin-top: 2.6rem; background: var(--rule-light); overflow: hidden; }
.gx__progress i { display: block; height: 100%; width: 100%; background: var(--bronze); transform: scaleX(0); transform-origin: left; }
html:not(.js) .gx__progress { display: none; }
.gx__note { max-width: var(--measure); margin: 0.9rem auto 0; font-size: 0.74rem; color: var(--ink-soft); }
@media (max-width: 899px) {
  .gx__sheet { grid-template-columns: minmax(0, 1fr); }
  .gx__photo { min-height: 15rem; border-right: 0; border-bottom: 1px solid var(--ink); }
  .js .gx__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 0; }
  .gx__tab span { display: none; }
  .js .gx__sheet[data-pos="1"] { transform: translate(8px, 8px) rotate(0.6deg); }
  .js .gx__sheet[data-pos="2"] { transform: translate(16px, 16px) rotate(1.2deg); }
}
@media (max-width: 599px) { .gx__inside { grid-template-columns: minmax(0, 1fr); } }

/* ---------- G-003 guides ---------- */

.guides { padding: clamp(5rem, 9vw, 8rem) var(--gutter); background: var(--paper); }
.guides__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.25rem); max-width: var(--measure); margin: 0 auto; }
.guide a { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; background: var(--sheet); border: 1px solid var(--rule-light); transition: border-color 0.3s var(--ease); }
.guide a:hover { border-color: var(--ink); }
.guide__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.guide__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.guide a:hover .guide__img img { transform: scale(1.05); }
.guide__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.6rem; padding: 1.25rem 1.3rem 1.4rem; }
.guide__no { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.guide h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.guide__text { font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.guide__read { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-size: 0.88rem; font-weight: 700; border-bottom: 1px solid currentColor; justify-self: start; padding-bottom: 0.15rem; }
.guide__read svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.3s var(--ease); }
.guide a:hover .guide__read svg { transform: translateX(4px); }
@media (max-width: 899px) { .guides__grid { grid-template-columns: minmax(0, 1fr); max-width: 34rem; } }

/* ---------- A-501 details: a drawing sheet whose title block is the display ---------- */

.details, .dsx { padding: clamp(5rem, 9vw, 8rem) var(--gutter); background: var(--paper); }
.dsx {
  /* a faint two-scale blueprint grid behind the sheet */
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(91, 98, 92, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 98, 92, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(91, 98, 92, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 98, 92, 0.06) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.dsx__sheet { position: relative; max-width: var(--measure); margin: 0 auto; background: var(--sheet); border: 1px solid var(--ink); }
.dsx__tick { position: absolute; width: 14px; height: 14px; border-color: var(--ink); border-style: solid; border-width: 0; }
.dsx__tick--tl { top: -7px; left: -7px; border-top-width: 2px; border-left-width: 2px; }
.dsx__tick--tr { top: -7px; right: -7px; border-top-width: 2px; border-right-width: 2px; }
.dsx__tick--bl { bottom: -7px; left: -7px; border-bottom-width: 2px; border-left-width: 2px; }
.dsx__tick--br { bottom: -7px; right: -7px; border-bottom-width: 2px; border-right-width: 2px; }

.dsx__block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); border-bottom: 1px solid var(--ink); }
.dsx__display { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(26rem, 38vw, 32rem); border-right: 1px solid var(--ink); }
.dsx__bgs { position: absolute; inset: 0; z-index: -1; }
.dsx__bg { position: absolute; top: 0; right: 0; width: 72%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.15s ease-out; }
.dsx__bg.is-on { opacity: 0.94; transition: opacity 0.34s ease-out 0.12s; }
/* wash the photograph toward the text side */
.dsx__bgs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sheet) 0%, var(--sheet) 34%, rgba(250, 249, 245, 0.86) 50%, rgba(250, 249, 245, 0.2) 74%, rgba(250, 249, 245, 0) 100%); }
.dsx__panels { display: grid; height: 100%; }
.dsx__panel { grid-area: 1 / 1; align-self: center; max-width: 34rem; padding: clamp(1.75rem, 3.5vw, 3rem); }
.js .dsx__panel { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0.15s; }
.js .dsx__panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.34s ease-out 0.12s, transform 0.34s var(--ease) 0.12s, visibility 0s; }
.dsx__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.dsx__panel h2 { margin-top: 1rem; font-size: clamp(2rem, 1.1rem + 2.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.025em; }
.dsx__panel h3 { margin-top: 0.8rem; font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; }
.dsx__lede { margin-top: 1.2rem; font-size: 1.05rem; line-height: 1.65; color: #3E403A; }
.dsx__facts { display: grid; gap: 0.9rem; margin-top: 1.1rem; }
.dsx__facts dt { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.dsx__facts dd { margin-top: 0.25rem; font-size: 0.95rem; line-height: 1.55; color: #3E403A; }
.dsx__ask { margin-top: 1rem; padding: 0.8rem 1rem; background: rgba(236, 232, 223, 0.92); border-left: 3px solid var(--bronze); font-size: 0.95rem; font-weight: 700; line-height: 1.45; }
.dsx__ask span { display: block; margin-bottom: 0.25rem; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

.dsx__meta { display: grid; align-content: start; }
.dsx__meta div { display: grid; gap: 0.15rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule-light); }
.dsx__meta div:last-child { border-bottom: 0; }
.dsx__meta dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.dsx__meta dd { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* a live conductor line with a charge travelling along it */
.dsx__conductor { position: relative; height: 1px; margin: 0 clamp(1rem, 2vw, 1.5rem); background: var(--rule-light); overflow: hidden; top: clamp(0.9rem, 1.6vw, 1.25rem); }
.dsx__charge { position: absolute; top: -1px; left: 0; width: 18%; height: 3px; background: linear-gradient(90deg, rgba(139, 119, 96, 0), var(--bronze) 70%, rgba(139, 119, 96, 0)); }
.motion .dsx__charge { animation: charge 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes charge { from { transform: translateX(-100%); } to { transform: translateX(560%); } }

/* six equal ruled cells: a 1px gap over a tinted bed draws every divider */
.dsx__cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: clamp(1.8rem, 3.2vw, 2.5rem) clamp(1rem, 2vw, 1.5rem) 0; background: var(--rule-light); border: 1px solid var(--rule-light); }
.dsx__cells li { display: flex; }
.dsx__cell { position: relative; display: grid; align-content: space-between; gap: 1.25rem; width: 100%; min-height: clamp(9rem, 13vw, 11rem); padding: 1.1rem 1.1rem 1.2rem; background: var(--paper); text-align: left; transition: background-color 0.3s var(--ease); }
.dsx__cell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.dsx__num { font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4.2rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.4px var(--ink-soft); transition: -webkit-text-stroke-color 0.3s var(--ease); }
.dsx__name { font-size: 0.98rem; font-weight: 700; line-height: 1.3; }
.dsx__cell.is-on, .dsx__cell:focus-visible { background: #FFFFFF; }
.dsx__cell.is-on::before, .dsx__cell:focus-visible::before { transform: scaleX(1); }
.dsx__cell.is-on .dsx__num, .dsx__cell:focus-visible .dsx__num { -webkit-text-stroke-color: var(--bronze); }
.dsx__cell[aria-pressed="true"] .dsx__name::after { content: " (held)"; font-weight: 400; color: var(--ink-soft); }
.dsx__cell:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
.dsx__strip { display: flex; justify-content: space-between; gap: 1rem; margin: 0 clamp(1rem, 2vw, 1.5rem); padding: 0.85rem 0 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.dsx__strip p:last-child { white-space: nowrap; }
.dsx__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; max-width: var(--measure); margin: 1.4rem auto 0; font-size: 0.78rem; color: var(--ink-soft); }
.dsx__foot .text-link { color: var(--ink); }

@media (max-width: 1099px) { .dsx__cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .dsx__block { grid-template-columns: minmax(0, 1fr); }
  .dsx__display { border-right: 0; border-bottom: 1px solid var(--ink); }
  .dsx__meta { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dsx__meta div { border-bottom: 0; border-right: 1px solid var(--rule-light); padding: 0.7rem 0.6rem; }
  .dsx__meta div:last-child { border-right: 0; }
  .dsx__meta dd { font-size: 0.85rem; }
  .dsx__bg { width: 100%; }
  .dsx__bgs::after { background: linear-gradient(180deg, rgba(250, 249, 245, 0.9) 0%, rgba(250, 249, 245, 0.84) 100%); }
  .dsx__strip p:first-child { display: none; }
}
@media (max-width: 699px) {
  .dsx__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsx__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsx__meta div { border-right: 0; border-bottom: 1px solid var(--rule-light); }
  .dsx__meta div:nth-child(odd) { border-right: 1px solid var(--rule-light); }
  .dsx__meta div:last-child { grid-column: 1 / -1; }
  .dsx__cell { min-height: 8rem; }
}
/* without JavaScript every panel is listed and readable */
html:not(.js) .dsx__panels { display: block; }
html:not(.js) .dsx__panel + .dsx__panel { border-top: 1px solid var(--rule-light); }
html:not(.js) .dsx__bgs { display: none; }
@media (prefers-reduced-motion: reduce) { .dsx__charge { display: none; } }

/* ---------- A-301 wall section ---------- */

.wall { background: var(--black); color: var(--limestone); }
/* the active layer's site photograph fills the whole stage behind the drawing */
.wall__stage { position: relative; isolation: isolate; }
.wall__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.wall__bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.9s var(--ease), transform 6s var(--ease); }
.wall__bg img.is-on { opacity: 1; transform: scale(1); }
.wall__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(36, 38, 34, 0.9) 0%, rgba(36, 38, 34, 0.8) 50%, rgba(36, 38, 34, 0.88) 100%),
  linear-gradient(180deg, rgba(36, 38, 34, 0.5) 0%, rgba(36, 38, 34, 0) 30%, rgba(36, 38, 34, 0) 70%, rgba(36, 38, 34, 0.6) 100%); }
.wall__credit { position: absolute; right: var(--gutter); bottom: 1rem; font-size: 0.72rem; color: var(--on-dark-soft); }
.wall .wall__head p { color: var(--on-dark-mid); }
.wall__list { border-top-color: var(--rule-dark) !important; }
.wall .wall__list li { border-bottom-color: var(--rule-dark); }
.wall .wall__list li > span { color: var(--on-dark-soft); }
.wall .wall__list p { color: var(--on-dark-mid); }
.wall .wall__list li:hover, .wall .wall__list li:focus-visible { background: rgba(236, 232, 223, 0.06); }
.motion .wall .wall__list li:not(.is-active) h3 { color: var(--on-dark-soft); }
.wall .wall__figure figcaption { color: var(--on-dark-soft); }
.wall__stage {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.5rem clamp(2rem, 4vw, 4rem);
  align-items: center;
  max-width: var(--measure); margin: 0 auto;
  padding: clamp(5rem, 9vw, 8rem) var(--gutter);
}
.wall__head { grid-column: 1 / -1; max-width: 46rem; margin: 0 auto; text-align: center; }
.wall__head h2 { margin-top: 1.1rem; font-size: clamp(2rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; }
.wall__head p { max-width: 36rem; margin: 1rem auto 0; line-height: 1.6; color: var(--ink-soft); }
.wall__figure { margin: 0; }
.wall__svg { width: 100%; height: auto; overflow: visible; }
.wall__svg .face { stroke: none; }
/* ground plane, soft shadows, water path and a drafting callout */
.wall__figure { background-image: linear-gradient(rgba(236, 232, 223, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 232, 223, 0.07) 1px, transparent 1px); background-size: 28px 28px; background-position: center; }
.wall__svg .wall__floor { fill: none; stroke: var(--limestone); stroke-opacity: 0.3; stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.wall__svg .shadow path { fill: #000; opacity: 0.45; transition: opacity 0.4s var(--ease); }
.wall__svg .shadow.is-lifted path { opacity: 0.28; }
.wall__svg .water { fill: none; stroke: var(--bronze); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 14; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.4s var(--ease); }
.wall__svg .water--out { stroke-dasharray: 0.1 12; }
.wall__svg .layer.is-active .water { opacity: 1; }
.motion .wall__svg .layer.is-active .water { animation: water-run 1.1s linear infinite; }
@keyframes water-run { to { stroke-dashoffset: -28; } }
.wall__svg .layer { transition: opacity 0.35s var(--ease), filter 0.35s var(--ease); }
.wall__svg.has-active .layer:not(.is-active) { filter: saturate(0.75) brightness(0.97); }
.wall__svg .wall__note { opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; }
.wall__svg .wall__note.is-on { opacity: 1; }
.wall__svg .wall__note-line { fill: none; stroke: var(--limestone); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.motion .wall__svg .wall__note.is-drawing .wall__note-line { stroke-dasharray: 1; animation: draw 0.6s var(--ease) both; }
.wall__svg .wall__note-dot { fill: var(--bronze); stroke: var(--black); stroke-width: 2; }
.wall__svg .wall__note-box { fill: var(--limestone); }
.wall__svg .wall__note-text { fill: var(--black); font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; dominant-baseline: middle; }
/* a light wash over each side face so the depth reads as a turned surface */
.wall__svg .shade { fill: #242622; fill-opacity: 0.14; }
.wall__svg .edge { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke 0.3s var(--ease), stroke-width 0.3s var(--ease); }
.wall__svg .ln-tex { fill: none; stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.wall__svg .ln-flow { fill: none; stroke: var(--slate); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wall__svg .wlabel { font-family: var(--font); font-size: 13px; font-weight: 700; text-anchor: middle; fill: var(--on-dark-soft); }
.wall__svg .layer { transition: opacity 0.35s var(--ease); }
.motion .wall__svg .wlabel { opacity: 0; transition: opacity 0.3s var(--ease); }
.motion .wall__svg .layer.is-active .wlabel { opacity: 1; }
.wall__svg .layer.is-active .edge { stroke: var(--bronze); stroke-width: 2.4; }
.wall__svg.is-iso .layer:not(.is-iso) { opacity: 0.22; }
.wall__figure figcaption { margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-soft); }
.wall__side { display: grid; gap: 1.25rem; align-self: center; }
.wall__photo { margin: 0; }
.wall__photo-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #D6D0C3; }
.wall__photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 0.55s var(--ease), transform 1.4s var(--ease); }
.wall__photo-frame img.is-on { opacity: 1; transform: none; }
.wall__photo figcaption { margin-top: 0.5rem; font-size: 0.74rem; color: var(--ink-soft); }
.wall__list { border-top: 1px solid var(--rule-light); }
.wall__list li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem;
  padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--rule-light);
  cursor: default; transition: background-color 0.3s var(--ease);
}
.wall__list li > span { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); padding-top: 0.2rem; }
.wall__list h3 { font-size: 1.05rem; font-weight: 700; }
.wall__list p { margin-top: 0.3rem; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }
.wall__list li:hover, .wall__list li:focus-visible { background: rgba(246, 244, 239, 0.7); }

@media (min-width: 900px) {
  .motion .wall__track { height: 360vh; height: 360svh; }
  .motion .wall__stage {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    padding-top: calc(var(--tb-h) + 1.5rem); padding-bottom: 1.5rem;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
  }
  .motion .wall__head h2 { font-size: clamp(1.9rem, 1rem + 2vw, 2.9rem); }
  .motion .wall__head p { margin-top: 0.6rem; }
  .motion .wall__figure { align-self: center; }
  .motion .wall__list { align-self: center; }
  .motion .wall__side { gap: 0.9rem; }
  .motion .wall__photo-frame { aspect-ratio: auto; height: clamp(150px, 27vh, 290px); }
  .motion .wall__list li { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .motion .wall__list li { position: relative; }
  .motion .wall__list li::before {
    content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px;
    background: var(--bronze); transform: scaleY(0); transition: transform 0.4s var(--ease);
  }
  .motion .wall__list li.is-active::before { transform: scaleY(1); }
  .motion .wall__list li p { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 0.45s var(--ease), margin 0.45s var(--ease); }
  .motion .wall__list li p > span { overflow: hidden; }
  .motion .wall__list li.is-active p { grid-template-rows: 1fr; margin-top: 0.3rem; }
  .motion .wall__list li:not(.is-active) h3 { color: var(--ink-soft); }
}
@media (max-width: 899px) {
  .wall__stage { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- A-101 frame to finish: one house, three moments ---------- */

.ff { padding: clamp(5rem, 9vw, 8rem) var(--gutter); background: var(--black); color: var(--limestone); }
.ff__stage { max-width: var(--measure); margin: 0 auto; }
.ff__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #33352F; }
.ff__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ff__img[data-ff="0"] { opacity: 1; }
.ff__img[data-ff="1"], .ff__img[data-ff="2"] { opacity: 0; }
html:not(.js) .ff__img[data-ff="2"] { opacity: 1; }
.ff__tag { position: absolute; left: 1rem; top: 1rem; padding: 0.45rem 0.75rem; background: rgba(36, 38, 34, 0.86); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.ff__scrub { margin-top: 1.75rem; }
.js .ff__scrub { display: block; }
.ff__track { position: relative; height: 44px; cursor: pointer; touch-action: none; }
.ff__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--rule-dark); }
.ff__fill { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; width: 100%; background: var(--limestone); transform-origin: left; }
.ff__thumb { position: absolute; top: 50%; left: 100%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--limestone); border: 3px solid var(--black); box-shadow: 0 0 0 1px var(--limestone); transform: rotate(45deg); }
.ff__track:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.ff__stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.5rem; }
.ff__stops li:nth-child(2) { text-align: center; }
.ff__stops li:nth-child(3) { text-align: right; }
.ff__stops button { display: inline-flex; gap: 0.6rem; align-items: baseline; min-height: 2.75rem; font-size: 1.05rem; font-weight: 700; color: var(--on-dark-soft); transition: color 0.25s var(--ease); }
.ff__stops button span { font-size: 0.75rem; letter-spacing: 0.08em; }
.ff__stops button:hover, .ff__stops button[aria-pressed="true"] { color: var(--limestone); }
.ff__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem); margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-dark); }
.ff__note { font-size: 0.97rem; line-height: 1.6; color: var(--on-dark-soft); transition: color 0.35s var(--ease); }
.ff__note b { color: var(--on-dark-mid); }
.ff__note.is-on { color: var(--limestone); }
.ff__note.is-on b { color: var(--limestone); }
.ff__cap { margin-top: 1.25rem; font-size: 0.74rem; color: var(--on-dark-soft); }
@media (max-width: 699px) {
  .ff__notes { grid-template-columns: minmax(0, 1fr); }
  .js .ff__note { display: none; }
  .js .ff__note.is-on { display: block; }
  .ff__stops button { font-size: 0.9rem; }
}

/* ---------- G-001 contracts ---------- */

.risk { padding: clamp(5rem, 9vw, 8rem) var(--gutter); background: var(--paper); }
.risk__panel, .risk > .callout, .risk > .inline-cta { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.seg { display: flex; justify-content: center; margin-bottom: 2rem; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label {
  min-height: 3rem; padding: 0.75rem 1.25rem;
  display: inline-flex; align-items: center;
  border: 1px solid var(--ink); margin-left: -1px;
  font-size: 0.92rem; font-weight: 700; cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.seg label:hover { background: rgba(36, 38, 34, 0.06); }
.seg input:checked + label { background: var(--ink); color: var(--limestone); }
.seg input:focus-visible + label { outline: 2px solid var(--bronze); outline-offset: 3px; }
.masses { display: flex; gap: 12px; height: clamp(170px, 22vw, 240px); }
.mass {
  position: relative; min-width: 8.5rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem;
  padding: 1rem 1.1rem;
  color: var(--limestone);
  transition: flex-grow 0.6s var(--ease);
}
.mass--owner { background: var(--black); clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); }
.mass--builder { background: var(--slate); clip-path: polygon(0 26%, 100% 38%, 100% 100%, 0 100%); }
.mass b { font-size: 1.1rem; }
.mass__note { display: none; font-size: 0.85rem; line-height: 1.4; }
.mass__ceiling { display: none; position: absolute; left: 0; right: 0; top: 42%; border-top: 1.5px dashed var(--limestone); }
.mass__ceiling::after { content: "Ceiling"; position: absolute; right: 0.6rem; top: 0.35rem; font-size: 0.7rem; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.risk__panel:has(#c-fixed:checked) .mass--owner { flex-grow: 1; }
.risk__panel:has(#c-fixed:checked) .mass--builder { flex-grow: 2.6; }
.risk__panel:has(#c-cost:checked) .mass--owner { flex-grow: 2.6; }
.risk__panel:has(#c-cost:checked) .mass--builder { flex-grow: 1; }
.risk__panel:has(#c-gmp:checked) .mass--owner { flex-grow: 1.7; }
.risk__panel:has(#c-gmp:checked) .mass--builder { flex-grow: 1.2; }
.risk__panel:has(#c-gmp:checked) .mass__ceiling { display: block; }
.risk__panel:has(#c-fixed:checked) .mass__note[data-for="fixed"],
.risk__panel:has(#c-cost:checked) .mass__note[data-for="cost"],
.risk__panel:has(#c-gmp:checked) .mass__note[data-for="gmp"] { display: block; }
.masses__caption { margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-soft); }
.compare { width: 100%; margin-top: 2.5rem; border-collapse: collapse; font-size: 0.95rem; line-height: 1.55; }
.compare th, .compare td { padding: 1.05rem 1.15rem; text-align: left; vertical-align: top; transition: background-color 0.35s var(--ease); }
.compare thead th { font-size: 1rem; font-weight: 700; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.compare thead th:first-child { width: 21%; }
.compare tbody tr { border-bottom: 1px solid var(--rule-light); }
.compare tbody th { font-weight: 700; }
.compare td { color: var(--ink-soft); }
.risk__panel:has(#c-fixed:checked) .compare [data-col="fixed"],
.risk__panel:has(#c-cost:checked) .compare [data-col="cost"],
.risk__panel:has(#c-gmp:checked) .compare [data-col="gmp"] { background: var(--limestone); color: var(--ink); }
.callout {
  display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.4rem, 3vw, 2.1rem);
  background: var(--limestone); border-left: 3px solid var(--bronze);
}
.callout h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.callout p { line-height: 1.7; color: var(--ink-soft); }
.inline-cta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--rule-light);
}
.inline-cta p { font-size: 1.1rem; }
@media (max-width: 759px) {
  .seg { flex-direction: column; align-items: stretch; }
  .seg label { margin-left: 0; margin-top: -1px; justify-content: center; }
  .mass { min-width: 6.5rem; padding: 0.8rem; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tbody tr { padding: 1.1rem 0; }
  .compare tbody th { padding: 0 0 0.5rem; }
  .compare td { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); gap: 0.75rem; padding: 0.55rem 0.5rem; }
  .compare td::before { content: attr(data-label); font-size: 0.78rem; font-weight: 700; color: var(--ink); }
  .callout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- G-002 question index ---------- */

.qi { padding: clamp(5rem, 9vw, 8rem) var(--gutter); background: var(--limestone); }
.qi__tools, .qi__list { max-width: 56rem; margin: 0 auto; }
.qi__tools { display: none; }
.js .qi__tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: end; margin-bottom: 1.75rem; }
.qi__search { position: relative; display: block; grid-column: 1 / -1; }
.qi__search svg { position: absolute; left: 0; top: 50%; width: 1.25rem; height: 1.25rem; margin-top: -0.625rem; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.qi__search input {
  width: 100%; min-height: 3.25rem; padding: 0 0 0 2rem;
  font: inherit; font-size: 1.15rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.qi__search input::placeholder { color: var(--ink-soft); }
.qi__search input:focus { outline: none; border-bottom-color: var(--bronze); }
.qi__topics { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.qi__topics button {
  min-height: 2.5rem; padding: 0 0.9rem;
  border: 1px solid rgba(36, 38, 34, 0.4);
  font-size: 0.82rem; font-weight: 700;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.qi__topics button:hover { border-color: var(--ink); }
.qi__topics button[aria-pressed="true"] { background: var(--ink); color: var(--limestone); border-color: var(--ink); }
.qi__count { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.qi__list { border-top: 1px solid var(--rule-light); }
.qi__item { border-bottom: 1px solid var(--rule-light); }
.qi__item summary {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline;
  padding: 1.2rem 0; cursor: pointer; list-style: none;
}
.qi__item summary::-webkit-details-marker { display: none; }
.qi__tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.qi__q { font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem); line-height: 1.4; }
.qi__item summary i { position: relative; width: 14px; height: 14px; align-self: center; }
.qi__item summary i::before, .qi__item summary i::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1px; background: var(--ink); transition: transform 0.3s var(--ease); }
.qi__item summary i::after { transform: rotate(90deg); }
.qi__item[open] summary i::after { transform: none; }
.qi__a p { max-width: 42rem; margin-left: 7.5rem; padding-bottom: 1.4rem; line-height: 1.7; color: var(--ink-soft); }
.qi__item mark { background: none; color: inherit; box-shadow: inset 0 -0.35em 0 rgba(139, 119, 96, 0.35); }
.qi__empty { padding: 1.5rem 0; color: var(--ink-soft); }
@media (max-width: 699px) {
  .qi__item summary { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.3rem; }
  .qi__tag { grid-column: 1 / -1; }
  .qi__a p { margin-left: 0; }
  .js .qi__tools { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- A-900 start ---------- */

.start { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5.5rem, 10vw, 8.5rem) var(--gutter); background: var(--black); color: var(--limestone); text-align: center; }
.start__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 60%; }
.start::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(36, 38, 34, 0.74) 0%, rgba(36, 38, 34, 0.82) 45%, rgba(36, 38, 34, 0.92) 100%); }
.start__logo { width: clamp(190px, 22vw, 270px); height: auto; margin: 0 auto clamp(2.25rem, 5vw, 3.25rem); }
.start h2 { max-width: 18ch; margin: 0 auto; font-size: clamp(2.1rem, 1.2rem + 3vw, 3.9rem); line-height: 1.06; letter-spacing: -0.025em; }
.start__lede { max-width: 34rem; margin: 1.25rem auto 0; line-height: 1.65; color: var(--on-dark-mid); }
.brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 50rem; margin: 2.5rem auto 0; text-align: left; }
.brief legend { padding-bottom: 0.75rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-soft); }
.brief fieldset { display: flex; }
.brief input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.brief label {
  flex: 1; display: grid; place-items: center; min-height: 3rem; padding: 0.5rem;
  border: 1px solid rgba(236, 232, 223, 0.35); margin-left: -1px;
  font-size: 0.9rem; font-weight: 700; color: var(--on-dark-mid); cursor: pointer; text-align: center;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.brief label:hover { color: var(--limestone); background: rgba(236, 232, 223, 0.06); }
.brief input:checked + label { background: var(--limestone); color: var(--black); border-color: var(--limestone); }
.brief input:focus-visible + label { outline: 2px solid var(--bronze); outline-offset: 3px; }
.start__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; }
@media (max-width: 699px) { .brief { grid-template-columns: minmax(0, 1fr); } }

/* ---------- title-block footer ---------- */

.ftb { background: var(--black); color: var(--on-dark-mid); padding: 0 var(--gutter) calc(1.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule-dark); }
.ftb__grid {
  max-width: var(--measure); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--rule-dark);
}
.ftb__cell { padding: 1.75rem 1.5rem 2rem; border-right: 1px solid var(--rule-dark); }
.ftb__label { display: block; margin-bottom: 1rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-soft); }
.ftb__cell--brand img { width: 320px; max-width: 100%; height: auto; }
.ftb__cell--brand p { margin-top: 1.1rem; max-width: 24rem; font-size: 0.92rem; line-height: 1.6; }
.ftb ul { display: grid; gap: 0.1rem; }
.ftb li a { display: inline-flex; gap: 0.75rem; padding: 0.32rem 0; font-size: 0.92rem; text-decoration: none; }
.ftb li a:hover { color: var(--limestone); text-decoration: underline; text-underline-offset: 4px; }
.ftb__sheets b { min-width: 3.25rem; font-size: 0.78rem; color: var(--on-dark-soft); font-variant-numeric: tabular-nums; }
.cap__head p a { color: var(--limestone); text-decoration-color: var(--bronze); text-underline-offset: 3px; }
.ftb__cell--areas { grid-column: 1 / -1; border-top: 1px solid var(--rule-dark); }
.ftb__cell--areas .ftb__label a { color: inherit; text-decoration: none; }
.ftb__cell--areas .ftb__label a:hover { color: var(--limestone); text-decoration: underline; text-underline-offset: 3px; }
.ftb__cell--areas ul { display: flex; flex-wrap: wrap; gap: 0.1rem 1.6rem; }
.ftb__base { max-width: var(--measure); margin: 0 auto; display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-dark); font-size: 0.78rem; color: var(--on-dark-soft); }
@media (max-width: 899px) {
  .ftb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftb__cell--brand { grid-column: 1 / -1; border-bottom: 1px solid var(--rule-dark); }
}
@media (max-width: 699px) { .ftb { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); } }

/* ---------- inner pages: services ---------- */

.phero { position: relative; isolation: isolate; overflow: hidden; min-height: min(78vh, 44rem); display: grid; align-items: end; padding: calc(var(--tb-h) + 4rem) var(--gutter) clamp(3rem, 6vw, 5rem); background: var(--black); color: var(--limestone); }
.phero__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.phero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(36, 38, 34, 0.9) 0%, rgba(36, 38, 34, 0.74) 42%, rgba(36, 38, 34, 0.3) 78%), linear-gradient(0deg, rgba(36, 38, 34, 0.6) 0%, rgba(36, 38, 34, 0) 40%); }
.phero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--measure); margin: 0 auto; }
.phero .eyebrow { color: var(--on-dark-mid); margin-top: 1.25rem; }
.phero h1 { max-width: var(--h1w, 18ch); text-wrap: balance; margin-top: 1rem; font-weight: 700; font-size: clamp(2.4rem, 1.1rem + 3.8vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; }
.phero h1.is-long { font-size: clamp(2.3rem, 1rem + 3.2vw, 4.25rem); line-height: 1.04; }
.phero__lede { max-width: 40rem; margin-top: 1.4rem; font-size: clamp(1.02rem, 0.9rem + 0.4vw, 1.2rem); line-height: 1.6; }
.phero__lede a { color: var(--limestone); }
.phero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.phero__credit { position: absolute; z-index: 2; right: var(--gutter); bottom: 1rem; font-size: 0.72rem; color: var(--on-dark-mid); }
@media (max-width: 699px) { .phero::before { background: linear-gradient(180deg, rgba(36, 38, 34, 0.6) 0%, rgba(36, 38, 34, 0.88) 55%); } .phero__credit { position: relative; right: auto; bottom: auto; margin-top: 1.5rem; } }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8rem; color: var(--on-dark-mid); }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--limestone); }

.pbody { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 18rem); justify-content: space-between; gap: clamp(2rem, 5vw, 5rem); max-width: var(--measure); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); }
.prose { min-width: 0; }
.prose__sec + .prose__sec, .prose > * + * { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.prose h2 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.prose h3 { margin-top: 1.75rem; font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.prose p { margin-top: 1rem; font-size: 1.06rem; line-height: 1.75; color: #3E403A; }
.prose p a, .prose li a { color: var(--ink); text-decoration-color: var(--bronze); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose__list { margin-top: 1.1rem; display: grid; gap: 0.6rem; }
.prose__list li { position: relative; padding-left: 1.5rem; font-size: 1.02rem; line-height: 1.6; color: #3E403A; }
.prose__list li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 0.8rem; height: 1px; background: var(--bronze); }
.steps { padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--black); color: var(--limestone); }
.steps h2 { color: var(--limestone); }
.steps__list { margin-top: 1.5rem; border-top: 1px solid var(--rule-dark); counter-reset: s; }
.steps__list li { display: grid; grid-template-columns: 3rem minmax(0, 12rem) minmax(0, 1fr); gap: 0.5rem 1.25rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--rule-dark); }
.steps__no { font-size: 0.8rem; font-weight: 700; color: var(--on-dark-soft); }
.steps .steps__list h3 { margin: 0; font-size: 1.02rem; }
.steps .steps__list p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--on-dark-mid); }
.steps__note { margin-top: 1rem !important; font-size: 0.78rem !important; color: var(--on-dark-soft) !important; }
@media (max-width: 699px) { .steps__list li { grid-template-columns: 2.25rem minmax(0, 1fr); } .steps__list li p { grid-column: 2; } }
.ptable { overflow-x: auto; }
.ptable caption { caption-side: top; text-align: left; padding-bottom: 0.75rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.ptable .compare { margin-top: 0; }
.prose .callout { grid-template-columns: minmax(0, 1fr); }
.prose .callout p { margin-top: 0; }
.pfaq .qi__list { margin-top: 1.25rem; }
.pfaq .qi__item summary { grid-template-columns: minmax(0, 1fr) auto; }
.pfaq .qi__a p { margin-left: 0; }
.pside__sticky { position: sticky; top: calc(var(--tb-h) + 1.5rem); }
.pside__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule-light); }
.pside__toc li { border-bottom: 1px solid var(--rule-light); }
.pside__toc a { display: block; padding: 0.65rem 0 0.65rem 0.75rem; font-size: 0.9rem; line-height: 1.35; text-decoration: none; color: var(--ink-soft); border-left: 2px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.pside__toc a:hover, .pside__toc a.is-on { color: var(--ink); border-left-color: var(--bronze); }
.pside__cta { margin-top: 1.75rem; padding: 1.4rem; background: var(--limestone); }
.pside__cta-title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.pside__cta p:not(.pside__cta-title) { margin-top: 0.6rem; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }
.pside__cta .btn { margin-top: 1.1rem; width: 100%; }
@media (max-width: 999px) { .pbody { grid-template-columns: minmax(0, 1fr); } .pside { order: -1; } .pside__sticky { position: static; } .pside__toc { display: none; } .pside__label { display: none; } .pside__cta { margin-top: 0; } }
.prel { padding: clamp(4rem, 7vw, 6rem) var(--gutter); background: var(--limestone); }
.pcta { padding: clamp(5rem, 9vw, 7rem) var(--gutter); background: var(--black); color: var(--limestone); text-align: center; }
.pcta__mark { width: 56px; height: auto; margin: 0 auto 1.75rem; }
.pcta h2 { max-width: 20ch; margin: 0 auto; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.06; letter-spacing: -0.025em; }
.pcta p { max-width: 34rem; margin: 1.2rem auto 0; line-height: 1.65; color: var(--on-dark-mid); }
.pcta p a { color: var(--limestone); }
.pcta .phero__actions { justify-content: center; }
.hub { max-width: var(--measure); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); }
.hub__group + .hub__group { margin-top: clamp(3rem, 6vw, 4.5rem); }
.hub__group h2 { margin-bottom: 1.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--rule-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.hub .guides__grid { max-width: none; }

/* ---------- reveal ---------- */

.motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
/* ------------------------------------------------ inner pages: plain hero, notes, contact form, sitemap */
.phero--plain { min-height: 0; padding-top: calc(var(--tb-h) + clamp(4rem, 9vw, 7rem)); background-image: linear-gradient(rgba(236, 232, 223, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 232, 223, 0.05) 1px, transparent 1px); background-size: 48px 48px; }
.phero--plain::before { display: none; }
.phero--plain h1 { max-width: 22ch; }
.pnote { padding: 0.9rem 1.1rem; border-left: 3px solid var(--bronze); background: var(--sheet); font-size: 0.95rem !important; color: var(--ink-soft) !important; }
.pnote a { color: var(--ink); }
.pbody--legal .prose h2 { font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); }

.pbody--contact { align-items: start; }
.cform { min-width: 0; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.cform__set { margin: 0; padding: 0 0 clamp(2rem, 4vw, 3rem); border: 0; border-bottom: 1px solid var(--rule-light); min-width: 0; }
.cform__set legend { display: flex; align-items: baseline; gap: 0.8rem; padding: 0; font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.85rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.cform__no { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--bronze); }
.cform__hint { margin-top: 0.6rem; color: var(--ink-soft); line-height: 1.6; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; margin-top: 1.2rem; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input, .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: flex; align-items: center; gap: 0.8rem; min-height: 3.6rem; padding: 0.8rem 1rem; border: 1px solid var(--rule-light); background: var(--sheet); line-height: 1.35; transition: border-color 0.2s, background-color 0.2s; }
.choice span::before { content: ""; flex: none; width: 1rem; height: 1rem; border: 1px solid var(--slate); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--sheet); transition: background-color 0.2s; }
.choice:hover span { border-color: var(--slate); }
.choice input:checked + span { border-color: var(--ink); background: #FFFFFF; }
.choice input:checked + span::before { background: var(--ink); border-color: var(--ink); }
.choice input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.chip span { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1rem; border: 1px solid var(--rule-light); background: var(--sheet); font-size: 0.92rem; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.chip:hover span { border-color: var(--slate); }
.chip input:checked + span { background: var(--black); border-color: var(--black); color: var(--limestone); }
.field { display: grid; gap: 0.45rem; margin-top: 1.2rem; min-width: 0; }
.field__label { font-size: 0.9rem; font-weight: 700; }
.field__opt { font-size: 0.78rem; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.field input, .field select, .field textarea { width: 100%; min-height: 3.1rem; padding: 0.7rem 0.9rem; border: 1px solid rgba(36, 38, 34, 0.32); border-radius: 0; background: #FFFFFF; font: inherit; font-size: 1rem; color: var(--ink); }
.field textarea { min-height: 9rem; line-height: 1.6; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--bronze); outline-offset: 0; border-color: var(--ink); }
.field input[aria-invalid="true"] { border-color: #8A3B2E; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1rem; }
.cform__send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.cform__privacy { font-size: 0.88rem; color: var(--ink-soft); }
.cform__privacy a { color: var(--ink); }
.cform__status:empty { display: none; }
.cform__status { padding: 1rem 1.2rem; border-left: 3px solid var(--bronze); background: var(--sheet); line-height: 1.6; }
.cform__status.is-error { border-left-color: #8A3B2E; }
.pside__list, .pside__links { display: grid; gap: 0.55rem; margin-top: 0.9rem; padding-left: 1.1rem; line-height: 1.45; font-size: 0.95rem; }
.pside__links { padding-left: 0; list-style: none; margin-top: 0.6rem; }
.pside__links a { color: var(--ink); text-decoration-color: var(--bronze); text-underline-offset: 3px; }
.pside__cta + .pside__label { margin-top: 2rem; display: block; }
@media (max-width: 999px) { .pbody--contact .pside { order: 0; } .pbody--contact .pside__label { display: block; } }

.wnote { max-width: 46rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.wnote h2 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.wnote p { margin-top: 1rem; font-size: 1.06rem; line-height: 1.75; color: #3E403A; }
.wnote a { color: var(--ink); text-decoration-color: var(--bronze); text-underline-offset: 3px; }
.smap { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.5rem 3rem; }
.smap h2 { padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule-light); font-size: 1.1rem; }
.smap ul { display: grid; gap: 0.6rem; margin-top: 1rem; padding: 0; list-style: none; }
.smap a { color: var(--ink); text-decoration-color: var(--bronze); text-underline-offset: 3px; }

/* ------------------------------------------------ A-102 before and after */
.ba { position: relative; padding: clamp(5rem, 9vw, 7.5rem) var(--gutter) clamp(3.5rem, 6vw, 5rem); background: var(--black); color: var(--limestone); }
.ba__inner { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 1.5rem clamp(2rem, 4vw, 4rem); max-width: var(--measure); margin: 0 auto; }
.ba__head h2 { margin-top: 1.2rem; font-size: clamp(2rem, 1.1rem + 2.6vw, 3.2rem); line-height: 1.06; letter-spacing: -0.02em; }
.ba__head p { margin-top: 1.1rem; font-size: 1.02rem; line-height: 1.65; color: var(--on-dark-mid); }
.ba__tabs { grid-column: 1; grid-row: 2; align-self: start; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-dark); }
.ba__tab { display: flex; align-items: baseline; gap: 0.9rem; width: 100%; padding: 0.95rem 0.25rem; border: 0; border-bottom: 1px solid var(--rule-dark); background: none; color: var(--on-dark-soft); font: inherit; font-size: 1.05rem; font-weight: 700; text-align: left; cursor: pointer; transition: color 0.25s, padding-left 0.35s var(--ease); }
.ba__tab span { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bronze); }
.ba__tab:hover { color: var(--limestone); }
.ba__tab[aria-selected="true"] { color: var(--limestone); padding-left: 0.9rem; box-shadow: inset 2px 0 0 var(--bronze); }
.ba__tab:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
.ba__stage { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
.ba__frame { --pos: 50%; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #1A1B18; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.ba__set { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s 0.5s; }
.ba__set.is-on { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease); }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--limestone); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); pointer-events: none; }
.ba__knob { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; border-radius: 50%; background: var(--limestone); color: var(--black); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform 0.25s var(--ease); }
.ba__knob svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ba__frame.is-drag .ba__knob { transform: scale(1.12); }
.ba__tag { position: absolute; z-index: 2; top: 1rem; padding: 0.45rem 0.8rem; background: rgba(36, 38, 34, 0.78); color: var(--limestone); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; transition: opacity 0.3s; }
.ba__tag--before { left: 1rem; }
.ba__tag--after { right: 1rem; }
.ba__range { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba__range:focus-visible + .ba__knob, .ba__frame:has(.ba__range:focus-visible) .ba__knob { outline: 2px solid var(--bronze); outline-offset: 3px; }
.ba__notes { position: relative; margin-top: 1.2rem; min-height: 5.5rem; }
.ba__note { display: none; }
.ba__note.is-on { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; }
.motion .ba__note.is-on { animation: rise-sm 0.45s var(--ease) both; }
.ba__note p { flex: 1 1 26rem; font-size: 1.02rem; line-height: 1.6; color: var(--on-dark-mid); }
.ba__note .text-link { color: var(--limestone); }
.ba__credit { margin-top: 1rem; font-size: 0.75rem; color: var(--on-dark-soft); }
@media (max-width: 899px) {
  .ba__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ba__tabs, .ba__stage { grid-column: 1; grid-row: auto; }
  .ba__tabs { display: flex; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--rule-dark); scrollbar-width: none; }
  .ba__tab { flex: none; width: auto; padding: 0.8rem 1rem; border-bottom: 2px solid transparent; }
  .ba__tab[aria-selected="true"] { padding-left: 1rem; box-shadow: none; border-bottom-color: var(--bronze); }
  .ba__frame { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------ A-201 on a photo of a house being framed */
.dirs.on-dark { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--limestone); }
.dirs__bg { position: absolute; left: 0; right: 0; top: 0; height: min(100%, max(56.25vw, 44rem)); z-index: -2; }
.dirs__bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 62%; }
.dirs.on-dark::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(100%, max(56.25vw, 44rem)); z-index: -1; background: linear-gradient(180deg, rgba(36, 38, 34, 0.55) 0%, rgba(36, 38, 34, 0.25) 26%, rgba(36, 38, 34, 0.2) 52%, rgba(36, 38, 34, 0.75) 82%, var(--black) 100%); }
.dirs.on-dark .section-head { position: relative; isolation: isolate; }
.dirs.on-dark .section-head::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 140%; height: 190%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(24, 25, 22, 0.78), rgba(24, 25, 22, 0.55) 55%, rgba(24, 25, 22, 0)); pointer-events: none; }
.dirs.on-dark .section-head h2 { color: var(--limestone); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.dirs.on-dark .section-head p { color: #ECE8DF; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.dirs.on-dark .eyebrow { color: var(--on-dark-mid); }
.dirs.on-dark .dirs__tray { color: var(--ink); }
.dirs__credit { max-width: var(--measure); margin: 1rem auto 0; font-size: 0.75rem; color: var(--on-dark-soft); }

/* ------------------------------------------------ G-002 on a photo of a remodel in progress */
.qi { position: relative; isolation: isolate; overflow: hidden; }
.qi__bg { position: absolute; left: 0; right: 0; top: 0; height: min(46rem, 70%); z-index: -2; }
.qi__bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%; }
.qi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(46rem, 70%); z-index: -1; background: linear-gradient(180deg, rgba(236, 232, 223, 0.42) 0%, rgba(236, 232, 223, 0.6) 30%, rgba(236, 232, 223, 0.94) 72%, var(--limestone) 100%); }
.qi .section-head h2 { text-shadow: 0 1px 18px rgba(236, 232, 223, 0.8); }
.qi .qi__tools, .qi .qi__list { position: relative; }
.qi .qi__tools { padding: 1.25rem 1.25rem 0; margin-left: auto; margin-right: auto; background: rgba(236, 232, 223, 0.9); backdrop-filter: blur(6px); }

/* the guides follow a full section, so they need less lead-in */
.gx { padding-top: clamp(4rem, 7vw, 6rem); }
.qi__credit { max-width: 56rem; margin: 1.5rem auto 0; font-size: 0.75rem; color: var(--ink-soft); }

/* ------------------------------------------------ A-501 full screen: the photo becomes the section */
.dsx.on-dark { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); background: var(--black); background-image: none; color: var(--limestone); }
.dsx.on-dark .dsx__bgs { position: absolute; inset: 0; z-index: -2; }
.dsx.on-dark .dsx__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; opacity: 0; transform: scale(1.04); transition: opacity 0.45s ease-out, transform 6s var(--ease); }
.dsx.on-dark .dsx__bg.is-on { opacity: 1; transform: scale(1); transition: opacity 0.6s ease-out 0.05s, transform 6s var(--ease); }
.dsx.on-dark .dsx__bgs::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(24, 25, 22, 0.84) 0%, rgba(24, 25, 22, 0.6) 32%, rgba(24, 25, 22, 0.06) 62%, rgba(24, 25, 22, 0.12) 100%),
    linear-gradient(0deg, rgba(24, 25, 22, 0.8) 0%, rgba(24, 25, 22, 0.25) 30%, rgba(24, 25, 22, 0) 50%); }
.dsx.on-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(236, 232, 223, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 232, 223, 0.05) 1px, transparent 1px); background-size: 120px 120px; }
.dsx.on-dark .dsx__sheet { width: 100%; background: transparent; border-color: rgba(236, 232, 223, 0.38); }
.dsx.on-dark .dsx__tick { border-color: var(--limestone); }
.dsx.on-dark .dsx__block { border-bottom-color: rgba(236, 232, 223, 0.38); }
.dsx.on-dark .dsx__display { min-height: clamp(26rem, 50vh, 38rem); border-right-color: rgba(236, 232, 223, 0.38); }
.dsx.on-dark .dsx__label { color: var(--on-dark-soft); }
.dsx.on-dark .dsx__panel h2, .dsx.on-dark .dsx__panel h3 { color: var(--limestone); text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35); }
.dsx.on-dark .dsx__lede, .dsx.on-dark .dsx__facts dd { color: #DCD8CF; }
.dsx.on-dark .dsx__facts dt { color: var(--on-dark-mid); }
.dsx.on-dark .dsx__ask { background: rgba(24, 25, 22, 0.62); color: var(--limestone); backdrop-filter: blur(6px); }
.dsx.on-dark .dsx__ask span { color: var(--on-dark-soft); }
.dsx.on-dark .dsx__meta { background: rgba(24, 25, 22, 0.5); backdrop-filter: blur(8px); }
.dsx.on-dark .dsx__meta div { border-color: rgba(236, 232, 223, 0.16); }
.dsx.on-dark .dsx__meta dt { color: var(--on-dark-soft); }
.dsx.on-dark .dsx__meta dd { color: var(--limestone); }
.dsx.on-dark .dsx__conductor { background: rgba(236, 232, 223, 0.18); }
.dsx.on-dark .dsx__cells { background: rgba(236, 232, 223, 0.16); border-color: rgba(236, 232, 223, 0.16); }
.dsx.on-dark .dsx__cell { background: rgba(24, 25, 22, 0.55); color: var(--limestone); backdrop-filter: blur(8px); }
.dsx.on-dark .dsx__cell:hover { background: rgba(24, 25, 22, 0.72); }
.dsx.on-dark .dsx__num { -webkit-text-stroke-color: rgba(236, 232, 223, 0.6); }
.dsx.on-dark .dsx__cell.is-on, .dsx.on-dark .dsx__cell:focus-visible { background: rgba(236, 232, 223, 0.94); color: var(--ink); }
.dsx.on-dark .dsx__cell.is-on .dsx__num, .dsx.on-dark .dsx__cell:focus-visible .dsx__num { -webkit-text-stroke-color: var(--bronze); }
.dsx.on-dark .dsx__cell[aria-pressed="true"] .dsx__name::after { color: var(--ink-soft); }
.dsx.on-dark .dsx__strip { color: var(--on-dark-soft); }
.dsx.on-dark .dsx__foot { width: 100%; color: var(--on-dark-soft); }
.dsx.on-dark .dsx__foot .text-link { color: var(--limestone); }
html:not(.js) .dsx.on-dark .dsx__bgs { display: block; }
@media (max-width: 899px) {
  .dsx.on-dark .dsx__bg { width: 100%; }
  .dsx.on-dark .dsx__bgs::after { background: linear-gradient(180deg, rgba(24, 25, 22, 0.82) 0%, rgba(24, 25, 22, 0.7) 50%, rgba(24, 25, 22, 0.9) 100%); }
  .dsx.on-dark .dsx__display { border-right: 0; border-bottom-color: rgba(236, 232, 223, 0.38); }
}

.motion [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}