/* ==========================================================================
   Don Resin — concept preview by Jahforge
   Shared stylesheet for the 4 page demo (home / class / enroll / work).
   Single file on purpose: the pages are otherwise identical in chrome, and
   keeping one source avoids the four-way drift that killed earlier demos.
   ========================================================================== */

:root {
  /* Palette: the tested luxury formula — one near-black anchor, one restrained
     metallic accent, an ivory neutral, and a single deep jewel accent used
     sparingly. Sourced from zoviz.com's Luxury Color Palette Guide (2026):
     Onyx #0A0A0A · 24-Karat Gold #C69B3C · Ivory Cream #F4EADE ·
     Charcoal #36454F · Regal Amethyst #5D3A9B. Contrast comes from tone and
     texture (grain overlay, gradients), not from competing hues. */
  --ink: #0b0b0c;
  --panel: #17191d;
  --panel-2: #202329;
  --paper: #f4eade;
  --paper-dim: #e3d8c6;
  --gold: #c69b3c;
  --gold-bright: #ddb662;
  --gold-deep: #866224;
  --spark: #7a54c0;
  --spark-deep: #5d3a9b;
  --ink-text: #1b1b1d;
  --muted: rgba(244,234,222,0.66);
  --muted-2: rgba(27,27,29,0.64);
  --line: rgba(244,234,222,0.14);
  --line-2: rgba(27,27,29,0.14);
  --ease: cubic-bezier(.22,1,.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Manrope', sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
h1, h2, h3 {
  font-family: 'Fraunces', serif;
  color: var(--paper);
  margin: 0;
  line-height: 1.16;
  /* Fraunces is an optical-size serif with real weights. 520 gives the
     headings a proper spine on the near-black background instead of the
     hairline strokes the old display face rendered at. */
  font-weight: 520;
  font-optical-sizing: auto;
  letter-spacing: -0.005em;
}
em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; color: var(--gold-bright); }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1340px; margin: 0 auto; padding: 0 24px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none !important; }
}

/* Film grain: keeps large flat dark areas from reading as flat digital
   fill. Sits above the background, below content, never intercepts input. */
.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}
.grain > * { position: relative; z-index: 2; }

/* ---- Demo ribbon ---- */
.demo-ribbon {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  font-size: 0.78rem;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
}
.demo-ribbon a { text-decoration: underline; font-weight: 600; color: var(--gold-bright); }

/* ---- Buttons: gloss-sweep resin-pour highlight ---- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  padding: 16px 30px;
  border: 1px solid var(--gold-deep);
  border-radius: 1px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(198,155,60,0.20);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(198,155,60,0.40); }
.btn:hover::after { left: 130%; }
.btn-outline {
  background: transparent;
  color: var(--paper);
  border-color: rgba(244,234,222,0.42);
  box-shadow: none;
}
.btn-outline::after { background: linear-gradient(115deg, transparent, rgba(221,182,98,0.5), transparent); }
.btn-outline:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.3); border-color: var(--gold-bright); }
/* Amethyst secondary: the single deep-jewel accent, used sparingly for the
   online-class path and secondary CTAs. Never competes with the gold. */
.btn-spark {
  background: linear-gradient(135deg, var(--spark), var(--spark-deep));
  border-color: var(--spark-deep);
  color: #fdfaff;
  box-shadow: 0 6px 20px rgba(93,58,155,0.30);
}
.btn-spark::after { background: linear-gradient(115deg, transparent, rgba(255,255,255,0.5), transparent); }
.btn-spark:hover { box-shadow: 0 14px 36px rgba(93,58,155,0.48); }
.btn-block { width: 100%; }

/* ---- Nav ---- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-set { background: rgba(11,11,12,0.92); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.nav .container-wide { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 34px; width: auto; display: block; flex-shrink: 0; }
.brand-name { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.3rem; color: var(--paper); letter-spacing: 0.02em; }
.brand-name span { display: block; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-bright); margin-top: 1px; }

.nav-links { display: none; align-items: center; gap: 30px; }
@media (min-width: 940px) { .nav-links { display: flex; } }
.nav-links a { font-size: 0.8rem; font-weight: 600; color: var(--paper); opacity: 0.75; transition: opacity .2s; letter-spacing: 0.02em; }
.nav-links a:hover { opacity: 1; }
.nav-links a.is-current { opacity: 1; color: var(--gold-bright); }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav .btn { display: none; padding: 13px 22px; font-size: 0.7rem; }
@media (min-width: 940px) { .nav .btn { display: inline-flex; } }

.nav-burger {
  display: flex;
  width: 38px; height: 38px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
@media (min-width: 940px) { .nav-burger { display: none; } }
.nav-burger span { width: 24px; height: 1.5px; background: var(--paper); transition: transform .2s ease, opacity .2s ease; }
.nav-burger.is-active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-burger.is-active span:nth-child(2) { opacity: 0; }
.nav-burger.is-active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-14px);
  transition: opacity .25s ease, transform .25s ease;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-menu a { color: var(--paper); font-family: 'Fraunces', serif; font-size: 1.7rem; font-weight: 400; }
.mobile-menu .btn { margin-top: 8px; }

/* ---- Scroll-scrubbed hero video ----
   Wrap height sets how far you scroll to play the clip, so a shorter wrap
   is what makes the scrub feel faster. Tuned shorter on desktop where the
   scroll wheel covers ground quickly. */
