/* =========================================================================
   BrandCraft — site styles
   Tokens first, then chrome, then the page's own sections.
   The engine (scrollcraft.css) owns .sc-* and [data-sc-*]; nothing here
   restyles those.
   ========================================================================= */

:root {
  /* engine tokens: the Studio ground is the resting state */
  --sc-canvas:      #F3EEE4;
  --sc-surface:     #EAE3D6;
  --sc-ink:         #14201B;
  --sc-ink-soft:    #5A665F;
  --sc-accent:      #A93A2B;
  --sc-accent-ink:  #F8F3EA;
  --sc-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Instrument Sans", system-ui, sans-serif;
  --sc-shadow-color: 350 30% 4%;
  --sc-r-sm: 4px; --sc-r-md: 6px; --sc-r-lg: 10px;
  --sc-track-tight: -0.025em;
  --sc-leading-none: 0.98;
  --sc-t-4xl: clamp(3rem, 1.6rem + 5.2vw, 6.4rem);

  /* the site's own tokens */
  --bone:   #F3EEE4;
  --bone-2: #EAE3D6;
  --night:  #1A0A0E;
  --night-2:#2A1016;
  --ink-b:  #14201B;
  --soft-b: #5A665F;
  --ink-n:  #F3EEE4;
  --soft-n: #C4AEB1;
  --cran:   #A93A2B;
  --gold:   #E0A64A;
  --gold-2: #F4D28C;
  --wire:   #4A2A2E;
  --red:    #C0392B;
  --red-2:  #D9483A;
  --rail-w: 3.25rem;
}

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

body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold); color: var(--night); }

/* Two grounds. Each restates color so inherited text re-inks (taste.md). */
.g-bone  { background: var(--bone); --sc-ink: var(--ink-b); --sc-ink-soft: var(--soft-b); --sc-accent: var(--cran); --sc-accent-ink: #F8F3EA; --sc-surface: var(--bone-2); color: var(--sc-ink); }
.g-night { background: var(--night); --sc-ink: var(--ink-n); --sc-ink-soft: var(--soft-n); --sc-accent: var(--red); --sc-accent-ink: #FFF6EC; --sc-surface: var(--night-2); color: var(--sc-ink); letter-spacing: 0.004em; }
.g-night .sc-body { line-height: 1.7; }

h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 400; letter-spacing: var(--sc-track-tight); line-height: var(--sc-leading-none); text-wrap: balance; margin: 0; font-variation-settings: "opsz" 144; }
h3 { font-size: var(--sc-t-xl); }
em, .it { font-style: italic; font-weight: 300; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
img, svg { display: block; }
.measure { max-width: var(--sc-measure); }
.soft { color: var(--sc-ink-soft); }
.sc-label { color: var(--sc-ink-soft); }
.sc-display { font-variation-settings: "opsz" 144; }
.sc-body { color: var(--sc-ink-soft); }
.sc-body.lg { font-size: var(--sc-t-lg); line-height: 1.5; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.85em 1.5em; border-radius: var(--sc-r-md);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
  box-shadow: var(--sc-e1);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sc-e2); filter: brightness(1.06); }
.btn:active { transform: translateY(1px) scale(0.985); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 28%, transparent); box-shadow: none; }
.btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 7%, transparent); }
.btn svg { width: 1em; height: 1em; }
.link {
  display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: var(--sc-t-sm);
  color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 40%, transparent);
  padding-bottom: 0.15em; transition: border-color 140ms var(--sc-ease-out), gap 140ms var(--sc-ease-out);
}
.link:hover { border-color: var(--sc-ink); gap: 0.8em; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }

/* ------------------------------------------------------------------ chrome */
.bar {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5);
  padding: 1.1rem var(--sc-gutter);
  padding-right: calc(var(--sc-gutter) + var(--rail-w));
  color: var(--ink-n);
  transition: color 320ms var(--sc-ease-out), background-color 320ms var(--sc-ease-out), box-shadow 320ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: color-mix(in oklab, var(--bar-bg, var(--night)) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--bar-ink, var(--ink-n)) 10%, transparent);
  transition: opacity 320ms var(--sc-ease-out);
}
.bar.is-scrolled::before { opacity: 1; }
.bar.is-hidden { transform: translateY(-110%); }
.bar.on-bone { color: var(--ink-b); --bar-bg: var(--bone); --bar-ink: var(--ink-b); }
.bar.on-night { color: var(--ink-n); --bar-bg: var(--night); --bar-ink: var(--ink-n); }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.wordmark .logo { height: 2.1rem; width: auto; max-width: none; display: block; }
.wordmark .logo--black { display: none; }
.bar.on-bone:not(.is-open) .logo--ivory { display: none; }
.bar.on-bone:not(.is-open) .logo--black { display: block; }
.about-logo { width: clamp(200px, 24vw, 300px); height: auto; margin-bottom: var(--sc-6); }
.foot-brand { display: inline-flex; align-items: center; gap: 0.8rem; }
.foot-brand img { height: 1.3rem; width: auto; opacity: 0.9; }
.g-bone .foot-brand img { filter: invert(1) hue-rotate(180deg); }
.bar nav { display: flex; align-items: center; gap: var(--sc-6); }
.bar nav a { font-size: var(--sc-t-sm); font-weight: 500; text-decoration: none; opacity: 0.85; transition: opacity 140ms; }
.bar nav a:hover { opacity: 1; }
.bar nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 0.4em; text-decoration-color: var(--gold); }
.bar .btn { padding: 0.6em 1.1em; }
.on-bone .btn.btn--bar { background: var(--ink-b); color: var(--bone); }
.on-night .btn.btn--bar { background: var(--red); color: #FFF6EC; }
.menu-btn { display: none; background: none; border: 0; color: inherit; font: inherit; font-weight: 600; font-size: var(--sc-t-sm); padding: 0.5rem; cursor: pointer; }

@media (max-width: 860px) {
  .bar { padding-right: var(--sc-gutter); }
  .wordmark .logo { height: 1.8rem; }
  .about-logo { width: 200px; }
  .bar nav { position: fixed; inset: 0; top: 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sc-5);
    padding: var(--sc-gutter); background: var(--night); color: var(--ink-n); opacity: 0; pointer-events: none; transition: opacity 240ms var(--sc-ease-out); z-index: -2; }
  .bar nav a { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); font-weight: 400; letter-spacing: -0.02em; }
  .bar nav .btn { font-family: var(--sc-font-text); font-size: var(--sc-t-base); margin-top: var(--sc-5); background: var(--red); color: #FFF6EC; }
  .bar.is-open nav { opacity: 1; pointer-events: auto; }
  .bar.is-open { color: var(--ink-n); }
  .menu-btn { display: inline-block; }
}

