/* ═══════════════════════════════════════════════════════════════════
   MHI DEVELOPERS
   Palette is taken from the logo (bronze shield, charcoal towers) and
   from the houses themselves (charcoal granite, cream marble floors).
   ─────────────────────────────────────────────────────────────────── */

:root{
  /* colour */
  --ink:      #14181C;   /* charcoal base, cool cast — the granite */
  --ink-2:    #1B2126;   /* raised surface */
  --ink-3:    #212A30;
  --line:     #2C353B;   /* hairline on dark */
  --copper:   #B4733C;   /* the logo's bronze */
  --copper-lit:#E3AB72;  /* highlight edge of the bronze */
  --marble:   #EAE9E5;   /* the marble floors — light inversion */
  --marble-2: #DCDAD3;
  --mist:     #99A3AA;   /* muted text on dark */
  --slate:    #3D474E;   /* muted text on light */

  /* Muted label text has to clear 4.5:1 at 9-13px, which is where it
     actually sits. --mist and --slate are decorative-scale greys that read
     as "quiet" but measured 2.6-4.4:1 and failed AA; these two are the same
     visual idea, tuned to the size they are used at. Keep them for text,
     keep --mist for rules and non-text ornament where contrast is a
     preference rather than a requirement. */
  --label-dark:  #9BA6AE;   /* muted label on the charcoal ground  (7.2:1) */
  --label-light: #5F6A72;   /* muted label on marble and white cards (5.5:1) */
  --accent-light:#8F4E20;   /* copper, darkened for use as text on light (6.4:1) */
  --paper-ink:#1A1F23;   /* text on light */

  /* type */
  --d: 'Archivo', system-ui, sans-serif;
  --b: 'Karla', system-ui, sans-serif;
  --m: 'JetBrains Mono', ui-monospace, monospace;
  --s: 'Cormorant Garamond', Georgia, serif;

  /* metric */
  --gut: clamp(20px, 5vw, 64px);
  --max: 1240px;
  --pad: clamp(72px, 9vw, 148px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:#DDE3E7;
  font-family:var(--b);
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }

::selection{ background:var(--copper); color:#0F1215; }

/* ── the Netlify badge ───────────────────────────────────────────────
   Netlify appends this to every page it serves:
     <script src="/.netlify/scripts/hud?..."></script>
     <iframe id="nl-badge-frame" title="Powered by Netlify" srcdoc="...">
   The script is asynchronous and the badge lives inside the iframe, so no
   text selector reaches it — an earlier rule hiding a[href*="netlify.com"]
   matched nothing, because there is no such anchor in this document. The
   script and the frame are both targeted by id here. Both are Netlify's own
   additions; nothing in this site depends on either. */
#nl-badge-frame,
iframe[title="Powered by Netlify"]{ display:none !important; }
script[src*="/.netlify/scripts/hud"]{ display:none !important; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--copper); color:#0F1215; padding:12px 20px;
  font:600 13px/1 var(--m);
}
.skip:focus{ left:12px; top:12px; }

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

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

/* ── shared type ─────────────────────────────────────────────── */

.eyebrow{
  font:500 11px/1 var(--m);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--copper-lit);
  margin:0 0 22px;
}
.eyebrow--dark{ color:var(--accent-light); }

.h2{
  font-family:var(--d);
  font-weight:700;
  font-size:clamp(30px,4.4vw,58px);
  line-height:1.04;
  letter-spacing:-.028em;
  margin:0;
}

.lead{
  font-size:clamp(17px,1.42vw,21px);
  line-height:1.55;
  color:#EAEFF2;
}

.script{
  font-family:var(--s);
  font-style:italic;
  font-weight:300;
  font-size:clamp(21px,2.3vw,31px);
  line-height:1.3;
  color:var(--copper-lit);
  margin:20px 0 0;
}
.script--sm{ font-size:clamp(19px,1.7vw,23px); margin:14px 0 0; }

/* the survey rule — a measured hairline with tick marks.
   plots get measured; this is the motif that repeats.          */
.rule{
  position:relative;
  height:11px;
  border-top:1px solid var(--line);
}
.rule::before{
  content:''; position:absolute; inset:0 0 auto 0; height:7px;
  background-image:linear-gradient(90deg,var(--line) 0 1px,transparent 1px 100%);
  background-size:34px 100%;
}
.rule::after{
  content:''; position:absolute; left:0; top:-1px; width:112px; height:2px;
  background:linear-gradient(90deg,var(--copper-lit),var(--copper));
}
.rule--hero{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  border-color:rgba(255,255,255,.20);
}
.rule--hero::before{
  background-image:linear-gradient(90deg,rgba(255,255,255,.20) 0 1px,transparent 1px 100%);
}

/* ── hero survey-cube ───────────────────────────────────────────
   A decorative holographic cube turning slowly beside the hero copy,
   like a survey hologram built from the blueprint motif. Pure CSS 3D:
   six copper-edged faces around one preserve-3d box, one keyframed
   tumble. Hidden on touch, small screens, and under reduced-motion —
   decoration must never cost a visitor.                            */
.hcube{
  position:absolute; z-index:1;
  right:min(4vw,56px); top:16vh;
  width:clamp(120px,13vw,190px); aspect-ratio:1;
  perspective:900px;
  opacity:.9; pointer-events:none;
}
.hcube__box{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  animation:hcubeSpin 26s linear infinite;
}
.hcube b{
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(227,171,114,.16), rgba(227,171,114,.03) 60%),
    rgba(20,24,28,.5);
  border:1px solid rgba(227,171,114,.4);
  box-shadow:inset 0 0 26px rgba(227,171,114,.14);
  backdrop-filter:blur(1px);
}
.hcube b:nth-child(1){ transform:translateZ(50%); }
.hcube b:nth-child(2){ transform:rotateY(180deg)  translateZ(50%); }
.hcube b:nth-child(3){ transform:rotateY(90deg)   translateZ(50%); }
.hcube b:nth-child(4){ transform:rotateY(-90deg)  translateZ(50%); }
.hcube b:nth-child(5){ transform:rotateX(90deg)   translateZ(50%); }
.hcube b:nth-child(6){ transform:rotateX(-90deg)  translateZ(50%); }
@keyframes hcubeSpin{
  0%  { transform:rotateX(-18deg) rotateY(0deg); }
  100%{ transform:rotateX(-18deg) rotateY(360deg); }
}
@media (hover:none), (pointer:coarse){ .hcube{ display:none; } }
@media (max-width:900px){ .hcube{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hcube{ display:none; } }

/* ── buttons ─────────────────────────────────────────────────── */

.btn{
  /* <button class="btn"> was inheriting the browser default grey buttonface */
  appearance:none; background:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:600 12.5px/1 var(--m);
  letter-spacing:.13em; text-transform:uppercase;
  padding:15px 26px;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .22s, color .22s, border-color .22s, transform .22s;
}
.btn--solid{
  background:linear-gradient(160deg,var(--copper-lit),var(--copper));
  color:#191010;
}
.btn--solid:hover{ filter:brightness(1.09); transform:translateY(-2px); }
.btn--ghost{
  border-color:rgba(255,255,255,.42);
  color:#fff;
}
.btn--ghost:hover{ border-color:var(--copper-lit); color:var(--copper-lit); }
.btn--wa{
  background:transparent; border-color:var(--copper);
  color:var(--copper-lit); padding:11px 18px;
}
.btn--wa:hover{ background:var(--copper); color:#191010; }
.btn--full{ width:100%; }

/* ══════════════════════════ SCROLL PROGRESS ══════════════════════════ */

.prog{
  position:fixed; inset:0 0 auto 0; z-index:95;
  height:2px; background:rgba(255,255,255,.06);
}
.prog span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--copper),var(--copper-lit));
  transform-origin:left;
}

/* ══════════════════════════ NAV ══════════════════════════ */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(16,20,23,.92);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--max); margin-inline:auto;
  padding:15px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

/* the logo is a transparent PNG, in two cuts: logo.png for light grounds,
   logo-light.png reversed for the charcoal nav and footer */
.brand{ display:block; text-decoration:none; flex:none; line-height:0; }
.brand img{ height:42px; width:auto; }
.foot__logo{ height:58px; width:auto; }

