/* SC.Atelier — Smokedcraft Atelier. One-screen hub; the background word is the stage.
   Brand source of truth: clients/sc-atelier/brand.md.
   Structure: with no JS this is an ordinary stacked long page. Everything under
   html.js is the stage layer, enhancement only. */

/* ---------- Tokens — the whole palette lives here and nowhere else ---------- */
:root {
  --ivory: #F4F0E8;
  --paper: #FFFFFF;
  --ink: #121110;
  --ink-text: #1A1917;
  --body-ivory: #3A3733;
  --secondary-ivory: #57524B;
  --hairline-ivory: #DCD5C8;
  --grey-on-dark: #8C867C;
  --grey-on-light: #6B665E;
  --label-on-ink: #B8B1A6;
  --sand: #E9DECB;
  --ember: #C8472B;
  --ember-deep: #A63A22;
  --word: #E8E1D3;
  --ring-1: #E3DBCC;
  --ring-2: #EBE4D7;
  --shadow: rgba(18, 17, 16, 0.28);

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* One curve per job. The entrance curve is used by the entrance and nothing else. */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-stage: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-door: cubic-bezier(0.3, 0, 0.2, 1);
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);

  --stage-ms: 600ms;
  --word-size: clamp(180px, calc(23.2vw + 95px), 430px);
  --gutter: 20px;
  --topstrip-h: 36px;
}
@media (min-width: 720px) { :root { --gutter: 40px; } }

@property --bar-h { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --tick-h { syntax: '<length>'; inherits: true; initial-value: 44px; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body, h1, h2, h3, h4, p, figure, fieldset, legend { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

body {
  background: var(--ivory);
  color: var(--ink-text);
  font-family: var(--font-ui);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.view:focus { outline: none; }

.dot-ember { color: var(--ember); }

/* Small caps label voice */
.caps {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--grey-on-light);
}

/* ---------- Stage skeleton ---------- */
.stage { position: relative; }
.stage > .topstrip, .stage > .bar, .stage > .view, .stage > .ticker { position: relative; z-index: 1; isolation: isolate; }

/* LAYERS 1 + 2 — background. Without JS it covers the first screen only. */
.bg {
  position: absolute; top: 0; left: 0; right: 0; height: 100vh;
  overflow: hidden; z-index: 0; pointer-events: none;
  container-type: size;
}
html.js .bg { position: fixed; inset: 0; height: auto; }

.rings { position: absolute; top: -260px; right: -260px; width: 620px; height: 620px; }
.ring { position: absolute; border-radius: 50%; animation: spin 180s linear infinite; }
.ring i { position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--grey-on-dark); }
.ring--a { inset: 0; border: 1px solid var(--ring-1); }
.ring--b { inset: 110px; border: 1px solid var(--ring-2); animation-duration: 240s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.word {
  position: absolute; left: 0; right: 0; top: 50%;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--word-size); line-height: 1; letter-spacing: -0.03em;
  color: var(--word); white-space: nowrap;
  transform: translate3d(0, -0.72em, 0) scale(1);
  transform-origin: 0 0.8em;
  transition: transform var(--stage-ms) var(--ease-stage), opacity 200ms linear;
}
.word.is-swap { opacity: 0; }
.word__track { display: flex; width: max-content; animation: drift 110s linear infinite; will-change: transform; }
.word__set { display: flex; }
.word__item { padding-right: 0.5em; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
/* Stage: the word shrinks 430 → 260 (× 0.605) and sinks toward the bottom. */
html:not([data-stage="hub"]) .word { transform: translate3d(0, calc(38cqh - 0.72em), 0) scale(0.605); }

/* ---------- Top strip ---------- */
.topstrip {
  height: var(--topstrip-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--hairline-ivory);
  font-family: var(--font-ui); font-weight: 400; font-size: 9px;
  letter-spacing: 0.38em; text-transform: uppercase; color: var(--grey-on-light);
}
.topstrip p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topstrip p:last-child { flex: none; padding-left: 12px; }
@media (max-width: 480px) { .topstrip { letter-spacing: 0.24em; } }

/* ---------- Stage bar (62px) ---------- */
html:not(.js) .bar { display: none; }
.bar { overflow: hidden; }
.bar__in {
  height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--gutter); border-bottom: 1px solid var(--hairline-ivory);
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 400ms var(--ease-stage) 160ms, transform var(--stage-ms) var(--ease-stage) 60ms, visibility 0s;
}
html[data-stage="hub"] .bar__in {
  opacity: 0; transform: translateY(-14px); visibility: hidden;
  transition: opacity 200ms var(--ease-stage), transform 240ms var(--ease-stage), visibility 0s linear 240ms;
}
/* Compact mark, per brand.md: monogram 48px + "SC.Atelier" 30px, no divider, no subline. */
.bar__home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.bar__mark { height: 48px; width: auto; color: var(--ink-text); }
.bar__word { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1; }
.tabs { display: flex; height: 62px; margin-left: auto; margin-right: 8px; }
.tab {
  display: flex; align-items: center; padding: 0 clamp(10px, 2vw, 22px); min-width: 44px; justify-content: center;
  font-family: var(--font-ui); font-weight: 500; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; color: var(--secondary-ivory);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 180ms ease, border-color 180ms ease;
}
.tab[aria-current="page"] { color: var(--ink-text); border-bottom-color: var(--ember); }
.tab__short { display: none; }
.bar__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink-text); }
@media (max-width: 719px) {
  .tab__long { display: none; }
  .tab__short { display: inline; }
  .bar__word { font-size: 24px; }
  .tab { letter-spacing: 0.16em; padding: 0 10px; }
}
@media (max-width: 480px) { .bar__word { display: none; } }