/* ------------------------------------------------------------------ garland rail (signature move) */
.garland {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--rail-w); z-index: calc(var(--sc-z-chrome) - 1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  pointer-events: none;
}
.garland::before { content: ""; position: absolute; top: 12vh; bottom: 12vh; left: 50%; width: 1px; background: color-mix(in oklab, var(--rail-ink, var(--ink-n)) 22%, transparent); }
.garland ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1.4rem, 5vh, 3.2rem); position: relative; }
.garland a {
  position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; pointer-events: auto;
  background: color-mix(in oklab, var(--rail-ink, var(--ink-n)) 18%, transparent);
  box-shadow: 0 0 0 0 transparent;
  transition: background-color 380ms var(--sc-ease-out), box-shadow 420ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.garland a::after {
  content: attr(data-label); position: absolute; right: calc(100% + 0.9rem); top: 50%; translate: 0 -50%;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; white-space: nowrap;
  color: var(--rail-ink, var(--ink-n)); opacity: 0; transition: opacity 160ms var(--sc-ease-out), translate 160ms var(--sc-ease-out); translate: 6px -50%;
}
.garland a:hover::after, .garland a:focus-visible::after, .garland a.is-current::after { opacity: 0.85; translate: 0 -50%; }
.garland a.is-lit { background: var(--gold-2); box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 28%, transparent), 0 0 18px 4px color-mix(in oklab, var(--gold) 45%, transparent); }
.garland a.is-current { transform: scale(1.25); }
.garland a.is-give.is-lit { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 28%, transparent), 0 0 18px 4px color-mix(in oklab, var(--gold) 45%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--gold) 34%, transparent), 0 0 30px 8px color-mix(in oklab, var(--gold) 60%, transparent); } }
.garland.on-bone { --rail-ink: var(--ink-b); }
.garland.on-night { --rail-ink: var(--ink-n); }
@media (max-width: 860px) {
  .garland { top: auto; right: 0; left: 0; bottom: 0; width: auto; height: 2.6rem; flex-direction: row; padding: 0 var(--sc-gutter);
    background: linear-gradient(to top, color-mix(in oklab, var(--rail-bg, var(--night)) 92%, transparent), transparent); }
  .garland::before { top: 50%; bottom: auto; left: var(--sc-gutter); right: var(--sc-gutter); width: auto; height: 1px; }
  .garland ol { flex-direction: row; gap: clamp(1rem, 6vw, 2.4rem); }
  .garland a { width: 11px; height: 11px; }
  .garland a::after { display: none; }
  .garland.on-bone { --rail-bg: var(--bone); }
  .garland.on-night { --rail-bg: var(--night); }
}
@media (prefers-reduced-motion: reduce) { .garland a.is-give.is-lit { animation: none; } }

/* ------------------------------------------------------------------ snow */
.snow { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 900ms var(--sc-ease-out); }
.snow.is-on { opacity: 1; }

/* ------------------------------------------------------------------ folio (chapter marker in the margin) */
.folio {
  display: flex; align-items: center; gap: 0.8rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft);
  margin-bottom: var(--sc-7);
}
.folio::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; opacity: 0.6; }

/* ------------------------------------------------------------------ hero */
.hero { --sc-canvas: var(--night); }
.hero .sc-stage { background: var(--night); }
.plane { position: absolute; left: 50%; bottom: 0; width: max(100vw, 178vh); height: auto; max-width: none; translate: -50% 0; will-change: transform; pointer-events: none; }
.plane img { width: 100%; height: auto; max-width: none; }
.plane--far { bottom: auto; top: 0; }
.plane--mid { z-index: 2; }
.plane--near { z-index: 4; }
.hero-floor { position: absolute; inset-inline: 0; bottom: 0; height: 24vh; z-index: 5; background: linear-gradient(to bottom, transparent, var(--night)); pointer-events: none; }
.hero-layout { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center;
  padding: 5.5rem var(--sc-gutter) clamp(6rem, 18vh, 10rem); padding-right: calc(var(--sc-gutter) + var(--rail-w)); pointer-events: none; }
