/* Housifi concept: "Build programme". One house, built under the scroll.
   Grounds hard-cut per stage (no drift). Housifi blue is the one accent; the six system colours
   are data and appear only inside the plan and the x-ray. */

:root {
  --paper:   #F4F3EE;
  --plaster: #F8F7F4;
  --site:    #C4BFB5;
  --night:   #0C1422;
  --ink:     #121826;
  --ink-soft:#46505F;
  --blue:    #2050A0;
  --blue-hi: #173F82;
  --hair:    rgba(18, 24, 38, 0.16);

  /* the six systems: the same hues as the real plan layers, deepened to read on paper */
  --sys-cable: #B48A00;
  --sys-wifi:  #3553E0;
  --sys-fibre: #08909A;
  --sys-cctv:  #B437B6;
  --sys-alarm: #D03838;
  --sys-sound: #2A9638;

  --sc-canvas: var(--paper);
  --sc-surface: #FFFFFF;
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--blue);
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Albert Sans", system-ui, sans-serif;
  --sc-font-mono: "Archivo", system-ui, sans-serif;
  --sc-shadow-color: 36 12% 30%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.12), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.10);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10), 0 10px 22px -6px hsl(var(--sc-shadow-color) / 0.18);
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --sc-gutter: clamp(1rem, 4.4vw, 4.5rem);

  --strip-h: 64px;
  --cb: var(--strip-h);   /* chrome at the bottom (desktop) */
  --ct: 0px;              /* chrome at the top (phone) */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); font-size: clamp(1rem, 0.97rem + 0.18vw, 1.1rem); }
.sc-grain { opacity: 0.03; z-index: 40; }
::selection { background: var(--blue); color: #fff; }

.skip { position: fixed; left: 12px; top: 12px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 4px; transform: translateY(-150%); transition: transform 160ms var(--ease); }
.skip:focus-visible { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -------------------------------------------------------------- type -- */
.stage-label {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 116;
  font-weight: 620;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--sc-4);
  display: flex; align-items: center; gap: 0.75em;
}
.stage-label::before { content: ""; width: 1.9em; height: 1px; background: currentColor; flex: none; }
.h-stage {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 94;
  font-weight: 560;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0;
}
.h-stage--sm { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); }
.h-small {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 96;
  font-weight: 560; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0; text-wrap: balance;
}
.lede { font-size: clamp(1.05rem, 0.98rem + 0.34vw, 1.28rem); line-height: 1.5; max-width: 40ch; margin: var(--sc-4) 0 0; text-wrap: pretty; color: var(--ink); }
.body { max-width: 60ch; color: var(--ink-soft); margin: 0; text-wrap: pretty; }

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.15em; border-radius: 3px;
  background: var(--blue); color: #fff; text-decoration: none; white-space: nowrap;
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 104; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em;
  border: 0; cursor: pointer;
  box-shadow: var(--sc-e1);
  transition: background-color 150ms var(--ease), transform 120ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--blue-hi); } }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn--big { min-height: 52px; font-size: 1rem; padding: 0 1.5em; }

/* ====================================================== programme strip == */
.prog {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  height: var(--strip-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2.2vw, 36px);
  padding: 0 var(--sc-gutter);
  background: var(--paper); /* solid: at 96% the white night headings showed through as ghost text */
  border-top: 1px solid var(--hair);
  box-shadow: 0 -8px 24px -18px rgba(18, 24, 38, 0.35);
}
.prog__brand { display: block; line-height: 0; border-radius: 2px; }
.prog__brand img { height: 17px; width: auto; }
.prog__stages { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; min-width: 0; }
.prog__stages li { flex: var(--grow, 1) 1 max-content; min-width: 0; }
.prog__stages a {
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  min-height: 44px; text-decoration: none; color: var(--ink-soft); border-radius: 2px; padding: 2px 0;
}
.prog__name {
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 112; font-weight: 560;
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 160ms var(--ease);
}
.prog__bar { position: relative; display: block; height: 7px; background: rgba(18, 24, 38, 0.09); overflow: hidden; }
.prog__bar::before, .prog__bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(18, 24, 38, 0.22); }
.prog__bar::before { left: 0; } .prog__bar::after { right: 0; }
.prog__fill { position: absolute; inset: 0; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.prog.is-rewinding .prog__fill { transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1); }
.prog__stages a[aria-current="step"] { color: var(--ink); }
.prog__stages a[aria-current="step"] .prog__name { font-weight: 680; }
.prog__stages a[aria-current="step"] .prog__bar { background: rgba(32, 80, 160, 0.16); }
.prog.is-complete .prog__name { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .prog__stages a:hover { color: var(--ink); } }
.prog__cta { height: 40px; min-height: 40px; }

/* ================================================================ hero == */
.hero__stage { background: #DCE3E8; overflow: clip; }
.hero__media { transform: scale(calc(1 + var(--sc-p, 0) * 0.07)); transform-origin: 68% 62%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(90% 80% at 0% 10%, rgba(244, 243, 238, 0.7) 0%, rgba(244, 243, 238, 0.38) 38%, rgba(244, 243, 238, 0) 66%);
}
.hero__copy {
  position: absolute; z-index: 30; /* the copy is ALWAYS in front of the near plane */
  left: var(--sc-gutter); top: clamp(4.5rem, 12vh, 8.5rem);
  width: fit-content; max-width: min(47rem, 58vw);
}
.hero__h1 {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 92;
  font-weight: 580;
  font-size: clamp(2.5rem, 1.1rem + 4.1vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.034em;
  margin: 0;
  text-wrap: balance;
}
.hero__sub { margin: var(--sc-5) 0 0; max-width: 34ch; font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem); line-height: 1.45; color: #25303F; text-wrap: pretty; }
.hero .stage-label { color: var(--ink); display: inline-flex; }

/* the near plane: vine leaves close to the lens, passing as the camera pushes */
.near { position: absolute; z-index: 25; pointer-events: none; }
.near img {
  max-width: none; width: 100%; height: auto;
  filter: blur(2px) saturate(0.92);
  transform: translate3d(calc(var(--hx, 0) * var(--k, -14px) + var(--sc-p, 0) * var(--dx, -6vw)), calc(var(--hy, 0) * var(--k, -14px) + var(--sc-p, 0) * 46vh), 0) scale(calc(1 + var(--sc-p, 0) * 0.5));
}
/* the left leaf starts BELOW the copy (--leaf-top is measured in housifi.js) and grows away from it */
.near--l { left: -16vw; top: var(--leaf-top, 66vh); width: min(58vw, 96vh); }
.near--l img { transform-origin: 70% 0%; rotate: 18deg; }
.near--r { right: -6vw; bottom: -27vh; width: 30vw; }
.near--r img { transform-origin: 50% 100%; rotate: 12deg; scale: -1 1; --k: -20px; --dx: 5vw; filter: blur(3px) saturate(0.9); }

/* =============================================================== plan == */
.ground-paper { background: var(--paper); }
.plan {
  background: var(--paper);
  display: grid; grid-template-rows: auto 1fr auto; gap: clamp(12px, 2.4vh, 28px);
  padding: calc(var(--ct) + clamp(20px, 5vh, 56px)) var(--sc-gutter) calc(var(--cb) + clamp(12px, 2.4vh, 26px));
}
.plan__head { position: relative; min-height: clamp(150px, 21vh, 210px); }
.plan__intro, .plan__outro, .plan__now { position: absolute; left: 0; top: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(24px, 5vw, 80px); align-items: end; }
.plan__intro .stage-label { grid-column: 1 / -1; }
.plan__intro .lede { margin: 0; }
.plan__outro .lede, .plan__now .lede { grid-column: 2; max-width: 48ch; margin: 0; }
.plan__sys { grid-column: 1; margin: 0; display: flex; align-items: center; gap: 14px; font-family: var(--sc-font-display); font-variation-settings: "wdth" 94; font-weight: 560; font-size: clamp(1.7rem, 1.1rem + 2vw, 3rem); line-height: 1.02; letter-spacing: -0.025em; }
.plan__sys .sw { width: 34px; height: 6px; flex: none; }
.sw--all { background: linear-gradient(90deg, var(--sys-cable) 0 16.6%, var(--sys-wifi) 0 33.3%, var(--sys-fibre) 0 50%, var(--sys-cctv) 0 66.6%, var(--sys-alarm) 0 83.3%, var(--sys-sound) 0) !important; }
.plan__outro .lede strong { font-weight: 600; }
.plan__fig { margin: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.plan__sheet { position: relative; overflow: hidden; background: #0E1512; box-shadow: var(--sc-e2); }
.plan__floor { position: relative; width: 100%; aspect-ratio: 1890 / 707; max-height: 100%; }
.plan__floor img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.plan__fig figcaption { margin-top: 10px; font-size: 0.8rem; color: var(--ink-soft); }
.legend { list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px clamp(16px, 2.2vw, 34px); border-top: 1px solid var(--hair); }
.legend li {
  display: flex; align-items: center; gap: 8px; font-family: var(--sc-font-display); font-variation-settings: "wdth" 104; font-weight: 560; font-size: 0.8rem; color: var(--ink);
  opacity: clamp(0.3, calc((var(--sc-p, 0) - var(--t)) * 14 + 0.3), 1);
}
.sw { width: 12px; height: 3px; background: var(--c); align-self: center; display: inline-block; }
.sys-cable { --c: var(--sys-cable); } .sys-wifi { --c: var(--sys-wifi); } .sys-fibre { --c: var(--sys-fibre); }
.sys-cctv { --c: var(--sys-cctv); } .sys-alarm { --c: var(--sys-alarm); } .sys-sound { --c: var(--sys-sound); }

/* ========================================================== first fix == */
.ground-site { background: var(--site); --sc-ink-soft: #343C4A; color: var(--ink); }
.ground-site .stage-label, .ground-site .body, .ground-site figcaption { color: #343C4A; }
.ff { padding-block: clamp(4rem, 9vw, 8rem) clamp(4rem, 8vw, 7rem); }
.ff__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.ff__argue .h-stage { max-width: 14ch; }
.ff__slab { margin: 0; }
.ff__slab img { width: 100%; height: auto; box-shadow: var(--sc-e2); }
figcaption { font-size: 0.82rem; line-height: 1.4; margin-top: 10px; }
.ff__verdict { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 5fr); gap: clamp(16px, 2.4vw, 36px); margin-top: clamp(3.5rem, 8vw, 7rem); align-items: start; }
.ff__ap { margin: 0; }
.ff__ap img { width: 100%; height: auto; background: #fff; }
.ff__ap--bad img { box-shadow: 0 0 0 1px rgba(208, 56, 56, 0.55), var(--sc-e2); }
.ff__ap figcaption b { font-weight: 600; color: var(--ink); }
.ff__line { align-self: center; }
.pull {
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 90; font-weight: 560;
  font-size: clamp(1.7rem, 1.1rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 var(--sc-5); text-wrap: balance;
}
.ff__site { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 64px); margin-top: clamp(3.5rem, 7vw, 6rem); align-items: center; }
.ff__bends { width: 100%; height: auto; box-shadow: var(--sc-e2); }
.ticks { list-style: none; padding: 0; margin: var(--sc-4) 0 0; border-top: 1px solid rgba(18, 24, 38, 0.22); }
.ticks li { padding: 10px 0 10px 26px; border-bottom: 1px solid rgba(18, 24, 38, 0.22); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; background: var(--blue); }

/* =========================================================== walls close == */
.ground-plaster { background: var(--plaster); }
.walls { background: var(--plaster); }
.walls__after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 1; pointer-events: none; }
.walls__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(110% 95% at 100% 0%, rgba(248, 247, 244, 0.92) 0%, rgba(248, 247, 244, 0.7) 34%, rgba(248, 247, 244, 0) 62%);
}
.walls__copy { position: absolute; z-index: 20; right: var(--sc-gutter); top: clamp(3.5rem, 10vh, 7rem); width: min(33rem, 40vw); }

/* text plates: a soft paper wash that exists only where the copy sits, a sibling of the cue */
.plate { position: absolute; inset: -30px -44px -28px -44px; background: rgba(244, 243, 238, 0.8); filter: blur(26px); opacity: 0; pointer-events: none; }
.plate--plaster { background: rgba(248, 247, 244, 0.84); }
.hero .plate { inset: -14px -26px -18px -30px; background: rgba(244, 243, 238, 0.58); filter: blur(22px); }
.cue-in { position: relative; }

/* ============================================================== silence == */
.silence { position: relative; height: 92vh; height: 92svh; overflow: hidden; background: var(--plaster); display: grid; place-items: center start; }
.silence__wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.silence__line {
  position: relative; margin: 0 0 0 clamp(1.5rem, 12vw, 12rem);
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 88; font-weight: 520;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); letter-spacing: -0.02em; color: #3A4150;
}

/* ============================================================= handover == */
.ho { background: #EDEBE6; touch-action: pan-y; }
.ho__band { display: none; }
.room-wrap { position: absolute; inset: 0; overflow: hidden; }
.room { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.room__photo, .room__xray { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.room__xr { position: absolute; inset: 0; clip-path: circle(0px at 50% 50%); will-change: clip-path; }
.routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.room__xr, .room__photo { pointer-events: none; }
.routes .r { fill: none; stroke: var(--c); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.routes .r--flow { stroke: rgba(255, 255, 255, 0.92); stroke-width: 1.6; stroke-dasharray: 2 17; animation: flow 1.6s linear infinite; animation-play-state: paused; }
.routes .r--under { stroke-dasharray: 7 6; }
.ho.is-live .routes .r--flow { animation-play-state: running; }
@keyframes flow { to { stroke-dashoffset: -19; } }
.routes .dev { fill: #F6F7F5; stroke: var(--c); stroke-width: 2; vector-effect: non-scaling-stroke; }
.routes .dev--solid { fill: var(--c); }
.routes .hub { fill: rgba(246, 247, 245, 0.9); stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.routes .hub-line { stroke: var(--blue); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.routes g { transition: opacity 220ms var(--ease); }
.routes.is-isolating g[data-sys]:not(.is-on) { opacity: 0.1; }

.lens { position: absolute; left: 0; top: 0; width: 200px; height: 200px; overflow: visible; transform-origin: 0 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity 240ms var(--ease); }
.lens.is-on { opacity: 1; }
.lens__edge { fill: none; stroke: #121826; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.lens__ticks { fill: none; stroke: #121826; stroke-width: 7; stroke-dasharray: 0.9 7.6; opacity: 0.55; vector-effect: non-scaling-stroke; }
.lens__grip { stroke: #121826; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.lens__knob { fill: var(--paper); stroke: #121826; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.lens.is-grabbable { pointer-events: auto; cursor: grab; touch-action: none; }
.lens.is-grabbable circle.lens__edge { pointer-events: stroke; }
.lens__tag {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  display: grid; grid-template-columns: 12px auto; gap: 2px 8px; align-items: center;
  max-width: 17rem; padding: 9px 12px 10px; background: rgba(250, 250, 248, 0.96); color: var(--ink);
  border: 1px solid rgba(18, 24, 38, 0.18); border-radius: 2px; box-shadow: var(--sc-e2);
  font-size: 0.8rem; line-height: 1.35; opacity: 0; transition: opacity 180ms var(--ease);
}
.lens__tag.is-on { opacity: 1; }
.lens__tag b { font-family: var(--sc-font-display); font-variation-settings: "wdth" 108; font-weight: 640; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.lens__tag .lens__line { grid-column: 1 / -1; color: var(--ink-soft); }

.ho__copy { position: absolute; z-index: 20; pointer-events: none; }
.ho__copy > [data-sc-cue] { pointer-events: auto; position: relative; }

.ho__copy--a { right: var(--sc-gutter); top: clamp(3.5rem, 9vh, 6.5rem); width: min(31rem, 36vw); }
.ho__copy--b, .ho__copy--c { left: var(--sc-gutter); top: clamp(3.5rem, 9vh, 6.5rem); width: min(31rem, 36vw); }
.ho__copy .lede { max-width: 36ch; }
.ho::before, .ho::after { content: ""; position: absolute; z-index: 3; pointer-events: none; top: 0; width: 55%; height: 60%; }
.ho::before { left: 0; background: radial-gradient(100% 100% at 0% 0%, rgba(244, 243, 238, 0.82), rgba(244, 243, 238, 0.45) 40%, rgba(244, 243, 238, 0) 72%); }
.ho::after { right: 0; background: radial-gradient(100% 100% at 100% 0%, rgba(244, 243, 238, 0.9), rgba(244, 243, 238, 0.62) 42%, rgba(244, 243, 238, 0) 76%); }
.ho__tools { position: absolute; z-index: 21; left: var(--sc-gutter); bottom: calc(var(--cb) + clamp(14px, 2.4vh, 24px)); right: var(--sc-gutter); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ho__hint { margin: 0; font-size: 0.78rem; color: var(--ink); background: rgba(244, 243, 238, 0.85); padding: 3px 8px; border-radius: 2px; }
.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint-fine { display: none; } .hint-touch { display: inline; } }
.ho__controls { display: flex; flex-wrap: wrap; gap: 6px; }
.ctl {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  background: rgba(250, 250, 248, 0.94); color: var(--ink); border: 1px solid rgba(18, 24, 38, 0.2); border-radius: 2px; cursor: pointer;
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 104; font-weight: 560; font-size: 0.8rem; letter-spacing: 0.02em;
  box-shadow: var(--sc-e1); transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease), transform 120ms var(--ease);
}
.ctl .sw { width: 14px; height: 4px; }
.ctl:active { transform: translateY(1px); }
.ctl[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.ctl--all { background: var(--blue); color: #fff; border-color: var(--blue); }
.ctl--all[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .ctl:hover { border-color: var(--ink); } .ctl--all:hover { background: var(--blue-hi); } }

/* ======================================================== years later == */
.ground-night { background: var(--night); color: #EEF1F6; --sc-ink: #EEF1F6; --sc-ink-soft: #AEB9CB; --sc-accent: #9DB8EC; }
.ground-night .stage-label, .ground-night .body, .ground-night figcaption { color: #AEB9CB; }
.ground-night :focus-visible { outline-color: #9DB8EC; }
.later { padding-bottom: clamp(4rem, 8vw, 7rem); }
.later__night { margin: 0; height: 100vh; height: 100svh; position: relative; }
.later__night img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.later__night::after { content: ""; position: absolute; inset: auto 0 0 0; height: 35%; background: linear-gradient(to top, var(--night), rgba(12, 20, 34, 0)); }
.later__head { margin-top: clamp(-9rem, -14vh, -5rem); position: relative; }
.later__head .h-stage { max-width: 17ch; }
.voices { margin-top: clamp(4rem, 9vw, 8rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.voice { margin: 0; }
.voice blockquote { margin: 0; }
.voice blockquote p { margin: 0; }
.voice figcaption { font-family: var(--sc-font-display); font-variation-settings: "wdth" 112; font-weight: 560; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; }
.voice--lead { position: sticky; top: 12vh; }
.voice--lead blockquote p {
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 90; font-weight: 520;
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4.2rem); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance;
}
.voices__all { columns: 2 18rem; column-gap: clamp(20px, 3vw, 44px); }
.voices__all .voice { break-inside: avoid; padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(238, 241, 246, 0.14); font-size: 1rem; line-height: 1.5; }
.homes { margin-top: clamp(4rem, 9vw, 8rem); }
.homes__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: 22px; }
.homes__sheet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 14px 8px; }
.homes__sheet li { margin: 0; }
.homes__sheet img { width: 100%; height: auto; aspect-ratio: 378 / 265; object-fit: cover; display: block; }
.homes__sheet span { display: block; margin-top: 5px; font-family: var(--sc-font-display); font-variation-settings: "wdth" 108; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #AEB9CB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================== close == */
.close { background: var(--paper); display: flex; flex-direction: column; padding: calc(var(--ct) + clamp(22px, 3.6vh, 38px)) var(--sc-gutter) calc(var(--cb) + clamp(10px, 1.6vh, 16px)); }
.close__frame { position: absolute; left: clamp(8px, 1.4vw, 16px); right: clamp(8px, 1.4vw, 16px); top: calc(var(--ct) + clamp(8px, 1.4vw, 16px)); bottom: calc(var(--cb) + clamp(6px, 1vw, 10px)); border: 1.2px solid var(--ink); pointer-events: none; }
.close__frame::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(18, 24, 38, 0.35); }
.close__sheet { flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; padding: clamp(8px, 3vh, 36px) clamp(4px, 1.5vw, 24px) clamp(8px, 2vh, 20px); min-height: 0; }
.close__words { align-self: start; padding-top: clamp(8px, 3vh, 36px); }
.close__words .h-stage { max-width: 15ch; }
.close__right { display: flex; flex-direction: column; min-height: 0; gap: 0; }
.close__drawing { flex: 1; min-height: 0; margin: 0; position: relative; border: 1.5px solid var(--ink); border-bottom: 0; overflow: hidden; background: #F6F7F5; }
.close__drawing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0.55; max-width: none; }
.close__words .lede { max-width: 44ch; }
.tb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--ink); background: #FBFBF8; }
.tb__title { grid-column: 1 / -1; margin: 0; padding: 6px 12px; background: var(--ink); color: #fff; font-family: var(--sc-font-display); font-variation-settings: "wdth" 118; font-weight: 620; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; }
.tb__cell { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 9px; border-top: 1px solid rgba(18, 24, 38, 0.4); border-left: 1px solid rgba(18, 24, 38, 0.4); min-width: 0; }
.tb__cell--name, .tb__cell--deco:first-of-type { border-left: 0; }
.tb__cell--wide { grid-column: 1 / -1; border-left: 0; }
.tb__k { font-family: var(--sc-font-display); font-variation-settings: "wdth" 116; font-weight: 600; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.tb__v { font-weight: 500; font-size: 0.95rem; }
.tb__in { width: 100%; border: 0; border-bottom: 1px dashed rgba(18, 24, 38, 0.45); background: transparent; padding: 4px 0 5px; font-size: 1.05rem; font-weight: 500; color: var(--ink); border-radius: 0; }
.tb__in::placeholder { color: #6A7383; }
.tb__in:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 1px; }
.tb__cell:has(.tb__v) { grid-column: span 1; }
.tb__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px; border-top: 1px solid rgba(18, 24, 38, 0.4); }
.tb__alt { margin: 0; font-size: 0.92rem; }
.tb__alt a { color: var(--blue); font-weight: 600; }
.tb__note { grid-column: 1 / -1; margin: 0; padding: 8px 12px 10px; border-top: 1px solid rgba(18, 24, 38, 0.2); font-size: 0.78rem; line-height: 1.4; color: var(--ink-soft); }
.tb__note.is-sent { color: var(--ink); background: #EEF2FA; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 10px clamp(4px, 1.5vw, 24px) 4px; border-top: 1px solid var(--hair); font-size: 0.74rem; color: var(--ink-soft); }
.foot img { height: 12px; width: auto; }
.foot p { margin: 0; }
.foot a { color: inherit; }

/* =============================================================== phone == */
@media (max-width: 860px) {
  :root { --strip-h: 66px; --cb: 0px; --ct: var(--strip-h); }
  body { padding-bottom: 0; padding-top: 0; }
  .prog {
    inset: 0 0 auto 0; height: var(--strip-h);
    grid-template-columns: auto 1fr auto; grid-template-rows: 36px 30px; gap: 0 10px; align-items: center;
    padding: 0 12px; border-top: 0; border-bottom: 1px solid var(--hair);
    box-shadow: 0 8px 24px -18px rgba(18, 24, 38, 0.35);
  }
  .prog__brand img { height: 12px; }
  .prog__cta { grid-column: 3; grid-row: 1; height: 30px; min-height: 30px; font-size: 0.78rem; padding: 0 0.8em; }
  .prog__stages { grid-column: 1 / -1; grid-row: 2; gap: 2px; }
  .prog__stages a { min-height: 30px; gap: 4px; padding: 0; }
  .prog__name { font-size: 0.56rem; letter-spacing: 0.04em; font-variation-settings: "wdth" 72; }
  .prog__bar { height: 5px; }

  .hero__copy { left: 16px; right: 16px; width: auto; top: calc(var(--strip-h) + 18px); }
  .hero .stage-label { font-size: 0.62rem; letter-spacing: 0.1em; }
  .hero .stage-label::before { display: none; }
  .hero__h1 { font-size: clamp(2.05rem, 1.2rem + 4.4vw, 2.9rem); line-height: 1.0; }
  .hero__sub { font-size: 1.02rem; max-width: 30ch; }
  .hero__scrim { background: linear-gradient(to bottom, rgba(244, 243, 238, 0.78) 0%, rgba(244, 243, 238, 0.45) 34%, rgba(244, 243, 238, 0) 55%); }
  .near--l { left: -24vw; top: var(--leaf-top, 72svh); width: 78vw; }
  .near--r { right: -30vw; bottom: -18vh; width: 70vw; }

  .plan { padding: calc(var(--strip-h) + 14px) 16px 14px; gap: 12px; }
  .plan__head { min-height: 190px; }
  .plan__intro, .plan__outro, .plan__now { grid-template-columns: 1fr; }
  .plan__outro .lede, .plan__now .lede { grid-column: 1; margin-top: 10px; font-size: 0.98rem; }
  .plan__sys { font-size: 1.6rem; }
  .plan__intro .lede { margin-top: 10px; font-size: 1rem; }
  .plan__fig { margin: 0 -16px; overflow: hidden; }
  .plan__sheet { width: calc(42svh * 2.6733); max-width: none; transform: translate3d(calc((100vw - 42svh * 2.6733) * var(--sc-p, 0)), 0, 0); }
  .plan__floor { height: 42svh; width: 100%; aspect-ratio: auto; }
  .plan__fig figcaption { padding: 0 16px; }
  .legend { gap: 6px 14px; }
  .legend li { font-size: 0.72rem; }

  .ff__top, .ff__site, .homes__head, .voices { grid-template-columns: 1fr; }
  .ff { padding-top: calc(var(--strip-h) + 3rem); }
  .ff__verdict { grid-template-columns: 1fr 1fr; }
  .ff__line { grid-column: 1 / -1; }
  .walls__copy { left: 16px; right: 16px; width: auto; top: calc(var(--strip-h) + 16px); }
  .walls__scrim { background: linear-gradient(to bottom, rgba(248, 247, 244, 0.9) 0%, rgba(248, 247, 244, 0.6) 34%, rgba(248, 247, 244, 0) 56%); }
  .silence__line { margin-left: 24px; }

  /* the peak on a phone: copy lives on a paper band, the room pans under the lens */
  .ho { --band: clamp(150px, 27svh, 210px); }
  .ho::before, .ho::after { display: none; }
  .ho .plate { display: none; }
  .ho__band { display: block; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--strip-h) + var(--band)); background: var(--paper); border-bottom: 1px solid var(--hair); z-index: 4; }
  .ho { --tools: 74px; }
  .room-wrap { top: calc(var(--strip-h) + var(--band)); bottom: var(--tools); }
  .ho__copy--a, .ho__copy--b, .ho__copy--c { left: 16px; right: 16px; width: auto; top: calc(var(--strip-h) + 12px); }
  .ho__copy .stage-label { margin-bottom: 8px; }
  .ho__copy .h-stage { font-size: 1.7rem; }
  .ho__copy .lede { font-size: 0.98rem; margin-top: 8px; }
  .ho__tools { left: 0; right: 0; bottom: 0; height: var(--tools); padding: 6px 10px 8px; gap: 5px; justify-content: flex-end; background: var(--paper); border-top: 1px solid var(--hair); }
  .ho__hint { background: none; padding: 0; }
  .ho__controls { gap: 5px; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ho__controls::-webkit-scrollbar { display: none; }
  .ctl { flex: none; }
  .ctl { box-shadow: none; }
  .ctl { min-height: 36px; padding: 0 9px; font-size: 0.74rem; }
  .ho__hint { font-size: 0.72rem; }
  .lens__tag { max-width: 14.5rem; font-size: 0.74rem; }

  .later__night { height: 72svh; }
  .later__head { margin-top: -5rem; }
  .voice--lead { position: static; }
  .voices__all { columns: 1; }
  .homes__sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 6px; }

  .close { padding: calc(var(--strip-h) + 10px) 14px 8px; }
  .close__sheet { grid-template-columns: 1fr; align-content: space-between; gap: 12px; padding: 8px 6px; }
  .close__words { padding-top: 4px; }
  .close__drawing { display: none; }
  .close__frame { top: calc(var(--ct) + 6px); left: 6px; right: 6px; bottom: 6px; }
  .close__words .h-stage { font-size: 1.75rem; }
  .close__words .lede { font-size: 0.95rem; margin-top: 8px; }
  .tb__cell { padding: 6px 10px 7px; }
  .tb__act { padding: 10px; gap: 6px 12px; }
  .tb__note { padding: 6px 10px 8px; font-size: 0.72rem; }
  .foot { font-size: 0.66rem; padding-top: 6px; }
  .foot img { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hero__scrim { background: linear-gradient(to bottom, rgba(244, 243, 238, 0.86) 0%, rgba(244, 243, 238, 0.62) 44%, rgba(244, 243, 238, 0) 70%); }
  .hero__h1 { font-size: 1.9rem; }
  .hero__sub { font-size: 0.95rem; margin-top: 12px; }
  .close__words .lede { display: none; }
  .close__words .h-stage { font-size: 1.5rem; }
  .plan__head { min-height: 150px; }
  .plan__intro .lede { font-size: 0.92rem; }
  .ho { --band: 150px; --tools: 52px; }
  .ho__hint { display: none; }
  .ho__copy .lede { font-size: 0.84rem; line-height: 1.42; margin-top: 6px; }
  .ho__copy .h-stage { font-size: 1.3rem; }
  .ho__copy .stage-label { margin-bottom: 4px; }
  .ho__controls { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .ho__controls::-webkit-scrollbar { display: none; }
  .ctl { flex: none; }
  .tb { grid-template-columns: 1fr 1fr 1.25fr; }
  .tb__cell { padding: 5px 9px 6px; }
  .tb__in { font-size: 1rem; padding: 2px 0 3px; }
  .tb__act { padding: 8px 9px; }
  .btn--big { min-height: 46px; }
  .foot p + p { display: none; }
}

/* ===================================================== reduced motion == */
@media (prefers-reduced-motion: reduce) {
  .prog.is-rewinding .prog__fill { transition: none; }
  .hero__media, .near img { transform: none !important; }
  .walls__after { opacity: clamp(0, calc((var(--sc-p, 0) - 0.45) * 5), 1); }
  .routes .r--flow { animation: none; }
  .lens, .lens__tag { display: none; }
  .legend li { opacity: 1; }
  .plan__sheet { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .plan__fig { overflow-x: auto; }
}

/* ============ close: plainer type (Jeandre's feedback 2026-09-24: "a more Calibri or Arial font") ==
   Carlito is metric-identical to Calibri; the layout is unchanged. Scoped to the last section only.
   Family, weight and tracking everywhere; sizes only on desktop, so the tighter phone sizes stand. */
#close { --close-font: "Carlito", Calibri, Arial, sans-serif; font-family: var(--close-font); }
#close .h-stage { font-family: var(--close-font); font-variation-settings: normal; font-weight: 700; letter-spacing: -0.005em; line-height: 1.05; max-width: 21ch; }
#close .lede, #close .tb__in, #close .foot { font-family: var(--close-font); }
#close .stage-label, #close .tb__title, #close .tb__k { font-family: var(--close-font); font-variation-settings: normal; font-weight: 700; letter-spacing: 0.08em; }
#close .tb__v, #close .tb__in { font-weight: 400; }
#close .btn { font-family: var(--close-font); font-variation-settings: normal; font-weight: 700; letter-spacing: 0; }
@media (min-width: 861px) {
  #close .lede { font-size: clamp(1.12rem, 1.04rem + 0.36vw, 1.36rem); line-height: 1.45; }
  #close .stage-label { font-size: 0.8rem; }
  #close .tb__title { font-size: 0.76rem; }
  #close .tb__k { font-size: 0.72rem; }
  #close .tb__v { font-size: 1.02rem; }
  #close .tb__in { font-size: 1.12rem; }
  #close .btn { font-size: 1.08rem; }
  #close .tb__alt { font-size: 1rem; }
  #close .tb__note { font-size: 0.86rem; }
  #close .foot { font-size: 0.8rem; }
}

/* =====================================================================================
   v2 (Heinrich's feedback, 2026-09-25): the architect's board, the real plan as proof,
   the property act, the estate world. Appended so every v1 rule and both 09-24 fixes stand.
   ===================================================================================== */
:root {
  --out-garden: #2A9638; --out-pool: #08909A; --out-solar: #B48A00; --out-gate: #3553E0; --out-perim: #D03838;
}

/* ---- programme strip: the "call us here" flag on Plan, a seventh stage, phone short labels */
.prog__call {
  font-style: normal; margin-left: 7px; padding: 1px 5px; border: 1px solid var(--blue); border-radius: 2px;
  color: var(--blue); font-size: 0.56rem; letter-spacing: 0.08em; vertical-align: 1px;
}

/* ---- hero: olive branches instead of vine leaves (same placement rules) */
.near--l img { rotate: 24deg; }
.near--r img { rotate: -8deg; }

/* ======================================================================= the board == */
.board {
  background: var(--paper);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9.2fr); gap: clamp(20px, 3vw, 48px); align-items: center;
  padding: calc(var(--ct) + clamp(18px, 4vh, 44px)) var(--sc-gutter) calc(var(--cb) + clamp(14px, 3vh, 32px));
}
.board__copy { display: grid; }
.board__a, .board__b { grid-area: 1 / 1; align-self: center; }
.board__b .lede { max-width: 34ch; }
.board__sheet {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(13rem, 17vw, 16.5rem);
  border: 1.5px solid var(--ink); background: #FBFBF8; box-shadow: var(--sc-e2); min-height: 0;
  max-height: calc(100svh - var(--cb) - var(--ct) - 7vh);
}
.board__draw { border-right: 1.5px solid var(--ink); padding: clamp(6px, 1vw, 14px); display: flex; align-items: center; min-width: 0; min-height: 0; }
.board__svg { width: 100%; height: auto; max-height: calc(100svh - var(--cb) - var(--ct) - 11vh); overflow: visible; }
/* drawing: every stroked path has pathLength=1 and a stagger --i; the group progress is set by JS */
.board .g-grid { opacity: var(--g-grid, 1); }
.board .pg { stroke: #9AA3B0; stroke-width: 0.8; stroke-dasharray: 14 4 2 4; fill: none; }
.board .pgb { fill: #FBFBF8; stroke: #46505F; stroke-width: 1; }
.board .pgt { font: 600 12px var(--sc-font-display); text-anchor: middle; fill: #46505F; }
.board .g-walls path, .board .g-open path:not(.pq), .board .g-open rect:not(.pq), .board .g-data .dr, .board .rc, .board .rd {
  stroke-dasharray: 1 1;
}
.board .g-walls path { stroke-dashoffset: calc(1 - clamp(0, var(--g-walls, 1) * 2.1 - var(--i) * 0.038, 1)); }
.board .g-open path:not(.pq), .board .g-open rect:not(.pq) { stroke-dashoffset: calc(1 - clamp(0, var(--g-open, 1) * 2.4 - var(--i) * 0.029, 1)); }
.board .g-open .pq { opacity: var(--g-open, 1); }
.board .g-data .dr { stroke-dashoffset: calc(1 - clamp(0, var(--g-data, 1) * 2.2 - var(--i) * 0.1, 1)); }
.board .g-data .ds { opacity: clamp(0, (var(--g-data, 1) * 2.2 - var(--i) * 0.1 - 0.8) * 5, 1); }
.board .g-data .dh { opacity: clamp(0, var(--g-data, 1) * 8, 1); }
.board .g-labels { opacity: var(--g-lab, 1); }
.board .rc, .board .rd { stroke-dashoffset: calc(1 - var(--g-cloud, 1)); }
.board .rdt { opacity: var(--g-cloud, 1); }
.board .pw-x { stroke: var(--ink); stroke-width: 9; stroke-linecap: square; fill: none; }
.board .pw-i { stroke: var(--ink); stroke-width: 4; stroke-linecap: square; fill: none; }
.board .pw, .board .pt { stroke: var(--ink); stroke-width: 1; fill: none; }
.board .pd { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.board .pa { stroke: #46505F; stroke-width: 0.8; fill: none; }
.board .pq { stroke: #46505F; stroke-width: 1; stroke-dasharray: 6 4; fill: none; }
.board .pk, .board .pp { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.board .pp2 { stroke: #46505F; stroke-width: 0.8; fill: rgba(32, 80, 160, 0.06); }
.board .pl { font: 600 13px var(--sc-font-display); letter-spacing: 0.12em; fill: #46505F; text-anchor: middle; }
.board .pl--out { fill: #6A7383; }
.board .dr { stroke: var(--blue); stroke-width: 2.4; fill: none; stroke-linejoin: round; }
.board .dsa { fill: #FBFBF8; stroke: var(--blue); stroke-width: 1.8; }
.board .dsl { stroke: var(--blue); stroke-width: 1.3; }
.board .dsp, .board .dsc { fill: var(--blue); }
.board .dsb { fill: #FBFBF8; stroke: var(--blue); stroke-width: 1.8; }
.board .dt { font: 700 11px var(--sc-font-display); fill: var(--blue); letter-spacing: 0.08em; }
.board .dhb { fill: var(--blue); }
.board .dht { fill: #fff; font: 700 12px var(--sc-font-display); text-anchor: middle; letter-spacing: 0.1em; }
.board .rc, .board .rd { stroke: #C62F2F; stroke-width: 1.6; fill: none; }
.board .rdt { font: 700 15px var(--sc-font-display); fill: #C62F2F; text-anchor: middle; }
.board .pn { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.board .pnf { fill: var(--ink); }
.board .pnt { font: 700 12px var(--sc-font-display); text-anchor: middle; fill: var(--ink); }
/* the title block, real text */
.btb { display: flex; flex-direction: column; font-size: 0.78rem; line-height: 1.35; min-width: 0; }
.btb__h { margin: 0; padding: 6px 10px; background: var(--ink); color: #fff; font: 620 0.64rem var(--sc-font-display); font-variation-settings: "wdth" 118; letter-spacing: 0.18em; text-transform: uppercase; }
.btb__h2 { margin: 0; padding: 7px 10px 3px; border-top: 1px solid rgba(18, 24, 38, 0.4); font: 600 0.6rem var(--sc-font-display); font-variation-settings: "wdth" 116; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.btb__meta { margin: 0; }
.btb__meta div { display: grid; grid-template-columns: 4.6rem 1fr; gap: 6px; padding: 5px 10px; border-top: 1px solid rgba(18, 24, 38, 0.18); }
.btb__meta div:first-child { border-top: 0; }
.btb__meta dt { font: 600 0.6rem var(--sc-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); padding-top: 2px; }
.btb__meta dd { margin: 0; font-weight: 500; }
.btb__team, .btb__rev, .btb__key { list-style: none; margin: 0; padding: 0 10px 6px; }
.btb__team li { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 4px 0; border-bottom: 1px dotted rgba(18, 24, 38, 0.3); }
.btb__team li span { color: var(--ink-soft); }
.btb__team li b { font-weight: 600; text-align: right; }
.btb__us { margin: 2px -6px 0; padding: 5px 6px !important; background: var(--blue); color: #fff; border-bottom: 0 !important; }
.btb__us span, .btb__us b { color: #fff !important; }
.btb__rev li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 6px; padding: 4px 0; border-bottom: 1px dotted rgba(18, 24, 38, 0.3); }
.btb__rev li span { font-weight: 700; }
.btb__b { color: #B02626; font-weight: 600; }
.btb .is-late { opacity: var(--late, 1); transform: translateY(calc((1 - var(--late, 1)) * 4px)); }
.btb__key { margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(18, 24, 38, 0.4); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; font-size: 0.7rem; color: var(--ink-soft); }
.btb__key li { display: flex; align-items: center; gap: 6px; }
.btb__key svg { width: 14px; height: 14px; flex: none; }

/* ================================================================ the real plan, proof == */
.proof { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5.5rem); }
.proof__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 80px); align-items: end; }
.proof__head .h-small { max-width: 20ch; }
.proof__fig { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.proof__floor, .proof__half { position: relative; background: #0E1512; box-shadow: var(--sc-e2); overflow: hidden; }
.proof__floor { aspect-ratio: 1890 / 707; }
.proof__floor img, .proof__half img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; }
.proof__stack { display: none; }
.proof__fig figcaption { color: var(--ink-soft); }
.proof__legend { list-style: none; margin-top: clamp(1.2rem, 2.4vw, 2rem); padding-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(16px, 2.6vw, 40px); }
.proof__legend li {
  display: grid; grid-template-columns: 14px 1fr; gap: 2px 10px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 0.86rem; color: var(--ink-soft);
  opacity: clamp(0.35, calc((var(--sc-p, 0) - var(--p0, 0.3) - var(--k) * var(--dp, 0.06)) * 18 + 0.35), 1);
}
.proof__legend li b { font-family: var(--sc-font-display); font-weight: 600; color: var(--ink); }
.proof__legend li > span:last-child { grid-column: 2; }
.proof__legend .sw { width: 14px; height: 4px; margin-top: 9px; }

/* ======================================================================= outside == */
.out {
  background: var(--paper);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 64px); align-items: center;
  padding: calc(var(--ct) + clamp(16px, 3.5vh, 40px)) var(--sc-gutter) calc(var(--cb) + clamp(12px, 3vh, 30px));
}
.out__copy { display: grid; gap: clamp(18px, 3.4vh, 34px); align-content: center; }
.out__a, .out__b { grid-area: 1 / 1; }
.out__b .lede { max-width: 36ch; }
.out__chips { grid-area: 2 / 1; display: grid; gap: 6px; }
.och {
  display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; text-align: left;
  background: #FBFBF8; color: var(--ink); border: 1px solid rgba(18, 24, 38, 0.2); border-radius: 2px; cursor: pointer;
  opacity: calc(0.45 + var(--on, 0) * 0.55);
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 120ms var(--ease);
}
.och .sw { width: 14px; height: 4px; background: var(--c); }
.och b { font-family: var(--sc-font-display); font-variation-settings: "wdth" 104; font-weight: 600; font-size: 0.9rem; }
.och__l { color: var(--ink-soft); font-size: 0.82rem; }
.och:active { transform: translateY(1px); }
.och[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); opacity: 1; }
.och[aria-pressed="true"] .och__l { color: #C9D2E0; }
@media (hover: hover) and (pointer: fine) { .och:hover { border-color: var(--ink); opacity: 1; } }
.out__sheet { min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.out__map {
  position: relative; height: calc(100svh - var(--cb) - var(--ct) - 9vh); max-height: 100%; aspect-ratio: 750 / 993; max-width: 100%;
  overflow: hidden; border: 1.5px solid var(--ink); background: #F6F7F5; box-shadow: var(--sc-e2);
}
.out__photo, .out__xray, .out__routes {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  transform-origin: 67.3% 45.8%; transform: scale(var(--z, 1)); will-change: transform;
}
.out__xray { opacity: var(--xr, 1); }
.out__routes { overflow: visible; pointer-events: none; }
.out__routes .or { fill: none; stroke: var(--c); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--d, 1)); }
.out__routes .ov { opacity: var(--v, 1); }
.out__routes .ov circle, .out__routes .ov rect { fill: #F6F7F5; stroke: var(--c); stroke-width: 2.2; }
.out__routes .ov .solid { fill: var(--c); }
.out__routes .ring { fill: none !important; stroke-dasharray: 5 5; stroke-width: 1.6 !important; opacity: 0.8; }
.out__routes .panels { fill: rgba(180, 138, 0, 0.1); stroke: var(--c); stroke-width: 2.4; stroke-dasharray: 7 4; opacity: var(--d, 1); }
.out__routes .hub { fill: var(--blue); }
.out__routes g { transition: opacity 220ms var(--ease); }
.out__map.is-iso .out__routes g[data-out]:not(.is-on) { opacity: 0.1; }
.out__tags { position: absolute; inset: 0; pointer-events: none; }
.otag {
  position: absolute; left: 0; top: 0; display: grid; grid-template-columns: 12px auto; gap: 2px 8px; align-items: center;
  max-width: 15rem; padding: 7px 10px 8px; background: rgba(250, 250, 248, 0.97); color: var(--ink);
  border: 1px solid rgba(18, 24, 38, 0.2); border-radius: 2px; box-shadow: var(--sc-e2);
  font-size: 0.76rem; line-height: 1.35; opacity: 0; transition: opacity 180ms var(--ease);
}
.otag .sw { width: 12px; height: 3px; background: var(--c); }
.otag b { font: 640 0.68rem var(--sc-font-display); font-variation-settings: "wdth" 108; letter-spacing: 0.1em; text-transform: uppercase; }
.otag .otag__l { grid-column: 1 / -1; color: var(--ink-soft); }
.otag.is-on { opacity: 1; }
.otag.is-small { padding: 4px 8px; box-shadow: var(--sc-e1); }
.otag.is-small .otag__l { display: none; }
.out__map.is-iso .otag:not(.is-sel) { opacity: 0 !important; }

/* ================================================================ v2 phone == */
@media (max-width: 860px) {
  .prog__call { display: none; }
  .prog__name[data-short] { font-size: 0; }
  .prog__name[data-short]::after { content: attr(data-short); font-size: 0.56rem; }

  .board { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 12px; padding: calc(var(--ct) + 14px) 12px 10px; }
  .board__copy .h-stage { font-size: 1.5rem; }
  .board__copy .lede { font-size: 0.95rem; margin-top: 8px; }
  .board__sheet { grid-template-columns: 1fr; max-height: none; }
  .board__draw { border-right: 0; border-bottom: 1.5px solid var(--ink); padding: 4px; }
  .board__svg { max-height: none; }
  .btb { font-size: 0.72rem; }
  .btb__meta div:nth-child(n+2), .btb__key { display: none; }
  .btb__team { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .btb__team li { grid-template-columns: 1fr; gap: 0; }
  .btb__team li b { text-align: left; }
  .btb__us { margin: 2px 0 0; }
  .btb__rev li:first-child { display: none; }

  .proof__head { grid-template-columns: 1fr; gap: 10px; }
  .proof__wide { display: none; }
  .proof__stack { display: grid; gap: 10px; }
  .proof__half { aspect-ratio: 945 / 707; }
  .proof__half img { width: 200%; }
  .proof__half:nth-child(2) img { left: -100%; }
  .proof__legend { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .proof__legend li { font-size: 0.8rem; }

  .out { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; align-items: stretch; gap: 10px; padding: calc(var(--ct) + 12px) 12px 10px; }
  .out__copy { display: contents; }
  .out__a, .out__b { grid-area: 1 / 1; }
  .out__copy .h-stage { font-size: 1.5rem; }
  .out__copy .lede { font-size: 0.95rem; margin-top: 8px; }
  .out__sheet { grid-area: 2 / 1; }
  .out__map { height: 100%; max-height: 100%; }
  .out__chips { grid-area: 3 / 1; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .out__chips::-webkit-scrollbar { display: none; }
  .och { flex: none; grid-template-columns: 14px auto; min-height: 40px; padding: 0 10px; }
  .och__l { display: none; }
  .otag { max-width: 12.5rem; font-size: 0.72rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .board__copy .lede, .out__copy .lede { display: none; }
  .board__copy .h-stage, .out__copy .h-stage { font-size: 1.25rem; }
  .btb__h2 { padding-top: 4px; }
  .btb__meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .out__photo, .out__xray, .out__routes { transform: none !important; }
  .btb .is-late { transform: none; }
}
/* v2 tuning after the first look */
.hero .plate { inset: -70px -150px -70px -90px; background: radial-gradient(farthest-side at 42% 50%, rgba(244, 243, 238, 0.72) 52%, rgba(244, 243, 238, 0) 100%); filter: none; }
@media (min-width: 861px) {
  .board { grid-template-columns: minmax(0, 3.3fr) minmax(0, 10fr); }
  .board__copy .h-stage { font-size: clamp(1.8rem, 1.1rem + 1.7vw, 2.8rem); }
  .board__copy .h-stage--sm { font-size: clamp(1.6rem, 1rem + 1.4vw, 2.4rem); }
}
@media (max-width: 860px) {
  .board, .out { grid-template-columns: minmax(0, 1fr); }
  .out__map { justify-self: center; }
}
.hero__subwrap { position: relative; width: fit-content; }
.hero__sub { position: relative; color: var(--ink); }
.hero .plate.plate--sub { inset: -6px -40px -14px -34px; background: rgba(244, 243, 238, 0.74); filter: blur(18px); }
.hero__h1, .hero .stage-label { position: relative; z-index: 1; }

/* ====== the title block books for real on housifi.co.za (2026-09-25): name, phone and email join the
   drawing's cells; the booking posts to the site's Enquiries like the contact page ============ */
.tb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tb__note.is-err { color: #8A1C1C; background: #FBEDED; }
.tb .btn[disabled] { opacity: 0.72; cursor: default; transform: none; }
.tb__in:user-invalid { border-bottom-color: #B42318; }
.foot__links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 2px 0 0; }
.foot__links a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(18, 24, 38, 0.3); text-underline-offset: 2px; }
.foot__links a:hover { text-decoration-color: currentColor; }
@media (max-width: 860px) {
  .tb__cell--name { grid-column: 1 / -1; }
  .tb__cell--phone { border-left: 0; }
  .tb__cell--email { grid-column: span 2; }
}
/* On a phone the booking sheet is taller than one screen once it asks for name, phone and email, and a
   pinned 100svh stage pushed the form into the footer. The act has no cues, so on phones it simply
   flows: the section is as tall as its content and the stage (still sticky) has no room to stick. */
@media (max-width: 860px) {
  #close { height: auto !important; }
  #close .close { height: auto; min-height: 100svh; padding-bottom: 14px; }
  #close .close__sheet { flex: none; align-content: start; gap: 18px; }
  #close .foot { margin-top: 14px; }
}