/* =====================================================================
   YLP Studio — STRUCTURE & COMPONENTS
   Built entirely on tokens.css. No hardcoded colors/sizes/spacing here.
   Governed by docs/design-system.md + docs/design-cheat-sheet.md.
   ===================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* ---- Layout container -------------------------------------------- */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Section planes. Every boundary is a plane boundary. ---------- */
.section { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.section--white    { background: var(--white); color: var(--ink); }
.section--paper    { background: var(--paper); color: var(--ink); }
.section--graphite { background: var(--graphite); color: var(--warm-white); }
/* hero + close breathe hardest */
.section--airy { padding-top: var(--s-6); padding-bottom: var(--s-6); }

@media (min-width: 1025px) {
  .section { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .section--airy { padding-top: var(--s-7); padding-bottom: var(--s-7); }
}

/* ---- Type roles -------------------------------------------------- */
.display {
  font-size: var(--t-display); font-weight: var(--w-black);
  line-height: var(--lh-tight); letter-spacing: -.035em;
  margin: 0 0 var(--s-3); max-width: 16ch;
}
.section-head {
  font-size: var(--t-section); font-weight: var(--w-black);
  line-height: var(--lh-head); letter-spacing: -.03em;
  margin: 0 0 var(--s-3); max-width: 22ch;
}
.subsection {
  font-size: var(--t-subsection); font-weight: var(--w-bold);
  line-height: 1.3; letter-spacing: -.02em; margin: 0 0 var(--s-1);
}
.subhead {
  font-size: var(--t-subhead); font-weight: var(--w-regular);
  line-height: 1.5; margin: 0 0 var(--s-4); max-width: 46ch; color: var(--ink-soft);
}
.section--graphite .subhead { color: var(--stone); }
p { margin: 0 0 var(--s-3); max-width: var(--measure); }
.body { font-size: var(--t-body); }
.caption {
  font-size: var(--t-caption); line-height: 1.45; font-weight: var(--w-medium);
  letter-spacing: .01em; color: var(--grey); margin: 0;
}
.section--graphite .caption { color: var(--stone); }
.lead { max-width: 52ch; }

/* Statement archetype: volt emphasis. On graphite volt is legit type (12.7:1). */
.vt { color: var(--volt); }
/* On white, volt emphasis MUST be a filled block with ink type (volt/white = 1.3:1). */
.vblock {
  background: var(--volt); color: var(--ink); padding: 0 .28em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---- Buttons ----------------------------------------------------- */
/* CTA label is under A/B test — min-width keeps layout stable across labels. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: var(--w-bold); font-size: 15.5px; line-height: 1;
  padding: 14px 24px; min-width: 168px; border: 1px solid transparent;
  border-radius: var(--r); text-decoration: none; cursor: pointer;
  transition: background var(--motion) var(--ease), color var(--motion) var(--ease),
              border-color var(--motion) var(--ease);
}
.btn--primary   { background: var(--volt); color: var(--ink); }
.btn--primary:hover  { background: var(--volt-hover); }
.btn--primary:active { background: var(--volt-press); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--volt); color: var(--ink); border-color: var(--ink); }
.btn--text {
  background: transparent; color: var(--ink); min-width: 0;
  padding: 14px 0; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
}
.btn--sm { font-size: 14px; padding: 10px 17px; min-width: 0; }
.btn[disabled], .btn.is-disabled {
  background: var(--hairline); color: #A6A39E; border-color: var(--hairline);
  cursor: not-allowed;
}
/* on graphite (incl. the consent card): secondary keeps a warm-white outline
   so it stays readable on the dark surface; text button picks up volt */
.section--graphite .btn--secondary,
.panel .btn--secondary,
.consent .btn--secondary { color: var(--warm-white); border-color: var(--warm-white); }
.section--graphite .btn--secondary:hover,
.consent .btn--secondary:hover { background: var(--volt); color: var(--ink); }
.section--graphite .btn--text { color: var(--volt); border-bottom-color: var(--volt); }

/* ---- Inline links ------------------------------------------------ */
.lnk {
  color: var(--ink); text-decoration: none; font-weight: var(--w-bold);
  border-bottom: 2px solid var(--ink); padding-bottom: 1px;
}
.lnk:hover { box-shadow: inset 0 -8px 0 var(--volt); }
.section--graphite .lnk { color: var(--warm-white); border-bottom-color: var(--volt); }

/* ---- Volt badge (square corner = not a button) ------------------- */
.badge {
  display: inline-block; background: var(--volt); color: var(--ink);
  font-size: var(--t-caption); font-weight: var(--w-bold);
  letter-spacing: .04em; padding: 5px 9px; border-radius: 0;
}

/* ---- Focus: near-black ring on white, volt ring on graphite ------ */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
.section--graphite :focus-visible, .panel :focus-visible, .consent :focus-visible { outline-color: var(--volt); }

/* ---- Header / nav ------------------------------------------------ */
/* Sticky on every viewport: pins the bar on scroll (desktop) and keeps the
   compact logo + top-right toggle stuck on phone. Separates with a hairline +
   fully opaque white — never a shadow (style guide §08). The mobile menu
   panel (z-50) sits above it, so it's covered while the menu is open. */
.site-header { position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--hairline); background: var(--white); }
/* Sticky offset: in-page anchors land below the pinned bar, not hidden under it. */
:where(.section[id], #top) { scroll-margin-top: calc(var(--s-5) + var(--s-3)); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
       padding-top: var(--s-3); padding-bottom: var(--s-3); }

/* Logo lockup: YLP in a volt block + "Studio" beside it (both bold), "Your Listing
   Partner" (medium) underneath. Tagline is 0.6242 of the lockup (Jade's 53.75/86.11
   proportion); a hair of UNIFORM letter-spacing makes it span the lockup's exact
   width with EVEN spacing (no justify holes). Sized in em so it scales as one unit. */
.logo {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .18em;
  font-size: 18px; color: var(--ink); text-decoration: none; line-height: 1;
}
.logo__row {
  display: inline-flex; align-items: center; gap: .24em;
  font-weight: var(--w-black); font-size: 1em; letter-spacing: -.03em; white-space: nowrap;
}
.logo .mark {
  background: var(--volt); color: var(--ink); border-radius: var(--r);
  padding: .31em .26em .24em; letter-spacing: -.02em; /* top>bottom = optical centering */
}
.logo__tag {
  font-weight: var(--w-medium); font-size: .6242em; letter-spacing: .028em;
  color: var(--ink); white-space: nowrap;
}
.logo--dark, .logo--dark .logo__tag { color: var(--warm-white); }

.nav-links { display: none; list-style: none; margin: 0; padding: 0; gap: var(--s-3); }
.nav-links a {
  font-size: 15px; font-weight: var(--w-medium); color: #514E49; text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--ink); border-bottom-color: var(--volt); /* volt underline = allowed small mark */
}
.nav-right { display: flex; align-items: center; gap: var(--s-3); }
.nav-cta { display: none; }                 /* header CTA is outline; hidden until inline nav */

/* Why YLP dropdown — ported from the homepage nav so the sub-pages (case study,
   portfolio) and the Decision Path page carry the same working menu. Unique
   selectors; no conflict with the .nav rules above. */
.whyylp { position: relative; }
.whyylp__btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  font-family: inherit; font-size: 15px; font-weight: var(--w-medium); color: #514E49;
  cursor: pointer; padding-bottom: 3px; border-bottom: 2px solid transparent;
  transition: border-color var(--motion) var(--ease), color var(--motion) var(--ease);
}
.whyylp__btn:hover, .whyylp[data-open="true"] .whyylp__btn { color: var(--ink); border-bottom-color: var(--volt); }
.whyylp__btn svg { transition: transform .2s; }
.whyylp[data-open="true"] .whyylp__btn svg { transform: rotate(180deg); }
.whyylp__menu {
  position: absolute; top: calc(100% + 14px); right: 0; width: 420px; max-width: 82vw;
  background: var(--white); border: 1px solid var(--hairline);
  box-shadow: 0 12px 32px rgba(14, 15, 18, .14);
  padding: 12px; display: none; flex-direction: column; gap: 4px; z-index: 60;
}
.whyylp[data-open="true"] .whyylp__menu { display: flex; }
.wy-item { text-decoration: none; padding: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.wy-item:hover, .wy-item--active { background: var(--paper); }
.wy-item__t { font-weight: var(--w-bold); font-size: 16px; color: var(--ink); }
.wy-item__d { font-size: 14px; color: var(--ink-soft); }
.wy-item--soon .wy-item__t, .wy-item--soon .wy-item__d { color: var(--grey); }
.badge-live { background: var(--volt); color: var(--ink); font-weight: var(--w-black); font-size: 11px; letter-spacing: .08em; padding: 3px 7px; flex-shrink: 0; }
.badge-soon { border: 1.5px solid var(--grey); color: var(--grey); font-weight: var(--w-black); font-size: 11px; letter-spacing: .08em; padding: 2px 6px; flex-shrink: 0; }

/* collapsed control (< 1025) — same square toggle vocabulary as the accordion */
.nav-toggle {
  width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: var(--r);
  background: var(--white); position: relative; cursor: pointer; padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; width: 20px; height: 2px; background: var(--ink);
}
/* Middle bar centered in the 38px inner box. The ::before/::after are positioned
   relative to the span itself (it's absolutely positioned), so they use left:0 to
   sit directly above/below it — inheriting the span's left:9px pushed them 9px
   right and clipped them (the "weird lines" bug). */
.nav-toggle span { left: 9px; top: 18px; }
.nav-toggle span::before, .nav-toggle span::after { left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* collapsed nav opens a full-height graphite PLANE, not a floating menu */
.panel {
  position: fixed; inset: 0; z-index: 50; background: var(--graphite); color: var(--warm-white);
  display: none; flex-direction: column; padding: var(--s-3) var(--gutter) var(--s-5);
}
.panel.is-open { display: flex; }
.panel-top { display: flex; align-items: center; justify-content: space-between; }
.panel-close {
  width: 40px; height: 40px; border: 1px solid var(--warm-white); border-radius: var(--r);
  background: transparent; color: var(--warm-white); font-size: 22px; line-height: 1; cursor: pointer;
}
.panel-links { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.panel-links a {
  font-size: var(--t-subsection); font-weight: var(--w-bold); color: var(--warm-white);
  text-decoration: none;
}
.panel .btn { margin-top: auto; }
body.no-scroll { overflow: hidden; }

@media (min-width: 1025px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* ---- Hero (Ask archetype) ---------------------------------------- */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }
.hero-cta { margin-top: var(--s-2); }
@media (min-width: 1025px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-5); }
}

/* ---- Square media placeholder (work sits here, on white) --------- */
.sq { position: relative; width: 100%; padding-top: 100%; background: var(--paper);
      border: 1px solid var(--hairline); border-radius: 0; overflow: hidden; }
.sq__label { position: absolute; inset: 0; display: flex; align-items: center;
             justify-content: center; font-size: var(--t-caption); font-weight: var(--w-bold);
             letter-spacing: .08em; color: var(--stone); text-transform: none; }
.media-cap { margin-top: var(--s-1); }

/* ---- Split archetype --------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: center; }
.split--reverse .split__media { order: -1; }
.marks { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.marks li { display: flex; gap: var(--s-1); align-items: flex-start; font-size: 15.5px; color: var(--ink-soft); }
.section--graphite .marks li { color: var(--stone); }
.marks li::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px;
  background: var(--ink); }                 /* near-black square on white… */
.section--graphite .marks li::before { background: var(--volt); } /* …volt only on graphite */
@media (min-width: 1025px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .split--reverse .split__media { order: 0; }
}

/* ---- Triad (three or nothing; vertical hairlines, never cards) --- */
.triad { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.triad__item { padding-left: 0; }
.triad--ruled .triad__item { padding: 0 var(--s-3); border-left: 1px solid var(--hairline); }
.triad--ruled .triad__item:first-child { padding-left: 0; border-left: 0; }
.section--graphite .triad--ruled .triad__item { border-color: var(--graphite-hover); }
.stat { font-size: 38px; font-weight: var(--w-black); letter-spacing: -.035em; line-height: 1; margin: 0 0 var(--s-1); }
@media (min-width: 641px) { .triad { grid-template-columns: repeat(3, 1fr); gap: var(--s-2); } }

/* ---- Portfolio grid: 1 / 2 / 3 columns --------------------------- */
.folio { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
.folio__cap { margin-top: var(--s-1); }
@media (min-width: 641px)  { .folio { grid-template-columns: repeat(2, 1fr); gap: var(--gutter); } }
@media (min-width: 1025px) { .folio { grid-template-columns: repeat(3, 1fr); } }
.folio-more { margin-top: var(--s-4); text-align: right; max-width: none; } /* full width so right-align reaches the grid's right edge */

/* ---- Process steps (the ONE numbered section) -------------------- */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-4); counter-reset: step; }
.step__n { font-size: var(--t-caption); font-weight: var(--w-bold); letter-spacing: .08em; color: var(--grey); margin: 0 0 var(--s-1); }
.section--graphite .step__n { color: var(--stone); }
@media (min-width: 641px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }

/* ---- Offer / pricing --------------------------------------------- */
.scope { border-left: 3px solid var(--ink); padding-left: var(--s-3); max-width: 60ch; }
.section--graphite .scope { border-left-color: var(--volt); }
.price { font-size: var(--t-section); font-weight: var(--w-black); letter-spacing: -.03em; line-height: 1; }
.price small { font-size: var(--t-caption); font-weight: var(--w-medium); color: var(--grey); letter-spacing: 0; }
/* Pricing variant switch: hidden unless <body class="variant-pricing"> */
[data-pricing] { display: none; }
body.variant-pricing [data-pricing] { display: block; }
body.variant-pricing [data-nopricing] { display: none; }

/* ---- Offer: split with a config-driven "what you get" panel ------
   The left ask spine never rebuilds; the price treatment and the right panel
   re-skin per <body data-offer> (config.offerType). Price stays gated by
   variant-pricing, so the no-pricing A/B variant shows no price in any shape. */
.split--top { align-items: start; }

/* Left — price treatments: single number (pricing/form) ↔ tier table (package).
   Same component, different width; shown only in the single-price variant. */
.offer-price--single, .offer-price--tiers { display: none; }
body.variant-pricing[data-offer="pricing"] .offer-price--single,
body.variant-pricing[data-offer="form"]    .offer-price--single { display: block; }
body.variant-pricing[data-offer="package"] .offer-price--tiers  { display: block; }
.offer-tiers { max-width: 320px; }
.offer-tiers__row { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline-graphite); }
.offer-tiers__row:first-child { border-top: 1px solid var(--hairline-graphite); }
.offer-tiers__name { font-size: var(--t-caption); font-weight: var(--w-bold); color: var(--stone); }
.offer-tiers__amt  { font-size: var(--t-subsection); font-weight: var(--w-black);
  letter-spacing: -.025em; color: var(--warm-white); }

/* Right — one flat, hairline-structured spec panel per offer type (never a card). */
.offer-panel { border: 1px solid var(--hairline-graphite); display: none; }
body[data-offer="pricing"] .offer-panel--set,
body[data-offer="call"]    .offer-panel--call,
body[data-offer="form"]    .offer-panel--form,
body[data-offer="package"] .offer-panel--package { display: block; }
.offer-panel__cap { font-size: var(--t-caption); font-weight: var(--w-bold); letter-spacing: .06em;
  color: var(--stone); margin: 0; padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--hairline-graphite); }

