/* KERNE, the real site (17 Oct 2026). Ported from the approved Heartwood mock, round 3-5
   (brain/builds/2026-10-12-flooring-demo-mocks/round3/: shared/site.css, shared/heartwood.css, heartwood/motion.html).
   The mock is the spec: rules below are copied as they were; additions for the live estimator are at the end.
   Flat states only: no glows, no soft shadows. The quote and review pages keep their own /site.css. */
@font-face { font-family: "Gloock"; src: url("fonts/kerne-display.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/kit-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/kit-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/kit-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root{--bg:#ede6da;--ink:#16110d;--muted:#675b4e;--line:rgba(22,17,13,.13);--line-strong:rgba(22,17,13,.3);--ph:#2a2018;
 --btn-bg:#16110d;--btn-ink:#ede6da;--r:0px;--r-btn:999px;--r-img:0px;--sel:#16110d;--sel-ink:#ede6da;
 --hd-bg:#0e0b08;--hd-ink:#ede6da;--hd-line:rgba(237,230,218,.14);--hd-line-strong:rgba(237,230,218,.4);
 --panel:#16110d;--panel-ink:#ede6da;--panel-muted:#b3a593;--panel-line:rgba(237,230,218,.16);--tile-bg:#e4dccd;
 --ft-bg:#0e0b08;--ft-ink:#ede6da;--ft-muted:#a7998a;--ft-line:rgba(237,230,218,.16);
 --display:'Gloock',Georgia,serif;--display-w:400;--display-ls:-0.015em;--wm-ls:0.06em;--h-case:uppercase;--ui:'Hanken Grotesk',sans-serif;--mono:'IBM Plex Mono',monospace;}

/* ===== mock: shared/site.css (the parts this page uses) ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; font-variant-numeric: lining-nums; }
::selection { background: var(--ink); color: var(--bg); }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, address, fieldset, legend { margin: 0; padding: 0; font-style: normal; border: 0; min-width: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 400; }
button { font: inherit; color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 3px; }
.pad { padding-inline: clamp(16px, 3.2vw, 48px); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.disp { font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls); line-height: 0.9; text-transform: var(--h-case, none); }
.pic { position: relative; overflow: hidden; background: var(--ph); border-radius: var(--r-img, 0); }
.pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-light { font-size: 1.15em; line-height: 1; }
.cap { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; font-size: 13px; color: var(--muted); }

/* ---------- Buttons: pill, with the arrow in its own circle ---------- */
.btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--h); padding: 0 22px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; border: 1px solid var(--btn-bg); border-radius: var(--r-btn); background: var(--btn-bg); color: var(--btn-ink); cursor: pointer; transition: transform .16s cubic-bezier(.23,1,.32,1), background-color .2s ease; }
.btn:active { transform: scale(0.98); }
.btn--line { background: transparent; color: inherit; border-color: var(--line-strong); }
.btn--line .btn__i { background: var(--ink); color: var(--bg); }
.btn--line:hover { border-color: currentColor; }
.btn--big { --h: 60px; font-size: 15px; padding-inline: 28px; }
/* one CTA system: label left, the arrow in a circle snug at the right end, 5px from the pill's edge at every size.
   Stretched by a grid it stays label left, arrow right; never floating in the middle. Hover: only the arrow moves, flat. */
.btn--icon { justify-content: space-between; gap: 14px; padding: 0 5px 0 22px; }
.btn--big.btn--icon { padding-left: 28px; gap: 20px; }
.btn__i { flex: none; display: grid; place-items: center; width: calc(var(--h) - 12px); height: calc(var(--h) - 12px); border-radius: 50%; background: var(--btn-ink); color: var(--btn-bg); overflow: hidden; }
.btn__i .ph-light { display: block; font-size: calc((var(--h) - 12px) * .46); line-height: 1; transform: translate(.04em, -.02em); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) { .btn:hover .btn__i .ph-light { transform: translate(.2em, -.18em); } }
.chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; font-family: var(--mono); font-size: 13px; background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-btn); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--sel, var(--ink)); color: var(--sel-ink, var(--bg)); border-color: var(--sel, var(--ink)); }
.chip:disabled { color: var(--muted); border-style: dashed; text-decoration: line-through; cursor: not-allowed; }

/* ---------- Header ---------- */
.hd { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); height: 72px; background: var(--hd-bg); color: var(--hd-ink); border-bottom: 1px solid var(--hd-line); }
.wm { font-family: var(--display); font-weight: var(--display-w); font-size: 24px; line-height: 1; letter-spacing: var(--wm-ls, 0.04em); text-decoration: none; text-transform: var(--wm-case, uppercase); }
.nav { display: flex; gap: clamp(18px, 2.2vw, 32px); font-size: 14px; }
.nav a { text-decoration: none; padding-block: 6px; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-bottom-color: currentColor; }
.hd__r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hd .btn { --h: 42px; font-size: 13px; padding: 0 18px; }
.hd .btn--icon { padding: 0 5px 0 18px; }
.hd .btn--line { border-color: var(--hd-line-strong); }
.hd .btn:not(.btn--line), .dock .btn:not(.btn--line) { background: var(--hd-ink); color: var(--hd-bg); border-color: var(--hd-ink); }
.hd .btn:not(.btn--line) .btn__i { background: var(--hd-bg); color: var(--hd-ink); }
.lang { display: inline-flex; gap: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; margin-right: 6px; }
.lang a { padding: 6px 4px; text-decoration: none; opacity: 0.55; }
.lang a[aria-current] { opacity: 1; }
.switch { display: inline-flex; padding: 2px; border: 1px solid var(--hd-line-strong); border-radius: 999px; font-size: 12px; font-weight: 600; }
.switch a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; text-decoration: none; }
.switch a[aria-current] { background: var(--hd-ink); color: var(--hd-bg); }
/* the burger: two lines that become an X */
.burger { position: relative; width: 42px; height: 42px; flex: none; border: 1px solid var(--hd-line-strong); border-radius: 999px; background: none; cursor: pointer; color: inherit; }
.burger i { position: absolute; left: 13px; right: 13px; height: 1px; background: currentColor; transition: transform .45s cubic-bezier(.77,0,.175,1); }
.burger i:first-child { top: 17px; } .burger i:last-child { top: 23px; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-3px) rotate(-45deg); }
.dock { display: none; }

/* ---------- Sections ---------- */
.sec { padding-block: clamp(96px, 11vw, 176px); }
.h2 { font-family: var(--display); font-weight: var(--display-w); letter-spacing: var(--display-ls); font-size: clamp(48px, 6vw, 104px); line-height: 0.92; text-transform: var(--h-case, none); }
.lede { font-size: 18px; line-height: 1.6; max-width: 44ch; color: var(--muted); }
.top { display: grid; gap: 18px; padding-block: clamp(56px, 6vw, 96px) clamp(36px, 4vw, 56px); }
.top h1 { font-family: var(--display); font-weight: var(--display-w); font-size: clamp(56px, 7vw, 120px); line-height: 0.9; letter-spacing: var(--display-ls); text-transform: var(--h-case, none); }
.top p { color: var(--muted); max-width: 52ch; font-size: 17px; }

.fld { display: grid; gap: 10px; }
.lab { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.big-out { font-family: var(--display); font-weight: var(--display-w); font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--display-ls); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -11px; background: var(--sel, var(--ink)); border: 0; border-radius: 50%; }
.scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); }
.seg label { display: flex; align-items: center; justify-content: center; min-height: 42px; font-size: 14px; border-radius: var(--r-btn); cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg label:has(input:checked) { background: var(--sel, var(--ink)); color: var(--sel-ink, var(--bg)); }
.line { width: 100%; min-height: 50px; padding: 10px 0; font: inherit; font-size: 17px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; }
.line:focus { outline: none; border-bottom-width: 2px; }
.post { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: end; }
.post span { font-size: 14px; color: var(--muted); padding-bottom: 14px; }
.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.next li { display: grid; gap: 10px; align-content: start; padding: 20px 20px 0 0; }
.next li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.next b { font-family: var(--display); font-weight: var(--display-w); font-size: 24px; letter-spacing: var(--display-ls); line-height: 1.05; }
.next p { font-size: 14px; color: var(--muted); }
.next .mono { color: var(--muted); }
/* ---------- Footer: the estimate leads, contact is a quiet row ---------- */
.ft { position: relative; overflow: hidden; background: var(--ft-bg); color: var(--ft-ink); }
.ft__cta { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; align-items: end; gap: 32px 64px; padding-block: clamp(80px, 9vw, 140px) clamp(40px, 5vw, 72px); }
.ft__cta h2 { font-family: var(--display); font-weight: var(--display-w); font-size: clamp(48px, 5.6vw, 96px); line-height: 0.95; letter-spacing: var(--display-ls); text-transform: var(--h-case, none); }
.ft__go { display: grid; gap: 16px; justify-items: start; }
.ft__go .btn { background: var(--ft-ink); color: var(--ft-bg); border-color: var(--ft-ink); }
.ft__go .btn .btn__i { background: var(--ft-bg); color: var(--ft-ink); }
.ft__next { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--ft-line); padding-bottom: 4px; }
.ft__next b { font-weight: 600; }
.ft__word { position: relative; display: block; font-family: var(--display); font-weight: var(--display-w); font-size: clamp(110px, 23vw, 400px); line-height: 0.78; letter-spacing: var(--display-ls); white-space: nowrap; text-align: center; text-transform: var(--wm-case, uppercase); color: var(--ft-ink); }
.ft__floor { height: 1px; background: var(--ft-line); }
.ft__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding-block: 22px 26px; font-size: 13px; color: var(--ft-muted); }
.ft__row span { white-space: nowrap; }
.ft__row a { text-decoration: none; }

/* ---------- Phone ---------- */
@media (max-width: 1180px) { .nav { display: none; } }
@media (max-width: 900px) {
  .hd { height: 60px; gap: 10px; }
  .hd .btn, .lang { display: none; }
  .wm { font-size: 22px; }
  .switch a { padding: 0 10px; min-height: 30px; }
  body { padding-bottom: 72px; }
  body.nodock { padding-bottom: 0; }
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; padding: 10px 12px; background: var(--hd-bg); border-top: 1px solid var(--hd-line); }
  .dock .btn { --h: 48px; padding: 0 10px; font-size: 13px; }
  .dock .btn--line { color: var(--hd-ink); border-color: var(--hd-line-strong); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .est__hd { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 64px; }
  .est__sum span { display: none; }
  .s3 { grid-template-columns: 1fr; grid-template-areas: "plan" "ctl" "range"; padding-left: 0; }
  .range { grid-template-columns: 1fr; }
  .bk, .ok-hero { grid-template-columns: 1fr; }
  .tk { position: static; }
  .kind, .who, .prep, .three, .next { grid-template-columns: 1fr; }
  .next li, .next li + li { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .next li:first-child { border-top: 0; }
  .cal { grid-template-columns: 1fr; }
  .cal__m { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft__cta { grid-template-columns: 1fr; }
  .ft__row { flex-direction: column; }
  .ft__row span { white-space: normal; }
}
@media (max-width: 420px) { .post { grid-template-columns: 96px 1fr; } .times { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ===== mock: shared/heartwood.css ===== */

/* ---------- Header: the wordmark alone ---------- */
.wm { font-size: 25px; letter-spacing: 0.07em; padding-top: 2px; }

/* ---------- Hero ---------- */
.hero { position: relative; height: calc(100dvh - 72px); min-height: 640px; max-height: 960px; overflow: hidden; background: #0e0b08; color: #ede6da; }
.hero > .pic { position: absolute; inset: 0; background: #0e0b08; }
.hero > .pic img { opacity: .72; }
.hero__word { position: absolute; left: clamp(10px, 1.8vw, 28px); right: clamp(10px, 1.8vw, 28px); bottom: clamp(14px, 2vw, 30px); font-family: var(--display); font-size: clamp(60px, 27.5vw, 470px); line-height: .74; letter-spacing: -.02em; text-align: center; white-space: nowrap; text-transform: uppercase; }
.hero__side { position: absolute; right: clamp(16px, 3.2vw, 48px); top: clamp(28px, 4vw, 56px); width: min(300px, 34vw); font-size: 15px; line-height: 1.6; color: #d8ccbb; }

/* ---------- "Every board laid by hand" ---------- */
.ch { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr) minmax(0, .7fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.ch__l { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.term { display: grid; gap: 4px; }
.term b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; }
.term span { font-size: 13px; color: var(--muted); }
.ch__img { aspect-ratio: 4 / 5; }
.ch__r { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 28px; }
.ch__r p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--ink); max-width: 26ch; text-wrap: pretty; }
.btn--sm { --h: 40px; font-size: 13px; padding: 0 16px; }
.btn--sm.btn--icon { padding: 0 5px 0 16px; }

/* ---------- The floors we lay: four photographs from above ---------- */
.sc { display: grid; justify-items: center; gap: clamp(48px, 6vw, 88px); text-align: center; }
.sc__t { font-family: var(--display); font-size: clamp(64px, 8.4vw, 144px); line-height: .88; text-transform: uppercase; letter-spacing: -.02em; }
.pt { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); text-align: left; }
.pt__c { display: grid; grid-template-rows: auto 1fr; gap: 16px; color: inherit; text-decoration: none; }
.pt__c .pic { aspect-ratio: 4 / 5; }
.pt__c .pic img { transform: scale(1.001); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.pt__no { position: absolute; left: 14px; top: 12px; z-index: 1; font-family: var(--mono); font-size: 12px; color: #ede6da; }
.pt__m { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 6px; align-content: start; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.pt__m .glyph { grid-row: 1 / span 2; width: 34px; height: 34px; color: var(--ink); }
.pt__m b { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2vw, 32px); line-height: 1; text-transform: uppercase; letter-spacing: -.01em; }
.pt__m small { grid-column: 2 / span 2; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pt__m p { grid-column: 2 / span 2; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 30ch; padding-top: 6px; }
.pt__m .ph-light { grid-row: 1; grid-column: 3; font-size: 20px; opacity: 0; transform: translate(-6px, 6px); transition: opacity .25s ease, transform .35s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) {
  .pt__c:hover .pic img { transform: scale(1.05); }
  .pt__c:hover .pt__m .ph-light { opacity: 1; transform: none; }
}

/* ---------- Projects (pinned in the prototype) ---------- */
.proj { position: relative; height: min(100dvh, 920px); min-height: 640px; overflow: hidden; background: #0e0b08; color: #ede6da; }
.proj > .pic { position: absolute; inset: 0; }
.proj > .pic img { opacity: .64; }
.proj__in { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; padding-block: clamp(28px, 4vw, 56px); }
.proj__count { grid-column: 2; grid-row: 1; font-family: var(--mono); font-size: 14px; }
.proj__t { grid-row: 2; display: grid; gap: 14px; align-self: end; }
.proj__t h2 { font-family: var(--display); font-size: clamp(60px, 7.4vw, 128px); line-height: .88; text-transform: uppercase; }
.proj__t p { font-size: 14px; color: #d8ccbb; }
.proj__r { grid-row: 2; grid-column: 2; align-self: end; display: grid; gap: 14px; justify-items: end; }
.proj__r .btn { background: transparent; color: #ede6da; border-color: rgba(237, 230, 218, .45); }
.proj__r .btn .btn__i { background: #ede6da; color: #0e0b08; }
.bar { display: flex; gap: 6px; }
.bar i { width: 44px; height: 1px; background: rgba(237, 230, 218, .3); }
.bar i:first-child { background: #ede6da; }

/* ---------- "Sanded, oiled and looked after, room by room." ---------- */
.inl { display: grid; gap: clamp(6px, 1vw, 14px); overflow-x: clip; }
.inl p { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); font-family: var(--display); font-size: clamp(52px, 7.3vw, 128px); line-height: .9; text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; }
.inl p:nth-child(2) { justify-content: center; }
.inl p:nth-child(3) { justify-content: flex-end; }
.inl .pic { flex: none; width: clamp(96px, 13vw, 224px); aspect-ratio: 16 / 10; }

/* ---------- What will my floor cost? A small piece of the estimator ---------- */
.tz { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 80px); align-items: stretch; }
.tz__l { display: grid; grid-template-rows: auto auto; gap: 14px; align-content: start; }
.stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ph); }
.stage > .lay { position: absolute; inset: 0; overflow: hidden; }
.stage > .lay > span { position: absolute; inset: 0; display: block; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage__cap { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; font-size: 13px; color: var(--ink); }
.stage__cap span:last-child { color: var(--muted); }
.tones-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.tones-row button { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 8px 10px 0; background: none; border: 0; color: var(--muted); font-size: 14px; text-align: left; cursor: pointer; }
.tones-row button::before { content: ""; position: absolute; left: 0; right: 8px; top: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.77, 0, .175, 1); }
.tones-row button[aria-pressed="true"] { color: var(--ink); }
.tones-row button[aria-pressed="true"]::before { transform: scaleX(1); }
.sw { flex: none; width: 24px; height: 24px; object-fit: cover; }
.tz__r { display: grid; align-content: space-between; justify-items: stretch; gap: 32px; }
.tz__r > .btn { justify-self: start; }
.tz__steps { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tz__steps b { font-weight: 400; color: var(--ink); }
.tz__ctl { display: grid; gap: 12px; }
.tz__amt { font-family: var(--display); font-size: clamp(40px, 4vw, 68px); line-height: .95; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tz__note { display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--muted); }
.tz__note b { color: var(--ink); font-weight: 600; }

/* ---------- Footer: the K, large, and the estimate ---------- */
.ft__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 96px); align-items: end; padding-block: clamp(88px, 10vw, 160px) clamp(48px, 5vw, 80px); }
.ft__k { display: grid; gap: 22px; align-content: end; }
.ft__k .kmark { width: min(100%, 520px); height: auto; color: var(--ft-ink); margin-left: -6%; }
.ft__k p { font-family: var(--display); font-size: 22px; letter-spacing: .34em; line-height: 1; }
.ft__k small { display: block; margin-top: 10px; font-family: var(--ui); font-size: 13px; letter-spacing: 0; color: var(--ft-muted); }
.ft__r { display: grid; gap: clamp(32px, 4vw, 56px); align-content: end; }
.ft__r h2 { font-family: var(--display); font-size: clamp(48px, 5.4vw, 92px); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; }
.ft__next b + .ph-light { margin-left: 2px; }
.ft__next .nw { white-space: nowrap; }
.ft__go { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.ft__go .btn { background: var(--ft-ink); color: var(--ft-bg); border-color: var(--ft-ink); }
.ft__go .btn .btn__i { background: var(--ft-bg); color: var(--ft-ink); }
.ft__dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; padding-top: 24px; border-top: 1px solid var(--ft-line); font-size: 14px; color: #d8ccbb; }
.ft__dl dt { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ft-muted); margin-bottom: 6px; }
.ft__dl a { text-decoration: none; }
.ft__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; padding-block: 20px 26px; border-top: 1px solid var(--ft-line); font-size: 13px; color: var(--ft-muted); }

/* ---------- Menu ---------- */
.mn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100dvh - 72px); }
.mn__l { padding: clamp(24px, 3vw, 44px) clamp(16px, 3.2vw, 48px); display: grid; align-content: center; }
.mn__row { position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; min-height: clamp(62px, 8.4vh, 84px); border-bottom: 1px solid var(--line-strong); text-decoration: none; overflow: hidden; }
.mn__row:first-child { border-top: 1px solid var(--line-strong); }
.mn__row::before { content: ""; position: absolute; inset: 0; background: #e0d6c5; transform: scaleX(0); transform-origin: left; }
.mn__row > * { position: relative; }
.mn__row .mono { color: var(--muted); }
.mn__row b { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3.3vw, 54px); line-height: 1; text-transform: uppercase; }
.mn__tick { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: 11px; }
.mn__word { position: absolute; right: 0; top: 0; height: 40px; display: grid; place-items: center; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12px; letter-spacing: .04em; white-space: nowrap; opacity: 0; }
.mn__row[data-hover]::before { transform: scaleX(1); }
.mn__row[data-hover] b { transform: translateX(10px); }
.mn__row[data-hover] .mn__word { opacity: 1; }
.mn__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.mn__acts .btn { --h: 58px; justify-content: space-between; }
/* the right panel: the showroom, the next free visit, then contact */
.mn__r { background: #0e0b08; color: #ede6da; padding: clamp(24px, 3vw, 44px); display: grid; grid-template-rows: auto auto 1fr auto; gap: clamp(20px, 2.6vh, 32px); }
.mn__top { display: flex; justify-content: space-between; align-items: center; }
.mn__lock { display: inline-flex; align-items: center; gap: 14px; font-family: var(--display); font-size: 18px; letter-spacing: .3em; text-decoration: none; }
.mn__lock .kmark { width: 34px; height: 34px; color: #ede6da; }
.mn__close { color: #ede6da; border-color: rgba(237, 230, 218, .4); }
.mn__show { display: grid; gap: 14px; }
.mn__show .pic { aspect-ratio: 16 / 8.2; background: #2a2018; }
.mn__show figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
.mn__show figcaption b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.1; }
.mn__show figcaption span { color: #b3a593; white-space: nowrap; }
.mn__open::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #ede6da; vertical-align: 2px; }
.mn__next { display: grid; gap: 10px; align-content: center; padding-block: 8px; border-top: 1px solid rgba(237, 230, 218, .16); padding-top: clamp(18px, 2.4vh, 28px); }
.mn__next .lab { color: #a7998a; }
.mn__next a { display: flex; justify-content: space-between; align-items: end; gap: 24px; text-decoration: none; }
.mn__next b { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 3vw, 50px); line-height: .98; text-transform: uppercase; }
.mn__next .btn__i { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #ede6da; color: #0e0b08; font-size: 20px; }
.mn__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; font-size: 13px; color: #d8ccbb; border-top: 1px solid rgba(237, 230, 218, .16); padding-top: 20px; }
.mn__grid dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #a7998a; margin-bottom: 4px; }
.mn__m { display: none; }
.mn__phone { display: none; }

/* ---------- Estimator: after the reference, compact numbered rows, one open at a time ---------- */
.top--ex { padding-bottom: clamp(28px, 3vw, 44px); }
.ex { border-top: 1px solid var(--line-strong); }
.ex__s { border-bottom: 1px solid var(--line-strong); }
.ex__hd { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; }
.ex__n { font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ex__t { font-size: 17px; font-weight: 600; letter-spacing: .005em; transition: transform .35s cubic-bezier(.23, 1, .32, 1); }
.ex__sum { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.ex__sum img, .ex__sum .glyph { width: 24px; height: 24px; object-fit: cover; color: var(--ink); }
.ex__sum u { text-underline-offset: 4px; }
.ex__s[data-open] .ex__hd { cursor: default; }
.ex__s[data-open] .ex__n { color: var(--ink); }
.ex__s[data-open] .ex__sum { visibility: hidden; }
.ex__s[data-skip] .ex__hd { cursor: default; color: var(--muted); }
.ex__s[data-skip] .ex__sum u, .ex__s[data-skip] .ex__sum .glyph { display: none; }
@media (hover: hover) { .ex__s:not([data-open]):not([data-skip]) .ex__hd:hover .ex__t { transform: translateX(6px); } }
.ex__bd { display: none; padding: 8px 0 clamp(32px, 3.4vw, 48px) 88px; }
.ex__in { max-width: 1120px; }
.ex__s[data-open] .ex__bd { display: block; }
.ex__go { display: flex; justify-content: flex-end; align-items: center; gap: 24px; margin-top: clamp(24px, 2.4vw, 36px); }
.back { font-size: 14px; color: var(--muted); text-underline-offset: 4px; background: none; border: 0; padding: 8px 0; cursor: pointer; text-decoration: underline; }
.back:hover { color: var(--ink); }
.arw { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--ink); font-size: 18px; cursor: pointer; transition: opacity .2s ease, background-color .2s ease; }
.arw:hover { background: #e4dccd; }
.arw:disabled { opacity: .25; cursor: default; background: none; }
/* step 1: tone list | three pictures | one large photo */
.s1 { display: grid; grid-template-columns: minmax(220px, 260px) 76px minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.s1__l { display: grid; gap: 18px; }
.seg--sm label { min-height: 36px; font-size: 13px; }
.tone-nav { display: grid; justify-items: center; gap: 2px; }
.tones { display: grid; width: 100%; }
.tone { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; width: 100%; padding: 8px 10px 8px 8px; background: none; border: 0; color: var(--muted); text-align: left; cursor: pointer; transition: background-color .25s ease, color .2s ease; }
.tone img { width: 36px; height: 36px; object-fit: cover; }
.tone b { display: block; font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: inherit; }
.tone small { display: block; font-size: 12px; }
.tone[aria-pressed="true"] { background: #e4dccd; color: var(--ink); }
.tone:hover { color: var(--ink); }
.thumbs { display: grid; gap: 10px; padding-top: 2px; }
.thumbs button { display: block; aspect-ratio: 1; padding: 0; border: 0; background: var(--ph); cursor: pointer; outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .25s ease, opacity .25s ease; opacity: .7; }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button[aria-pressed="true"] { outline-color: var(--ink); opacity: 1; }
.thumbs button:hover { opacity: 1; }
.s1 .stage { aspect-ratio: 16 / 10; }
.s1__r .ex__go { margin-top: 18px; justify-content: space-between; }
.s1__r .stage__cap { display: none; }
.s1__r .ex__go::before { content: attr(data-cap); font-size: 13px; color: var(--muted); }
/* step 2: a carousel of pattern cards, dark solid glyphs */
.car { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: clamp(8px, 1.4vw, 20px); }
.car__win { overflow: hidden; }
.s2 { display: flex; gap: clamp(12px, 1.4vw, 20px); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.opt { flex: 0 0 calc((100% - 2 * clamp(12px, 1.4vw, 20px)) / 3); display: grid; gap: 16px; padding: clamp(18px, 2vw, 28px) clamp(16px, 1.6vw, 24px) 20px; background: transparent; border: 0; color: inherit; text-align: left; cursor: pointer; transition: background-color .3s ease; }
.opt__g { display: grid; place-items: center; aspect-ratio: 3 / 2; }
.opt__g .glyph { width: 46%; height: auto; aspect-ratio: 1; color: #3b2e24; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.opt__m { display: grid; gap: 4px; }
.opt__m b { font-weight: 600; font-size: 15px; }
.opt__m small { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.opt[aria-pressed="true"] { background: #e4dccd; }
@media (hover: hover) { .opt:hover .opt__g .glyph { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .s2 { transition: none; } }
/* step 3: a short form beside the range */
.s3x { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.s3x__ctl { display: grid; gap: 26px; max-width: 520px; }
.fld legend.lab { margin-bottom: 12px; }
.m2row { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.m2out { display: flex; align-items: baseline; gap: 8px; }
.m2out input { width: 3.2ch; font-family: var(--display); font-size: 40px; line-height: 1; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); text-align: right; padding: 0; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.m2out input::-webkit-outer-spin-button, .m2out input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m2out span { font-family: var(--display); font-size: 24px; }
.scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.rad { display: flex; flex-wrap: wrap; gap: 10px 40px; }
.rad label, .chks label { display: flex; align-items: center; gap: 12px; min-height: 32px; font-size: 15px; cursor: pointer; }
.rad input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.rad input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.rad input:checked::after { transform: scale(1); }
.chks { display: grid; gap: 4px; }
.chks > label > input, .chk input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--ink); display: grid; place-items: center; cursor: pointer; }
.chks > label > input::after, .chk input::after { content: ""; width: 9px; height: 5px; border: solid var(--bg); border-width: 0 0 1.5px 1.5px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.chks > label > input:checked, .chk input:checked { background: var(--ink); }
.chks > label > input:checked::after, .chk input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.chks label.off { opacity: .4; pointer-events: none; }
.chks #run { display: inline-block; width: 3.4ch; min-height: 0; padding: 0 2px; font-size: 15px; text-align: right; border-bottom-color: var(--line-strong); -moz-appearance: textfield; }
.chks #run::-webkit-outer-spin-button, .chks #run::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.post { display: grid; grid-template-columns: minmax(0, 200px) 1fr; align-items: end; gap: 20px; }
.post .lab { font-size: 12px; color: var(--ink); padding-bottom: 0; }
.post .post__ok { padding-bottom: 0; }
.post__ok { display: flex; gap: 8px; align-items: center; min-height: 50px; font-size: 13px; color: var(--muted); }
.post__ok::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.post__ok.out::before { background: transparent; border: 1px solid var(--ink); }
textarea.line { min-height: 50px; resize: vertical; font-family: inherit; }
.rng { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.6vw, 36px); background: var(--panel); color: var(--panel-ink); }
.rng .lab { color: var(--panel-muted); }
.rng__amt { white-space: nowrap; font-family: var(--display); font-size: clamp(40px, 4vw, 64px); line-height: .95; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rng__for { font-size: 14px; color: var(--panel-muted); }
.rng__tag { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 30px; padding: 0 14px; border: 1px solid rgba(237, 230, 218, .4); border-radius: 999px; font-size: 13px; font-weight: 600; }
.rng__note { font-size: 14px; line-height: 1.55; color: #d8ccbb; max-width: 46ch; }
.rng details { border-top: 1px solid var(--panel-line); margin-top: 4px; }
.rng summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.rng summary::-webkit-details-marker { display: none; }
.rng summary .ph-light { transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.rng details[open] summary .ph-light { transform: rotate(45deg); }
.rng dl { display: grid; }
.rng dl div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--panel-line); font-size: 13px; }
.rng dt { color: var(--panel-muted); }
.rng dt span { display: block; font-family: var(--mono); font-size: 11px; }
.rng dd { font-family: var(--mono); font-size: 12px; white-space: nowrap; text-align: right; }
/* step 4: the fields beside Signe */
.s4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.s4__f { display: grid; gap: 22px; max-width: 520px; }
.drop { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; padding: 18px 20px; border: 1px dashed var(--line-strong); cursor: pointer; }
.drop .ph-light { grid-row: span 2; font-size: 24px; }
.drop b { font-size: 15px; }
.drop small { font-size: 13px; color: var(--muted); }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--muted); }
.chk input { margin-top: 2px; }
.s4__note { font-size: 14px; color: var(--muted); max-width: 52ch; }
.s4__note b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.s4__who { display: grid; gap: 12px; justify-self: end; width: min(100%, 380px); }
.s4__who .pic { aspect-ratio: 4 / 5; }
.s4__who .pic img { object-position: 50% 30%; }
.s4__who p { font-family: var(--display); font-size: clamp(22px, 1.7vw, 28px); line-height: 1.05; text-transform: uppercase; }
.s4__who small { display: block; margin-top: 0; font-size: 14px; color: var(--muted); }

/* ---------- Phone ---------- */
@media (max-width: 900px) {
  .hero { height: auto; min-height: 0; }
  .hero > .pic { position: relative; inset: auto; height: 78vh; max-height: 680px; min-height: 520px; }
  .hero__side { left: 16px; right: 16px; width: auto; top: 24px; }
  .hero__word { font-size: 28vw; bottom: 16px; }
  .ch { grid-template-columns: 1fr; }
  .pt { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .pt__m { grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; }
  .pt__m .glyph { width: 26px; height: 26px; }
  .pt__m b { font-size: 18px; }
  .tz__amt { white-space: nowrap; font-size: 9vw; }
  .ft__next { flex-wrap: wrap; }
  .pt__m small { grid-column: 1 / -1; font-size: 11px; }
  .pt__m p, .pt__m .ph-light { display: none; }
  .proj { height: auto; min-height: 0; }
  .proj > .pic { position: relative; inset: auto; height: 640px; }
  .proj__in { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; }
  .proj__count { grid-column: 1; grid-row: 1; }
  .proj__t { grid-row: 3; }
  .proj__t h2 { font-size: 11vw; }
  .proj__r { grid-column: 1; grid-row: 4; justify-items: start; margin-top: 20px; }
  .inl p { font-size: 12.6vw; flex-wrap: wrap; white-space: normal; gap: 6px 10px; }
  .inl .pic { width: 22vw; }
  .inl p:nth-child(n) { justify-content: flex-start; }
  .tz { grid-template-columns: 1fr; }
  .tones-row button { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 12px; min-height: 76px; }
  .ft__grid { grid-template-columns: 1fr; }
  .ft__k .kmark { width: 62vw; }
  .ft__dl { grid-template-columns: 1fr; }
  .ft__base { flex-direction: column; }
  .mn { grid-template-columns: 1fr; min-height: 0; }
  .mn__r { display: none; }
  .mn__phone { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; }
  .mn__phone .kmark { width: 40px; height: 40px; }
  .mn__row { min-height: 64px; }
  .mn__row b { font-size: 30px; }
  .mn__acts { grid-template-columns: 1fr; }
  .mn__m { display: grid; gap: 18px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
  .mn__m .lab { color: var(--muted); }
  .mn__m b { display: block; margin-top: 6px; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
  .mn__m p { font-size: 14px; color: var(--muted); }
  .ex__hd { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 60px; gap: 10px; }
  .ex__sum span, .ex__sum u { display: none; }
  .ex__bd { padding-left: 0; }
  .s1 { grid-template-columns: 1fr; gap: 14px; }
  .s1__r { display: contents; }
  .s1__r .stage { order: -3; }
  .thumbs { order: -2; grid-template-columns: repeat(3, 64px); }
  .s1__r .ex__go { order: 2; margin-top: 4px; }
  .tone-nav .arw { display: none; }
  .tones { grid-template-columns: 1fr 1fr; gap: 4px; }
  .tone { grid-template-columns: 32px 1fr; gap: 10px; padding: 6px; }
  .tone img { width: 32px; height: 32px; }
  .tone b { font-size: 12px; }
  .tone small { display: none; }
  .car { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 4px; }
  .arw { width: 32px; height: 32px; }
  .opt { flex-basis: 100%; }
  .s3x, .s4 { grid-template-columns: 1fr; }
  .post { grid-template-columns: 1fr; gap: 0; }
  .post__ok { min-height: 36px; }
  .s4__who { grid-template-columns: 96px 1fr; align-items: end; order: -1; justify-self: stretch; width: 100%; }
  .s4__who .pic { grid-row: span 2; }
  .s4__who p { font-size: 20px; }
  .s4__who small { margin-top: 0; }
  .ex__go { justify-content: space-between; }
}
.mn__grid a { text-decoration: none; }
/* ===== mock: motion.html ===== */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
.rv{display:inline-block;will-change:transform}
.lm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-top:.06em;margin-top:-.06em}.lm .l{display:inline-block;will-change:transform}
.ln{display:block;overflow:hidden;padding-bottom:.04em}.ln>span{display:block;will-change:transform}
.door{position:relative;overflow:hidden}.door::before,.door::after{content:"";position:absolute;top:0;bottom:0;width:50.5%;background:var(--bg);z-index:1}
.door::before{left:0;transform:translateX(var(--dl,0))}.door::after{right:0;transform:translateX(var(--dr,0))}
/* loader: the K, then the screen parts on the K's seam */
#ld{position:fixed;inset:0;z-index:100;cursor:pointer;--S:clamp(112px,19vh,184px)}
#ld .half{position:absolute;top:0;bottom:0;overflow:hidden;background:#ede6da;will-change:transform}
#ld .half.l{left:0;width:calc(50% - var(--S) * 6 / 48)}
#ld .half.r{left:calc(50% - var(--S) * 6 / 48);right:0}
#ld .k{position:absolute;top:calc(50% - var(--S) / 2);width:var(--S);height:var(--S);color:#16110d}
#ld .half.l .k{left:calc(50vw - var(--S) / 2)}
#ld .half.r .k{left:calc(var(--S) * 6 / 48 - var(--S) / 2)}
#ld .k svg{width:100%;height:100%;overflow:hidden}
#ld .k polygon{transform-box:fill-box}
#ld .seam{position:absolute;left:calc(50% - var(--S) * 6 / 48);top:0;bottom:0;width:1px;margin-left:-.5px;background:#16110d;transform:scaleY(0);transform-origin:50% 0}
html:not(.done) body{background:#0e0b08}
/* the wordmark: one mask on the whole word, each letter rises from behind its baseline */
.hero__word.rise{overflow:clip;padding-block:.12em .05em;margin-block:-.12em -.05em}
.hero__word .c{display:inline-block;will-change:transform}
/* projects */
.proj__in .bar i{position:relative;overflow:hidden;background:rgba(237,230,218,.3)}.proj__in .bar i b{position:absolute;inset:0;background:#ede6da;transform:scaleX(0);transform-origin:left}
.pjs{position:absolute;inset:0}.pjs>.pic{position:absolute;inset:0;overflow:hidden;background:#0e0b08}.pjs img{opacity:.64}
.pjt{position:absolute;left:0;bottom:0;display:grid;gap:14px}.pjt h2{font-family:var(--display);font-size:clamp(60px,7.4vw,128px);line-height:.88;text-transform:uppercase}.pjt p{font-size:14px;color:#d8ccbb}
.pjts{grid-row:2;position:relative;min-height:2.2em;align-self:end}
.cnt2{display:inline-flex;gap:6px}.cnt2 .w{display:inline-block;height:1.2em;overflow:hidden;line-height:1.2}.cnt2 .w span{display:block}
@media (min-width:901px){.sc{height:calc(100dvh - 72px);min-height:0;align-content:center;gap:clamp(24px,4vh,48px)}.sc__t{font-size:clamp(48px,min(6.6vw,10.5vh),112px)}.sc .pt__c .pic{aspect-ratio:auto;height:min(42vh,calc((100vw - 2 * clamp(16px,3.2vw,48px) - 3 * clamp(14px,1.6vw,24px)) / 4 * 1.25))}.sc .pt__m p{max-width:none}}.wd{display:inline-block;white-space:nowrap}.sc__t{position:relative;z-index:3}.sc__t .lm{overflow:visible}
/* floors: a cover lifts off each photograph */
.pt__c .pic .cov{position:absolute;inset:-1px;background:var(--bg);z-index:2;transform-origin:50% 0}
/* the word chapter */
.inl .w{display:inline-block;overflow:hidden;padding-top:.06em;margin-top:-.06em;vertical-align:bottom}.inl .w>span{display:inline-block;will-change:transform}
.inl .pic img{will-change:transform}
/* menu */
.mo{position:fixed;left:0;right:0;top:72px;bottom:0;z-index:15;visibility:hidden;overflow:auto}
.mo__dim{position:fixed;inset:0;background:#000;opacity:0;z-index:-1}
.mo .mn{min-height:calc(100dvh - 72px)}.mo .mn__l{background:var(--bg)}
.mo .mn__l,.mo .mn__r{will-change:transform}
.mo .mn__row{border-bottom:0}.mo .mn__row:first-child{border-top:0}
.mo .mn__row .hl{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-strong);transform-origin:left}
.mo .mn__row:first-child .hl.t{top:0;bottom:auto}
.mo .mn__row::before{transition:transform .34s cubic-bezier(.23,1,.32,1)}.mo .mn__row b{transition:transform .34s cubic-bezier(.23,1,.32,1)}
.mo .mn__word{transition:opacity .2s ease,transform .2s cubic-bezier(.23,1,.32,1);transform:scale(.92);transform-origin:right center}
@media (hover:hover){.mo .mn__row:hover::before,.mo .mn__row.on::before{transform:scaleX(1)}.mo .mn__row:hover b,.mo .mn__row.on b{transform:translateX(10px)}.mo .mn__row:hover .mn__word,.mo .mn__row.on .mn__word{opacity:1;transform:none}}
.mo .mn__show .pic img{will-change:transform}
.ft__k .kmark polygon{transform-box:fill-box}
@media (max-width:900px){.mo{top:60px}.proj{height:min(100svh,720px)}.pjt h2{font-size:11vw}}
@media (prefers-reduced-motion:reduce){#ld{display:none}.door::before,.door::after,.pt__c .pic .cov{display:none}}

/* ===== the real site (17 Oct): what the mock had as inline styles, fonts or placeholders ===== */
[hidden] { display: none !important; }
:root { --err: #a3361c; }
/* the mock's Phosphor light icons, drawn inline (no icon font from a CDN): 256 grid, 12 stroke */
svg.ph-light { display: inline-block; width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; overflow: visible; }
svg.ph-light .dot { fill: currentColor; stroke: none; }
.tz__note svg.ph-light, .rng__tag svg.ph-light { transform: translateY(2px); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: 999px; font-size: 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.pjt:not(:first-child) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pjs > .pic:not(:first-child) { display: none; } }
.ft__base a { text-decoration: none; }
.ft__base a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* one action: the menu and the phone dock carry only "Get a price estimate" */
.mn__acts { grid-template-columns: 1fr; }
.mo .mn__close, .mn__phone .btn { cursor: pointer; }
@media (max-width: 900px) { .dock { grid-template-columns: 1fr; } }

/* ---------- the estimate chapter: its heading, how it works, then the four steps ---------- */
.ex-sec { scroll-margin-top: 72px; }
.top--ex h2 { font-family: var(--display); font-weight: var(--display-w); font-size: clamp(56px, 7vw, 120px); line-height: 0.9; letter-spacing: var(--display-ls); text-transform: var(--h-case, none); }
.top--ex h2:focus { outline: none; }
.how { margin-top: clamp(16px, 2vw, 28px); }
.how li { padding-top: 16px; }
.rooms { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 15px; color: var(--ink); }
.rooms #rooms { display: inline-block; width: 3.4ch; min-height: 0; padding: 0 2px; font-size: 15px; text-align: right; border-bottom-color: var(--line-strong); -moz-appearance: textfield; }
.rooms #rooms::-webkit-outer-spin-button, .rooms #rooms::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.opt-t { margin-left: 6px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--muted); }

/* step 4: the live request in the mock's line fields */
.s4form { display: block; }
.s4__f .field { gap: 6px; }
.s4__f .note { font-size: 13px; color: var(--muted); }
.err { font-size: 13.5px; color: var(--err); }
.err:empty { display: none; }
.field:has([aria-invalid="true"]) .line, .field:has([aria-invalid="true"]) .tel__cc { border-bottom-color: var(--err); }
.line[readonly] { color: var(--muted); border-bottom-style: dashed; }
select.line { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2316110d' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 12px no-repeat; }
.tel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: end; }
.tel .line, .tel__cc { height: 50px; min-height: 50px; }
.tel__cc { position: relative; display: flex; align-items: center; padding: 0 24px 0 0; border-bottom: 1px solid var(--ink); white-space: nowrap; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2316110d' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 12px no-repeat; }
.tel__cc:has(select:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.tel__cc select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; }
.tel__show { font-size: 17px; pointer-events: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ts:empty { display: none; }
.status { font-size: 14px; }
.status:empty { display: none; }
.status.is-err { color: var(--err); }
.s4__demo { font-size: 13px; }
/* the answer, and the gate when the page opened without a demo link */
.sent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; padding-top: 8px; }
.sent__l { display: grid; gap: 18px; align-content: start; max-width: 520px; }
.sent h3, .gate h3 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4vw, 64px); line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; }
.sent h3:focus { outline: none; }
.sent__l > p:not(.lab) { font-size: 16px; color: var(--ink); }
.sent .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 6px; }
.sent .acts .note { font-size: 13px; color: var(--muted); }
.gate { display: grid; gap: 16px; justify-items: start; max-width: 560px; padding-block: 8px clamp(32px, 3.4vw, 48px); }
.gate h3 { font-size: clamp(32px, 3vw, 48px); }
.gate p { color: var(--muted); }
@media (max-width: 900px) {
  .sent { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .how li, .how li + li { padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); }
  .how li:first-child { border-top: 0; }
  .sent .acts .btn { width: 100%; }
}
/* the privacy page */
.priv { padding-bottom: clamp(72px, 8vw, 128px); }
.priv__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(28px, 4vw, 72px); max-width: 1120px; border-top: 1px solid var(--line-strong); padding-top: 32px; }
.priv__body h2 { font-family: var(--display); font-size: clamp(24px, 2vw, 32px); line-height: 1; text-transform: uppercase; margin-bottom: 12px; }
.priv__body p { color: var(--muted); max-width: 52ch; }
.priv__body a { text-underline-offset: 4px; }
@media (max-width: 900px) { .priv__body { grid-template-columns: 1fr; } }
.mo:focus { outline: none; }
@media (max-width: 900px) {
  .dock { transition: transform .45s cubic-bezier(.23, 1, .32, 1); }
  .in-est .dock, .menu-open .dock { transform: translateY(110%); }
}