.scroll-video-wrap { position: relative; height: 240vh; height: 240svh; }
@media (min-width: 701px) { .scroll-video-wrap { height: 230vh; height: 230svh; } }
.sticky-video { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; width: 100%; overflow: hidden; background: var(--ink); }
.sticky-video video {
  position: absolute; top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
/* Global wash over the footage. Kept deliberately light so the floor keeps
   its colour; legibility of the hero copy is handled by its own local
   scrim below rather than by darkening the whole frame. */
.sticky-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,16,11,0.58) 0%, rgba(18,16,11,0.10) 34%, rgba(18,16,11,0.15) 58%, rgba(18,16,11,0.66) 100%);
  pointer-events: none;
}
.hero-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  z-index: 5;
  color: var(--paper);
  padding: 0 20px;
}
/* Local scrim: an elliptical pool of shade sized to the copy block, so the
   text stays readable over the bright amber frames at the end of the scrub
   without dulling the rest of the shot.

   `closest-side` is load bearing. A radial-gradient defaults to
   farthest-corner, which only reaches its last stop out at the corners, so
   along the mid-edges the shade is still part opaque when the element's box
   clips it. That clip is a visible straight edge, and the scrim reads as a
   dark rectangle sitting behind the text. Sizing to closest-side puts the
   ellipse's transparent end exactly on the edges, so it fades to nothing on
   every side and the corners stay clear. */
.hero-text::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(1240px, 148%);
  height: min(880px, 132%);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side at center,
    rgba(12,10,7,0.66) 0%,
    rgba(12,10,7,0.58) 28%,
    rgba(12,10,7,0.42) 48%,
    rgba(12,10,7,0.24) 66%,
    rgba(12,10,7,0.10) 83%,
    rgba(12,10,7,0) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero-text > * { position: relative; z-index: 1; }
.hero-text .kicker {
  font-family: 'Manrope', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--gold-bright);
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.75);
}
.hero-text h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  color: var(--paper);
  max-width: 24ch;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 6px 40px rgba(0,0,0,0.5);
}
.hero-text p {
  margin-top: 22px;
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  color: rgba(247,241,227,0.92);
  max-width: 52ch;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
/* The line the client wants to carry the hero: sits tight under the h1,
   set in bold mono-adjacent sans and pop-gold so it reads as part of the
   headline, not body copy. */
.hero-text .hero-statement {
  margin-top: 16px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.3vw, 1.62rem);
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--gold-bright);
  max-width: 34ch;
  text-shadow: 0 2px 16px rgba(0,0,0,0.82);
}
.hero-actions { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero-sig {
  margin-top: 26px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-bright);
  text-shadow: 0 2px 12px rgba(0,0,0,0.75);
}

/* Mobile hero: the sticky viewport is short (and shorter still once iOS
   shows its toolbars). If the copy block fills it, the scroll-scrubbed
   video behind it is fully covered and the transformation reads as if it
   were removed. Drop the secondary paragraph here (it repeats lower in the
   page) and tighten the spacing so the footage and the Scroll cue stay
   visible through the whole scrub. */
@media (max-width: 700px) {
  .hero-text > p:not(.hero-statement) { display: none; }
  .hero-text .kicker { margin-bottom: 14px; }
  .hero-text h1 { font-size: clamp(1.95rem, 8.4vw, 2.5rem); }
  .hero-text .hero-statement { margin-top: 14px; font-size: 1.06rem; }
  .hero-actions { margin-top: 24px; gap: 12px; }
  .hero-actions .btn { padding: 14px 22px; }
  .hero-sig { margin-top: 18px; font-size: 0.98rem; }
}

.scroll-hint {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  color: var(--paper);
  font-family: 'Manrope', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity .3s ease;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.scroll-hint .bar { width: 1px; height: 42px; background: rgba(244,238,224,0.34); overflow: hidden; }
.scroll-hint .bar::after {
  content: ""; display: block; width: 100%; height: 100%;
  background: var(--gold-bright);
  transform: translateY(var(--progress, -100%));
}

/* ---- Inner page hero ---- */
.page-hero {
  position: relative;
  padding: 190px 0 84px;
  overflow: hidden;
  background: var(--panel);
}
.page-hero .ph-bg { position: absolute; inset: 0; }
.page-hero .ph-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.page-hero .ph-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,16,11,0.82) 0%, rgba(18,16,11,0.55) 50%, rgba(18,16,11,0.95) 100%);
}
.page-hero .container { position: relative; z-index: 2; text-align: center; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-top: 14px; }
.page-hero p { margin: 18px auto 0; max-width: 58ch; color: var(--muted); font-size: 1.03rem; }

/* ---- General sections ---- */
.section { padding: 104px 0; }
.section-tight { padding: 72px 0; }
.section-paper { background: var(--paper); color: var(--ink-text); }
.section-panel { background: var(--panel); }
.section-head { max-width: 660px; margin: 0 auto 54px; text-align: center; }
.eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.section-paper .eyebrow { color: var(--gold-deep); }
.section-head h2 { margin-top: 14px; font-size: clamp(2rem, 3.6vw, 2.9rem); }
.section-head p { margin-top: 18px; color: var(--muted); font-size: 1.03rem; }
.section-paper .section-head p { color: var(--muted-2); }
.section-paper h2, .section-paper h3 { color: var(--ink-text); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.section-cta { text-align: center; margin-top: 52px; }

/* ---- Earnings marquee ---- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  padding: 20px 0;
}
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0 26px;
  white-space: nowrap;
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  color: var(--paper);
}
.marquee-item b { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 0.92rem; letter-spacing: 0.02em; color: var(--gold-bright); }
.marquee-item::after { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }

/* ---- Facts strip ----
   Lives at the tail of the courses section, not as a full-bleed band under
   the hero. As a band it was four tall stacked blocks on a phone, which ate
   most of a screen before the visitor had read anything. Now it is a bordered
   summary strip that closes the section, sized like a caption rather than a
   feature. */
.facts-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 860px;
  margin: 40px auto 0;
}
@media (max-width: 760px) { .facts-bar { grid-template-columns: repeat(2, 1fr); } }
.fact-item {
  background: var(--ink);
  padding: 22px 14px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 4px;
}
.fact-item .num { font-family: 'Fraunces', serif; font-size: 1.85rem; font-weight: 500; line-height: 1.1; color: var(--gold-bright); }
.fact-item span.label { font-family: 'Manrope', sans-serif; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); line-height: 1.35; }
/* Phone: two compact columns that read as one tidy block, matching the
   density of the hero stat strip on the sellfastphoto build. */
