/* Curated by Alder & Tweed
   Colour and type come only from the Curated Brand Guidelines:
   backgrounds Ecru / Oat / Mushroom, text Cacao or White, Black as fallback.
   Quiverleaf CF Bold for headers (always the largest text), Poppins Light for
   copy, Lato Light uppercase with wide tracking for links and labels.
   Layout follows Elise's two references: Alder & Tweed's frame (vertical
   rails, full-screen film) and The Beaux Arts' scroll scenes. */

:root {
  --ecru: #FCFAF6;
  --oat: #E3DED6;
  --mushroom: #C9C2B6;
  --cacao: #322215;
  --black: #171717;
  --white: #FFFFFF;

  --display: "quiverleaf-cf", "Poppins", sans-serif; /* always 700: the guide specifies Quiverleaf CF Bold */
  --body: "Poppins", sans-serif;
  --label: "Lato", sans-serif;

  /* body 17px; H1 ~3.8x; each header step 1.5x (guide: H1 = 1.5 x H2) */
  --fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-lede: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --fs-h3: clamp(1.45rem, 1.2rem + .8vw, 1.85rem);
  --fs-h2: clamp(2.1rem, 1.6rem + 1.6vw, 2.8rem);
  --fs-h1: clamp(2.9rem, 1.9rem + 3.4vw, 4.2rem);
  --fs-label: .78rem;

  --rail: 76px;
  --gut: clamp(20px, 4vw, 64px);
  --max: 1480px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --scrim: 50 34 21;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ecru);
  color: var(--cacao);
  font: 300 var(--fs-body)/1.7 var(--body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }
::selection { background: var(--cacao); color: var(--ecru); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--cacao); color: var(--white); padding: 10px 16px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.005em; line-height: 1.08; margin: 0; text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: var(--fs-lede); line-height: 1.6; }
.label, .link, .btn {
  font-family: var(--label); font-weight: 300; font-size: var(--fs-label);
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.5;
}
.label { display: block; }
.link {
  display: inline-flex; align-items: center; gap: .9em; text-decoration: none; padding: .35em 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.link:hover { background-size: 30% 1px; }
.link svg { width: 22px; height: 10px; flex: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .9em;
  text-decoration: none; min-height: 48px; padding: 0 1.9em; border: 1px solid currentColor;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.btn:hover { background: var(--cacao); color: var(--ecru); border-color: var(--cacao); }

/* ---------- frame: A&T rails ---------- */
.rail {
  position: fixed; top: 0; bottom: 0; z-index: 40; width: var(--rail);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); transition: color .45s var(--ease); pointer-events: none;
}
.rail > * { pointer-events: auto; }
.rail-l { left: 0; }
.rail-r { right: 0; }
body.rails-dark .rail { color: var(--cacao); }
.logo {
  display: flex; flex-direction: column; align-items: center; gap: .55em;
  text-decoration: none; font-family: var(--body); font-weight: 300; line-height: 1; white-space: nowrap;
}
.logo b { font-weight: 300; font-size: 1.3rem; letter-spacing: .56em; margin-right: -.56em; }
.logo small { font-size: .62rem; letter-spacing: .3em; margin-right: -.3em; }
.rail-l .logo { transform: rotate(-90deg); }
.rail-r .rail-links {
  display: flex; align-items: center; gap: 1.1em; writing-mode: vertical-rl;
  font-family: var(--label); font-weight: 300; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
}
.rail-r a, .rail-r button { text-decoration: none; padding: .6em 0; }
.rail-r a:hover, .rail-r button:hover { text-decoration: underline; text-underline-offset: 6px; }
/* the gate is only the logo and the two doors: no rails, no menu */
.page-gate .rail, .page-gate .bar { display: none; }
.bar { display: none; }
@media (max-width: 899px) {
  :root { --rail: 0px; }
  .rail { bottom: auto; height: 64px; width: auto; }
  .rail-l { left: var(--gut); }
  .rail-r { right: var(--gut); }
  .rail-l .logo { transform: none; align-items: flex-start; }
  .logo b { font-size: 1.05rem; }
  .rail-r .rail-links { writing-mode: horizontal-tb; }
  .rail-r .rail-sep, .rail-r .rail-inquire { display: none; }
  .bar { display: block; position: fixed; inset: 0 0 auto; height: 64px; z-index: 39; transition: background-color .45s var(--ease); }
  body.rails-dark .bar { background: color-mix(in srgb, var(--ecru) 94%, transparent); }
}

/* ---------- menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--oat); color: var(--cacao);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s;
}
.menu.open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.menu-nav { padding: clamp(80px, 12vh, 140px) var(--gut) 48px calc(var(--rail) + var(--gut)); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; overflow: auto; }
.menu-nav ol { list-style: none; margin: 0; padding: 0; }
.menu-nav ol a { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem); line-height: 2.1; text-decoration: none; }
.menu-nav ol a:hover, .menu-nav ol a[aria-current] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.menu-meta { display: grid; gap: 6px; justify-items: start; }
.menu-img { position: relative; overflow: hidden; }
.menu-img img { width: 100%; height: 100%; object-fit: cover; }
.menu-close { position: absolute; top: 22px; right: calc(var(--rail) + var(--gut) - 10px); z-index: 2; padding: 10px; }
@media (max-width: 899px) { .menu { grid-template-columns: 1fr; } .menu-img { display: none; } .menu-close { right: var(--gut); top: 12px; } }

/* ---------- the gate (home), after alderandtweed.com ---------- */
.gate { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--cacao); color: var(--white); }
.gate-media { position: absolute; inset: 0; }
.gate-media video, .gate-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gate-media::after { content: ""; position: absolute; inset: 0; background: rgb(var(--scrim) / .5); transition: background-color .7s var(--ease); }
.gate-side-img { opacity: 0; transition: opacity .9s var(--ease); }
.gate[data-side="dev"] .gate-side-img[data-for="dev"], .gate[data-side="home"] .gate-side-img[data-for="home"] { opacity: 1; }
.gate[data-side] .gate-media::after { background: rgb(var(--scrim) / .58); }
.gate-grid { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.gate-side { height: 100%; display: grid; place-items: center; text-decoration: none; padding: 0 var(--gut); }
.gate-side span { display: grid; justify-items: center; gap: 16px; text-align: center; }
.gate-side b { font-family: var(--label); font-weight: 300; font-size: .92rem; letter-spacing: .32em; text-transform: uppercase; margin-right: -.32em; padding-bottom: 6px; border-bottom: 1px solid transparent; transition: border-color .5s var(--ease); }
/* the underline answers the word itself, not the whole half of the screen */
.gate-side b:hover, .gate-side:focus-visible b { border-bottom-color: currentColor; }
.gate-side:focus-visible { outline-offset: -14px; }
.gate-logo { display: grid; justify-items: center; padding: 0 clamp(16px, 3vw, 48px); }
.gate-logo .logo b { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
.gate-logo .logo small { font-size: clamp(.66rem, .6rem + .2vw, .8rem); }
.gate-logo h1 { font-size: inherit; line-height: inherit; }
.gate-foot { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; text-align: center; pointer-events: none; }
@media (max-width: 699px) {
  .gate-grid { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
  .gate-side:first-child { padding-top: 70px; }
  .gate-side:last-child { padding-bottom: 70px; }
}

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(72px, 9vw, 128px) calc(var(--rail) + var(--gut)); }
.wrap { max-width: var(--max); margin: 0 auto; position: relative; }
.tone-oat { background: var(--oat); }
.tone-mush { background: var(--mushroom); }
.head { display: grid; gap: 20px; margin-bottom: clamp(36px, 4.5vw, 56px); max-width: 64rem; }

/* full-bleed photo backgrounds */
.bg { position: relative; overflow: hidden; color: var(--white); background: var(--cacao); isolation: isolate; }
.bg > .bg-img { position: absolute; inset: 0; z-index: -2; }
.bg > .bg-img img { width: 100%; height: 100%; object-fit: cover; }
.bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(var(--scrim) / .86) 0%, rgb(var(--scrim) / .72) 45%, rgb(var(--scrim) / .42) 100%); }
.bg.bg-even::before { background: rgb(var(--scrim) / .7); }
.bg.bg-low::before { background: linear-gradient(to top, rgb(var(--scrim) / .9) 0%, rgb(var(--scrim) / .66) 45%, rgb(var(--scrim) / .22) 100%); }
.bg ::selection { background: var(--ecru); color: var(--cacao); }
.bg .btn:hover { background: var(--white); color: var(--cacao); border-color: var(--white); }
.bg-tall { min-height: 100svh; display: grid; align-items: end; }
.statement { display: grid; gap: 26px; max-width: 72rem; }
.statement blockquote { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.14; text-wrap: balance; }
.statement .lede { max-width: 60rem; }
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 64px); }
.promises h3 { font-size: calc(var(--fs-h3) * .9); margin-bottom: 8px; }
.promises p { font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 1099px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .promises { grid-template-columns: minmax(0, 1fr); } }