.nav__links{ display:flex; align-items:center; gap:clamp(14px,2vw,32px); }
.nav__links a:not(.btn){
  font:500 12px/1 var(--m);
  letter-spacing:.16em; text-transform:uppercase;
  color:#C6CFD4; text-decoration:none;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav__links a:not(.btn):hover{ color:#fff; border-bottom-color:var(--copper); }

.burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:10px;
}
.burger span{
  display:block; width:24px; height:1.5px; background:#E6ECEF;
  transition:transform .28s, opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ══════════════════════════ HERO ══════════════════════════
   Two columns: the thesis on the left, the house on the right as a framed
   plate. Nothing behind it is an image, so the only bytes the hero costs
   are the photograph itself. */

.hero{
  position:relative;
  min-height:min(100svh,980px);
  display:flex; align-items:center;
  padding:clamp(140px,15vw,176px) 0 clamp(64px,8vw,110px);
  overflow:hidden;
  background:
    radial-gradient(78% 62% at 78% 18%, rgba(180,115,60,.20) 0%, transparent 62%),
    radial-gradient(90% 70% at 6% 96%,  rgba(33,42,48,.85)  0%, transparent 70%),
    linear-gradient(168deg, #171D22 0%, #101418 58%, #0B0E11 100%);
}
/* one soft light source, low and to the right, so the plate looks lit */
.hero__lume{
  position:absolute; z-index:0;
  right:-8%; top:8%; width:62%; aspect-ratio:1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(227,171,114,.16), transparent 68%);
  pointer-events:none;
}

.hero__in{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:center;
  gap:clamp(34px,5vw,80px);
}
.hero__copy{ min-width:0; }

.hero__h1{
  font-family:var(--d);
  font-weight:800;
  font-size:clamp(36px,5.2vw,72px);
  line-height:.98;
  letter-spacing:-.036em;
  margin:0;
  color:#fff;
  text-wrap:balance;
}
.hero__h1 em{
  font-style:normal;
  color:var(--copper-lit);
}
.hero__sub{
  max-width:48ch; margin:26px 0 0;
  font-size:clamp(15.5px,1.1vw,17px);
  color:#C3CCD2;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__note{
  margin:22px 0 0;
  font:500 11px/1.7 var(--m); letter-spacing:.13em; text-transform:uppercase;
  color:#7E8A92;
}

/* ── the framed plate ───────────────────────────────────────────
   The frame carries the photograph's own ratio, so the house is never
   cut. It sits on a slight rotation with a copper mount and its own
   record plate underneath, like a mounted survey photograph. */

.hero__plate{
  position:relative; z-index:2;
  margin:0; min-width:0;
  perspective:1300px;
}
.plate__glow{
  position:absolute; inset:auto -6% -7% -6%; height:38%;
  background:radial-gradient(50% 60% at 50% 100%, rgba(0,0,0,.72), transparent 74%);
  pointer-events:none;
}
.plate__frame{
  position:relative;
  padding:clamp(10px,1.1vw,16px);
  background:linear-gradient(152deg,#2A323A 0%,#191F24 48%,#0E1215 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 46px 90px -40px rgba(0,0,0,.95);
  transform:rotateY(-6deg) rotateX(1.5deg);
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.22,.7,.2,1);
  animation:plateIn 1.15s cubic-bezier(.2,.75,.2,1) both;
}
.plate__frame::after{
  content:''; position:absolute; inset:0;
  border:1px solid rgba(227,171,114,.34);
  pointer-events:none;
}
/* The copper rake and the glass sheen the WebGL build used to draw on a
   canvas, done with two composited layers instead. Zero bytes of JavaScript,
   no GPU library, and it survives a device that refuses to make a WebGL
   context — which is the whole point of it being CSS. */
.plate__gloss{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:
    linear-gradient(104deg,
      transparent 26%,
      rgba(227,171,114,.20) 44%,
      rgba(255,236,214,.30) 50%,
      rgba(227,171,114,.20) 56%,
      transparent 74%),
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(0,0,0,.34) 100%);
  mix-blend-mode:screen;
  opacity:.9;
  transform:translate3d(-8%,0,0);
  transition:transform 1.1s cubic-bezier(.22,.7,.2,1), opacity .6s ease;
}
.hero__plate:hover .plate__gloss{ transform:translate3d(8%,0,0); opacity:1; }
@media (prefers-reduced-motion:reduce){
  .plate__gloss{ transform:none; transition:none; }
}
.hero__plate:hover .plate__frame{ transform:rotateY(-2deg) rotateX(0deg); }
.plate__frame img{
  width:100%; height:auto;
  max-height:min(60svh,540px);
  object-fit:contain;
  margin-inline:auto;
}
@keyframes plateIn{
  from{ opacity:0; transform:rotateY(-15deg) rotateX(4deg) translateY(26px); }
  to  { opacity:1; transform:rotateY(-6deg)  rotateX(1.5deg) translateY(0); }
}

.plate__cap{
  display:flex; align-items:center; gap:12px;
  margin-top:16px; padding-left:2px;
}
.plate__no{
  font:600 12px/1 var(--m); letter-spacing:.14em;
  color:#191010; background:linear-gradient(160deg,var(--copper-lit),var(--copper));
  padding:7px 10px;
}
.plate__txt{
  font:400 11px/1.4 var(--m); letter-spacing:.16em; text-transform:uppercase;
  color:#8B959C;
}

/* ══════════════════════════ FACTS ══════════════════════════ */

.facts{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--ink-2);
}
.facts__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.fact{
  padding:clamp(30px,3.4vw,48px) clamp(16px,2vw,34px) clamp(30px,3.4vw,48px) 0;
  border-right:1px solid var(--line);
}
.fact:last-child{ border-right:0; padding-right:0; }
.fact__n{
  display:block;
  font:500 clamp(30px,3.5vw,46px)/1 var(--m);
  letter-spacing:-.02em;
  color:var(--copper-lit);
}
.fact__l{
  display:block; margin-top:14px;
  font-size:13.5px; line-height:1.5; color:var(--mist);
}

/* ══════════════════════════ SECTIONS ══════════════════════════ */