/* ---------- Hub ---------- */
.hub {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px var(--gutter); text-align: center;
  min-height: calc(100vh - var(--topstrip-h) - 44px);
}
.hub__stack { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* Full primary logo (Lockup 1), brand.md: monogram · 40px gap · hairline divider
   (height ≈0.68× monogram) · 40px gap · wordmark stack. Monogram height ≈2.9×
   the wordmark font-size. Everything below is in em, driven by one font-size
   on the container, so the whole lockup scales as one piece — never
   re-proportioned part by part. Desktop hub only; the mobile hub has no
   approved stacked lockup, so it keeps the wordmark alone (see .sig for the
   monogram's mobile placement, in the bottom signature block). */
.lockup--hub {
  display: flex;
  align-items: center;
  font-size: clamp(38px, 5.4vw, 76px); /* = the wordmark size, desktop only */
}
.lockup--hub__mark, .lockup--hub__divider, .lockup--hub__full { display: none; }
.lockup--hub__word { text-align: left; }
.lockup--hub__name {
  /* Mobile: no approved stacked lockup, so the wordmark stays exactly as it
     was — its own size, not tied to the desktop lockup's ratio system. */
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(52px, 7vw, 86px); line-height: 1; letter-spacing: 0.01em;
}
@media (min-width: 720px) {
  .lockup--hub__mark { display: block; height: 2.9em; width: auto; color: var(--ink-text); flex-shrink: 0; }
  .lockup--hub__divider {
    display: block;
    width: 1px; height: calc(0.68 * 2.9em); /* 0.68 × monogram height */
    background: var(--grey-on-light); opacity: 0.5;
    margin: 0 0.526em; /* 40px at a 76px wordmark */
    flex-shrink: 0;
  }
  .lockup--hub__full {
    display: block;
    margin-top: 0.184em; /* 14px at a 76px wordmark */
    font-family: var(--font-ui); font-weight: 400;
    font-size: max(0.16em, 10px); letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--grey-on-light); white-space: nowrap;
  }
  .lockup--hub__name { font-size: 1em; }
}

.hub__sub {
  margin: 18px 0 40px;
  font-family: var(--font-ui); font-weight: 400; font-size: 10px;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--grey-on-light);
}
.doors { width: min(780px, 100%); margin-bottom: 40px; }
.doors ul { display: flex; border-top: 1px solid var(--hairline-ivory); border-bottom: 1px solid var(--hairline-ivory); }
.doors li { flex: 1; }
.doors li + li { border-left: 1px solid var(--hairline-ivory); }
.door {
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
  min-height: 64px; padding: 16px 20px; text-decoration: none;
}
.door__no {
  width: 22px; text-align: right;
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 18px;
  color: var(--grey-on-light);
  transition: transform 180ms var(--ease-door), color 180ms var(--ease-door);
}
.door__label { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.1; }
.door:focus-visible .door__no { transform: translateX(2px); color: var(--ember); }
@media (hover: hover) and (pointer: fine) {
  .door:hover .door__no { transform: translateX(2px); color: var(--ember); }
}

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 34px;
  background: var(--ember); color: var(--paper); border-radius: 2px;
  font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease-ui), background-color 180ms ease, color 180ms ease;
}
.cta:hover { background: var(--ember-deep); }
.cta:active { transform: scale(0.97); }
.cta--full { width: 100%; }
.cta--outline { background: transparent; color: var(--ink-text); box-shadow: inset 0 0 0 1px var(--ink-text); }
.cta--outline:hover { background: var(--ink-text); color: var(--ivory); }
.cta[aria-disabled="true"] { background: var(--hairline-ivory); color: var(--secondary-ivory); }
.cta[aria-disabled="true"]:hover { background: var(--hairline-ivory); }
.send-note { margin-top: 10px; font-size: 13px; color: var(--secondary-ivory); }

