/* Genuine MBS Construction — site styles
   Mobile-first. No external fonts, no CDN. */

/* Self-hosted, subset to Latin: Archivo condensed (headings, 20 KB) and
   IBM Plex Mono (drawing labels, 7 KB). Both OFL; licences in fonts/. */
@font-face { font-family: "Archivo Cond"; src: url("../fonts/archivo-cond.woff2") format("woff2");
  font-weight: 600 800; font-stretch: 75% 90%; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-display: swap; }

:root {
  /* iOS Safari's address bar changes the viewport, so 100vh jumps mid-scroll.
     --vh resolves to dvh where supported and falls back to vh elsewhere. */
  --vh: 100vh;

  /* Interior palette. Read as a room, not a brochure: limewash plaster walls,
     white oak, blackened steel, a clay accent. The 3D materials in
     js/cutaway.js are keyed to these — change one, change both. */
  --ink:      #23201c;   /* near-black, warm */
  --ink-soft: #645e53;   /* muted stone — legibility on a phone, outdoors */
  --line:      #ded5c6;
  --line-firm: #c2b6a3;  /* card and footer edges — 1.59:1 on --panel */
  --line-strong: #5c5447; /* controls — must clear 3:1 on the stage wash */
  --paper:    #f6f2ea;   /* bone */
  --panel:    #ece5d8;   /* plaster */
  --plaster1: #d5c8b2;   /* stage wash, top — deeper so the room reads against it */
  --plaster2: #bfae93;   /* stage wash, bottom */
  --accent:   #a1583c;   /* clay */
  --accent-d: #834630;
  --max:      68rem;
  --pad:      clamp(1rem, 4vw, 2.5rem);
}

@supports (height: 100dvh) { :root { --vh: 100dvh; } }

/* Light only, on purpose. Safari's Adaptive Dark Mode (27.3) darkens pages
   that don't declare a scheme but leaves <canvas> untouched, which would put
   a daylight room inside a darkened page. The room has its own night instead:
   scene.js lights it from the visitor's clock. */
:root { color-scheme: light; }

* { box-sizing: border-box; }