/* ---------- scroll scenes (after The Beaux Arts) ---------- */
.scene { position: relative; height: calc((var(--len, 3) + 1) * 100svh); background: var(--cacao); }
.scene-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.layer { position: absolute; inset: 0; will-change: clip-path; }
.layer > img, .layer > video { width: 100%; height: 100%; object-fit: cover; }
.scene .cap {
  position: absolute; left: 50%; bottom: clamp(26px, 5vh, 48px); z-index: 5; width: min(92%, 60rem);
  transform: translate(-50%, 10px); opacity: 0; text-align: center; color: var(--white);
  transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none;
}
.scene .cap.on { opacity: 1; transform: translate(-50%, 0); }
.cap b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); line-height: 1.3; }
.cap .label { margin-top: 8px; }
.scene-shade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 4; pointer-events: none; opacity: var(--shade, 1); background: linear-gradient(to top, rgb(var(--scrim) / .82), rgb(var(--scrim) / 0)); }
.reel { background: var(--oat); }
.reel .scene-stage { background: var(--oat); }

/* reveal: a solid panel slides away to uncover the film */
.reveal-panel {
  position: absolute; inset: 0; z-index: 6; background: var(--oat); color: var(--cacao);
  display: grid; align-content: center; padding: 96px calc(var(--rail) + var(--gut)) 110px;
  will-change: transform;
}
.reveal-panel .wrap { width: 100%; display: grid; gap: 28px; justify-items: center; text-align: center; }
.reveal-panel h1, .reveal-panel .h1 { font-size: clamp(3rem, 1.8rem + 4.2vw, 5.2rem); max-width: 14em; }
.reveal-panel .lede { max-width: 58rem; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
.reveal-panel.tone-mush { background: var(--mushroom); }
.cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; }
.cue::after { content: ""; width: 1px; height: 44px; background: currentColor; animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.reveal-film::after { content: ""; position: absolute; inset: 0; background: rgb(var(--scrim) / .16); }

/* process: one full-screen photograph per step */
.step-cap {
  position: absolute; z-index: 5; left: calc(var(--rail) + var(--gut)); right: calc(var(--rail) + var(--gut)); bottom: clamp(40px, 9vh, 96px);
  color: var(--white); display: grid; gap: 16px; max-width: 64rem;
  opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.step-cap.on { opacity: 1; transform: none; }
.step-cap p { font-size: var(--fs-lede); line-height: 1.6; max-width: 54rem; }
.steps-shade::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: var(--shade, 1); background: linear-gradient(to top, rgb(var(--scrim) / .9) 0%, rgb(var(--scrim) / .66) 36%, rgb(var(--scrim) / .12) 72%), linear-gradient(to right, rgb(var(--scrim) / .5), rgb(var(--scrim) / 0) 65%); }
.ticks { position: absolute; z-index: 5; top: clamp(24px, 4vh, 36px); left: 50%; transform: translateX(-50%); display: flex; gap: 16px; color: var(--white); }
.ticks span { width: 38px; height: 10px; opacity: .4; background: repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 5px); transition: opacity .5s var(--ease); }
.ticks span.on { opacity: 1; }
.scene-title { position: absolute; z-index: 5; top: clamp(76px, 12vh, 120px); left: calc(var(--rail) + var(--gut)); color: var(--white); display: grid; gap: 12px; }
.scene-title .h2 { max-width: 16em; }

