/* m-split, "The room and its website". Ours. Built on r2-split after its fix round:
   tokens from Refero style Christopher Ireland Creative (pale stone ground #f2f1ec, charcoal ink,
   Subtle Ash captions, display serif beside one photograph, 0 radius, underlined text links, no
   elevation); the half-and-half split with type filling the field is Studio Ashby's presentation.
   Fix round 2026-09-27 (evening): one stylesheet again; display type follows --u, reading text follows
   --ut, which never drops below its 1440x900 size; three serif steps below the hero. */

:root {
  --ground: #f2f1ec;
  --ink: #111111;
  --ink-soft: #5d5b5b;
  --line: rgba(17, 17, 17, 0.22);
  --u: min(1vw, 1.6vh);            /* 14.4px at 1440x900: display type and spacing */
  --ut: max(14.4px, var(--u));     /* reading text: follows the window, never below its 1440x900 size */
  --pad: calc(var(--u) * 3.9);
  --hero-travel: min(270vh, 2700px);   /* four equal parts and a half-part hold on the last: 60vh each (was 50vh for the middle two), capped for 4K (Tim, 2026-09-28) */
  --bar: 64px;
  /* three serif steps below the hero (the hero's headline is its own) */
  --display: calc(var(--u) * 5.6); /* the offer and Book a call headlines */
  --section: calc(var(--u) * 4.6); /* every other h2 */
  --item: calc(var(--u) * 2.5);    /* step titles, trade heads, prices */
  /* reading text */
  --body: calc(var(--ut) * 1.04);  /* 15px at 1440x900 */
  --body-l: calc(var(--ut) * 1.12);
  --cap: calc(var(--ut) * 0.86);   /* 12.4px at 1440x900 */
  --ui: calc(var(--ut) * 0.98);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ground); color: var(--ink); scroll-padding-top: var(--bar); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--ground); font-family: "Figtree", system-ui, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
/* Tim, 2026-09-28, on his iPhone 16 Pro Max: the page could be swiped left and right. Nothing overflows in
   Chromium or WebKit at any iPhone width, so the width is locked at the root: the page can never pan
   sideways. clip (not hidden) keeps body from becoming a scroll box, so the hero's sticky stage still pins. */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
a { color: inherit; text-decoration: none; }
img { display: block; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; cursor: pointer; padding: 0; text-align: left; -webkit-appearance: none; appearance: none; }
h2, h3, .plans > li { text-wrap: balance; }
p { text-wrap: pretty; }   /* no one-word last lines where the browser supports it */

/* Lenis' recommended base rules */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* access: visually hidden text, the skip link, a 2px focus ring */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -200px; z-index: 40; padding: 12px 16px; background: var(--ground); border: 1px solid var(--ink); font-size: 15px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

/* ---------- the hero (look unchanged) ---------- */
.hero { position: relative; height: calc(100vh + var(--hero-travel)); }
.stage {
  position: sticky; top: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  height: 100vh; min-height: 600px;
  overflow: hidden;
}

/* stacked layers: the one with .is-on shows; the others wait at opacity 0 */
.layer { position: absolute; inset: 0; opacity: 0; }
.layer.is-on { opacity: 1; }

.room { position: relative; overflow: hidden; background: var(--ground); }
.room img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }

.panel {
  display: flex; flex-direction: column;
  padding: calc(var(--u) * 2.2) var(--pad) calc(var(--u) * 2.4);
  min-width: 0;
}
.nav { display: flex; align-items: baseline; justify-content: space-between; }
.wordmark { font-family: "Marcellus", serif; font-size: calc(var(--u) * 1.75); letter-spacing: 0.01em; }
.nav nav { display: flex; gap: calc(var(--u) * 1.8); font-size: var(--ui); }
.book { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }

h1 {
  font-family: "Marcellus", serif; font-weight: 400;
  font-size: calc(var(--u) * 6.6); line-height: 0.96; letter-spacing: -0.015em;
  margin-top: calc(var(--u) * 3.4);
}
h1 .l { display: block; }
.noun { display: inline-block; }