/* Keyboard users land here first; invisible until focused. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .75rem 1rem;
  text-decoration: none; border-radius: 0 0 4px 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.crumbs { color: var(--ink-soft); font-size: .9rem; margin-bottom: .5rem; }

/* Kill the grey flash on tap and the double-tap zoom delay. */
a, button { -webkit-tap-highlight-color: rgba(161,88,60,.18); touch-action: manipulation; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  overscroll-behavior-y: none;   /* no rubber-band flash behind the page */
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
a  { color: var(--accent-d); }

.wrap {
  max-width: var(--max); margin: 0 auto;
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
}

/* ---------- header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246,242,234,.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4rem; flex-wrap: wrap;
}
.brand { font-weight: 700; letter-spacing: -.02em; text-decoration: none; color: var(--ink); font-size: 1.05rem; }
.brand span { color: var(--accent-d); }
.site-head nav { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-head nav a {
  text-decoration: none; color: var(--ink-soft); font-size: .95rem;
  min-height: 44px; display: inline-flex; align-items: center;
}
.site-head nav a:hover { color: var(--ink); }

.call-btn {
  background: var(--accent); color: #fff !important;
  padding: .55rem 1rem; border-radius: 4px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* ---------- the deck: horizontal build sequence ---------- */

/* The homepage is exactly one screen. Nothing scrolls vertically, so a
   left/right swipe has one unambiguous meaning: advance the build. */
body:has(.deck-page) { overflow: hidden; }   /* no vertical scroll on the homepage */
.deck-page { height: calc(var(--vh) - 3.5rem); overflow: hidden; }
@media (min-width: 48.0625rem) { .deck-page { height: calc(var(--vh) - 4rem); } }

.deck {
  position: relative; height: 100%; overflow: hidden;
  /* The wall behind the wall: a limewash wash, warmer low and lighter high,
     the way a room reads with daylight coming in above. */
  background:
    radial-gradient(120% 82% at 64% 16%, rgba(255,251,243,.72) 0%, rgba(255,251,243,0) 62%),
    linear-gradient(178deg, var(--plaster1) 0%, var(--plaster2) 100%);
}

/* The model owns the top zone only. Copy never renders over it, so contrast
   is guaranteed at every stage instead of depending on a gradient guessing
   what is behind it. */
:root { --stage: 52%; }
/* Full bleed (2026-11-14): the canvas fills the deck. js/cutaway.js fits the
   room to a frame in the clear area above the copy and the view continues
   past it, so the model fills the screen without the copy ever covering it. */
.deck-visual { position: absolute; inset: 0; z-index: 0; }
#cutaway { width: 100%; height: 100%; display: block; }
/* The finished room as a photograph; js/cutaway.js places and fades it. */
.room-photo { position: absolute; opacity: 0; pointer-events: none; max-width: none; }
.no-webgl .room-photo { display: none; }

.hero-fallback { display: none; }
.no-webgl .hero-fallback { display: grid; position: absolute; inset: 0; }

/* The scroller itself. Native overflow gives momentum and snapping on iOS. */
.deck-track {
  position: relative; z-index: 1;
  height: 100%;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Stops a swipe at the first slide triggering Safari's back gesture. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.deck-track::-webkit-scrollbar { display: none; }
.deck-track:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

.step {
  flex: 0 0 100%;
  scroll-snap-align: center; scroll-snap-stop: always;
  display: grid; grid-template-rows: var(--stage) 1fr;
  min-width: 0;
}

.step-copy {
  grid-row: 2;
  position: relative;
  background: var(--paper);
  padding: 1.75rem max(var(--pad), env(safe-area-inset-left))
           calc(4rem + env(safe-area-inset-bottom))
           max(var(--pad), env(safe-area-inset-right));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.step-copy > * { max-width: 34rem; }

/* Short fade where the opaque copy panel meets the model, so the edge is not
   a hard line across the screen. */
.step-copy::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2.5rem; height: 2.5rem;
  background: linear-gradient(to top, var(--paper), rgba(246,242,234,0));
  pointer-events: none;
}

.eyebrow {
  text-transform: uppercase; letter-spacing: .1em; font-size: .78rem;
  /* accent-d, not accent: accent text on --panel is 4.22:1 and fails AA. */
  color: var(--accent-d); margin-bottom: .5rem; font-weight: 600;
}
.step h2 { font-size: clamp(1.6rem, 5.5vw, 2.4rem); margin-bottom: .35rem; }
.step p  { color: var(--ink-soft); font-size: 1.02rem; margin: 0; }

.step-end .end-links {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
  align-items: center; margin-top: 1.25rem;
}
.step-end .end-links a { min-height: 44px; display: inline-flex; align-items: center; }
.end-trust { font-size: .84rem; color: var(--ink-soft); margin-top: 1rem !important; }

/* Controls */
.deck-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--paper);
  color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: none; place-items: center;
}
.deck-nav.prev { left: .75rem; } .deck-nav.next { right: .75rem; }
.deck-nav[disabled] { opacity: .3; cursor: default; }
@media (hover: hover) and (min-width: 48.0625rem) { .deck-nav { display: grid; } }

.deck-dots {
  position: absolute; z-index: 3; left: 0; right: 0;
  bottom: 0; height: calc(2.75rem + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; gap: .45rem; justify-content: center; align-items: center;
  background: var(--paper);
}
.deck-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #988971; transition: background .25s, transform .25s;
}
.deck-dots i.on { transform: scale(1.45); background: var(--accent); }

.swipe-cue {
  position: absolute; z-index: 3; left: 0; right: 0;
  top: calc(var(--stage) - 2.1rem);
  text-align: center; margin: 0; pointer-events: none;
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); opacity: .88; transition: opacity .3s;
}
.swipe-cue.hide { opacity: 0; visibility: hidden; }

/* ---------- generic sections ---------- */

section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
section + section { border-top: 1px solid var(--line); }

.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 42rem; }

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card {
  background: var(--panel); border: 1px solid var(--line-firm);
  border-radius: 6px; padding: 1.25rem;
}
.card h3 { margin-bottom: .35rem; }
.card p  { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover .card { border-color: var(--accent); }

/* Photo slots. Real photographs replace these — see README. */
.shot {
  aspect-ratio: 4 / 3; background: var(--panel);
  border: 1px dashed var(--line); border-radius: 6px;
  display: grid; place-items: center; text-align: center;
  color: var(--ink-soft); font-size: .85rem; padding: 1rem;
}
figure { margin: 0; }
figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: .5rem; }

ul.checks { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
ul.checks li { break-inside: avoid; padding-left: 1.4rem; position: relative; margin-bottom: .4rem; }
ul.checks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; background: var(--accent); border-radius: 1px;
}
@media (max-width: 30rem) { ul.checks { columns: 1; } }

.band { background: var(--panel); }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  padding: .8rem 1.5rem; min-height: 48px; border-radius: 4px;
  text-decoration: none; font-weight: 600;
}
.cta:hover { background: var(--accent-d); }