/* the layered room: four renders of one bedroom, as the whole background */
.layers-cap { position: absolute; z-index: 5; left: 50%; bottom: clamp(28px, 6vh, 60px); transform: translateX(-50%); width: min(92%, 66rem); text-align: center; color: var(--white); display: grid; }
.layers-cap .cap-item { grid-area: 1 / 1; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.layers-cap .cap-item.on { opacity: 1; transform: none; }
.layers-cap b { display: block; font-family: var(--display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.1; }
.layers-cap p { font-size: var(--fs-lede); margin-top: 10px; }
.layers-cap .label { margin-bottom: 12px; }
.layers-shade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 4; opacity: var(--shade, 1); background: linear-gradient(to top, rgb(var(--scrim) / .93) 0%, rgb(var(--scrim) / .8) 40%, rgb(var(--scrim) / 0) 100%); pointer-events: none; }

/* no JS or reduced motion: every scene becomes a plain, readable stack */
.scene:not(.live) { height: auto; }
.scene:not(.live) .scene-stage { position: relative; height: auto; overflow: visible; }
.scene:not(.live) .layer { position: relative; inset: auto; height: 72svh; clip-path: none !important; opacity: 1 !important; }
.scene:not(.live) .reveal-panel { position: relative; inset: auto; min-height: 86svh; transform: none !important; }
.scene:not(.live) .cap, .scene:not(.live) .step-cap, .scene:not(.live) .scene-title { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; opacity: 1; width: auto; margin: 0 auto; padding: 24px var(--gut) 40px; max-width: 70rem; }
.scene:not(.live) .layers-cap { position: relative; left: auto; bottom: auto; transform: none; width: auto; display: block; padding: 24px var(--gut) 40px; }
.scene:not(.live) .layers-cap .cap-item { opacity: 1; transform: none; margin-bottom: 20px; }
.scene:not(.live) .ticks, .scene:not(.live) .cue { display: none; }
.scene:not(.live) .scene-shade::after, .scene:not(.live) .steps-shade::after, .scene:not(.live) .layers-shade::after { display: none; }
.scene:not(.live).reel .cap { color: var(--cacao); }

/* ---------- map ---------- */
.map-svg { width: 100%; height: auto; overflow: hidden; }
.map-svg .water { fill: var(--oat); }
.map-land path { fill: var(--ecru); stroke: var(--cacao); stroke-width: 1.25; stroke-linejoin: round; }
.map-states path { fill: none; stroke: var(--cacao); stroke-width: .6; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.map-waves path, .map-deco path, .map-deco circle { fill: none; stroke: var(--cacao); stroke-width: 1; stroke-linecap: round; }
.map-deco text { font-family: var(--label); font-weight: 300; font-size: 11px; letter-spacing: .32em; fill: var(--cacao); }
.map-deco .sea { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.pin .dot { fill: var(--cacao); }
/* an invisible tap target: the dot alone is ~1px on a phone */
.pin .hit { fill: transparent; stroke: none; }
a.pin { cursor: pointer; }
.pin .ring { fill: none; stroke: var(--cacao); stroke-width: 1; transform-box: fill-box; transform-origin: center; transition: transform .45s var(--ease); }
.pin text { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: .18em; font-size: 12.5px; fill: var(--cacao); paint-order: stroke; stroke: var(--ecru); stroke-width: 5px; stroke-linejoin: round; }
.pin text.sub { font-family: var(--body); font-size: 11.5px; letter-spacing: 0; text-transform: none; }
.pin:hover .ring, .pin:focus-visible .ring { transform: scale(1.5); }
.pin:focus { outline: none; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.map-legend a { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; text-decoration: none; padding: 4px 0; }
.map-legend a:hover { text-decoration: underline; text-underline-offset: 6px; }
.map-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.map-split .head { margin: 0; }
@media (max-width: 899px) { .map-split { grid-template-columns: minmax(0, 1fr); } .pin text { font-size: 20px; stroke-width: 7px; } .pin text.sub { display: none; } }

/* ---------- team ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; }
.person h3 { margin: 18px 0 4px; }
.person .label { margin-bottom: 14px; }
.person p { font-size: 1.02rem; line-height: 1.65; }
.person q { display: block; margin-top: 14px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.35; quotes: "\201C" "\201D"; }
@media (max-width: 899px) { .team { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }

/* ---------- inquiry, over a photograph ---------- */
.inquire { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(36px, 5vw, 96px); }
.inquire-aside { display: grid; gap: 22px; align-content: start; }
.inquire-aside dl { margin: 12px 0 0; display: grid; gap: 16px; }
.inquire-aside dd { margin: 4px 0 0; }
.inquire-aside dd a, .foot ul a { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; text-decoration: none; overflow-wrap: anywhere; }
.inquire-aside dd a:hover, .foot ul a:hover { text-decoration: underline; text-underline-offset: 5px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; }
.form .full { grid-column: 1 / -1; }
.form fieldset { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 28px; }
.form legend { padding: 0; margin-bottom: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--label); font-weight: 300; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; }
.field input, .field textarea {
  font: 300 1rem/1.5 var(--body); color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 10px 0; width: 100%; min-height: 46px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: inherit; opacity: .8; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-width: 2px; padding-bottom: 9px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 1.5px solid currentColor; outline-offset: 6px; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; justify-content: space-between; }
.form-foot p { font-size: .92rem; }
.form-status { grid-column: 1 / -1; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); }
.hp { position: absolute; left: -9999px; }
@media (max-width: 899px) { .inquire, .form, .form fieldset { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.foot { background: var(--cacao); color: var(--white); padding: 56px calc(var(--rail) + var(--gut)) 34px; border-top: 1px solid rgb(255 255 255 / .3); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px; max-width: var(--max); margin: 0 auto; }
.foot .logo { align-items: flex-start; }
.foot .logo b { font-size: 1.5rem; }
.foot ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.foot-base { max-width: var(--max); margin: 44px auto 0; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .88rem; }
@media (max-width: 899px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 559px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- page heroes (photograph) ---------- */
.hero { position: relative; min-height: 92svh; display: grid; align-items: end; color: var(--white); background: var(--cacao); overflow: hidden; isolation: isolate; }
.hero .bg-img { position: absolute; inset: 0; z-index: -2; }
.hero .bg-img img { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(var(--scrim) / .86) 0%, rgb(var(--scrim) / .56) 40%, rgb(var(--scrim) / .1) 75%), linear-gradient(to right, rgb(var(--scrim) / .48), rgb(var(--scrim) / 0) 60%), linear-gradient(to bottom, rgb(var(--scrim) / .4), rgb(var(--scrim) / 0) 20%); }
.hero-copy { padding: 0 calc(var(--rail) + var(--gut)) clamp(40px, 8vh, 88px); display: grid; gap: 22px; max-width: calc(66rem + var(--rail) * 2); }

/* ---------- work gallery ---------- */
.mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 14vw, 230px); gap: 10px; }
.mosaic > * { margin: 0; overflow: hidden; position: relative; }
.mosaic img, .mosaic video { width: 100%; height: 100%; object-fit: cover; }
.mosaic .w2 { grid-column: span 2; } .mosaic .w3 { grid-column: span 3; } .mosaic .w4 { grid-column: span 4; }
.mosaic .h2 { grid-row: span 2; } .mosaic .h3 { grid-row: span 3; }
.mosaic button { display: block; width: 100%; height: 100%; }
.mosaic button img { transition: transform 1s var(--ease); }
.mosaic button:hover img { transform: scale(1.03); }
@media (max-width: 899px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; }
  .mosaic .w2, .mosaic .w3, .mosaic .w4 { grid-column: span 2; }
  .mosaic .w1m { grid-column: span 1; }
  .mosaic .h2, .mosaic .h3 { grid-row: span 1; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip { font-family: var(--label); font-weight: 300; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; min-height: 42px; padding: 0 16px; border: 1px solid var(--cacao); }
.chip[aria-pressed="true"] { background: var(--cacao); color: var(--ecru); }
.gal + .gal { margin-top: 10px; }

/* ---------- destinations: each region is a photograph ---------- */
.region { min-height: 94svh; display: grid; align-items: end; }
.region-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: end; width: 100%; }
.region-copy { display: grid; gap: 16px; max-width: 48rem; }
.region-copy .glyph { width: 52px; height: 52px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.region-copy p:not(.label) { font-size: var(--fs-lede); line-height: 1.6; }
.region-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.region-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 899px) { .region-body { grid-template-columns: minmax(0, 1fr); } .region-strip img { aspect-ratio: 1; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 96px); align-items: center; }
.split .prose { display: grid; gap: 20px; }
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); } }
.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--fs-lede); }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 70; background: rgb(23 23 23 / .94); display: grid; place-items: center; padding: 56px 72px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.lb.open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.lb img { max-width: 100%; max-height: calc(100svh - 112px); object-fit: contain; }
.lb button { position: absolute; color: var(--white); font-family: var(--label); font-weight: 300; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; padding: 14px; }
.lb .lb-close { top: 10px; right: 14px; }
.lb .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
@media (max-width: 599px) { .lb { padding: 56px 12px; } .lb .lb-prev, .lb .lb-next { top: auto; bottom: 10px; transform: none; } }

/* one gentle reveal per block */
.js .rise { opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; transition: none; }
  .cue::after { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* rendering reel: captions read white over a full-bleed render, cacao under a frame */
.scene .cap.ink { color: var(--cacao); }
.reel-shade { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(to top, rgb(var(--scrim) / .82) 0%, rgb(var(--scrim) / .35) 42%, rgb(var(--scrim) / 0) 70%), linear-gradient(to bottom, rgb(var(--scrim) / .55), rgb(var(--scrim) / 0) 40%); }
.reel .layer { visibility: hidden; }
.reel .layer[data-r="a"] { visibility: visible; }
.scene:not(.live).reel .layer { visibility: visible; }
.scene:not(.live).reel .layer[data-r="b0"], .scene:not(.live).reel .layer[data-r="b2"] { display: none; }
.scene:not(.live) .reel-shade { display: none; }
.scene:not(.live).reel .scene-title { color: var(--cacao); }

/* the rails sit over photographs; a soft edge shade keeps them legible */
.steps-shade::before, .reveal-film::before, .reel .scene-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: var(--shade, 1);
  background: linear-gradient(to right, rgb(var(--scrim) / .38), rgb(var(--scrim) / 0) calc(var(--rail) * 1.8)),
              linear-gradient(to left, rgb(var(--scrim) / .38), rgb(var(--scrim) / 0) calc(var(--rail) * 1.8));
}
.reel .scene-stage::before { opacity: var(--edge, 1); transition: opacity .4s var(--ease); }
.reel[data-tone="light"] .scene-stage::before { opacity: 0; }
@media (max-width: 899px) { .ticks { top: 76px; } .scene-title { top: 110px; } }

/* the opening panel is the photograph you hovered on the gate, so the click
   lands on the same image; scrolling slides it away to uncover the film */
.reveal-panel.photo { background: var(--cacao); color: var(--white); isolation: isolate; }
.reveal-panel.photo .bg-img { position: absolute; inset: 0; z-index: -2; }
.reveal-panel.photo .bg-img img { width: 100%; height: 100%; object-fit: cover; }
.reveal-panel.photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(var(--scrim) / .58); }

/* pages cross-fade instead of flashing white between them */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }
html { background: var(--cacao); }