.hero-layout > * { pointer-events: auto; }
.hero-copy { max-width: 44rem; color: var(--ink-n); }
.hero-copy .presents { display: flex; align-items: center; gap: 0.8rem; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold-2); margin-bottom: var(--sc-5); }
.hero-copy h1 { font-size: var(--sc-t-4xl); text-shadow: 0 2px 30px rgba(20, 6, 9, 0.6); }
.hero-copy h1 em { color: var(--gold-2); }
.hero-copy .lede { margin-top: var(--sc-5); font-size: var(--sc-t-lg); color: color-mix(in oklab, var(--ink-n) 84%, transparent); max-width: 32rem; line-height: 1.45; }
.hero-copy .lede b { color: var(--ink-n); font-weight: 600; }
.hero-copy .ctas { margin-top: var(--sc-6); display: flex; gap: var(--sc-3); flex-wrap: wrap; align-items: center; }
.hero-copy .btn { background: var(--red); color: #FFF6EC; }
.hero-copy .btn--ghost { background: transparent; color: var(--ink-n); border-color: color-mix(in oklab, var(--ink-n) 35%, transparent); }
.hero-copy .btn--ghost:hover { background: color-mix(in oklab, var(--ink-n) 10%, transparent); }
.hero-copy .link { color: var(--ink-n); border-color: color-mix(in oklab, var(--ink-n) 40%, transparent); margin-left: var(--sc-2); }
.hero-billing { position: absolute; z-index: 6; left: var(--sc-gutter); right: calc(var(--sc-gutter) + var(--rail-w)); bottom: clamp(1.4rem, 5vh, 3rem);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; align-items: center; color: var(--ink-n); font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.01em; }
.hero-billing span { display: inline-flex; align-items: center; gap: 0.6rem; opacity: 0.85; }
.hero-billing span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 10px 2px color-mix(in oklab, var(--gold) 55%, transparent); }
.sleigh { position: absolute; z-index: 2; top: 8%; left: 0; width: clamp(220px, 26vw, 420px); pointer-events: none; animation: fly 34s linear infinite; animation-delay: -6s; }
.sleigh img { width: 100%; height: auto; }
@keyframes fly { 0% { transform: translate3d(-40vw, 6vh, 0) rotate(-3deg); } 50% { transform: translate3d(50vw, -4vh, 0) rotate(2deg); } 100% { transform: translate3d(140vw, 4vh, 0) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .sleigh { animation: none; left: 62%; top: 12%; } }
@media (max-width: 860px) {
  .plane { width: max(100vw, 100vh); }
  .plane--near { width: 140vh; }
  .plane--mid { translate: -38% 0; }
  .hero-layout { justify-content: flex-end; padding: 4.5rem var(--sc-gutter) 8.6rem; }
  .hero-copy h1 { font-size: var(--sc-t-2xl); }
  .hero-copy .lede { font-size: var(--sc-t-base); }
  .hero-billing { bottom: 3.6rem; right: var(--sc-gutter); font-size: var(--sc-t-xs); }
  .sleigh { top: 13%; width: 56vw; }
}

/* ------------------------------------------------------------------ studio chapters */
.chapter { padding-block: var(--sc-section); }
.chapter + .chapter { padding-top: 0; }
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
/* Right padding also clears the garland rail's chapter label (about 6rem of caps hanging
   left of the dots), so cards and images never sit under it on laptop widths. */
@media (min-width: 861px) { .wrap { padding-right: max(calc(var(--sc-gutter) + var(--rail-w) * 0.5), calc(var(--rail-w) + 8rem)); } }

.who { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8) var(--sc-9); align-items: end; }
.who h2 { font-size: var(--sc-t-3xl); }
.who h2 em { color: var(--cran); }
.who .aside { display: grid; gap: var(--sc-5); }
.verbs { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--sc-hairline); }
.verbs li { display: grid; grid-template-columns: 8rem 1fr; gap: var(--sc-4); padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.verbs b { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); letter-spacing: -0.01em; font-variation-settings: "opsz" 48; }
.verbs span { color: var(--sc-ink-soft); }

.craft { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8) var(--sc-9); align-items: start; }
.craft .sticky { position: sticky; top: 7rem; }
.craft h2 { font-size: var(--sc-t-3xl); }
.craft h2 em { color: var(--cran); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 4rem 1fr; gap: var(--sc-4); padding: var(--sc-6) 0; border-top: 1px solid var(--sc-hairline); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--sc-font-display); font-size: var(--sc-t-xl); color: var(--cran); font-variation-settings: "opsz" 48; line-height: 1; }
.steps h3 { font-size: var(--sc-t-xl); margin-bottom: var(--sc-2); }
.steps p { color: var(--sc-ink-soft); max-width: 42ch; }
.figure { margin: 0; }
.figure img { width: 100%; height: auto; border-radius: var(--sc-r-md); }
.figure figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 600; }
.craft-figs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); margin-top: var(--sc-8); align-items: end; }
.craft-figs .figure:nth-child(2) { translate: 0 var(--sc-8); }