@media (max-width: 600px) {
  .facts-bar { max-width: 320px; margin-top: 30px; }
  .fact-item { padding: 15px 10px; }
  .fact-item .num { font-size: 1.5rem; }
  .fact-item span.label { font-size: 0.58rem; letter-spacing: 0.04em; }
}

/* ---- Story: deliberately asymmetric, overlapping stack ---- */
.story-wrap { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 70px; align-items: center; }
@media (max-width: 900px) { .story-wrap { grid-template-columns: 1fr; gap: 44px; } }
.story-stack { position: relative; padding-bottom: 74px; padding-right: 54px; }
.story-stack .plate-a { border: 1px solid var(--line-2); overflow: hidden; aspect-ratio: 5/4; }
.story-stack .plate-a img { width: 100%; height: 100%; object-fit: cover; }
.story-stack .plate-b {
  position: absolute;
  right: 0; bottom: 0;
  width: 52%;
  border: 1px solid var(--line-2);
  outline: 8px solid var(--paper);
  overflow: hidden;
  aspect-ratio: 1/1;
}
.story-stack .plate-b img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 520px) { .story-stack { padding-right: 34px; padding-bottom: 56px; } .story-stack .plate-b { width: 58%; outline-width: 6px; } }
.story-tag {
  position: absolute;
  left: -8px; top: 22px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Manrope', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}
/* The rotated tag needs gutter room beside the plate. Below this width
   there isn't any, and it lands on top of the photo instead. */
@media (max-width: 700px) { .story-tag { display: none; } }
.story-copy h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); }
.story-copy p { color: var(--muted-2); margin-top: 18px; font-size: 1.03rem; }
.story-copy .eyebrow { display: block; margin-bottom: 12px; }
.story-copy .lede { font-family: 'Fraunces', serif; font-size: 1.22rem; font-style: italic; font-weight: 460; line-height: 1.5; color: var(--ink-text); }
.story-sign {
  margin-top: 30px;
  display: flex; align-items: center; gap: 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.story-sign::before { content: ""; width: 42px; height: 1px; background: var(--gold-deep); }
.story-more { display: inline-block; margin-top: 26px; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); border-bottom: 1px solid var(--gold-deep); padding-bottom: 3px; }

/* ---- Signature: hover-to-reveal transformation ---- */
.reveal-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
@media (max-width: 700px) { .reveal-panel { aspect-ratio: 4 / 3; } }
.reveal-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal-panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.reveal-panel.is-interactive { cursor: crosshair; }
.reveal-hint {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  text-align: center;
  transition: opacity .6s var(--ease);
}
.reveal-hint .chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px;
  background: rgba(12,10,7,0.62);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(244,238,224,0.3);
  font-family: 'Manrope', sans-serif;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper);
}
.reveal-hint .chip svg { width: 16px; height: 16px; color: var(--gold-bright); }
.reveal-panel.is-touched .reveal-hint { opacity: 0; }
.reveal-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap;
  margin-top: 18px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---- Marbled pull-quote band ---- */
.quote-band {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 60% at 18% 28%, rgba(198,155,60,0.38), transparent 62%),
    radial-gradient(ellipse 48% 46% at 82% 68%, rgba(134,98,36,0.44), transparent 65%),
    radial-gradient(ellipse 42% 55% at 62% 15%, rgba(93,58,155,0.16), transparent 60%),
    var(--ink);
}
.quote-band blockquote {
  margin: 0 auto;
  max-width: 800px;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.4rem, 2.9vw, 2.1rem);
  color: var(--paper);
  line-height: 1.42;
}
.quote-band cite {
  display: block;
  margin-top: 26px;
  font-style: normal;
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

/* ---- Curriculum ---- */
.curriculum-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 62px; align-items: start; }
@media (max-width: 940px) { .curriculum-layout { grid-template-columns: 1fr; gap: 40px; } }
.curriculum-aside { position: sticky; top: 118px; }
@media (max-width: 940px) { .curriculum-aside { position: static; } }
.curriculum-aside .shot { border: 1px solid var(--line); overflow: hidden; aspect-ratio: 4/5; }
.curriculum-aside .shot img { width: 100%; height: 100%; object-fit: cover; }
.curriculum-aside .note {
  margin-top: 18px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted);
  border-left: 1px solid var(--gold);
  padding-left: 16px;
}
.curriculum-list { display: flex; flex-direction: column; }
.curriculum-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 26px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.curriculum-item:first-child { padding-top: 0; border-top: none; }
@media (max-width: 620px) { .curriculum-item { grid-template-columns: 1fr; gap: 10px; } }
.curriculum-numeral {
  font-family: 'Fraunces', serif;
  font-size: 3.1rem;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--gold);
  line-height: 1;
}
.curriculum-item h3 { font-size: 1.35rem; color: var(--paper); }
.curriculum-item p { margin-top: 10px; color: var(--muted); font-size: 0.97rem; max-width: 56ch; }

/* ---- Work gallery: varied tile sizes, not a uniform grid ---- */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.gtile { position: relative; overflow: hidden; border: 1px solid var(--line-2); }
.gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gtile:hover img { transform: scale(1.05); }
.gtile .gcap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(12,10,7,0.86) 0%, rgba(12,10,7,0) 100%);
  color: var(--paper);
  font-family: 'Manrope', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.g-a { grid-column: span 4; aspect-ratio: 16/10; }