/* ---------- solid-panel intros (The Beaux Arts) ---------- */
.intro { z-index: 8; }
.reveal-panel.tone-cacao { background: var(--cacao); color: var(--white); }
.reveal-panel.tone-oat { background: var(--oat); }
.blinds { position: absolute; inset: 0; z-index: 8; display: flex; pointer-events: none; --panel: var(--oat); }
.blinds span { flex: 1 1 0; margin-right: -1px; background: var(--panel); will-change: transform; }
.doors, .shutters { position: absolute; inset: 0; z-index: 8; display: flex; pointer-events: none; --panel: var(--oat); }
.shutters { flex-direction: column; }
.doors span, .shutters span { flex: 1 1 0; background: var(--panel); will-change: transform; }
.doors span:first-child { margin-right: -1px; }
.shutters span { margin-bottom: -1px; }
.doors.ground-mush, .shutters.ground-mush { --panel: var(--mushroom); }
.doors.ground-cacao, .shutters.ground-cacao { --panel: var(--cacao); }
.blinds.ground-mush { --panel: var(--mushroom); }
.blinds.ground-cacao { --panel: var(--cacao); }
.intro-text { position: absolute; inset: 0; z-index: 9; display: grid; align-content: center; padding: 96px calc(var(--rail) + var(--gut)); color: var(--cacao); will-change: transform, opacity; }
.intro-text.on-cacao { color: var(--white); }
.intro-text .wrap { width: 100%; display: grid; gap: 26px; justify-items: center; text-align: center; }
.intro-text .lede { max-width: 58rem; }
.intro-text .promises { text-align: left; width: 100%; margin-top: 18px; }
.open-ground { background: var(--oat); }
.open-ground > .intro-text { align-content: start; padding-top: clamp(84px, 13vh, 140px); }
.open-ground > .intro-text .wrap { gap: 16px; }
@media (max-width: 899px) { .intro-text .promises { display: none; } }

.scene:not(.live) .blinds, .scene:not(.live) .doors, .scene:not(.live) .shutters { display: none; }
.scene:not(.live) .intro-text { position: relative; inset: auto; padding: 72px var(--gut) 40px; opacity: 1 !important; transform: none !important; }
.scene:not(.live) .intro-text .promises { display: grid; }
.scene:not(.live) .intro { position: relative; inset: auto; min-height: 0; transform: none !important; }

/* model-home walkthroughs (Panoraven 360 tours) */
.tone-cacao { background: var(--cacao); color: var(--white); }
.tour-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: 28px; }
.tour-head .chips { margin: 0; }
.tour .chip { border-color: currentColor; color: var(--white); }
.tour .chip[aria-selected="true"] { background: var(--white); color: var(--cacao); }
.tour-frame { position: relative; aspect-ratio: 16 / 9; max-height: 80svh; width: 100%; background: var(--black); }
.tour-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour-note { margin-top: 16px; font-size: .95rem; }
@media (max-width: 899px) { .tour-frame { aspect-ratio: 4 / 5; } }
.promises.promises-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .promises.promises-3 { grid-template-columns: minmax(0, 1fr); } }

/* the process, in writing (Elise, 2026-10-04): every step on one page, in order */
.written { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 0 clamp(20px, 2.4vw, 40px); counter-reset: w; }
.written li { counter-increment: w; padding: 22px 0 26px; border-top: 1px solid rgb(var(--scrim) / .35); display: grid; gap: 8px; align-content: start; }
.written li::before { content: counter(w, decimal-leading-zero); font-family: var(--label); font-weight: 300; font-size: .74rem; letter-spacing: .2em; }
.written h3 { font-size: calc(var(--fs-h3) * .86); }
.written p { font-size: 1rem; line-height: 1.6; }

/* legal pages: privacy, terms, accessibility */
.legal { padding-top: clamp(120px, 16vh, 180px); }
.legal-head { max-width: 46rem; display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 64px); }
.legal-date { font-size: .9rem; opacity: .75; }
.legal-body { max-width: 46rem; display: grid; gap: 14px; }
.legal-body h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-top: 22px; padding-top: 22px; border-top: 1px solid rgb(var(--scrim) / .25); }
.legal-body ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.legal-body a, .form-legal a { text-decoration: underline; text-underline-offset: 3px; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-legal a { text-decoration: none; }
.foot-legal a:hover, .foot-legal a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ---- the process, in writing: one page per audience, each step its own composition ---- */
.proc-hero { padding-top: clamp(140px, 20vh, 220px); }
.proc-hero .wrap { display: grid; gap: 18px; max-width: 62rem; }
.proc-back { text-decoration: none; opacity: .75; margin-bottom: 18px; }
.proc-back:hover, .proc-back:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.proc-index { background: var(--oat); padding: 0 calc(var(--rail) + var(--gut)) clamp(48px, 6vw, 80px); }
.proc-index ol { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); border-top: 1px solid rgb(var(--scrim) / .3); }
.proc-index a { display: grid; gap: 6px; padding: 18px 18px 0 0; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
.proc-index a span { font-family: var(--label); font-weight: 300; font-size: .74rem; letter-spacing: .2em; }
.proc-index a:hover, .proc-index a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }

.proc-step { scroll-margin-top: 24px; }
.proc-text { display: grid; gap: 14px; align-content: center; }
.proc-text .h2 { text-wrap: balance; }
.proc-num { font-family: var(--display); font-weight: 700; font-size: clamp(4.5rem, 3rem + 6vw, 9rem); line-height: .8; opacity: .55; margin-bottom: -6px; }
.proc-of { opacity: .7; margin-top: 6px; }

.proc-split .wrap, .proc-split-rev .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: center; max-width: var(--max); margin: 0 auto; }
.proc-split .proc-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.proc-split-rev .proc-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.proc-fig { margin: 0; }

.proc-band { position: relative; min-height: 88svh; display: grid; align-items: end; padding: 0 calc(var(--rail) + var(--gut)) clamp(40px, 7vh, 80px); }
.proc-band-img { position: absolute; inset: 0; }
.proc-band-img img { width: 100%; height: 100%; object-fit: cover; }
.proc-card { position: relative; background: var(--ecru); color: var(--cacao); max-width: 34rem; padding: clamp(28px, 3.4vw, 48px); }

.proc-dark .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(36px, 6vw, 110px); align-items: center; max-width: var(--max); margin: 0 auto; }
.proc-dark .proc-num { opacity: .6; }
.proc-inset { margin: 0; justify-self: end; width: min(100%, 360px); }
.proc-inset img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.proc-open .wrap { max-width: var(--max); margin: 0 auto; display: grid; gap: clamp(36px, 5vw, 64px); }
.proc-open .proc-text { max-width: 46rem; justify-self: center; text-align: center; justify-items: center; }
.proc-wide { margin: 0; }
.proc-wide img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

.proc-film { position: relative; min-height: 100svh; display: grid; place-items: center; background: var(--cacao); color: var(--white); overflow: hidden; text-align: center; }
.proc-film-media, .proc-film-shade { position: absolute; inset: 0; }
.proc-film-media video { width: 100%; height: 100%; object-fit: cover; }
.proc-film-shade { background: rgb(var(--scrim) / .5); }
.proc-film:not(.has-film) .proc-film-shade { display: none; }
.proc-film-text { position: relative; display: grid; gap: 28px; justify-items: center; padding: 0 calc(var(--rail) + var(--gut)); }
.proc-film-text .h1 { text-wrap: balance; max-width: 18ch; }
.btn-light { color: var(--white); border-color: currentColor; }
.btn-light:hover, .btn-light:focus-visible { background: var(--white); color: var(--cacao); border-color: var(--white); }

.proc-teaser-in { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; max-width: var(--max); margin: 0 auto; }
.proc-teaser-in > div { display: grid; gap: 14px; }

@media (max-width: 899px) {
  .proc-split .wrap, .proc-split-rev .wrap, .proc-dark .wrap { grid-template-columns: minmax(0, 1fr); }
  .proc-split-rev .proc-fig { order: -1; }
  .proc-inset { justify-self: start; width: min(70%, 320px); }
  .proc-band { min-height: 0; padding: 0; display: block; }
  .proc-band-img { position: relative; inset: auto; }
  .proc-band-img img { height: auto; aspect-ratio: 4 / 3; }
  .proc-card { max-width: none; }
  .proc-wide img { aspect-ratio: 4 / 3; }
  .proc-index a { padding-right: 12px; font-size: 1.02rem; }
}

/* "See it before it's built": a full screen of its own, Elise's fabric box film behind the words */
.see-film { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: var(--cacao); color: var(--white); text-align: center; padding: 96px calc(var(--rail) + var(--gut)); }
.see-film-media { position: absolute; inset: 0; }
.see-film-media video { width: 100%; height: 100%; object-fit: cover; }
.see-film-media::after { content: ""; position: absolute; inset: 0; background: rgb(var(--scrim) / .52); }
.see-film-text { position: relative; display: grid; gap: 22px; justify-items: center; max-width: 58rem; }
.see-film-text .h1 { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .see-film-media video { display: none; } }