.range { display: grid; gap: var(--sc-7); }
.range-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-6) var(--sc-9); align-items: end; }
.range h2 { font-size: var(--sc-t-3xl); }
.range-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sc-5); }
.svc { display: grid; gap: var(--sc-4); align-content: start; }
.svc--a { grid-column: 1 / 8; }
.svc--b { grid-column: 8 / 13; padding-top: var(--sc-9); }
.svc--c { grid-column: 1 / 6; padding-top: var(--sc-7); }
.svc--d { grid-column: 6 / 13; }
.svc .figure { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--sc-r-md); }
.svc--b .figure, .svc--c .figure { aspect-ratio: 4 / 5; }
.svc .figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .svc:hover .figure img { transform: scale(1.03); } }
.svc h3 { font-size: var(--sc-t-xl); }
.svc p { color: var(--sc-ink-soft); max-width: 40ch; }
.svc--d { align-self: end; }

@media (max-width: 860px) {
  .who, .craft, .range-head { grid-template-columns: 1fr; gap: var(--sc-6); }
  .craft .sticky { position: static; }
  .craft-figs { grid-template-columns: 1fr 1fr; gap: var(--sc-3); }
  .craft-figs .figure:nth-child(2) { translate: 0 var(--sc-6); }
  .range-grid { grid-template-columns: 1fr; }
  .svc { grid-column: auto !important; padding-top: 0 !important; }
  .svc .figure { aspect-ratio: 4 / 3 !important; }
  .verbs li { grid-template-columns: 6rem 1fr; }
}

/* ------------------------------------------------------------------ the turn */
.turn .sc-stage { display: grid; place-items: center; text-align: center; }
.turn-inner { max-width: 40rem; padding-inline: var(--sc-gutter); }
.turn h2 { font-size: var(--sc-t-2xl); }
.turn p { margin-top: var(--sc-4); color: var(--sc-ink-soft); }
.turn .ornament { width: 2.5rem; height: 2.5rem; margin: 0 auto var(--sc-6); color: var(--gold); }

/* ------------------------------------------------------------------ the peak */
.peak .sc-stage { background: var(--night); overflow: clip; }
.peak-scene { position: absolute; inset: 0; z-index: 1; }
.peak-scene .sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 110%, color-mix(in oklab, var(--gold) 18%, var(--night)) 0%, var(--night) 55%); }
.peak-scene .sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 78%, color-mix(in oklab, var(--gold) 34%, transparent) 0%, transparent 42%); opacity: var(--glow, 0); }
.peak-scene .ground { position: absolute; inset-inline: 0; bottom: 0; height: 18vh; background: linear-gradient(to bottom, transparent, #2E141B 40%, #2E141B); }
.peak-tree { position: absolute; left: 66%; bottom: 4vh; height: 86vh; width: auto; translate: -50% 0; z-index: 2; }
.peak-tree .bauble { opacity: 0.35; transition: opacity 500ms var(--sc-ease-out); }
.peak.is-lit .peak-tree .bauble { opacity: 1; }
.peak-tree .bulb { opacity: 0; transition: opacity 260ms var(--sc-ease-out); transition-delay: var(--d, 0s); }
.peak-tree .bulb__glow { opacity: 0.2; }
.peak-tree .star { opacity: 0.15; transition: opacity 500ms var(--sc-ease-out) 0.6s; }
.peak.is-lit .peak-tree .bulb, .peak.is-lit .peak-tree .star { opacity: 1; }
.peak.is-lit .peak-tree .bulb__glow { opacity: 0.22; animation: twinkle 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes twinkle { 0%,100% { opacity: 0.18; } 50% { opacity: 0.34; } }
.peak-copy { position: absolute; z-index: 3; inset-inline: var(--sc-gutter); top: 50%; translate: 0 -50%; max-width: 40rem; color: var(--ink-n); }
.peak-copy--lead { left: var(--sc-gutter); right: auto; }
.peak-copy h2 { font-size: var(--sc-t-4xl); }
.peak-copy h2 em { color: var(--gold-2); }
.peak-copy .lede { margin-top: var(--sc-5); font-size: var(--sc-t-lg); line-height: 1.5; color: color-mix(in oklab, var(--ink-n) 85%, transparent); max-width: 32rem; }
.peak-copy .meta { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); font-size: var(--sc-t-sm); color: var(--soft-n); }
.meta dd, .meta dt { margin: 0; }
.peak-copy .meta b { color: var(--ink-n); font-weight: 600; display: block; font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.2em; }
.peak-copy .ctas { margin-top: var(--sc-6); display: flex; gap: var(--sc-3); flex-wrap: wrap; }
.peak-copy .btn { background: var(--red); color: #FFF6EC; }
.peak-copy .btn--ghost { background: transparent; color: var(--ink-n); border-color: color-mix(in oklab, var(--ink-n) 35%, transparent); }
.peak-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklab, var(--night) 82%, transparent) 0%, color-mix(in oklab, var(--night) 55%, transparent) 38%, transparent 62%); }
@media (max-width: 860px) {
  .peak-tree { height: 38vh; bottom: 57vh; left: 50%; }
  .peak-copy { top: auto; translate: none; bottom: 4rem; }
  .peak-copy .meta { margin-top: var(--sc-4); }
  .peak-copy .lede { margin-top: var(--sc-3); font-size: var(--sc-t-base); }
  .peak-copy h2 { font-size: var(--sc-t-2xl); }
  .peak-scrim { background: linear-gradient(to top, color-mix(in oklab, var(--night) 92%, transparent) 0%, color-mix(in oklab, var(--night) 70%, transparent) 45%, transparent 70%); }
}

/* ------------------------------------------------------------------ belonging (four promises) */
.vision { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sc-7) var(--sc-9); align-items: start; }
.vision blockquote { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.3; letter-spacing: -0.01em; font-variation-settings: "opsz" 72; }
.vision blockquote + p { margin-top: var(--sc-5); color: var(--sc-ink-soft); }
.promises { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sc-5); margin-top: var(--sc-8); }
.promise { position: relative; display: grid; gap: var(--sc-4); }
.promise .figure { overflow: hidden; border-radius: var(--sc-r-md); background: var(--night-2); }
.promise .figure img { width: 100%; height: 100%; object-fit: cover; }
.promise--1 { grid-column: 1 / 6; }  .promise--1 .figure { aspect-ratio: 4 / 5; }
.promise--2 { grid-column: 6 / 13; padding-top: var(--sc-10); } .promise--2 .figure { aspect-ratio: 16 / 10; }
.promise--3 { grid-column: 1 / 8; }  .promise--3 .figure { aspect-ratio: 16 / 10; }
.promise--4 { grid-column: 8 / 13; padding-top: var(--sc-8); } .promise--4 .figure { aspect-ratio: 4 / 5; }
.promise h3 { font-size: var(--sc-t-2xl); }
.promise h3 em { color: var(--gold-2); }
.promise p { color: var(--sc-ink-soft); max-width: 38ch; }
@media (max-width: 860px) {
  .vision { grid-template-columns: 1fr; }
  .promises { grid-template-columns: 1fr; gap: var(--sc-7); }
  .promise { grid-column: auto !important; padding-top: 0 !important; }
  .promise .figure { aspect-ratio: 4 / 3 !important; }
}

/* ------------------------------------------------------------------ the ask */
.ask { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-7) var(--sc-9); align-items: start; }
.ask h2 { font-size: var(--sc-t-3xl); }
.ask h2 em { color: var(--gold-2); }
.ask .intro { margin-top: var(--sc-5); color: var(--sc-ink-soft); }
.tiers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.tiers li { display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr; gap: var(--sc-4); padding: var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline); }
.tiers b { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: -0.015em; font-variation-settings: "opsz" 48; line-height: 1.1; }
.tiers b small { display: block; font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); margin-top: 0.4em; font-weight: 600; }
.tiers p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.ask .ctas { margin-top: var(--sc-6); display: flex; gap: var(--sc-3); flex-wrap: wrap; }
.give {
  margin-top: var(--sc-8); padding: var(--sc-6); border-radius: var(--sc-r-lg);
  background: var(--night-2); box-shadow: var(--sc-edge), var(--sc-e2);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sc-5); align-items: center;
}
.give h3 { font-size: var(--sc-t-xl); }
.give p { margin-top: var(--sc-2); color: var(--sc-ink-soft); max-width: 46ch; }
.give .btn--ghost { color: var(--gold-2); border-color: color-mix(in oklab, var(--gold) 60%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 18%, transparent); }
.give .btn--ghost:hover { background: color-mix(in oklab, var(--gold) 16%, transparent); border-color: var(--gold); color: #FFF6EC; }
@media (max-width: 860px) { .ask { grid-template-columns: 1fr; } .give { grid-template-columns: 1fr; } .tiers li { grid-template-columns: 1fr; gap: var(--sc-2); } }

.gets { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: 0.6rem; border-top: 1px solid var(--sc-hairline); }
.gets li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sc-3); padding: 0.7rem 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.gets b { color: var(--gold-2); font-weight: 600; }
.gets span { color: var(--sc-ink-soft); }
@media (max-width: 600px) { .gets li { grid-template-columns: 1fr; gap: 0.2rem; } }

/* ------------------------------------------------------------------ close */
.close-stage { display: grid; grid-template-rows: 1fr auto; min-height: 100svh; background: var(--night); }
.close-inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sc-7) var(--sc-9); align-items: center; padding: calc(var(--sc-8) + 2rem) var(--sc-gutter) var(--sc-6); max-width: var(--sc-maxw); margin-inline: auto; width: 100%; }
.close-inner h2 { font-size: var(--sc-t-3xl); }
.close-inner h2 em { color: var(--gold-2); }
.close-inner .lede { margin-top: var(--sc-5); color: var(--sc-ink-soft); max-width: 36ch; }
.close-inner .ways { margin-top: var(--sc-6); display: grid; gap: var(--sc-2); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.close-inner .ways a { color: var(--ink-n); width: fit-content; }
.foot { border-top: 1px solid var(--sc-hairline); padding: var(--sc-5) var(--sc-gutter) calc(var(--sc-5) + 1rem); display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); flex-wrap: wrap; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); max-width: var(--sc-maxw); margin-inline: auto; width: 100%; }
.foot nav { display: flex; gap: var(--sc-5); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink-n); }
@media (max-width: 860px) { .close-inner { grid-template-columns: 1fr; padding-top: var(--sc-8); gap: var(--sc-6); } .foot { padding-bottom: 3.6rem; }  }