.g-b { grid-column: span 2; aspect-ratio: 4/5; }
.g-c { grid-column: span 2; aspect-ratio: 1/1; }
.g-d { grid-column: span 4; aspect-ratio: 16/9; }
.g-e { grid-column: span 3; aspect-ratio: 3/2; }
.g-f { grid-column: span 3; aspect-ratio: 3/2; }
@media (max-width: 820px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .g-a, .g-b, .g-c, .g-d, .g-e, .g-f { grid-column: span 2; aspect-ratio: 16/10; }
  .g-b { aspect-ratio: 4/5; }
}

/* ---- Testimonial carousel ---- */
.carousel { position: relative; max-width: 900px; margin: 0 auto; }
.carousel-window { overflow: hidden; }
.carousel-track { display: flex; transition: transform .6s var(--ease); }
.carousel-slide { min-width: 100%; padding: 0 8px; }
.tquote {
  text-align: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.18rem, 2.3vw, 1.7rem);
  line-height: 1.5;
  color: var(--paper);
  margin: 0;
  min-height: 8.5em;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 620px) { .tquote { min-height: 12em; } }
.tmeta { margin-top: 22px; text-align: center; }
.tmeta .tname {
  font-family: 'Manrope', sans-serif;
  font-size: 0.76rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-bright);
}
.tmeta .trole { display: block; margin-top: 5px; font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 500; color: var(--muted); }
.carousel-mark {
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 4rem;
  line-height: 0.6;
  color: var(--gold);
  margin-bottom: 18px;
  user-select: none;
}
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; }
.cbtn {
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: border-color .25s, color .25s, background-color .25s;
}
.cbtn:hover { border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(232,192,114,0.06); }
.cbtn svg { width: 15px; height: 15px; }
.cdots { display: flex; gap: 9px; align-items: center; }
.cdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(244,238,224,0.28);
  cursor: pointer;
  transition: background-color .25s, transform .25s;
}
.cdot.is-active { background: var(--gold-bright); transform: scale(1.5); }

/* ---- Who it's for ---- */
.fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 880px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-card { border: 1px solid var(--line-2); padding: 30px; background: rgba(255,255,255,0.4); }
.fit-card .fnum { font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--gold-deep); }
.fit-card h3 { margin-top: 10px; font-size: 1.18rem; }
.fit-card p { margin-top: 10px; color: var(--muted-2); font-size: 0.95rem; }
@media (max-width: 600px) { .fit-card { max-width: 320px; margin: 0 auto; padding: 22px; } }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 1px solid var(--line); padding-top: 22px; }
.step .snum { font-family: 'Fraunces', serif; font-size: 1.6rem; color: var(--gold-bright); }
.step h3 { margin-top: 8px; font-size: 1.15rem; }
.step p { margin-top: 10px; color: var(--muted); font-size: 0.95rem; }

/* ---- Pricing ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 860px; margin: 0 auto; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 32px;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--gold); }
/* Deliberately smaller, inset cards on mobile per house instruction */
@media (max-width: 600px) {
  .card { max-width: 320px; width: 100%; margin: 0 auto; padding: 22px; }
  .price-card .amt { font-size: 2rem; }
}
.price-card { padding: 36px 32px; display: flex; flex-direction: column; position: relative; }
.price-card.featured {
  border-color: var(--gold);
  background: linear-gradient(165deg, rgba(198,155,60,0.14), var(--panel) 46%);
  box-shadow: 0 24px 64px rgba(198,155,60,0.12);
}
.price-card .tag {
  position: absolute; top: -13px; left: 32px;
  background: var(--gold-bright); color: var(--ink);
  font-family: 'Manrope', sans-serif; font-size: 0.6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 6px 12px; border-radius: 1px;
}
.price-card .tag-spark { background: var(--spark-deep); color: #fdfaff; }
.price-card-alt:hover { border-color: var(--spark); }
.price-card .plan { font-family: 'Manrope', sans-serif; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-bright); font-weight: 700; }
.price-card-alt .plan { color: var(--paper); }
.price-card .amt { font-family: 'Fraunces', serif; font-size: 2.8rem; margin-top: 10px; font-weight: 500; line-height: 1.05; color: var(--paper); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.price-card .amt sup { font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.price-card .amt del { font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 500; color: var(--muted); }
/* "one time" qualifier: both classes are single payments, and saying so on
   the card removes the unasked question of whether this is a subscription. */
.price-card .amt-note { font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* One line of "who this is for" under the price. The two options used to be
   separated only by the number, which left the visitor to work out the real
   difference from six near-identical bullets. */
.price-card .plan-for { margin: 14px 0 0; font-size: 0.93rem; line-height: 1.55; color: var(--paper); opacity: 0.9; }
.price-card ul { list-style: none; padding: 0; margin: 20px 0 0; flex-grow: 1; }
.price-card li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.price-card li:first-child { border-top: none; }
.price-card li svg { width: 16px; height: 16px; color: var(--gold-bright); flex-shrink: 0; margin-top: 3px; }
.price-card .btn { margin-top: 26px; }
.price-note { text-align: center; margin-top: 22px; color: var(--muted); font-size: 0.84rem; }

/* ---- Shared inclusions ----
   Four of the six bullets used to be duplicated word for word across both
   cards. Pulling the common ground into one strip below makes each card show
   only what actually differs, and cuts a lot of card height on a phone. */
.both-include {
  max-width: 860px;
  margin: 24px auto 0;
  border: 1px solid var(--line);
  background: rgba(247,234,222,0.02);
  padding: 22px 26px;
}
.both-include .bi-title {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}
.both-include ul { list-style: none; padding: 0; margin: 15px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px 28px; }
.both-include li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.9rem; color: var(--muted); }
.both-include li svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }

/* Phone pricing. This block sits after every .price-card rule on purpose:
   an equal-specificity rule inside a media query placed *earlier* loses to
   a later base rule, which is exactly how .price-card's 36px padding was
   silently beating the .card mobile override and squeezing the content
   column to ~256px inside a 320px card. */
@media (max-width: 600px) {
  .price-card { padding: 26px 20px; }
  .price-card .tag { left: 20px; }
  .price-card .amt { font-size: 2.1rem; }
  .price-card .plan-for { font-size: 0.9rem; }
  .price-card li { padding: 10px 0; font-size: 0.89rem; }
  .both-include { max-width: 320px; padding: 18px 20px; }
  .both-include ul { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- Home: courses section (what's included + the two class paths) ---- */
.course-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 50px;
}
@media (max-width: 880px) { .course-pillars { grid-template-columns: repeat(2, 1fr); } }
/* Phone: dropped entirely. Stacked one per row these four became a long
   scroll of prose standing between the section heading and the prices, and
   the same four modules are covered on the class page the link below points
   to (and summarised inside the cards themselves). */
@media (max-width: 700px) { .course-pillars { display: none; } }
.course-pillar { background: var(--ink); padding: 30px 26px; }
.course-pillar .cp-num {
  font-family: 'Fraunces', serif;
  font-size: 1.55rem;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--gold);
  letter-spacing: 0.05em;
}
.course-pillar h3 { margin-top: 12px; font-size: 1.18rem; color: var(--paper); }
.course-pillar p { margin-top: 9px; color: var(--muted); font-size: 0.92rem; }
.course-more { text-align: center; margin-top: 30px; }
.course-more a {
  color: var(--gold-bright);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold-deep);
  padding-bottom: 3px;
}

/* ---- Contact / enroll form ---- */
.enroll-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
@media (max-width: 880px) { .enroll-wrap { grid-template-columns: 1fr; } }
.enroll-copy p { color: var(--muted-2); margin-top: 16px; }
.enroll-perks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; }
.enroll-perks li { display: flex; align-items: center; gap: 10px; font-size: 0.94rem; color: var(--ink-text); }
.enroll-perks svg { width: 18px; height: 18px; color: var(--gold-deep); flex-shrink: 0; }
.enroll-copy .contact-email { margin-top: 26px; display: inline-block; font-weight: 700; color: var(--gold-deep); border-bottom: 1px solid var(--gold-deep); }