/* inquiry: Elise's details as one organized contact card */
.contact-card { margin-top: 18px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .35); display: grid; gap: 6px; max-width: 26rem; }
.contact-card .cc-name { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.15; margin-top: 8px; }
.contact-card .cc-title { opacity: .85; font-size: .72rem; }
.inquire-aside .cc-rows { margin: 18px 0 0; gap: 0; display: grid; border-top: 1px solid rgb(255 255 255 / .2); }
.cc-rows > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / .2); }
.cc-rows dt { font-size: .72rem; }
.inquire-aside .cc-rows dd { margin: 0; }
.cc-rows dd a { font-family: var(--body); font-weight: 300; font-size: 1.02rem; letter-spacing: .01em; text-transform: none; text-decoration: none; overflow-wrap: anywhere; }
.cc-rows dd a:hover, .cc-rows dd a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }

/* ---- the five steps at a glance: one screen, a timeline through the numbers ---- */
.steps-overview { min-height: 100svh; display: grid; align-items: center; padding: clamp(40px, 7vh, 80px) calc(var(--rail) + var(--gut)); }
.so-in { max-width: var(--max); margin: 0 auto; width: 100%; display: grid; gap: clamp(22px, 4vh, 44px); }
.so-head { display: grid; gap: 12px; text-align: center; justify-items: center; }
.so-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); position: relative; }
.so-list.so-4 { --n: 4; }
.so-step { display: grid; grid-template-rows: auto 1fr; gap: 28px; }
.so-step figure { margin: 0; }
.so-step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.so-text { display: grid; gap: 6px; align-content: start; position: relative; padding-top: 22px; border-top: 1px solid rgb(var(--scrim) / .35); }
/* the timeline: each step's rule meets the next, with its number sitting on the line */
.so-num { position: absolute; top: -.72em; left: 0; background: var(--oat); padding-right: 10px; font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.so-text .label { font-size: .7rem; }
.so-text h3 { font-size: clamp(1.05rem, .85rem + .55vw, 1.4rem); line-height: 1.2; }
.so-text p { font-size: clamp(.86rem, .8rem + .18vw, .97rem); line-height: 1.55; }
@media (max-height: 760px) and (min-width: 900px) { .so-step img { aspect-ratio: 16 / 10; } .so-text p { font-size: .84rem; } }
@media (max-width: 899px) {
  .steps-overview { min-height: 100svh; padding: 76px var(--gut) 24px; }
  .so-in { gap: 14px; }
  .so-head h2 { font-size: 1.7rem; }
  .so-list, .so-list.so-4 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .so-step { grid-template-columns: 22% minmax(0, 1fr); grid-template-rows: none; gap: 12px; align-items: start; }
  .so-step img { aspect-ratio: 1; }
  .so-text { padding-top: 0; border-top: 0; gap: 2px; }
  .so-num { position: static; background: none; padding: 0; font-size: 1rem; }
  .so-text .label { display: none; }
  .so-text h3 { font-size: 1rem; }
  .so-text p { font-size: .78rem; line-height: 1.42; }
}

/* ---- destinations: every photograph opens large (the destination viewer) ---- */
.dv-thumb { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; overflow: hidden; }
.dv-thumb img { transition: transform .8s var(--ease), filter .5s var(--ease); }
.dv-thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0); transition: box-shadow .4s var(--ease); }
.dv-thumb:hover img, .dv-thumb:focus-visible img { transform: scale(1.06); filter: brightness(1.06); }
.dv-thumb:hover::after, .dv-thumb:focus-visible::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .85); }
.dv-open { margin-top: 18px; color: inherit; font-family: var(--label); font-weight: 300; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; background-color: transparent; border: 0; cursor: zoom-in; padding: .35em 0; }
html.dv-lock { overflow: hidden; }
.dv { position: fixed; inset: 0; z-index: 90; color: var(--white); display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 340px); grid-template-rows: minmax(0, 1fr) auto; }
.dv::before { content: ""; position: absolute; inset: 0; background: rgb(var(--scrim) / .96); opacity: 0; transition: opacity .45s var(--ease); }
.dv.open::before { opacity: 1; }
.dv.closing::before { opacity: 0; transition-duration: .4s; }
.dv-stage { position: relative; grid-row: 1 / 3; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: clamp(56px, 8vh, 88px) clamp(56px, 6vw, 96px) clamp(110px, 16vh, 150px); min-height: 0; }
.dv-img { max-width: 100%; max-height: calc(100svh - clamp(56px, 8vh, 88px) - clamp(110px, 16vh, 150px)); object-fit: contain; will-change: transform; box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.dv-meta { position: relative; grid-column: 2; align-self: center; display: grid; gap: 10px; padding: 0 clamp(24px, 3vw, 48px) 0 0; opacity: 0; transform: translateX(16px); transition: opacity .5s var(--ease) .25s, transform .6s var(--ease) .25s; }
.dv.open .dv-meta { opacity: 1; transform: none; }
.dv.closing .dv-meta { opacity: 0; transition-delay: 0s; }
.dv-glyph svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.dv-title { font-family: var(--display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.05; }
.dv-cap { font-size: .95rem; line-height: 1.55; opacity: .9; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .25); }
.dv-count { opacity: .8; }
.dv-rail { position: absolute; left: 50%; bottom: clamp(20px, 3.5vh, 36px); transform: translateX(calc(-50% - clamp(120px, 11vw, 170px))); display: flex; gap: 8px; opacity: 0; transition: opacity .5s var(--ease) .3s; }
.dv.open .dv-rail { opacity: 1; }
.dv.closing .dv-rail { opacity: 0; transition-delay: 0s; }
.dv-rail button { width: clamp(56px, 6vw, 84px); aspect-ratio: 4 / 3; padding: 0; border: 0; background: none; cursor: pointer; opacity: .5; outline-offset: 3px; transition: opacity .3s var(--ease); }
.dv-rail button img { width: 100%; height: 100%; object-fit: cover; }
.dv-rail button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 1px var(--white); }
.dv-rail button:hover, .dv-rail button:focus-visible { opacity: 1; }
.dv-btn, .dv-close { position: absolute; z-index: 2; color: var(--white); background: none; border: 0; cursor: pointer; padding: 14px; opacity: 0; transition: opacity .4s var(--ease) .3s; }
.dv.open .dv-btn, .dv.open .dv-close { opacity: .85; }
.dv-btn:hover, .dv-close:hover, .dv-btn:focus-visible, .dv-close:focus-visible { opacity: 1; }
.dv-btn svg { width: 30px; height: 14px; }
.dv-prev { left: clamp(8px, 1.5vw, 24px); top: 50%; transform: translateY(-50%); }
.dv-next { right: calc(clamp(240px, 22vw, 340px) + 8px); top: 50%; transform: translateY(-50%); }
.dv-close { top: 14px; right: 18px; font-size: .74rem; letter-spacing: .22em; }
@media (max-width: 899px) {
  .dv { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .dv-stage { grid-row: 1; padding: 64px 12px 12px; }
  .dv-img { max-height: calc(100svh - 64px - 12px - 250px); }
  .dv-meta { grid-column: 1; grid-row: 2; padding: 6px 20px 116px; gap: 4px; }
  .dv-title { font-size: 1.6rem; }
  .dv-glyph { display: none; }
  .dv-cap { font-size: .86rem; margin-top: 4px; padding-top: 8px; }
  .dv-rail { transform: translateX(-50%); bottom: 20px; }
  .dv-prev, .dv-next { top: auto; bottom: 22px; transform: none; }
  .dv-prev { left: 4px; } .dv-next { right: 4px; }
}
@media (prefers-reduced-motion: reduce) { .dv-thumb img { transition: none; } }

/* ===== Elise's revisions, 2026-10-09 ===== */
/* developers: the design partner words on the design-center rendering; four pillars set as type, no pictures */
.partner { position: relative; min-height: 100svh; display: grid; align-items: center; color: var(--white); background: var(--cacao); overflow: hidden; isolation: isolate; padding: clamp(96px, 14vh, 140px) calc(var(--rail) + var(--gut)) clamp(120px, 18vh, 170px); }
.partner-bg { position: absolute; inset: 0; z-index: -2; }
.partner-bg img { width: 100%; height: 100%; object-fit: cover; }
.partner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgb(var(--scrim) / .55), rgb(var(--scrim) / .62) 50%, rgb(var(--scrim) / .82)); }
.partner-in { max-width: var(--max); margin: 0 auto; width: 100%; display: grid; gap: clamp(36px, 6vh, 64px); }
.partner-in .h1 { max-width: 16ch; text-wrap: balance; }
.pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgb(255 255 255 / .45); }
.pillars li { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 3vh, 32px) clamp(18px, 2vw, 32px) 0; border-left: 1px solid rgb(255 255 255 / .22); }
.pillars li:first-child { border-left: 0; padding-left: 0; }
.pl-num { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: .9; color: rgb(255 255 255 / .9); }
.pillars h3 { font-size: calc(var(--fs-h3) * .9); }
.pillars p { font-size: 1.02rem; line-height: 1.6; opacity: .92; }
.partner-cap { position: absolute; left: calc(var(--rail) + var(--gut)); bottom: clamp(28px, 5vh, 52px); margin: 0; display: grid; gap: 6px; }
.partner-cap b { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
@media (max-width: 1099px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .pillars li:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 599px) { .pillars { grid-template-columns: minmax(0, 1fr); } .pillars li { border-left: 0; padding-left: 0; border-top: 1px solid rgb(255 255 255 / .22); } .pillars li:first-child { border-top: 0; } .partner-cap { position: static; margin-top: 36px; } .partner { padding-bottom: 56px; } }

/* developers: the model home words beside the 360 tours */
.model-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(32px, 4vw, 72px); align-items: center; max-width: var(--max); margin: 0 auto; }
.model-copy { display: grid; gap: 18px; align-content: center; }
.model-copy .h1 { text-wrap: balance; }
.model-copy .chips { margin-top: 10px; }
@media (max-width: 999px) { .model-in { grid-template-columns: minmax(0, 1fr); } }