.trust { display: flex; gap: 1.5rem; flex-wrap: wrap; color: var(--ink-soft); font-size: .93rem; }
.trust b { color: var(--ink); }

.site-foot {
  border-top: 1px solid var(--line-firm); background: var(--panel);
  padding: 2.5rem 0 calc(2.5rem + env(safe-area-inset-bottom));
  font-size: .92rem; color: var(--ink-soft);
}
.site-foot a { color: var(--ink-soft); }
.towns { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .5rem 0 1.5rem; }

.placeholder { background: var(--panel); border-left: 3px solid var(--line-strong); padding: .75rem 1rem; font-size: .9rem; }

/* ---------- phone header ----------
   Three stacked rows of chrome eats a quarter of an iPhone screen before any
   content. On a phone the only things that matter are who this is and the
   call button; the section links are reachable by scrolling. */
@media (max-width: 48rem) {
  .site-head nav { display: none; }
  .site-head .wrap { flex-wrap: nowrap; gap: .75rem; min-height: 3.5rem; }
  .brand { font-size: .98rem; }
  .call-btn { margin-left: auto; }
    }

/* ---------- homepage tail + shared bits ---------- */

.scroll-cue {
  color: var(--ink-soft); font-size: .9rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.scroll-cue::after { content: " ↓"; }

.onward { border-top: 1px solid var(--line); }

.site-head nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.foot-nav { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---- motion from the platform, no script ---------------------------------
   Page-to-page: a short cross-fade (Chrome, Edge, Safari 18.2+; others change
   pages normally). Inner pages: cards rise in as they scroll into view, driven
   by the compositor (scroll-driven animations, Baseline since Oct 2026).
   Only transform and opacity animate. Content is fully visible without
   support, and nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
  .site-head { view-transition-name: header; }

  @supports (animation-timeline: view()) {
    .card, figure {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  }
}

/* ==== Drawing set (2026-11-14) ===========================================
   The page reads as a builder's drawing set, matching the ink section lines
   in the 3D model: condensed headings, mono sheet labels, line drawings,
   a title-block footer. Static CSS and inline SVG: no runtime cost. */
:root {
  --display: "Archivo Cond", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
h1, h2, h3, .brand {
  font-family: var(--display); font-stretch: 82%; font-weight: 700;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.4rem, 9vw, 4rem); text-transform: uppercase; line-height: 1; letter-spacing: .005em; }
.step h2 { font-size: clamp(2rem, 8vw, 3rem); text-transform: uppercase; line-height: 1; letter-spacing: .01em; }

.sheet, .eyebrow, .plate-tag, .sheet-tag, .tb-k, .ladder span {
  font-family: var(--mono); font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; font-size: .72rem; color: var(--ink-soft);
}
.sheet { margin: 0 0 .6rem; }

/* brand mark */
.brand { display: inline-flex; align-items: center; gap: .45rem; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .02em; }
.brand .mark { width: 1.35rem; height: 1.35rem; color: var(--accent-d); flex: none; }

/* ---- homepage: drafting frame over the stage wash ---- */
.sheet-frame {
  position: absolute; inset: .9rem; pointer-events: none;
}
.sheet-frame::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(35,32,28,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,32,28,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 35%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 45%, #000 35%, transparent 80%);
}
.sheet-frame i { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(35,32,28,.45); }
.sheet-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.sheet-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.sheet-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.sheet-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.sheet-tag {
  position: absolute; top: .55rem; left: 1.4rem; font-size: .62rem; color: var(--line-strong);
}
.no-webgl .sheet-frame { display: none; }

/* ---- homepage: trade ladder fills the copy panel ---- */
.ladder {
  list-style: none; margin: 1.6rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid var(--line-firm);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem .75rem;
}
.ladder li {
  font-family: var(--display); font-stretch: 82%; font-weight: 600; font-size: .95rem;
  color: var(--ink-soft); display: flex; align-items: baseline; gap: .4rem;
  padding-top: .4rem; border-top: 2px solid var(--line);
}
.ladder li.done { color: var(--ink); border-top-color: var(--line-strong); }
.ladder li.here { color: var(--ink); border-top-color: var(--accent); }
.ladder li.here span { color: var(--accent-d); }
.ladder span { font-size: .66rem; letter-spacing: .04em; }

/* ---- service cards as a sheet index ---- */
.card-dwg { display: grid; grid-template-columns: 5.5rem 1fr; grid-template-rows: auto 1fr;
  column-gap: 1rem; align-items: start; background: var(--paper); }
.card-dwg .dwg-icon { grid-row: 1 / span 2; width: 100%; height: auto; color: var(--ink);
  border-right: 1px solid var(--line); padding-right: .75rem; }
.card-dwg .sheet { margin: 0 0 .2rem; }
.card-dwg h3 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .01em; margin: 0; }

/* ---- work page plates ---- */
.plate {
  position: relative; aspect-ratio: 4 / 3; background: var(--paper);
  border: 1px solid var(--line-firm); border-radius: 4px; padding: 1.25rem 1rem 2rem;
  color: var(--ink); display: grid; place-items: center;
  background-image:
    linear-gradient(rgba(35,32,28,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,32,28,.04) 1px, transparent 1px);
  background-size: 20px 20px;
}
.plate .dwg { width: 100%; height: 100%; }
.plate-tag { position: absolute; left: .75rem; bottom: .55rem; font-size: .62rem; }
figcaption { display: flex; gap: .6rem; align-items: baseline; font-family: var(--display);
  font-stretch: 82%; font-weight: 600; font-size: 1.05rem; color: var(--ink); text-transform: uppercase; }
figcaption .sheet { margin: 0; }

/* ---- footer as a drawing title block ---- */
.site-foot { background: var(--paper); }
.title-block {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1.5px solid var(--ink); font-size: .9rem; color: var(--ink);
}
.tb-cell { padding: .6rem .75rem; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  display: flex; flex-direction: column; gap: .15rem; min-width: 0; overflow-wrap: anywhere; }
.tb-cell:nth-child(2n) { border-right: 0; }
.tb-wide { grid-column: 1 / -1; border-right: 0; }
.tb-cell:last-child { border-bottom: 0; }
.tb-name b { font-family: var(--display); font-stretch: 82%; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .01em; }
.title-block a { color: var(--ink); }
.title-block .towns { display: inline-flex; margin: 0 0 0 .4rem; }
.title-block .foot-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.title-block .foot-nav a { min-height: 32px; display: inline-flex; align-items: center; }
@media (min-width: 48rem) {
  .title-block { grid-template-columns: 2fr 1.3fr 1fr 1.4fr; }
  .tb-cell, .tb-cell:nth-child(2n) { border-right: 1px solid var(--line-strong); }
  .tb-cell:nth-child(4) { border-right: 0; }
  .tb-wide { grid-column: span 2; }
  .tb-nav { border-right: 0; border-bottom: 0; }
  .tb-wide:not(.tb-nav) { border-bottom: 0; }
}
.brand em { font-style: normal; }
@media (max-width: 30rem) {
  .brand em { display: none; }        /* "Genuine MBS" on phones, so Call fits */
  .brand { font-size: 1.1rem; }
}

/* ==== Pencil on paper (2026-11-14) =======================================
   Black and white, like a hand sketch. Overrides the colour tokens above;
   delete this block to return to the clay-and-plaster palette (and pass
   pencil:false in js/cutaway.js opts for the 3D).
   Contrast, computed: ink on paper 16.9:1, ink-soft on paper 6.4:1, on
   panel 5.9:1; white on graphite button 14.1:1; controls on the wash 6.9:1. */
:root {
  --ink:      #1d1d1d;
  --ink-soft: #595959;
  --line:     #dedcd7;
  --line-firm: #c4c1bb;
  --line-strong: #555555;
  --paper:    #f8f7f4;
  --panel:    #efeee9;
  --plaster1: #faf9f6;   /* the stage is the sheet of paper itself */
  --plaster2: #f1efea;
  --accent:   #262626;   /* graphite: buttons and the current stage */
  --accent-d: #1d1d1d;
}
a, button { -webkit-tap-highlight-color: rgba(0,0,0,.12); }
.site-head { background: rgba(248,247,244,.94); }
.step-copy::before { background: linear-gradient(to top, var(--paper), rgba(248,247,244,0)); }
.brand span { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.brand .mark { color: var(--ink); }

/* Paper tooth: a static noise tile, rasterised once. Never animated. */
body, .plate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.deck {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(178deg, var(--plaster1) 0%, var(--plaster2) 100%);
}
.sheet-frame::before { opacity: .55; }
.plate {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 160px 160px, 20px 20px, 20px 20px;
}
.dwg { color: #262626; }
.sheet-frame::before {
  background-image:
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
}
.deck-dots i { background: #888888; }   /* 3.4:1 on the paper wash */

/* ==== Framing plan (2026-11-14 redesign) =================================
   Research principle "rules, not symbols", blended with construction: the
   page is measured in lumber, not in arbitrary pixels.
     1 inch = .5rem (8 px). Spacing steps are actual lumber depths:
     2x2 1.5in, 2x4 3.5in, 2x6 5.5in, 2x8 7.25in, 2x10 9.25in, 2x12 11.25in.
     Layout module: studs at 16in on centre = 8rem. Sheet width: 8 bays.
   "Reads twice": a buyer sees a clean sheet; "Show the framing" in the title
   block reveals the studs and plates every section is built on. */
:root {
  --2x2: .75rem;  --2x4: 1.75rem; --2x6: 2.75rem;
  --2x8: 3.625rem; --2x10: 4.625rem; --2x12: 5.625rem;
  --oc: 8rem;                      /* 16 in on centre */
  --max: calc(var(--oc) * 8);      /* 64rem sheet */
}
section { padding: var(--2x8) 0; }
.wrap { max-width: var(--max); }

/* sheet header: number, title, one line */
.sheet-head { padding: var(--2x10) 0 var(--2x6); border-bottom: 1.5px solid var(--ink); }
.sheet-head h1 { margin: 0 0 var(--2x2); }
.sheet-head .lede { margin: 0; max-width: 34rem; }

/* ---- A-100 scope: one service per row, the drawing is the centre ---- */
.scopes { padding-top: 0; }
.scope {
  display: grid; gap: var(--2x4); align-items: center;
  padding: var(--2x8) 0; border-bottom: 1px solid var(--line-firm);
}
.scope:last-child { border-bottom: 0; }
.scope-dwg { background: var(--paper); border: 1px solid var(--line-firm); padding: var(--2x4) var(--2x2); }
.scope-dwg .dwg { width: 100%; height: auto; display: block; color: #262626; }
.scope-copy h2 { font-size: var(--2x6); text-transform: uppercase; line-height: 1; margin: 0 0 var(--2x2); }
.scope-copy p { color: var(--ink-soft); margin: 0 0 var(--2x2); font-size: 1.05rem; max-width: 30rem; }
.scope-towns { display: flex; gap: .5rem 1.25rem; flex-wrap: wrap; font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.scope-towns a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 48rem) {
  .scope { grid-template-columns: 5fr 4fr; gap: var(--2x8); }
  .scope:nth-child(even) .scope-dwg { order: 2; }        /* alternating repetition */
}
.cta-band { text-align: left; border-top: 1.5px solid var(--ink); }
.cta-band h2 { text-transform: uppercase; font-size: var(--2x6); line-height: 1; margin-bottom: var(--2x4); }

/* ---- A-300 schedule of towns ---- */
.schedule-wrap { overflow-x: auto; border: 1.5px solid var(--ink); }
.schedule { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; }
.schedule th, .schedule td { border: 1px solid var(--line-strong); padding: .6rem .5rem; text-align: center; }
.schedule thead th { font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); vertical-align: bottom; }
.schedule tbody th { text-align: left; font-family: var(--display); font-stretch: 82%; font-size: 1.1rem; text-transform: uppercase; }
.schedule td a { color: var(--ink); text-decoration: none; font-size: 1.1rem; display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

/* ---- A-400 contact ---- */
.call-sheet { display: flex; flex-wrap: wrap; gap: var(--2x4); align-items: center; padding-bottom: var(--2x6); border-bottom: 1px solid var(--line-firm); }
.cta-big { font-size: 1.2rem; padding: 1rem 1.75rem; min-height: 56px; }
.call-sheet .mail { color: var(--ink); font-size: 1.05rem; }
.h-sub { font-size: var(--2x4); text-transform: uppercase; margin: var(--2x8) 0 var(--2x4); }
.schedule-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; counter-reset: bar; }
.schedule-bars li {
  display: grid; grid-template-columns: 2.5rem 7.5rem 1fr; gap: .75rem; align-items: baseline;
  padding: .75rem .9rem; border: 1px solid var(--line-strong); background: var(--paper);
  margin-left: calc(var(--i, 0) * 1.25rem);   /* steps cascade like a schedule */
  color: var(--ink-soft);
}
.schedule-bars li:nth-child(2) { --i: 1; } .schedule-bars li:nth-child(3) { --i: 2; } .schedule-bars li:nth-child(4) { --i: 3; }
.schedule-bars b { font-family: var(--display); font-stretch: 82%; font-size: 1.1rem; text-transform: uppercase; color: var(--ink); }
@media (max-width: 30rem) {
  .schedule-bars li { grid-template-columns: 2rem 1fr; margin-left: calc(var(--i, 0) * .6rem); }
  .schedule-bars li .d { grid-column: 2; }
}
.punch { list-style: none; padding: 0; margin: 0; }
.punch li { position: relative; padding: .55rem 0 .55rem 2.1rem; border-bottom: 1px dashed var(--line-firm); }
.punch li::before { content: ""; position: absolute; left: 0; top: .7rem; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--ink); }
.qa { border-bottom: 1px solid var(--line-firm); }
.qa summary { cursor: pointer; padding: .9rem 0; min-height: 44px; font-family: var(--display); font-stretch: 82%; font-weight: 700; font-size: 1.2rem; text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--mono); }
.qa[open] summary::after { content: "\2212"; }
.qa p { margin: 0 0 1rem; color: var(--ink-soft); max-width: 36rem; }

/* ---- title block switch ---- */
.framing-toggle {
  align-self: flex-start; font: inherit; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); padding: .55rem .9rem; min-height: 44px; cursor: pointer;
}
.framing-toggle[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ---- "Show the framing": studs at 16 in o.c., plates at every section ---- */
.framing section, .framing .site-foot, .framing .sheet-head { position: relative; }
.framing section::before, .framing .site-foot::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* 2x4 studs: 1.5in wide (.75rem), every 16in (8rem), lightly hatched */
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--oc) - .75rem), rgba(0,0,0,.07) calc(var(--oc) - .75rem) var(--oc)),
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)) top / 100% 3px no-repeat,
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)) bottom / 100% 3px no-repeat;
  background-position: calc(50% - var(--max) / 2) 0, 0 0, 0 100%;
}
.framing section > *, .framing .site-foot > * { position: relative; z-index: 1; }
.framing section::after, .framing .site-foot::after {
  content: "2x4 studs @ 16\" o.c. \00b7  double top plate"; position: absolute; right: .75rem; top: .4rem; z-index: 2;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.framing .sheet-head::after { content: attr(data-sheet) " \00b7  header over opening"; }
.framing h1, .framing h2 { outline: 1px dashed rgba(0,0,0,.35); outline-offset: 4px; }

/* ==== Riso print variant: html[data-style="riso"] (2026-11-14) ===========
   A risograph look: four flat inks on cream stock, blue as the key ink,
   halftone dots for shadow, the second colour slightly out of register.
   Built with SITE_STYLE=riso (./deploy.sh riso). Contrast, computed:
   text #1b2a5e on stock 12.4:1; soft text #46527a 6.9:1; white on blue
   button 8.9:1; blue drawing on yellow tile 5.9:1; white drawing on blue 8.9:1. */
html[data-style="riso"] {
  --riso-blue: #1f3c9b; --riso-red: #e5432d; --riso-teal: #179c8c; --riso-yellow: #f5b51e;
  --ink: #1b2a5e; --ink-soft: #46527a;
  --line: #e4dccb; --line-firm: #cfc5b0; --line-strong: #1f3c9b;
  --paper: #f6f1e7; --panel: #efe7d6; --plaster1: #f8f4ec; --plaster2: #efe7d6;
  --accent: #1f3c9b; --accent-d: #172e78;
  --halftone: radial-gradient(circle, var(--riso-blue) 32%, transparent 34%) 0 0 / 6px 6px;
}
[data-style="riso"] .brand span { color: var(--riso-red); text-decoration: none; }
[data-style="riso"] .brand .mark { color: var(--riso-blue); }
/* the second ink, out of register by a couple of pixels */
[data-style="riso"] h1, [data-style="riso"] .step h2, [data-style="riso"] .scope-copy h2,
[data-style="riso"] .cta-band h2 { color: var(--riso-blue); text-shadow: 3px 2px 0 rgba(229,67,45,.8); }
[data-style="riso"] .sheet, [data-style="riso"] .sheet-tag { color: var(--riso-blue); }

/* sheet header printed on a yellow pass */
[data-style="riso"] .sheet-head { background: var(--riso-yellow); border-bottom: 3px solid var(--riso-blue); }
[data-style="riso"] .sheet-head .lede { color: var(--ink); }

/* tiles: each drawing printed on its own ink, with a halftone shadow */
[data-style="riso"] .scope-dwg, [data-style="riso"] .plate, [data-style="riso"] .card-dwg .dwg-icon {
  position: relative; border: 0; isolation: isolate;
}
[data-style="riso"] .scope-dwg::after, [data-style="riso"] .plate::after {
  content: ""; position: absolute; inset: 0; transform: translate(9px, 9px); z-index: -1;
  background: var(--halftone); opacity: .55;
  /* only the offset strip shows, right and bottom, like a misregistered shadow pass */
  clip-path: polygon(calc(100% - 9px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 9px), calc(100% - 9px) calc(100% - 9px));
}
[data-style="riso"] .scope:nth-child(4n+1) .scope-dwg, [data-style="riso"] figure:nth-child(4n+1) .plate { background: var(--riso-yellow); color: var(--riso-blue); }
[data-style="riso"] .scope:nth-child(4n+2) .scope-dwg, [data-style="riso"] figure:nth-child(4n+2) .plate { background: var(--riso-blue); color: #fff; }
[data-style="riso"] .scope:nth-child(4n+3) .scope-dwg, [data-style="riso"] figure:nth-child(4n+3) .plate { background: var(--riso-teal); color: #fff; }
[data-style="riso"] .scope:nth-child(4n+4) .scope-dwg, [data-style="riso"] figure:nth-child(4n+4) .plate { background: var(--riso-red); color: #fff; }
[data-style="riso"] .scope-dwg .dwg, [data-style="riso"] .plate .dwg { color: inherit; }
[data-style="riso"] .plate { background-image: none; }
[data-style="riso"] .plate-tag { color: inherit; opacity: .9; }
[data-style="riso"] .card-dwg { background: var(--paper); border-color: var(--riso-blue); }
[data-style="riso"] .card-dwg .dwg-icon { background: var(--riso-yellow); color: var(--riso-blue); padding: .35rem; border-right: 0; }

/* homepage: the stage is cream stock, the ladder prints its tiles */
[data-style="riso"] .ladder li { border-top-width: 4px; }
[data-style="riso"] .ladder li.done { border-top-color: var(--riso-teal); }
[data-style="riso"] .ladder li.here { border-top-color: var(--riso-red); }
[data-style="riso"] .ladder li.here span { color: var(--riso-red); }
[data-style="riso"] .deck-dots i { background: #9aa3c4; }
[data-style="riso"] .deck-dots i.on { background: var(--riso-red); }
[data-style="riso"] .sheet-frame i { border-color: var(--riso-blue); }
[data-style="riso"] .sheet-frame::before {
  background-image: linear-gradient(rgba(31,60,155,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(31,60,155,.06) 1px, transparent 1px);
}

/* contact, schedule, title block in blue ink */
[data-style="riso"] .schedule-bars li { border: 2px solid var(--riso-blue); background: var(--paper); box-shadow: 6px 6px 0 var(--riso-yellow); }
[data-style="riso"] .punch li::before { border-color: var(--riso-red); }
[data-style="riso"] .title-block, [data-style="riso"] .schedule-wrap { border-color: var(--riso-blue); }
[data-style="riso"] .cta-band { background: var(--riso-teal); border-top: 0; }
[data-style="riso"] .cta-band h2 { color: #fff; text-shadow: 3px 2px 0 rgba(31,60,155,.9); }
[data-style="riso"] .cta-band .cta { background: var(--riso-yellow); color: var(--riso-blue); }
[data-style="riso"] .cta:hover, [data-style="riso"] .call-btn:hover { background: var(--riso-red); }
[data-style="riso"] .framing-toggle { border-color: var(--riso-blue); color: var(--riso-blue); }
[data-style="riso"] .framing-toggle[aria-pressed="true"] { background: var(--riso-blue); color: #fff; }

/* Licensed & insured: shown only once the facts are in site.config.json */
.trust-badge { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
  margin: .75rem 0 0; padding: .45rem .75rem; border: 1.5px solid var(--ink); background: var(--paper);
  font-size: .95rem; color: var(--ink); }
.trust-badge .tb-mark { font-weight: 700; }
.trust-badge b { font-family: var(--display); font-stretch: 82%; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; }
.trust-badge span:last-child { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.tb-name .trust-badge { margin-top: .5rem; }
.cta-band .trust-badge { margin: 0 0 var(--2x4); }
[data-style="riso"] .trust-badge { border-color: var(--riso-blue); }
[data-style="riso"] .cta-band .trust-badge { background: var(--paper); }
/* inside the deck the badge is one compact line, so the call to action stays on screen */
.step-copy .trust-badge { margin: .5rem 0 0; padding: .25rem .55rem; gap: .1rem .45rem; font-size: .85rem; }
.step-copy .trust-badge b { font-size: .92rem; }
.step-copy .trust-badge span:last-child { font-size: .62rem; }
.step-end .end-links { margin-top: .75rem; }
.end-cta { margin: .4rem 0 .2rem; }
.step-end .step-copy > p:not(.sheet):not(.end-cta):not(.trust-badge) { margin-top: .6rem; }

/* ==== Full-screen deck (2026-11-14) =====================================
   Phones: the model owns more of the screen. Laptops and up: the copy is a
   compact frosted card in the lower left, over the floor's front edge, and
   the room spans the full width above it. */
:root { --stage: 56%; }
@media (min-width: 48.0625rem) {
  .step { grid-template-rows: 1fr auto; }
  .step-copy {
    grid-row: 2; align-self: end;
    width: min(46rem, calc(100% - 2 * var(--pad)));
    margin: 0 0 calc(2.75rem + .75rem) var(--pad);
    padding: 1.1rem 1.4rem 1.2rem;
    background: rgba(248, 247, 244, .82);
    -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
    border: 1px solid var(--line);
    overflow: visible;
  }
  .step-copy::before { display: none; }
  .step-copy .ladder { display: none; }         /* the dots carry progress here */
  .step-copy > * { max-width: none; }
  .step h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
  .step-end .end-links { margin-top: .4rem; }
  .step-end .end-trust { font-size: .78rem; margin-top: .5rem !important; }
  .deck-dots { background: transparent; }
  .swipe-cue { top: auto; bottom: 3.2rem; }
}
[data-style="riso"] .step-copy { background: rgba(246, 240, 226, .85); }

/* X-ray scanner over the finished house (js/cutaway.js). */
.room-xray { visibility: hidden; }
.scan-band {
  display: none; position: absolute; pointer-events: none; z-index: 1;
  border-left: 1px solid rgba(70, 160, 255, .95); border-right: 1px solid rgba(70, 160, 255, .95);
  background: linear-gradient(90deg, rgba(90, 170, 255, .16), rgba(90, 170, 255, .03) 30%, rgba(90, 170, 255, .03) 70%, rgba(90, 170, 255, .16));
  box-shadow: -6px 0 14px -6px rgba(70, 160, 255, .8), 6px 0 14px -6px rgba(70, 160, 255, .8);
}
.scan-band span {
  position: absolute; top: -1.5rem; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--mono, monospace); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: #1f5fae;
}
.no-webgl .scan-band, .no-webgl .room-xray { display: none; }

/* Exploded view (js/cutaway.js). */
.explode-btn {
  position: absolute; z-index: 3; right: max(var(--pad), env(safe-area-inset-right));
  top: 1.1rem; display: none;
  min-height: 44px; padding: 0 1rem; cursor: pointer;
  font: 600 .8rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: rgba(248, 247, 244, .88); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.explode-btn.show { display: inline-flex; align-items: center; }
.explode-btn:hover { background: var(--ink); color: var(--paper); }
.explode-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (min-width: 48.0625rem) { .explode-btn { top: auto; bottom: calc(2.75rem + .9rem); right: calc(var(--pad) + 3.5rem); } }
.ex-label {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0;
  padding: .2rem .5rem .2rem .45rem; white-space: nowrap;
  font: 600 .72rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: rgba(248, 247, 244, .9); border-right: 2px solid var(--ink);
  transition: opacity .2s;
}
.ex-label i { font-style: normal; color: var(--line-strong); margin-right: .45rem; }
.no-webgl .explode-btn, .no-webgl .ex-label { display: none !important; }
/* Exploded, the stack takes the whole stage; the copy steps aside. */
.step-copy { transition: opacity .35s; }
.deck.exploded .step-copy, .deck.exploded .swipe-cue { opacity: 0; pointer-events: none; }

/* Sun time-lapse control (js/cutaway.js). */
.sun-ctl {
  position: absolute; z-index: 3; display: none; align-items: center; gap: .6rem;
  left: max(var(--pad), env(safe-area-inset-left)); right: max(var(--pad), env(safe-area-inset-right));
  top: calc(var(--stage) - 3.6rem);
  padding: .35rem .7rem .35rem .35rem;
  background: rgba(248, 247, 244, .88); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sun-ctl.show { display: flex; }
.deck.exploded .sun-ctl { display: none; }
.sun-ctl label { flex: 1; display: flex; }
.sun-ctl input[type=range] { width: 100%; accent-color: var(--ink); min-height: 44px; }
.sun-ctl output { font: 600 .75rem/1 var(--mono); letter-spacing: .04em; min-width: 5.6em; text-align: right; }
.sun-play {
  width: 44px; height: 44px; flex: none; cursor: pointer; font-size: .9rem;
  border: 1px solid var(--line-strong); background: var(--ink); color: var(--paper);
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 48.0625rem) {
  .sun-ctl { top: auto; left: auto; width: 21rem;
             right: calc(var(--pad) + 3.5rem); bottom: calc(2.75rem + .9rem + 44px + .6rem); }
}
.no-webgl .sun-ctl { display: none !important; }