/* Synkurl site styles.
   Idea: a quiet, premium catalogue. Warm paper and charcoal, large product
   photography, generous space, fine dividers, and one confident display face.
   Sections switch tone with .tone-dark; every component reads its colours from
   the variables below, so it works on both. */

@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/unbounded-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
/* Shown for the moment before Unbounded arrives: a common bold face, scaled to
   Unbounded's width and height so headings don't reflow when it swaps in.
   Measured: Unbounded 500–560 is about 1.28× the width of Arial Bold. */
@font-face {
  font-family: "Unbounded Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 200 900;
  size-adjust: 128%;
  ascent-override: 78%;
  descent-override: 19.5%;
  line-gap-override: 0%;
}

:root {
  /* Paper (light) tone */
  --bg: #f2eee8;          /* warm paper */
  --bg-2: #e9e4dd;        /* raised panels */
  --plate: #e2ddd7;       /* behind product photos while they load */
  --fg: #1d1c1a;          /* charcoal text */
  --fg-2: #5a554f;        /* secondary text (6.8:1 on paper) */
  --line: rgba(29, 28, 26, 0.14);
  --line-strong: rgba(29, 28, 26, 0.34);
  --btn-bg: #1d1c1a;
  --btn-fg: #f6f3ee;
  --error: #a3261c;
  --accent: #8a5d4c;      /* a restrained warm metal, used sparingly */

  --display: "Unbounded", "Unbounded Fallback", ui-sans-serif, system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;

  --max: 78rem;
  --gutter: clamp(1rem, 4.5vw, 3rem);
  --radius: 0.9rem;
  --head-h: 4.25rem;      /* height of the sticky header */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tone-dark {
  --bg: #1b1a18;
  --bg-2: #24221f;
  --plate: #2b2926;
  --fg: #f2eee8;
  --fg-2: #b7afa6;
  --line: rgba(242, 238, 232, 0.16);
  --line-strong: rgba(242, 238, 232, 0.38);
  --btn-bg: #f2eee8;
  --btn-fg: #1b1a18;
  --error: #ffb4a8;
  --accent: #d9b3a5;
  background: var(--bg);
  color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
picture { display: contents; }
img { height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h3 {
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

p { margin: 0; }

.lede {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 34em;
}

.muted { color: var(--fg-2); }

.eyebrow {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.concept-note {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 40em;
}

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { opacity: 0.86; }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn-small { min-height: 2.5rem; padding: 0.55rem 1.05rem; font-size: 0.78rem; }
.btn[hidden] { display: none; }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn-ghost:hover { opacity: 1; box-shadow: inset 0 0 0 1px var(--fg); }

.text-link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.28em;
}
.text-link:hover { text-decoration-color: var(--fg); }

.round-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.round-btn:hover { border-color: var(--fg); }
.round-btn:disabled { opacity: 0.35; cursor: default; }

/* ---------- Header and footer ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
}
.site-head::after {          /* hairline that appears once the page scrolls */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
}
.site-head.is-scrolled::after { opacity: 1; }

.site-head-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  padding-block: 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 560;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand-mark { width: 1.6rem; height: 1.6rem; }

.site-nav { display: flex; gap: 1.5rem; margin-left: auto; font-size: 0.93rem; }
.site-nav a { color: var(--fg-2); text-decoration: none; padding-block: 0.4rem; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--fg); }
.site-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; }

.site-foot { border-top: 1px solid var(--line); margin-top: clamp(3rem, 8vw, 6rem); }
.site-foot-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 2rem 2.75rem;
  color: var(--fg-2);
  font-size: 0.9rem;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-foot .text-link { color: var(--fg-2); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 40;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ---------- Shared layout ---------- */

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-head { display: grid; gap: 0.9rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 44rem; }
.row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: none; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.plate-img,
.editorial-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--plate);
}