.section{ padding-block:var(--pad); }
.section--light{ background:var(--marble); color:#333A3F; }
.section--reg{ padding-bottom:clamp(40px,5vw,72px); }
.section--trades{ background:var(--ink-2); border-top:1px solid var(--line); }
.section--contact{ border-top:1px solid var(--line); }

/* keep these as class-only selectors — a `.section--light p` rule here would
   out-specify .lot__price / .shead__note--dark and silently recolour them */
.section--light .h2{ color:var(--paper-ink); }
.section--light .lead{ color:#2A3136; }
.about__right p{ color:var(--slate); }

.shead{ max-width:940px; margin-bottom:clamp(46px,5.5vw,80px); }
.shead__note{
  max-width:56ch; margin:24px 0 0;
  color:var(--mist); font-size:15.5px;
}
.shead__note--dark{ color:var(--slate); }

/* ── about ───────────────────────────────────────────────────── */

.about{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(34px,5vw,86px);
  align-items:start;
}
.about__right > p{ margin:0 0 18px; }
.about__right > p:last-of-type{ margin-bottom:0; }

.logo-card{
  margin-top:38px; padding:26px 30px;
  background:#fff;
  border:1px solid var(--marble-2);
  box-shadow:0 1px 0 var(--marble-2), 0 22px 44px -30px rgba(20,24,28,.4);
}
.logo-card img{ width:100%; max-width:390px; }

/* ── process ─────────────────────────────────────────────────── */

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.step{
  background:var(--ink);
  padding:clamp(26px,2.6vw,38px) clamp(20px,2vw,30px) clamp(34px,3.4vw,48px);
  transition:background .3s;
}
.step:hover{ background:var(--ink-3); }
.step__n{
  display:block;
  font:500 12px/1 var(--m); letter-spacing:.2em;
  color:var(--copper);
  padding-bottom:20px; margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.step__h{
  font-family:var(--d); font-weight:700;
  font-size:clamp(18px,1.5vw,22px); line-height:1.16;
  letter-spacing:-.015em;
  margin:0 0 13px; color:#F2F6F8;
}
.step p{ margin:0; font-size:14.5px; color:var(--mist); }

/* ══════════════════════════ THE REGISTER ══════════════════════════
   Signature element. Each delivered house is filed as a plot record:
   mono plot reference, a stamped status, spec pairs, and the photo
   bleeding to the outer edge of the page.                          */

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

.plot{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
  align-items:stretch;
  border-bottom:1px solid var(--line);
}
.plot:nth-child(even) .plot__stage{ order:2; }

/* The register reads as a folded concertina: consecutive records are hinged
   away from the viewer in alternating directions, and the one you point at
   swings flat and forward. The hinge is on the shared border between rows,
   which is why the fold looks continuous down the page. */
.reg{ perspective:2200px; perspective-origin:50% 50%; }
.plot{
  transform-style:preserve-3d;
  transform:rotateY(1.6deg) translateZ(-30px);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.plot:nth-child(even){ transform:rotateY(-1.6deg) translateZ(-30px); }
.plot:hover, .plot:focus-within,
.plot:nth-child(even):hover, .plot:nth-child(even):focus-within{
  transform:rotateY(0deg) translateZ(0);
}

/* ── the coverflow ───────────────────────────────────────────────
   Slides sit on a real perspective, rotated away from the viewer on
   both sides, so turning through a house has depth to it.         */

.plot__stage{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 8%, #232C33 0%, #12161A 78%);
  padding:clamp(26px,3vw,48px) 0 clamp(26px,3vw,40px);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  min-width:0;
}
/* floor reflection plane, sells the depth */
.plot__stage::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:44%;
  background:linear-gradient(0deg,rgba(0,0,0,.5),transparent);
  pointer-events:none;
}

.flow{
  position:relative;
  height:clamp(268px,34vw,450px);
  perspective:1150px;
  perspective-origin:50% 46%;
  transform-style:preserve-3d;
  touch-action:pan-y;
  cursor:grab;
  /* how far the flanking prints sit from the centre. Fixed lengths rather
     than percentages, so a narrow portrait print and a wide landscape one
     leave the same gap. */
  --gap1:clamp(116px,13.5vw,184px);
  --gap2:clamp(196px,23vw,306px);
}
.flow:active{ cursor:grabbing; }
.flow:focus-visible{ outline:2px solid var(--copper-lit); outline-offset:6px; }

/* contact shadow on the floor, directly under the centre print */
.flow::before{
  content:''; position:absolute; left:50%; bottom:2%;
  width:min(62%,340px); height:26px;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.62), transparent 72%);
  pointer-events:none;
}

/* ── one mounted print ──────────────────────────────────────────
   The frame takes its shape from the photograph — height is fixed,
   width follows the image's own ratio through --ar, which the script
   sets when each file decodes. Nothing is ever cropped: portrait phone
   photographs stay portrait instead of losing their top and bottom to
   a landscape box.                                                  */

.flow__s{
  position:absolute; top:50%; left:50%;
  height:clamp(196px,25vw,330px);
  width:auto;
  aspect-ratio:var(--ar,1.333);
  transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.22,.7,.2,1), opacity .5s, filter .5s;
  background:linear-gradient(158deg,#232A31 0%,#141A1F 62%,#0E1216 100%);
  border:0;
  padding:clamp(7px,.85vw,12px);
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(0,0,0,.5),
    0 30px 66px -26px rgba(0,0,0,.92);
}
.flow__s img{
  display:block; width:100%; height:100%;
  object-fit:contain;
  background:#0B0E11;
  backface-visibility:hidden;
}
.flow__s::after{
  content:''; position:absolute; inset:0;
  border:1px solid rgba(255,255,255,.09);
  pointer-events:none;
  transition:border-color .4s;
}
/* the sheen that tracks the pointer across the front print */
.flow__gloss{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .4s;
  background:linear-gradient(102deg,
    transparent 32%, rgba(255,255,255,.16) var(--fs,50%), transparent 68%);
}
.flow.is-live .flow__s[data-o="0"] .flow__gloss{ opacity:1; }

/* depth ladder — offset 0 is face-on, ±1 and ±2 rotate back into the scene */
.flow__s[data-o="0"]{
  transform:translate(-50%,-50%) translateZ(58px)
            rotateY(var(--fy,0deg)) rotateX(var(--fx,0deg));
  z-index:6; opacity:1; cursor:zoom-in;
}
.flow.is-live .flow__s[data-o="0"]{ transition:transform .14s linear, opacity .5s, filter .5s; }
.flow__s[data-o="0"]::after{ border-color:rgba(227,171,114,.55); }
.flow__s[data-o="-1"]{ transform:translate(-50%,-50%) translateX(calc(var(--gap1) * -1)) translateZ(-150px) rotateY(34deg)  scale(.94); z-index:5; opacity:.7;  filter:brightness(.6); }
.flow__s[data-o="1"] { transform:translate(-50%,-50%) translateX(var(--gap1))             translateZ(-150px) rotateY(-34deg) scale(.94); z-index:5; opacity:.7;  filter:brightness(.6); }
.flow__s[data-o="-2"]{ transform:translate(-50%,-50%) translateX(calc(var(--gap2) * -1)) translateZ(-340px) rotateY(44deg)  scale(.86); z-index:4; opacity:.32; filter:brightness(.4); }
.flow__s[data-o="2"] { transform:translate(-50%,-50%) translateX(var(--gap2))             translateZ(-340px) rotateY(-44deg) scale(.86); z-index:4; opacity:.32; filter:brightness(.4); }
.flow__s[data-o="far"]{
  transform:translate(-50%,-50%) translateZ(-540px) scale(.8);
  opacity:0; z-index:1; pointer-events:none;
  /* stop the browser painting fifteen invisible prints per carousel */
  visibility:hidden;
}
.flow__s[data-o="-1"]:hover, .flow__s[data-o="1"]:hover,
.flow__s[data-o="-2"]:hover, .flow__s[data-o="2"]:hover{ opacity:.92; filter:brightness(.86); }

/* zoom cue on the face-on slide */
.flow__z{
  position:absolute; z-index:2; right:11px; bottom:11px;
  display:flex; align-items:center; gap:7px;
  font:500 10px/1 var(--m); letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(14,18,21,.72);
  border:1px solid rgba(255,255,255,.22);
  padding:8px 10px;
  opacity:0; transform:translateY(5px);
  transition:opacity .3s, transform .3s;
  pointer-events:none;
}
.flow__s[data-o="0"]:hover .flow__z,
.flow__s[data-o="0"]:focus-visible .flow__z{ opacity:1; transform:none; }
.flow__z svg{ width:12px; height:12px; fill:none; stroke:var(--copper-lit); stroke-width:1.8; }

/* controls — kept in normal flow so they can never overlap the slides */
.flow__bar{
  position:relative; z-index:8;
  margin-top:clamp(14px,1.8vw,22px);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px,1.6vw,20px);
  padding-inline:16px;
}
.flow__nav{
  flex:none; width:40px; height:40px;
  background:rgba(18,22,26,.8); border:1px solid var(--line);
  cursor:pointer; display:grid; place-items:center;
  transition:border-color .22s, background .22s, transform .22s;
}
.flow__nav svg{ width:18px; height:18px; fill:none; stroke:#E4EAEE; stroke-width:1.7; }
.flow__nav:hover{ border-color:var(--copper); background:rgba(180,115,60,.22); transform:translateY(-2px); }

/* tick indicator — the survey rule, doubling as a position readout */
.flow__ticks{
  display:flex; align-items:center; gap:5px;
  min-width:0; overflow:hidden;
}
.flow__tick{
  width:13px; height:2px; padding:0; border:0;
  background:rgba(255,255,255,.24); cursor:pointer;
  transition:background .25s, width .25s, height .25s;
}
.flow__tick:hover{ background:rgba(255,255,255,.5); }
.flow__tick[aria-current="true"]{
  background:var(--copper-lit); width:26px; height:3px;
}
.flow__i{
  flex:none; font:500 11.5px/1 var(--m); letter-spacing:.12em;
  color:var(--mist); min-width:56px; text-align:center;
}
.flow__i b{ color:#fff; font-weight:500; }

.plot__body{
  padding:clamp(34px,4.4vw,74px) clamp(24px,3.6vw,64px);
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center;
  border-left:1px solid var(--line);
  min-width:0;
}
.plot:nth-child(even) .plot__body{
  border-left:0; border-right:1px solid var(--line);
}

.plot__ref{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-bottom:6px;
}
.plot__no{
  font:500 clamp(38px,4.6vw,62px)/1 var(--m);
  letter-spacing:-.03em;
  color:#fff;
}
.plot__stamp{
  font:500 10.5px/1 var(--m); letter-spacing:.2em; text-transform:uppercase;
  color:var(--copper-lit);
  border:1px solid var(--copper);
  padding:7px 11px;
  transform:rotate(-2.2deg);
}
.plot__where{
  font:400 12px/1.5 var(--m); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist); margin:0 0 26px;
}
.plot__h{
  font-family:var(--d); font-weight:700;
  font-size:clamp(21px,2.1vw,30px); line-height:1.12; letter-spacing:-.022em;
  margin:0 0 16px; color:#F4F8FA;
}
.plot__desc{ margin:0 0 28px; font-size:15px; color:var(--mist); max-width:46ch; }

.spec{
  margin:0 0 32px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
  width:100%;
}
.spec > div{ background:var(--ink); padding:14px 16px; }
.spec dt{
  font:400 10px/1 var(--m); letter-spacing:.17em; text-transform:uppercase;
  color:var(--label-dark); margin-bottom:8px;
}
.spec dd{ margin:0; font:500 14px/1.3 var(--m); color:#E4EAEE; }

/* ══════════════════════════ AVAILABLE ══════════════════════════ */

.lots{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:clamp(18px,2vw,26px);
}
.lot{
  background:#fff;
  border:1px solid var(--marble-2);
  padding:clamp(24px,2.4vw,32px);
  display:flex; flex-direction:column;
  box-shadow:0 22px 46px -34px rgba(20,24,28,.45);
}
.lot__tag{
  font:500 10px/1.4 var(--m); letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-light);
  background:#F6EDE3; border:1px dashed #D9B48C;
  padding:7px 10px; margin:0 0 22px; align-self:flex-start;
}
.lot__h{
  font-family:var(--d); font-weight:700;
  font-size:clamp(22px,1.8vw,27px); line-height:1.1; letter-spacing:-.02em;
  margin:0 0 6px; color:var(--paper-ink);
}
.lot__loc{
  font:400 11.5px/1 var(--m); letter-spacing:.15em; text-transform:uppercase;
  margin:0 0 24px;
}
.lot__spec{
  margin:0 0 22px; padding:0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--marble-2);
  border:1px solid var(--marble-2);
}
.lot__spec > div{ background:#fff; padding:12px 14px; }
.lot__spec dt{
  font:400 9.5px/1 var(--m); letter-spacing:.16em; text-transform:uppercase;
  color:var(--label-light); margin-bottom:7px;
}
.lot__spec dd{ margin:0; font:500 13.5px/1.3 var(--m); color:var(--paper-ink); }
.lot__price{
  font:500 13px/1 var(--m); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-light); margin:0 0 16px;
}
.lot__desc{ font-size:14.5px; margin:0 0 26px; }
.lot .btn{ margin-top:auto; }

