/* Quintessence Homes. Page styles on top of scrollcraft.css (the engine's
   own stylesheet, which is never edited). Tokens first, then components. */

:root {
  --sc-canvas:     #FFFFFF;   /* white */
  --sc-surface:    #F6F5F2;
  --sc-ink:        #0B0B0B;   /* black */
  --sc-ink-soft:   #5C5C5C;
  --sc-accent:     #A67C2E;   /* gold, dark enough to read on white */
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Fraunces", Georgia, serif;
  --sc-font-text:    "Manrope", system-ui, sans-serif;
  --sc-shadow-color: 0 0% 4%;
  --qh-dark: #0B0B0B;
  --qh-r: 2px;                /* one radius, held everywhere */
}

/* ------------------------------------------------------------------ type -- */
.qh-h1, .qh-h2 {
  font-family: var(--sc-font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
.qh-h1 { font-size: clamp(2.7rem, 1.5rem + 4.9vw, 5.6rem); }
.qh-h2 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.04; }
.qh-h1 em, .qh-h2 em { font-style: italic; color: var(--sc-accent); }
.qh-label {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0;
}
.qh-lede {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--sc-ink-soft);
  max-width: 44ch;
  text-wrap: pretty;
  margin: 0;
}

/* --------------------------------------------------------------- chrome -- */
.qh-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sc-5);
  height: 5rem;
  flex: none;
}
.qh-mark { display: inline-flex; flex-direction: column; gap: 0.2rem; text-decoration: none; line-height: 1; }
.qh-mark__name { font-family: var(--sc-font-display); font-size: 1.45rem; letter-spacing: -0.01em; }
.qh-mark__sub { font-size: 0.56rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--sc-ink-soft); padding-left: 0.1em; }

.qh-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.qh-nav a:not(.qh-btn) {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--sc-ink-soft);
  padding-block: 0.9rem;
  transition: color 160ms var(--sc-ease-out);
}
.qh-nav a:not(.qh-btn):hover, .qh-nav a[aria-current="page"] { color: var(--sc-ink); }

.qh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.35rem;
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none;
  color: var(--sc-accent-ink); background: var(--sc-ink);
  border: 1px solid var(--sc-ink); border-radius: var(--qh-r);
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.qh-btn:hover { background: var(--sc-accent); border-color: var(--sc-accent); }
.qh-btn:active { transform: scale(0.97); }

/* ----------------------------------------------------------------- hero --
   One pinned stage. Paper ground, the headline on it, and a photographic plate
   that is a window (clip-path) onto full-stage images. site.js writes the
   custom properties below from scroll; the defaults are the no-script state:
   the three stages side by side. */
.qh-hero__stage {
  --it: clamp(22rem, 42svh, 27rem);          /* window inset, top    */
  --ib: 7svh;                                 /* window inset, bottom */
  --ix: var(--sc-gutter);                     /* window inset, sides  */
  --ot: 0px;                                  /* where the opened plate's top sits */
  --shut: 1;                                  /* 1 = framed, 0 = opened */
  --ax: 66vw;                                 /* where the finished room begins, plane-local px */
  --bc: 51vw; --bw: 30vw;                     /* the construction strip: centre and width, plane-local px */
  --sa: 66vw; --sd: 36vw;                     /* seams, stage px       */
  --k-old: 1; --k-new: 1;
  --o-during: 1; --o-after: 1;
  --plaque: 0; --dim: 1;
  background: var(--sc-canvas);
}
.qh-hero__top {
  position: absolute; inset: 0 0 auto 0; height: var(--it);
  padding-inline: var(--ix);
  display: flex; flex-direction: column;
  z-index: 1;
}
.qh-hero__copy { margin-top: auto; padding-bottom: 3.25rem; }
.qh-hero__copy .qh-lede { margin-top: 0.9rem; max-width: 60ch; }