.swatch-dot {
  display: inline-block;
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--swatch, #888);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.tone-dark .swatch-dot { box-shadow: inset 0 0 0 1px rgba(242, 238, 232, 0.5); }

.closing-quiet { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.closing-quiet h2 { max-width: 16em; }
.closing-quiet .concept-note { margin-top: 1rem; text-align: center; }

/* Sections far down a page are drawn only when they come near the screen. */
.lazy-section { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- Finish swatches (model pages and the homepage) ---------- */

.swatches { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.swatches[hidden] { display: none; }
.swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.4rem 0.3rem 0.3rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}
.swatch .swatch-dot {
  width: 1.75rem;
  height: 1.75rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 0 3px var(--bg), 0 0 0 4px transparent;
}
.swatch:hover { color: var(--fg); }
.swatch[aria-current="true"],
.swatch[aria-checked="true"] { color: var(--fg); font-weight: 600; }
.swatch[aria-current="true"] .swatch-dot,
.swatch[aria-checked="true"] .swatch-dot {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 0 3px var(--bg), 0 0 0 4.5px var(--fg);
}

.finish-label { font-size: 0.95rem; color: var(--fg-2); }
.finish-label strong { color: var(--fg); font-weight: 600; }
.finish-label-key { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; font-weight: 600; margin-right: 0.35rem; }

/* ---------- Home: hero ---------- */

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
}
.home-hero-text { display: grid; gap: 1.5rem; }
.home-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.75rem); }
.home-hero-figure { margin: 0; display: grid; gap: 0.85rem; }
.hero-plate {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--plate);
}

/* ---------- Home: what it does ---------- */

.what-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 3rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.what-text { display: grid; gap: 2.25rem; }

.promise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.promise-list li { display: grid; gap: 0.5rem; align-content: start; padding: 1.4rem 1.5rem 0 0; }
.promise-list li + li { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.promise-list p { color: var(--fg-2); font-size: 0.98rem; }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  counter-reset: step;
}
.steps li { display: grid; gap: 0.4rem; align-content: start; counter-increment: step; padding-top: 1rem; border-top: 1px solid var(--line); }
.steps li::before {
  content: "0" counter(step);
  font-family: var(--display);
  font-size: 0.8rem;
  color: var(--fg-2);
}
.steps h3 { font-size: 0.95rem; }
.steps p { color: var(--fg-2); font-size: 0.93rem; }

/* The phone's text sizes itself to the phone (container query units), so the phone
   must get its width from the page, never from its own content. Stretch, then centre. */
.app-panel { display: grid; gap: 1rem; justify-items: stretch; min-width: 0; }
.app-panel .section-head { margin: 0; text-align: center; justify-items: center; }
.app-panel h2 { font-size: 1.15rem; letter-spacing: -0.01em; }

/* ---------- App screens (early design mockups) ---------- */

.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

.demo-screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
  margin: 0;
}
.phone-mock { margin: 0; display: grid; gap: 0.75rem; justify-items: center; min-width: 0; }
.phone-mock figcaption { font-size: 0.86rem; color: var(--fg-2); text-align: center; }
.phone-screen {
  container-type: inline-size;
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 9 / 18.5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 0.8rem;
  overflow: hidden;
  border-radius: 1.6rem;
  border: 1px solid #3a3733;
  box-shadow: 0 0 0 5px #161513, 0 18px 40px -18px rgba(0, 0, 0, 0.45);
  background: #1f1e1c;
  color: #f2eee8;
  font-size: 0.72rem;
  line-height: 1.35;
}
.phone-screen svg { display: block; }
.phone-screen p { margin: 0; }
.app-bar { font-family: var(--display); font-size: 0.8rem; font-size: 7cqi; font-weight: 560; }
.app-status { width: 45%; margin: 0.5rem auto 0.25rem; }
.app-big { font-family: var(--display); font-size: 0.9rem; font-size: 8cqi; font-weight: 560; line-height: 1.2; }
.app-small { color: #b7afa6; font-size: 0.7rem; font-size: 6cqi; }
.app-label { color: #b7afa6; font-size: 0.68rem; font-size: 5.6cqi; margin-top: 0.25rem; }
.app-strip, .app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.app-strip svg, .app-grid svg, .app-list svg { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; }
.app-pill {
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 182, 72, 0.18);
  color: #ffd9a0;
  font-size: 0.66rem;
  font-size: 5.4cqi;
  font-weight: 600;
}
.app-list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.app-list li { display: grid; grid-template-columns: 28% 1fr; gap: 0.5rem; align-items: center; }
.app-list span { display: grid; font-size: 0.7rem; font-size: 6cqi; }
.app-list small { color: #b7afa6; font-size: 0.62rem; font-size: 5cqi; }
.app-button {
  margin-top: auto !important;
  padding: 0.55rem;
  border-radius: 999px;
  background: #ffb648;
  color: #1b1405;
  text-align: center;
  font-weight: 700;
  font-size: 0.68rem;
  font-size: 5.8cqi;
}
.label-note { margin-top: 0.5rem; font-size: 0.84rem; color: var(--fg-2); text-align: center; }

/* With home.js, the four screens become one phone you can tap or swipe. */
.demo-ready .demo-screens {
  position: relative;
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 16rem;
  margin-inline: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: pointer;
}
.demo-ready .demo-screens::-webkit-scrollbar { display: none; }
.demo-ready .phone-mock { flex: 0 0 100%; padding: 8px; scroll-snap-align: center; }
.demo-ready .phone-mock figcaption { display: none; }
.demo-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 1rem; }
.demo-tab {
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.demo-tab:hover { color: var(--fg); border-color: var(--line-strong); }
.demo-tab[aria-selected="true"] { border-color: var(--fg); color: var(--fg); font-weight: 600; }

/* ---------- Home: the six-form chapter ----------
   Without JavaScript, and on phones, it's a row you swipe sideways (scroll snap).
   On large screens chapter.js pins it and moves the row as you scroll down. */

.chapter { padding-block: clamp(4rem, 8vw, 6.5rem); overflow: clip; }
.chapter-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.chapter-side { display: grid; gap: 1.1rem; justify-items: start; }
.chapter-controls { display: flex; align-items: center; gap: 0.9rem; }
.chapter-controls[hidden] { display: none; } /* shown by chapter.js; without it the row simply scrolls */
.chapter-progress {
  position: relative;
  width: 8rem;
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.chapter-progress span {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0.17));
}

.chapter-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: thin; /* so a mouse can scroll the row, even without JavaScript */
  scrollbar-color: rgba(242, 238, 232, 0.3) transparent;
}
.chapter-track {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter) 0.5rem;
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: max-content;
}
.form-card {
  flex: none;
  width: min(78vw, 36rem);
  scroll-snap-align: start;
}
.form-card a { display: grid; gap: 0.9rem; text-decoration: none; }
.form-plate {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--plate);
}
.form-plate .plate-img { transform-origin: 50% 60%; }
.form-meta { display: flex; align-items: baseline; gap: 0.9rem; }
.form-index { font-family: var(--display); font-size: 0.8rem; color: var(--fg-2); }
.form-name { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.03em; }
.form-tag { color: var(--fg-2); }
.form-card a:hover .form-name,
.form-card a:focus-visible .form-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