.foot {
  margin-top: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) max(calc(30% - var(--u) * 1.7), 157px); column-gap: calc(var(--u) * 1.7);
  align-items: start;
}
.site { position: relative; display: block; aspect-ratio: 16 / 10; outline: 1px solid rgba(17, 17, 17, 0.1); outline-offset: 0; }
.site img { width: 100%; height: 100%; object-fit: cover; }
.site:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* the captions share one cell, so the block is as tall as the longest and nothing moves between pairs */
.caps { display: grid; margin-top: calc(var(--u) * 0.75); }
.caps .layer { position: relative; inset: auto; grid-area: 1 / 1; }
.caps .layer:not(.is-on) { pointer-events: none; }
.caps p { font-size: var(--cap); line-height: 1.45; color: var(--ink-soft); }
.open { color: var(--ink); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.lede { font-size: var(--body); line-height: 1.45; }
.pairs { margin-top: calc(var(--u) * 1.5); display: grid; gap: calc(var(--u) * 0.35); font-size: calc(var(--ut) * 0.94); }
.pairs button, .pairs a { color: var(--ink-soft); padding: 2px 0; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; text-decoration-thickness: 1px; transition: color .3s, text-decoration-color .3s; }
.pairs a { display: inline-flex; align-items: baseline; gap: 0.3em; }
.pairs a .down { width: 0.62em; height: 0.74em; align-self: center; }
.pairs button[aria-pressed="true"] { color: var(--ink); text-decoration-color: currentColor; }
/* Tim, 2026-09-28: the lede and the captions are off the hero ("just noise"); the names sit level with the homepage's top edge */
.side > .pairs:first-child { margin-top: 0; }

/* short laptop screens: the homepage gives way so the floored text still fits under the headline */
@media (min-width: 761px) and (max-height: 760px) {
  .foot { grid-template-columns: min(70%, calc(var(--u) * 29.6)) minmax(0, 1fr); }
}

/* ---------- the five concept websites, by trade ---------- */
.sites { padding: calc(var(--u) * 5.2) var(--pad) calc(var(--u) * 5); }
.sites-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--u) * 4); align-items: end; }  /* the heading keeps one line (re-look N3) */
.sites h2, .how h2 { font-family: "Marcellus", serif; font-weight: 400; font-size: var(--section); line-height: 1; letter-spacing: -0.012em; }
.sites-head p, .how-head p { font-size: var(--body); line-height: 1.45; max-width: 30em; }
.trade-row { margin-top: calc(var(--u) * 4.6); scroll-margin-top: calc(var(--u) * 2); }
.trade-head h3 { font-family: "Marcellus", serif; font-weight: 400; font-size: var(--item); line-height: 1.1; letter-spacing: -0.005em; }
.trade-head p { margin-top: calc(var(--u) * 0.6); font-size: var(--body); line-height: 1.5; max-width: 34em; }
.grid { margin-top: calc(var(--u) * 1.9); display: grid; column-gap: calc(var(--u) * 1.7); row-gap: calc(var(--u) * 2); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card a { display: block; }
.card picture { display: block; }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; outline: 1px solid rgba(17, 17, 17, 0.1); }
.card .name { display: block; margin-top: calc(var(--u) * 0.8); font-family: "Marcellus", serif; font-size: calc(var(--ut) * 1.45); line-height: 1.1; }
.card .meta { display: block; margin-top: 2px; font-size: var(--cap); color: var(--ink-soft); }
.also {
  margin-top: calc(var(--u) * 4.6); padding-top: calc(var(--u) * 1.6); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--u) * 1.7); align-items: start;
}
.also-intro { font-size: var(--body); line-height: 1.45; color: var(--ink-soft); }
.also h3 { font-family: "Figtree", system-ui, sans-serif; font-weight: 500; font-size: var(--body); line-height: 1.45; }
.also-item p { margin-top: 2px; font-size: var(--body); line-height: 1.5; color: var(--ink-soft); max-width: 26em; }

/* ---------- the half-photo splits: the offer and Book a call. The screen sets the height; the photo covers it ---------- */
.split-sec { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; min-height: calc(100vh - var(--bar)); overflow: clip; }  /* the photo's settle-in scale never pushes the page sideways */
.sec-photo { display: contents; }
/* an absolutely placed grid child sizes to its grid area, so both lines are named (an auto end line would mean the container's edge) */
.sec-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; grid-row: 1 / 3; }
.sec-photo figcaption { grid-row: 2; padding: 0 var(--pad) calc(var(--u) * 2.4); font-size: var(--cap); line-height: 1.45; color: var(--ink-soft); }
.sec-text { grid-row: 1; padding: calc(var(--u) * 4.2) var(--pad) calc(var(--u) * 2); display: flex; flex-direction: column; }
.offer .sec-text, .offer figcaption { grid-column: 1; }
.offer .sec-text { justify-content: flex-start; padding-top: calc(var(--u) * 8); }   /* top-anchored: an open drop-down grows only downward (Tim, 2026-09-28) */
html { overflow-anchor: none; }   /* no scroll anchoring: opening a drop-down with the next section in view must not scroll the page */
.offer .sec-photo img { grid-column: 2 / 3; object-position: 50% 50%; }
.book-sec .sec-photo img { grid-column: 1 / 2; object-position: 50% 42%; }
.book-sec .sec-text, .book-sec figcaption { grid-column: 2; }
.split-sec h2 { font-family: "Marcellus", serif; font-weight: 400; font-size: var(--display); line-height: 0.98; letter-spacing: -0.014em; max-width: 8.2em; }
.sec-lede { margin-top: calc(var(--u) * 1.6); font-size: var(--body-l); line-height: 1.5; max-width: 30em; }

.plans { margin-top: calc(var(--u) * 2.4); }
.plans > li { margin-top: calc(var(--u) * 0.9); font-family: "Marcellus", serif; font-size: var(--item); line-height: 1.2; }
.plans > li:first-child { margin-top: 0; }
/* Tim, 2026-09-28: a drop-down under each price and the $80, for what is included (native details/summary) */
.plan summary { display: block; cursor: pointer; list-style: none; }   /* block, so a wrapped line keeps its arrow right after the words */
.plan summary::-webkit-details-marker { display: none; }
.plan .chev { display: inline-block; width: 0.5em; height: 0.34em; margin-left: 0.4em; vertical-align: 0.18em; opacity: 0.55; transition: transform .3s cubic-bezier(0.22, 0.7, 0.2, 1), opacity .3s; }
.plan summary:hover .chev, .plan[open] .chev { opacity: 1; }
.plan[open] .chev { transform: rotate(180deg); }
.plan { width: fit-content; max-width: 100%; }
.plan summary { width: fit-content; }
.plan summary:focus:not(:focus-visible) { outline: none; }
.plan-body { contain: inline-size; margin: calc(var(--u) * 0.55) 0 calc(var(--u) * 0.35); font-family: "Figtree", system-ui, sans-serif; font-size: var(--body); line-height: 1.5; color: var(--ink-soft); }
.plan-body li { position: relative; padding-left: 1.1em; }
.plan-body li + li { margin-top: 3px; }
.plan-body li::before { content: ""; position: absolute; left: 0.1em; top: 0.72em; width: 0.4em; height: 1px; background: currentColor; }
.plan[open] .plan-body { animation: plan-in .35s cubic-bezier(0.22, 0.7, 0.2, 1); }
@keyframes plan-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .plan[open] .plan-body { animation: none; } .plan .chev { transition: none; } }
.plans-note .plan summary { font-size: var(--body); line-height: 1.5; }
.plans-note .plan-body { margin-top: 6px; }
.plans-note { margin-top: calc(var(--u) * 1.6); font-size: var(--body); line-height: 1.5; }