/* Neutral deliverable modules — the unit of sale, never portfolio work on graphite. */
.offer-modules { padding: var(--s-3); border-bottom: 1px solid var(--hairline-graphite); }
.offer-modules__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); }
.offer-modules--pkg { display: grid; gap: var(--s-1); }
.offer-modules--pkg .offer-modules__grid { grid-template-columns: repeat(6, 1fr); }
.offer-cell { aspect-ratio: 1 / 1; background: var(--graphite-hover); }
.offer-note { font-size: var(--t-caption); color: var(--stone); margin: var(--s-2) 0 0; }

/* Shared spec rows (set / call / package). */
.offer-specs { margin: 0; padding: 0; list-style: none; }
.offer-specs li { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline;
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--hairline-graphite); }
.offer-specs li:last-child { border-bottom: 0; }
.offer-specs .k { font-size: var(--t-caption); font-weight: var(--w-bold); letter-spacing: .01em; color: var(--stone); }
.offer-specs .v { font-size: var(--t-body); font-weight: var(--w-bold); letter-spacing: -.01em;
  color: var(--warm-white); text-align: right; }

/* Call agenda (reuses .marks) + self-serve selector for the form. */
.offer-agenda { padding: var(--s-3) var(--s-3) var(--s-1); }
.offer-agenda .marks { margin: 0; }
.offer-opts { padding: var(--s-2) var(--s-3) var(--s-3); }
.offer-opt { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; cursor: pointer;
  font-size: var(--t-body); color: var(--warm-white); }
.offer-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.offer-opt__rdo { width: 20px; height: 20px; border: 2px solid var(--warm-white); border-radius: 50%;
  flex: 0 0 auto; position: relative; }
.offer-opt input:checked + .offer-opt__rdo::after { content: ""; position: absolute;
  left: var(--s-optical); top: var(--s-optical); width: var(--s-1); height: var(--s-1);
  border-radius: 50%; background: var(--warm-white); }
.offer-opt input:focus-visible + .offer-opt__rdo { outline: 2px solid var(--volt); outline-offset: 3px; }
.offer-form-note { font-size: var(--t-caption); color: var(--stone); margin: 0; padding: 0 var(--s-3) var(--s-3); }

/* Offer Option 2 · Any Scale — "from $XXX" lead-in + a volt range track.
   The panel is always shown (not config-gated), so it overrides .offer-panel's hide. */
.offer-panel--scale { display: block; }
.offer-from { font-size: var(--t-caption); font-weight: var(--w-bold); letter-spacing: .01em; color: var(--stone); }
.section--graphite .price small { color: var(--stone); } /* muted-on-graphite is stone, never low-contrast grey */
.offer-scale { padding: var(--s-4) var(--s-3) var(--s-3); border-bottom: 1px solid var(--hairline-graphite); }
.offer-scale__rail { position: relative; display: flex; justify-content: space-between; }
.offer-scale__line { position: absolute; left: 7px; right: 7px; top: 6px; height: 2px; background: var(--volt); }
.offer-scale__node { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--s-1); align-items: center; }
.offer-scale__node:first-child { align-items: flex-start; }
.offer-scale__node:last-child { align-items: flex-end; }
.offer-scale__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--warm-white); border: 3px solid var(--graphite); }
.offer-scale__lbl { font-size: var(--t-caption); font-weight: var(--w-bold); letter-spacing: .01em; color: var(--stone); white-space: nowrap; }

/* ---- FAQ accordion (one open; volt bar + indent) ----------------- */
.acc { border-top: 1px solid var(--hairline); max-width: 640px; }
/* Head + subhead left-align to the normal section edge (like every other
   section — the FAQ wrap is full width). The accordion stays a centred 820
   column so the questions read as one balanced block instead of hugging the
   left. Jade's direction: header goes left, question blocks stay centred.
   Answers keep their own 56ch reading cap. */
#faq .acc { max-width: 820px; margin-left: auto; margin-right: auto; }
.acc__item { border-bottom: 1px solid var(--hairline); border-left: 4px solid transparent;
  padding-left: 0; transition: border-color var(--motion) var(--ease), padding-left var(--motion) var(--ease); }
.acc__item.is-open { border-left-color: var(--volt); padding-left: 18px; }
.acc__q { width: 100%; display: flex; justify-content: space-between; gap: 18px; align-items: center;
  background: none; border: 0; font-family: inherit; font-size: var(--t-subsection); font-weight: var(--w-bold);
  letter-spacing: -.02em; color: var(--ink); text-align: left; padding: 18px 0; cursor: pointer; }
.acc__icon { flex: 0 0 auto; width: 26px; height: 26px; position: relative; background: var(--paper);
  border-radius: var(--r); transition: background var(--motion) var(--ease); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; background: var(--ink);
  transition: transform var(--motion) var(--ease); }
.acc__icon::before { left: 7px; top: 12px; width: 12px; height: 2px; }
.acc__icon::after  { left: 12px; top: 7px; width: 2px; height: 12px; }
.acc__item.is-open .acc__icon { background: var(--volt); }
.acc__item.is-open .acc__icon::after { transform: scaleY(0); }
.acc__a { font-size: var(--t-body); color: var(--ink-soft); padding: 0 0 20px; max-width: 56ch; display: none; }
.acc__item.is-open .acc__a { display: block; }

/* Answer-embedded "show, don't tell" placeholder: supplied photo -> finished image.
   Neutral placeholder art (swap for a real before/after) — reads by composition:
   dull + over-padded vs. filled frame with a callout on the surface. Colors are tokens;
   the 96px tile + inner percentages are placeholder-art internals, replaced by a real image. */
.acc__demo { display: block; margin-top: var(--s-2); }
.acc__demo-row { display: flex; align-items: center; gap: var(--s-2); }
.acc__demo-sq { position: relative; flex: 0 0 auto; display: block; width: 96px; aspect-ratio: 1 / 1;
  border: 1px solid var(--hairline); background: var(--paper); overflow: hidden; }
.acc__demo-sq i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: block; background: var(--stone); border-radius: var(--r); }
.acc__demo-sq--supplied i { width: 42%; height: 38%; }
.acc__demo-sq--final { background: var(--white); }
.acc__demo-sq--final i { width: 58%; height: 62%; top: auto; bottom: 14%; transform: translateX(-50%); }
.acc__demo-sq--final i::after { content: ""; position: absolute; right: 8%; bottom: 12%;
  width: 46%; height: 16%; background: var(--paper); border-radius: var(--r); }
.acc__demo-arrow { flex: 0 0 auto; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--ink); }
.acc__demo-cap { display: block; margin-top: var(--s-1); font-size: var(--t-caption);
  line-height: 1.45; font-weight: var(--w-medium); color: var(--grey); }

/* ---- Forms (labels above; validate on blur; message + border) ---- */
.field { margin-bottom: var(--s-3); max-width: 440px; }
.lbl { display: block; font-size: 14px; font-weight: var(--w-bold); margin-bottom: var(--s-1); }
.inp { width: 100%; font-family: inherit; font-size: 16px; line-height: 1.4; padding: 13px 14px;
  border: 1px solid #C9C6C1; border-radius: var(--r); background: var(--white); color: var(--ink); }
.inp::placeholder { color: #A6A39E; }
textarea.inp { min-height: 104px; resize: vertical; }
.help { font-size: 13.5px; color: var(--grey); margin: var(--s-1) 0 0; }
.inp[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.err-msg { font-size: 13.5px; color: var(--error); font-weight: var(--w-bold); margin: var(--s-1) 0 0; }
.choice { display: flex; gap: 14px; align-items: center; font-size: 16px; min-height: 44px; }
.cbx, .rdo { appearance: none; -webkit-appearance: none; width: 20px; height: 20px;
  border: 2px solid var(--ink); background: var(--white); position: relative; cursor: pointer; flex: 0 0 auto; margin: 0; }
.cbx { border-radius: var(--r); } .rdo { border-radius: 50%; }
.cbx:checked, .rdo:checked { background: var(--ink); }
.cbx:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--volt); border-width: 0 2.5px 2.5px 0; transform: rotate(43deg); } /* volt mark = state */
.rdo:checked::after { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--volt); }

/* ---- Inline notice (no toasts) ----------------------------------- */
.notice { border: 1px solid var(--hairline); border-left: 4px solid var(--ink);
  padding: 15px 18px; max-width: 520px; border-radius: var(--r); }
.notice b { display: block; margin-bottom: 3px; }
.notice p { margin: 0; font-size: 15px; }

/* ---- Footer: masthead colophon (white → boundary after the graphite close)
       + the ONE volt utility strip. Concept B — asymmetric 3-part grid,
       single column on phone, opened by a 2px ink rule. ------------ */
.footer-links { background: var(--white); color: var(--ink); padding: var(--s-5) 0 var(--s-4); }
.footer-masthead { display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.footer-desc { color: var(--ink-soft); font-size: var(--t-body); line-height: 1.55; margin: var(--s-3) 0 0; max-width: 40ch; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.footer-col-h { margin: 0 0 var(--s-1); font-size: var(--t-caption); font-weight: var(--w-bold); color: var(--grey); }
.footer-col a { color: var(--ink); font-size: 15px; text-decoration: none;
  border-bottom: 1px solid var(--hairline); padding-bottom: 2px; transition: border-color var(--motion) var(--ease); }
.footer-col a:hover { border-bottom-color: var(--ink); }
.footer-note { color: var(--grey); font-size: var(--t-caption); line-height: 1.5; margin: var(--s-2) 0 0; max-width: 34ch; white-space: pre-line; }
/* asymmetric 3-part colophon from tablet up (single column on phone) */
@media (min-width: 641px) { .footer-masthead { grid-template-columns: 2fr 1fr 1fr; } }
/* the page's single volt band — ink type, underlined links, no buttons */
.footer-strip { background: var(--volt); color: var(--ink); }
.footer-strip .wrap { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center;
  align-items: center; padding-top: var(--s-3); padding-bottom: var(--s-3); }
/* Legal links (Privacy · Terms · AI disclosure) hidden site-wide per Jade
   2026-09-08 — kept in every page's markup, just not shown. With them gone the
   copyright is the only item left, so the flex row (centered above) sits it mid-band. */
.footer-strip .wrap p:has(a) { display: none; }
.footer-strip p { margin: 0; font-size: var(--t-caption); font-weight: var(--w-medium); line-height: 1.35; }
.footer-strip a { color: var(--ink); text-decoration: underline; }
.footer-strip a + a { margin-left: var(--s-2); }
/* phone: keep the band inside the 40–64px range even when it stacks to two lines */
@media (max-width: 640px) { .footer-strip .wrap { flex-direction: column; align-items: center;
  gap: var(--s-1); padding-top: var(--s-1); padding-bottom: var(--s-1); } }

/* ---- Consent banner — Concept B "Corner Card", CHARCOAL, bottom-RIGHT -----
   Appears on first arrival (main.js §5), then the choice is remembered so it
   doesn't nag on repeat visits. Graphite card, hairline, opaque, no shadow.
   Accept is the only volt in view; sits in the corner, clear of the CTA. */
.consent { position: fixed; right: var(--gutter); bottom: var(--gutter); left: auto; z-index: 45;
  width: 340px; max-width: calc(100% - var(--gutter) * 2);
  background: var(--graphite); color: var(--warm-white);
  border: 1px solid var(--hairline-graphite); border-radius: var(--r);
  padding: var(--s-3); display: none; }
.consent.is-visible { display: block; }
.consent__title { margin: 0 0 var(--s-1); font-weight: var(--w-bold); font-size: 16px;
  letter-spacing: -.01em; color: var(--warm-white); }
.consent__copy { margin: 0 0 var(--s-3); max-width: none; font-size: 14px; line-height: 1.5; color: var(--stone); }
.consent__copy a { color: var(--warm-white); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--w-bold); }
.consent__acts { display: flex; flex-direction: column; gap: var(--s-1); align-items: stretch; }
.consent__acts .btn { width: 100%; }
.consent__manage { align-self: flex-start; margin-top: var(--s-1); padding: 0 0 1px;
  background: none; border: 0; border-bottom: 1px solid var(--warm-white); border-radius: 0;
  font-family: inherit; font-size: 13.5px; font-weight: var(--w-bold); color: var(--warm-white); cursor: pointer; }
.consent__manage:hover { border-bottom-color: var(--volt); }
/* Manage-preferences panel: per-category choice (revealed by the Manage button). */
.consent__prefs { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--hairline-graphite); }
.consent__prefs:not([hidden]) { display: flex; flex-direction: column; gap: var(--s-2); }
.consent__pref { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2);
  font-size: 13px; line-height: 1.45; color: var(--stone); cursor: pointer; }
.consent__pref strong { color: var(--warm-white); font-weight: var(--w-bold); }
.consent__pref input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--volt); }
.consent__pref input:disabled { opacity: .55; cursor: not-allowed; }
.consent__prefs .btn { width: 100%; margin-top: var(--s-1); }

/* ---- Booking pop-up (Concept C) — every "Book a call" opens this -----
   Scrim: flat Near Black at reduced opacity, NO blur (style guide §05, the one
   scrim exception). Split card: graphite ask + white form, reusing .field /
   .inp / .choice / .btn. Elevation is a hairline + opaque fill, never a shadow.
   Wired in main.js §9. JS-off: the CTAs fall back to their #offer anchors. */
.book { position: fixed; inset: 0; z-index: 60; display: none;
  padding: var(--s-4) var(--gutter);
  background: rgba(14, 15, 18, .62); overflow: auto; }   /* flat scrim, no blur */
.book.is-open { display: flex; }
/* Centre via the modal's auto margins, NOT align-items/justify-content: when the
   modal is taller than the phone viewport, auto margins collapse and it top-aligns
   so the overlay can scroll to every edge (the × and submit). align-items:center
   would push the top out of reach above the viewport — un-closable on phones. */
.book__modal { position: relative; width: 100%; max-width: 640px; margin: auto; background: var(--white);
  border: 1px solid var(--hairline); border-radius: var(--r);
  display: grid; grid-template-columns: 1fr; overflow: hidden; }
@media (min-width: 620px) { .book__modal { grid-template-columns: .8fr 1fr; } }

.book__ask { background: var(--graphite); color: var(--warm-white); padding: var(--s-4);
  display: flex; flex-direction: column; }   /* column so the Option 2 link drops to the corner */
.book__ask h2 { font-weight: var(--w-black); font-size: 22px; line-height: 1.14;
  letter-spacing: -.03em; margin: 0 0 var(--s-2); color: var(--warm-white); max-width: 16ch; }
.book__ask p { font-size: 15px; line-height: 1.55; color: var(--stone); margin: 0 0 var(--s-3); max-width: 34ch; }
.book__ask .marks { margin-top: 0; }
.book__ask .marks li { color: var(--stone); }
.book__ask .marks li::before { background: var(--volt); }   /* volt square is legit on graphite */
.book__ask :focus-visible { outline-color: var(--volt); }

.book__form { padding: var(--s-4); }
.book__form .field { max-width: none; margin-bottom: var(--s-2); }
.book__form .choice { align-items: flex-start; margin-top: var(--s-1); }
.book__form .choice span { font-size: 14.5px; line-height: 1.4; }
.book__form .btn { width: 100%; margin-top: var(--s-3); }

/* the exit — bordered square top-right, fills volt on hover (secondary logic) */
.book__x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; background: var(--white);
  border: 1px solid var(--ink); border-radius: var(--r); cursor: pointer; z-index: 2;
  transition: background var(--motion) var(--ease); }
.book__x:hover { background: var(--volt); }
.book__x::before, .book__x::after { content: ""; position: absolute; width: 18px; height: 2px; background: var(--ink); }
.book__x::before { transform: rotate(45deg); }
.book__x::after  { transform: rotate(-45deg); }

/* Option 2 link — tucked into the bottom-left corner OF THE CARD (the graphite
   ask panel), small. margin-top:auto drops it to the corner; warm-white link on
   graphite with a volt underline on hover. */
.book__opt2 { margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: var(--w-bold);
  color: var(--warm-white); text-decoration: none; border-bottom: 1px solid var(--warm-white);
  padding: 0 0 1px; transition: border-color var(--motion) var(--ease); }
.book__opt2:hover { border-bottom-color: var(--volt); }

/* confirmation view — reuses the accordion's 4px left-edge volt bar, no green */
.book-confirm { display: none; border-left: 4px solid var(--volt); padding-left: var(--s-3); }
.book-confirm h3 { margin: 0 0 var(--s-1); font-weight: var(--w-bold); font-size: var(--t-subsection); letter-spacing: -.02em; }
.book-confirm p { margin: 0 0 var(--s-1); font-size: 16px; line-height: 1.55; }
[data-book-scope].is-done form { display: none; }
[data-book-scope].is-done .book-confirm { display: block; }

/* ---- Standalone booking page (Option 2) — Concept B "Centered Card": white
   field, one centered column, a hairline rule between the ask and the form (no
   card fill). The design Jade approved (Shares: jnfdard). */
.book-page { background: var(--white); color: var(--ink); min-height: 100vh;
  display: flex; flex-direction: column; }
.book-page__head { display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) var(--gutter); border-bottom: 1px solid var(--hairline); }
.book-page__back { color: var(--ink); text-decoration: none; font-weight: var(--w-bold);
  font-size: 15px; border-bottom: 2px solid var(--ink); padding-bottom: 1px; }
.book-page__back:hover { box-shadow: inset 0 -8px 0 var(--volt); border-bottom-color: var(--volt); }
.book-page__main { flex: 1; display: flex; align-items: center; padding: var(--s-6) var(--gutter); }
.book-page__col { max-width: 460px; width: 100%; margin: 0 auto; text-align: center; }
.book-page__col h1 { font-weight: var(--w-black); font-size: clamp(30px, 4.4vw, 42px); line-height: 1.06;
  letter-spacing: -.035em; margin: 0 0 var(--s-3); }
.book-page__col .lede { font-size: var(--t-subhead); line-height: 1.5; color: var(--ink-soft); margin: 0 0 var(--s-4); }
.book-page__divide { height: 1px; background: var(--hairline); margin: 0 auto var(--s-4); }
.book-page__col form { text-align: left; }   /* form fields stay left-aligned */
.book-page .field { max-width: none; }
.book-page .btn { width: 100%; margin-top: var(--s-3); }
[data-book-scope].is-done .book-page__live { display: none; }   /* replace the whole ask on submit */
.book-page .book-confirm { text-align: left; max-width: 460px; margin: 0 auto; }
.book-page .book-confirm h1 { text-align: left; font-size: clamp(24px, 3.4vw, 30px); line-height: 1.15; margin: 0 0 var(--s-2); }

/* ---- Utilities --------------------------------------------------- */
.stack-sm > * + * { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.placeholder-tag { color: var(--grey); font-style: italic; } /* marks lorem/placeholder copy */

/* ---- Motion: answer actions only; honor reduced-motion ----------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =====================================================================
   v2 — alignment fixes, hover states, new sections
   ===================================================================== */

/* square works as a block whether it's a <div> or a <span> (tiles use span) */
.sq { display: block; }

/* hero: primary + one quiet alternate; labels can grow without shifting */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
/* phone: centre the hero CTA(s) once the hero has stacked (both variants) */
@media (max-width: 768px) { .btn-row { justify-content: center; } }

/* tertiary text button: underline fills volt on hover (the one place volt
   is allowed at text scale on white — as a link underline). */
.btn--text:hover { border-bottom-color: var(--volt); }

/* WORK tiles are links with a clear hover affordance ---------------- */
.tile { display: block; text-decoration: none; color: inherit; }
.tile .sq { transition: border-color var(--motion) var(--ease); }
.tile:hover .sq, .tile:focus-visible .sq { border-color: var(--ink); }
.tile__cap { display: block; margin-top: var(--s-1); }
.tile:hover .tile__cap, .tile:focus-visible .tile__cap {
  box-shadow: inset 0 -8px 0 var(--volt); /* volt highlight under the caption */
}

/* WHY US pillars: equal grid → all three proof squares identical
   (fixes the ruled-triad bug where column 1 rendered wider/taller). */
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.pillar .sq { margin-bottom: var(--s-2); }
.pillar .subsection { margin-top: 0; }
@media (min-width: 641px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }

/* HOW IT WORKS: oversized numerals as wayfinding graphics (the one section
   allowed to number). Jade's call — numbers in the brand green so they pop.
   Volt is illegible as type on white (~1.3:1), so per the guide it's a filled
   volt block with near-black type (the same lockup as the YLP logo mark); this
   also pops far harder than pale green text would. inline-block hugs the digits
   so it's a tight "01/02/03" chip, not a full-width bar. */
.step__num { font-size: 56px; font-weight: var(--w-black); letter-spacing: -.03em;
  line-height: 1; margin: 0 0 var(--s-2);
  display: inline-block; background: var(--volt); color: var(--ink);
  padding: .06em .18em; border-radius: var(--r); }

/* AI PROVENANCE DISCLOSURE: quiet, constrained, muted (never volt). */
.disclosure { max-width: 68ch; }

/* GUARANTEE — the commitment ledger: three commitments as editorial ruled
   rows. A solid top rule + hairline dividers + the spacing scale carry the
   structure (no cards, no numbers, no colour treatment). Marks are near-black
   squares on white; volt stays off this plane. */
.ledger { border-top: 1px solid var(--ink); }
.ledger__row {
  display: grid; grid-template-columns: 1fr; gap: var(--s-2);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline);
}
.ledger__label {
  display: flex; gap: var(--s-2); align-items: baseline; margin: 0;
  font-size: var(--t-subsection); font-weight: var(--w-bold);
  letter-spacing: -.02em; line-height: 1.3;
}
.ledger__label::before {                 /* near-black square (volt squares are graphite-only) */
  content: ""; flex: 0 0 auto; width: 10px; height: 10px;
  background: var(--ink); position: relative; top: 2px;
}
.ledger__body { margin: 0; max-width: 54ch; color: var(--ink-soft); }
.ledger__meta { margin: 0; font-size: var(--t-caption); font-weight: var(--w-medium); color: var(--grey); }
@media (min-width: 1025px) {
  .ledger__row { grid-template-columns: 14rem 1fr 11rem; gap: var(--s-4); align-items: baseline; }
  .ledger__meta { text-align: right; }
}

/* --- Two green-accent treatments, live in the in-page preview switcher -------
   Jade/Alondra compare green options in the section (data-optswitch). On white,
   volt is only ever a filled shape with ink type. Once one is chosen: delete the
   .opt-switch* markup + the losing .hiw-option panel and keep the winner. */

/* Green accent bar (default): one 4px volt spine ties the three rows; the ink
   top-rule is dropped so it doesn't compete (same bar as FAQ / booking confirm). */
.ledger--bar { border-top: 0; border-left: 4px solid var(--volt); padding-left: var(--s-3); }
.ledger--bar .ledger__row:first-child { padding-top: 0; }

/* Green box: one contained volt card wraps the whole guarantee (heading + subhead
   + the three points, plain ledger). Ink type + squares read on volt; the hairline
   dividers step up and the grey meta darkens so they don't wash out on the fill. */
.guarantee-green { background: var(--volt); padding: var(--s-4); }
.guarantee-green .ledger__row { border-bottom-color: color-mix(in srgb, var(--ink) 18%, var(--volt)); }
.guarantee-green .ledger__meta { color: var(--ink-soft); }

@media (min-width: 1025px) {
  .ledger--bar { padding-left: var(--s-4); }
}

/* FOOTER strip: hover changes underline WEIGHT, never colour. */
.footer-strip a:hover { text-decoration-thickness: 3px; }

/* =====================================================================
   HOW IT WORKS — Transformation Relay (a work-sample tile per step).
   The .opt-switch* switcher + .hiw-option wrapper are SHARED components
   (also used by the Hero + Work Portfolio A/B previews) — defined below,
   do not delete with this section. The Guided Stepper is a separate
   exploration in trials/ (not shipped in this file).
   ===================================================================== */

/* centered switcher (middle top of the section) */
.opt-switch-wrap { margin: 0 0 var(--s-4); }
.opt-switch { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-1); }
.opt-switch__btn {                                                /* matches .hero-switch__btn exactly */
  font-family: inherit; font-weight: var(--w-bold); font-size: 14px; line-height: 1; letter-spacing: .02em;
  padding: 10px 16px; border: 1px solid var(--ink); border-radius: var(--r);
  background: var(--white); color: var(--ink); cursor: pointer;
  transition: background var(--motion) var(--ease), color var(--motion) var(--ease);
}
.opt-switch__btn:hover { background: var(--volt); }               /* like a secondary button */
.opt-switch__btn[aria-selected="true"] { background: var(--volt); color: var(--ink); } /* volt marks the selected state */
.opt-switch__note { text-align: center; max-width: none; margin: var(--s-1) 0 0; }

.hiw-option[hidden] { display: none; }

/* supporting step line + timing (shared by both options) */
.step__line { font-size: var(--t-body); line-height: 1.55; color: var(--grey);
  margin: 0 0 var(--s-2); max-width: 40ch; }              /* grey passes for body at 5.4:1 */
.step__time { margin: 0; }
.step__time strong { color: var(--ink); }

/* OPTION 1 · Relay — a work-sample tile per step; badge on the payoff */
.steps--relay .sq { margin-bottom: var(--s-1); }
.steps--relay .subsection { margin-top: var(--s-2); }
.hiw-badge { position: absolute; top: var(--s-1); right: var(--s-1); z-index: 1; } /* badge sits inside the square */

/* GUIDED STEPPER — a separate How It Works exploration; lives self-contained
   in trials/how-it-works-horizontal-stepper.html, not shipped in this file. */

/* =====================================================================
   WORK PORTFOLIO — two option treatments (INTERIM A/B, same switcher as
   How It Works). OPTION 1 The Proof Wall (main): a Split — copy column +
   a grid of finished work that resolves in on load and drops to a weak
   "before" on hover. OPTION 2 The Annotated Set (backup): the .folio grid
   with ink callouts that point at each decision. Products are inline-SVG
   stand-ins (swap for real work). Delete the losing .hiw-option + the
   switcher once the direction is locked.
   ===================================================================== */

/* Product illustration: work sits on white inside the framed square (.sq).
   Per-tile colours come in as --c1/--c2 inline (content, not design tokens). */
.wk-shot { position: absolute; inset: 0; background: var(--white); }
.wk-svg  { width: 100%; height: 100%; display: block;
  transition: transform var(--motion) var(--ease), filter var(--motion) var(--ease); }
.wk-svg .wk-p1  { fill: var(--c1, #8F9A78); }
.wk-svg .wk-p2  { fill: var(--c2, #A6B090); }
.wk-svg .wk-lbl { fill: var(--white); opacity: .92; }
.wk-svg .wk-mtf { fill: var(--white); opacity: .92; }
.wk-svg .wk-bdg { fill: var(--c2, #A6B090); }
.wk-svg .wk-hnd { fill: none; stroke: var(--c1, #8F9A78); stroke-width: 6; }
.wk-cue { transition: opacity var(--motion) var(--ease); }

/* WORK . Portfolio carousel - finished-work squares slide right->left and vanish
   behind a charcoal panel with a HARD edge (no gradient/fuzz - the blocky way).
   Panel = heading + see-more; cards reuse .sq / .wk-* art. main.js clones the set
   once so translateX:-50% loops seamlessly. */
.folio-carousel { position: relative; overflow: hidden; }
.fc__viewport { display: flex; align-items: center; height: 340px; }
.fc__track { display: flex; width: max-content;
  animation: fc-slide 42s linear infinite; will-change: transform; }
/* Carousel never pauses — it keeps sliding even under the cursor (Jade, 2026-09-04). */
.fc__card { flex: 0 0 auto; width: 250px; margin-right: var(--s-2); }
.fc__panel { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 300px;
  background: var(--graphite); color: var(--warm-white);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-2);
  padding: var(--s-3); }
.fc__panel .section-head { color: var(--warm-white); margin: 0; }
.fc__sub { color: var(--stone); margin: 0; }
.fc__actions { margin: 0; }
.fc__panel .btn--secondary { color: var(--warm-white); border-color: var(--warm-white); }
.fc__panel .btn--secondary:hover { background: var(--volt); color: var(--ink); border-color: var(--volt); }
@keyframes fc-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fc__track { animation: none; } }
@media (max-width: 680px) {
  .fc__panel { position: static; width: auto; }
  .fc__viewport { height: auto; padding: var(--s-3) 0; }
  .fc__card { width: 200px; }
}
/* final CTA: two buttons, centred */
.close .btn-row { justify-content: center; margin-top: 0; }
/* OPTION 1 · Proof Wall — Split (copy ~38% / grid ~62% on desktop). */
.pw { display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: center; margin-top: var(--s-4); }
.pw__actions { margin: var(--s-3) 0 0; }
/* Phone: 2 across (2×3). Tablet/desktop: 3 across. */
.pw__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
@media (min-width: 641px)  { .pw__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) {
  .pw { grid-template-columns: .62fr 1fr; gap: var(--s-5); }
}
/* resolve-in on load — the guide's one signature motion (thumbnail → full);
   fill-mode both keeps the resting state visible, and reduced-motion kills it. */
@keyframes wk-resolve { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.pw__grid .tile { animation: wk-resolve .34s var(--ease) both; }
.pw__grid .tile:nth-child(1) { animation-delay: .02s; }
.pw__grid .tile:nth-child(2) { animation-delay: .07s; }
.pw__grid .tile:nth-child(3) { animation-delay: .12s; }
.pw__grid .tile:nth-child(4) { animation-delay: .17s; }
.pw__grid .tile:nth-child(5) { animation-delay: .22s; }
.pw__grid .tile:nth-child(6) { animation-delay: .27s; }
/* hover / focus a finished tile → it falls back to its weak "before" */
.pw__grid .tile:hover .wk-svg, .pw__grid .tile:focus-within .wk-svg { transform: scale(.72); filter: grayscale(.92); }
.pw__grid .tile:hover .wk-cue, .pw__grid .tile:focus-within .wk-cue { opacity: 0; }

/* OPTION 2 · Annotated Set — ink markers + a line pointing at each decision.
   Markers/lines are ink; label pills sit on white. No volt/graphite on the work. */
.wk-annot { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity var(--motion) var(--ease); }
.tile:hover .wk-annot, .tile:focus-within .wk-annot { opacity: 1; }
/* Annotated products sit a touch smaller so the callouts have clean white
   margin to live in — the pills stay on white, never on the coloured product. */
.folio .wk-svg { transform: scale(.82); }
/* leader lines + dots (ink), drawn in the tile's own 0–100 coordinate space so
   the dot lands exactly on the feature and the line points to it. */
.wk-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wk-leads line { stroke: var(--ink); stroke-width: .8; }
.wk-leads circle { fill: var(--ink); }
/* label pill — sits in the white margin, connected to the spot by its leader line */
.wk-pill { position: absolute; transform: translate(-50%, -50%);
  font-size: var(--t-caption); font-weight: var(--w-bold); letter-spacing: .02em;
  color: var(--ink); background: var(--white); border: 1px solid var(--hairline);
  padding: 2px 8px; white-space: nowrap; }
/* the "hover to see what we did" hint sits above the grid */
.wk-hint { font-size: var(--t-caption); color: var(--grey); margin: 0 0 var(--s-3); }

/* =====================================================================
   FINAL CTA — the close (Ask, centered; the one centered moment).
   Concept C "Pivot Mark": a short volt rule above the restated line that
   scroll-scrubs from vertical to horizontal as the close enters view
   (main.js §8 sets --pivot-deg from scroll position). Volt-as-a-rule is
   legal on graphite; it stays a mark, never a surface. Rests vertical when
   JS is off or reduced-motion is set. The 3px mark thickness is a sanctioned
   sub-scale value (cf. the 4px accordion bar / 3px pending bar in the guide).
   ===================================================================== */
.close .section-head { margin-bottom: var(--s-4); }   /* 40 before the button (no subhead) */
.close__pivot {
  display: block; width: 3px; height: var(--s-4); margin: 0 auto var(--s-3);
  background: var(--volt); transform-origin: 50% 50%;
  transform: rotate(var(--pivot-deg, 0deg)); will-change: transform;
}

/* =====================================================================
   MOBILE SOURCE-ORDER — CTA drops BELOW the visual when a split stacks.
   The button lives under the left ask column in source (correct for the
   two-column desktop). When the offer split stacks on phone/tablet, that
   puts the CTA ABOVE the "what a set is" mockup — Jade wants it under the
   mockup. Unwrap the left column into the flex flow, then order the right
   panel before the CTA. Desktop (≥1025px, 2-col grid) is untouched.
   ===================================================================== */
@media (max-width: 1024px) {
  .split--top { display: flex; flex-direction: column; gap: 0; }
  .split--top > :first-child { display: contents; }               /* unwrap left ask column */
  .split--top > :last-child  { order: 1; margin-top: var(--s-4); } /* deliverable panel */
  .split--top .offer-cta     { order: 2; }                         /* Book-a-call, after it */
}
/* phone: centre the offer CTA under the stacked ask column. .split--top sets
   align-items:start, so the stacked CTA must centre itself on the cross axis —
   text-align can't, because the flex item hugs its content width at the left. */
@media (max-width: 768px) { .offer-cta { align-self: center; } }