/* ============================================================
   Reformer deck — carousel engine styling + slide themes
   Index-driven vertical seamless loop (GreenSock Draggable).
   Themes built on the live reformer.la palette.
   ============================================================ */

body.deck { background: var(--rf-amethyst); height: 100vh; overflow: hidden; overscroll-behavior: none; scrollbar-width: none; -ms-overflow-style: none; }
body.deck::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ambient backdrop: amethyst with dew / magenta / indigo washes + grain */
.stage-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(243,255,111,0.10), transparent 60%),
    radial-gradient(90% 70% at 88% 112%, rgba(216,57,171,0.14), transparent 55%),
    radial-gradient(70% 60% at 10% 108%, rgba(66,46,255,0.18), transparent 55%),
    var(--rf-amethyst);
}
.stage-bg::after { content: ''; position: absolute; inset: 0; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* gallery */
.gallery { position: relative; width: 100%; height: 100vh; overflow: hidden; z-index: 1; cursor: grab; }
.gallery:active { cursor: grabbing; }
.cards { position: absolute; --w: min(84vw, 1280px); width: var(--w); height: min(calc(var(--w) * 0.5625), 84vh); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.cards > li { list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55), 0 0 0 1px rgba(240,237,248,0.05); will-change: transform, opacity; }

/* slide shell */
.slide { width: 100%; height: 100%; container-type: size; display: flex; flex-direction: column; padding: 4.6cqw 5.4cqw; position: relative; isolation: isolate; }
.slide__bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex: 0 0 auto; min-height: 2.4cqw; }
.slide__bar .lockup { font-size: 2.1cqw; }
.slide__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 2.2cqh; min-height: 0; }
.slide__foot { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; font-family: var(--font-mono); font-size: 1.15cqw; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; }
.slide__foot.solo { justify-content: flex-end; }

/* auto wordmark on slides without an explicit lockup */
.slide__bar:not(:has(.lockup))::before { content: 'Reformer'; font-family: var(--font-display); font-weight: 600; font-size: 1.9cqw; letter-spacing: -0.02em; line-height: 1; opacity: 0.9; color: inherit; }