/* ---------- how it goes ---------- */
.how { padding: calc(var(--u) * 5.2) var(--pad) calc(var(--u) * 4); }
.how-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 1.7); align-items: end; }
.steps { margin-top: calc(var(--u) * 4.4); }
.step { display: grid; grid-template-columns: 1fr calc(var(--u) * 6) 1fr; column-gap: calc(var(--u) * 1.4); padding-bottom: calc(var(--u) * 3.4); }
.step:last-child { padding-bottom: 0; }
.step figure { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 10; overflow: hidden; }
.step figure img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgba(17, 17, 17, 0.1); outline-offset: -1px; }
.step figure.narrow { display: flex; justify-content: flex-start; background: transparent; }
.step figure.narrow img { width: auto; height: 100%; }
.step figure.narrow picture { display: contents; }
.step .node { grid-column: 2; grid-row: 1; position: relative; align-self: stretch; margin-bottom: calc(var(--u) * -3.4); }
.step:last-child .node { margin-bottom: 0; }
/* the rail keeps its circles; a small filled dot in each, no numerals (the titles give the order) */
.node b { position: relative; z-index: 1; display: grid; place-items: center; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); margin: 0 auto; border: 1px solid rgba(17, 17, 17, 0.55); border-radius: 50%; background: var(--ground); }
.node b::after { content: ""; width: calc(var(--u) * 0.52); height: calc(var(--u) * 0.52); border-radius: 50%; background: var(--ink); }
.seg { position: absolute; top: calc(var(--u) * 2.3); bottom: 0; left: 50%; width: 1px; background: rgba(17, 17, 17, 0.28); transform-origin: top center; }
.step-text { grid-column: 3; grid-row: 1; padding-top: calc(var(--u) * 0.2); }
.step:nth-child(even) figure { grid-column: 3; }
.step:nth-child(even) .step-text { grid-column: 1; text-align: right; }
.step:nth-child(even) .step-text p { margin-left: auto; }
.step h3 { font-family: "Marcellus", serif; font-weight: 400; font-size: var(--item); line-height: 1.1; }
.step p { margin-top: calc(var(--u) * 0.8); font-size: var(--body); line-height: 1.5; max-width: 24em; }

/* ---------- Book a call, with the questions beside it ---------- */
.book-big { margin-top: calc(var(--u) * 3.4); align-self: flex-start; font-family: "Marcellus", serif; font-size: calc(var(--u) * 4); line-height: 1.1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.book-sub { margin-top: calc(var(--u) * 0.6); font-size: calc(var(--ut) * 0.94); color: var(--ink-soft); }
.book-alt { margin-top: calc(var(--u) * 1.4); max-width: 30em; font-size: var(--body); line-height: 1.5; }
.book-alt a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.faq { margin-top: calc(var(--u) * 3); padding-top: calc(var(--u) * 1.7); border-top: 1px solid var(--line); max-width: 34em; scroll-margin-top: calc(var(--u) * 2); }
.qa + .qa { margin-top: calc(var(--u) * 1.3); }
.qa h3 { font-family: "Figtree", system-ui, sans-serif; font-weight: 500; font-size: var(--body); line-height: 1.45; }
.qa p { margin-top: 2px; font-size: var(--body); line-height: 1.5; color: var(--ink-soft); }   /* the question in ink, the answer a step softer, so they read apart */

/* ---------- footer (outside main) ---------- */
.site-foot { padding: calc(var(--u) * 3) var(--pad) calc(var(--u) * 2.6); border-top: 1px solid rgba(17, 17, 17, 0.14); }
.f-top { display: flex; justify-content: space-between; align-items: baseline; }
.f-top nav { display: flex; gap: calc(var(--u) * 1.8); font-size: var(--ui); }
.f-bottom { margin-top: calc(var(--u) * 3); display: flex; justify-content: space-between; gap: 2em; font-size: var(--cap); color: var(--ink-soft); }

/* ---------- the slim bar, once the hero has gone by ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--bar);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad);
  background: var(--ground); border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  opacity: 0; transform: translateY(-100%); visibility: hidden;
  transition: opacity .35s ease, transform .45s cubic-bezier(0.22, 0.7, 0.2, 1), visibility 0s .45s;
}
.topbar.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .35s ease, transform .45s cubic-bezier(0.22, 0.7, 0.2, 1), visibility 0s 0s; }
.topbar .wordmark { font-size: 24px; }
.topbar nav { display: flex; gap: 26px; font-size: 14px; }

/* ---------- reduced motion: the still, everything visible, nothing pinned ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --hero-travel: 0px; }
  .hero { height: auto; }
  .stage { position: relative; }
  .topbar, .topbar.is-on { transition: none; }
  .pairs button, .pairs a { transition: none; }
}

/* ---------- before the entrance runs: hidden, with a failsafe that shows everything after 2.5 s ---------- */
@media not (prefers-reduced-motion: reduce) {
  html.js:not(.ready) .room .layer.is-on, html.js:not(.ready) .nav, html.js:not(.ready) h1 .l,
  html.js:not(.ready) .site, html.js:not(.ready) .caps, html.js:not(.ready) .lede, html.js:not(.ready) .pairs {
    opacity: 0; animation: novari-failsafe 0s 2.5s forwards;
  }
  html.js .await { opacity: 0; }
  html.js .await-seg { transform: scaleY(0); }
}
@keyframes novari-failsafe { to { opacity: 1; } }

/* ======================= stacked: phones, and tablets held upright ======================= */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  :root {
    --u: min(3.6vw, 15px); --ut: var(--u); --pad: clamp(20px, 4vw, 40px); --hero-travel: 0px; --bar: 56px;
    --display: clamp(38px, 5.2vw, 54px); --section: clamp(32px, 4.4vw, 46px); --item: clamp(22px, 2.9vw, 28px);
    --body: 15px; --body-l: 15px; --cap: 12.5px; --ui: 14px;
  }
  /* the hero: the words, the names, the room, its website; names switch the pair */
  .hero { height: auto; }
  .stage { position: relative; display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; }
  .panel, .foot, .site-col, .side { display: contents; }
  .nav { order: 1; padding: 8px var(--pad) 0; align-items: center; }
  .wordmark { font-size: 24px; }
  .nav nav { gap: 16px; font-size: 14px; }
  .nav nav a, .topbar nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav nav a.wide, .topbar nav a.wide { display: none; }
  h1 { order: 2; font-size: clamp(50px, 8vw, 72px); line-height: 0.98; margin: 28px var(--pad) 0; }
  .lede { order: 3; font-size: 15px; line-height: 1.5; margin: 18px var(--pad) 0; max-width: 34em; }
  /* phone pass 2026-09-28: the four names as a straight two by two (interiors above, builders below), so no name is ever left alone on a line */
  .pairs { order: 4; margin: 8px var(--pad) 0; display: grid; grid-template-columns: repeat(2, max-content); column-gap: 32px; row-gap: 0; font-size: 15px; }
  .pairs button, .pairs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .side > .pairs:first-child { margin-top: 18px; }   /* with the lede gone, the names keep their distance from the headline */
  .room { order: 5; margin-top: 14px; aspect-ratio: 1 / 1; }
  .site { order: 6; margin: 24px var(--pad) 0; width: calc(100% - var(--pad) * 2); max-width: calc(100% - var(--pad) * 2); align-self: flex-start; }   /* Tim's iPhone, 2026-09-28: Safari sized it past the screen edge */
  .room { width: 100%; }
  .caps { order: 7; margin: 10px var(--pad) 0; }
  .caps p { font-size: 12.5px; }
  .open { padding: 14px 0; margin: -14px 0; }

  .sites { padding: 56px var(--pad) 48px; }
  .sites-head, .how-head { grid-template-columns: 1fr; row-gap: 10px; }
  .trade-row { margin-top: 36px; scroll-margin-top: 20px; }
  .trade-head p { margin-top: 6px; }
  .grid { margin-top: 18px; column-gap: 14px; row-gap: 22px; }
  .grid-4 { grid-template-columns: 1fr 1fr; }   /* upright tablets: four interior designers as a two by two */
  .card .name { margin-top: 10px; font-size: 18px; }
  .card .meta { font-size: 12px; }
  .also { margin-top: 40px; padding-top: 18px; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 12px; }
  .also-intro { grid-column: 1 / -1; }

  .split-sec { display: flex; flex-direction: column; min-height: 0; }
  .sec-text { order: 1; padding: 56px var(--pad) 28px; }
  .sec-photo img { position: static; order: 2; aspect-ratio: 4 / 5; height: auto; }
  .sec-photo figcaption { order: 3; padding: 10px var(--pad) 0; }
  .book-sec figcaption { padding-bottom: 8px; }
  .book-sec .sec-photo img { aspect-ratio: 1 / 1; object-position: 50% 28%; }   /* phone pass: the house, not the drive */
  .sec-lede { margin-top: 16px; }
  .plans { margin-top: 26px; }
  .plans > li { margin-top: 10px; }
  .plan summary { padding: 4px 0; }   /* a comfortable tap target on phones */
  .plans-note { margin-top: 18px; }

  .how { padding: 56px var(--pad) 48px; }
  .steps { margin-top: 32px; }
  /* phone pass 2026-09-28 (Tim: "it just looks small"): no side rail on phones, so each picture runs the full width;
     a small ringed dot sits beside each step's title instead */
  .step, .step:nth-child(even) { grid-template-columns: 20px 1fr; column-gap: 12px; grid-template-rows: auto auto; padding-bottom: 44px; }
  .step figure, .step:nth-child(even) figure { grid-column: 1 / -1; grid-row: 1; }
  .step-text, .step:nth-child(even) .step-text { grid-column: 2; grid-row: 2; text-align: left; padding-top: 16px; }
  .step:nth-child(even) .step-text p { margin-left: 0; }
  .step .node, .step:last-child .node { grid-column: 1; grid-row: 2; align-self: start; margin: 0; padding-top: 19px; }
  .node b { width: 18px; height: 18px; margin: 0; }
  .node b::after { width: 6px; height: 6px; }
  .seg { display: none; }
  /* Launch: a phone screen, big enough to read, from a sharp 1170 px capture */
  .step figure.narrow { aspect-ratio: auto; display: block; overflow: visible; }
  .step figure.narrow picture { display: block; width: 64%; }
  .step figure.narrow img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: 50% 0; }
  .step p { margin-top: 8px; }

  .book-big { font-size: 30px; margin-top: 22px; }
  .book-sub { font-size: 14px; }
  .faq { margin-top: 32px; padding-top: 20px; }
  .qa + .qa { margin-top: 16px; }

  .site-foot { padding: 28px var(--pad) 24px; }
  .f-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .f-top nav { display: grid; grid-template-columns: repeat(3, max-content); gap: 0 32px; font-size: 14px; }   /* phone pass: straight columns, nothing left alone on a line */
  .f-top nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .f-bottom { flex-direction: column; gap: 8px; margin-top: 16px; font-size: 12.5px; }

  .topbar { padding: 0 var(--pad); }
  .topbar .wordmark { font-size: 22px; }
  .topbar nav { gap: 18px; }
}

/* phones only: each site's own phone first screen, a tall portrait, two to a row, no device frame;
   the same 1 px hairline as the desktop tiles, so a pale page keeps an edge on the stone.
   2026-09-28: four interior designers now, so they make a two by two on their own (the head-in-cell move is gone) */
@media (max-width: 760px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
  .card img { aspect-ratio: 9 / 16; object-position: 50% 0; }
  /* re-look N4: the two "also" trades stack rather than squeeze into two narrow columns */
  .also { grid-template-columns: 1fr; }
}

/* Tim, 2026-09-28: a way to leave an email without leaving the page (Fenwick Hale's enquiry: chips, then one field) */
.room img.top { object-position: 50% 0; }   /* Marisma: the window above the stair stays in frame */
.reach { margin-top: calc(var(--u) * 2.4); max-width: 30em; }
.reach-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reach-lede { font-size: var(--body); line-height: 1.5; }
.reach-opts { border: 0; margin: calc(var(--u) * 0.9) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.reach-opts legend { width: 100%; margin-bottom: 8px; font-size: var(--cap); color: var(--ink-soft); }
.reach-opts label { position: relative; cursor: pointer; }
.reach-opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.reach-opts span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid rgba(17, 17, 17, 0.28); border-radius: 999px; font-size: calc(var(--ut) * 0.94); transition: background .2s, color .2s, border-color .2s; }
.reach-opts input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.reach-opts input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.reach-row { margin-top: calc(var(--u) * 1.1); display: flex; gap: 8px; }
.reach-row input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid rgba(17, 17, 17, 0.35); border-radius: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); -webkit-appearance: none; appearance: none; }
.reach-row input::placeholder { color: var(--ink-soft); }
.reach-row input:focus { outline: 2px solid var(--ink); outline-offset: 0; }
.reach-row button { flex: none; min-height: 46px; padding: 0 22px; background: var(--ink); color: var(--ground); font-size: 15px; text-align: center; }
.reach-row button:hover { opacity: 0.88; }
.reach-status { min-height: 1.5em; margin-top: 8px; font-size: var(--cap); color: var(--ink-soft); }
.reach.is-sent .reach-opts, .reach.is-sent .reach-row { opacity: 0.45; pointer-events: none; }

/* Tim, 2026-09-28: opening a drop-down must not move or grow the offer's picture: it keeps the screen's height and stays put */
@media (min-width: 761px) and (orientation: landscape), (min-width: 1101px) {
  .offer .sec-photo img { position: sticky; inset: auto; top: var(--bar); height: calc(100vh - var(--bar)); align-self: start; }
}