/* ------------------------------------------------------------------ forms */
.form { display: grid; gap: var(--sc-4); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 20%, transparent); border-radius: var(--sc-r-md); padding: 0.8em 0.9em; width: 100%;
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
.field textarea { min-height: 7rem; resize: vertical; }
.field select option { color: #14201B; }
.form .actions { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; }
.form .status { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.form .status.ok { color: var(--gold-2); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 0.55em 1em; border-radius: var(--sc-r-md); border: 1px solid color-mix(in oklab, var(--sc-ink) 24%, transparent); font-size: var(--sc-t-sm); font-weight: 600; transition: background-color 140ms, color 140ms, border-color 140ms; }
.chip input:checked + span { background: var(--red); color: #FFF6EC; border-color: var(--red); }
.chip input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ inner pages */
.page-hero { position: relative; padding: calc(var(--sc-section) + 4rem) 0 var(--sc-section); overflow: clip; }
.page-hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-6) var(--sc-9); align-items: end; }
.page-hero h1 { font-size: var(--sc-t-4xl); }
.page-hero h1 em { color: var(--gold-2); }
.g-bone .page-hero h1 em { color: var(--cran); }
.page-hero .lede { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); }
.page-hero .ctas { margin-top: var(--sc-5); display: flex; gap: var(--sc-3); flex-wrap: wrap; }
.page-hero-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.page-hero-art img { position: absolute; left: 50%; bottom: -6vh; width: max(100vw, 178vh); max-width: none; translate: -50% 0; opacity: 0.75; }
.page-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--night) 0%, color-mix(in oklab, var(--night) 55%, transparent) 45%, color-mix(in oklab, var(--night) 35%, transparent) 75%, var(--night) 100%); }
@media (max-width: 860px) { .page-hero .wrap { grid-template-columns: 1fr; } .page-hero h1 { font-size: var(--sc-t-3xl); } }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-7) var(--sc-9); align-items: start; }
.split h2 { font-size: var(--sc-t-3xl); }
.split h2 em { color: var(--gold-2); }
.g-bone .split h2 em { color: var(--cran); }
.split .sticky { position: sticky; top: 7rem; }
.split .body { display: grid; gap: var(--sc-5); }
.split .body p { color: var(--sc-ink-soft); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split .sticky { position: static; } }

.program { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.program li { display: grid; grid-template-columns: 6rem 1fr; gap: var(--sc-5); padding: var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline); }
.program .t { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-variation-settings: "opsz" 48; color: var(--gold-2); }
.program h3 { font-size: var(--sc-t-lg); margin-bottom: 0.25em; }
.program p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 52ch; }
@media (max-width: 600px) { .program li { grid-template-columns: 1fr; gap: var(--sc-2); } }

.faq { border-top: 1px solid var(--sc-hairline); }
.faq details { border-bottom: 1px solid var(--sc-hairline); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); padding: var(--sc-4) 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-variation-settings: "opsz" 48; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sc-font-text); color: var(--sc-ink-soft); transition: transform 200ms var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--sc-5); color: var(--sc-ink-soft); max-width: 60ch; }

.tier-cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sc-5); }
.tier { grid-column: span 6; padding: var(--sc-6); border-radius: var(--sc-r-lg); background: var(--sc-surface); box-shadow: var(--sc-edge); display: grid; gap: var(--sc-4); align-content: start; }
.tier--lead { grid-column: span 12; grid-template-columns: 1fr 1fr; gap: var(--sc-6); background: color-mix(in oklab, var(--red) 22%, var(--sc-surface)); }
.tier h3 { font-size: var(--sc-t-2xl); }
.tier .kicker { font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--gold-2); }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.tier li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.6rem; align-items: start; }
.tier li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-top: 0.55em; justify-self: center; }
@media (max-width: 860px) { .tier { grid-column: span 12; } .tier--lead { grid-template-columns: 1fr; } }

.inkind { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-5); }
.inkind div { padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.inkind h3 { font-size: var(--sc-t-lg); margin-bottom: 0.3em; }
.inkind p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
@media (max-width: 700px) { .inkind { grid-template-columns: 1fr; } }

.band { padding: var(--sc-section) 0; }
.band--bone { background: var(--bone); }
.band--night { background: var(--night); }
.band--night-2 { background: var(--night-2); }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-4); }
.strip .figure { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--sc-r-md); }
.strip .figure img { width: 100%; height: 100%; object-fit: cover; }
.strip .figure:nth-child(2) { translate: 0 var(--sc-7); }
@media (max-width: 700px) { .strip { grid-template-columns: 1fr 1fr; } .strip .figure:nth-child(3) { display: none; } }