.qh-plate {
  position: absolute; inset: var(--ot) 0 0 0; z-index: 2;
  clip-path: inset(calc((var(--it) - var(--ot)) * var(--shut)) calc(var(--ix) * var(--shut)) calc(var(--ib) * var(--shut)) calc(var(--ix) * var(--shut)));
  background: var(--sc-surface);
}
.qh-plane {
  position: absolute; inset: 0;
  /* The shift centres the photograph in the framed window, then eases out as
     the window opens, so the room appears to rise into place. */
  transform: translate3d(0, calc((var(--it) - var(--ot) - var(--ib)) / 2 * var(--shut)), 0) scale(var(--k));
  will-change: transform;
}
.qh-plane--old { --k: var(--k-old); }
.qh-plane--new { --k: var(--k-new); }
.qh-plane img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}
/* The middle stage is a portrait photograph of the work in progress. It is
   shown whole at stage height, carried along with the seam, and clipped to the
   strip between the two rooms, so the strip always shows the middle of it. */
.qh-plane img.qh-during {
  inset: 0 auto 0 0;
  width: max(calc((100svh - var(--ot)) * 0.75), 36vw);
  transform: translate3d(calc(var(--bc) - 50%), 0, 0);
  clip-path: inset(0 calc(50% - var(--bw) / 2));
  opacity: var(--o-during);
  will-change: transform, clip-path;
}
.qh-after  { clip-path: inset(0 0 0 var(--ax)); opacity: var(--o-after); }
.qh-seam {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: var(--sc-surface);
  opacity: var(--dim);
}
.qh-seam--d { transform: translate3d(var(--sd), 0, 0); background: var(--sc-accent); }
.qh-seam--a { transform: translate3d(var(--sa), 0, 0); }

.qh-plaque {
  position: absolute; left: 0; bottom: 0;
  transform: translate3d(calc(var(--ix) * var(--shut) + var(--sc-5)), calc(-1 * (var(--ib) * var(--shut) + var(--sc-5))), 0);
  max-width: min(24rem, calc(100vw - 2 * var(--sc-5)));
  padding: var(--sc-5) var(--sc-5) calc(var(--sc-5) - 0.15rem);
  background: var(--sc-canvas);
  border-radius: var(--qh-r);
  box-shadow: var(--sc-e2);
  opacity: var(--plaque);
}
.qh-plaque p:last-child {
  margin: 0.6rem 0 0;
  font-family: var(--sc-font-display); font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance;
}

/* The dimension string: the hero's only chrome. A measured line above the
   plate with one span per stage, the way a plan is dimensioned. */
.qh-dim {
  position: absolute; z-index: 3;
  left: var(--ix); right: var(--ix);
  top: calc(var(--it) - 2.25rem); height: 2.25rem;
  opacity: var(--dim);
  pointer-events: none;
}
.qh-dim__line { position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1px; background: var(--sc-hairline-strong); }
.qh-dim__tick { position: absolute; left: 0; bottom: 0; width: 1px; height: 0.95rem; background: var(--sc-ink-soft); }
.qh-dim__tick--end { left: auto; right: 0; }
.qh-dim__tick--d { transform: translate3d(var(--rd, 36vw), 0, 0); }
.qh-dim__tick--a { transform: translate3d(var(--ra, 66vw), 0, 0); }
.qh-dim__label {
  position: absolute; left: 0; top: 0;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1;
  color: var(--sc-ink-soft); white-space: nowrap;
  transform: translate3d(var(--x, 0px), 0, 0) translateX(-50%);
  opacity: var(--o, 1);
}

/* Entrance. Opacity and a short rise, staggered, on wrappers the scroll code
   never touches. */
@media (prefers-reduced-motion: no-preference) {
  .qh-hero .qh-head, .qh-hero .qh-h1, .qh-hero .qh-lede, .qh-hero .qh-dim__line {
    animation: qh-rise 900ms var(--sc-ease-out) both;
  }
  .qh-hero .qh-h1 { animation-delay: 90ms; }
  .qh-hero .qh-lede { animation-delay: 170ms; }
  .qh-hero .qh-dim__line { animation-delay: 240ms; }
}
@keyframes qh-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

/* --------------------------------------------------------------- ledger -- */
.qh-ledger { padding-block: clamp(3.5rem, 7vw, 7rem) var(--sc-section); }
.qh-ledger__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.qh-index { list-style: none; margin: var(--sc-7) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.qh-index li { border-bottom: 1px solid var(--sc-hairline-strong); }
.qh-index a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--sc-5); row-gap: 0.35rem;
  padding-block: clamp(1.4rem, 2.6vw, 2.2rem);
  text-decoration: none;
}
.qh-index__name {
  font-family: var(--sc-font-display); font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  line-height: 1.02; letter-spacing: -0.012em;
  transition: transform 180ms var(--sc-ease-out);
}
.qh-index__line { grid-column: 1; color: var(--sc-ink-soft); font-weight: 300; max-width: 46ch; }
.qh-index__go { grid-row: 1 / span 2; grid-column: 2; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--sc-accent); transition: transform 180ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .qh-index a:hover .qh-index__name { transform: translate3d(0.5rem, 0, 0); }
  .qh-index a:hover .qh-index__go { transform: translate3d(0.35rem, 0, 0); }
}
.qh-detail { margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--qh-r); background: var(--sc-surface); }
.qh-detail img { position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px); max-width: none; object-fit: cover; }

/* -------------------------------------------------------------- gallery -- */
.qh-rooms-shown { padding-bottom: var(--sc-section); }
.qh-gallery { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: var(--sc-7); align-items: start; }
.qh-gallery figure { margin: 0; }
.qh-gallery img { width: 100%; height: auto; border-radius: var(--qh-r); background: var(--sc-surface); }
.qh-gallery figcaption { margin-top: 0.75rem; }
.qh-gallery__a, .qh-gallery__b { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.qh-gallery__a { margin-top: clamp(3rem, 9vw, 9rem); }

/* ---------------------------------------------------------------- close --
   Dark ground. color is restated with the tokens, because it is inherited as a
   computed value and would otherwise keep the page's ink. */
.qh-close {
  --sc-canvas: var(--qh-dark); --sc-surface: #1A1A1A;
  --sc-ink: #FFFFFF; --sc-ink-soft: #A3A3A3;
  --sc-accent: #D4AF37; --sc-accent-ink: #0B0B0B;
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);
  background: var(--qh-dark); color: var(--sc-ink);
  padding-top: var(--sc-section);
}
.qh-close .qh-btn { color: var(--sc-accent-ink); background: var(--sc-ink); border-color: var(--sc-ink); }
.qh-close .qh-btn:hover { background: var(--sc-accent); border-color: var(--sc-accent); }
.qh-close__head { display: grid; gap: 0.9rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }

.qh-compare { --pos: 50; margin: 0; }
.qh-compare__frame {
  position: relative; container-type: inline-size;
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--qh-r);
  background: var(--sc-surface);
}
.qh-compare__pair { position: absolute; inset: 0; }
.qh-compare__pair[hidden] { display: none; }
.qh-compare__frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.qh-compare__after { clip-path: inset(0 0 0 calc(var(--pos) * 1%)); }
.qh-compare__handle {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: #FFFFFF;
  transform: translate3d(calc(var(--pos) * 1cqw), 0, 0);
  pointer-events: none;
}
.qh-compare__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 1.35rem no-repeat;
  box-shadow: 0 2px 6px hsl(0 0% 4% / 0.35), 0 10px 24px -6px hsl(0 0% 4% / 0.45);
  transition: transform 160ms var(--sc-ease-out);
}
.qh-compare__frame input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y;
}
.qh-compare__frame:has(input:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.qh-compare__frame:has(input:active) .qh-compare__handle::after { transform: scale(0.94); }
.qh-rooms { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); margin-bottom: var(--sc-4); }
.qh-rooms button {
  appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  min-height: 2.75rem; padding: 0;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-ink-soft); cursor: pointer;
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.qh-rooms button:hover, .qh-rooms a:hover { color: var(--sc-ink); }
.qh-rooms button[aria-pressed="true"], .qh-rooms a[aria-current="page"] { color: var(--sc-ink); border-bottom-color: currentColor; }
/* The same tabs as links: one per house on the previous-work pages. */
.qh-rooms a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  border-bottom: 1px solid transparent; text-decoration: none;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft);
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.qh-projects { align-items: center; margin-bottom: var(--sc-2); }
.qh-projects .qh-label { padding-right: var(--sc-5); margin-right: var(--sc-2); border-right: 1px solid var(--sc-hairline-strong); line-height: 1.6; }
.qh-compare figcaption { display: flex; justify-content: space-between; margin-top: 0.9rem; }

.qh-ask {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--sc-6);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.qh-ask .qh-h2 { max-width: 18ch; }

.qh-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sc-4) var(--sc-6);
  padding-block: var(--sc-6);
  border-top: 1px solid var(--sc-hairline-strong);
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.qh-foot nav { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); }
.qh-foot a { text-decoration: none; padding-block: 0.75rem; transition: color 160ms var(--sc-ease-out); }
.qh-foot a:hover { color: var(--sc-ink); }
.qh-foot p { margin: 0; }

/* ---------------------------------------------------------- inner pages -- */
.qh-page__head { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); display: grid; gap: 1.1rem; }
.qh-page__plate { margin: 0 0 var(--sc-section); }
.qh-page__plate > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--qh-r); }
.qh-page__plate .qh-compare figcaption { color: var(--sc-ink-soft); }
.qh-page .qh-close { padding-top: 0; margin-top: auto; }
/* The footer sits at the bottom of the screen even when a page is short. */
body.qh-page { min-height: 100svh; display: flex; flex-direction: column; }
.qh-page main { flex: 1; display: flex; flex-direction: column; }

.qh-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1rem, 3vw, 3rem); align-items: end; }
.qh-pair figure { margin: 0; }
.qh-pair img { width: 100%; height: auto; border-radius: var(--qh-r); }
.qh-pair figcaption { margin-top: 0.75rem; }
.qh-pair--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* The project page. */
.qh-block { margin-bottom: var(--sc-section); }
.qh-block__head { display: grid; gap: 0.9rem; }
.qh-block > .qh-h2 + *, .qh-block__head + * { margin-top: var(--sc-7); }
.qh-stage + .qh-stage { margin-top: var(--sc-8); }
.qh-stage > h3 { padding-bottom: 0.75rem; border-bottom: 1px solid var(--sc-hairline-strong); }
.qh-stage .qh-stages__row { margin-top: var(--sc-5); }
.qh-renders { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1rem, 3vw, 3rem); }
.qh-wide { margin-inline: 0; margin-bottom: 0; }
.qh-page__plate.qh-wide { margin-top: 0; margin-bottom: var(--sc-section); }
.qh-wide img, .qh-page__plate.qh-wide > img { width: 100%; height: auto; aspect-ratio: auto; border-radius: var(--qh-r); }
.qh-wide figcaption { margin-top: 0.75rem; }
.qh-renders figure { margin: 0; }
.qh-renders figure:nth-child(2) { grid-row: span 2; }
.qh-renders img { width: 100%; height: auto; border-radius: var(--qh-r); outline: 1px solid var(--sc-hairline-strong); outline-offset: -1px; }
.qh-renders figcaption, .qh-columns figcaption { margin-top: 0.75rem; }
.qh-columns { columns: 2; column-gap: clamp(1.5rem, 4vw, 4rem); margin-top: var(--sc-7); }
.qh-columns figure { margin: 0 0 clamp(2rem, 4vw, 4rem); break-inside: avoid; }
.qh-columns img { width: 100%; height: auto; border-radius: var(--qh-r); background: var(--sc-surface); }
.qh-headrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sc-3) var(--sc-6); }
.qh-more { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; text-underline-offset: 0.4em; padding-block: 0.75rem; }
.qh-stages__more { margin: var(--sc-6) 0 0; }
.qh-lede a { color: var(--sc-ink); }

/* One room at three stages. */
.qh-stages { margin-bottom: var(--sc-section); }
.qh-stages__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); margin-top: var(--sc-6); }
.qh-stages__row figure { margin: 0; }
.qh-stages__row img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--op, 50%) 50%; border-radius: var(--qh-r); }
.qh-stages__row figcaption { margin-top: 0.75rem; }

/* The header sheds links as it narrows: services first, then previous work,
   so it never wraps. Everything stays reachable from the page and the footer. */
@media (max-width: 1100px) { .qh-nav > a:not(.qh-btn) { display: none; } }
@media (max-width: 600px) { .qh-nav > a:not(.qh-btn) { display: none; } }

/* -------------------------------------------------------------- design -- */
.qh-steps { list-style: none; margin: var(--sc-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); counter-reset: step; }
.qh-steps li { counter-increment: step; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.qh-steps li::before { content: counter(step, decimal-leading-zero); display: block; font-size: 0.72rem; letter-spacing: 0.18em; color: var(--sc-ink-soft); margin-bottom: 0.9rem; }
.qh-steps h3 { margin: 0 0 0.6rem; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); line-height: 1.1; }
.qh-steps p { margin: 0; font-weight: 300; color: var(--sc-ink-soft); }
.qh-pair--match { align-items: start; margin-top: var(--sc-5); }
.qh-pair--match img { aspect-ratio: 4 / 3; object-fit: cover; }
.qh-pair--match .qh-fit img { object-fit: contain; background: #fff; }
.qh-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin-top: var(--sc-7); }
.qh-grid4 figure { margin: 0; }
.qh-grid4 img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--qh-r); }
.qh-grid4 figcaption { margin-top: 0.75rem; }
.qh-drawing img { background: #fff; outline: 1px solid var(--sc-hairline-strong); outline-offset: -1px; }
@media (max-width: 760px) {
  .qh-steps { grid-template-columns: minmax(0, 1fr); }
  .qh-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 760px) {
  .qh-head { height: 4.25rem; }
  .qh-mark__name { font-size: 1.25rem; }
  /* On a phone the plate is a tall frame under the headline, not a window onto
     a full-screen photograph: a landscape photo blown up to fill a portrait
     screen is three times its own resolution. It opens edge to edge and down to
     the bottom of the screen, and the headline stays. */
  .qh-hero__stage { --it: 24.5rem; --ib: 5svh; --ot: var(--it); }
  .qh-hero__copy { padding-bottom: 3rem; }
  /* Portrait crops: each photograph keeps its own subject in frame. */
  .qh-plane--old img { object-position: 66% 50%; }  /* the crew on the ladders */
  .qh-plane--new .qh-after { object-position: 55% 50%; }
  .qh-dim__label { font-size: 0.6rem; letter-spacing: 0.16em; }
  .qh-ledger__grid { grid-template-columns: minmax(0, 1fr); }
  .qh-detail { aspect-ratio: 4 / 3; order: -1; }
  .qh-compare__frame { aspect-ratio: 4 / 3; }
  .qh-compare__frame img { object-position: var(--op, 50%) 50%; }
  .qh-gallery { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the two columns would drift into each other. */
  .qh-gallery [data-sc-parallax] { transform: none !important; }
  .qh-gallery__a { margin-top: 0; }
  /* Before, during, after becomes a row to swipe through. */
  .qh-stages__row {
    display: flex; gap: 0.75rem; overflow-x: auto;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--sc-gutter)); padding-inline: var(--sc-gutter); scroll-padding-inline: var(--sc-gutter);
  }
  .qh-stages__row::-webkit-scrollbar, .qh-rooms::-webkit-scrollbar { display: none; }
  .qh-stages__row figure { flex: 0 0 80%; scroll-snap-align: start; }
  /* Room tabs stay on one line and scroll sideways. */
  .qh-rooms { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--sc-gutter)); padding-inline: var(--sc-gutter); }
  .qh-rooms > * { flex: none; }
  .qh-renders { grid-template-columns: minmax(0, 1fr); }
  .qh-renders figure:nth-child(2) { grid-row: auto; }
  .qh-columns { columns: 1; }
  .qh-pair { grid-template-columns: minmax(0, 1fr); }
  .qh-ask { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .qh-plane { transform: translate3d(0, calc((var(--it) - var(--ot) - var(--ib)) / 2), 0); }
  .qh-after { clip-path: none; }
  .qh-plane img.qh-during { inset: 0; width: 100%; transform: none; clip-path: none; }
  .qh-seam { display: none; }
}

/* -------------------------------------------------------------- contact -- */
.qh-contact { flex: 1; align-content: center; }
.qh-contact p:last-of-type { margin: var(--sc-4) 0 0; }
.qh-page__plate > img[src*="during"] { outline: 1px solid var(--sc-hairline-strong); outline-offset: -1px; }

/* --------------------------------------------------------- consultation -- */
.qh-consult { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.qh-consult__card { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--sc-surface); border-radius: var(--qh-r); box-shadow: var(--sc-edge), var(--sc-e1); }
.qh-consult__card > * { margin: 0; }
.qh-consult__card > * + * { margin-top: 0.75rem; }
.qh-consult__email { font-size: 1.05rem; color: var(--sc-ink); overflow-wrap: anywhere; }
.qh-steps--stack { grid-template-columns: minmax(0, 1fr); margin-top: var(--sc-5); }
.qh-actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.qh-btn--ghost { background: transparent; color: var(--sc-ink); }
.qh-btn--ghost:hover { background: var(--sc-ink); color: var(--sc-accent-ink); border-color: var(--sc-ink); }
.qh-lede a, .qh-steps a { color: var(--sc-ink); }
@media (max-width: 760px) { .qh-consult { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- social -- */
.qh-social { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sc-5); order: 3; }
.qh-social span { color: var(--sc-ink); }

/* ---------------------------------------------------------------- brand -- */
/* The wordmark. */
.qh-mark { flex-direction: row; align-items: center; gap: 0.7rem; }
.qh-mark__text { display: inline-flex; flex-direction: column; gap: 0.2rem; }
.qh-foot__contact { text-transform: none; letter-spacing: 0.04em; display: flex; flex-wrap: wrap; gap: 0 var(--sc-5); }

/* ----------------------------------------------------------------- team -- */
.qh-team { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: var(--sc-section); }
.qh-team__photo { margin: 0; display: grid; gap: 0.6rem; }
.qh-team__photo img { width: 100%; height: auto; align-self: start; border-radius: var(--qh-r); background: var(--sc-surface); }
.qh-team__text { display: grid; gap: 1rem; justify-items: start; }
.qh-team__text > * { margin: 0; }
.qh-consult__photo { display: block; width: 100%; max-width: 18rem; height: auto; border-radius: var(--qh-r); margin-bottom: 1.25rem !important; }

@media (max-width: 760px) {
  .qh-team { grid-template-columns: minmax(0, 1fr); }
}
.qh-mark__name { white-space: nowrap; }
@media (max-width: 420px) {
  .qh-mark { gap: 0.5rem; }
    .qh-mark__name { font-size: 1.08rem; }
  .qh-head { gap: var(--sc-3); }
  .qh-head .qh-btn { padding: 0 0.85rem; letter-spacing: 0.12em; }
}

/* ---------------------------------------------------------------- about -- */
.qh-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.qh-person { margin: 0; display: grid; gap: 1.25rem; align-content: start; }
.qh-person img { width: 100%; height: auto; align-self: start; border-radius: var(--qh-r); background: var(--sc-surface); }
.qh-person figcaption { display: grid; gap: 0.75rem; justify-items: start; }
.qh-person figcaption > * { margin: 0; }
.qh-team--flip { padding-block: 0; }
@media (max-width: 760px) { .qh-people { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------- faq, cards, related -- */
.qh-faq { margin-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); max-width: 52rem; }
.qh-faq__item { border-bottom: 1px solid var(--sc-hairline-strong); }
.qh-faq__item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding-block: 1.25rem; font-family: var(--sc-font-display); font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.2;
}
.qh-faq__item summary::-webkit-details-marker { display: none; }
.qh-faq__item summary::after { content: "+"; font-family: var(--sc-font-text); font-weight: 300; color: var(--sc-ink-soft); transition: transform 200ms var(--sc-ease-out); }
.qh-faq__item[open] summary::after { transform: rotate(45deg); }
.qh-faq__item p { margin: 0 0 1.4rem; max-width: 44rem; font-weight: 300; color: var(--sc-ink-soft); line-height: 1.6; }
.qh-related { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: var(--sc-6) 0 0; }
.qh-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.qh-card { display: grid; gap: 0.5rem; text-decoration: none; color: inherit; }
.qh-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--qh-r); background: var(--sc-surface); margin-bottom: 0.4rem; transition: opacity 200ms var(--sc-ease-out); }
.qh-card:hover img { opacity: 0.88; }
.qh-card__name { font-family: var(--sc-font-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.1; }
.qh-card__line { font-weight: 300; color: var(--sc-ink-soft); }
@media (max-width: 760px) { .qh-cards { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------- placeholders --
   Photo slots awaiting the client's own project photos (assets/ph-*.svg). */
.qh-note { margin-top: var(--sc-4); font-size: 0.8rem; color: var(--sc-ink-soft); }
.qh-checks { list-style: none; margin: var(--sc-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 4rem); max-width: 60rem; }
.qh-checks li { padding-block: 1rem; border-bottom: 1px solid var(--sc-hairline-strong); font-weight: 300; }
@media (max-width: 760px) { .qh-checks { grid-template-columns: minmax(0, 1fr); } }
.qh-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .qh-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .qh-steps--4 { grid-template-columns: minmax(0, 1fr); } }
.qh-related { display: flex; flex-wrap: wrap; gap: 0 var(--sc-6); }

/* ----------------------------------------------------------------- gold --
   White, black and gold: gold carries the rules and the one italic word. */
.qh-index { border-top-color: var(--sc-accent); }
.qh-dim__line { background: var(--sc-accent); }
.qh-close .qh-btn { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.qh-close .qh-btn:hover { background: #FFFFFF; border-color: #FFFFFF; }
.qh-close { border-top: 1px solid var(--sc-accent); }

/* ----------------------------------------------------------------- menu --
   Below 1100px the links fold into a native <details> menu. */
.qh-menu { display: none; position: relative; }
.qh-menu summary {
  list-style: none; cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink);
  border-bottom: 1px solid var(--sc-accent);
}
.qh-menu summary::-webkit-details-marker { display: none; }
.qh-menu[open] summary { color: var(--sc-accent); }
.qh-menu__panel {
  position: absolute; right: 0; top: calc(100% + 0.75rem); z-index: 50;
  display: grid; min-width: 15rem; padding: 0.75rem 1.25rem;
  background: var(--sc-canvas); border-top: 2px solid var(--sc-accent); box-shadow: var(--sc-e2);
}
.qh-menu__panel a {
  padding-block: 0.8rem; text-decoration: none; color: var(--sc-ink);
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid var(--sc-hairline);
}
.qh-menu__panel a:last-child { border-bottom: 0; }
.qh-menu__panel a[aria-current="page"] { color: var(--sc-accent); }
@media (max-width: 1100px) { .qh-menu { display: block; } }
@media (max-width: 420px) { .qh-nav { gap: 0.9rem; } }

/* ----------------------------------------------------------- quote form -- */
.qh-quote { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.qh-quote__text { display: grid; gap: 1.1rem; align-content: start; }
.qh-quote__text > * { margin: 0; }
.qh-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--sc-surface); border-top: 2px solid var(--sc-accent); }
.qh-field { display: grid; gap: 0.4rem; }
.qh-field--full { grid-column: 1 / -1; }
.qh-field label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.qh-field :is(input, select, textarea) {
  font: inherit; font-size: 1rem; color: var(--sc-ink); background: var(--sc-canvas);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--qh-r); padding: 0.75rem 0.85rem; min-height: 2.9rem; width: 100%;
}
.qh-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: var(--sc-accent); }
.qh-form .qh-btn { min-height: 3.25rem; }
.qh-form .qh-btn:disabled { opacity: 0.6; cursor: wait; }
.qh-form__note { margin: 0; min-height: 1.2em; color: var(--sc-ink); }
.qh-form__note:empty { display: none; }
.qh-form__fine { margin: 0; font-size: 0.8rem; color: var(--sc-ink-soft); }
.qh-form__fine a { color: var(--sc-ink); }
.qh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
  .qh-quote, .qh-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- prose -- */
.qh-prose { max-width: 44rem; }
.qh-prose p { font-weight: 300; line-height: 1.65; margin: 0 0 1.1rem; }
/* The hero header sits under the plate; lift it while its menu is open. */
.qh-hero__top:has(.qh-menu[open]) { z-index: 5; }