.chapter.is-pinned { padding-block: 0; }
.chapter.is-pinned .chapter-pin {
  position: sticky;
  top: var(--head-h);          /* sits just below the sticky header */
  height: calc(100vh - var(--head-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;   /* never push the heading above the top when space is short */
  padding-block: 1rem;
  overflow: hidden;
}
.chapter.is-pinned .chapter-head { margin-bottom: clamp(1rem, 3vh, 2.5rem); }
.chapter.is-pinned .chapter-viewport { overflow: visible; scroll-snap-type: none; }
.chapter.is-pinned .chapter-track { will-change: transform; }
/* Cards fit the height left under the header and the chapter heading. */
.chapter.is-pinned .form-card { width: min(44vw, 40rem, calc((100vh - var(--head-h) - 23rem) * 1.5)); }

/* ---------- Home: finishes ---------- */

.finish-picker { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.finish-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
}
.finish-grid a { display: grid; gap: 0.6rem; text-decoration: none; }
.finish-plate {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--plate);
}
/* finishes.js loads the next finish's photo on top, invisibly, then fades it in. */
.finish-plate .plate-layer { position: absolute; inset: 0; display: block; }
.finish-plate .plate-layer.is-incoming { opacity: 0; }
.finish-cell-name { font-family: var(--display); font-size: 1rem; letter-spacing: -0.02em; }
.finish-cell-note { color: var(--fg-2); font-size: 0.84rem; line-height: 1.45; min-height: 1.45em; white-space: nowrap; } /* one reserved line, so a note never moves the grid */
.finish-grid a:hover .finish-cell-name { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* ---------- Home: rooms and details ---------- */

.life-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.life, .detail { margin: 0; display: grid; gap: 0.85rem; }
.lifestyle { overflow-x: clip; } /* photos sliding in never widen the page */
.life-frame, .detail-frame {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--plate);
}
.life figcaption, .detail figcaption { font-size: 0.88rem; color: var(--fg-2); }
.life-name { color: var(--fg); font-weight: 600; }
.finish-inline { display: inline-flex; align-items: center; gap: 0.4rem; }
.finish-inline .swatch-dot { width: 0.7rem; height: 0.7rem; }

.life-wide { grid-column: 1 / -1; }
.life-wide .life-frame { aspect-ratio: 16 / 9; }
.life-portrait { grid-column: 1 / 6; }
.life-portrait .life-frame { aspect-ratio: 2 / 3; }
.life-side { grid-column: 7 / -1; align-self: center; }
.life-side .life-frame { aspect-ratio: 16 / 9; }
.life-band { grid-column: 3 / -1; }
.life-band .life-frame { aspect-ratio: 16 / 9; }
.life-half { grid-column: span 6; }
.life-half .life-frame { aspect-ratio: 16 / 9; }
.life-offset { margin-top: clamp(0rem, 8vw, 7rem); }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.detail-large { grid-column: 1 / 9; grid-row: span 2; }
.detail-large .detail-frame { aspect-ratio: 3 / 2; }
.detail-small { grid-column: 9 / -1; }
.detail-small .detail-frame { aspect-ratio: 3 / 2; }

/* ---------- Model pages ---------- */

.model-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "viewer text"
    "viewer intro";
  gap: clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 4.5vw, 4rem);
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
}
.model-hero-text { grid-area: text; align-self: start; display: grid; gap: 0.6rem; padding-top: 0.5rem; }
.model-hero h1 { font-size: clamp(3rem, 6.4vw, 6.2rem); letter-spacing: -0.05em; line-height: 0.95; }
.viewer { grid-area: viewer; display: grid; gap: 1.1rem; min-width: 0; align-content: start; }
.model-intro { grid-area: intro; align-self: end; display: grid; gap: 1.1rem; padding-bottom: 0.25rem; }
.model-intro > p:first-child { font-size: 1.08rem; }

