/* =============================================================================
   Settled — base sheet
   Global reset, keyframes, scroll-driven bindings, components, breakpoints.
   Consumes tokens.css. Ported from the finished marketing page
   (settled_official.html). No raw colour / font-size / duration literals except
   the SVG grain data-URI (a texture, not a design value).
   ========================================================================== */

/* ── Global ──────────────────────────────────────────────────────────────── */
html, body {
  margin: 0; padding: 0;
  background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
* { box-sizing: border-box; }
a { color: var(--clay); text-decoration: none; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
img { display: block; max-width: 100%; }

.container { max-width: var(--container); margin: 0 auto; }
[data-pad] { padding-left: var(--pad); padding-right: var(--pad); }
.section-y { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 60; background: var(--ink); color: var(--ground); padding: 12px 18px; font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; }
.skip-link:focus { left: 12px; top: 12px; color: var(--ground); }

/* ── Fixed chrome ────────────────────────────────────────────────────────── */
.scrollbar { position: fixed; top: 0; left: 0; right: 0; height: var(--hair); background: var(--clay); transform: scaleX(0); transform-origin: left center; z-index: 40; pointer-events: none; }
.grain {
  position: fixed; inset: 0; z-index: 35; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: multiply; background-size: var(--grain-size) var(--grain-size);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Vertical rails + gridlines (fixed, decorative; removed ≤900) */
.rails { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.rails__inner { position: relative; height: 100%; }
.gridline { position: absolute; top: 0; bottom: 0; width: var(--hair); background: var(--gridline); }
.gridline--left { left: var(--pad); }
.gridline--right { right: var(--pad); }
.rail { position: absolute; top: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--gap-18); }
.rail--left { left: var(--rail); justify-content: center; }
.rail--right { right: var(--rail); justify-content: flex-end; padding-bottom: var(--rail); }
.rail__line { display: block; width: var(--hair); height: 140px; background: var(--hairline); }
.rail__label { writing-mode: vertical-rl; font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ground-55); color: rgba(25,27,21,0.55); white-space: nowrap; }
.rail--left .rail__label { transform: rotate(180deg); }
.rail__label--fixed { display: flex; gap: var(--gap-24); }

/* ── Wordmark / nav ──────────────────────────────────────────────────────── */
.wordmark { font-family: var(--sans); font-weight: 400; font-size: var(--t-mark); letter-spacing: var(--t-mark-ls); text-transform: uppercase; color: var(--ink); }
.nav { position: sticky; top: 0; z-index: 30; background: var(--ground); border-bottom: var(--hair) solid var(--hairline); }
.nav__inner { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-24); padding: 18px var(--pad); }
.nav__mark { display: inline-block; transform-origin: left center; }
.nav__link { font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-64); display: flex; align-items: center; gap: var(--gap-10); transition: color var(--dur) var(--ease); }
.nav__link:hover { color: var(--ink); }
.nav__link .arrow { font-size: var(--t-meta); line-height: 1; color: var(--ink-62); }

/* ── Labels ──────────────────────────────────────────────────────────────── */
.eyebrow { font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-64); }
.eyebrow--invert { color: inherit; opacity: 0.55; }
.eyebrow--invert-full { color: inherit; }