/* themes */
.s-ink   { background: linear-gradient(155deg, #251d40 0%, #1b162e 58%, #150f24 100%); color: var(--rf-periwinkle); }
.s-dew   { background: linear-gradient(155deg, #f7ff8c 0%, #ecfb57 100%); color: var(--rf-amethyst); }
.s-light { background: linear-gradient(160deg, #f8f5ff 0%, #e9e6f4 100%); color: var(--rf-amethyst); }
.s-iris  { background: linear-gradient(155deg, #4d3af0 0%, #2f2497 58%, #221a78 100%); color: var(--rf-periwinkle); }

/* kicker accent per theme */
.s-ink .kicker, .s-iris .kicker { color: var(--rf-dew); }
.s-light .kicker { color: var(--rf-magenta); }
.s-dew .kicker { color: var(--rf-amethyst); opacity: 0.66; }

/* inline emphasis per theme */
.s-ink em.hl, .s-iris em.hl { color: var(--rf-dew); }
.s-light em.hl, .s-dew em.hl { color: var(--rf-magenta); }

/* callout colour per theme */
.s-ink .callout, .s-iris .callout { color: var(--rf-dew); }
.s-light .callout { color: var(--rf-magenta); }
.s-dew .callout { color: var(--rf-amethyst); }

/* bullets */
.s-ink .bullets li::before, .s-iris .bullets li::before { background: var(--rf-dew); }
.s-light .bullets li::before { background: var(--rf-magenta); }

/* wordmark tint per theme */
.s-dew .wordmark, .s-light .wordmark { color: var(--rf-amethyst); }
.s-ink .wordmark, .s-iris .wordmark { color: var(--rf-periwinkle); }

/* pill border per theme */
.s-ink .pill, .s-iris .pill { border-color: var(--rf-paper-48); }
.s-dew .pill, .s-light .pill { border-color: var(--rf-ink-48); }

/* horizontal process pipe (design → build → optimize → tinker → improve) */
.pipe { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.4cqw; }
.pipe__node { background: var(--rf-ink-10); border: 1px solid var(--rf-ink-16); border-radius: var(--radius-sm); padding: 1.8cqh 1.2cqw; position: relative; text-align: center; }
.pipe__h { font-family: var(--font-display); font-weight: 600; font-size: 1.85cqw; line-height: 1.05; letter-spacing: -0.01em; margin: 0; }
.pipe__node:not(:last-child)::after { content: '→'; position: absolute; right: -1.05cqw; top: 50%; transform: translateY(-50%); font-size: 1.5cqw; color: var(--rf-magenta); opacity: 0.8; z-index: 2; }

/* CTA + close */
.cta { display: inline-block; text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 1.7cqw; color: var(--rf-dew); background: var(--rf-amethyst); border: 0; border-radius: 999px; padding: 0.85em 1.6em; cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(27,22,46,0.45); }
.close-actions { margin-top: 1.6cqh; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqh; }
.close-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.6cqw; }
.close-link { font-family: var(--font-mono); font-size: 1.3cqw; font-weight: 600; letter-spacing: 0.06em; color: inherit; opacity: 0.78; text-decoration: none; transition: opacity 0.2s; }
.close-link:hover { opacity: 1; }

/* ---- nav chrome (over the dark stage) ---- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; color: var(--rf-periwinkle); }
.topbar .lockup { font-size: 20px; }
.topbar .lockup .mark { height: 28px; }
.topbar .lockup .wordmark { color: var(--rf-periwinkle); font-size: 20px; }
.topbar__right { display: flex; align-items: center; gap: 20px; }
.topbar .confidential { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; line-height: 1.65; text-transform: uppercase; opacity: 0.6; }

.actions { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; z-index: 6; }
.navbtn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(240,237,248,0.24); background: rgba(240,237,248,0.05); color: var(--rf-periwinkle); font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: background 0.25s var(--ease), border-color 0.25s, color 0.25s, transform 0.25s var(--ease); backdrop-filter: blur(6px); }
.navbtn:hover { background: var(--rf-dew); border-color: var(--rf-dew); color: var(--rf-amethyst); transform: translateY(-2px); }

.counter { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateX(140px); min-width: 132px; text-align: center; color: var(--rf-periwinkle); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; z-index: 6; pointer-events: none; font-variant-numeric: tabular-nums; }
.counter .cur { font-weight: 700; }
.counter .total { opacity: 0.5; }
.counter .title { display: block; margin-top: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }

.progress { position: fixed; left: 0; bottom: 0; height: 3px; width: 100%; z-index: 6; background: rgba(240,237,248,0.08); }
.progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--rf-dew), var(--rf-magenta)); transition: width 0.4s var(--ease); }

.hint { position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%); color: var(--rf-periwinkle); opacity: 0.5; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; z-index: 6; transition: opacity 0.6s; text-align: center; }
.hint.gone { opacity: 0; }

.pdf-btn { display: none; flex: 0 0 auto; }
.drag-proxy { visibility: hidden; position: absolute; }

/* pipe on dark themes */
.s-ink .pipe__node, .s-iris .pipe__node { background: var(--rf-paper-10); border-color: var(--rf-paper-16); }
.s-ink .pipe__node:not(:last-child)::after, .s-iris .pipe__node:not(:last-child)::after { color: var(--rf-dew); opacity: 0.9; }
.pipe__node.is-loop { background: transparent; border-color: var(--rf-dew); }
.pipe__node.is-loop .pipe__h { color: var(--rf-dew); }
.s-light .pipe__node.is-loop { border-color: var(--rf-magenta); }
.s-light .pipe__node.is-loop .pipe__h { color: var(--rf-magenta); }

/* product proof slides — branded to TrueCost / Parfait */
.s-truecost { background: linear-gradient(150deg, #ffffff 0%, #e6f0f8 100%); color: #17242e; }
.s-parfait  { background: linear-gradient(150deg, #faf9ef 0%, #f1edc4 100%); color: #7a4252; }
.s-truecost .kicker, .s-truecost .proof-url { color: #2f7ba3; }
.s-parfait  .kicker, .s-parfait  .proof-url { color: #d8412e; }
.s-truecost em.hl { color: #2f7ba3; }
.s-parfait  em.hl { color: #d8412e; }
.s-truecost .pill { border-color: #2f7ba3; }
.s-parfait  .pill { border-color: #d8412e; }
.proof-logo { align-self: flex-start; width: auto; flex: 0 0 auto; }
.s-truecost .proof-logo { height: 10cqh; }
.s-parfait  .proof-logo { height: 7cqh; }
.proof-url { display: inline-flex; align-items: center; gap: 0.25em; font-family: var(--font-display); font-weight: 700; font-size: 3cqw; letter-spacing: -0.02em; text-decoration: none; line-height: 1; }
.proof-url:hover { text-decoration: underline; }

/* problem slide: copy left, "last generation" stack as a graphic right */
.problem-split { display: grid; grid-template-columns: 1.18fr 0.82fr; align-items: center; gap: 5cqw; }
.legacy { display: flex; flex-direction: column; }
.legacy__label { font-family: var(--font-mono); font-size: 1.1cqw; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rf-dew); opacity: 0.85; margin-bottom: 0.8cqh; }
.legacy__item { font-family: var(--font-display); font-weight: 600; font-size: 3.6cqw; line-height: 1.5; letter-spacing: -0.02em; opacity: 0.4; border-top: 1px solid var(--rf-paper-16); padding-top: 0.4cqh; }
@media (max-width: 540px) {
  .problem-split { grid-template-columns: 1fr; gap: 3cqw; }
  .legacy__item { font-size: 7cqw; }
  .legacy__label { font-size: 3cqw; }
}

/* borderless flow line (process / steps) — replaces boxed pills */
.flow-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.flow-line .step, .flow-line .loop { font-size: 2.1cqw; line-height: 1.2; }
.flow-line .sep { font-size: 1.6cqw; opacity: 0.45; }
.flow-line.big .step, .flow-line.big .loop { font-size: 2.7cqw; }
.flow-line.big .sep { font-size: 2.1cqw; }
.s-ink .flow-line .loop, .s-iris .flow-line .loop { color: var(--rf-dew); }
.s-ink .flow-line .sep, .s-iris .flow-line .sep { color: var(--rf-dew); opacity: 0.7; }
.s-truecost .flow-line .sep { color: #2f7ba3; opacity: 0.85; }

/* borderless meta line (dot-separated tags) */
.meta-line { display: flex; flex-wrap: wrap; align-items: center; font-family: var(--font-mono); font-size: 1.3cqw; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.meta-line span:not(:last-child)::after { content: '·'; margin: 0 0.85em; opacity: 0.4; }
.s-parfait .meta-line { color: #d8412e; }

/* prominent vertical stack graphic (markets we serve) */
.stack { display: flex; flex-direction: column; }
.stack__label { font-family: var(--font-mono); font-size: 1.1cqw; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; margin-bottom: 0.8cqh; }
.stack__item { font-family: var(--font-display); font-weight: 600; font-size: 3cqw; line-height: 1.5; letter-spacing: -0.02em; border-top: 1px solid var(--rf-ink-16); padding-top: 0.4cqh; }
.s-ink .stack__item, .s-iris .stack__item { border-top-color: var(--rf-paper-16); }
.s-light .stack__label { color: var(--rf-magenta); }
@media (max-width: 540px) {
  .flow-line .step, .flow-line .loop, .flow-line.big .step, .flow-line.big .loop { font-size: 5cqw; }
  .flow-line .sep, .flow-line.big .sep { font-size: 4cqw; }
  .meta-line { font-size: 3cqw; }
  .stack__item { font-size: 6cqw; }
  .stack__label { font-size: 3cqw; }
}

/* capability pillars (what we do) */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.6cqw; margin-top: 0.2cqh; }
.pillar__h { font-family: var(--font-display); font-weight: 600; font-size: 1.95cqw; letter-spacing: -0.015em; margin: 0 0 0.8cqh; padding-bottom: 0.7cqh; border-bottom: 2px solid var(--rf-magenta); }
.s-ink .pillar__h, .s-iris .pillar__h { border-bottom-color: var(--rf-dew); }
.pillar ul { list-style: none; margin: 0; padding: 0; }
.pillar li { font-size: 1.4cqw; line-height: 1.55; opacity: 0.86; }

/* plan tiers ladder */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; margin-top: 0.2cqh; align-items: stretch; }
.tier { border: 1px solid var(--rf-ink-16); border-radius: var(--radius-sm); padding: 1.9cqh 1.2cqw; display: flex; flex-direction: column; gap: 0.7cqh; }
.s-ink .tier, .s-iris .tier { border-color: var(--rf-paper-16); }
.tier__n { font-family: var(--font-mono); font-size: 1.05cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; }
.tier__p { font-family: var(--font-display); font-weight: 700; font-size: 2.4cqw; letter-spacing: -0.02em; line-height: 1; }
.tier__p small { font-size: 1.05cqw; font-weight: 600; opacity: 0.6; letter-spacing: 0; }
.tier__w { font-size: 1.25cqw; line-height: 1.34; opacity: 0.84; }
.tier__list { list-style: none; margin: 0.3cqh 0 0; padding: 0; }
.tier__list li { font-size: 1.12cqw; line-height: 1.5; opacity: 0.7; }

/* selected work grid */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqh 3cqw; margin-top: 0.2cqh; }
.work-item { border-top: 1px solid var(--rf-ink-16); padding-top: 1cqh; }
.s-ink .work-item, .s-iris .work-item { border-top-color: var(--rf-paper-16); }
.work-item__n { font-family: var(--font-display); font-weight: 600; font-size: 2.2cqw; letter-spacing: -0.015em; line-height: 1.05; }
.work-item__l { font-family: var(--font-mono); font-size: 1.15cqw; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.62; margin-top: 0.4em; }

@media (max-width: 540px) {
  .pillars, .tiers { grid-template-columns: 1fr 1fr; gap: 4cqw; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .pillar__h { font-size: 4cqw; } .pillar li { font-size: 3cqw; }
  .tier__p { font-size: 5cqw; } .tier__w, .tier__list li { font-size: 2.7cqw; }
  .work-item__n { font-size: 4.4cqw; }
}

/* ---- responsive ---- */
@media (max-width: 820px) {
  .cards { --w: min(94vw, 150vh); top: 48%; }
  .topbar { padding: 16px 18px; }
  .topbar .confidential { display: none; }
  .counter { transform: translateX(-50%) translateX(120px); }
}
@media (max-width: 540px) {
  .cards { --w: 94vw; height: 162vw; }
  .slide { padding: 7cqw 6.6cqw; }
  .headline { font-size: 8.4cqw; }
  .headline.xl { font-size: 10.5cqw; }
  .headline.sm { font-size: 7cqw; }
  .lead { font-size: 4cqw !important; }
  .kicker, .slide__foot { font-size: 3cqw; }
  .pill { font-size: 3cqw; }
  .pipe { grid-auto-flow: row; grid-auto-columns: auto; }
  .pipe__node:not(:last-child)::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -1.5cqh; transform: translateX(-50%); }
  .pipe__h { font-size: 4.4cqw; }
  .callout { font-size: 4.4cqw !important; }
  .close-links { gap: 3cqw; }
  .close-link { font-size: 3cqw; }
  .counter { display: none; }
}
@media (prefers-reduced-motion: reduce) { .navbtn { transition: none; } }