.form-card { background: var(--ink); border: 1px solid var(--line); padding: 34px; color: var(--paper); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.field input, .field select, .field textarea {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1px;
  padding: 13px 14px;
  color: var(--paper);
  font-family: inherit;
  font-size: 0.95rem;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.form-note { margin-top: 14px; font-size: 0.76rem; color: var(--muted); text-align: center; }

/* ---- Footer ---- */
.footer { background: var(--ink); color: var(--muted); padding: 52px 0 32px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer-grid h4 { font-family: 'Manrope', sans-serif; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 14px; font-weight: 700; }
.footer-nav a { display: block; font-size: 0.9rem; padding: 5px 0; color: var(--muted); transition: color .2s; }
.footer-nav a:hover { color: var(--paper); }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand .brand-name { color: var(--paper); font-size: 1.1rem; }
.footer-blurb { margin-top: 14px; font-size: 0.88rem; max-width: 34ch; }
.footer-bottom {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 0.82rem;
}
.footer-bottom a { color: var(--gold-bright); font-weight: 600; }

/* ==========================================================================
   EDITORIAL PASS  (2026-08-28)
   Why this block exists: every section on the first build opened with the
   same centred eyebrow, centred heading and centred lede. That symmetry is
   the single loudest "made by a machine" tell, and the client said as much.
   Everything below breaks the page out of that mould the way the
   sellfastphoto build does: left-hung headings with the supporting copy in a
   second column, rows that step out of alignment on purpose, and real
   reference furniture (spec sheets, an index, a measured cross section)
   instead of another row of equal cards. The numbered "chapter" index rules
   that opened each section were removed at the owner's request across every
   site: the heading carries the section on its own. Do not reinstate them.

   These sections deliberately break the house "centre the headings" rule.
   That is the point. Do not re-centre them. The quote band and the closing
   CTA stay centred, because a pull quote that is not centred reads as a
   mistake rather than a decision.

   Placed at the very end of the file on purpose: several rules here are
   equal-specificity overrides of base rules above (the mobile price rail
   over .card and .grid-2), and an equal-specificity rule inside a media
   query placed earlier silently loses. Same trap this stylesheet has hit
   twice already.
   ========================================================================== */

/* ---- Left-hung section head: heading in the wide column, supporting copy
   in a narrower one beside it, baselines aligned along the bottom. ---- */
.ed-head {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 20px 54px;
  align-items: end;
  margin-bottom: 50px;
}
@media (max-width: 880px) { .ed-head { grid-template-columns: 1fr; align-items: start; gap: 16px; margin-bottom: 36px; } }
.ed-head .eyebrow { display: block; margin-bottom: 12px; }
.ed-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); max-width: 17ch; }
.ed-head .lede { margin: 0; color: var(--muted); font-size: 1.02rem; max-width: 46ch; }
.section-paper .ed-head .lede { color: var(--muted-2); }
.ed-head .lede a { color: var(--gold-bright); font-weight: 700; border-bottom: 1px solid var(--gold-deep); }
.section-paper .ed-head .lede a { color: var(--gold-deep); }

/* ---- Systems index ----
   A reference index, not a card grid. Rows carry their own hairline, shift
   right under the cursor, and pull a thumbnail of that finish in from the
   margin on desktop. */
.sys-list { border-top: 1px solid var(--line); }
.section-paper .sys-list { border-top-color: var(--line-2); }
.sys-row {
  display: grid;
  grid-template-columns: 68px 1fr 148px;
  gap: 10px 28px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .38s var(--ease), background-color .38s var(--ease);
}
.section-paper .sys-row { border-bottom-color: var(--line-2); }
.sys-row:hover, .sys-row:focus-visible { padding-left: 16px; background: rgba(198,155,60,0.05); }
.sys-row .n {
  font-family: 'Fraunces', serif;
  font-size: 2.1rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--gold);
}
.sys-row h3 { font-size: 1.32rem; color: var(--paper); }
.section-paper .sys-row h3 { color: var(--ink-text); }
.sys-row p { margin: 8px 0 0; color: var(--muted); font-size: 0.95rem; max-width: 58ch; }
.section-paper .sys-row p { color: var(--muted-2); }
.sys-row .sys-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.sys-row .sys-tags span {
  font-family: 'Manrope', sans-serif;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-bright);
  border: 1px solid var(--line);
  padding: 5px 9px;
}
.section-paper .sys-row .sys-tags span { color: var(--gold-deep); border-color: var(--line-2); }
.sys-row .thumb {
  width: 148px; aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.sys-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sys-row:hover .thumb { opacity: 1; transform: translateX(0); }
@media (max-width: 900px) {
  .sys-row { grid-template-columns: 52px 1fr; padding: 22px 0; }
  .sys-row .thumb { display: none; }
  .sys-row .n { font-size: 1.7rem; }
  .sys-row h3 { font-size: 1.14rem; }
  .sys-row p { font-size: 0.91rem; }
}

/* ---- Signature interaction: the measured cross section ----
   Don sells the flake floor as a sequence of coats, so the page shows it as
   one. Layers grow up off the slab as you step through, the flake bed levels
   off when the scrape and sand step runs, and the clear coat lands last.
   Built entirely from CSS layers over a JS-seeded chip field, so there is no
   image to load and no frame that can fall out of register. */
.buildup { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 56px; align-items: center; }
@media (max-width: 940px) { .buildup { grid-template-columns: 1fr; gap: 34px; } }

.bu-steps { list-style: none; margin: 0; padding: 0; }
.bu-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  padding: 18px 6px 18px 0;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  transition: padding-left .3s var(--ease), background-color .3s var(--ease);
}
.bu-step:first-child { border-top: none; }
.bu-step .sn {
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 5px;
  transition: color .3s;
}
.bu-step .sh {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  color: var(--paper);
  display: block;
  opacity: 0.6;
  transition: opacity .3s;
}
.bu-step .sp {
  margin: 7px 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 48ch;
  display: none;
}
.bu-step.is-on { padding-left: 14px; background: rgba(198,155,60,0.06); }
.bu-step.is-on .sn { color: var(--gold-bright); }
.bu-step.is-on .sh { opacity: 1; }
.bu-step.is-on .sp { display: block; }