/* a listing's own photograph, if one has been dropped into
   assets/img/available/<id>/ — disappears cleanly until there is one */
.lot__media{
  margin:0 0 20px;
  aspect-ratio:4/3; overflow:hidden;
  background:var(--marble-2);
}
.lot__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── the two groups of listings ─────────────────────────────────── */

.lots__group{
  font:500 10.5px/1 var(--m); letter-spacing:.2em; text-transform:uppercase;
  color:var(--label-light);
  margin:clamp(28px,3.4vw,46px) 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--marble-2);
}
.lots__group:first-of-type{ margin-top:clamp(10px,1.6vw,22px); }

/* a house still on site: copper edge, and a ladder instead of a flat status */
.lot--soon{
  border-color:#DCBF9E;
  box-shadow:0 26px 52px -34px rgba(169,100,47,.5);
}
.lot__tag--soon{
  color:#fff; background:#8F4E20; border-style:solid; border-color:#8F4E20;
}

/* named .bstep, not .prog — the scroll progress bar already owns .prog */
.bstep{
  list-style:none; margin:0 0 22px; padding:0;
  display:grid; gap:0;
}
.bstep__s{
  position:relative;
  padding:9px 0 9px 26px;
  font:500 12.5px/1.4 var(--m);
  color:var(--label-light);
}
/* the spine linking the steps, cut short on the last one */
.bstep__s::before{
  content:''; position:absolute; left:4px; top:0; bottom:0;
  width:1px; background:var(--marble-2);
}
.bstep__s:first-child::before{ top:50%; }
.bstep__s:last-child::before{ bottom:50%; }
.bstep__s::after{
  content:''; position:absolute; left:0; top:calc(50% - 4.5px);
  width:9px; height:9px; border-radius:50%;
  background:#fff; border:1px solid var(--marble-2);
}
.bstep__s.is-done{ color:#5C666C; }
.bstep__s.is-done::after{ background:#5C666C; border-color:#5C666C; }
.bstep__s.is-now{ color:var(--paper-ink); font-weight:600; }
.bstep__s.is-now::after{
  background:var(--copper); border-color:var(--copper);
  box-shadow:0 0 0 4px rgba(180,115,60,.18);
}
.bstep__s span{
  display:block; margin-top:3px;
  font:400 11px/1.3 var(--m); letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-light);
}

.lots__foot{
  margin:clamp(34px,4vw,54px) 0 0;
  max-width:62ch; font-size:15.5px;
}

/* ══════════════════════════ TRADES ══════════════════════════ */

.trades{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.trades li{
  background:var(--ink-2);
  padding:19px 22px;
  font:500 13px/1.35 var(--m); letter-spacing:.045em;
  color:#CCD5DA;
  display:flex; align-items:center; gap:13px;
  transition:background .25s, color .25s;
}
.trades li::before{
  content:''; flex:none; width:6px; height:6px;
  background:var(--copper);
  transform:rotate(45deg);
  transition:transform .25s;
}
.trades li:hover{ background:var(--ink-3); color:#fff; }
.trades li:hover::before{ transform:rotate(45deg) scale(1.55); }

/* ══════════════════════════ CONTACT ══════════════════════════ */

.contact{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(40px,5.5vw,92px);
  align-items:start;
}
.contact__blurb{ margin:22px 0 40px; max-width:44ch; color:var(--mist); }

.cdl{ margin:0; padding:0; border-top:1px solid var(--line); }
.cdl__row{
  display:grid; grid-template-columns:112px 1fr;
  gap:18px; padding:17px 0;
  border-bottom:1px solid var(--line);
}
.cdl dt{
  font:400 10.5px/1.6 var(--m); letter-spacing:.18em; text-transform:uppercase;
  color:var(--label-dark);
}
.cdl dd{ margin:0; font:500 15px/1.55 var(--m); color:#E9EEF1; }
.cdl dd a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--copper); }
.cdl dd a:hover{ color:var(--copper-lit); }

/* form */
.form{
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:clamp(24px,2.8vw,40px);
}
.form__note{
  margin:0 0 26px; padding-bottom:20px;
  border-bottom:1px solid var(--line);
  font:400 12.5px/1.6 var(--m); color:var(--mist);
}
.field{ display:block; margin-bottom:18px; }
.field__l{
  display:block; margin-bottom:9px;
  font:400 10.5px/1 var(--m); letter-spacing:.17em; text-transform:uppercase;
  color:#8B959B;
}
.field input, .field select, .field textarea{
  width:100%;
  background:var(--ink);
  border:1px solid var(--line);
  color:#EDF2F4;
  font-family:var(--b); font-size:15.5px;
  padding:13px 15px;
  transition:border-color .2s;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--copper); outline:none;
}
.field input::placeholder, .field textarea::placeholder{ color:#5E6A72; }
.field select{ appearance:none; cursor:pointer; }

.form__alt{
  margin:18px 0 0; text-align:center;
  font-size:14px; color:var(--mist);
}
.form__alt a{ color:var(--copper-lit); }
.form__err{
  margin:16px 0 0; padding:12px 14px;
  border-left:2px solid var(--copper);
  background:rgba(180,115,60,.11);
  font-size:14px; color:#F0D9C1;
}

/* ══════════════════════════ FOOTER ══════════════════════════ */

.foot{
  background:#0F1316;
  border-top:1px solid var(--line);
  padding-block:clamp(46px,5vw,72px) 34px;
}
.foot__in{ display:grid; gap:34px; }
.foot__brand{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.foot__line{ margin:0; max-width:40ch; font-size:14px; color:var(--mist); }
.foot__nav{
  display:flex; flex-wrap:wrap; gap:26px;
  padding-block:26px;
  border-block:1px solid var(--line);
}
.foot__nav a{
  font:500 11.5px/1 var(--m); letter-spacing:.17em; text-transform:uppercase;
  color:#B4BFC5; text-decoration:none;
}
.foot__nav a:hover{ color:var(--copper-lit); }
.foot__legal{ margin:0; font:400 12px/1.7 var(--m); color:var(--label-dark); }

/* ══════════════════════════ LIGHTBOX ══════════════════════════ */

.lb{
  position:fixed; inset:0; z-index:120;
  background:#0B0E11;
  display:grid;
  grid-template-rows:auto 1fr auto;
  grid-template-columns:1fr;
}
.lb[hidden]{ display:none; }

.lb__bar{
  grid-row:1; grid-column:1;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px clamp(14px,2.5vw,26px);
  border-bottom:1px solid var(--line);
}
.lb__id{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.lb__plot{
  font:500 15px/1 var(--m); letter-spacing:.1em; color:#fff;
}
.lb__count{ font:400 12px/1 var(--m); letter-spacing:.15em; color:var(--copper-lit); }
.lb__x{
  flex:none; width:42px; height:42px;
  background:none; border:1px solid var(--line); cursor:pointer;
  display:grid; place-items:center;
  transition:border-color .2s, background .2s;
}
.lb__x svg{ width:19px; height:19px; fill:none; stroke:#E4EAEE; stroke-width:1.6; }
.lb__x:hover{ border-color:var(--copper); background:rgba(180,115,60,.14); }

.lb__stage{
  grid-row:2; grid-column:1;
  margin:0; padding:clamp(14px,2vw,26px) clamp(58px,8vw,110px);
  min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.lb__stage img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  min-height:0;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}
.lb__stage figcaption{
  flex:none; text-align:center; max-width:64ch;
  font-size:14.5px; color:var(--mist);
}

.lb__arw{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:clamp(42px,4vw,54px); height:clamp(42px,4vw,54px);
  background:rgba(20,24,28,.72); border:1px solid var(--line);
  cursor:pointer; display:grid; place-items:center;
  transition:border-color .2s, background .2s;
}
.lb__arw svg{ width:22px; height:22px; fill:none; stroke:#E4EAEE; stroke-width:1.6; }
.lb__arw:hover{ border-color:var(--copper); background:rgba(180,115,60,.2); }
.lb__arw--prev{ left:clamp(8px,1.4vw,18px); }
.lb__arw--next{ right:clamp(8px,1.4vw,18px); }

.lb__strip{
  grid-row:3; grid-column:1;
  display:flex; gap:8px;
  padding:14px clamp(14px,2.5vw,26px);
  overflow-x:auto; overflow-y:hidden;
  border-top:1px solid var(--line);
  scrollbar-width:thin;
}
.lb__strip::-webkit-scrollbar{ height:6px; }
.lb__strip::-webkit-scrollbar-thumb{ background:var(--line); }
.lb__thumb{
  flex:none; width:82px; height:56px;
  padding:0; border:1px solid transparent; background:none; cursor:pointer;
  opacity:.42; transition:opacity .2s, border-color .2s;
}
.lb__thumb img{ width:100%; height:100%; object-fit:cover; }
.lb__thumb:hover{ opacity:.8; }
.lb__thumb[aria-current="true"]{ opacity:1; border-color:var(--copper); }

body.lb-open{ overflow:hidden; }

/* ══════════════════════════ REVEAL ══════════════════════════ */

/* Elements arrive out of depth: laid back on the X axis and pushed away from
   the camera, then swinging upright as they enter. The perspective is written
   into the transform itself so no parent has to opt in. */
/* The scroll reveal. Scoped to .js on purpose: the hiding only happens when
   script is actually running, because the class that brings it back is
   applied by script. If this rule were unscoped, any failure upstream — a
   blocked file, a syntax error, a plugin — would leave every section on the
   page at opacity:0 and the visitor would see the hero and nothing else.
   With the .js guard, no script means no hidden content. */
.js .reveal{
  opacity:0;
  transform:perspective(1200px) translateY(34px) translateZ(-90px) rotateX(9deg);
  transform-origin:50% 100%;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.js .reveal.is-in{
  opacity:1;
  transform:perspective(1200px) translateY(0) translateZ(0) rotateX(0deg);
}

/* Cards in a grid land one after another rather than as a slab. Nth-child
   rather than a JS-written delay, so the stagger costs nothing at runtime. */
.svcs .reveal:nth-child(2), .lots .reveal:nth-child(2),
.trades .reveal:nth-child(2), .vs .reveal:nth-child(2){ transition-delay:.08s; }
.svcs .reveal:nth-child(3), .lots .reveal:nth-child(3),
.trades .reveal:nth-child(3), .vs .reveal:nth-child(3){ transition-delay:.16s; }
.svcs .reveal:nth-child(4), .lots .reveal:nth-child(4),
.trades .reveal:nth-child(4){ transition-delay:.24s; }
.svcs .reveal:nth-child(5), .trades .reveal:nth-child(5){ transition-delay:.32s; }
.svcs .reveal:nth-child(6), .trades .reveal:nth-child(6){ transition-delay:.40s; }
.svcs .reveal:nth-child(7){ transition-delay:.48s; }
.svcs .reveal:nth-child(8){ transition-delay:.56s; }
.svcs .reveal:nth-child(9){ transition-delay:.64s; }

/* ══════════════════════════ 3D TILT ══════════════════════════
   Cursor-driven perspective on cards. The rotation values are written
   by main.js into --rx / --ry; CSS owns the rest so it degrades to a
   flat lift when JS or motion is unavailable.                        */

.tilt{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
/* promoted only while it is actually moving — there are a dozen .tilt cards
   on the page, and a dozen permanent compositor layers is what made low-VRAM
   machines drop frames and paint blank tiles */
.tilt.is-tilting{ transition:transform .12s linear, box-shadow .3s; will-change:transform; }

.step.tilt{ transform-origin:50% 60%; }
.lot.tilt.is-tilting{ box-shadow:0 40px 70px -34px rgba(20,24,28,.62); }
.svc.tilt.is-tilting{ box-shadow:0 30px 60px -30px rgba(20,24,28,.6); }

/* ══════════════════════════ ACTIVE PHOTO CAPTION ══════════════════════════ */

.plot__cap{
  position:relative; z-index:7;
  margin:clamp(16px,2vw,26px) auto 0;
  max-width:min(90%,46ch);
  text-align:center;
  font-size:13.5px; line-height:1.5; color:var(--mist);
  min-height:2.9em;
  transition:opacity .3s;
}

/* ══════════════════════════ COMPARISON ══════════════════════════ */

.section--vs{ background:var(--ink-2); border-top:1px solid var(--line); }

.vs{
  display:grid;
  grid-template-columns:minmax(120px,.62fr) minmax(0,1fr) minmax(0,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.vs > *{ background:var(--ink); padding:clamp(16px,1.8vw,24px); }

.vs__head{
  font:500 11px/1.4 var(--m); letter-spacing:.18em; text-transform:uppercase;
}
.vs__head--a{ grid-column:2; color:var(--mist); }
.vs__head--b{ grid-column:3; color:var(--copper-lit); background:var(--ink-3); }

.vs__k{
  font:500 11px/1.5 var(--m); letter-spacing:.15em; text-transform:uppercase;
  color:var(--label-dark);
  display:flex; align-items:center;
}
.vs__a{ font-size:14.5px; color:#98A2A9; }
.vs__b{
  font-size:14.5px; color:#E7ECEF;
  background:var(--ink-3);
  /* inset shadow, not ::before — the mobile breakpoint needs ::before for a label */
  box-shadow:inset 2px 0 0 var(--copper);
}

/* ══════════════════════════ FAQ ══════════════════════════ */

.faq-wrap{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(30px,5vw,86px); align-items:start; }
.faq-wrap .shead{ margin-bottom:0; }

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

.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:22px 0;
  font-family:var(--d); font-weight:600;
  font-size:clamp(16px,1.35vw,19.5px); line-height:1.35; letter-spacing:-.012em;
  color:#EDF2F4;
  transition:color .22s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--copper-lit); }
.qa summary:focus-visible{ outline:2px solid var(--copper-lit); outline-offset:4px; }

.qa__i{
  flex:none; position:relative; width:15px; height:15px; margin-top:5px;
}
.qa__i::before, .qa__i::after{
  content:''; position:absolute; background:var(--copper);
  transition:transform .3s, opacity .3s;
}
.qa__i::before{ left:0; top:7px; width:15px; height:1.5px; }
.qa__i::after{ left:7px; top:0; width:1.5px; height:15px; }
.qa[open] .qa__i::after{ transform:rotate(90deg); opacity:0; }

.qa__a{ padding:0 0 24px; max-width:62ch; }
.qa__a p{ margin:0 0 14px; font-size:15px; color:var(--mist); }
.qa__a p:last-child{ margin-bottom:0; }

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */

@media (max-width:1040px){
  .facts__grid{ grid-template-columns:1fr 1fr; }
  .fact{ padding-right:clamp(16px,3vw,34px); }
  .fact:nth-child(2n){ border-right:0; padding-right:0; }
  .fact:nth-child(-n+2){ border-bottom:1px solid var(--line); }

  .steps{ grid-template-columns:1fr 1fr; }
  .about{ grid-template-columns:1fr; gap:30px; }
  .contact{ grid-template-columns:1fr; }
  .faq-wrap{ grid-template-columns:1fr; }
}

/* The nav collapses earlier than the rest of the layout: with eight items
   the WhatsApp button runs past the gutter at about 950px, so the burger
   takes over at 980. Keep this number in step with main.js. */
@media (max-width:980px){
  .burger{ display:flex; }

  .nav__links{
    position:fixed; inset:0 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:88px var(--gut) 30px;
    background:rgba(13,17,20,.98);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    transform:translateY(-102%);
    transition:transform .4s cubic-bezier(.3,.8,.2,1);
    max-height:100svh; overflow-y:auto;
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a:not(.btn){
    padding:17px 0;
    border-bottom:1px solid var(--line);
    font-size:14px;
  }
  .nav__wa{ margin-top:24px; }
}

@media (max-width:880px){
  .plot{ grid-template-columns:1fr; }
  .plot:nth-child(even) .plot__stage{ order:0; }
  .plot__body{ border-left:0; }
  .plot:nth-child(even) .plot__body{ border-right:0; }

  /* the hero stacks: type first, then the plate at a readable size */
  .hero{ min-height:auto; align-items:flex-start; }
  .hero__in{ grid-template-columns:1fr; gap:clamp(30px,5vw,48px); }
  .hero__plate{ max-width:440px; }
  .plate__frame{ transform:rotateY(-3deg); }
  .plate__frame img{ max-height:min(52svh,460px); }

  /* the side prints need to sit further out when the stage is full width */
  .flow{ --gap1:clamp(130px,20vw,210px); --gap2:clamp(220px,34vw,340px); }

  /* stack the comparison into per-row pairs */
  .vs{ grid-template-columns:1fr; }
  .vs__head{ display:none; }
  .vs__k{ background:var(--ink-3); color:var(--copper-lit); }
  .vs__a::before, .vs__b::before{
    display:block; margin-bottom:8px;
    font:500 10px/1 var(--m); letter-spacing:.16em; text-transform:uppercase;
  }
  .vs__a::before{ content:'Building it yourself'; color:#899299; }
  .vs__b::before{ content:'Buying finished from us'; color:var(--copper-lit); }
}

@media (max-width:620px){
  .facts__grid{ grid-template-columns:1fr; }
  .fact{ border-right:0; padding-right:0; border-bottom:1px solid var(--line); }
  .fact:last-child{ border-bottom:0; }

  .steps{ grid-template-columns:1fr; }
  .lot__spec{ grid-template-columns:1fr 1fr; }
  .hero{ padding-top:120px; }
  .hero__cta .btn{ width:100%; }
  .plate__frame{ transform:none; }
  .cdl__row{ grid-template-columns:1fr; gap:6px; }

  .brand img{ height:34px; }
  .flow{ height:clamp(230px,58vw,320px); --gap1:min(38vw,180px); }
  .flow__s{ height:clamp(170px,44vw,246px); }
  .flow__s[data-o="-2"], .flow__s[data-o="2"]{ opacity:0; pointer-events:none; }
  .flow__ticks{ display:none; }

  .lb__stage{ padding-inline:14px; }
  .lb__arw{ top:auto; bottom:14px; transform:none; }
  .lb__arw--prev{ left:14px; }
  .lb__arw--next{ right:14px; }
  .lb__stage figcaption{ padding-bottom:56px; }
}

/* a tilt following the cursor makes no sense without a cursor */
@media (hover:none){
  .tilt{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .tilt{ transform:none !important; }
  /* the register lies flat — no concertina fold */
  .reg{ perspective:none; }
  .plot, .plot:nth-child(even){ transform:none; }
  /* flatten the coverflow into a plain slider — no rotation, no depth */
  .flow{ perspective:none; }
  .flow__gloss{ display:none; }
  .flow__s[data-o="0"]{ transform:translate(-50%,-50%); }
  .flow__s[data-o="-1"]{ transform:translate(-50%,-50%) translateX(calc(var(--gap1) * -1)) scale(.94); }
  .flow__s[data-o="1"] { transform:translate(-50%,-50%) translateX(var(--gap1))             scale(.94); }
  .flow__s[data-o="-2"]{ transform:translate(-50%,-50%) translateX(calc(var(--gap2) * -1)) scale(.86); }
  .flow__s[data-o="2"] { transform:translate(-50%,-50%) translateX(var(--gap2))             scale(.86); }
  .flow__s[data-o="far"]{ transform:translate(-50%,-50%) scale(.8); }
}



/* The browser does no layout, style or paint work for these sections
   until they are close to the viewport. contain-intrinsic-size is the
   placeholder height, so the scrollbar does not jump as they come in. */
.section--vs, .section--invest, .section--trades, .section--calc,
#faq, .section--contact{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}

/* ══════════════════════════ SERVICES ══════════════════════════
   Six cards on the charcoal ground. The number plate on each is the only
   ornament — it carries the same survey-record logic as the register. */

.section--svc{ background:var(--ink-2); border-top:1px solid var(--line); }

.svcs{
  list-style:none; margin:clamp(38px,4.4vw,60px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.svc{
  position:relative;
  background:var(--ink);
  padding:clamp(26px,2.6vw,38px);
  transition:background .3s;
}
.svc::after{
  /* pointer-following copper sheen on the cards with tilt */
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(150px circle at var(--fx,50%) var(--fy,50%),
    rgba(227,171,114,.14), transparent 68%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.svc:hover::after{ opacity:1; }
.svc:hover{ background:#1E252B; }
.svc > *{ position:relative; z-index:1; }
.svc__n{
  display:inline-block;
  font:500 10.5px/1 var(--m); letter-spacing:.2em;
  color:var(--copper-lit);
  border:1px solid rgba(227,171,114,.34);
  padding:6px 9px; margin-bottom:20px;
}
.svc__h{
  font-family:var(--d); font-weight:600;
  font-size:clamp(18px,1.5vw,22px); line-height:1.18; letter-spacing:-.018em;
  margin:0 0 12px; color:#fff;
}
.svc__d{ margin:0; font-size:14.5px; line-height:1.68; color:var(--mist); }

.svcs__foot{
  margin:clamp(30px,3.4vw,46px) 0 0;
  max-width:58ch; font-size:15.5px; color:var(--mist);
}

/* ══════════════════════════ INVEST ══════════════════════════
   The one place on the page where money is discussed, so it gets the
   register's ledger treatment: numbered steps on the left, a term sheet
   panel on the right that is deliberately honest about what is unknown. */

.section--invest{
  border-top:1px solid var(--line);
  background:
    radial-gradient(72% 50% at 88% 0%, rgba(180,115,60,.13) 0%, transparent 66%),
    var(--ink);
}

.inv{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,4vw,64px);
  margin-top:clamp(38px,4.4vw,60px);
  align-items:start;
}

.inv__how{ list-style:none; margin:0; padding:0; counter-reset:none; }
.inv__how li{
  position:relative;
  padding:0 0 clamp(24px,2.6vw,34px) clamp(56px,5vw,74px);
  border-left:1px solid var(--line);
  margin-left:14px;
}
.inv__how li:last-child{ border-left-color:transparent; padding-bottom:0; }
.inv__step{
  position:absolute; left:0; top:0;
  transform:translateX(-50%);
  width:28px; height:28px;
  display:grid; place-items:center;
  font:600 10.5px/1 var(--m); letter-spacing:.06em;
  color:#191010; background:linear-gradient(160deg,var(--copper-lit),var(--copper));
}
.inv__h{
  font-family:var(--d); font-weight:600;
  font-size:clamp(17px,1.42vw,21px); line-height:1.24; letter-spacing:-.018em;
  margin:2px 0 9px; color:#fff;
}
.inv__d{ margin:0; font-size:14.5px; line-height:1.66; color:var(--mist); max-width:46ch; }

.inv__terms{
  background:linear-gradient(168deg,#232B31 0%,#181E23 100%);
  border:1px solid var(--line);
  border-top:2px solid var(--copper);
  padding:clamp(24px,2.6vw,34px);
  box-shadow:0 40px 80px -46px rgba(0,0,0,.9);
  position:sticky; top:96px;
}
.inv__lab{
  font:500 10.5px/1 var(--m); letter-spacing:.2em; text-transform:uppercase;
  color:var(--copper-lit); margin:0 0 20px;
}
.inv__dl{ margin:0 0 22px; padding:0; }
.inv__dl > div{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.inv__dl > div:first-child{ border-top:1px solid var(--line); }
.inv__dl dt{
  font:400 10px/1.4 var(--m); letter-spacing:.15em; text-transform:uppercase;
  color:#8B959C;
}
.inv__dl dd{ margin:0; font:500 13px/1.45 var(--m); color:#fff; }
/* a term that still needs the owner's real number reads as provisional */
.inv__dl dd[data-edit]{ color:var(--copper-lit); }

.inv__risk{
  margin:0 0 24px;
  font-size:13.5px; line-height:1.68; color:#9AA4AB;
  padding-top:18px; border-top:1px solid var(--line);
}
.inv__risk strong{ display:block; color:#fff; font-weight:600; margin-bottom:6px; }

@media (max-width:980px){
  .inv{ grid-template-columns:1fr; }
  .inv__terms{ position:static; }
}


/* ══════════════════════════ COST CALCULATOR ══════════════════════════
   Two panels: the brief on the left, the estimate on the right. The
   estimate panel is the only surface in this section lifted off the page —
   it is what the visitor came for. */

.section--calc{ background:var(--ink-2); border-top:1px solid var(--line); }

.calc{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(18px,2.4vw,34px);
  align-items:start;
}

.calc__in{
  background:var(--ink);
  border:1px solid var(--line);
  padding:clamp(22px,2.4vw,34px);
}
.calc__out{
  background:linear-gradient(180deg,#232C33 0%,#1A2126 58%);
  border:1px solid #38434B;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  display:flex; flex-direction:column;
}

.calc__lab{
  font:500 10.5px/1 var(--m);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--mist);
  margin:0 0 14px;
}
.calc__lab + .calc__lab, .calc .field + .calc__lab, .calc__hint + .calc__lab,
.chk + .calc__lab, .grade + .calc__lab{ margin-top:clamp(24px,2.6vw,34px); }
.calc__lab--out{ color:var(--copper-lit); margin-bottom:10px; }

.calc__hint{
  margin:-8px 0 0;
  font:400 12.5px/1.55 var(--b);
  color:#7C868E;
}

/* ── plot size chips ─────────────────────────────────────────── */

.seg{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.seg__b{
  flex:1 1 auto; min-width:62px;
  background:transparent; color:#C3CBD1;
  border:1px solid var(--line);
  padding:11px 8px;
  font:500 12.5px/1 var(--m);
  cursor:pointer;
  transition:border-color .22s, color .22s, background .22s;
}
.seg__b:hover{ border-color:var(--copper); color:#fff; }
.seg__b.is-on{ background:var(--copper); border-color:var(--copper); color:#140E08; }

/* ── fields ──────────────────────────────────────────────────── */

.calc .field{ margin-bottom:16px; }
.field--row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.field--row .field__l{ margin:0; flex:1 1 auto; }

.field__wrap{ position:relative; flex:0 0 auto; display:inline-flex; align-items:center; }
.calc .field__wrap input{ width:120px; padding-right:54px; text-align:right; }
.field__u{
  position:absolute; right:12px; pointer-events:none;
  font:500 11px/1 var(--m); color:var(--label-dark);
}

.chk{ display:flex; align-items:center; gap:11px; cursor:pointer; margin-bottom:16px; }
.chk input{
  appearance:none; width:19px; height:19px; flex:0 0 auto; margin:0;
  border:1px solid #46525A; background:transparent; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.chk input:checked{ background:var(--copper); border-color:var(--copper); }
.chk input:checked::after{
  content:''; display:block; width:5px; height:9px; margin:2px auto 0;
  border:2px solid #140E08; border-top:0; border-left:0; transform:rotate(42deg);
}
.chk span{ font-size:14.5px; color:#C3CBD1; }

/* ── finish grade ────────────────────────────────────────────── */

.grade{ display:grid; gap:8px; margin-bottom:20px; }
.grade__b{
  text-align:left; cursor:pointer;
  background:transparent; color:#C3CBD1;
  border:1px solid var(--line);
  border-left:3px solid transparent;
  padding:14px 16px;
  font:inherit;
  transition:border-color .22s, background .22s;
}
.grade__b b{ display:block; font:600 14.5px/1.3 var(--d); color:#fff; margin-bottom:3px; }
.grade__b span{ display:block; font-size:12.5px; line-height:1.5; color:#8B959C; }
.grade__b:hover{ border-color:#46525A; }
.grade__b.is-on{ border-left-color:var(--copper); background:rgba(180,115,60,.09); }
.grade__b.is-on span{ color:#A9B2B9; }

/* ── the number ──────────────────────────────────────────────── */

.calc__top{ padding:clamp(24px,2.6vw,36px) clamp(22px,2.4vw,34px) clamp(20px,2.2vw,28px); }
.calc__big{
  font-family:var(--d); font-weight:700;
  font-size:clamp(38px,5.6vw,72px);
  line-height:.95; letter-spacing:-.02em;
  color:#fff; margin:0;
  font-variant-numeric:tabular-nums;
}
.calc__range{
  margin:14px 0 0;
  font:500 12px/1.6 var(--m);
  color:var(--mist);
}
.calc__meta{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px; margin:clamp(20px,2.2vw,28px) 0 0;
  padding-top:clamp(18px,2vw,24px); border-top:1px solid #38434B;
}
.calc__meta dt{
  font:500 10px/1 var(--m); letter-spacing:.16em; text-transform:uppercase;
  color:var(--label-dark); margin-bottom:7px;
}
.calc__meta dd{ margin:0; font:500 14.5px/1.3 var(--m); color:#fff; }

/* ── tabs ────────────────────────────────────────────────────── */

.tabs{ display:flex; border-top:1px solid #38434B; border-bottom:1px solid #38434B; }
.tab{
  flex:1 1 0; min-width:0;
  background:transparent; border:0; border-bottom:2px solid transparent;
  margin-bottom:-1px;
  padding:15px 8px;
  font:500 11.5px/1 var(--m); letter-spacing:.1em; text-transform:uppercase;
  color:var(--mist); cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.tab:hover{ color:#fff; background:rgba(255,255,255,.03); }
.tab.is-on{ color:var(--copper-lit); border-bottom-color:var(--copper); }

.pane{ padding:clamp(6px,1vw,12px) clamp(22px,2.4vw,34px) clamp(20px,2.2vw,26px); }
.pane:focus-visible{ outline-offset:-3px; }

/* ── tables ──────────────────────────────────────────────────── */

.tbl{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.tbl th, .tbl td{ padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07); text-align:right; }
.tbl th[scope=row]{ text-align:left; font:400 14px/1.4 var(--b); color:#C3CBD1; padding-right:12px; }
.tbl thead th{
  font:500 10px/1 var(--m); letter-spacing:.16em; text-transform:uppercase;
  color:var(--label-dark); padding-top:16px; text-align:right;
}
.tbl thead th:first-child{ text-align:left; }
.tbl td{ font:500 13.5px/1.4 var(--m); color:#E7ECEF; white-space:nowrap; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td{ border-bottom:0; }
.tbl__sum th[scope=row]{ color:#fff; font-weight:600; }
.tbl__sum td{ color:var(--copper-lit); }
.tbl__sum th, .tbl__sum td{ border-top:1px solid #38434B; padding-top:14px; }

.calc__foot{ margin:16px 0 0; font-size:12.5px; line-height:1.6; color:var(--label-dark); }

/* ── timeline ────────────────────────────────────────────────── */

/* the headline figure above the programme */
.tline__lead{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px;
  margin:0 0 6px; padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.tline__big{
  font:600 clamp(26px,3vw,38px)/1 var(--d);
  letter-spacing:-.02em; color:var(--copper-lit);
}
.tline__sub{ flex:1 1 220px; font-size:13px; line-height:1.6; color:#8B959C; }

.tline{ list-style:none; margin:6px 0 0; padding:0; }.tline li{
  display:grid; grid-template-columns:auto 1fr; gap:2px 18px;
  padding:13px 0 13px 18px;
  border-left:1px solid #38434B; position:relative;
}
.tline li::before{
  content:''; position:absolute; left:-4px; top:19px;
  width:7px; height:7px; background:var(--copper); border-radius:50%;
}
.tline__m{
  grid-row:1 / span 2;
  font:500 11px/1.4 var(--m); color:var(--copper-lit);
  min-width:96px; padding-top:2px;
}
.tline__h{ font:600 14.5px/1.3 var(--d); color:#fff; }
.tline__n{ font-size:12.5px; line-height:1.5; color:#8B959C; }

/* ── hand-off ────────────────────────────────────────────────── */

.calc__cta{
  margin-top:auto;
  padding:clamp(18px,2vw,24px) clamp(22px,2.4vw,34px) clamp(22px,2.4vw,30px);
  border-top:1px solid #38434B;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
}
.calc__stamp{ margin:0; flex:1 1 220px; font:500 11.5px/1.6 var(--m); color:var(--label-dark); }
.calc__stamp--warn{ color:var(--copper-lit); }

.calc__disc{
  max-width:96ch; margin:clamp(26px,3vw,40px) 0 0;
  font-size:13.5px; line-height:1.75; color:var(--label-dark);
  border-top:1px solid var(--line); padding-top:clamp(18px,2vw,24px);
}
.calc__disc strong{ color:#B7C0C6; font-weight:600; }

/* ── SitePulse AI ─────────────────────────────────────────────── */

.section--sitepulse{ background:var(--ink-2); border-top:1px solid var(--line); }
.section--sitepulse .shead__note{ max-width:66ch; }

.sp{ margin-top:34px; }
.sp__copy{ max-width:72ch; color:#C6CDD2; }
.sp__copy p{ margin:0 0 18px; }
.sp__ul{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px; }
.sp__ul li{
  position:relative; padding-left:26px;
  font:500 15px/1.6 var(--b); color:#DDE3E7;
}
.sp__ul li::before{
  content:''; position:absolute; left:0; top:.52em;
  width:13px; height:2px; background:var(--copper);
}
.sp__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }

@media (max-width:1000px){
  .calc{ grid-template-columns:1fr; }
  .calc__meta{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .tab{ font-size:10.5px; letter-spacing:.06em; padding:14px 4px; }
  /* only the material table drops a column — the cost table's third
     column is the cost itself, so hiding its header would leave the
     body cells stranded under the wrong heading */
  .tbl--mat thead th:nth-child(3), .tbl--mat tbody td:nth-child(3){ display:none; }
  .tline li{ grid-template-columns:1fr; padding-left:16px; }
  .tline__m{ grid-row:auto; min-width:0; }
  .calc__cta .btn{ width:100%; }
}
@media (max-width:400px){
  .calc__meta{ grid-template-columns:1fr; }
}

/* The assumption behind a material quantity. It rides in a title attribute so
   the table keeps four columns and stays readable on a phone; the dotted
   underline is the only clue that there is anything there to read. */
.tbl__basis{
  border-bottom:1px dotted currentColor;
  cursor:help;
}
/* The calculator section sits on the charcoal body, not on paper: the white
   card is only the output column, not the section. So everything below is
   written for a dark ground. The earlier values here used --paper-ink and
   --marble-2, which put near-black text and a near-white hairline on
   #14181C — the whole block was technically rendered and visually absent. */
.tbl tfoot td, .tbl tfoot th{
  border-top:2px solid rgba(227,171,114,.5);
  font-weight:700;
  color:#F2F5F7;
}

/* Conditions that make the number wrong rather than merely uncertain. A
   visitor who is about to sign on a fantasy needs to be told. */
.calc__caveat:empty{ display:none; }
.calc__caveat{
  margin-top:22px; padding:18px 20px;
  border:1px solid rgba(227,171,114,.4); border-left-width:3px;
  background:rgba(180,115,60,.10);
}
.calc__caveat__h{
  margin:0 0 10px;
  font:600 11px/1 var(--m); letter-spacing:.16em; text-transform:uppercase;
  color:var(--copper-lit);
}
.calc__caveats{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.calc__caveats li{
  position:relative; padding-left:20px;
  font-size:14px; line-height:1.55; color:#DDE3E7;
}
.calc__caveats li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border:1px solid var(--copper-lit); transform:rotate(45deg);
}

/* What the money buys, and what it does not. Both lists the same length,
   because a one-sided list is a sales pitch rather than an estimate. */
.incx{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,64px);
  margin-top:clamp(28px,4vw,52px);
  padding-top:clamp(24px,3vw,40px);
  border-top:1px solid var(--line);
}
.incx__h{
  margin:0 0 16px;
  font:600 11px/1 var(--m); letter-spacing:.16em; text-transform:uppercase;
}
.incx__h--yes{ color:#8FBF9B; }
.incx__h--no{ color:var(--copper-lit); }
.incx__ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.incx__ul li{
  position:relative; padding-left:26px;
  font-size:15px; line-height:1.55; color:#C6CDD2;
}
.incx__col:first-child .incx__ul li::before{
  content:''; position:absolute; left:2px; top:.5em;
  width:11px; height:6px;
  border-left:2px solid #8FBF9B; border-bottom:2px solid #8FBF9B;
  transform:rotate(-45deg);
}
.incx__col:last-child .incx__ul li::before{
  content:''; position:absolute; left:3px; top:.62em;
  width:9px; height:1.5px; background:var(--copper-lit);
}
@media (max-width:700px){
  .incx{ grid-template-columns:1fr; gap:28px; }
}

/* ══════════════════════════ STICKY CONTACT DOCK ══════════════════════════
   The two things a ready visitor wants. Fixed to the bottom of the viewport on
   phones, where the contact section is still a full scroll away. On desktop
   they hide — the contact block is already beside them, and a bar pinned to
   the bottom of a large screen only covers the footer's last line. */

.dock{
  position:fixed; z-index:60;
  left:0; right:0; bottom:0;
  display:none;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(20,24,28,.96) 62%, rgba(20,24,28,0));
  transform:translateY(115%);
  transition:transform .34s cubic-bezier(.2,.75,.2,1);
}
.dock.is-in{ transform:translateY(0); }

.dock__b{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:50%; min-height:52px;
  border-radius:2px;
  font:700 12.5px/1 var(--m); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
}
.dock__b svg{ width:20px; height:20px; fill:currentColor; flex:0 0 auto; }
/* the WhatsApp glyph needs two fills, so the inner mark is stroked out */
.dock__b--wa svg path:last-child{ fill:#0F766E; }
.dock__b--wa{ background:#25D366; color:#06301A; }
.dock__b--tel{ background:transparent; color:#E4EAEE; border:1px solid rgba(228,234,238,.32); }

@media (max-width:820px){
  .dock{ display:flex; gap:10px; }
  /* the dock is fixed, so the page needs to stop hiding content behind it */
  body{ padding-bottom:84px; }
  body.lb-open{ padding-bottom:0; }
}

@media print{
  .nav,.lb,.hero__cta,.form,.burger,.prog,.flow__bar{ display:none !important; }
  .dock{ display:none !important; }
  body{ background:#fff; color:#000; padding-bottom:0; }
  /* the estimate is the one thing worth printing, so keep it whole */
  .section--calc{ break-inside:avoid; }
  .tabs{ display:none; }
  .pane[hidden]{ display:block !important; }
}

/* ══════════════════════════ MAP ══════════════════════════
   Above the contact form, where it answers "where is it" without the
   visitor having to leave. Loaded lazily, so it costs nothing on first paint. */

.map{
  margin:0 0 26px;
  border:1px solid var(--marble-2);
  background:var(--marble-2);
  aspect-ratio:16/9; overflow:hidden;
}
.map iframe{ width:100%; height:100%; border:0; display:block; }
.cdl__map{ font:500 14px/1.3 var(--b); color:var(--copper); text-decoration:none; }
.cdl__map:hover{ text-decoration:underline; }