/* Per-design variety: the same parts, arranged differently. */
.model-dome .model-hero,
.model-box-plus .model-hero {
  grid-template-columns: minmax(17rem, 23rem) minmax(0, 1fr);
  grid-template-areas: "text viewer" "intro viewer";
}
.model-stack .model-hero {
  grid-template-rows: auto auto;
  grid-template-areas: "text text" "viewer intro";
}
.model-stack .model-intro { align-self: start; padding-top: 0.5rem; }
.model-box .model-hero {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "text" "viewer" "intro";
}
.model-box .model-hero-text { grid-template-columns: auto 1fr; align-items: end; column-gap: 2.5rem; }
.model-box .model-hero-text .eyebrow { grid-column: 1 / -1; }
.model-box .model-hero-text .lede { padding-bottom: 0.6rem; }
.model-box .model-intro { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: end; gap: 1rem 2.5rem; }
.model-box .viewer { width: min(100%, 56rem); justify-self: center; }

/* The main photo: a fixed frame, so switching photos never moves the page. */
.viewer-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--plate);
  touch-action: pan-y;
}
.stage-link { position: absolute; inset: 0; display: block; border-radius: inherit; cursor: zoom-in; }
.stage-layer { position: absolute; inset: 0; display: block; }
.stage-layer .stage-img,
.stage-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* never crop the device; portrait photos letterbox */
}
.stage-layer.is-incoming { opacity: 0; }
/* The frame is a link to the full-size photo: draw its focus ring inside the
   frame, on top of the photo (an outline would be clipped or hidden under it). */
.stage-link:focus-visible { outline: none; }
.stage-link:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--fg), inset 0 0 0 6px rgba(242, 238, 232, 0.9);
  pointer-events: none;
}
/* A shared link asked for another finish (colour-first.js): the photo built into the
   page is the wrong colour, so it, the finish name and the thumbnails stay hidden
   until gallery.js shows the right ones together. */
html[data-colour-pending] .stage-layer[data-built],
html[data-colour-pending] [data-finish-name],
html[data-colour-pending] [data-view-label],
html[data-colour-pending] [data-thumbs] { visibility: hidden; }
.stage-step {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  border: 0;
  border-radius: 50%;
  background: rgba(242, 238, 232, 0.86);
  color: #1d1c1a;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.stage-prev { left: 0.75rem; }
.stage-next { right: 0.75rem; }
.stage-step[hidden] { display: none; }

.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.view-label { color: var(--fg-2); font-weight: 400; }

.thumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.thumb {
  position: relative;
  display: block;
  width: 5.5rem;
  aspect-ratio: 3 / 2;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--plate);
  box-shadow: 0 0 0 1px var(--line);
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-current="true"],
.thumb[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fg); }

/* Lifestyle and detail sections, in several compositions */
.editorial {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 6rem) var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}
.editorial-figure { margin: 0; display: grid; gap: 0.75rem; }
.editorial-frame { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--plate); cursor: zoom-in; touch-action: pan-x pan-y; }
.editorial-frame:focus-visible { outline: none; }
.editorial-frame:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--fg), inset 0 0 0 6px rgba(242, 238, 232, 0.9);
  pointer-events: none;
}
.editorial-text { display: grid; gap: 0.9rem; align-content: start; }
.editorial-text > p:not(.eyebrow) { color: var(--fg-2); max-width: 30em; }
.finish-caption { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--fg-2); }