.simple-foot { background: var(--night); color: var(--soft-n); }
.simple-foot .foot { max-width: none; }

.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--gold); color: var(--night); padding: 0.6em 1em; }
.skip:focus { left: var(--sc-gutter); top: var(--sc-gutter); }

[data-sc-progress] { background: var(--gold) !important; }

@media (max-width: 860px) { #notify .wrap { grid-template-columns: 1fr !important; } #notify .form { grid-template-columns: 1fr !important; } }

.days { list-style: none; margin: var(--sc-5) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.days li { display: grid; grid-template-columns: 6rem 1fr; gap: var(--sc-3); padding: 0.8rem 0; border-bottom: 1px solid var(--sc-hairline); }
.days b { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); color: var(--gold-2); font-variation-settings: "opsz" 48; line-height: 1.15; }
.days span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); align-self: center; }

/* ------------------------------------------------------------------ creed (vision, mission, commitments) */
.creed { display: grid; gap: var(--sc-7); }
.creed-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-5) var(--sc-9); align-items: end; }
.creed-head h2 { font-size: var(--sc-t-3xl); }
.creed-head h2 em { color: var(--cran); }
.creed-head .sc-body { max-width: 40ch; }
.creed-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); }
.creed-item { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--sc-4); align-content: start; padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); border-radius: var(--sc-r-lg); }
.creed-item dt { display: flex; align-items: center; gap: 0.8rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.creed-item dt::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; }
.creed-item dd { margin: 0; display: grid; gap: var(--sc-4); }
.creed-line { font-family: var(--sc-font-display); font-variation-settings: "opsz" 72; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; }
.creed-item dd p:not(.creed-line) { color: var(--sc-ink-soft); max-width: 46ch; }
.creed-item--vision { --sc-ink: var(--ink-n); --sc-ink-soft: var(--soft-n); color: var(--sc-ink); background: var(--night); border: 1px solid color-mix(in oklab, var(--gold) 28%, transparent); box-shadow: var(--sc-e2); }
.creed-item--vision::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 70% at 100% 100%, color-mix(in oklab, var(--gold) 20%, transparent), transparent 70%); }
.creed-item--vision dt { color: var(--gold-2); }
.creed-item--mission { background: var(--bone-2); box-shadow: var(--sc-edge); border: 1px solid color-mix(in oklab, var(--cran) 18%, transparent); }
.creed-item--mission dt { color: var(--cran); }
.creed-values { list-style: none; margin: 0; padding: var(--sc-5) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-5) var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.creed-values b { display: block; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); font-variation-settings: "opsz" 48; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.creed-values b::before { content: ""; display: block; width: 1.6rem; height: 2px; background: var(--gold); margin-bottom: 0.7rem; border-radius: 1px; }
.creed-values span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
@media (max-width: 860px) { .creed-head, .creed-grid, .creed-values { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ straight answers (sponsor objections) */
.answers { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-6) var(--sc-9); align-items: start; }
.answers-head h2, .answers-head h3 { font-size: var(--sc-t-2xl); }
.answers-head em { color: var(--gold-2); }
.answers-head > p:not(.folio) { margin-top: var(--sc-4); color: var(--sc-ink-soft); max-width: 36ch; }
.answers .faq { border-top-color: color-mix(in oklab, var(--gold) 40%, transparent); }
.answers .faq summary { font-size: var(--sc-t-md); padding: var(--sc-4) 0; }
.answers .faq summary::after { color: var(--gold); }
.answers .faq details p { max-width: 62ch; line-height: 1.6; }
.answers .faq details a { color: var(--sc-ink); }
@media (max-width: 860px) { .answers { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ reviews (the praise card) */
/* A night card on the bone ground, so it reads as a set piece rather than more body copy.
   One quote shows at a time; the slider is in site.js and degrades to a stack without it. */
.praise {
  --sc-ink: var(--ink-n); --sc-ink-soft: var(--soft-n); --sc-accent: var(--gold); --sc-accent-ink: var(--night);
  position: relative; isolation: isolate; overflow: hidden; color: var(--sc-ink);
  background: var(--night); border-radius: var(--sc-r-lg);
  border: 1px solid color-mix(in oklab, var(--gold) 28%, transparent);
  box-shadow: var(--sc-e2), 0 24px 48px -24px hsl(var(--sc-shadow-color) / 0.45);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 3.5vw, 4rem);
  display: grid; gap: var(--sc-6);
}
.praise::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, color-mix(in oklab, var(--gold) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, color-mix(in oklab, var(--red) 24%, transparent), transparent 70%);
}
.praise::after {
  content: "\201C"; position: absolute; right: clamp(1rem, 4vw, 3rem); top: -0.1em; z-index: -1; pointer-events: none;
  font-family: var(--sc-font-display); font-variation-settings: "opsz" 144; font-size: clamp(9rem, 22vw, 18rem); line-height: 1;
  color: color-mix(in oklab, var(--gold) 16%, transparent);
}
.praise-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; }
.praise .folio { margin: 0; color: var(--gold-2); }
.praise .folio::before { opacity: 1; }
.stars { display: inline-flex; gap: 0.2rem; color: var(--gold); margin: 0; }
.stars svg { width: 1.05rem; height: 1.05rem; fill: currentColor; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--gold) 55%, transparent)); }
.praise-track { display: grid; }
.praise-track .review { grid-area: 1 / 1; margin: 0; display: grid; align-content: start; gap: var(--sc-5); max-width: 42ch; }
.praise-track .review:not(.is-active) { opacity: 0; visibility: hidden; transform: translateY(0.6rem); }
.praise-track .review.is-active { opacity: 1; visibility: visible; transform: none; }
.praise-track.is-ready .review { transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out), visibility 0s linear 620ms; }
.praise-track.is-ready .review.is-active { transition-delay: 0s, 0s, 0s; }
.praise .review blockquote { margin: 0; font-family: var(--sc-font-display); font-variation-settings: "opsz" 72; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.22; letter-spacing: -0.015em; text-wrap: pretty; }
.praise .review figcaption { font-size: var(--sc-t-sm); color: var(--soft-n); display: grid; gap: 0.1rem; }
.praise .review figcaption b { display: block; color: var(--ink-n); font-weight: 600; }
.praise .review figcaption::before { content: ""; width: 2.5rem; height: 2px; background: var(--gold); margin-bottom: 0.6rem; border-radius: 1px; }
.praise-nav { display: flex; align-items: center; gap: var(--sc-4); }
.praise-nav[hidden] { display: none; }
.praise-btn {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-n); border: 1px solid color-mix(in oklab, var(--ink-n) 28%, transparent);
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.praise-btn svg { width: 1.1rem; height: 1.1rem; }
.praise-btn:hover { background: color-mix(in oklab, var(--gold) 18%, transparent); border-color: var(--gold); transform: translateY(-1px); }
.praise-dots { display: flex; gap: 0.5rem; }
.praise-dots button {
  width: 0.55rem; height: 0.55rem; padding: 0; border-radius: 999px; cursor: pointer; border: 0;
  background: color-mix(in oklab, var(--ink-n) 30%, transparent); transition: width 260ms var(--sc-ease-out), background-color 260ms var(--sc-ease-out);
}
.praise-dots button[aria-current="true"] { width: 1.6rem; background: var(--gold); }
.praise--inset { margin-top: var(--sc-6); background: var(--night-2); border-color: color-mix(in oklab, var(--gold) 40%, transparent); }
.praise--inset .review blockquote { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.praise--inset::after { font-size: clamp(7rem, 16vw, 11rem); }
@media (max-width: 860px) {
  .praise-track .review { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .praise-track.is-ready .review, .praise-btn, .praise-dots button { transition: none; }
}

/* Older single-quote layout kept for any page still using it. */
.reviews { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-6) var(--sc-9); align-items: start; }
.review { margin: 0; display: grid; gap: var(--sc-4); }
.review blockquote { margin: 0; font-family: var(--sc-font-display); font-variation-settings: "opsz" 72; line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; }
.review--lead blockquote { font-size: var(--sc-t-2xl); }
.review figcaption { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.review figcaption b { display: block; color: var(--sc-ink); font-weight: 600; }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- full footer */
.foot--full { display: grid; gap: var(--sc-5); padding-top: var(--sc-6); }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); flex-wrap: wrap; }
.foot-line { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-md); color: var(--gold-2); font-variation-settings: 'opsz' 48; }
.foot--full nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-4) var(--sc-6); }
.foot--full nav div { display: grid; gap: 0.35rem; align-content: start; }
.foot--full nav b { color: var(--ink-n); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; margin-bottom: 0.25rem; }
.foot--full nav a, .foot--full nav span { width: fit-content; }
.foot-legal { display: flex; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); }
.foot-legal > span:last-child { display: flex; gap: var(--sc-4); }
.close .foot--full { padding-bottom: var(--sc-5); }
@media (max-width: 860px) {
  .foot--full nav { grid-template-columns: 1fr 1fr; }
  .foot--full { padding-bottom: 4.5rem; }
  .close-stage { grid-template-rows: auto auto; }
}
@media (max-width: 520px) { .foot--full nav { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- form extras */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form .consent { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.form .consent a { color: inherit; }
.form button[disabled] { opacity: 0.6; cursor: wait; }

/* ---------------------------------------------------------------- document pages (privacy, terms, thanks, 404) */
.doc { padding: calc(var(--sc-8) + 3rem) var(--sc-gutter) var(--sc-9); max-width: 72ch; margin-inline: auto; }
.doc h1 { font-size: var(--sc-t-3xl); }
.doc h1 em { color: var(--gold-2); }
.doc .lede { margin-top: var(--sc-4); color: var(--sc-ink-soft); font-size: var(--sc-t-lg); }
.doc h2 { font-size: var(--sc-t-xl); margin-top: var(--sc-7); }
.doc h3 { font-size: var(--sc-t-md); margin-top: var(--sc-5); }
.doc p, .doc li { color: var(--sc-ink-soft); line-height: 1.65; margin-top: var(--sc-3); }
.doc ul { padding-left: 1.2rem; }
.doc a { color: var(--ink-n); }
.doc .ctas { margin-top: var(--sc-6); }
.doc .updated { font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); margin-top: var(--sc-4); }