/* The slab itself. Layers stack from the bottom up and each one grows on the
   Y axis from its own bottom edge, so the section builds the way the real
   floor does rather than fading in. */
.bu-stage {
  position: relative;
  /* Faint drafting rules behind the section. They give the empty air above
     the stack something to read against, so a dark layer landing on its own
     (coat 1, before anything sits over it) is still legible. */
  background:
    linear-gradient(rgba(244,234,222,0.05) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(180deg, #0e1013 0%, #14171b 100%);
  border: 1px solid var(--line);
  padding: 34px 30px 0;
  overflow: hidden;
}
.bu-stage::before {
  content: "Section through the finished system";
  position: absolute; top: 14px; left: 30px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244,234,222,0.34);
}
.bu-slab { position: relative; height: 262px; display: flex; flex-direction: column; justify-content: flex-end; }
@media (max-width: 620px) { .bu-slab { height: 240px; } .bu-stage { padding: 32px 18px 0; } .bu-stage::before { left: 18px; } }

.bu-layer {
  position: relative;
  width: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
  opacity: 0;
  flex-shrink: 0;
}
.bu-layer.is-on { transform: scaleY(1); opacity: 1; }

/* Concrete: always present, it is what everything else is built on. */
.bu-concrete {
  height: 108px;
  transform: none; opacity: 1;
  background:
    radial-gradient(circle at 22% 40%, rgba(255,255,255,0.05) 0 2px, transparent 3px),
    radial-gradient(circle at 63% 66%, rgba(255,255,255,0.045) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 30%, rgba(255,255,255,0.04) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 78%, rgba(0,0,0,0.32) 0 3px, transparent 4px),
    linear-gradient(180deg, #55575a 0%, #3d3f43 60%, #303236 100%);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.bu-concrete .lbl { top: auto; bottom: 12px; transform: none; }
/* The surface profile the diamond grinder opens up. */
.bu-profile {
  height: 9px;
  background: repeating-linear-gradient(115deg, rgba(198,155,60,0.85) 0 2px, transparent 2px 7px), #4a4c50;
  border-top: 1px solid var(--gold-deep);
}
.bu-epoxy { height: 22px; background: linear-gradient(180deg, #3c434e 0%, #262b33 100%); border-top: 1px solid rgba(244,234,222,0.22); }
.bu-poly { height: 16px; background: linear-gradient(180deg, var(--gold-deep) 0%, #6b4d19 100%); }
.bu-flake {
  height: 42px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20,17,12,0) 0%, rgba(107,77,25,0.95) 100%);
  transition: transform .55s var(--ease), opacity .4s var(--ease), height .5s var(--ease);
}
.bu-flake.is-scraped { height: 30px; }
.bu-flake .chip { position: absolute; border-radius: 1px; }
.bu-clear {
  height: 15px;
  background: linear-gradient(180deg, rgba(244,234,222,0.32) 0%, rgba(244,234,222,0.08) 100%);
  border-top: 1px solid rgba(244,234,222,0.5);
  box-shadow: 0 -6px 18px rgba(244,234,222,0.10);
}

/* Leader-line labels hanging off the right edge of each layer. */
.bu-layer .lbl {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
  opacity: 0;
  transition: opacity .4s var(--ease) .18s;
  pointer-events: none;
}
.bu-layer.is-current .lbl { opacity: 0.92; }
.bu-concrete .lbl { opacity: 0.72; }
.bu-layer .lbl::before { content: ""; width: 26px; height: 1px; background: var(--gold); }
@media (max-width: 620px) { .bu-layer .lbl { font-size: 0.5rem; letter-spacing: 0.09em; } .bu-layer .lbl::before { width: 14px; } }

.bu-caption {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding: 14px 0 18px;
  font-size: 0.78rem;
  color: var(--muted);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.bu-caption b { color: var(--gold-bright); font-weight: 700; }

/* ---- Spec sheet: a submittal-style table, not another card ---- */
.spec-wrap { overflow-x: auto; border: 1px solid var(--line); }
.section-paper .spec-wrap { border-color: var(--line-2); }
.spec { width: 100%; border-collapse: collapse; min-width: 460px; font-family: 'Manrope', sans-serif; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.section-paper .spec th, .section-paper .spec td { border-bottom-color: var(--line-2); }
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: none; }
.spec thead th {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  background: rgba(198,155,60,0.07);
}
.spec .k {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--paper);
  width: 36%;
}
.section-paper .spec .k { color: var(--ink-text); }
.spec .step-no { font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 800; color: var(--gold); width: 54px; }
.spec .v { color: var(--muted); font-size: 0.93rem; }
.section-paper .spec .v { color: var(--muted-2); }
@media (max-width: 620px) { .spec th, .spec td { padding: 13px 14px; } .spec .k { font-size: 0.92rem; } }

/* ---- Pour rate: one real number from Don's own spec, given room ---- */
.rate-block { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; border: 1px solid var(--gold-deep); padding: 26px 30px; background: rgba(198,155,60,0.06); margin-top: 26px; }
@media (max-width: 620px) { .rate-block { grid-template-columns: 1fr; gap: 14px; padding: 22px; } }
.rate-block .figure { font-family: 'Fraunces', serif; font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1; color: var(--gold-bright); white-space: nowrap; }
.rate-block .figure small { font-family: 'Manrope', sans-serif; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 9px; white-space: normal; }
.rate-block p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---- Grinding passes: seven ticks, the first three solid, matching the
   "3 to 7 step" range Don quotes without inventing a number he did not. -- */
.grit { display: flex; align-items: flex-end; gap: 8px; height: 64px; margin-top: 10px; }
.grit i { display: block; width: 100%; background: var(--gold-deep); border: 1px solid var(--gold-deep); }
.grit i:nth-child(1) { height: 34%; }
.grit i:nth-child(2) { height: 45%; }
.grit i:nth-child(3) { height: 56%; }
.grit i:nth-child(n+4) { background: transparent; }
.grit i:nth-child(4) { height: 67%; }
.grit i:nth-child(5) { height: 78%; }
.grit i:nth-child(6) { height: 89%; }
.grit i:nth-child(7) { height: 100%; }
.grit-note { margin-top: 12px; font-family: 'Manrope', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.section-paper .grit-note { color: var(--muted-2); }

/* ---- Split feature: copy one side, a plate the other, alternating ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 30px; } }
.split.flip .split-media { order: -1; }
@media (max-width: 900px) { .split.flip .split-media { order: 0; } }
.split-media { border: 1px solid var(--line); overflow: hidden; aspect-ratio: 4/3; }
.section-paper .split-media { border-color: var(--line-2); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.split-copy p { margin-top: 14px; color: var(--muted); font-size: 0.99rem; }
.section-paper .split-copy p { color: var(--muted-2); }
.split-copy .mini-list { list-style: none; padding: 0; margin: 20px 0 0; }
.split-copy .mini-list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
.section-paper .split-copy .mini-list li { border-top-color: var(--line-2); color: var(--muted-2); }

/* ---- FAQ ---- */
.faq { border-top: 1px solid var(--line); }
.section-paper .faq { border-top-color: var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.section-paper .faq details { border-bottom-color: var(--line-2); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 22px;
  font-family: 'Fraunces', serif;
  font-size: 1.08rem;
  color: var(--paper);
}
.section-paper .faq summary { color: var(--ink-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--gold); flex-shrink: 0; }
.faq details[open] summary::after { content: "\2013"; }
.faq .fa { padding: 0 0 22px; color: var(--muted); font-size: 0.95rem; max-width: 72ch; }
.section-paper .faq .fa { color: var(--muted-2); }

/* ---- Closing band ---- */
.cta-band { position: relative; overflow: hidden; padding: 92px 0; background: linear-gradient(150deg, rgba(198,155,60,0.16), var(--ink) 52%), var(--ink); border-top: 1px solid var(--line); text-align: center; }
.cta-band h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.cta-band p { margin: 16px auto 0; max-width: 52ch; color: var(--muted); }
.cta-band .btn { margin-top: 30px; }
.cta-band .btn + .btn { margin-left: 12px; }

/* ---- Course module index: the four modules as a reference list instead of
   four equal boxes, which was the last card grid left on the home page. --- */
.mod-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; border-top: 1px solid var(--line); margin-bottom: 48px; }
@media (max-width: 820px) { .mod-index { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .mod-index { display: none; } }
.mod-index .mod { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.mod-index .mod .mn { font-family: 'Fraunces', serif; font-size: 1.2rem; color: transparent; -webkit-text-stroke: 1px var(--gold); line-height: 1.3; }
.mod-index .mod h3 { font-size: 1.04rem; }
.mod-index .mod p { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; }

/* ==========================================================================
   MOBILE PRICE RAIL
   The two class cards used to stack, which put the second option most of a
   screen below the first and made the page read twice as long as it is. On a
   phone they now sit side by side on a native scroll-snap rail: real
   momentum, real snapping, no JS anywhere in the swipe path. The dots below
   are presentation only, driven off the rail's own scroll position.

   Note the padding-top on the rail. overflow-x:auto forces the block axis to
   auto as well, so the "20 seats" tag sitting at top:-13px would be clipped
   and would add a stray vertical scrollbar without that room.
   ========================================================================== */
.rail-dots { display: none; }
.rail-hint { display: none; }
@media (max-width: 720px) {
  .grid-2.price-rail {
    display: flex;
    gap: 16px;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* overflow-x:auto forces the block axis to auto too, so the reveal
       animation's 26px translateY on the cards would otherwise make the rail
       scrollable vertically as well. Pinned shut, with enough bottom padding
       that nothing is clipped mid-animation. */
    overflow-y: hidden;
    margin: 0 -24px;
    padding: 22px 24px 32px;
  }
  .grid-2.price-rail::-webkit-scrollbar { display: none; }
  .grid-2.price-rail > .card {
    flex: 0 0 85%;
    max-width: none;
    width: auto;
    margin: 0;
    scroll-snap-align: center;
  }
  .grid-2.price-rail > .card:hover { transform: none; }
  .rail-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 4px; }
  .rail-dots button {
    width: 7px; height: 7px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(244,234,222,0.28);
    cursor: pointer;
    transition: background-color .25s var(--ease), width .25s var(--ease), border-radius .25s var(--ease);
  }
  .rail-dots button.is-active { background: var(--gold-bright); width: 22px; border-radius: 4px; }
  .rail-hint {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
  }
}

/* ---- Light ground overrides ----
   Everything in the editorial pass was authored on the near-black ground.
   Anything that also lands on .section-paper needs its own colour here or it
   renders cream on cream and disappears outright. That is exactly what
   happened to the pour-rate caption on first pass, and it is the third time
   this project has hit the same trap. Check any new component on
   .section-paper before shipping it. */
.section-paper .rate-block { background: rgba(198,155,60,0.10); }
.section-paper .rate-block .figure { color: var(--gold-deep); }
.section-paper .rate-block .figure small { color: var(--muted-2); }
.section-paper .rate-block p { color: var(--muted-2); }
.section-paper .sys-row .n { -webkit-text-stroke-color: var(--gold-deep); }
.section-paper .faq summary::after { color: var(--gold-deep); }
.section-paper .split-copy h3 { color: var(--ink-text); }
.section-paper .bu-caption { border-top-color: var(--line-2); color: var(--muted-2); }
.section-paper .bu-caption b { color: var(--gold-deep); }
.section-paper .bu-step { border-top-color: var(--line-2); }
.section-paper .bu-step .sh { color: var(--ink-text); }
.section-paper .bu-step .sn, .section-paper .bu-step .sp { color: var(--muted-2); }
.section-paper .bu-step.is-on .sn { color: var(--gold-deep); }
.section-paper .mod-index, .section-paper .mod-index .mod { border-color: var(--line-2); }
.section-paper .mod-index .mod p { color: var(--muted-2); }
.section-paper .mod-index .mod .mn { -webkit-text-stroke-color: var(--gold-deep); }
.section-paper .rail-hint { color: var(--muted-2); }
.section-paper .rail-dots button { background: rgba(27,27,29,0.22); }
.section-paper .rail-dots button.is-active { background: var(--gold-deep); }

/* ---- Grid children must be allowed to shrink ----
   Grid items default to min-width:auto, so the spec sheet (min-width 460px,
   inside its own overflow-x:auto wrapper) pushed its whole grid track wider
   than a phone and gave the floors page real horizontal page scroll. The
   wrapper can only scroll if the track it sits in is allowed to be narrow
   than its content. */
.split > *, .buildup > *, .ed-head > *, .story-wrap > *, .enroll-wrap > * { min-width: 0; }

/* ---- Phone density ----
   104px of air between every section reads as generous on a desktop and as
   dead scrolling on a phone. */
@media (max-width: 700px) {
  .section { padding: 74px 0; }
  .quote-band { padding: 72px 0; }
  .cta-band { padding: 72px 0; }
  .ed-head { margin-bottom: 30px; }
}

/* ==========================================================================
   BEFORE / AFTER SLIDER  (touch devices)
   The hover-to-reveal canvas needs a cursor, so touch used to get the plain
   finished photo and nothing else. A free drag over the whole panel is not
   the answer on a phone either, it fights the page scroll. So coarse
   pointers get a proper divider slider instead: the grip owns the gesture
   (touch-action:none on it alone, so vertical scrolling anywhere else on the
   panel still works), and tapping the photo moves the divider to that point.

   Two real <img> layers here, not the canvas. Both frames are the same
   tripod shot, so a straight clip-path split keeps them in perfect register
   with no cover-fit maths to duplicate.
   ========================================================================== */
.reveal-panel { --split: 50%; }
.reveal-panel.is-slider { cursor: pointer; }
.reveal-panel .rp-before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}
.reveal-panel.is-easing .rp-before { transition: clip-path .5s var(--ease); }

.rp-divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 0; z-index: 4; }
.reveal-panel.is-easing .rp-divider { transition: left .5s var(--ease); }
.rp-line {
  position: absolute; top: 0; bottom: 0; left: -1px;
  width: 2px;
  background: var(--paper);
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.rp-grip {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(244,234,222,0.72);
  background: rgba(12,10,7,0.5);
  backdrop-filter: blur(8px);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize;
  /* The one element that owns the horizontal gesture. Without this the
     browser claims the drag for panning and the divider never moves. */
  touch-action: none;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.rp-grip svg { width: 24px; height: 24px; }
.reveal-panel.is-dragging .rp-grip { background: rgba(12,10,7,0.78); transform: translate(-50%, -50%) scale(1.06); }

.rp-label {
  position: absolute;
  bottom: 14px;
  z-index: 3;
  font-family: 'Manrope', sans-serif;
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1px 10px rgba(0,0,0,0.95);
  pointer-events: none;
}
.rp-label.a { left: 14px; }
.rp-label.b { right: 14px; }