.layout-offset-left .editorial-figure { grid-column: 1 / 9; }
.layout-offset-left .editorial-text { grid-column: 9 / -1; }
.layout-offset-right .editorial-figure { grid-column: 5 / -1; grid-row: 1; }
.layout-offset-right .editorial-text { grid-column: 1 / 5; grid-row: 1; }
.layout-offset-left .editorial-frame,
.layout-offset-right .editorial-frame { aspect-ratio: 16 / 9; }

.layout-full-bleed { max-width: none; padding-inline: 0; }
.layout-full-bleed .editorial-figure { grid-column: 1 / -1; }
.layout-full-bleed .editorial-frame { border-radius: 0; width: 100%; height: min(56.25vw, 82vh); }
.layout-full-bleed .finish-caption { padding-inline: var(--gutter); }
.layout-full-bleed .editorial-text { grid-column: 7 / -1; padding-inline: var(--gutter) var(--gutter); max-width: calc(var(--max) / 2); }

.layout-portrait-split .editorial-figure { grid-column: 7 / 12; }
.layout-portrait-split .editorial-frame { aspect-ratio: 2 / 3; }
.layout-portrait-split .editorial-text { grid-column: 2 / 6; grid-row: 1; }

.layout-wide-band .editorial-figure { grid-column: 1 / -1; }
.layout-wide-band .editorial-frame { aspect-ratio: 16 / 9; }
.layout-wide-band .editorial-text { grid-column: 1 / 7; }

.layout-macro-right .editorial-figure { grid-column: 6 / -1; }
.layout-macro-right .editorial-text { grid-column: 1 / 5; grid-row: 1; }
.layout-macro-left .editorial-figure { grid-column: 1 / 8; }
.layout-macro-left .editorial-text { grid-column: 9 / -1; }
.layout-macro-right .editorial-frame,
.layout-macro-left .editorial-frame { aspect-ratio: 3 / 2; }
.layout-full .editorial-figure { grid-column: 1 / -1; }
.layout-full .editorial-frame { aspect-ratio: 16 / 9; }  /* both close-ups used here stay whole at 16:9 */
.layout-full .editorial-text { grid-column: 1 / 7; }

.all-finishes .finish-plate { touch-action: pan-x pan-y; }
.all-finishes .finish-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.finish-cell a { display: grid; gap: 0.6rem; text-decoration: none; }
.finish-cell .finish-plate { aspect-ratio: 3 / 2; }
.finish-name { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; }
.cell-note { color: var(--fg-2); font-size: 0.82rem; line-height: 1.4; }
.finish-cell:target .finish-plate { box-shadow: 0 0 0 2px var(--fg); }