/* developers: the five steps as opening panels (pillars preview, style E) */
.steps-e .se-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vh, 48px); }
.se-panels { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; height: clamp(380px, calc(100svh - 300px), 640px); }
.steps-e { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-top: clamp(56px, 8vh, 96px); padding-bottom: clamp(48px, 7vh, 88px); }
.se-panels li { flex: 1; min-width: 0; display: flex; transition: flex .7s var(--ease); }
.se-panels li:has(.se-panel.open) { flex: 3.2; }
.se-panel { position: relative; flex: 1; min-width: 0; overflow: hidden; border: 0; padding: 0; background: var(--black); color: var(--white); text-align: left; font: inherit; cursor: pointer; }
.se-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.se-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--scrim) / .9), rgb(var(--scrim) / .25) 62%, rgb(var(--scrim) / .1)); }
.se-in { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 8px; padding: clamp(18px, 2.2vw, 30px); }
.se-num { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.se-label { font-size: .68rem; opacity: .85; }
.se-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, .9rem + .7vw, 1.6rem); line-height: 1.15; }
.se-body { display: block; max-width: 30rem; font-size: .98rem; line-height: 1.55; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease), max-height .5s var(--ease); }
.se-panel.open .se-body { opacity: 1; max-height: 12em; transform: none; transition-delay: .2s; }
.se-panel.open img { transform: scale(1.03); }
.se-panel:not(.open) .se-label { display: none; }
.se-panel:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
@media (max-width: 899px) {
  .se-panels { flex-direction: column; height: auto; }
  .se-panels li, .se-panels li:has(.se-panel.open) { flex: none; }
  .se-panel { height: 320px; cursor: default; }
  .se-panel:not(.open) .se-label { display: block; }
  .se-body { opacity: 1; max-height: none; transform: none; }
}

/* renderings: the opening words sit on the first rendering, then give way to it */
.reel-intro { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 20px; text-align: center; color: var(--white); padding: 96px calc(var(--rail) + var(--gut)); background: rgb(var(--scrim) / .5); pointer-events: none; }
.reel-intro .lede { max-width: 58rem; }
.scene:not(.live) .reel-intro { position: relative; inset: auto; background: var(--cacao); }

/* homeowners: the steps listed on the three-meetings page */
.step-list { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(18px, 2vw, 36px); text-align: left; counter-reset: sl; }
.step-list li { counter-increment: sl; display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid currentColor; align-content: start; }
.step-list li::before { content: counter(sl, decimal-leading-zero); font-family: var(--label); font-size: .74rem; letter-spacing: .2em; }
.step-list b { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.step-list span { font-size: .95rem; line-height: 1.55; }
@media (max-width: 899px) { .step-list { grid-template-columns: minmax(0, 1fr); gap: 12px; } .step-list span { display: none; } }
.why-note { margin-top: 22px; max-width: 46rem; }
/* the floor plan reads best whole, on a light ground, rather than cropped */
.layer-plan { background: #fff; }
.layer-plan img { object-fit: contain !important; padding: clamp(28px, 5vh, 56px) clamp(16px, 4vw, 80px) clamp(150px, 22vh, 220px); }
/* the plan is drawn in soft greys: keep the step's dark wash off it, only under the words */
.layer-film video { width: 100%; height: 100%; object-fit: cover; }

/* inquire page: the form is the whole page */
.page-inquire #inquire { min-height: 100svh; padding-top: clamp(110px, 16vh, 170px); }

.steps-e > .wrap { width: 100%; max-width: var(--max); margin: 0 auto; }
.steps-shade::after { transition: opacity .6s var(--ease); }
.steps-shade.plan-on::after { opacity: 0 !important; }
.layer-plan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--scrim) / .88) 0%, rgb(var(--scrim) / .55) 20%, rgb(var(--scrim) / 0) 40%); pointer-events: none; }

/* developers: the opening photograph fills the whole screen */
.dev-hero { min-height: 100vh; min-height: 100svh; }

/* developers: the 360 walkthroughs are a page of their own: full screen, light, set apart from the dark sections either side */
.tour.model { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; color: var(--cacao); }
.tour.model .chip { border-color: var(--cacao); color: var(--cacao); background: transparent; }
.tour.model .chip[aria-selected="true"] { background: var(--cacao); color: var(--ecru); }
.tour.model .chip:hover:not([aria-selected="true"]) { background: rgb(var(--scrim) / .08); }
.tour.model .tour-frame { box-shadow: 0 24px 60px rgb(var(--scrim) / .22); }
.tour.model .tour-note { color: var(--cacao); opacity: .8; }

/* developers: the hero holds still while the next section slides up over it (one simple move, no script) */
.dev-hero { position: sticky; top: 0; z-index: 0; }
.dev-hero + .partner { position: relative; z-index: 1; box-shadow: 0 -24px 48px rgb(0 0 0 / .28); }

/* Big Sky: the bath photograph is wide; in the tall strip frame, centre it on the window and tub rather than splitting the mullion */
.region-strip img[src*="bs-morrow-21"] { object-position: 85% 50%; }

/* inquiry + footer = one screen: at the bottom of a page the form reaches the top edge, whole, with the footer beneath
   (desktop screens tall enough to hold both; shorter screens and phones scroll as before) */
@media (min-width: 900px) {
  .foot { padding-top: 34px; padding-bottom: 22px; }
  .foot ul { gap: 7px; margin-top: 10px; }
  .foot-base { margin-top: 22px; padding-top: 14px; }
}
@media (min-width: 900px) and (min-height: 700px) {
  #inquire, .page-inquire #inquire { min-height: calc(100svh - var(--foot-h, 300px)); display: grid; align-content: center; padding-top: clamp(64px, 9vh, 96px); padding-bottom: clamp(28px, 4vh, 44px); }
  #inquire .inquire-aside { gap: 14px; }
  #inquire .contact-card { margin-top: 8px; padding-top: 16px; }
  #inquire .cc-rows > div { padding: 10px 0; }
  #inquire .form { row-gap: 18px; }
  #inquire .form fieldset { row-gap: 18px; }
  #inquire .form legend { margin-bottom: 8px; }
  #inquire .field input { min-height: 40px; padding: 7px 0; }
  #inquire .field textarea { min-height: 84px; padding: 7px 0; }
  .page-inquire #inquire { padding-top: clamp(96px, 12vh, 120px); }
}
@media (min-width: 900px) and (min-height: 700px) and (max-height: 860px) {
  .foot { padding-top: 24px; padding-bottom: 16px; }
  .foot .logo b { font-size: 1.25rem; }
  .foot ul { gap: 4px; margin-top: 8px; }
  .foot-base { margin-top: 14px; padding-top: 10px; }
  #inquire, .page-inquire #inquire { padding-top: 56px; padding-bottom: 20px; }
  #inquire #inquire-title { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.3rem); }
  #inquire .inquire-aside { gap: 8px; }
  #inquire .contact-card { margin-top: 4px; padding-top: 10px; gap: 2px; }
  #inquire .cc-rows { margin-top: 8px; }
  #inquire .cc-rows > div { padding: 6px 0; }
  #inquire .form, #inquire .form fieldset { row-gap: 10px; }
  #inquire .field { gap: 2px; }
  #inquire .field input { min-height: 34px; padding: 5px 0; }
  #inquire .field textarea { min-height: 56px; padding: 5px 0; }
  #inquire .form-foot { gap: 10px 24px; }
  #inquire .form-foot p { font-size: .84rem; }
}

/* footer: the contact column is the widest (the email address); keep the address on one line */
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr) minmax(0, 1.35fr) minmax(0, .9fr); } .foot ul a[href^="mailto:"] { white-space: nowrap; } }

/* mid widths: four footer columns are too tight for the email address, so two columns */
@media (min-width: 900px) and (max-width: 1099px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* developers: text centred throughout (Hudson, 2026-10-09) */
.dev-hero { align-items: center; }
.dev-hero::before { background: linear-gradient(to bottom, rgb(var(--scrim) / .45), rgb(var(--scrim) / .55) 50%, rgb(var(--scrim) / .7)); }
.dev-hero .hero-copy { margin: 0 auto; padding-bottom: 0; text-align: center; justify-items: center; max-width: 64rem; }
.partner-in { text-align: center; justify-items: center; }
.partner-in .h1 { max-width: 20ch; margin: 0 auto; }
.pillars { width: 100%; }
.pillars li, .pillars li:first-child { justify-items: center; text-align: center; padding-left: clamp(18px, 2vw, 32px); padding-right: clamp(18px, 2vw, 32px); }
.partner-cap { left: 50%; transform: translateX(-50%); text-align: center; justify-items: center; width: max-content; max-width: 90%; }
.model-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(24px, 4vh, 40px); }
.model-copy { justify-items: center; max-width: 46rem; gap: 12px; }
.model-copy .chips { justify-content: center; margin-top: 4px; }
.tour.model { padding-top: clamp(48px, 7vh, 72px); padding-bottom: clamp(32px, 5vh, 52px); }
/* the tour takes whatever height the words leave on one screen (copy ~300px, note, gaps and padding ~200px) */
.model-tour { width: min(100%, calc((100svh - 560px) * 16 / 9)); min-width: min(100%, 400px); }
@media (min-width: 900px) and (max-height: 860px) {
  .model-copy .h1 { font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3rem); }
  .model-copy .lede { font-size: 1.05rem; }
  .model-copy p { font-size: .95rem; }
  .model-in { gap: 18px; }
  .model-tour { width: min(100%, calc((100svh - 470px) * 16 / 9)); }
}
.model-tour .tour-note { margin-top: 10px; }
.model-tour .tour-note { text-align: center; }
.steps-e .se-head { justify-items: center; text-align: center; }
@media (max-width: 599px) { .pillars li, .pillars li:first-child { padding-left: 0; padding-right: 0; } .partner-cap { transform: none; width: auto; max-width: none; } }

/* ===== Hudson's notes, 2026-10-09 afternoon ===== */
/* homeowners: the quote as type alone. A tall stretch of scroll; the words fill in one by one as you read down */
.quote-scroll { position: relative; height: 230vh; height: 230svh; background: var(--oat); color: var(--cacao); }
.qs-stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 0 calc(var(--rail) + var(--gut)); }
.qs-in { position: relative; max-width: 62rem; display: grid; gap: 28px; justify-items: center; text-align: center; }
.qs-mark { position: absolute; left: 50%; top: -.42em; transform: translateX(-50%); font-family: var(--display); font-weight: 700; font-size: clamp(14rem, 10rem + 18vw, 26rem); line-height: 1; color: rgb(var(--scrim) / .07); pointer-events: none; user-select: none; }
.qs-fig { margin: 0; display: grid; gap: 22px; justify-items: center; position: relative; }
.qs-quote { margin: 0; }
.qs-quote p { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.9rem); line-height: 1.14; text-wrap: balance; }
.qw { color: rgb(var(--scrim) / .56); transition: color .45s var(--ease); }  /* faint but still readable (3.3:1 for this large type) before it fills in */
.qw.lit { color: var(--cacao); }
.qs-by { letter-spacing: .3em; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.qs-sub { max-width: 44rem; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s; }
.quote-scroll.done .qs-by, .quote-scroll.done .qs-sub { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .quote-scroll { height: auto; } .qs-stick { position: relative; height: auto; padding-top: 96px; padding-bottom: 96px; } .qw { color: var(--cacao); } .qs-by, .qs-sub { opacity: 1; transform: none; } }

/* homeowners how it works: the panels take a video as easily as a photograph; step two, the plan, sits on tan */
.se-panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.se-panel.open video { transform: scale(1.03); }
.se-panel.se-plan { background: var(--mushroom); }
.se-panel.se-plan img { object-fit: contain; mix-blend-mode: multiply; padding: 7% 7% 34%; }
.se-panel.se-plan.open img { transform: scale(1.02); }
.se-panel.se-plan::after { background: linear-gradient(to top, rgb(var(--scrim) / .82), rgb(var(--scrim) / .35) 30%, rgb(var(--scrim) / 0) 52%); }
@media (max-width: 899px) { .se-panel.se-plan img { padding: 6% 18% 40%; } }

/* Alder & Tweed: the hero fills the screen; the statement sits on its photograph, caption kept */
.at-hero { min-height: 100vh; min-height: 100svh; }
.photo-statement .partner-in { justify-items: center; text-align: center; gap: 22px; }
.photo-statement .partner-in .h1 { max-width: 18ch; margin: 0 auto; }
.photo-statement .lede { max-width: 40rem; }

/* Alder & Tweed: three quiet transitions in the site's own vocabulary (Hudson, 2026-10-09)
   1. the hero holds while the story slides up over it   2. the photograph opens from a framed window to full bleed
   3. the photograph holds while the team slides up over it. Everything after a held section is opaque. */
@media (prefers-reduced-motion: no-preference) {
  .at-hero { position: sticky; top: 0; z-index: 0; }
  .at-story { z-index: 1; box-shadow: 0 -24px 48px rgb(0 0 0 / .28); }
  .at-open { position: sticky; top: 0; z-index: 1; }
  .at-open .partner-bg { clip-path: inset(var(--open-y, 0%) var(--open-x, 0%) round var(--open-r, 0px)); will-change: clip-path; }
  .at-open::before { clip-path: inset(var(--open-y, 0%) var(--open-x, 0%) round var(--open-r, 0px)); }   /* the shade opens with the photograph, so the margin stays oat */
  .at-open .partner-in, .at-open .partner-cap { opacity: var(--open-t, 1); }
  .at-team { z-index: 2; box-shadow: 0 -24px 48px rgb(0 0 0 / .22); }
  .at-visit { z-index: 2; }
}
.at-team { background: var(--ecru); }
.at-open { background: var(--oat); }

/* the footer sits above any held section (the Alder & Tweed hero is held for the whole page) */
.foot { position: relative; z-index: 5; }

/* developers: the 360 tour sits beside the words again (Hudson, 2026-10-10); the words stay centred in their column */
@media (min-width: 1000px) {
  .model-in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.45fr); align-items: center; justify-items: stretch; gap: clamp(36px, 4vw, 72px); }
  .model-copy { justify-items: center; text-align: center; max-width: 34rem; margin: 0 auto; }
  .model-copy .h1 { font-size: clamp(2.3rem, 1.6rem + 2vw, 3.6rem); }
  .model-tour, .model-tour { width: 100%; min-width: 0; }
  .tour.model { padding-top: clamp(64px, 9vh, 110px); padding-bottom: clamp(56px, 8vh, 96px); }
}

