/* Koltuk Atölyesi: the measured page. Three inks (blade yellow, graduation black, decimeter red) on plaster.
   Fabric is the only other colour, because fabric is the product. */

@font-face { font-family: "Anybody"; src: url(../fonts/Anybody-var-latin.woff2) format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Anybody"; src: url(../fonts/Anybody-var-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Rethink Sans"; src: url(../fonts/RethinkSans-var-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rethink Sans"; src: url(../fonts/RethinkSans-var-latin-ext.woff2) format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --plaster: #f1eee7;
  --plaster-2: #e5e0d4;
  --plaster-3: #d8d1c2;
  --blade: #f3c316;
  --blade-2: #e7b400;
  --ink: #161513;
  --ink-2: #47433c;
  --case: #1d1c1a;
  --red: #c4221a;
  --red-soft: #f6d3cd;
  --crepe: #e6d6ad;
  --pencil: #5d5a55;
  --rule: 3px;
  --hair: 1.5px;
  --head: 56px;
  --display: "Anybody", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "Rethink Sans", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gut: clamp(1rem, 4vw, 3rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); scrollbar-color: var(--ink) var(--plaster-2); }
body { margin: 0; background: var(--plaster); color: var(--ink); font: 400 1.0625rem/1.6 var(--text); font-kerning: normal; }
::selection { background: var(--blade); color: var(--ink); }
input, textarea, select, button { font: inherit; color: inherit; }
input, textarea { caret-color: var(--red); }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--red); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--blade); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--plaster-2); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid var(--plaster-2); border-radius: 8px; }

/* numerals that measure */
.num, .readout__t td, .step__v, .cm input, .rub__count, .legtab td, .door__dl dd, .tape__list, .ptab td {
  font-family: var(--display); font-stretch: 78%; font-weight: 650; font-variant-numeric: tabular-nums lining-nums;
}

/* tag: a strip of masking tape with pencil writing */
.tag { display: inline-block; background: var(--crepe); color: var(--ink-2); font: 600 0.78rem/1.2 var(--text); padding: 0.32em 0.7em; transform: rotate(-1.2deg); }

/* ---------------- header: the tape blade ---------------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--head);
  display: flex; align-items: center; gap: 1.25rem; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  background-color: var(--blade);
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 10px),
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 50px),
    repeating-linear-gradient(90deg, var(--red) 0 2.5px, transparent 2.5px 100px);
  background-size: 100% 7px, 100% 12px, 100% 16px;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  border-bottom: var(--rule) solid var(--ink);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); flex: none; padding-top: 6px; }
.brand__mark { width: 40px; height: 29px; color: var(--case); }
.brand__name { font: 800 1.25rem/1 var(--display); font-stretch: 72%; letter-spacing: -0.005em; }
.top__nav { display: flex; gap: 0.15rem; margin-inline: auto; padding-top: 8px; }
.top__nav a { font: 600 0.92rem/1 var(--text); text-decoration: none; padding: 0.55rem 0.6rem; border-radius: 6px; position: relative; }
.top__nav a::after { content: ""; position: absolute; left: 50%; top: -4px; width: 2px; height: 9px; background: var(--ink); transform: translateX(-50%); }
.top__nav a:hover, .top__nav a[aria-current="true"] { background: var(--ink); color: var(--blade); }
.top__tools { display: flex; align-items: center; gap: 0.6rem; flex: none; padding-top: 6px; }
.lang { display: inline-flex; border: 2px solid var(--ink); border-radius: 7px; overflow: hidden; }
.lang__b { border: 0; background: transparent; padding: 0.3rem 0.5rem; font: 700 0.8rem/1 var(--text); cursor: pointer; }
.lang__b[aria-pressed="true"] { background: var(--ink); color: var(--blade); }
.still { border: 2px solid var(--ink); background: transparent; border-radius: 7px; padding: 0.3rem 0.6rem; font: 600 0.8rem/1.1 var(--text); cursor: pointer; }
.still[aria-pressed="true"] { background: var(--ink); color: var(--blade); }
.top__progress { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--rule) - 4px); height: 4px; pointer-events: none; }
.top__progress span { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; border-radius: 10px; padding: 0.8em 1.25em; font: 700 0.98rem/1.1 var(--text); text-decoration: none; cursor: pointer; border: 2px solid var(--ink); transition: background-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease); }
.btn--case { background: var(--case); color: var(--blade); position: relative; }
.btn--case::after { content: ""; width: 10px; height: 14px; border: 2.5px solid currentColor; border-left: 0; border-radius: 0 3px 3px 0; margin-left: 0.2em; }
.btn--case:hover { background: #000; transform: translateY(-1px); text-decoration: none; }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--blade); text-decoration: none; }
.btn--line[aria-pressed="true"] { background: var(--ink); color: var(--blade); }
.btn--big { font-size: 1.08rem; padding: 1em 1.6em; }
.top__cta { padding: 0.55em 0.95em; font-size: 0.9rem; }

/* ---------------- configurator (hero) ---------------- */
.cfg { position: relative; min-height: max(760px, 100svh); display: grid; grid-template-rows: 1fr auto; padding-top: var(--head); background: var(--plaster); }
/* the room: headline and readout on the wall, the front elevation and the plan drawn below them */
.cfg__room {
  position: relative; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 0.56fr); grid-template-rows: auto minmax(15rem, 1fr);
  grid-template-areas: "wall readout" "elev plan"; column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: 0.25rem;
  padding: clamp(1.25rem, 4vh, 3rem) var(--gut) 0.35rem;
}
.cfg__wall { grid-area: wall; max-width: 44rem; }
.cfg__h1 { font: 820 clamp(2.6rem, 5.6vw, 5.7rem)/0.9 var(--display); font-stretch: 62%; letter-spacing: -0.012em; }
.cfg__lede { margin-top: 1.1rem; max-width: 34rem; font-size: 1.04rem; color: var(--ink-2); }
.cfg__elev, .cfg__plan { position: relative; min-width: 0; min-height: 0; }
.cfg__elev { grid-area: elev; }
.cfg__plan { grid-area: plan; }
.cfg__elev .draw, .cfg__plan .draw { position: absolute; inset: 0; }

.readout { grid-area: readout; justify-self: end; align-self: start; width: 17.5rem; background: var(--plaster); border: var(--rule) solid var(--ink); border-radius: 12px; padding: 0.7rem 0.9rem 0.6rem; }
.readout__title { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font: 800 1rem/1.1 var(--display); font-stretch: 75%; margin-bottom: 0.35rem; }
.readout__t { width: 100%; border-collapse: collapse; }
.readout__t th { text-align: left; font: 500 0.84rem/1.2 var(--text); color: var(--ink-2); padding: 0.32rem 0; border-top: var(--hair) solid var(--plaster-3); }
.readout__t td { text-align: right; font-size: 1.08rem; padding: 0.32rem 0; border-top: var(--hair) solid var(--plaster-3); min-width: 9ch; white-space: nowrap; }
.readout__fit td { color: var(--ink); }
.readout__fit.is-bad td { color: var(--red); font-weight: 750; }
.readout__t tr[hidden] { display: none; }

/* drawings (configurator and cutaway): sizes in screen pixels; --u is one pixel in drawing units */
.draw { display: block; width: 100%; height: 100%; overflow: visible; --u: 1px; }
.draw text { font-family: var(--display); font-stretch: 80%; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; font-size: calc(var(--u) * 12); fill: var(--ink); }
.draw .fab { stroke: none; }
.draw .ol { fill: none; stroke: var(--ink); stroke-width: calc(var(--u) * 1.15); stroke-linejoin: round; }
.draw .ol--red { stroke: var(--red); stroke-width: calc(var(--u) * 1.8); }
.draw .sh-base { fill: var(--ink); fill-opacity: 0.2; }
.draw .sh-back { fill: var(--ink); fill-opacity: 0.1; }
.draw .sh-side { fill: var(--ink); fill-opacity: 0.16; }
.draw .hz-wash { fill: var(--red-soft); fill-opacity: 0.55; }
.draw .hz-line { fill: var(--red); fill-opacity: 0.72; }
.draw .leg { stroke: var(--ink); stroke-width: var(--u); stroke-linejoin: round; }
.draw .leg--oak { fill: #c99e6c; }
.draw .leg--walnut { fill: #6b4529; }
.draw .leg--metal { fill: #262523; }
.draw .leg--plinth { fill: #2a2724; }
.draw .leg-gr { fill: none; stroke: var(--ink); stroke-opacity: 0.45; stroke-width: calc(var(--u) * 0.8); }
.draw .leg-gr--lt { stroke: #e9d3b8; stroke-opacity: 0.5; }
.draw .poche { fill: var(--ink); }
.draw .e-skirt { fill: #fbf9f4; stroke: var(--ink); stroke-width: var(--u); }
.draw .e-floor { stroke: var(--ink); stroke-width: calc(var(--u) * 2.5); }
.draw .pencil { fill: none; stroke: var(--pencil); stroke-width: calc(var(--u) * 1.4); stroke-linecap: round; }
.draw .pencil--plan { stroke: var(--red); stroke-width: calc(var(--u) * 2.2); }
.draw .pencil-t { fill: var(--pencil); font-weight: 600; font-size: calc(var(--u) * 11.5); }
.draw .tp-blade { fill: var(--blade); stroke: var(--ink); stroke-width: var(--u); }
.draw .tp-tick { stroke: var(--ink); stroke-width: var(--u); }
.draw .tp-n { fill: var(--red); font-size: calc(var(--u) * 9.5); font-weight: 760; }
.draw .tp-n--m { fill: var(--ink); }
.draw .tp-hook { fill: none; stroke: var(--case); stroke-width: calc(var(--u) * 2.6); stroke-linejoin: round; }
.draw .tp-case { fill: var(--case); }
.draw .tp-dial { fill: none; stroke: var(--blade); stroke-width: calc(var(--u) * 2.2); }
.draw .tp-read { stroke: var(--red); stroke-width: calc(var(--u) * 2); }
.draw .dm path { fill: none; stroke: var(--ink); stroke-width: var(--u); }
.draw .tg rect { fill: var(--ink); }
.draw .tg--tape text { fill: var(--blade); }
.draw .tg--red rect { fill: var(--red); }
.draw .tg--red text { fill: #fff; }

/* dock: a yellow tape blade along the floor */
.dock {
  position: relative; z-index: 2; background: var(--blade); border-top: var(--rule) solid var(--ink);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 1.5rem;
  padding: 0 var(--gut) 1rem;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 10px), repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 50px);
  background-size: 100% 6px, 100% 11px; background-repeat: no-repeat;
}
.dock__tabs { grid-column: 1 / -1; display: flex; gap: 0.25rem; padding-top: 16px; overflow-x: auto; scrollbar-width: none; }
.dock__tabs [role="tab"] { flex: none; border: 2px solid transparent; background: transparent; padding: 0.42rem 0.8rem; border-radius: 8px 8px 0 0; font: 700 0.95rem/1 var(--text); cursor: pointer; }
.dock__tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--blade); }
.dock__tabs [role="tab"]:hover { border-color: var(--ink); }
.dock__body { border-top: 2px solid var(--ink); padding-top: 0.75rem; min-height: 5.4rem; min-width: 0; }
.dock__cta { align-self: end; margin-bottom: 0.15rem; }
.pan { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.4rem; }
.pan[hidden] { display: none; }
.pan__more { font-weight: 600; font-size: 0.9rem; align-self: center; }
[data-show][hidden] { display: none !important; }

/* segmented choice: graduations on a rule */
.seg { border: 0; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; align-items: stretch; }
.seg legend { float: left; width: 100%; font: 600 0.78rem/1.2 var(--text); color: var(--ink-2); margin-bottom: 0.3rem; padding: 0; }
.seg label { position: relative; display: inline-flex; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label span { display: inline-flex; align-items: center; min-height: 38px; padding: 0.35rem 0.75rem; border: 2px solid var(--ink); margin-left: -2px; font: 600 0.92rem/1.1 var(--text); background: color-mix(in srgb, var(--plaster) 55%, transparent); }
.seg label:first-of-type span { border-radius: 8px 0 0 8px; margin-left: 0; }
.seg label:last-of-type span { border-radius: 0 8px 8px 0; }
.seg input:checked + span { background: var(--ink); color: var(--blade); }
.seg input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; position: relative; z-index: 1; }
.seg input:hover + span { background: var(--plaster); }
.seg input:checked:hover + span { background: var(--ink); }
.seg--wide label span { min-width: 9.5rem; }

/* stepper */
.step { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 0; }
.step__l { grid-column: 1 / -1; font: 600 0.78rem/1.2 var(--text); color: var(--ink-2); margin-bottom: 0.3rem; }
.step { grid-template-columns: 38px 3.2rem 38px; }
.step__b { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--case); color: var(--blade); cursor: pointer; }
.step__b:first-of-type { border-radius: 8px 0 0 8px; }
.step__b:last-of-type { border-radius: 0 8px 8px 0; }
.step__b svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.step__b:disabled { background: var(--plaster-2); color: var(--ink-2); cursor: not-allowed; opacity: 0.6; }
.step__v { display: grid; place-items: center; border-block: 2px solid var(--ink); background: var(--plaster); font-size: 1.35rem; height: 38px; }

/* centimetre field */
.cm { display: inline-grid; grid-template-columns: 1fr auto; align-items: end; min-width: 8.5rem; }
.cm > span:first-child { grid-column: 1 / -1; font: 600 0.78rem/1.2 var(--text); color: var(--ink-2); margin-bottom: 0.3rem; }
.cm input { width: 100%; min-width: 0; border: 2px solid var(--ink); border-right: 0; border-radius: 8px 0 0 8px; background: var(--plaster); padding: 0.32rem 0.55rem; font-size: 1.2rem; height: 38px; appearance: textfield; -moz-appearance: textfield; }
.cm input::-webkit-outer-spin-button, .cm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cm__u { height: 38px; display: grid; place-items: center; padding: 0 0.55rem; border: 2px solid var(--ink); border-radius: 0 8px 8px 0; background: var(--ink); color: var(--blade); font: 700 0.85rem/1 var(--display); font-stretch: 80%; }
.cm input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.cm.is-bad input { border-color: var(--red); background: var(--red-soft); }

/* fabric tongues (dock) */
.tongues { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tongues label { position: relative; display: grid; justify-items: center; gap: 0.3rem; font: 600 0.8rem/1.1 var(--text); cursor: pointer; }
.tongues input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tongue { width: 54px; height: 50px; border-radius: 4px 4px 22px 22px; background-size: 200%; background-position: center; border: 2px solid var(--ink); transition: transform 0.25s var(--ease); }
.tongues input:checked + .tongue { transform: translateY(-5px); box-shadow: 0 6px 10px -4px rgba(22, 21, 19, 0.5); outline: 3px solid var(--ink); outline-offset: 1px; }
.tongues input:focus-visible + .tongue { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------------- sections ---------------- */
.sec { position: relative; padding-block: clamp(5rem, 9vw, 8.5rem); }
.sec__in { max-width: 80rem; margin-inline: auto; padding-inline: max(16px, var(--gut)); }
.h2 { font: 820 clamp(2.3rem, 4.8vw, 4.6rem)/0.94 var(--display); font-stretch: 66%; letter-spacing: -0.01em; max-width: 20ch; }
.lede { margin-top: 1rem; max-width: 42rem; font-size: 1.1rem; color: var(--ink-2); }
.note { margin-top: 2rem; max-width: 62rem; font-size: 0.95rem; color: var(--ink-2); border-top: var(--rule) solid var(--ink); padding-top: 1rem; }
h3 { font: 780 1.35rem/1.05 var(--display); font-stretch: 78%; }

/* plan drawings */
.plan { width: 100%; height: auto; overflow: visible; }
.plan__wall { fill: var(--ink); }
.plan__m rect { fill: var(--plaster-2); stroke: var(--ink); stroke-width: 2; }
.plan__m line { stroke: var(--ink); stroke-width: 1.3; }
.plan__m.is-red rect { fill: var(--red-soft); stroke: var(--red); stroke-width: 3; }
.plan__m.is-red line { stroke: var(--red); }
.plan__dim line { stroke: var(--ink); stroke-width: 1.4; }
.plan__dim text { font: 700 15px var(--display); font-stretch: 80%; fill: var(--ink); }
.plan__tape { fill: none; stroke: var(--crepe); stroke-width: 9; stroke-linejoin: miter; }
.plan__pt { fill: var(--ink); }
.plan__ptl { font: 800 15px var(--display); font-stretch: 80%; fill: var(--ink); }
.plan__len { font: 700 13px var(--display); font-stretch: 80%; fill: var(--ink-2); }

/* fit: the yellow bay */
.fit { background: var(--blade); border-block: var(--rule) solid var(--ink); }
.fit .lede, .fit .note { color: var(--ink); }
.fit__grid { margin-top: 2.6rem; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: start; }
.fit__form { display: grid; gap: 1.4rem; }
.fit__set { border: 0; border-top: var(--rule) solid var(--ink); margin: 0; padding: 0.8rem 0 0; display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; }
.fit__set legend { font: 780 1.2rem/1 var(--display); font-stretch: 78%; padding: 0 0 0.6rem; float: left; width: 100%; }
.fit__out { background: var(--plaster); border: var(--rule) solid var(--ink); border-radius: 14px; padding: 1.2rem; min-width: 0; }
.fit__plan { max-width: 100%; }
.fit__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.fit__list li { position: relative; padding: 0.5rem 0 0.5rem 1.9rem; border-top: var(--hair) solid var(--plaster-3); font-size: 0.98rem; }
.fit__list li::before { content: ""; position: absolute; left: 0.15rem; top: 0.72rem; width: 1.1rem; height: 0.85rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M2 7l5 5L16 2' fill='none' stroke='%23161513' stroke-width='3'/%3E%3C/svg%3E") no-repeat center / contain; }
.fit__list li.is-bad { color: var(--red); font-weight: 600; }
.fit__list li.is-bad::before { width: 1rem; height: 3px; border: 0; background: var(--red); transform: none; top: 1rem; box-shadow: none; }
.fit__list li.is-off::before { width: 1rem; height: 3px; border: 0; background: var(--ink-2); transform: none; top: 1rem; }

/* door scene */
.door { background: var(--plaster); }
.door__pin { max-width: 80rem; margin-inline: auto; padding-inline: max(16px, var(--gut)); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem; align-items: center; }
.door__text p { margin-top: 1rem; max-width: 36rem; color: var(--ink-2); }
.door__dl { margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: 0; border-top: var(--rule) solid var(--ink); justify-content: start; }
.door__dl div { padding: 0.6rem 1.4rem 0 0; }
.door__dl dt { font: 600 0.8rem/1.2 var(--text); color: var(--ink-2); }
.door__dl dd { margin: 0.2rem 0 0; font-size: 1.5rem; }
.door__verdict { margin-top: 1.2rem !important; font: 780 1.5rem/1.1 var(--display) !important; font-stretch: 78% !important; color: var(--ink) !important; }
.door__verdict.is-bad { color: var(--red) !important; }
.door__svg { width: 100%; height: auto; }
.d-wall { fill: var(--plaster-2); }
.d-open { fill: var(--plaster); stroke: var(--ink); stroke-width: 3; }
.d-jamb { fill: var(--ink); }
.d-floor { stroke: var(--ink); stroke-width: 3; }
.d-mod { fill: var(--fab, #6d7d5a); stroke: var(--ink); stroke-width: 2.5; }
.d-mod.is-bad { fill: var(--red-soft); stroke: var(--red); }
.d-dim line, .d-dim path { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.d-dim text, .d-txt { font: 700 15px var(--display); font-stretch: 80%; fill: var(--ink); }
.d-cab { fill: none; stroke: var(--ink); stroke-width: 3; }
.d-ghost { fill: none; stroke: var(--pencil); stroke-width: 1.5; stroke-dasharray: 5 5; }

/* inside */
.inside { background: var(--case); color: var(--plaster); }
.inside .lede { color: #cfc9bd; }
.inside__pin { max-width: 80rem; margin-inline: auto; padding-inline: max(16px, var(--gut)); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); grid-template-areas: "head list" "stage list" "tag list"; gap: 1.2rem 3rem; }
.inside__head { grid-area: head; }
.inside__stage { grid-area: stage; position: relative; aspect-ratio: 4 / 3; max-width: 100%; max-height: calc(100svh - var(--head) - 18rem); min-height: 22rem; background: var(--plaster); border-radius: 14px; }
.inside__svg { position: absolute; inset: 0; }
/* the cutaway: materials, linework, leaders */
.draw .cf { opacity: var(--fill, 1); }
.draw .ln { fill: none; stroke: var(--ink); stroke-width: calc(var(--u) * 1.1); stroke-linejoin: round; stroke-linecap: round; }
.draw .ln--fine { stroke-width: calc(var(--u) * 0.75); stroke-opacity: 0.7; }
.draw .gr { stroke: #6f4f2c; stroke-width: calc(var(--u) * 0.75); stroke-opacity: 0.8; }
.draw .jt { stroke: #6e5126; stroke-width: calc(var(--u) * 0.6); stroke-opacity: 0.6; }
.draw .fb { stroke: #a9a193; stroke-width: calc(var(--u) * 0.8); }
.draw .m-wood-top { fill: #e6cb9f; } .draw .m-wood-front { fill: #d6b27e; } .draw .m-wood-right { fill: #c49b65; }
.draw .m-walnut-top { fill: #8a5d3b; } .draw .m-walnut-front { fill: #6b4529; }
.draw .m-metal-top { fill: #55524d; } .draw .m-metal-front { fill: #262523; }
.draw .m-plinth-top { fill: #403b35; } .draw .m-plinth-front { fill: #2a2724; } .draw .m-plinth-right { fill: #1f1c19; }
.draw .m-foam-top { fill: var(--blade); } .draw .m-foam-front { fill: var(--blade-2); } .draw .m-foam-right { fill: #d9a600; }
.draw .m-fibre-top { fill: #fbfaf6; } .draw .m-fibre-front { fill: #eeeae1; } .draw .m-fibre-right { fill: #e2dccf; }
.draw .m-jute-top { fill: #caa468; }
.draw .sh-top { fill: none; } .draw .sh-front { fill: var(--ink); fill-opacity: 0.1; } .draw .sh-right { fill: var(--ink); fill-opacity: 0.24; }
.draw .dot { fill: #8f6a00; fill-opacity: 0.38; }
.draw .tack { fill: #3b352c; }
.draw .c-hollow { fill: var(--ink); fill-opacity: calc(var(--hollow, 1) * 0.28); }
.draw .c-lead { fill: none; stroke: var(--ink); stroke-width: var(--u); }
.draw .c-dot { fill: var(--red); }
.draw .c-ax { fill: none; stroke: var(--red); stroke-width: var(--u); stroke-dasharray: calc(var(--u) * 8) calc(var(--u) * 3) calc(var(--u) * 1.5) calc(var(--u) * 3); }
.draw .c-lab rect { fill: transparent; }
.draw .c-lab text { font-size: calc(var(--u) * 13.5); font-weight: 760; }
.draw .c-lab.is-on rect { fill: var(--blade); }
.layers { grid-area: list; list-style: none; margin: 0; padding: 0; align-self: center; display: grid; gap: 0; }
.layers li { border-top: 2px solid #4a463f; padding: 0.7rem 0; transition: color 0.3s var(--ease); }
.layers li p { margin-top: 0.3rem; color: #cfc9bd; font-size: 0.95rem; line-height: 1.5; }
.layers li h3 { color: var(--plaster); }
.layers li.is-on h3 { color: var(--blade); }
.inside__tag { grid-area: tag; justify-self: start; }

/* modules */
.bays { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--rule) solid var(--ink); border-radius: 14px; overflow: hidden; }
.bay2 { padding: 1.4rem 1.2rem 1.4rem; border-left: var(--rule) solid var(--ink); display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.6rem; }
.bay2:first-child { border-left: 0; }
.bay2__svg { width: 100%; max-width: 220px; height: auto; margin-bottom: 0.4rem; }
.bay2__svg .m { fill: var(--blade); stroke: var(--ink); stroke-width: 2.5; }
.bay2__svg .m2 { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.bay2__svg .dl path { stroke: var(--ink); stroke-width: 1.3; fill: none; }
.bay2__svg text { font: 700 13px var(--display); font-stretch: 80%; fill: var(--ink); text-anchor: middle; }
.bay2 p { color: var(--ink-2); font-size: 0.98rem; }
.bay2 .btn { justify-self: start; font-size: 0.9rem; padding: 0.6em 0.95em; }

.mods__now { margin-top: 2rem; display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.mods__nowl { font: 780 1.2rem/1.1 var(--display); font-stretch: 78%; }
.mods__plan { max-width: 28rem; }
.rooms { background: var(--plaster); }
.rooms__grid { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.room { min-width: 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.6rem; border-top: var(--rule) solid var(--ink); padding-top: 1.2rem; }
.room__plan { background: var(--plaster-2); border-radius: 14px; padding: 1rem; aspect-ratio: 4 / 3; display: flex; align-items: center; min-width: 0; max-width: 100%; }
.room__plan .plan { max-height: 100%; }
.room p { color: var(--ink-2); font-size: 0.98rem; }
.room .btn { justify-self: start; }
@keyframes flip { from { transform: perspective(200px) rotateX(-70deg); opacity: 0.2; } to { transform: none; opacity: 1; } }
.anim .flip { animation: flip 0.32s var(--ease); display: table-cell; }
.anim .legtab td.flip, .anim .ptab td.flip { display: table-cell; }

/* measure: wall elevation */
.measure { background: var(--plaster-2); overflow: hidden; }
.measure__pin { position: relative; }
.measure__head { max-width: 80rem; margin-inline: auto; padding-inline: max(16px, var(--gut)); }
.measure__track { position: relative; margin-top: 2.4rem; padding-inline: max(16px, var(--gut)); }
.measure__wall { width: 100%; height: auto; }
.w-plaster { fill: var(--plaster); } .w-skirt { fill: #fbf9f4; stroke: var(--ink); stroke-width: 2; } .w-floor { fill: var(--plaster-3); }
.w-corner { fill: var(--plaster-3); }
.w-socket rect, .w-switch rect { fill: #fff; stroke: var(--ink); stroke-width: 2.5; } .w-socket circle { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.w-rad rect { fill: #fbfaf7; stroke: var(--ink); stroke-width: 2.5; } .w-rad path { stroke: var(--ink); stroke-width: 1.5; }
.w-win rect { fill: #dfe6e8; stroke: var(--ink); stroke-width: 3; } .w-win path { stroke: var(--ink); stroke-width: 3; } .w-win .w-sill { fill: #fbf9f4; }
.w-door rect { fill: #e8e2d6; stroke: var(--ink); stroke-width: 2.5; } .w-door .w-jamb { fill: var(--ink); }
#ms-blade { fill: var(--blade); stroke: var(--ink); stroke-width: 1.5; }
.w-case { fill: var(--case); }
.w-marks path { stroke: var(--red); stroke-width: 3; }
.w-skirt-mark { fill: none; stroke: var(--red); stroke-width: 3; }
.measure__stops { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.4rem 2rem; }
.measure__stops li { border-top: var(--rule) solid var(--ink); padding-top: 0.75rem; }
.anim .measure__stops li.is-on { border-top-color: var(--red); }
.measure__stops p { margin-top: 0.4rem; color: var(--ink-2); font-size: 0.98rem; }

/* tape plan */
.tape { background: var(--plaster); }
.tape__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; }
.tape__text p { margin-top: 1rem; color: var(--ink-2); max-width: 36rem; }
.tape__list { list-style: none; margin: 1.4rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.5rem; font-size: 1.2rem; max-width: 28rem; }
.tape__list li { border-bottom: var(--hair) solid var(--plaster-3); padding: 0.2rem 0; }
.tape__status { min-height: 1.4em; margin-top: 0.5rem !important; font-size: 0.92rem; }
.tape__plan { background: var(--plaster-2); border-radius: 14px; padding: 1.4rem; min-width: 0; }

/* fabrics: the swatch book */
.fabrics { background: var(--plaster-2); }
.book { border: 0; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9rem; }
.leaf { position: relative; display: grid; grid-template-rows: 12rem auto; background: #fbfaf6; border: 2px solid var(--ink); border-radius: 6px 6px 14px 14px; overflow: hidden; cursor: pointer; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.leaf input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.leaf__sw { background-size: 150%; background-position: center; border-bottom: 2px solid var(--ink); }
.leaf__label { display: grid; gap: 0.4rem; padding: 0.75rem 0.8rem 0.9rem; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
.leaf__label strong { font: 780 1.2rem/1 var(--display); font-stretch: 78%; color: var(--ink); }
.leaf__code { font: 650 0.8rem/1.2 var(--display); font-stretch: 85%; color: var(--ink); border-top: var(--hair) solid var(--plaster-3); padding-top: 0.4rem; }
.leaf:hover { transform: translateY(-4px); }
.leaf:has(input:checked) { transform: translateY(-10px); box-shadow: 0 14px 22px -12px rgba(22, 21, 19, 0.55); outline: 3px solid var(--ink); }
.leaf:has(input:checked) .leaf__label strong { color: var(--ink); text-decoration: underline 3px var(--blade-2); text-underline-offset: 0.2em; }
.leaf:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 3px; }

/* martindale */
.rub { background: var(--plaster); }
.rub__pin { max-width: 80rem; margin-inline: auto; padding-inline: max(16px, var(--gut)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.rub__art { position: relative; }
.rub__art canvas { width: 100%; max-width: 560px; aspect-ratio: 1; height: auto; background: var(--plaster-2); border-radius: 50%; border: var(--rule) solid var(--ink); }
.rub__count { margin-top: 1rem; font-size: 2.6rem; line-height: 1; }
.rub__count span + span { font: 600 1rem var(--text); color: var(--ink-2); }
.rub__tag { margin-top: 0.8rem; }
.rub__steps { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1rem; }
.rub__steps li { border-top: var(--hair) solid var(--plaster-3); padding-top: 0.7rem; }
.rub__steps p { margin-top: 0.3rem; color: var(--ink-2); font-size: 0.98rem; }
.label { margin: 1.8rem 0 0; background: #fbfaf6; border: 2px solid var(--ink); border-radius: 12px; padding: 0.4rem 1rem; display: grid; }
.label div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: 0.5rem 0; border-top: var(--hair) solid var(--plaster-3); }
.label div:first-child { border-top: 0; }
.label dt { font: 780 1rem/1.2 var(--display); font-stretch: 80%; }
.label dd { margin: 0; font-size: 0.92rem; color: var(--ink-2); }

/* legs */
.legs { background: var(--plaster-2); }
.legset { border: 0; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: var(--rule) solid var(--ink); border-radius: 14px; overflow: hidden; }
.legopt { position: relative; display: grid; gap: 0.25rem; padding: 1.2rem; border-left: var(--rule) solid var(--ink); background: var(--plaster); cursor: pointer; }
.legopt:first-of-type { border-left: 0; }
.legopt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.legopt svg { width: 100%; max-width: 130px; height: auto; margin-bottom: 0.4rem; }
.legopt strong { font: 780 1.3rem/1 var(--display); font-stretch: 78%; }
.legopt span { font-size: 0.92rem; color: var(--ink-2); }
.legopt:has(input:checked) { background: var(--blade); }
.legopt:has(input:checked) span { color: var(--ink); }
.legopt:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: -6px; }
.lg-body { fill: var(--plaster-3); stroke: var(--ink); stroke-width: 2; }
.lg-oak, .lg-wal, .lg-pl { stroke: var(--ink); stroke-width: 2; } .lg-oak { fill: #c99e6c; } .lg-wal { fill: #6b4529; } .lg-pl { fill: #2a2724; }
.lg-met { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; fill: none; }
.legopt .dl { stroke: var(--red); stroke-width: 2; fill: none; }
.legtab { margin-top: 1.6rem; border-collapse: collapse; min-width: min(26rem, 100%); }
.legtab th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 0.45rem 2rem 0.45rem 0; border-bottom: var(--hair) solid var(--plaster-3); }
.legtab td { font-size: 1.4rem; text-align: right; border-bottom: var(--hair) solid var(--plaster-3); }

/* process along a tape */
.process { background: var(--plaster); }
.steps { list-style: none; margin: 3rem 0 0; padding: 2.6rem 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background-color: var(--blade); border: 1.5px solid var(--ink); background-image: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 12px), repeating-linear-gradient(90deg, var(--red) 0 2.5px, transparent 2.5px 120px); background-size: 100% 8px, 100% 14px; background-repeat: no-repeat; transform-origin: 0 50%; }
.steps li { position: relative; }
.steps li::before { content: ""; position: absolute; left: 0; top: -2.6rem; width: 3px; height: 2.1rem; background: var(--ink); }
.steps__w { display: inline-block; font: 700 0.85rem/1 var(--display); font-stretch: 85%; background: var(--ink); color: var(--blade); padding: 0.3em 0.55em; border-radius: 4px; margin-bottom: 0.6rem; }
.steps p { margin-top: 0.45rem; color: var(--ink-2); font-size: 0.97rem; }

/* assembly */
.build { background: var(--plaster-2); }
.build__pin { max-width: 80rem; margin-inline: auto; padding-inline: max(16px, var(--gut)); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; align-items: center; }
.build__steps { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0; }
.build__steps li { border-top: var(--rule) solid var(--ink); padding: 0.8rem 0 1rem; transition: opacity 0.3s var(--ease); }
.build__steps p { margin-top: 0.35rem; color: var(--ink-2); font-size: 0.98rem; }
.anim .build__steps li { border-top-color: var(--plaster-3); }
.anim .build__steps li.is-on { border-top-color: var(--red); }
.anim .build__steps li.is-on h3 { background: var(--blade); box-shadow: 0 0 0 4px var(--blade); display: inline; }
.build__svg { width: 100%; height: auto; }
.as-floor { fill: var(--plaster); }
.as-wall { fill: var(--ink); }
.as-door { fill: var(--plaster); stroke: var(--ink); stroke-width: 3; }
.as-mod rect { stroke: var(--ink); stroke-width: 2.5; }
.as-mod line { stroke: var(--ink); stroke-width: 1.5; }
.as-wrap { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 6 5; }
.as-clip { fill: var(--red); }
.as-dim line { stroke: var(--ink); stroke-width: 1.6; }
.as-dim text { font: 700 18px var(--display); font-stretch: 80%; fill: var(--ink); }
.anim .build__pin { min-height: calc(100svh - var(--head)); }

/* delivery, care */
.delivery { background: var(--blade); border-block: var(--rule) solid var(--ink); }
.cols { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--rule) solid var(--ink); }
.cols > div { padding: 1.1rem 1.4rem 0 0; }
.cols > div + div { border-left: var(--rule) solid var(--ink); padding-left: 1.4rem; }
.cols p { margin-top: 0.5rem; font-size: 0.98rem; }
.care { background: var(--plaster); }
.care__list { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.2rem; }
.care__list li { border-top: var(--rule) solid var(--ink); padding: 1rem 0 1.8rem; }
.care__list p { margin-top: 0.45rem; color: var(--ink-2); font-size: 0.98rem; }

/* price */
.price { background: var(--plaster-2); }
.tblwrap { margin-top: 2.2rem; overflow-x: auto; }
.ptab { width: 100%; min-width: 30rem; border-collapse: collapse; border: var(--rule) solid var(--ink); background: var(--plaster); }
.ptab th, .ptab td { text-align: left; padding: 0.8rem 1rem; border-bottom: var(--hair) solid var(--plaster-3); }
.ptab thead th { background: var(--ink); color: var(--blade); font: 700 0.9rem/1.2 var(--text); }
.ptab tbody th { font-weight: 600; }
.ptab td { font-size: 1.15rem; }
.ptab td:last-child { font: 600 0.95rem var(--text); color: var(--ink-2); }

/* faq */
.faq { background: var(--plaster); }
.faq__list { margin-top: 2.2rem; border-top: var(--rule) solid var(--ink); max-width: 62rem; }
.faq details { border-bottom: var(--hair) solid var(--plaster-3); }
.faq summary { list-style: none; cursor: pointer; padding: 1.05rem 3rem 1.05rem 0; position: relative; font: 700 1.1rem/1.3 var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 0.6rem; top: 50%; width: 18px; height: 3px; background: var(--ink); transition: transform 0.3s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 0 1.2rem; max-width: 52rem; color: var(--ink-2); }
.faq summary:hover { text-decoration: underline 2px var(--red); text-underline-offset: 0.25em; }

/* quote */
.quote { background: var(--blade); border-top: var(--rule) solid var(--ink); }
.quote__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3rem; align-items: start; }
.quote__sum p { margin-top: 1rem; max-width: 34rem; }
.quote__plan { margin: 1.5rem 0 1rem; background: var(--plaster); border: var(--rule) solid var(--ink); border-radius: 14px; padding: 1rem; }
.quote__spec { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0; }
.quote__spec li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; border-top: var(--hair) solid rgba(22, 21, 19, 0.35); padding: 0.45rem 0; font-size: 0.96rem; }
.quote__spec li b { font-weight: 700; }
.qform { background: var(--plaster); border: var(--rule) solid var(--ink); border-radius: 16px; padding: clamp(1.1rem, 3vw, 2rem); display: grid; gap: 1rem; }
.qform__row { display: grid; gap: 1rem; }
.qform__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fld { display: grid; gap: 0.35rem; min-width: 0; }
.fld > span, .fld legend { font: 600 0.88rem/1.2 var(--text); }
.fld input, .fld textarea { width: 100%; border: 2px solid var(--ink); border-radius: 9px; background: #fbfaf6; padding: 0.65rem 0.75rem; }
.fld input:focus-visible, .fld textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.fld input[aria-invalid="true"] { border-color: var(--red); background: var(--red-soft); }
.fld textarea::placeholder { color: #6e695f; }
.fld--seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; }
.fld--seg legend { float: left; width: 100%; margin-bottom: 0.35rem; padding: 0; }
.fld--seg label { position: relative; display: inline-flex; }
.fld--seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fld--seg label span { padding: 0.55rem 0.9rem; border: 2px solid var(--ink); margin-left: -2px; font-weight: 600; font-size: 0.95rem; }
.fld--seg label:first-of-type span { border-radius: 8px 0 0 8px; margin-left: 0; }
.fld--seg label:last-of-type span { border-radius: 0 8px 8px 0; }
.fld--seg input:checked + span { background: var(--ink); color: var(--blade); }
.fld--seg input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.qform__hint { font-size: 0.85rem; color: var(--ink-2); margin-top: -0.5rem; }
.qform__err { color: var(--red); font-weight: 600; min-height: 1.2em; }
.qform .btn--big { justify-self: start; }
.qout { border-top: var(--rule) solid var(--ink); padding-top: 1rem; display: grid; gap: 0.7rem; }
.qout[hidden] { display: none; }
.qout textarea { width: 100%; border: 2px solid var(--ink); border-radius: 9px; background: #fbfaf6; padding: 0.75rem; font: 500 0.92rem/1.5 var(--text); }
.qout .btn { justify-self: start; }
.qout__status { min-height: 1.2em; font-size: 0.92rem; }

/* footer: the tape case */
.foot { background: var(--case); color: var(--plaster); padding-block: 3rem calc(3rem + env(safe-area-inset-bottom)); }
.foot__in { max-width: 80rem; margin-inline: auto; padding-inline: max(16px, var(--gut)); display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; }
.foot__brand { display: flex; gap: 0.8rem; align-items: center; }
.foot__brand .brand__mark { color: var(--blade); }
.foot__brand .brand__mark circle { stroke: var(--case); }
.foot__brand strong { font: 800 1.2rem var(--display); font-stretch: 72%; }
.foot__brand span { color: #cfc9bd; font-size: 0.9rem; }
.foot__demo { color: #cfc9bd; font-size: 0.9rem; max-width: 40rem; }
.foot__links a { color: var(--blade); }
.foot :focus-visible { outline-color: var(--blade); }

/* ---------------- motion layer (only with .anim) ---------------- */
.anim .door__pin, .anim .inside__pin, .anim .rub__pin { min-height: calc(100svh - var(--head)); }
@media (min-width: 901px) {
  .anim .door, .anim .inside, .anim .rub, .anim .measure, .anim .build { padding-block: 1.5rem; }
  .anim .measure .h2 { max-width: none; }
  .anim .measure .lede { margin-top: 0.5rem; }
}
.anim .measure__pin { min-height: calc(100svh - var(--head)); display: flex; flex-direction: column; justify-content: center; }
.anim .measure__track.is-h { width: calc(266vh + 8vw); padding-inline: 4vw; margin-top: 1.6rem; }
.anim .measure__track.is-h .measure__wall { width: 266vh; height: 40vh; max-width: none; }
.anim .measure__track.is-h .measure__stops { position: relative; display: block; height: 14rem; width: 266vh; }
.anim .measure__track.is-h .measure__stops li { position: absolute; left: var(--x); top: 0; width: calc(266vh * 0.128); }

/* ---------------- responsive ---------------- */
@media (max-width: 1180px) {
  .top__nav { display: none; }
  .top__tools { margin-left: auto; }
  .book { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bay2:nth-child(3) { border-left: 0; }
  .bay2:nth-child(n+3) { border-top: var(--rule) solid var(--ink); }
}
@media (max-width: 900px) {
  :root { --head: 52px; }
  .cfg { display: block; min-height: 0; }
  .cfg__room { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "wall" "elev" "plan" "readout"; row-gap: 0.4rem; padding: 1.2rem 0 0; }
  .cfg__wall { max-width: none; padding-inline: max(16px, var(--gut)); }
  .cfg__elev { height: clamp(210px, 58vw, 340px); }
  .cfg__plan { aspect-ratio: var(--plan-ar, 1.4); max-height: 62svh; }
  .readout { justify-self: stretch; width: auto; margin: 0.6rem max(16px, var(--gut)) 1rem; }
  .inside__stage { aspect-ratio: 1 / 1; }
  .readout__t tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
  .readout__t tr { display: flex; justify-content: space-between; gap: 0.5rem; border-top: var(--hair) solid var(--plaster-3); }
  .readout__t th, .readout__t td { border-top: 0; min-width: 0; }
  .dock { grid-template-columns: 1fr; padding-bottom: 1.2rem; }
  .dock__cta { margin-top: 1rem; justify-self: stretch; }
  .fit__grid, .door__pin, .tape__grid, .rub__pin, .quote__grid, .build__pin { grid-template-columns: minmax(0, 1fr); }
  .anim .build__pin { min-height: 0; }
  .inside__pin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "list" "tag"; }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .care__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rooms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mods__now { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .steps { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 2.4rem; }
  .steps::before { top: 0; bottom: 0; left: 0; right: auto; width: 22px; height: auto; background-image: repeating-linear-gradient(180deg, var(--ink) 0 1.5px, transparent 1.5px 12px); background-size: 8px 100%; }
  .steps li::before { left: -2.4rem; top: 0.8rem; width: 2rem; height: 3px; }
  .legset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legopt:nth-of-type(3) { border-left: 0; }
  .legopt:nth-of-type(n+3) { border-top: var(--rule) solid var(--ink); }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
  .anim .door__pin, .anim .inside__pin, .anim .rub__pin { min-height: 0; }
}
@media (max-width: 640px) {
  .still { display: none; }
  .brand__name { font-size: 1.1rem; }
  .top__cta { padding: 0.5em 0.7em; font-size: 0.82rem; }
  .top__cta::after { display: none; }
  .book { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leaf { grid-template-rows: 8rem auto; }
  .bays { grid-template-columns: minmax(0, 1fr); }
  .bay2 { border-left: 0 !important; }
  .bay2 + .bay2 { border-top: var(--rule) solid var(--ink); }
  .cols, .care__list, .rooms__grid { grid-template-columns: minmax(0, 1fr); }
  .cols > div + div { border-left: 0; padding-left: 0; border-top: var(--hair) solid var(--ink); }
  .qform__row--2 { grid-template-columns: minmax(0, 1fr); }
  .tape__list { grid-template-columns: minmax(0, 1fr); }
  .label div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .door__dl { grid-template-columns: minmax(0, 1fr); }
  .quote__spec li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .seg--wide label span { min-width: 0; }
  .ptab { min-width: 0; }
  .ptab th, .ptab td { padding: 0.7rem 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.anim .steps::before { transform: scaleX(var(--tape, 1)); }