.model-rail {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(12rem, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.model-rail li { scroll-snap-align: start; }
.model-link { display: grid; gap: 0.5rem; text-decoration: none; }
.model-link-plate { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--plate); }
.model-link-name { font-family: var(--display); font-size: 1.05rem; letter-spacing: -0.02em; }
.model-link-tag { color: var(--fg-2); font-size: 0.88rem; }
.model-link:hover .model-link-name { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* Full-size viewer */
.lightbox {
  touch-action: none; /* a pinch anywhere in the viewer never zooms the page into blur */
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #121110;
  color: #f2eee8;
}
.lightbox::backdrop { background: rgba(18, 17, 16, 0.9); }
.lightbox-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  padding: 0.75rem clamp(0.5rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
  gap: 0.75rem 1rem;
}
.lightbox-caption { grid-column: 1; grid-row: 1; align-self: center; font-size: 0.92rem; color: #cfc8bf; min-height: 1.5em; }
.lightbox-tools { grid-column: 2; grid-row: 1; display: flex; gap: 0.5rem; align-items: start; }
/* The photo: gallery.js sets its size (never larger than its real pixels) and,
   when zoomed, moves and scales it with a transform. */
.lightbox-stage { grid-column: 1 / -1; grid-row: 2; position: relative; min-height: 0; overflow: hidden; touch-action: none; }
.lightbox-stage img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: none;
  transform-origin: 50% 50%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.lightbox-stage img.is-incoming { opacity: 0; }
.lightbox-stage.can-zoom img { cursor: zoom-in; }
.lightbox-stage.is-zoomed img { cursor: grab; }
.lightbox-stage.is-dragging img { cursor: grabbing; }
.lightbox-btn,
.lightbox-tool {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(242, 238, 232, 0.35);
  background: rgba(18, 17, 16, 0.6);
  color: #f2eee8;
  cursor: pointer;
}
.lightbox-btn { top: 50%; width: 3rem; height: 3rem; margin-top: -1.5rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; }
.lightbox-prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-next { right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-btn[hidden] { display: none; }
.lightbox-tool { position: static; min-height: 2.75rem; padding: 0.5rem 1.1rem; border-radius: 999px; font: inherit; font-size: 0.9rem; white-space: nowrap; }
.lightbox-tool[data-lightbox-zoom] { min-width: 7.5rem; } /* the label changes; the bar doesn't move */
.lightbox-tool[hidden] { display: none; }
.lightbox :focus-visible { outline-color: #f2eee8; }

/* ---------- Models index ---------- */

.models-index .page-intro { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.index-list { list-style: none; margin: 0 auto; display: grid; gap: clamp(3.5rem, 9vw, 7rem); }
.index-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.index-row.is-flipped { grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); }
.index-row.is-flipped .index-plate { order: 2; }
.index-plate { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--plate); }
.index-text { display: grid; gap: 0.9rem; align-content: center; }
.index-text h2 a { text-decoration: none; }
.index-text > p:not(.eyebrow) { color: var(--fg-2); }
.mini-swatches { display: flex; gap: 0.25rem; }
.mini-swatch { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.mini-swatch .swatch-dot { width: 1.25rem; height: 1.25rem; }
.mini-swatch:hover .swatch-dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 0 2px var(--bg), 0 0 0 3px var(--fg); }

/* ---------- For families and FAQ pages ---------- */

.page-intro { display: grid; gap: 1rem; max-width: 46rem; padding-block: clamp(2rem, 5vw, 4rem) 1rem; }
.page-intro h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }

.story-list { display: grid; gap: clamp(3rem, 7vw, 5rem); padding-block: 2.5rem; }
.family-story {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  align-items: center;
  scroll-margin-top: 5.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.family-story > div { display: grid; gap: 0.75rem; max-width: 36rem; }
.family-story h2 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.family-story h3 { font-family: var(--body); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); margin-top: 0.5rem; }
.family-story p { color: var(--fg-2); }
.family-story img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  border-radius: var(--radius);
  background: #1f1e1c;
}

.faq-jump { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.faq-group { display: grid; gap: 0; max-width: 48rem; padding-block: 2rem; scroll-margin-top: 5rem; }
.faq-group h2 { margin-bottom: 1rem; }
.faq-item { display: grid; gap: 0.5rem; padding-block: 1.35rem; border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.faq-item p { color: var(--fg-2); }
.faq-item:target { border-top-color: var(--fg); }
.anchor { text-decoration: none; }
.anchor:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }

/* The closing call to action on older pages */
.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
}
.closing h2 { max-width: 18em; }

/* ---------- Waitlist and investor forms ---------- */

.join {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.5rem clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-block: clamp(2rem, 5vw, 4rem) 3rem;
}
.join-intro { display: grid; gap: 1.25rem; position: sticky; top: 6rem; }
.join-intro .note { font-size: 0.95rem; color: var(--fg-2); max-width: 30em; }
.investor-intro { position: static; }
.investor-intro h2 { font-size: 1.1rem; margin-top: 0.75rem; }
.investor-intro p:not(.lede):not(.eyebrow) { color: var(--fg-2); }
textarea.input { resize: vertical; min-height: 8rem; line-height: 1.5; }

.model-note { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--bg-2); font-size: 0.93rem; }
.model-note[hidden] { display: none; }

.panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 1.25rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
}

.form { display: grid; gap: 1.6rem; }
.field { display: grid; gap: 0.55rem; }
.field > label,
.field legend { font-weight: 600; font-size: 0.98rem; padding: 0; }
.field .hint { font-size: 0.88rem; color: var(--fg-2); margin-top: -0.25rem; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }

.input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.7rem;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
.input::placeholder { color: #8a837b; }
.input:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(29, 28, 26, 0.12); }

.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
/* The radio button sits invisibly on top of the chip. The <span> after it is what you see.
   "input:checked + span" works in every browser, including older Android ones,
   so the chosen chip always looks chosen (no need for :has()). */
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
  background: var(--bg);
}
.chip:hover span { border-color: var(--fg); color: var(--fg); }
.chip input:checked + span { border-color: var(--fg); background: var(--fg); color: var(--bg); font-weight: 600; }
.chip input:checked + span::before { content: "✓"; }
.chip input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
.optional { color: var(--fg-2); font-weight: 400; }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.93rem;
  color: var(--fg-2);
}
.consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--fg); }