/* ── Primary action (hairline, never filled) ─────────────────────────────── */
.action { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--gap-14); width: max-content; color: var(--ink); }
.action__rule { display: block; height: var(--hair); width: var(--rule, 88px); background: var(--ink); transition: width var(--dur) var(--ease); }
.action__body { display: flex; align-items: center; gap: var(--gap-14); }
.action__label { font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink); }
.action__arrow { font-size: var(--t-glyph); line-height: 1; color: var(--ink-62); display: inline-block; transform: translateX(var(--nudge, 0px)); transition: transform var(--dur) var(--ease); }
.action:hover { --rule: 120px; --nudge: 4px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; z-index: 2; padding-top: 24vh; padding-bottom: 18vh; min-height: 94vh; display: flex; flex-direction: column; justify-content: center; }
.hero__type { transform-origin: left top; }
.hero__eyebrow { display: flex; align-items: center; gap: var(--gap-18); margin: 0; font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-64); }
.hero__eyebrow-rule { display: block; height: var(--hair); flex: 1; background: var(--hairline); }
.hero__eyebrow-rule--short { flex: 0 0 88px; }
.hero__title { margin: 40px 0 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-hero); line-height: var(--t-hero-lh); letter-spacing: var(--t-hero-ls); max-width: 22ch; text-wrap: pretty; }
.hero__body { margin: 44px 0 0; font-size: var(--t-body); line-height: var(--t-body-lh); max-width: 50ch; text-wrap: pretty; }
.hero__cta { margin-top: 64px; }

/* ── Chapter label ───────────────────────────────────────────────────────── */
.chapter { position: relative; display: flex; align-items: center; gap: var(--gap-18); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-64); }
.chapter > span { position: relative; z-index: 1; }
.chapter__rule { display: block; height: var(--hair); flex: 1; background: var(--hairline); }
.chapter__num { color: var(--ink); }
.chapter__ghost { position: absolute; right: var(--gap-56); top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: var(--t-ghost); line-height: var(--t-ghost-lh); letter-spacing: var(--t-mega-ls); color: var(--ghost); z-index: 0; pointer-events: none; }
.chapter--invert { opacity: 0.68; }
.chapter--invert .chapter__num { color: inherit; }
.chapter__rule--invert { background: currentColor; opacity: 0.3; }
.chapter__ghost--invert { color: var(--ghost-invert); }

/* ── Bands ───────────────────────────────────────────────────────────────── */
.band { border-top: var(--hair) solid var(--hairline); border-bottom: var(--hair) solid var(--hairline); }
.band--shade { background: var(--ground-shade); }
.band--deep { background: var(--ground-deep); color: var(--ground); }

/* ── 01 Specify ──────────────────────────────────────────────────────────── */
.specify { position: relative; z-index: 2; padding: 56px 0 64px; }
.specify__chapter { margin-bottom: 48px; padding: 0 var(--pad-band); }
.specify__chapter .chapter__ghost { right: 96px; }
.specify__grid { display: grid; grid-template-columns: var(--split-62) var(--split-38); gap: var(--gap-40); align-items: start; }
.specify__cta { padding: 64px var(--pad-band) 0; }

/* Before / after compare */
.compare { position: relative; height: 80vh; min-height: 560px; overflow: hidden; background: var(--ground-shade); touch-action: none; cursor: ew-resize; user-select: none; }
.compare__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.compare__after { background-image: url('/assets/img/slider-after.jpg'); z-index: 1; }
.compare__before { background-image: url('/assets/img/slider-before.jpg'); z-index: 2; clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); }
.compare__tag { position: absolute; bottom: 24px; z-index: 3; font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink); background: var(--ground); padding: 6px 10px; }
.compare__tag--before { left: 24px; }
.compare__tag--after { right: 24px; }
.compare__caption { position: absolute; left: 40px; top: 40px; z-index: 3; writing-mode: vertical-rl; white-space: nowrap; font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink); background: var(--ground); padding: 10px 6px; }
.compare__divider { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: var(--hair); background: var(--ink); z-index: 4; transform: translateX(-50%); }
.compare__handle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: var(--radius-handle); border: var(--hair) solid var(--ink); background: var(--ground); cursor: ew-resize; display: block; }

/* Specification card */
.speccard__callout { display: flex; flex-direction: column; gap: var(--gap-6); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; margin-bottom: 28px; }
.speccard-wrap { margin-right: var(--pad-band); }
.speccard { background: var(--ground); border: var(--hair) solid var(--hairline); padding: var(--card-pad); }
.speccard__head, .speccard__foot, .speccard__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-16); }
.speccard__head { padding-bottom: var(--gap-16); border-bottom: var(--hair) solid var(--hairline); }
.speccard__row { padding: var(--row-y) 0; border-bottom: var(--hair) solid var(--hairline); }
.speccard__foot { padding-top: var(--gap-18); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-62); }
.speccard__label { font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-64); }
.speccard__value { font-family: var(--serif); font-size: var(--t-value-card); letter-spacing: var(--t-value-ls); text-align: right; }

/* ── Mega bleed headline (02 / close) ────────────────────────────────────── */
.mega { margin: 72px 0 0; padding-left: var(--pad); font-family: var(--serif); font-weight: 400; font-size: var(--t-mega); line-height: var(--t-mega-lh); letter-spacing: var(--t-mega-ls); white-space: nowrap; width: max-content; }
.match { position: relative; z-index: 2; overflow: hidden; }
.match__body { margin: 56px 0 0; font-size: var(--t-body); line-height: var(--t-body-lh); max-width: 50ch; text-wrap: pretty; }
.close { position: relative; z-index: 2; overflow: hidden; }
.close .mega { margin: 0; }
.close__cta { margin-top: 80px; }

/* ── 03 Price (inverted, two-column) ─────────────────────────────────────── */
.price { position: relative; z-index: 2; padding: var(--panel-y) 0; min-height: 100vh; display: flex; align-items: center; }
.price__grid { display: grid; grid-template-columns: 34fr 1px 66fr; gap: var(--gap-panel); margin-top: 80px; align-items: start; }
.price__quote { margin: 40px 0 0; font-family: var(--serif); font-size: var(--t-quote); line-height: var(--t-quote-lh); letter-spacing: var(--t-hero-ls); text-wrap: pretty; }
.price__divider { width: var(--hair); align-self: stretch; background: currentColor; opacity: 0.18; }
.price__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-16); }
.price__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-16); padding-top: 20px; font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; opacity: 0.55; }
.schedule { margin-top: var(--gap-32); border-top: var(--hair) solid var(--rule-invert); }
.schedule__row { display: grid; grid-template-columns: minmax(110px, 190px) 1fr auto; gap: var(--gap-24); align-items: baseline; padding: var(--row-y-panel) 0; border-bottom: var(--hair) solid var(--hairline-invert); }
.schedule__label { font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; opacity: 0.55; }
.schedule__value { font-family: var(--serif); font-size: var(--t-value); letter-spacing: var(--t-value-ls); }
.schedule__spec { font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; opacity: 0.42; }

/* ── Marquee ─────────────────────────────────────────────────────────────── */
.marquee-wrap { position: relative; z-index: 2; border-top: var(--hair) solid var(--hairline); overflow: hidden; padding: 18px 0; }
.marquee { display: flex; width: max-content; white-space: nowrap; font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-30); }
.marquee > span { padding-right: var(--gap-40); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { position: relative; z-index: 2; border-top: var(--hair) solid var(--hairline); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gap-56); align-items: start; }
.footer__col { display: flex; flex-direction: column; gap: var(--gap-14); font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; }
.footer__col--brand { gap: var(--gap-18); }
.footer__head { color: var(--ink-62); }
.footer__item { color: var(--ink-64); line-height: 1.7; }
.footer__link { color: var(--clay); display: flex; align-items: center; gap: 8px; }
.footer__link:hover { color: var(--ink); }
.footer__link .arrow { font-size: var(--t-meta); line-height: 1; }
.footer__legal { margin-top: 64px; padding-top: var(--gap-24); border-top: var(--hair) solid var(--hairline); display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-24); flex-wrap: wrap; font-size: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-62); }

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes settled-wipe   { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settled-rise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes settled-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes settled-mark   { from { scale: 1; letter-spacing: var(--t-mark-ls); } to { scale: 0.88; letter-spacing: var(--t-mark-ls-min); } }
@keyframes settled-hero   { from { scale: 1; transform: translateY(0); } to { scale: 0.82; transform: translateY(-56px); } }
@keyframes settled-invert { from { background-color: var(--ground); color: var(--ink); } to { background-color: var(--ground-deep); color: var(--ground); } }
@keyframes settled-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

[data-marquee] { animation: settled-marquee var(--dur-marquee) linear infinite; }
[data-marquee-wrap]:hover [data-marquee] { animation-play-state: paused; }

/* ── Scroll-driven bindings — native engine ──────────────────────────────── */
@supports (animation-timeline: view()) {
  [data-wipe]      { animation: settled-wipe 1s linear; animation-fill-mode: none; animation-timeline: view(); animation-range: entry 15% entry 50%; }
  [data-reveal]    { animation: settled-rise 1s linear; animation-fill-mode: none; animation-timeline: view(); animation-range: entry 20% entry 45%; }
  [data-progress]  { animation: settled-progress 1s linear; animation-fill-mode: none; animation-timeline: scroll(root); animation-range: 0% 100%; }
  [data-mark]      { animation: settled-mark 1s linear; animation-fill-mode: both; animation-timeline: scroll(root); animation-range: 0px 200px; }
  [data-hero-type] { animation: settled-hero 1s linear; animation-fill-mode: both; animation-timeline: scroll(root); animation-range: 0vh 70vh; }
  [data-invert]    { animation: settled-invert 1s linear; animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
}
/* When the rAF fallback drives, it sets .js-driven and writes the same props. */
html.js-driven [data-wipe], html.js-driven [data-reveal], html.js-driven [data-progress],
html.js-driven [data-mark], html.js-driven [data-hero-type], html.js-driven [data-invert] { animation-name: none; }

@media (prefers-reduced-motion: reduce) {
  [data-wipe], [data-reveal], [data-mark], [data-hero-type], [data-invert] { animation-name: none; }
  [data-progress], [data-marquee-wrap] { display: none; }
  .action__rule, .action__arrow { transition: none; }
}

/* ── Breakpoints — 1240 and 900 ──────────────────────────────────────────── */
@media (max-width: 1240px) {
  [data-huge]  { font-size: var(--t-hero-1240); }
  [data-mega]  { font-size: var(--t-mega-1240); }
  [data-ghost] { font-size: var(--t-ghost-1240); }
  [data-demo]  { grid-template-columns: 1fr; gap: var(--gap-40); }
  [data-speccard] { margin: 0 var(--pad-band); }
  [data-two]   { grid-template-columns: 1fr; gap: var(--gap-48); }
  [data-compare-divider] { display: none; }
  [data-schedule-row] { grid-template-columns: minmax(110px, 190px) 1fr; }
  [data-schedule-spec] { display: none; }
}
@media (max-width: 900px) {
  :root { --pad: var(--pad-sm); }
  [data-pad]  { padding-left: var(--pad-sm); padding-right: var(--pad-sm); }
  [data-vpad] { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); }
  .section-y  { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); }
  [data-huge] { font-size: var(--t-hero-900); }
  [data-mega] { font-size: var(--t-mega-900); }
  [data-ghost] { display: none; }
  [data-hero]  { padding-top: 16vh; }
  [data-rail], [data-gridline] { display: none; }
  [data-four] { grid-template-columns: 1fr; gap: var(--gap-32); }
  [data-compare] { height: 56vh; min-height: 0; }
  [data-photocaption] { writing-mode: horizontal-tb; left: 20px; top: 20px; }
  [data-speccard] { margin: 0 var(--pad-sm); }
  [data-bleed] { margin-right: calc(-1 * var(--pad-sm)); padding-left: var(--pad-sm); white-space: normal; width: auto; }
  .mega { padding-left: var(--pad-sm); }
  .specify__grid { grid-template-columns: 1fr; gap: var(--gap-40); }
  .price__grid { grid-template-columns: 1fr; gap: var(--gap-48); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--gap-32); }
}