.colophon { margin-top: 28px; font-family: var(--font-ui); font-weight: 400; font-size: 9px; letter-spacing: 0.38em; text-transform: uppercase; color: var(--grey-on-light); }
/* Free preview round strip on the hub (hidden by script after the close date) */
/* Ink tag: the one dark block on the ivory hub, so it reads apart from the ember Get a price button.
   Glow = an ember halo on a pseudo-element that breathes by opacity only (never a band or wash behind content).
   Dot = a live marker whose ring expands by transform/opacity. Under reduced motion style.css stops both
   animations; the halo then stays at its resting opacity. */
.pvstrip { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 440px; min-height: 44px; margin-top: 22px; padding: 4px 14px; background: var(--ink); font-family: var(--font-ui); font-weight: 400; font-size: 11px; letter-spacing: 0.18em; line-height: 1.5; text-transform: uppercase; text-align: center; text-decoration: none; color: var(--ivory); }
.pvstrip::before { content: ""; position: absolute; inset: 0; z-index: -1; box-shadow: 0 0 22px 3px rgba(200, 71, 43, 0.55); opacity: 0.55; animation: pv-aura 2.8s ease-in-out infinite alternate; pointer-events: none; }
@keyframes pv-aura { to { opacity: 1; } }
.pvstrip__dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.pvstrip__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ember); opacity: 0.6; animation: pv-ping 1.8s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
@keyframes pv-ping { to { transform: scale(2.6); opacity: 0; } }
.pvstrip__arr { flex: none; width: 14px; height: 10px; transition: transform 180ms var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .pvstrip:hover .pvstrip__arr { transform: translateX(3px); } }
.pvstrip:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.pvstrip__short { display: none; }
/* Quiet link to /try under the preview strip */
.trylink { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-family: var(--font-ui); font-weight: 400; font-size: 14px; color: var(--ink-text); text-decoration: underline; text-decoration-color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ns-jump { margin-top: 20px; font-size: 13px; color: var(--secondary-ivory); }

/* Corner marginalia */
.hub__marg { position: absolute; inset: 0; pointer-events: none; }
.marg {
  position: absolute; margin: 0;
  font-family: var(--font-ui); font-weight: 400; font-size: 9px;
  letter-spacing: 0.38em; text-transform: uppercase; color: var(--grey-on-light);
}
.marg--tl { top: 18px; left: var(--gutter); }
.marg--tr { top: 18px; right: var(--gutter); text-align: right; }
.marg--bl { bottom: 16px; left: var(--gutter); }
.marg--br { bottom: 16px; right: var(--gutter); text-align: right; }

/* Ticker (existing CSS marquee) */
.ticker { background: var(--ink); color: var(--ivory); overflow: hidden; height: 44px; display: flex; align-items: center; }
.ticker__track { display: flex; width: max-content; animation: ticker 32s linear infinite; }
.ticker__set { display: flex; align-items: center; white-space: nowrap; padding-right: 40px; }
.ticker__set span { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; padding: 0 18px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Entrance — once on load. backwards fill: after it ends, normal styles (and state transitions) apply. */
.enter { animation: enter 640ms var(--ease-enter) var(--d, 0ms) backwards; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Panels (shared) ---------- */
.panel { display: flex; flex-direction: column; }
.panel__body { flex: 1; padding: clamp(24px, 3.2vw, 40px) var(--gutter); }
.panel__h {
  font-family: var(--font-display); font-weight: 400; line-height: 1.08;
  font-size: clamp(34px, 5vw, 56px); margin-bottom: 32px;
}
.panel__h em { font-style: italic; font-weight: 500; color: var(--ember); }
.foot {
  min-height: 52px; padding: 8px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  border-top: 1px solid var(--hairline-ivory);
}
.foot p { margin: 0; }
.foot__fact { font-family: var(--font-ui); font-weight: 400; font-size: 9px; letter-spacing: 0.38em; text-transform: uppercase; color: var(--grey-on-light); }
.foot__line { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 20px; color: var(--ember); }

/* No JS: a plain stacked page */
html:not(.js) .panel { border-top: 1px solid var(--hairline-ivory); }
html:not(.js) .panel__body { max-width: 1180px; margin: 0 auto; padding-top: 64px; padding-bottom: 64px; }
html:not(.js) .foot { display: none; }
html:not(.js) .js-only { display: none; }
html.js .nojs-only { display: none; }
html:not(.js) .est-mini { display: none; }

/* ---------- Work ---------- */
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(2, minmax(0, 280px)); gap: 44px 28px; justify-content: center; } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(4, minmax(0, 264px)); gap: 28px; } }
.tiles > li { min-width: 0; }
.tile { display: block; text-decoration: none; color: inherit; }
.tile__frame {
  display: block; aspect-ratio: 390 / 844; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
  border-radius: 18px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--hairline-ivory), 0 20px 40px -24px var(--shadow);
  transition: transform 240ms var(--ease-ui), box-shadow 240ms var(--ease-ui);
}
.tile__frame::-webkit-scrollbar { display: none; }
.tile__frame img { width: 100%; height: auto; }
.tile:active .tile__frame,
.tile:focus-visible .tile__frame {
  transform: translateY(-8px);
  box-shadow: 0 0 0 1.5px var(--ember), 0 28px 44px -22px var(--shadow);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile__frame {
    transform: translateY(-8px);
    box-shadow: 0 0 0 1.5px var(--ember), 0 28px 44px -22px var(--shadow);
  }
}
.tile:focus-visible { outline: none; }
.tile__cap { display: block; margin-top: 16px; }
.tile__no { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 15px; color: var(--ember); }
.tile__name { display: block; font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.15; margin-top: 2px; }
.tile__line { display: block; font-family: var(--font-ui); font-weight: 300; font-size: 13px; line-height: 1.45; color: var(--body-ivory); margin-top: 4px; min-height: 2.9em; /* two lines, so every tile's list starts on the same line */ }

/* What is on each site, and (Moon, Haishah) what the owner can do from a phone. Text only,
   never a link: the owner pages are private. */
.tile__on { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline-ivory); }
.on__label { font-family: var(--font-ui); font-weight: 400; font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--grey-on-light); margin-bottom: 6px; }
.on__list li { font-family: var(--font-ui); font-weight: 300; font-size: 13px; line-height: 1.4; color: var(--body-ivory); padding: 3px 0; }
.tile__owner { margin-top: 14px; padding: 14px 14px 11px; background: var(--ink-text); border-radius: 2px; }
.tile__owner .on__label { color: var(--label-on-ink); }
.tile__owner .on__list li { color: var(--ivory); }
@media (max-width: 719px) {
  /* Phone left, text right: the caption and lists sit beside the screenshot, not under it. */
  .tiles > li { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .tile { display: contents; }
  .tile__frame { grid-column: 1; grid-row: 1 / span 3; }
  .tile__cap { grid-column: 2; grid-row: 1; margin-top: 0; }
  .tile__on { grid-column: 2; grid-row: 2; }
  .tile__owner { grid-column: 2; grid-row: 3; }
}

/* Tools we build: two demos, kept apart from the four client tiles. Sand band, full bleed. */
.tools { background: var(--sand); padding: clamp(40px, 6vw, 72px) var(--gutter); }
.tools__in { max-width: 1180px; margin: 0 auto; }
.tools__h { font-family: var(--font-display); font-weight: 400; line-height: 1.08; font-size: clamp(34px, 5vw, 56px); margin-bottom: 14px; }
.tools__h em { font-style: italic; font-weight: 500; color: var(--ember); }
.tools__lede { font-family: var(--font-ui); font-weight: 300; font-size: 16px; line-height: 1.55; color: var(--body-ivory); max-width: 60ch; margin-bottom: 32px; }
.tools__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 720px) { .tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
.tool { display: block; text-decoration: none; color: inherit; }
.tool__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); border-radius: 2px; box-shadow: 0 0 0 1px rgba(26, 25, 23, 0.16); }
.tool__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tool__tag { display: inline-block; margin: 18px 0 10px; padding: 5px 9px 4px; background: var(--ember); color: var(--paper); border-radius: 2px; font-family: var(--font-ui); font-weight: 500; font-size: 9px; line-height: 1; letter-spacing: 0.32em; text-transform: uppercase; }
.tool__name { display: block; font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.12; }
.tool__line { display: block; margin-top: 6px; max-width: 46ch; font-family: var(--font-ui); font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--body-ivory); }
.tool__go { display: inline-block; margin-top: 16px; padding: 12px 0 3px; border-bottom: 1px solid var(--ember); font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }
.tool:focus-visible { outline: none; }
.tool:focus-visible .tool__go { outline: 2px solid var(--ember); outline-offset: 4px; }

/* Footer strip: the right-hand cell carries the Instagram link beside the fact */
.foot__end { display: flex; align-items: center; gap: 0 20px; flex-wrap: wrap; }
.foot__ig { display: inline-block; padding: 12px 0; font-family: var(--font-ui); font-weight: 400; font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--grey-on-light); text-decoration: none; border-bottom: 1px solid transparent; transition: color 180ms ease, border-color 180ms ease; }
.foot__ig:hover { color: var(--ink-text); border-bottom-color: var(--ember); }
.colophon .foot__ig { padding: 0 0 2px; font-size: inherit; letter-spacing: inherit; }
/* The domain keeps its capitals (SCAtelierBN.com), so it opts out of the uppercase footer labels */
.foot__fact.foot__domain, .colophon .foot__domain { text-transform: none; letter-spacing: 0.08em; font-size: 11px; }

/* ---------- What it costs ---------- */
.costs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1000px) {
  .costs { grid-template-columns: minmax(0, 790px) minmax(0, 1fr); gap: 0; }
  html.js .costs .est { border-left: 1px solid var(--hairline-ivory); padding-left: 40px; margin-left: 0; }
}
html:not(.js) .costs { grid-template-columns: minmax(0, 1fr); }

.costs__q { padding-right: 0; }
@media (min-width: 1000px) { .costs__q { padding-right: 48px; } }

.q { display: block; padding: 18px 0; border-top: 1px solid var(--hairline-ivory); }
.q:first-child { border-top: 0; padding-top: 0; }
.q__legend { display: flex; align-items: baseline; gap: 14px; float: left; width: 100%; padding: 0; margin-bottom: 12px; }
.q__legend + * { clear: both; }
.q__no { flex: 0 0 30px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 20px; color: var(--grey-on-light); }
.q__text { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.15; }
.q__text small { display: block; margin-top: 4px; font-family: var(--font-ui); font-weight: 300; font-size: 13px; line-height: 1.4; color: var(--secondary-ivory); }
.q > .chips, .q > .input, .q > .social, .q > .linkbtn, .q > .reveal-field { margin-left: 44px; }
.q > .input { width: calc(100% - 44px); }
@media (max-width: 480px) {
  .q > .chips, .q > .input, .q > .social, .q > .linkbtn, .q > .reveal-field { margin-left: 0; }
  .q > .input { width: 100%; }
}

.branch { opacity: 1; transform: none; transition: opacity 240ms var(--ease-ui), transform 240ms var(--ease-ui); }
@starting-style { .branch { opacity: 0; transform: translateY(-8px); } }
.reveal-field { opacity: 1; transform: none; transition: opacity 240ms var(--ease-ui), transform 240ms var(--ease-ui); }
@starting-style { .reveal-field { opacity: 0; transform: translateY(-8px); } }
.reveal-field .input { margin-top: 6px; }
.mini { display: block; margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secondary-ivory); }
.q-hint { margin-top: 10px; margin-left: 44px; font-size: 13px; line-height: 1.4; color: var(--secondary-ivory); }
@media (max-width: 480px) { .q-hint { margin-left: 0; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--hairline-ivory); border-radius: 2px; background: var(--paper);
  font-size: 14px; font-weight: 400; color: var(--body-ivory);
  transition: transform 160ms var(--ease-ui), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ivory); }

.input {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--hairline-ivory); border-radius: 2px; background: var(--paper);
  font-family: var(--font-ui); font-size: 16px; font-weight: 400; color: var(--ink-text);
  transition: border-color 160ms ease;
}
.input::placeholder { color: var(--grey-on-light); opacity: 0.8; }
.input:focus { outline: none; border-color: var(--ember); }

.social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.social__row { display: flex; gap: 8px; }
.social__rm { flex: 0 0 48px; width: 48px; min-height: 48px; border: 1px solid var(--hairline-ivory); border-radius: 2px; background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--secondary-ivory); }
.social__rm:hover { color: var(--ember); }
.linkbtn {
  padding: 0 0 3px; min-height: 0; border-bottom: 1px solid var(--ember);
  font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
}

/* Estimate pane */
.est__label { font-family: var(--font-ui); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--secondary-ivory); margin-bottom: 12px; }
.est__view { margin-bottom: 24px; }
.est__band { font-family: var(--font-display); font-weight: 500; font-size: clamp(42px, 5vw, 56px); line-height: 1; margin-bottom: 4px; }
.est__big { font-family: var(--font-display); font-weight: 500; font-size: clamp(42px, 5vw, 56px); line-height: 1; }
.est__sub { margin-top: 8px; font-size: 15px; color: var(--body-ivory); }
.est__ember { margin-top: 20px; font-family: var(--font-ui); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember-deep); }

.bands li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 14px 0; border-top: 1px solid var(--hairline-ivory); }
.bands li:first-child { border-top: 0; padding-top: 0; }
.band__name { font-family: var(--font-display); font-weight: 500; font-size: 22px; }
.band__price { font-family: var(--font-display); font-weight: 500; font-size: 24px; white-space: nowrap; }
.band__line { flex: 1 0 100%; order: 3; font-size: 13.5px; color: var(--secondary-ivory); }
@media (max-width: 480px) {
  .band__name { font-size: 20px; }
  .band__price { font-size: 20px; }
}

.halves { margin: 18px 0; padding: 14px 18px; border: 1px solid var(--ember); border-radius: 2px; }
.halves__t { font-family: var(--font-ui); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-text); margin-bottom: 4px; }
.halves__l { font-size: 15px; color: var(--body-ivory); }
.notes p { margin-top: 8px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.25; color: var(--ember); }

.points li { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hairline-ivory); font-size: 16px; color: var(--body-ivory); }
.points { margin-top: 20px; }
.points span { flex: 0 0 26px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 18px; color: var(--grey-on-light); }

.est__inc { margin-bottom: 24px; }
.inc { font-size: 14px; line-height: 1.6; color: var(--body-ivory); margin-bottom: 16px; }
.msg { padding: 16px 18px; margin-bottom: 14px; background: var(--sand); border-radius: 2px; font-size: 14px; line-height: 1.6; color: var(--ink-text); white-space: pre-line; }
.est__send { margin-bottom: 8px; }

.est-mini { display: none; }
@media (max-width: 999px) {
  html.js .est-mini {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    position: sticky; bottom: 0; z-index: 3; padding: 10px var(--gutter);
    background: var(--ivory); border-top: 1px solid var(--hairline-ivory);
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--secondary-ivory);
  }
  .est-mini strong { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-text); }
}

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step__no { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 1; color: var(--ember); margin-bottom: 12px; }
.step__title { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin-bottom: 6px; }
.step__line { font-size: 14.5px; line-height: 1.6; color: var(--body-ivory); max-width: 34ch; }
.after { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hairline-ivory); }
.after__h { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 20px; color: var(--secondary-ivory); margin-bottom: 12px; }
.after__list { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .after__list { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.after__list strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 20px; }
.after__list span { font-size: 13.5px; color: var(--body-ivory); }

/* ---------- Stage layer (JS only) ---------- */
html.js .stage {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--topstrip-h) var(--bar-h) 1fr var(--tick-h);
  min-height: 100dvh;
  transition: --bar-h var(--stage-ms) var(--ease-stage), --tick-h var(--stage-ms) var(--ease-stage);
}
html.js[data-stage="hub"] .stage { --bar-h: 0px; --tick-h: 44px; }
html.js:not([data-stage="hub"]) .stage { --bar-h: 62px; --tick-h: 0px; }
html.js .topstrip { grid-row: 1; grid-column: 1; }
html.js .bar { grid-row: 2; grid-column: 1; }
html.js .view { grid-row: 3; grid-column: 1; min-width: 0; min-height: 0; }
html.js .ticker { grid-row: 4; grid-column: 1; height: auto; }
html.js .ticker__track { padding: 0; }
html.js:not([data-stage="hub"]) .ticker { opacity: 0; }
html.js .ticker { transition: opacity 240ms ease; }
html.js .hub { min-height: 0; }

/* Views: the active one is in flow, the rest are stacked out of flow and inert. */
html.js .panel { display: none; }
html.js .panel.is-mounted { display: flex; }
html.js .view {
  opacity: 0; transform: translateY(28px); visibility: hidden; pointer-events: none;
  position: absolute; inset: 0;
  transition: opacity 240ms var(--ease-stage), transform 240ms var(--ease-stage), visibility 0s linear 240ms;
}
html.js .hub:not(.is-active) { transform: translateY(-18px); }
html.js .view.is-active {
  position: relative; inset: auto; opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity 420ms var(--ease-stage) 140ms, transform var(--stage-ms) var(--ease-stage) 60ms, visibility 0s;
}
/* Section titles are carried by the background word + footer line on the stage. */
html.js .panel__h {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Work — each phone carries its own "on the site" list, so the page scrolls rather than
   shrinking the phones to fit one screen. */
html.js #process .panel__body { display: flex; flex-direction: column; justify-content: center; }

html.no-anim *, html.no-anim *::before, html.no-anim *::after { transition: none !important; }

/* ---------- Mobile: scrolls normally — but never leaves a dead ivory band ----------
   §1 fix: the hub used to be floored to its own content height (min-height:0)
   while .stage stayed at min-height:100dvh. The stage's grid then had nothing
   to spend that height on, so the browser reported document height ==
   viewport height (the initial containing block's default), and the leftover
   lived as plain <body> background below the ticker — a dead zone, closest to
   cause (b): a residual gap with nothing designed to occupy it, not a vh
   overflow. Fixed the other way round: the hub is floored to the guaranteed
   SMALLEST viewport (100svh) minus the chrome around it, so it never depends
   on the address bar's current state; any slack the browser currently grants
   beyond that (address bar hidden) flows into the new .sig row at the very
   end, which is the only 1fr track. Nothing sits after it. */
.sig { display: none; }
@media (max-width: 719px) {
  /* .stage needs a DEFINITE height for the grid's 1fr row to have anything
     to distribute — a min-height alone just lets every row grow to its own
     content size with nothing left over (that was the bug). 100dvh tracks
     the currently-visible viewport as the address bar shows/hides; 100svh is
     the floor if dvh ever resolves smaller. Tall panels (Work/Costs/Process)
     still grow the container past this — a definite grid height doesn't clip
     content, it only sets the budget 1fr rows compete for. */
  html.js .stage { min-height: 100svh; height: 100dvh; }
  /* Override the base .hub rule's calc(100vh...) — that unit is exactly the
     bug. Auto/natural height here; .stage's definite height above is what
     gives the grid's 1fr row (.sig) something real to distribute. */
  html.js .hub, .hub { min-height: 0; padding: 40px var(--gutter) 32px; }
  .hub__sub { margin-bottom: 32px; }
  .doors ul { flex-direction: column; }
  .doors li + li { border-left: 0; border-top: 1px solid var(--hairline-ivory); }
  .door { justify-content: flex-start; padding: 12px 0; gap: 0; }
  .door__no { flex: 0 0 20px; width: 20px; text-align: left; }
  .door__label { font-size: 30px; padding-left: 14px; }
  .cta { width: 100%; }
  /* align-content:start — Grid's default ("normal") computes to "stretch",
     unlike flexbox's. Without this, any slack handed down from an ancestor
     stretches this grid's own rows (and their stretch-by-default cells)
     instead of staying put, which is what was actually inflating the hub
     row's measured height above its content. */
  .hub__marg { position: static; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 12px; width: 100%; margin-top: 36px; }
  .marg { position: static; }
  .marg--tr, .marg--br { text-align: right; }
  /* The free-preview strip needs ~58px; take it from the gaps so the hub still fits 390x844 */
  .pvstrip { margin-top: 8px; font-size: 11px; letter-spacing: 0.16em; }
  .pvstrip__long { display: none; }
  .pvstrip__short { display: inline; }
  .hub__sub { margin-bottom: 28px; }
  .hub__marg { margin-top: 20px; }
  .colophon { margin-top: 18px; }
  /* The /try link (44px tap row) takes its room from the same gaps, so the hub still fits 390x844 */
  .trylink { margin-top: 0; }
  .hub__sub { margin-bottom: 18px; }
  .hub__marg { margin-top: 10px; }
  .colophon { margin-top: 10px; }
  html.js .hub, .hub { padding-top: 26px; }
  .ticker { height: 40px; }
  html.js .ticker { height: auto; }
  html.js[data-stage="hub"] .stage { --tick-h: 40px; }
  .foot__fact { letter-spacing: 0.3em; }

  /* A 5th row always exists on mobile: 1fr + visible on the hub stage, 0px +
     invisible otherwise, so Work/Costs/Process never gain height from it.
     Hidden via visibility, not display — display:none/flex would restart
     the entrance animation (§6.3: "once on load") every time someone
     navigates back to the hub within the SPA; visibility never does. */
  html.js .stage { grid-template-rows: var(--topstrip-h) var(--bar-h) 1fr var(--tick-h) 0px; }
  html.js[data-stage="hub"] .stage {
    grid-template-rows: var(--topstrip-h) var(--bar-h) min-content var(--tick-h) 1fr;
  }
  .sig {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    grid-row: 5; grid-column: 1; gap: 8px; padding: 8px var(--gutter) 12px;
    visibility: hidden; overflow: hidden;
  }
  html.js[data-stage="hub"] .sig { visibility: visible; overflow: visible; }
}
.sig__mark { height: 64px; width: auto; color: var(--ink-text); }
/* Phones: 48px (was 64px) so the free-preview strip fits above it without the hub growing */
@media (max-width: 719px) { .sig__mark { height: 48px; } }
.sig__line {
  font-family: var(--font-ui); font-weight: 400; font-size: 9px;
  letter-spacing: 0.38em; text-transform: uppercase; color: var(--grey-on-light);
  text-align: center;
}

/* ---------- Reduced motion: every animation off, every final state is the default ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}