.form .btn { justify-self: start; }

.status { min-height: 1.5em; font-size: 0.95rem; display: grid; gap: 0.75rem; justify-items: start; }
.status[data-state="error"] { color: var(--error); }

.hint-box { font-size: 0.92rem; color: var(--accent); }
.hint-box[hidden] { display: none; }
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.notice {
  padding: 0.9rem 1.1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--fg);
}
.notice[hidden] { display: none; }

/* ---------- Sharing ---------- */

.share {
  display: grid;
  gap: 0.75rem;
  margin-block: 1rem;
  padding: 1.5rem;
  border-radius: 1.1rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.share-title { font-size: 1.1rem; margin: 0; }
.share-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.share-status { min-height: 1.2em; font-size: 0.92rem; color: var(--fg-2); }

/* ---------- Result pages (check your inbox, confirmed, link expired…) ---------- */

.result .result-mark { width: 2.5rem; height: auto; }
.result form { margin: 0.5rem 0; }

.done { display: grid; gap: 1rem; }
.done[hidden] { display: none; }
.done .done-mark { width: 3rem; height: auto; }

/* ---------- Simple text pages (privacy, 404) ---------- */

.prose { max-width: 44rem; padding-block: clamp(2rem, 5vw, 4rem) 3rem; display: grid; gap: 1.1rem; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 0.5rem; }
.prose h2 { font-size: 1.2rem; margin-top: 1.25rem; }
.prose p, .prose li { color: var(--fg-2); }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }

/* ---------- Medium and small screens ---------- */

@media (max-width: 1000px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-hero-figure { order: -1; }
  .what-grid { grid-template-columns: 1fr; }
  .chapter-head { grid-template-columns: 1fr; }
  .model-hero,
  .model-dome .model-hero,
  .model-box-plus .model-hero,
  .model-stack .model-hero,
  .model-box .model-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "text" "viewer" "intro"; }
  .model-box .model-hero-text { grid-template-columns: 1fr; }
  .model-box .model-intro { grid-template-columns: 1fr; }
  .finish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .promise-list { grid-template-columns: 1fr; border-top: 0; }
  .promise-list li,
  .promise-list li + li { padding: 1.25rem 0; border-left: 0; border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; gap: 1rem; }

  .life-grid, .detail-grid { grid-template-columns: 1fr; }
  .life-wide, .life-portrait, .life-side, .life-band, .life-half,
  .detail-large, .detail-small { grid-column: 1 / -1; grid-row: auto; }
  .life-portrait .life-frame { aspect-ratio: 4 / 5; }
  .life-offset { margin-top: 0; }

  .editorial { grid-template-columns: 1fr; }
  .editorial .editorial-figure,
  .editorial .editorial-text { grid-column: 1 / -1; grid-row: auto; }
  .layout-full-bleed .editorial-text { padding-inline: var(--gutter); max-width: none; }
  .layout-portrait-split .editorial-frame { aspect-ratio: 4 / 5; }

  .all-finishes .finish-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-row,
  .index-row.is-flipped { grid-template-columns: 1fr; }
  .index-row.is-flipped .index-plate { order: 0; }

  .family-story { grid-template-columns: 1fr; }
  .family-story img { max-width: 30rem; }
  .join { grid-template-columns: 1fr; }
  .join-intro { position: static; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 7.5rem; } /* the header wraps onto two rows here */
  .site-head-inner { row-gap: 0; }
  .site-nav { order: 3; width: 100%; margin-left: 0; gap: 1.25rem; font-size: 0.9rem; }
  .brand { margin-right: auto; }
  .thumbs { gap: 0.45rem; }
  .thumb { width: 4.4rem; }
}

@media (max-width: 560px) {
  .lightbox-tools { grid-column: 1 / -1; grid-row: 1; justify-content: flex-end; }
  .lightbox-caption { grid-column: 1 / -1; grid-row: 2; }
  .lightbox-inner { grid-template-rows: auto auto minmax(0, 1fr); }
  .lightbox-stage { grid-row: 3; }
}

@media (max-width: 380px) {
  .brand { font-size: 0.98rem; }
  .btn-small { padding: 0.5rem 0.8rem; font-size: 0.72rem; }
  .site-nav { gap: 1rem; }
}