/* phones: the design-process renders follow the stage's subject (set by site.js); desktop is untouched */


/* phones: the scroll-driven sections take about half the scrolling (Hudson, 2026-10-10: too slow on mobile); desktop pacing unchanged */
@media (max-width: 899px) {
  .scene { height: calc((var(--len, 3) * .5 + 1) * 100svh); }
  .quote-scroll { height: 160svh; }
}

/* ===== phones: smoothness (measured in WebKit, iPhone 13 profile; desktop unchanged) ===== */
@media (max-width: 899px) {
  /* held ("sticky") sections cost a full repaint every frame on iPhone: they simply scroll on phones */
  .at-story, .at-team, .dev-hero + .partner { box-shadow: none; }
}
.tour-wake { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border: 0; color: var(--white); background: rgb(var(--scrim) / .55); cursor: pointer; font-size: .78rem; }
.tour-wake span { padding: 14px 18px; border: 1px solid currentColor; }

/* ===== phones: smoothness, round 2 ===== */
@media (max-width: 899px) {
  /* blocks are simply in place (the fade-ups cost every frame they run on an iPhone) */
  .js .rise { opacity: 1; transform: none; transition: none; }
  /* the moving pieces get their own GPU layer */
  .reveal-panel { will-change: transform; }
  .layers-shade > .layer, .reel .layer { will-change: opacity; }
  /* the design-process renders: full height, slid sideways by site.js (no object-position repaint) */
  .layers-shade > .layer { overflow: hidden; }
  .layers-shade > .layer img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; object-fit: fill; object-position: 0 0; will-change: transform; }
  /* the reel on phones: every rendering full screen */
  .reel .layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* ===== phones: smoothness, round 3 - stepped stages cross-fade with CSS (GPU) ===== */
@media (max-width: 899px) {
  .scene-stage.stepped > .layer { transition: opacity .7s cubic-bezier(.22, .61, .36, 1); }
  .scene-stage.stepped > .layer img { transition: transform 1.1s cubic-bezier(.22, .61, .36, 1); }
  .scene-stage.stepped .cap-item, .scene-stage.stepped > .cap { transition: opacity .5s ease, transform .5s ease; }
}


/* ===== phones: scroll-driven sections as full-screen slides (site.js phoneStack) ===== */
.scene.phone-stack { height: auto !important; background: var(--cacao); }
.scene.phone-stack > .scene-stage { position: relative !important; height: auto; overflow: visible; top: auto; }
.phone-stack .ps-slide { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--cacao); }
.phone-stack .ps-slide > .layer { position: absolute; inset: 0; opacity: 1 !important; visibility: visible !important; clip-path: none !important; transform: none !important; will-change: auto; }
.phone-stack .ps-slide > .layer img, .phone-stack .ps-slide > .layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none !important; left: 0; top: 0; }
/* the caption sits on its picture, on a soft shade */
.phone-stack .ps-cap { position: absolute !important; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 2; opacity: 1 !important; transform: none !important; margin: 0; padding: 120px 22px 44px; color: var(--white); text-align: center; display: grid; gap: 8px; justify-items: center; background: linear-gradient(to top, rgb(var(--scrim) / .9), rgb(var(--scrim) / .55) 55%, rgb(var(--scrim) / 0)); transition: none !important; }
.phone-stack .ps-cap b { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; }
.phone-stack .ps-cap p { font-size: .98rem; line-height: 1.55; max-width: 30rem; }
.phone-stack .cap-item.ps-cap { display: grid; }
/* section intros get their own screen */
.phone-stack .ps-intro { height: auto; min-height: 70svh; display: grid; align-items: center; background: var(--oat); color: var(--cacao); }
.phone-stack .ps-intro > .intro-text { position: relative !important; inset: auto; opacity: 1 !important; transform: none !important; padding: 72px 22px; color: var(--cacao); }
/* the opening panel (photo + headline) is one screen */
.phone-stack .ps-panel > .reveal-panel { position: absolute !important; inset: 0; transform: none !important; }
/* "See it before it's built" over the first rendering */
.phone-stack .reel-intro { opacity: 1 !important; }

/* phone slides beat the motion-off (not .live) layout rules they share a class path with */
.scene.phone-stack .ps-slide > .layer { position: absolute !important; inset: 0 !important; height: 100% !important; width: 100% !important; }
.scene.phone-stack .ps-cap { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; color: var(--white) !important; }
.scene.phone-stack .ps-panel > .reveal-panel { position: absolute !important; inset: 0 !important; min-height: 0 !important; }
.scene.phone-stack .reel-intro { position: absolute !important; inset: 0 !important; background: rgb(var(--scrim) / .5) !important; display: grid !important; z-index: 2; }

/* ===== phones: the scroll transitions, made smooth (2026-10-10) ===== */
@media (max-width: 899px) {
  /* every pinned stage and held section is its own GPU layer, so the phone moves it instead of repainting it */
  .scene.live > .scene-stage, .dev-hero, .at-hero, .at-open { will-change: transform; transform: translateZ(0); }
  .scene.live .layer, .scene.live .reveal-panel, .scene.live .intro-text, .scene.live .cap, .scene.live .cap-item { will-change: opacity, transform; }
  /* no drop shadow under sliding sections on phones (a large blurred shadow is repainted as it moves) */
  .at-story, .at-team, .dev-hero + .partner { box-shadow: none; }
}

/* phones: no caption on the developers design-partner section (Hudson, 2026-10-10); desktop keeps it */
@media (max-width: 899px) { .partner:not(.photo-statement) .partner-cap { display: none; } }

/* ===== inquiry: one form, a homeowner version and a developer version (Hudson, 2026-10-12) ===== */
.field select {
  font: 300 1rem/1.5 var(--body); color: inherit; background: transparent; width: 100%; min-height: 46px;
  border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 10px 28px 10px 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat;
}
.field select option { color: var(--cacao); background: var(--oat); }
.field select:focus-visible { outline: 1.5px solid currentColor; outline-offset: 6px; }
.form .aud-only .field { grid-column: span 2; }
@media (max-width: 899px) { .form .aud-only .field { grid-column: auto; } }
/* "I am a homeowner / a developer" (the Inquire page only) */
.aud-pick .aud-opts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.aud-opt { position: relative; display: block; cursor: pointer; }
.aud-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.aud-opt span { display: grid; gap: 4px; padding: 14px 18px; border: 1px solid rgb(255 255 255 / .45); transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.aud-opt b { font-family: var(--display); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.aud-opt small { font-size: .86rem; opacity: .85; }
.aud-opt:hover span { border-color: currentColor; }
.aud-opt input:checked + span { background: rgb(255 255 255 / .14); border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.aud-opt input:focus-visible + span { outline: 1.5px solid currentColor; outline-offset: 4px; }
@media (max-width: 520px) { .aud-pick .aud-opts { grid-template-columns: minmax(0, 1fr); } }

/* the Inquire button beside Menu opens a two-way choice */
.inq-choose {
  position: fixed; z-index: 60; width: 270px; padding: 18px 18px 14px; background: var(--oat); color: var(--cacao);
  box-shadow: 0 18px 50px rgb(0 0 0 / .22); display: grid; gap: 4px;
  opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.inq-choose.open { opacity: 1; transform: none; pointer-events: auto; }
.inq-choose .label { margin-bottom: 6px; }
.inq-choose a { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid rgb(0 0 0 / .14); text-decoration: none; color: inherit; }
.inq-choose a b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.inq-choose a small { font-size: .84rem; opacity: .8; }
.inq-choose a:hover b, .inq-choose a:focus-visible b { text-decoration: underline; text-underline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .inq-choose { transition: none; } }