/* ========== Motion ==========
   Everything that moves is inside this one block. When "reduce motion" is on,
   none of it applies, and every page shows its still, finished state.
   Only transform and opacity are animated. Hidden starting states apply only
   once motion.js has added .motion-ready, so nothing stays hidden without it. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Opening hero: eyebrow, headline, text, actions and photo enter in a short
     sequence (about 0.85 s in all). Content is there from the first frame. */
  .hero-in { animation: rise-in 0.62s var(--ease) both; animation-delay: calc(var(--i, 0) * 75ms); }
  [data-hero-in] { animation: rise-in 0.62s var(--ease) both; }
  .viewer-stage[data-hero-in] { animation-delay: 90ms; }

  /* Sections settle in as they scroll into view (motion.js adds .is-in). */
  .motion-ready [data-reveal] { transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); }
  .motion-ready [data-reveal="rise"]:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .motion-ready [data-reveal="fade"]:not(.is-in) { opacity: 0; }
  .motion-ready [data-reveal="scale"]:not(.is-in) { opacity: 0; transform: scale(0.97); }
  .motion-ready [data-reveal="slide"]:not(.is-in) { opacity: 0; transform: translateX(20px); }
  .motion-ready .promise-list [data-reveal]:nth-child(2) { transition-delay: 80ms; }
  .motion-ready .promise-list [data-reveal]:nth-child(3) { transition-delay: 160ms; }

  /* Gentle scroll-linked drift inside some photo frames (motion.js sets --shift). */
  .motion-ready [data-parallax] .editorial-img { transform: translateY(var(--shift, 0px)) scale(1.08); }

  /* Header hairline fades in once the page scrolls. */
  .site-head::after { transition: opacity 0.25s ease; }

  /* Finish changes: the new photo fades in over the old one once it's ready. */
  .stage-layer { transition: opacity 0.22s ease; }
  .finish-plate .plate-layer { transition: opacity 0.22s ease; }

  /* Cards respond to hover and keyboard focus. */
  .form-plate .plate-img,
  .index-plate .plate-img,
  .model-link-plate .plate-img,
  .finish-plate .plate-img,
  .hero-plate .plate-img { transition: transform 0.6s var(--ease), opacity 0.22s ease; }
  .form-card a:hover .plate-img,
  .form-card a:focus-visible .plate-img,
  .index-plate:hover .plate-img,
  .index-plate:focus-visible .plate-img,
  .model-link:hover .plate-img,
  .model-link:focus-visible .plate-img,
  .finish-grid a:hover .plate-img,
  .finish-grid a:focus-visible .plate-img,
  .hero-plate:hover .plate-img { transform: scale(1.035); }
  .thumb, .swatch .swatch-dot { transition: transform 0.18s ease; }
  .thumb:hover { transform: translateY(-2px); }
  .swatch:hover .swatch-dot { transform: scale(1.06); }

  /* Full-size viewer opens with a short fade and settle. */
  .lightbox[open] { animation: fade-in 0.22s ease backwards; }
  .lightbox[open] .lightbox-stage { animation: settle-in 0.32s var(--ease) backwards; }
  .lightbox-stage img { transition: opacity 0.2s ease; }
  .lightbox-stage img.is-animating { transition: opacity 0.2s ease, transform 0.28s var(--ease); }
  .lightbox.is-closing { animation: fade-out 0.2s ease forwards; }
  .lightbox.is-closing::backdrop { opacity: 0; transition: opacity 0.2s ease; }

  /* Page transitions: a soft cross-fade between pages, in browsers that support it.
     Other browsers simply load the next page as normal. */
  @view-transition { navigation: auto; }
  .site-head { view-transition-name: site-head; }
  ::view-transition-old(root) { animation: page-out 0.18s ease both; }
  ::view-transition-new(root) { animation: page-in 0.3s ease both; }

  /* Small reactions */
  .btn, .demo-tab, .chip span, .round-btn { transition: transform 0.15s ease, opacity 0.15s ease; }
  .btn:active, .demo-tab:active, .chip:active span, .round-btn:active, .swatch:active .swatch-dot { transform: scale(0.96); }
  .chip input:checked + span { animation: chip-pop 0.3s ease; }

  /* After joining: the mark rises once. */
  .is-celebrating .done-mark,
  .celebrate .result-mark { animation: rise-in 0.7s var(--ease) both; }
}

@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes settle-in { from { opacity: 0; transform: scale(0.97); } }
@keyframes page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes chip-pop { 0% { transform: scale(0.94); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }