/* Meshka Group — site styles v2. Built on brand-tokens.css. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }

:root {
  --ink: var(--meshka-black);
  --paper: var(--meshka-paper);
  --mute: var(--meshka-secondary);
  --rule: var(--meshka-rule);
  --red: var(--meshka-vermilion);
  --action: var(--meshka-action);
  --gutter: 24px;
  --header-h: 76px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 760px) { :root { --gutter: 48px; } }
@media (min-width: 1100px) { :root { --gutter: 64px; } }

body {
  margin: 0; background: var(--meshka-white); color: var(--ink);
  font-family: var(--meshka-font); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, figure, dl, dd, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.hero :focus-visible, .diagnostic :focus-visible, .manifesto :focus-visible, footer :focus-visible, .mobile-nav :focus-visible { outline-color: #fff; }

.container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 11vw, 160px) 0; position: relative; }
[id] { scroll-margin-top: 88px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -100px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 200; border-radius: var(--meshka-radius); }
.skip-link:focus { top: 16px; }

/* ---------- Type ---------- */
h1 { font-size: clamp(44px, 8vw, 118px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 800; }
h2 { font-size: clamp(34px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; }
h3 { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
p { max-width: 60ch; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 10px; max-width: none; }
.eyebrow-light { color: rgba(255,255,255,0.72); }
.red-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; }
.section-intro { margin-top: 28px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--mute); }
.split-heading { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.split-heading .eyebrow { padding-top: 12px; }
@media (max-width: 900px) { .split-heading { grid-template-columns: 1fr; gap: 20px; } }

/* SplitText masks */
.hero-line, [data-split] .line { will-change: transform; }

/* Motion initial states (only when the motion layer is active) */
body.motion [data-fade] { opacity: 0; transform: translateY(26px); }
body.motion [data-stagger] > * { opacity: 0; transform: translateY(26px); }
body.motion .reveal-img { clip-path: inset(0 0 100% 0); }

/* ---------- Buttons ---------- */
.button { display: inline-flex; align-items: center; gap: 10px; background: var(--action); color: #fff; padding: 18px 28px; border-radius: 999px; font-weight: 600; font-size: 16px; line-height: 1; transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out); will-change: transform; }
.button:hover { background: var(--meshka-action-hover); }
.button-light { background: #fff; color: var(--ink); }
.button-light:hover { background: var(--paper); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; position: relative; padding-bottom: 4px; }
.text-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; transform-origin: right; transition: transform 350ms var(--ease-out); }
.text-link:hover::after { transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease-out); }
.text-link span { transition: transform 250ms var(--ease-out); }
.text-link:hover span { transform: translateX(4px); }
.text-link-light { color: #fff; }

/* ---------- Cursor & intro ---------- */
.cursor { display: none; }
body.has-cursor .cursor { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 1000; mix-blend-mode: difference; }
.cursor-dot, .cursor-ring { position: absolute; top: 0; left: 0; border-radius: 50%; translate: -50% -50%; }
/* The system cursor stays visible (people rely on it); the ring is a soft follower only. */
.cursor-dot { display: none; }
.cursor-ring { width: 40px; height: 40px; border: 1.5px solid #fff; transition: width 300ms var(--ease-out), height 300ms var(--ease-out), opacity 300ms; }
.cursor.is-hover .cursor-ring { width: 72px; height: 72px; opacity: 0.6; }
.cursor.is-out { opacity: 0; }

.intro { display: none; }
body.motion .intro { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 900; background: var(--ink); }
.intro-line { width: min(40vw, 320px); height: 4px; background: var(--red); transform: scaleX(0); transform-origin: left; }

/* ---------- Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; color: #fff; transition: transform 450ms var(--ease-out), background-color 300ms, color 300ms; }
.site-header.is-scrolled { background: rgba(255,255,255,0.88); color: var(--ink); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--rule); }
.site-header.is-hidden, body.motion .site-header:not(.is-in) { transform: translateY(-100%); }
body.menu-open .site-header { background: var(--ink); color: #fff; border-bottom-color: #333; transform: none; }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand img { width: 148px; height: auto; transition: filter 300ms; }
.site-header.is-scrolled:not(.menu-open) .brand img { filter: brightness(0); }
body.menu-open .brand img { filter: none; }
#main-nav { display: flex; align-items: center; gap: 36px; font-weight: 500; font-size: 15px; }
#main-nav a[data-nav] { position: relative; padding: 6px 0; }
#main-nav a[data-nav]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 350ms var(--ease-out); }
#main-nav a[data-nav]:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; background: #fff; color: var(--ink); transition: background-color 250ms, color 250ms; }
.site-header.is-scrolled .nav-cta { background: var(--ink); color: #fff; }
.nav-cta:hover { background: var(--action) !important; color: #fff !important; }

.menu-toggle { display: none; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; padding: 8px 0; min-height: 44px; }
.menu-toggle[hidden] { display: none; }
.menu-lines { position: relative; width: 24px; height: 2px; background: currentColor; display: block; transition: background-color 200ms; }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; transition: transform 300ms var(--ease-out); }
.menu-lines::before { top: -7px; } .menu-lines::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-lines { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-lines::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines::after { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--ink); color: #fff; padding: 32px var(--gutter) 40px; display: flex; flex-direction: column; justify-content: space-between; }
.mobile-nav[hidden] { display: none; }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav nav a { display: flex; align-items: baseline; gap: 20px; padding: 22px 0; border-bottom: 1px solid #2c2c2c; font-size: clamp(30px, 8vw, 44px); font-weight: 700; letter-spacing: -0.03em; }
.mobile-nav nav a span { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); }
.mobile-nav-foot { color: rgba(255,255,255,0.6); font-size: 15px; }
@media (max-width: 900px) {
  .brand img { width: 124px; }
  #main-nav { display: none; }
  .menu-toggle:not([hidden]) { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: #fff; overflow: hidden; padding: calc(var(--header-h) + 48px) 0 120px; background: #0f0f0f; }
.hero-media { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; }
.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 34px; pointer-events: none; }
.hero-title { max-width: 11ch; }
.hero-description { font-size: clamp(19px, 2vw, 24px); line-height: 1.45; color: rgba(255,255,255,0.82); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 32px; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; font-size: 13px; letter-spacing: 0.06em; color: rgba(255,255,255,0.6); }
.scroll-cue { display: flex; align-items: center; gap: 12px; text-transform: uppercase; }
.scroll-cue-line { width: 1px; height: 48px; background: linear-gradient(to bottom, transparent, #fff); display: block; }
body.motion .scroll-cue-line { animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero-origin { text-align: right; }
@media (max-width: 900px) {
  .hero { min-height: 92svh; padding-bottom: 110px; }
  .hero-shade { ; }
  .hero-origin { display: none; }
  .hero-media video, .hero-media img { object-position: 78% 50%; }
}

/* ---------- Marquee ---------- */
.marquee, .footer-marquee { overflow: hidden; background: var(--ink); color: #fff; border-top: 1px solid #262626; }
.marquee { padding: 20px 0; }
.marquee-track { display: flex; width: max-content; }
body.motion .marquee-track { animation: marquee 38s linear infinite; }
body.motion .marquee-track-slow { animation-duration: 60s; }
.marquee:hover .marquee-track, .footer-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-list { display: flex; align-items: center; white-space: nowrap; }
.marquee-list li { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; padding: 0 28px; display: flex; align-items: center; gap: 28px; }
.marquee-list li::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: block; }
@keyframes marquee { to { transform: translateX(-50%); } }
body.static .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; }
body.static .marquee-list { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
body.static .marquee-list[aria-hidden] { display: none; }

/* ---------- Reality + horizontal problems ---------- */
.reality { background: var(--paper); padding-bottom: clamp(80px, 11vw, 160px); overflow: visible; }

/* ---------- Start with the work ---------- */
.start-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.reveal-img { position: relative; overflow: hidden; border-radius: 8px; }
.reveal-img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.reveal-img figcaption { font-size: 13px; color: var(--mute); margin-top: 12px; }
.start-img { aspect-ratio: 16 / 10; }
.start-img figcaption { position: absolute; left: 16px; bottom: 16px; margin: 0; background: rgba(255,255,255,0.9); color: var(--ink); padding: 6px 10px; border-radius: 4px; }
.start-copy > * + * { margin-top: 28px; }
.start-copy > p:not(.eyebrow) { color: var(--mute); font-size: 18px; }
.questions { counter-reset: q; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.questions li { counter-increment: q; display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.01em; transition: padding-left 300ms var(--ease-out); }
.questions li::before { content: counter(q, decimal-leading-zero); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); flex: none; width: 28px; }
.questions li:hover { padding-left: 8px; }
.start-close { font-size: clamp(20px, 2vw, 26px) !important; font-weight: 600; color: var(--ink) !important; letter-spacing: -0.015em; line-height: 1.3; }
.start-close em { font-style: normal; color: var(--action); }
@media (max-width: 900px) { .start-layout { grid-template-columns: 1fr; } }

/* ---------- Impact OS ---------- */
.impact-os { background: var(--paper); overflow: hidden; }
.impact-os .eyebrow-light { color: var(--mute); }
.os-heading { max-width: 900px; position: relative; z-index: 1; }
.os-heading h2 { margin-top: 20px; }
.os-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; margin-top: 72px; position: relative; z-index: 1; }
.os-diagram { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin: 0 auto; }
.os-svg { width: 100%; height: 100%; overflow: visible; }
.os-ring { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.25; }
.os-ring-dotted { stroke-dasharray: 2 10; stroke-linecap: round; opacity: 0.5; }
.os-lines line { stroke: var(--ink); stroke-width: 1.5; opacity: 0.35; transition: stroke 300ms, opacity 300ms, stroke-width 300ms; }
.os-lines line.is-active { stroke: var(--red); opacity: 1; stroke-width: 2.5; }
.os-core { fill: var(--ink); }
.os-core-label { fill: #fff; font: 600 15px/1 var(--meshka-font); letter-spacing: 0.02em; }
.os-nodes { position: absolute; inset: 0; }
.os-node { left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 12px 18px; font-size: 15px; font-weight: 600; min-height: 44px; transition: background-color 250ms, color 250ms, border-color 250ms, box-shadow 250ms; white-space: nowrap; position: static; transform: none; }
.os-node-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); transition: background-color 250ms, transform 250ms; }
.os-node:hover { border-color: var(--ink); }
.os-node.is-active { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
.os-node.is-active .os-node-dot { background: var(--red); transform: scale(1.3); }
.os-panels { min-height: 320px; position: relative; z-index: 1; }
.os-panel { display: grid; gap: 18px; }
.os-panel[hidden] { display: none; }
.os-panel-index { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); }
.os-panel h3 { font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.035em; line-height: 1; }
.os-q { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.os-panel p:not(.os-q) { color: var(--mute); font-size: 18px; }
.os-texture { position: absolute; right: -14%; bottom: -34%; width: min(40vw, 560px); aspect-ratio: 1; opacity: 0.38; border-radius: 0; z-index: 0; pointer-events: none; mix-blend-mode: multiply; }
@media (max-width: 900px) {
  .os-layout { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
  .os-diagram { width: min(100%, 420px); }
  .os-node { padding: 9px 13px; font-size: 13px; }
  .os-texture { width: 80vw; right: -35%; bottom: -12%; opacity: 0.22; }
}

/* ---------- Practices (sticky stack) ---------- */
.practice-stack { display: grid; gap: 24px; margin-top: 0; perspective: none; }
.practice-card { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); transform-origin: top center; transform-style: preserve-3d; position: relative; box-shadow: none; }
.practice-head { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.practice-index { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); }
.practice-head h3 { font-size: clamp(44px, 7vw, 112px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 800; }
.practice-body { display: grid; gap: 22px; align-content: start; }
.practice-lead { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.practice-body > p:not(.practice-lead) { color: var(--mute); font-size: 18px; }
.practice-link { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--action); border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.practice-link:hover { color: var(--meshka-action-hover); }
@media (max-width: 900px) {
  .practice-card { grid-template-columns: 1fr; min-height: 0; top: calc(var(--header-h) + 12px + var(--i) * 10px); }
}

/* ---------- Method ---------- */
.method { background: var(--paper); }
.method-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.method-heading h2 { margin-top: 20px; }
.method-img { aspect-ratio: 21 / 9; margin-top: 56px; }
.method-scroller { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 96px); margin-top: 80px; }
.method-sticky { position: sticky; top: 30vh; align-self: start; display: grid; grid-template-columns: 4px 1fr; gap: 0 32px; height: 40vh; grid-template-rows: auto auto auto; }
.method-progress { width: 4px; height: 100%; background: var(--rule); border-radius: 2px; overflow: hidden; }
.method-progress-bar { display: block; width: 100%; height: 100%; background: var(--red); transform: scaleY(0); transform-origin: top; }
.method-num { grid-column: 2; font-size: clamp(96px, 14vw, 200px); line-height: 0.85; font-weight: 800; letter-spacing: -0.05em; color: var(--ink); }
.method-caption { grid-column: 2; margin-top: 20px; font-size: 16px; font-weight: 600; color: var(--mute); }
.method-steps { display: grid; }
.method-step { min-height: 62vh; display: grid; align-content: center; gap: 18px; padding: 40px 0; border-top: 1px solid var(--rule); opacity: 0.35; transition: opacity 500ms; }
.method-step.is-active { opacity: 1; }
.method-step h3 { font-size: clamp(34px, 4vw, 56px); letter-spacing: -0.035em; line-height: 1; }
.method-step p { color: var(--mute); font-size: 18px; }
.method-q { font-weight: 700; color: var(--ink) !important; font-size: 20px !important; }
@media (max-width: 900px) {
  .method-heading { grid-template-columns: 1fr; gap: 20px; }
  .method-scroller { grid-template-columns: 1fr; margin-top: 48px; }
  .method-sticky { position: static; height: auto; display: none; }
  .method-step { min-height: 0; opacity: 1; padding: 32px 0; }
  .method-step::before { content: attr(data-num); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); }
}

/* ---------- Environment ---------- */
.env-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.env-copy > * + * { margin-top: 28px; }
.env-copy > p:not(.eyebrow) { color: var(--mute); font-size: 18px; }
.env-equation { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.env-plus { font-size: clamp(40px, 5.4vw, 84px); font-weight: 300; color: var(--red); line-height: 1; display: inline-block; }
.env-media { position: relative; }
.env-photo { aspect-ratio: 4 / 3; }
.env-light { position: absolute; width: 42%; aspect-ratio: 3 / 4; right: -8%; bottom: -14%; border: 8px solid #fff; border-radius: 8px; }
@media (max-width: 900px) { .env-layout { grid-template-columns: 1fr; } .env-light { right: 0; bottom: -10%; width: 40%; } .env-media { margin-bottom: 40px; } }

/* ---------- Meshka 360 ---------- */
.diagnostic { background: var(--ink); color: #fff; overflow: hidden; }
.diagnostic-bg { position: absolute; inset: -10% 0; border-radius: 0; opacity: 0.11; filter: grayscale(1); pointer-events: none; z-index: 0; }
.diagnostic::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #111 0%, rgba(17,17,17,0.82) 48%, rgba(17,17,17,0.25) 100%); }
.diagnostic .diagnostic-inner { z-index: 2; }
.diagnostic-bg img { height: 100%; }
.diagnostic-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.diagnostic-copy > * + * { margin-top: 28px; }
.diagnostic-copy > p:not(.eyebrow) { color: rgba(255,255,255,0.75); font-size: 18px; }
.map-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; perspective: 1200px; }
.map-tile { border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 26px 24px; display: grid; gap: 6px; background: rgba(255,255,255,0.03); transition: background-color 250ms, border-color 250ms, transform 300ms var(--ease-out); transform-style: preserve-3d; backface-visibility: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; align-content: start; }
.map-tile:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-4px); }
.map-tile dt { font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.map-tile dt::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; }
.map-tile dd { color: rgba(255,255,255,0.7); font-size: 15px; }
.map-tile:hover dd { color: var(--mute); }
@media (max-width: 900px) { .diagnostic-inner { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
.about-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.about-photo { aspect-ratio: 4 / 5; }
.about-photo figcaption { position: absolute; left: 20px; bottom: 20px; margin: 0; background: #fff; color: var(--ink); padding: 12px 16px; border-radius: 6px; display: grid; gap: 2px; font-size: 14px; max-width: 80%; z-index: 6; }
.about-photo figcaption strong { font-size: 16px; }
.about-photo figcaption span { color: var(--mute); }
.about-copy > * + * { margin-top: 28px; }
.about-copy > p:not(.eyebrow) { color: var(--mute); font-size: 18px; }
.about-copy blockquote { border-left: 4px solid var(--red); padding-left: 24px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
@media (max-width: 900px) { .about-layout { grid-template-columns: 1fr; } .about-photo { aspect-ratio: 4 / 3; } }

/* ---------- Manifesto ---------- */
.manifesto { background: var(--ink); color: #fff; }
.manifesto-lines { display: grid; gap: clamp(18px, 2.4vw, 32px); margin-top: 48px; max-width: 1100px; }
.manifesto-line { max-width: none; font-size: clamp(24px, 3.4vw, 50px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: #fff; }
body.motion .manifesto-line { background: linear-gradient(90deg, #fff 0%, #fff 50%, #3a3a3a 50%, #3a3a3a 100%); background-size: 200% 100%; background-position-x: 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
body.motion .manifesto-line-accent { background-image: linear-gradient(90deg, var(--red) 0%, var(--red) 50%, #3a3a3a 50%, #3a3a3a 100%); }
body.static .manifesto-line-accent { color: var(--red); }

/* ---------- Contact ---------- */
.contact { padding-bottom: clamp(80px, 10vw, 140px); }
.contact-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end; margin-top: 28px; }
.contact h2 { font-size: clamp(44px, 8.4vw, 136px); letter-spacing: -0.045em; line-height: 0.96; font-weight: 800; }
.contact-copy > * + * { margin-top: 24px; }
.contact-copy p { color: var(--mute); font-size: 19px; }
.contact-email { display: table; font-weight: 600; font-size: 20px; border-bottom: 2px solid var(--ink); }
.contact-email:hover { color: var(--action); border-color: currentColor; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
footer { background: var(--ink); color: #fff; }
.footer-marquee { padding: 36px 0; }
.marquee-list-big li { font-size: clamp(48px, 8vw, 120px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; padding: 0 32px; -webkit-text-stroke: 1px rgba(255,255,255,0.7); color: transparent; }
.marquee-list-big li::after { background: var(--red); width: 14px; height: 14px; }
.footer-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 56px 0 40px; border-top: 1px solid #262626; }
footer .brand img { width: 160px; }
.footer-main nav { display: flex; flex-wrap: wrap; gap: 28px; font-size: 15px; font-weight: 500; }
.footer-main nav a:hover, .back-top:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.back-top { font-size: 14px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; color: rgba(255,255,255,0.7); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding: 24px 0 40px; border-top: 1px solid #262626; font-size: 14px; color: rgba(255,255,255,0.6); }
@media (max-width: 760px) { .footer-main { flex-direction: column; align-items: flex-start; } }

/* ---------- Static mode (no JS / reduced motion) ---------- */
body.static .site-header { position: sticky; background: var(--ink); color: #fff; }
body:not(.static):not(.js) .site-header { background: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
/* Same, when previewed with ?reduced-motion */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }

/* ======================================================================
   v2.1 additions: shader hero, progress bar, line icons, loops, tilt,
   OS pulse/float, flip tiles, grain
   ====================================================================== */

/* Progress bar */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150; pointer-events: none; }
.progress-bar { display: block; height: 100%; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
body.static .progress { display: none; }
/* Shader hero */

/* Problems: counter, cue, line icons */

.line-icon { width: 48px; height: 48px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 18px; }

/* In-view video loops over stills */
.loop-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.loop-video.is-playing { opacity: 1; }
body.static .loop-video { display: none; }
/* Tilt */

/* OS pulse + node wrappers */
.os-pulse { fill: var(--red); opacity: 0; }
.os-node-pos { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }

/* Grain on dark surfaces */
.grain { position: relative; }
.grain::after { content: ""; position: absolute; inset: -100%; width: 300%; height: 300%; pointer-events: none; opacity: 0.07; z-index: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
body.motion .grain::after { animation: grain 0.9s steps(6) infinite; }
.grain > *:not(.diagnostic-bg) { position: relative; z-index: 1; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-4%,2%); } 40% { transform: translate(3%,-5%); } 60% { transform: translate(-5%,-3%); } 80% { transform: translate(4%,4%); } 100% { transform: translate(0,0); } }

/* ======================================================================
   v2.2: DrawSVG/MorphSVG glyph, Swiper photo strip, curtains.js planes
   ====================================================================== */
#curtains-canvas { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#curtains-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.reveal-img.has-plane img { opacity: 0; }

.method-glyph { grid-column: 2; width: 56px; height: 56px; fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.method-sticky .method-progress { grid-row: 1 / span 3; }

.room { padding-bottom: clamp(64px, 8vw, 120px); overflow: hidden; }
.room-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.room-head h2 { margin-top: 20px; max-width: 14ch; }
.room-nav { display: flex; gap: 10px; flex: none; }
.room-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; transition: background-color 200ms, color 200ms, transform 200ms var(--ease-out); }
.room-btn:hover { background: var(--ink); color: #fff; }
.room-btn:active { transform: scale(0.94); }
.room-btn[disabled] { opacity: 0.3; }
.room-swiper { padding: 0 var(--gutter); overflow: visible; }
.room-swiper .swiper-slide { width: min(62vw, 880px); aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--paper); }
.room-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 900ms var(--ease-out); }
.room-swiper .swiper-slide-active img { transform: scale(1); }
.room-swiper .swiper-pagination { position: static; margin: 24px var(--gutter) 0; width: auto; height: 2px; background: var(--rule); }
.room-swiper .swiper-pagination-progressbar-fill { background: var(--red); }
.room-note { margin-top: 16px; font-size: 13px; color: var(--mute); }
@media (max-width: 900px) {
  .room-head { flex-direction: column; align-items: flex-start; }
  .room-swiper .swiper-slide { width: 84vw; }
}
.has-plane { will-change: auto; }

/* ======================================================================
   v2.3: copy cut + interactive sections
   ====================================================================== */
/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 14px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); background: #fff; }
.chips-offers li { background: var(--paper); border-color: transparent; }
.chips-offers li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 10px; vertical-align: 1px; }
/* Problems as a tappable checklist */

/* Questions stepper */
.stepper { border-top: 1px solid var(--rule); padding-top: 20px; }
.stepper-label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); display: flex; gap: 16px; align-items: baseline; margin-bottom: 18px; }
.stepper-count b { color: var(--ink); }
/* One question at a time only in the animated mode; reduced motion and no-JS get the full list. */
body.motion .questions { border: 0; min-height: 3.2em; position: relative; }
body.motion .questions li { display: none; border: 0; padding: 0; font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -0.025em; line-height: 1.15; }
body.motion .questions li.is-current { display: flex; }
body.motion .questions li::before { width: 36px; font-size: 13px; }
.stepper-nav { display: flex; gap: 10px; margin-top: 20px; }
body:not(.motion) .stepper-nav, body:not(.motion) .stepper-count { display: none; }

/* Impact OS self-check */
.os-panel h3.os-q { margin-top: 6px; }
.os-panel .chips { margin-top: 10px; }
.os-shape { fill: rgba(217,75,53,0.16); stroke: var(--red); stroke-width: 2; stroke-linejoin: round; transition: points 300ms; }
.self-check { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.self-check-title { grid-column: 1 / -1; font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.self-check label { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; font-size: 14px; color: var(--mute); }
.self-check input[type="range"] { width: 100%; accent-color: var(--red); height: 32px; }
.self-check-result { grid-column: 1 / -1; font-weight: 600; color: var(--ink); font-size: 17px; margin-top: 6px; }
.self-check .text-link { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
@media (max-width: 900px) { .self-check { grid-template-columns: 1fr; } }

/* Matcher */
.matcher { margin-top: 56px; }
.matcher-lead { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 18px; }
.matcher-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.matcher-tabs [role="tab"] { font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; padding: 14px 20px; border: 1px solid var(--rule); border-radius: 999px; min-height: 48px; transition: background-color 200ms, color 200ms, border-color 200ms, transform 200ms var(--ease-out); }
.matcher-tabs [role="tab"]:hover { border-color: var(--ink); transform: translateY(-2px); }
.matcher-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.practice-card { top: auto; min-height: 0; }
.practice-card[hidden] { display: none; }
.practice-note { color: var(--mute); font-size: 17px; }
.practice-note b { color: var(--ink); }
body.static .practice-card[hidden] { display: grid; }

/* Method details */
.method-step details { margin-top: 4px; }
.method-step summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--mute); list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.method-step summary::-webkit-details-marker { display: none; }
.method-step summary::before { content: "+"; width: 22px; height: 22px; border: 1px solid var(--rule); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--ink); }
.method-step details[open] summary::before { content: "–"; }
.method-step details p { margin-top: 8px; }

/* Skills + Environment switches */
.switches { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.switch { display: inline-flex; align-items: center; gap: 14px; font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; min-height: 48px; }
.switch-track { width: 64px; height: 36px; border-radius: 999px; background: var(--rule); position: relative; transition: background-color 250ms; flex: none; }
.switch-knob { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform 300ms var(--ease-out); }
.switch[aria-checked="true"] .switch-track { background: var(--red); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(28px); }
/* Meshka 360 sorter */

.sorter-items { display: flex; flex-wrap: wrap; gap: 8px; }
.sorter-items li:empty { display: none; }
.sorter-item { font-size: 15px; font-weight: 600; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; color: #fff; min-height: 44px; transition: background-color 200ms, color 200ms, border-color 200ms, transform 200ms var(--ease-out); }
.sorter-item:hover { border-color: #fff; }
.sorter-item[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: #fff; transform: translateY(-2px); }
.sorter-result { font-weight: 600; color: #fff !important; }
.map-tile-name { font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.map-tile-name::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; }
.map-tile-hint { color: rgba(255,255,255,0.7); font-size: 15px; display: block; }
.map-tile:hover .map-tile-hint { color: var(--mute); }
.map-grid.is-armed .map-tile { border-color: var(--red); }
.map-grid.is-armed .map-tile:hover { background: var(--action); border-color: var(--action); color: #fff; }
.map-grid.is-armed .map-tile:hover .map-tile-hint { color: rgba(255,255,255,0.85); }
.map-tile-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.map-tile-items:empty { display: none; }
.map-tile-items li { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.12); }
.map-tile:hover .map-tile-items li { background: var(--paper); color: var(--ink); }

/* About facts */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.facts li { padding: 16px 18px; border: 1px solid var(--rule); border-radius: 8px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.env-copy > p.switch-result { font-size: clamp(32px, 4vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.env-copy > p.switch-result.is-win { color: var(--red); }
/* ======================================================================
   v2.4: hero order field (replaces photo/video/shader hero)
   ====================================================================== */

.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* No JS / no WebGL: a quiet static grid with the one red square */
.hero-media::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgba(255,255,255,0.16) 0 6px, transparent 6.5px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 70%); mask-image: linear-gradient(90deg, transparent 30%, #000 70%); }
.hero-media::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--red); left: 78%; top: 42%; }
body.field .hero-media::before, body.field .hero-media::after { display: none; }
.hero-shade { background: linear-gradient(90deg, rgba(15,15,15,0.94) 0%, rgba(15,15,15,0.82) 34%, rgba(15,15,15,0.25) 58%, rgba(15,15,15,0) 72%), linear-gradient(0deg, rgba(15,15,15,0.7) 0%, rgba(15,15,15,0) 30%); }
.hero-inner a, .hero-inner button { pointer-events: auto; }
.hero-shade::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; background: linear-gradient(180deg, rgba(15,15,15,0.85), rgba(15,15,15,0)); }
@media (max-width: 900px) {
  .hero-shade { background: linear-gradient(180deg, rgba(15,15,15,0.15) 0%, rgba(15,15,15,0.62) 42%, rgba(15,15,15,0.86) 100%); }
}
/* ======================================================================
   v2.5: symptom checker (replaces the sideways problem cards)
   ====================================================================== */

.symptoms-head { max-width: 760px; }
.symptoms-head h2 { margin-top: 18px; }
.symptoms-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; margin-top: 48px; }
.symptom-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.symptom { position: relative; width: 100%; height: 100%; min-height: 148px; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 18px 18px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; cursor: pointer; transition: background-color 220ms, color 220ms, border-color 220ms, transform 220ms var(--ease-out), box-shadow 220ms; }
.symptom:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.06); }
.symptom .line-icon { width: 36px; height: 36px; margin: 0; stroke: var(--ink); stroke-width: 1.7; }
.symptom-text { font-size: clamp(17px, 1.35vw, 20px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; padding-right: 8px; }
.symptom-check { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border: 1.5px solid var(--rule); border-radius: 50%; transition: background-color 200ms, border-color 200ms, transform 250ms var(--ease-out); }
.symptom-check::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 220ms var(--ease-out); }
.symptom[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.symptom[aria-pressed="true"] .line-icon { stroke: #fff; }
.symptom[aria-pressed="true"] .symptom-check { background: var(--red); border-color: var(--red); transform: scale(1.08); }
.symptom[aria-pressed="true"] .symptom-check::after { transform: rotate(45deg) scale(1); }

.diagnosis { position: sticky; top: calc(var(--header-h) + 24px); background: var(--ink); color: #fff; border-radius: 12px; padding: 28px; display: grid; gap: 18px; }
.diagnosis-label { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.diagnosis-count { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; }
.diagnosis-count b { display: inline-block; transform-origin: left bottom; }
.diagnosis-count span { font-size: 22px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 0; }
.diagnosis-meter { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.diagnosis-meter span { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.14); transition: background-color 250ms; }
.diagnosis-meter span.is-on { background: var(--red); }
.diagnosis-text { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; min-height: 1.25em; }
.diagnosis-areas { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.12); }
.diagnosis-areas li { display: grid; grid-template-columns: 82px 1fr 18px; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; transition: opacity 250ms; }
.diagnosis-areas li.is-zero { opacity: 0.4; }
.area-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
.area-bar i { display: block; height: 100%; width: 100%; background: rgba(255,255,255,0.55); transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease-out), background-color 250ms; }
.diagnosis-areas li.is-top .area-bar i { background: var(--red); }
.diagnosis-areas li.is-top .area-name { color: #fff; }
.area-count { text-align: right; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }
.diagnosis-cta { justify-content: center; }
.diagnosis-link { justify-self: start; font-size: 15px; }

.diagnosis-mini { display: none; }
@media (max-width: 1100px) {
  .symptoms-layout { grid-template-columns: 1fr; }
  .symptom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diagnosis { position: static; }
  .diagnosis-mini { display: flex; align-items: center; gap: 8px; position: fixed; left: 50%; bottom: 16px; z-index: 60; transform: translate(-50%, 140%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: transform 350ms var(--ease-out); white-space: nowrap; }
  .diagnosis-mini b { color: var(--red); font-size: 19px; }
  .diagnosis-mini.in-view.has-ticks { transform: translate(-50%, 0); }
}
@media (max-width: 620px) {
  .symptom-grid { grid-template-columns: 1fr; }
  .symptom { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; padding: 16px 52px 16px 16px; gap: 14px; }
  .symptom .line-icon { width: 30px; height: 30px; flex: none; }
  .symptom-check { top: 50%; margin-top: -12px; }
  .diagnosis-count { font-size: 52px; }
}


/* Larger invisible hit areas for small text links (WCAG target size), with no visual change. */
.text-link, .practice-link, .contact-email, .back-top, .footer-main nav a, #main-nav a[data-nav], .diagnosis-link { position: relative; }
.text-link::before, .practice-link::before, .contact-email::before, .back-top::before, .footer-main nav a::before, #main-nav a[data-nav]::before { content: ""; position: absolute; inset: -10px -6px; }

/* ======================================================================
   v3: multi-page site — page heroes, subnav, signals, accordion, offers,
   chain, flip, checklist, modes, practice tiles, values, CTA, form, footer
   ====================================================================== */

/* Header: current section */
#main-nav a[data-nav][aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.mobile-nav .mobile-subnav { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 18px; border-bottom: 1px solid #2c2c2c; }
.mobile-nav .mobile-subnav a { display: inline-flex; min-height: 40px; align-items: center; padding: 6px 14px; border: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,0.85); }

/* Page hero */
.hero-page { min-height: 72svh; padding-bottom: 96px; }
.hero-page .hero-title { font-size: clamp(40px, 6.6vw, 96px); max-width: 14ch; }
.hero-short { min-height: 56svh; }
.hero-page .hero-media img { opacity: 0.6; }
.hero-page .hero-shade { background: linear-gradient(90deg, rgba(15,15,15,0.96) 0%, rgba(15,15,15,0.86) 40%, rgba(15,15,15,0.45) 70%, rgba(15,15,15,0.2) 100%), linear-gradient(0deg, rgba(15,15,15,0.8) 0%, rgba(15,15,15,0) 40%); }
.hero-page .hero-shade::after { display: none; }
@media (max-width: 900px) {
  .hero-page { min-height: 0; padding-bottom: 72px; }
  .hero-page .hero-shade { background: linear-gradient(180deg, rgba(15,15,15,0.55), rgba(15,15,15,0.92)); }
}

/* Sub navigation strip */
.subnav { background: var(--ink); color: #fff; border-top: 1px solid #262626; position: relative; z-index: 2; }
.subnav-inner { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; scrollbar-width: none; }
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a { flex: none; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 999px; border: 1px solid #333; color: rgba(255,255,255,0.8); min-height: 44px; display: inline-flex; align-items: center; transition: background-color 200ms, color 200ms, border-color 200ms; }
.subnav a:hover { border-color: #fff; color: #fff; }
.subnav a[aria-current="page"] { background: #fff; color: var(--ink); border-color: #fff; }

/* Signals */
.signals { background: var(--paper); }
.signals-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.signals-layout h2 { margin-top: 18px; }
.signal-list { border-top: 1px solid var(--rule); }
.signal-list li { display: flex; align-items: baseline; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--rule); font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.signal-list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; transform: translateY(-2px); }
@media (max-width: 900px) { .signals-layout { grid-template-columns: 1fr; } }

/* Work layout + accordion */
.work-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.work-head { position: sticky; top: calc(var(--header-h) + 24px); }
.work-head h2 { margin-top: 18px; }
.work-head .text-link { margin-top: 24px; }
.acc { border-top: 1px solid var(--rule); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 22px 0; font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; min-height: 44px; transition: padding-left 300ms var(--ease-out); }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after { content: "+"; margin-left: auto; width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 400; flex: none; transition: transform 300ms var(--ease-out), background-color 200ms, color 200ms, border-color 200ms; }
.acc-item summary:hover { padding-left: 8px; }
.acc-item summary:hover::after { background: var(--ink); color: #fff; border-color: var(--ink); }
.acc-item[open] summary::after { transform: rotate(45deg); background: var(--red); border-color: var(--red); color: #fff; }
.acc-item > p { color: var(--mute); font-size: 18px; padding: 0 0 24px; max-width: 52ch; }
.acc-num { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); width: 32px; flex: none; }
@media (max-width: 900px) { .work-layout { grid-template-columns: 1fr; } .work-head { position: static; } }

/* Offers */
.offers { background: var(--paper); }
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.offer { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: clamp(28px, 4vw, 48px); display: grid; gap: 18px; align-content: start; }
.offer-index { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); text-transform: uppercase; }
.offer h3 { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.03em; line-height: 1; }
.offer-tag { font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.offer > p:not(.offer-tag):not(.offer-index):not(.offer-close) { color: var(--mute); font-size: 18px; }
.offer-close { font-weight: 600; border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 6px; }
.offer .chips { margin-top: 4px; }
.offer .text-link { justify-self: start; }
@media (max-width: 900px) { .offer-grid { grid-template-columns: 1fr; } }

/* Chain: a workflow drawn as linked nodes */
.chain { display: grid; gap: 18px; margin-top: 8px; }
.chain-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.chain-tabs [role="tab"] { font-size: 14px; font-weight: 600; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 999px; min-height: 44px; transition: background-color 200ms, color 200ms, border-color 200ms; }
.chain-tabs [role="tab"]:hover { border-color: var(--ink); }
.chain-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chain-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 0; }
.chain-steps li { position: relative; margin-right: 38px; padding: 12px 18px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; font-weight: 700; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: -0.01em; line-height: 1; transition: background-color 200ms, color 200ms; }
.chain-steps li::after { content: ""; position: absolute; left: calc(100% + 2px); top: 50%; width: 34px; height: 2px; background: var(--ink); opacity: 0.35; }
.chain-steps li:last-child { margin-right: 0; }
.chain-steps li:last-child::after { display: none; }
.chain-steps li > button { font: inherit; padding: 0; min-height: 0; color: inherit; }
.chain-loop .chain-steps li:last-child { margin-right: 44px; }
.chain-loop .chain-steps li:last-child::after { display: block; content: "↻"; width: auto; height: auto; background: none; opacity: 1; color: var(--red); font-size: 24px; line-height: 1; transform: translateY(-50%); left: calc(100% + 12px); }
.chain-steps li:has(> button:hover) { background: var(--paper); }
.chain-steps li:has(> button[aria-pressed="true"]) { background: var(--ink); color: #fff; }
.chain-note { color: var(--mute); font-size: 17px; min-height: 1.6em; }
.offer-loop .chain-note { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.chain-steps li > button:focus-visible { outline-offset: 10px; }

/* Flip: one question, two versions */
.flip { display: grid; gap: 16px; }
.flip-line { font-size: clamp(26px, 3vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; display: none; max-width: 14ch; }
.flip-line.is-on { display: block; }
.flip-line::before { content: attr(data-flip-text); display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); margin-bottom: 10px; }
.flip-btn { justify-self: start; }
body.static .flip-line { display: block; }
body.static .flip-btn { display: none; }

/* Checklist (the Monday morning test) */
.habits { background: var(--paper); }
.habits-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.habits-copy > * + * { margin-top: 24px; }
.habits-copy h2 { margin-top: 18px; }
.habits-copy > p:not(.eyebrow):not(.check-result):not(.check-count) { color: var(--mute); font-size: 18px; }
.check-result { font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; min-height: 2.2em; }
.check-result.is-win { color: var(--red); }
.check-count { font-size: 15px; font-weight: 600; color: var(--mute); }
.check-count b { color: var(--ink); font-size: 28px; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-item { width: 100%; text-align: left; font: inherit; font-weight: 600; font-size: 16px; padding: 16px 18px 16px 50px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; min-height: 56px; position: relative; transition: background-color 200ms, color 200ms, border-color 200ms, transform 200ms var(--ease-out); }
.check-item::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 1.5px solid var(--rule); border-radius: 50%; transition: background-color 200ms, border-color 200ms; }
.check-item::after { content: ""; position: absolute; left: 23px; top: 50%; width: 5px; height: 9px; margin-top: -7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 200ms var(--ease-out); }
.check-item:hover { border-color: var(--ink); transform: translateY(-2px); }
.check-item[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.check-item[aria-pressed="true"]::before { background: var(--red); border-color: var(--red); }
.check-item[aria-pressed="true"]::after { transform: rotate(45deg) scale(1); }
@media (max-width: 900px) { .habits-layout, .check-list { grid-template-columns: 1fr; } }

/* Ways to work with us */
.modes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 56px; }
.modes-grid li { border-top: 2px solid var(--ink); padding-top: 20px; display: grid; gap: 10px; align-content: start; }
.mode-index { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); }
.modes-grid h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; }
.modes-grid p { color: var(--mute); font-size: 16px; }
.modes-note { margin-top: 32px; color: var(--mute); font-size: 15px; }
@media (max-width: 1100px) { .modes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .modes-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .modes-grid { grid-template-columns: 1fr; } }

/* The five (overview) */
.five { background: var(--paper); }
.practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 56px; }
.practice-grid li:first-child { grid-column: 1 / -1; }
.practice-tile { display: grid; gap: 14px; align-content: start; background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: clamp(24px, 3vw, 40px); height: 100%; transition: transform 300ms var(--ease-out), border-color 200ms, box-shadow 300ms; }
.practice-tile:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
.practice-tile-index { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); }
.practice-tile h3 { font-size: clamp(34px, 4.4vw, 64px); letter-spacing: -0.04em; line-height: 0.95; font-weight: 800; }
.practice-tile p { color: var(--mute); font-size: 18px; }
.practice-tile-link { font-weight: 600; color: var(--action); display: inline-flex; gap: 8px; align-items: center; margin-top: 8px; }
.practice-tile-link span { transition: transform 250ms var(--ease-out); }
.practice-tile:hover .practice-tile-link span { transform: translateX(4px); }
@media (max-width: 760px) { .practice-grid { grid-template-columns: 1fr; } }

/* Meshka 360 on the How we work page */
.stepper-light { border-top-color: rgba(255,255,255,0.2); }
.stepper-light .stepper-label { color: rgba(255,255,255,0.6); }
.stepper-light .stepper-count b { color: #fff; }
.stepper-light .questions { border-top-color: rgba(255,255,255,0.2); }
.stepper-light .questions li { border-bottom-color: rgba(255,255,255,0.15); color: #fff; }
.stepper-light .questions li::before { color: var(--red); }
.room-btn-light { border-color: rgba(255,255,255,0.5); color: #fff; }
.room-btn-light:hover { background: #fff; color: var(--ink); }
.diagnostic-close { font-weight: 600; color: #fff !important; }
.map-grid-4 { grid-template-columns: repeat(2, 1fr); }
div.map-tile { cursor: default; }
div.map-tile:hover { transform: none; }

/* About: credential, the name, values */
.about-credential { font-size: 16px !important; border-left: 2px solid var(--rule); padding-left: 16px; }
.name { background: var(--ink); color: #fff; }
.name-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.name-arabic { font-family: var(--meshka-font-arabic); font-size: clamp(96px, 16vw, 240px); line-height: 1; font-weight: 700; text-align: center; color: #fff; max-width: none; direction: rtl; }
.name h2 { margin-top: 18px; }
.name p:not(.eyebrow):not(.name-arabic) { color: rgba(255,255,255,0.78); font-size: 19px; margin-top: 20px; }
.name em { font-style: normal; font-family: var(--meshka-font-arabic); color: #fff; }
@media (max-width: 900px) { .name-layout { grid-template-columns: 1fr; } .name-arabic { text-align: left; } }
.values { overflow: hidden; }
.values-swiper { padding: 0 var(--gutter); overflow: visible; }
.values-swiper .swiper-slide { width: min(78vw, 480px); height: auto; }
.value { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: clamp(28px, 3vw, 40px); display: grid; gap: 14px; align-content: start; min-height: 300px; }
.value-index { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); }
.value h3 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.03em; line-height: 1.05; }
.value p { color: var(--mute); font-size: 17px; }
.values-swiper .swiper-pagination { position: static; margin: 24px var(--gutter) 0; width: auto; height: 2px; background: var(--rule); }
.values-swiper .swiper-pagination-progressbar-fill { background: var(--red); }
.values-close { margin-top: 40px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.02em; max-width: none; }

/* CTA */
.cta { background: var(--ink); color: #fff; }
.cta-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end; }
.cta h2 { font-size: clamp(44px, 7.4vw, 120px); letter-spacing: -0.045em; line-height: 0.96; font-weight: 800; margin-top: 24px; max-width: 12ch; }
.cta-copy > * + * { margin-top: 24px; }
.cta-copy p { color: rgba(255,255,255,0.75); font-size: 19px; }
.contact-email-light { border-color: #fff; }
.contact-email-light:hover { color: var(--red); }
@media (max-width: 900px) { .cta-inner { grid-template-columns: 1fr; } }

/* Work with us: form */
.contact-page { background: var(--paper); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.contact-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 28px; }
.next-steps { border-top: 1px solid var(--rule); }
.next-steps li { display: flex; gap: 18px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.next-steps li span { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); flex: none; width: 28px; }
.contact-alt { color: var(--mute); font-size: 17px; }
.contact-alt .contact-email { display: inline; font-size: inherit; }
.contact-cities { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; }
.contact-cities span { font-weight: 400; color: var(--mute); font-size: 15px; }
.form { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: clamp(24px, 4vw, 56px); display: grid; gap: 20px; position: relative; }
.form-title { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.03em; line-height: 1.02; }
.form-intro { color: var(--mute); font-size: 18px; }
.form-fields { display: grid; gap: 22px; }
.form-fields[hidden] { display: none; }
.form-field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.form-field label, .form-field legend { font-weight: 600; font-size: 15px; }
.field-opt { font-weight: 400; color: var(--mute); }
.form-field input, .form-field select, .form-field textarea { width: 100%; font: inherit; font-size: 17px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: var(--ink); min-height: 52px; transition: border-color 200ms, box-shadow 200ms; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,0.08); }
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: var(--action); }
.form-field textarea { resize: vertical; min-height: 160px; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-chips legend { margin-bottom: 10px; }
.chips-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-select label { position: relative; }
.chips-select input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips-select span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--rule); border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color 200ms, color 200ms, border-color 200ms; }
.chips-select label:hover span { border-color: var(--ink); }
.chips-select input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips-select input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding-top: 6px; }
.form-note { color: var(--mute); font-size: 14px; }
.form-error { color: var(--action); font-weight: 600; background: #fff4f2; border: 1px solid #f1c9c2; border-radius: 8px; padding: 12px 16px; max-width: none; }
.form-error[hidden] { display: none; }
.form-sent { display: grid; gap: 14px; padding: 8px 0; }
.form-sent[hidden] { display: none; }
.form-sent-title { font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: -0.03em; }
.form-sent p:not(.form-sent-title) { color: var(--mute); font-size: 18px; }
.form-sent .text-link { justify-self: start; }
.form.is-busy button[type="submit"] { opacity: 0.6; pointer-events: none; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-aside { position: static; } .field-row { grid-template-columns: 1fr; } }

/* Footer: columns */
.footer-main .footer-nav { display: grid; grid-template-columns: repeat(3, auto); gap: 32px 56px; }
.footer-col { display: grid; gap: 10px; font-size: 15px; }
.footer-col a:first-child { font-weight: 700; margin-bottom: 4px; }
.footer-col a:not(:first-child) { color: rgba(255,255,255,0.7); font-weight: 500; }
@media (max-width: 760px) { .footer-main .footer-nav { grid-template-columns: 1fr 1fr; } }

/* ======================================================================
   v3.1: practice switcher (home), tappable signals, method strip,
   previous/next practice
   ====================================================================== */

/* Switcher: sticky list of needs on the left, one panel on the right */
.switcher { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); margin-top: 56px; align-items: start; }
.switcher-side { position: sticky; top: calc(var(--header-h) + 32px); }
.switcher-tabs { position: relative; display: grid; border-top: 1px solid var(--rule); }
.switcher-tabs [role="tab"] { position: relative; display: grid; grid-template-columns: 36px 1fr; grid-template-areas: "num need" "num name"; column-gap: 12px; row-gap: 4px; text-align: left; padding: 20px 20px 20px 0; border-bottom: 1px solid var(--rule); min-height: 44px; color: var(--mute); transition: color 250ms, padding-left 300ms var(--ease-out); }
.switcher-num { grid-area: num; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); padding-top: 5px; }
.switcher-need { grid-area: need; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.switcher-name { grid-area: name; font-size: clamp(28px, 3.2vw, 48px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--ink); opacity: 0.4; transition: opacity 250ms; }
.switcher-tabs [role="tab"]:hover .switcher-name, .switcher-tabs [role="tab"][aria-selected="true"] .switcher-name { opacity: 1; }
.switcher-tabs [role="tab"][aria-selected="true"] { color: var(--ink); padding-left: 18px; }
.switcher-indicator { position: absolute; left: 0; top: 0; width: 4px; height: 0; background: var(--red); border-radius: 2px; pointer-events: none; }
.switcher-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 48px); background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: clamp(20px, 2.5vw, 32px); align-items: start; }
.switcher-panel[hidden] { display: none; }
body.static .switcher-panels { display: grid; gap: 24px; }
body.static .switcher-panel[hidden] { display: grid; }
body.static .switcher-indicator { display: none; }
.switcher-media { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--paper); margin: 0; }
.switcher-media img, .switcher-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.switcher-video { opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.switcher-video.is-playing { opacity: 1; }
body.static .switcher-video { display: none; }
.switcher-body { display: grid; gap: 18px; align-content: start; }
.switcher-title { font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.switcher-list { display: grid; border-top: 1px solid var(--rule); }
.switcher-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-weight: 600; font-size: 16px; display: flex; gap: 12px; align-items: baseline; }
.switcher-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.switcher-panel .practice-link { grid-column: auto; margin-top: 4px; }
@media (max-width: 1000px) {
  .switcher { grid-template-columns: 1fr; gap: 24px; }
  .switcher-side { position: static; }
  .switcher-tabs { display: flex; gap: 8px; overflow-x: auto; border: 0; padding-bottom: 6px; scrollbar-width: none; }
  .switcher-tabs::-webkit-scrollbar { display: none; }
  .switcher-tabs [role="tab"] { flex: none; display: inline-flex; align-items: center; padding: 12px 18px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); min-height: 48px; }
  .switcher-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); padding-left: 18px; }
  .switcher-num, .switcher-name, .switcher-indicator { display: none; }
  .switcher-need { font-size: 16px; letter-spacing: 0; }
  .switcher-panel { grid-template-columns: 1fr; }
  .switcher-media { aspect-ratio: 16 / 10; }
}

/* Tappable signals on practice pages */
.signal-list[data-checklist] li { padding: 0; border: 0; display: block; }
.signal-list[data-checklist] li::before { display: none; }
.signal-list .check-item { font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; padding: 20px 0 20px 50px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; min-height: 0; color: var(--ink); opacity: 0.55; transition: opacity 200ms, padding-left 300ms var(--ease-out); }
.signal-list .check-item::before { left: 0; width: 24px; height: 24px; margin-top: -12px; }
.signal-list .check-item::after { left: 8px; width: 6px; height: 11px; margin-top: -8px; }
.signal-list .check-item:hover { opacity: 1; transform: none; border-color: var(--rule); }
.signal-list .check-item[aria-pressed="true"] { background: transparent; color: var(--ink); opacity: 1; padding-left: 58px; }
.signals .check-result { font-size: clamp(20px, 2vw, 28px); margin-top: 24px; min-height: 1.3em; }
.signals .text-link { margin-top: 18px; }

/* Method strip: where a practice sits in the six steps */
.mstrip { background: var(--paper); }
.mstrip .section-intro .text-link { font-size: inherit; }
.mstrip-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 48px; }
.mstrip-steps li { border-top: 2px solid var(--rule); padding: 16px 14px 18px; display: grid; gap: 10px; font-weight: 700; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.02em; color: var(--mute); border-radius: 0 0 8px 8px; transition: background-color 250ms, color 250ms; }
.mstrip-steps li span { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--mute); }
.mstrip-steps li.is-on { background: var(--ink); color: #fff; border-top-color: var(--red); }
.mstrip-steps li.is-on span { color: var(--red); }
@media (max-width: 900px) { .mstrip-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .mstrip-steps { grid-template-columns: repeat(2, 1fr); } }

/* Previous / next practice */
.pnext { padding: 0; border-top: 1px solid var(--rule); }
.pnext-inner { display: grid; grid-template-columns: 1fr 1fr; }
.pnext-link { display: grid; gap: 8px; padding: clamp(32px, 4vw, 56px) 0; }
.pnext-prev { border-right: 1px solid var(--rule); padding-right: 24px; }
.pnext-next { text-align: right; padding-left: 24px; }
.pnext-label { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.pnext-name { font-size: clamp(28px, 3.6vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; transition: color 200ms; }
.pnext-name span { display: inline-block; transition: transform 250ms var(--ease-out); }
.pnext-link:hover .pnext-name { color: var(--action); }
.pnext-next:hover .pnext-name span { transform: translateX(6px); }
.pnext-prev:hover .pnext-name span { transform: translateX(-6px); }
@media (max-width: 600px) { .pnext-inner { grid-template-columns: 1fr; } .pnext-prev { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; } .pnext-next { text-align: left; padding-left: 0; } }

/* ======================================================================
   v3.2: review fixes
   ====================================================================== */
/* The home hero's no-WebGL fallback (dot grid + red square) must not draw over inner-page banners. */
.hero-page .hero-media::before, .hero-page .hero-media::after { display: none; }
.hero-page .hero-media img { opacity: 0.72; object-position: 72% 50%; }
.hero-page .hero-shade { background: linear-gradient(90deg, rgba(15,15,15,0.97) 0%, rgba(15,15,15,0.88) 36%, rgba(15,15,15,0.5) 62%, rgba(15,15,15,0.18) 100%), linear-gradient(0deg, rgba(15,15,15,0.85) 0%, rgba(15,15,15,0) 45%); }
@media (max-width: 900px) { .hero-page .hero-media img { object-position: 60% 50%; } }
/* Grow: give the donor loop room so the chain stays on one line at desktop widths. */
.offer-grid-wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.offer-loop .chain-steps li { margin-right: 30px; padding: 11px 15px; }
.offer-loop .chain-steps li::after { width: 26px; }
.chain-loop .chain-steps li:last-child { margin-right: 40px; }
.offer-loop .chain-steps li { font-size: 16px; }

/* ======================================================================
   v3.3: Impact OS radar you can drag
   ====================================================================== */
.os-levels circle { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.12; }
.os-levels circle:last-child { opacity: 0.3; }
.os-shape { fill: url(#os-fill); stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; }
.os-handle { cursor: grab; touch-action: none; }
.os-handle.is-dragging { cursor: grabbing; }
.os-handle-hit { fill: transparent; }
.os-handle-dot { fill: #fff; stroke: var(--red); stroke-width: 3; transition: r 150ms, fill 150ms; }
.os-handle:hover .os-handle-dot, .os-handle.is-dragging .os-handle-dot { r: 13; fill: var(--red); }
body.static .os-handles { display: none; }
.os-panel p.os-signal { font-size: 15px; font-weight: 600; color: var(--action); letter-spacing: 0; }
.os-verdict { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 6px; display: grid; gap: 8px; }
.os-verdict-line { font-size: clamp(20px, 2vw, 28px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); max-width: none; }
.os-verdict-start { font-size: 16px; color: var(--mute); }
.os-verdict-start b { color: var(--ink); }
.os-verdict-start[hidden] { display: none; }
.os-verdict .text-link { justify-self: start; margin-top: 4px; }
.self-check label { grid-template-columns: 92px 1fr; }
@media (max-width: 900px) { .os-verdict-line { font-size: 20px; } }
/* Inner-page banners: keep the picture side legible; the headline side stays dark. */
.hero-page .hero-media img { opacity: 0.9; }
.hero-page .hero-shade { background: linear-gradient(90deg, rgba(15,15,15,0.97) 0%, rgba(15,15,15,0.9) 34%, rgba(15,15,15,0.55) 56%, rgba(15,15,15,0.08) 78%, rgba(15,15,15,0) 100%), linear-gradient(0deg, rgba(15,15,15,0.75) 0%, rgba(15,15,15,0) 40%); }

/* ======================================================================
   v3.4: question deck on a Tuesday desk (home "We start with your work")
   ====================================================================== */
.deck-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.deck-copy > * + * { margin-top: 28px; }
.deck-copy > p:not(.eyebrow) { color: var(--mute); font-size: 18px; }
.deck-phases { display: grid; border-top: 1px solid var(--rule); }
.deck-phases li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0 14px 16px; border-bottom: 1px solid var(--rule); font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.02em; color: var(--mute); position: relative; transition: color 300ms, padding-left 300ms var(--ease-out); }
.deck-phases li span { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--mute); width: 52px; flex: none; }
.deck-phases li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--red); transform: scaleY(0); transition: transform 350ms var(--ease-out); }
.deck-phases li.is-on { color: var(--ink); padding-left: 24px; }
.deck-phases li.is-on span { color: var(--action); }
.deck-phases li.is-on::before { transform: scaleY(1); }

.deck-stage { position: relative; }
.deck-photo { aspect-ratio: 4 / 3; margin: 0; border-radius: 12px; }
.deck-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(15,15,15,0.15) 0%, rgba(15,15,15,0.55) 100%); pointer-events: none; }
.deck-photo figcaption { position: absolute; left: 16px; top: 16px; margin: 0; z-index: 2; background: rgba(255,255,255,0.9); color: var(--ink); padding: 6px 10px; border-radius: 4px; }

/* Static / no-JS: a readable list under the photo */
.deck { margin-top: 24px; outline: none; }
.deck-cards { display: grid; gap: 10px; }
.deck-card { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 20px 22px; display: grid; gap: 10px; }
.deck-top { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.deck-num { color: var(--action); }
.deck-num i { font-style: normal; color: var(--mute); }
.deck-phase { color: var(--mute); }
.deck-q { font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; max-width: 18ch; }
.deck-why { color: var(--mute); font-size: 16px; }
.deck-controls { display: none; }

/* Live deck: cards stacked on the photo */
.deck.is-live { position: absolute; left: 50%; top: 50%; width: min(78%, 460px); margin: 0; transform: translate(-50%, -46%); z-index: 3; }
.deck.is-live .deck-cards { display: block; position: relative; height: 270px; }
.deck.is-live .deck-card { position: absolute; inset: 0; padding: 28px 30px; align-content: space-between; box-shadow: 0 24px 50px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.12); border-color: transparent; transform-origin: 50% 100%; cursor: grab; touch-action: pan-y; user-select: none; will-change: transform; }
.deck.is-live .deck-card.is-dragging { cursor: grabbing; }
.deck.is-live .deck-card-end { background: var(--ink); color: #fff; }
.deck.is-live .deck-card-end .deck-num, .deck.is-live .deck-card-end .deck-phase { color: rgba(255,255,255,0.7); }
.deck.is-live .deck-card-end .text-link { color: #fff; }
.deck:focus-visible .deck-card:first-child, .deck:focus-visible .deck-card.is-top { outline: 3px solid var(--ink); outline-offset: 4px; }
.deck-stage.has-deck .deck-controls { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.deck-count { font-size: 14px; font-weight: 600; color: var(--mute); min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.deck-count b { color: var(--ink); font-size: 18px; }
.deck-hint { margin-left: auto; font-size: 13px; color: var(--mute); }
@media (max-width: 900px) {
  .deck-layout { grid-template-columns: 1fr; }
  .deck-photo { aspect-ratio: 4 / 3; }
  .deck.is-live { width: 86%; }
  .deck.is-live .deck-cards { height: 240px; }
  .deck.is-live .deck-card { padding: 22px; }
  .deck-hint { display: none; }
}
/* Deck sits low-left over the desk photo so the red note and laptop stay visible. */
.deck.is-live { left: -24px; top: auto; bottom: -64px; width: min(68%, 440px); transform: none; }
.deck-stage.has-deck .deck-controls { margin-top: 92px; }
@media (max-width: 900px) {
  .deck.is-live { left: 7%; width: 86%; bottom: -56px; }
  .deck-stage.has-deck .deck-controls { margin-top: 84px; }
}
/* Controls sit to the right of the deck, under the photo, so the card stack never hides them. */
.deck-stage.has-deck { padding-bottom: 48px; }
.deck-stage.has-deck .deck-controls { margin-top: 20px; margin-left: auto; width: max-content; flex-wrap: wrap; justify-content: flex-end; max-width: 30%; min-width: 190px; }
.deck-stage.has-deck .deck-hint { margin-left: 0; width: 100%; text-align: right; }
@media (max-width: 900px) {
  .deck-stage.has-deck { padding-bottom: 0; }
  .deck-stage.has-deck .deck-controls { margin: 112px auto 0; max-width: none; justify-content: center; }
}
.deck-anchor { position: relative; }
@media (max-width: 900px) {
  .deck.is-live { bottom: -112px; }
  .deck-stage.has-deck .deck-controls { margin-top: 168px; }
}
/* Keep ← count → on one row at every desktop width. */
.deck-stage.has-deck .deck-controls { min-width: 236px; max-width: none; }

/* ======================================================================
   v3.5: "What do you need?" as five expanding image panels
   Default (no JS): a stacked list with every panel open.
   .is-live (JS): desktop row of panels, one open; phone accordion.
   ====================================================================== */
.vpanels { display: grid; gap: 10px; margin-top: 56px; }
.vpanel { position: relative; overflow: hidden; border-radius: 12px; background: #131313; color: #fff; isolation: isolate; min-width: 0; }
.vpanel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; opacity: 0.5; transform: scale(1.06); transition: opacity 600ms, transform 1100ms var(--ease-out); z-index: -1; }
.vpanel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(12,12,12,0.7) 0%, rgba(12,12,12,0) 26%, rgba(12,12,12,0) 40%, rgba(12,12,12,0.86) 68%, rgba(12,12,12,0.96) 100%); }
.vpanel.is-open .vpanel-img { opacity: 0.95; transform: scale(1); }
.vpanel-head { margin: 0; font: inherit; }
.vpanel-btn { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "num need plus" "name name name"; align-items: baseline; gap: 6px 14px; width: 100%; text-align: left; padding: 24px 26px 8px; color: #fff; min-height: 44px; }
.vpanel-num { grid-area: num; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--red); }
.vpanel-need { grid-area: need; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.75); }
.vpanel-name { grid-area: name; font-size: clamp(36px, 4.6vw, 68px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }
.vpanel-name-v, .vpanel-plus { display: none; }
.vpanel-body { display: grid; gap: 16px; padding: 120px 26px 28px; }
.vpanel-lead { font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; max-width: 22ch; color: #fff; }
.vpanel-list { display: grid; border-top: 1px solid rgba(255,255,255,0.18); max-width: 460px; }
.vpanel-list li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.18); font-weight: 600; font-size: 15px; color: rgba(255,255,255,0.92); }
.vpanel-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; transform: translateY(-1px); }
.vpanel-chips li { background: rgba(255,255,255,0.1); color: #fff; }
.vpanel-link { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; border-bottom: 2px solid var(--red); padding-bottom: 3px; position: relative; }
.vpanel-link::before { content: ""; position: absolute; inset: -10px -6px; }
.vpanel-link span { transition: transform 250ms var(--ease-out); }
.vpanel-link:hover span { transform: translateX(4px); }
.vpanel .vpanel-btn:focus-visible, .vpanel-link:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* Desktop: a row of tall panels; the open one takes most of the width. */
@media (min-width: 1001px) {
  .vpanels.is-live { display: flex; height: clamp(540px, 66vh, 640px); }
  .vpanels.is-live .vpanel { flex: 1 1 0; transition: flex-grow 750ms var(--ease-out); }
  .vpanels.is-live .vpanel.is-open { flex-grow: 5.4; }
  .vpanels.is-live .vpanel-head { position: absolute; inset: 0; z-index: 1; }
  .vpanels.is-live .vpanel-btn { height: 100%; align-content: start; cursor: pointer; }
  .vpanels.is-live .vpanel.is-open .vpanel-head { bottom: auto; }
  .vpanels.is-live .vpanel.is-open .vpanel-btn { height: auto; cursor: default; }
  .vpanels.is-live .vpanel-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 30px 30px; min-width: 520px; transition: opacity 400ms 250ms, visibility 0s 250ms; }
  .vpanels.is-live .vpanel:not(.is-open) .vpanel-body { opacity: 0; visibility: hidden; transition: opacity 150ms, visibility 0s 150ms; }
  /* Collapsed: number on top, name running up the strip. */
  .vpanels.is-live .vpanel:not(.is-open) .vpanel-need, .vpanels.is-live .vpanel:not(.is-open) .vpanel-name { opacity: 0; }
  .vpanels.is-live .vpanel-need, .vpanels.is-live .vpanel-name { transition: opacity 300ms 300ms; white-space: nowrap; }
  .vpanels.is-live .vpanel:not(.is-open) .vpanel-need, .vpanels.is-live .vpanel:not(.is-open) .vpanel-name { transition: opacity 120ms; }
  .vpanels.is-live .vpanel-name-v { display: block; position: absolute; left: 22px; bottom: 26px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(28px, 2.6vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; transition: opacity 300ms 250ms; }
  .vpanels.is-live .vpanel.is-open .vpanel-name-v { opacity: 0; transition: opacity 120ms; }
  .vpanels.is-live .vpanel:not(.is-open):hover .vpanel-img { opacity: 0.75; }
  .vpanels.is-live .vpanel:not(.is-open) .vpanel-plus { display: block; position: absolute; right: 18px; top: 22px; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; }
  .vpanels.is-live .vpanel-plus::before, .vpanels.is-live .vpanel-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: #fff; transform: translate(-50%, -50%); }
  .vpanels.is-live .vpanel-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
}

/* Phone and tablet: an accordion; closed panels are slim image strips. */
@media (max-width: 1000px) {
  .vpanel-btn { padding: 18px 20px; }
  .vpanel-name { font-size: clamp(30px, 8vw, 44px); }
  .vpanels.is-live .vpanel-btn { cursor: pointer; }
  .vpanels.is-live .vpanel:not(.is-open) .vpanel-body { display: none; }
  .vpanels.is-live .vpanel:not(.is-open) .vpanel-img { opacity: 0.4; object-position: 50% 30%; }
  .vpanels.is-live .vpanel-plus { display: block; grid-area: plus; position: relative; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; align-self: center; }
  .vpanels.is-live .vpanel-plus::before, .vpanels.is-live .vpanel-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: #fff; transform: translate(-50%, -50%); transition: transform 300ms var(--ease-out); }
  .vpanels.is-live .vpanel-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
  .vpanels.is-live .vpanel.is-open .vpanel-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
  .vpanel-body { padding: 150px 20px 24px; }
  .vpanel-list li { font-size: 15px; }
}

/* Phones widen the page to fit any overflow when only body clips it, so the page could be panned
   sideways. Clip on both html and body; clip (unlike hidden) creates no scroll container, so
   position: sticky keeps working. */
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }

/* v3.6: phone panels use their own wide images as a clean block, never as a cropped background. */
.vpanel-mimg, .vpanel-thumb { display: none; }
@media (max-width: 1000px) {
  .vpanel { background: #161616; }
  .vpanel::after, .vpanel-img { display: none; }
  .vpanel-btn { grid-template-columns: auto 1fr auto auto; grid-template-areas: "num need thumb plus" "name name thumb plus"; align-items: center; gap: 4px 14px; padding: 16px 18px; }
  .vpanel-thumb { display: block; grid-area: thumb; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; object-position: 50% 50%; opacity: 0.9; }
  .vpanel.is-open .vpanel-thumb { display: none; }
  .vpanels.is-live .vpanel-plus { align-self: center; }
  .vpanel-mimg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
  .vpanel-body { padding: 0 18px 22px; gap: 14px; }
  .vpanels.is-live .vpanel:not(.is-open) .vpanel-img { display: none; }
}

/* ======================================================================
   v3.7: the six steps as a rail.
   Base (phones, no JS, reduced motion): a native swipeable row with snap.
   .rail.is-pinned (desktop + motion): the section pins and scrolling moves the row sideways.
   ====================================================================== */
.rail { background: var(--paper); overflow: hidden; }
.rail-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px 48px; align-items: end; }
.rail-head h2 { margin-top: 20px; max-width: 14ch; }
.rail-meta { display: grid; gap: 18px; justify-items: start; }
.rail-meta .section-intro { margin-top: 0; }
.rail-progress { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 48px; border-top: 2px solid var(--rule); }
.rail-progress-bar { position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--red); transform-origin: left; transform: scaleX(0.1667); transition: transform 300ms var(--ease-out); }
.rail-progress li { padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--mute); display: flex; gap: 8px; align-items: baseline; transition: color 250ms; }
.rail-progress li span { font-size: 11px; letter-spacing: 0.1em; color: var(--mute); }
.rail-progress li.is-on { color: var(--ink); }
.rail-progress li.is-on span { color: var(--action); }

.rail-viewport { margin-top: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0 8px; outline: none; overscroll-behavior-x: contain; }
.rail-viewport::-webkit-scrollbar { display: none; }
.rail-viewport:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.rail-track { display: flex; gap: 16px; padding: 0 var(--gutter); width: max-content; }
.rail-card { flex: 0 0 min(80vw, 360px); scroll-snap-align: start; scroll-margin-left: var(--gutter); background: #fff; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 400ms var(--ease-out), box-shadow 400ms; }
.rail-img { margin: 0; aspect-ratio: 4 / 3; background: #1a1a1a; overflow: hidden; }
.rail-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.04); transition: transform 900ms var(--ease-out); }
.rail-card.is-on .rail-img img { transform: scale(1); }
.rail-body { padding: 22px 24px 26px; display: grid; gap: 10px; align-content: start; }
.rail-num { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--action); }
.rail-body h3 { font-size: clamp(30px, 3vw, 44px); letter-spacing: -0.035em; line-height: 1; font-weight: 800; }
.rail-q { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; }
.rail-text { color: var(--mute); font-size: 16px; }
.rail-end { background: var(--ink); color: #fff; border-color: var(--ink); justify-content: flex-end; gap: 28px; padding: 32px 28px; }
.rail-end-line { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.rail-end .button { align-self: flex-start; }
.rail-controls { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.rail-hint { margin-left: 8px; font-size: 13px; color: var(--mute); }
.rail-controls .room-btn[disabled] { opacity: 0.3; cursor: default; }

/* Desktop with motion: the row is driven by vertical scroll while the section is pinned. */
.rail.is-pinned .rail-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.rail.is-pinned .rail-viewport { overflow: visible; scroll-snap-type: none; }
.rail.is-pinned .rail-card { flex-basis: clamp(320px, 27vw, 400px); }
.rail.is-pinned .rail-card:not(.is-on):not(.rail-end) { box-shadow: none; }
.rail.is-pinned .rail-card.is-on { box-shadow: 0 24px 50px rgba(0,0,0,0.12); transform: translateY(-6px); }
.rail.is-pinned .rail-controls { display: none; }
.rail.is-pinned { padding: 0; }
.rail.is-pinned .rail-progress { margin-top: 32px; }
.rail.is-pinned .rail-img { aspect-ratio: 16 / 11; }

@media (max-width: 900px) {
  .rail-head { grid-template-columns: 1fr; }
  .rail-progress { grid-template-columns: repeat(6, 1fr); }
  .rail-progress li { font-size: 0; gap: 0; }
  .rail-progress li span { font-size: 11px; }
}
/* Shorter laptop screens: tighten the pinned rail so everything fits in one view. */
@media (min-width: 1001px) and (max-height: 860px) {
  .rail.is-pinned .rail-head h2 { font-size: clamp(32px, 3.6vw, 52px); margin-top: 12px; }
  .rail.is-pinned .rail-meta .section-intro { font-size: 17px; }
  .rail.is-pinned .rail-progress { margin-top: 20px; }
  .rail.is-pinned .rail-viewport { margin-top: 20px; }
  .rail.is-pinned .rail-img { aspect-ratio: 16 / 9; }
  .rail.is-pinned .rail-card { flex-basis: clamp(300px, 24vw, 360px); }
  .rail.is-pinned .rail-body { padding: 16px 20px 18px; gap: 6px; }
  .rail.is-pinned .rail-body h3 { font-size: clamp(26px, 2.4vw, 34px); }
  .rail.is-pinned .rail-q { font-size: 16px; }
  .rail.is-pinned .rail-text { font-size: 14px; }
}
@media (min-width: 1001px) and (max-height: 700px) {
  .rail.is-pinned .rail-text { display: none; }
  .rail.is-pinned .rail-meta .section-intro { display: none; }
}

/* ======================================================================
   v3.8: Skills + Environment as a four-outcome picture
   ====================================================================== */
.env .env-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
.env .env-copy > * + * { margin-top: 24px; }
.env-intro { color: var(--mute); font-size: 18px; }
.monday { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; border-top: 1px solid var(--rule); }
.monday li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.015em; position: relative; transition: color 400ms; }
.monday li::after { content: ""; position: absolute; left: 0; top: 50%; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out); }
.env[data-state="01"] .monday li, .env[data-state="11"] .monday li { color: var(--mute); }
.env[data-state="01"] .monday li::after, .env[data-state="11"] .monday li::after { transform: scaleX(0.78); }
.env[data-state="01"] .monday li:nth-child(2)::after, .env[data-state="11"] .monday li:nth-child(2)::after { transition-delay: 70ms; }
.env[data-state="01"] .monday li:nth-child(3)::after, .env[data-state="11"] .monday li:nth-child(3)::after { transition-delay: 140ms; }
.env[data-state="01"] .monday li:nth-child(4)::after, .env[data-state="11"] .monday li:nth-child(4)::after { transition-delay: 210ms; }

.env-stage { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #151515; }
.env-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 700ms var(--ease-out), transform 1200ms var(--ease-out); }
.env[data-state="00"] .env-shot[data-state="00"], .env[data-state="10"] .env-shot[data-state="10"], .env[data-state="01"] .env-shot[data-state="01"], .env[data-state="11"] .env-shot[data-state="11"] { opacity: 1; transform: scale(1); }
.env-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,12,12,0.85) 0%, rgba(12,12,12,0) 42%); pointer-events: none; }
.env-caption { position: absolute; left: 24px; right: 24px; bottom: 20px; z-index: 1; display: grid; gap: 4px; color: #fff; margin: 0; }
.env-caption .switch-result { font-size: clamp(26px, 3vw, 44px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; max-width: none; }
.env[data-state="11"] .env-caption .switch-result { color: var(--red); }
.env-why { font-size: 15px; color: rgba(255,255,255,0.8); }

.env-map { display: grid; grid-template-columns: 22px 1fr 1fr; grid-template-rows: auto auto auto; gap: 8px; margin-top: 16px; }
.env-map button { min-height: 52px; padding: 10px 14px; text-align: left; border: 1px solid var(--rule); border-radius: 8px; background: #fff; font-size: 14px; color: var(--mute); transition: background-color 200ms, color 200ms, border-color 200ms; }
.env-map button b { color: var(--ink); font-weight: 700; }
.env-map button:hover { border-color: var(--ink); }
.env-map button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: rgba(255,255,255,0.75); }
.env-map button[aria-pressed="true"] b { color: #fff; }
.env-map button[data-key="11"][aria-pressed="true"] { background: var(--action); border-color: var(--action); }
.env-map button[data-key="01"] { grid-column: 2; grid-row: 1; }
.env-map button[data-key="11"] { grid-column: 3; grid-row: 1; }
.env-map button[data-key="00"] { grid-column: 2; grid-row: 2; }
.env-map button[data-key="10"] { grid-column: 3; grid-row: 2; }
.env-axis { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.env-axis-y { grid-column: 1; grid-row: 1 / span 2; writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; justify-self: center; }
.env-axis-x { grid-column: 2 / span 2; grid-row: 3; text-align: center; }
.env-stage-wrap .switch-note { margin-top: 14px; font-weight: 600; }
@media (max-width: 900px) {
  .env .env-layout { grid-template-columns: 1fr; }
  .monday { grid-template-columns: 1fr 1fr; }
  .env-stage { aspect-ratio: 16 / 11; }
  .env-caption { left: 16px; right: 16px; bottom: 14px; }
}
/* Caption sits in its own band under the picture, so the subject is never covered. */
.env-stage { aspect-ratio: auto; }
.env-stage::after { display: none; }
.env-shots { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.env-caption { position: static; padding: 18px 22px 20px; }
@media (max-width: 900px) { .env-shots { aspect-ratio: 16 / 10; } .env-caption { padding: 14px 16px 16px; } }

/* ======================================================================
   v3.9: Meshka 360 as a one-tap sorter that builds a map
   ====================================================================== */
.s360 .s360-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; position: relative; z-index: 2; }
.s360-copy > * + * { margin-top: 24px; }
.s360-copy h2 { margin-top: 18px; }
.s360-intro { color: rgba(255,255,255,0.75); font-size: 18px; }
body:not(.js) .s360-sorter { display: none; }
.s360-sorter { display: grid; gap: 14px; }
.s360-count { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.s360-count b { color: #fff; }
.s360-card { background: #fff; color: var(--ink); border-radius: 12px; padding: 22px 24px 26px; box-shadow: 0 18px 40px rgba(0,0,0,0.35); display: grid; gap: 8px; min-height: 132px; align-content: start; }
.s360-card-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); }
.s360-item { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.s360-ask { font-weight: 600; color: rgba(255,255,255,0.8); }
.s360-verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.s360-v { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.25); border-radius: 10px; color: #fff; font-weight: 700; font-size: 16px; transition: background-color 200ms, border-color 200ms, transform 200ms var(--ease-out); }
.s360-v:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); }
.s360-v:hover .s360-v-count { background: var(--paper); color: var(--ink); }
.s360-v-count { min-width: 26px; height: 26px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); font-variant-numeric: tabular-nums; }
.s360-v.has-items .s360-v-count { background: var(--red); color: #fff; }
.s360-v[disabled] { opacity: 0.4; pointer-events: none; }
.s360-done-line { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.s360-done[hidden] { display: none; }
.s360-done { display: grid; gap: 10px; justify-items: start; }

.s360-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.s360-tile { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; padding: 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; background: rgba(255,255,255,0.03); transition: border-color 300ms, background-color 300ms; min-height: 108px; }
.s360-tile img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.s360-tile-body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.s360-tile-name { font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; letter-spacing: -0.025em; display: flex; align-items: center; gap: 10px; }
.s360-tile-name::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; }
.s360-tile-hint { font-size: 14px; color: rgba(255,255,255,0.65); }
.s360-tile-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.s360-tile-items:empty { display: none; }
.s360-tile-items button { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--ink); text-align: left; line-height: 1.25; min-height: 30px; }
.s360-tile-items button:hover { background: var(--paper); text-decoration: line-through; }
.s360-tile.is-hit { border-color: var(--red); background: rgba(217,75,53,0.08); }
.s360-fly { position: fixed; z-index: 50; pointer-events: none; background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,0.3); white-space: nowrap; }
@media (max-width: 900px) {
  .s360 .s360-layout { grid-template-columns: 1fr; }
  .s360-verdicts { grid-template-columns: repeat(2, 1fr); }
  .s360-map { grid-template-columns: 1fr; }
  .s360-tile { grid-template-columns: 64px 1fr; min-height: 0; }
  .s360-tile img { width: 64px; height: 64px; }
}
.s360-card[hidden], .s360-ask[hidden], .s360-count[hidden] { display: none; }

/* ======================================================================
   v4.0: Meshka 360 as "what we look at" + an example of the map you get
   ====================================================================== */
.m360 .m360-layout { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 88px); align-items: start; position: relative; z-index: 2; }
.m360-copy > * + * { margin-top: 26px; }
.m360-copy h2 { margin-top: 18px; }
.m360-intro { color: rgba(255,255,255,0.78); font-size: 19px; }
.m360-label { font-weight: 700; color: #fff; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 12px; max-width: none; }
.m360-label span { font-weight: 400; font-size: 14px; color: rgba(255,255,255,0.6); }
.m360-lenses { display: flex; flex-wrap: wrap; gap: 8px; }
.m360-lenses button { font-size: 14px; font-weight: 600; padding: 9px 14px; min-height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); color: #fff; transition: background-color 200ms, color 200ms, border-color 200ms; }
.m360-lenses button:hover { border-color: #fff; }
.m360-lenses button[aria-pressed="true"] { background: var(--action); border-color: var(--action); }
.m360-steps { display: grid; border-top: 1px solid rgba(255,255,255,0.15); }
.m360-steps li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.15); font-weight: 600; font-size: 17px; color: rgba(255,255,255,0.9); }
.m360-steps li span { font-size: 12px; letter-spacing: 0.1em; color: var(--red); width: 24px; flex: none; }

.m360-doc { background: #fff; color: var(--ink); border-radius: 14px; padding: clamp(22px, 2.6vw, 34px); box-shadow: 0 30px 70px rgba(0,0,0,0.45); transform: rotate(-0.6deg); }
.m360-doc-head { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.m360-doc-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--action); }
.m360-doc-head h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.03em; line-height: 1.05; }
.m360-doc-head p { font-size: 14px; color: var(--mute); }
.m360-rows { display: grid; }
.m360-row { border-bottom: 1px solid var(--rule); transition: opacity 300ms, background-color 300ms; }
.m360-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px 92px 1fr auto 26px; align-items: center; gap: 14px; padding: 12px 4px; min-height: 64px; }
.m360-row summary::-webkit-details-marker { display: none; }
.m360-row img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.m360-verdict { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.m360-verdict::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.m360-finding { font-weight: 600; font-size: 16px; line-height: 1.3; }
.m360-tags { font-size: 12px; color: var(--mute); white-space: nowrap; }
.m360-plus { position: relative; width: 26px; height: 26px; border: 1px solid var(--rule); border-radius: 50%; }
.m360-plus::before, .m360-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 250ms var(--ease-out); }
.m360-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.m360-row details[open] .m360-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.m360-row details > p { padding: 0 4px 16px calc(52px + 14px + 4px); color: var(--mute); font-size: 15px; max-width: none; }
.m360-row summary:hover .m360-finding { color: var(--action); }
.m360-rows.is-filtered .m360-row { opacity: 0.32; }
.m360-rows.is-filtered .m360-row.is-match { opacity: 1; background: #fff4f2; }
.m360-doc-foot { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--mute); }
@media (max-width: 1100px) {
  .m360-row summary { grid-template-columns: 48px 1fr 26px; grid-template-areas: "img verdict plus" "img finding plus" "img tags plus"; gap: 2px 14px; }
  .m360-row img { grid-area: img; width: 48px; height: 48px; align-self: start; }
  .m360-verdict { grid-area: verdict; font-size: 16px; }
  .m360-finding { grid-area: finding; }
  .m360-tags { grid-area: tags; }
  .m360-plus { grid-area: plus; }
  .m360-row details > p { padding-left: calc(48px + 14px + 4px); }
}
@media (max-width: 900px) {
  .m360 .m360-layout { grid-template-columns: 1fr; }
  .m360-doc { transform: none; }
}

/* ======================================================================
   v4.1: Sound familiar as photo cards; each tick says where it points,
   the result follows you as a sticky bar on tablets and phones
   ====================================================================== */
.sf .symptom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sf .symptom { min-height: 0; height: 100%; padding: 0; gap: 0; justify-content: flex-start; overflow: hidden; border-radius: 12px; }
.sf .symptom:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.08); }
.sf .symptom-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #e9e7e3; }
.sf .symptom-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out), filter 300ms; }
.sf .symptom:hover .symptom-img img { transform: scale(1.04); }
.sf .symptom-check { top: 12px; right: 12px; left: auto; width: 30px; height: 30px; margin: 0; background: rgba(255,255,255,0.85); border: 1.5px solid rgba(0,0,0,0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sf .symptom-check::after { left: 10px; top: 5px; width: 7px; height: 13px; }
.sf .symptom-stamp { position: absolute; left: 12px; bottom: 12px; padding: 6px 11px 5px; border: 2px solid var(--red); border-radius: 6px; color: var(--red); background: rgba(255,255,255,0.92); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-6deg); opacity: 0; transition: opacity 200ms; pointer-events: none; }
.sf .symptom-body { display: grid; gap: 8px; padding: 16px 18px 18px; flex: 1; align-content: start; transition: background-color 220ms, color 220ms; }
.sf .symptom-text { padding-right: 0; font-size: clamp(16px, 1.3vw, 19px); }
.sf .symptom-points { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.7); opacity: 0; transform: translateY(6px); transition: opacity 250ms, transform 300ms var(--ease-out); }
.sf .symptom-points b { color: #fff; font-weight: 800; }
.sf .symptom-points b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 2px; border-radius: 50%; background: var(--red); }
.sf .symptom[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sf .symptom[aria-pressed="true"] .symptom-body { background: var(--ink); color: #fff; }
.sf .symptom[aria-pressed="true"] .symptom-stamp,
.sf .symptom[aria-pressed="true"] .symptom-points { opacity: 1; transform: none; }
.sf .symptom[aria-pressed="true"] .symptom-stamp { transform: rotate(-6deg); }
.sf .symptom[aria-pressed="true"] .symptom-check { background: var(--red); border-color: var(--red); }

/* Result panel: the practice picture appears once something is ticked */
.diagnosis-pic { margin: -28px -28px 0; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease-out); overflow: hidden; border-radius: 12px 12px 0 0; }
.diagnosis-pic img { min-height: 0; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
@media (min-width: 1101px) and (max-height: 760px) { .diagnosis-pic { display: none; } }
.diagnosis.has-result .diagnosis-pic { grid-template-rows: 1fr; }
.diagnosis .cta-short { display: none; }

@media (max-width: 1100px) {
  .sf .symptom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The result rides along at the bottom of the screen while the cards are in view */
  .sf .diagnosis { position: sticky; top: auto; bottom: 12px; z-index: 20; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 12px 12px 12px 18px; border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,0.28); }
  .sf .diagnosis-pic, .sf .diagnosis-label, .sf .diagnosis-meter, .sf .diagnosis-areas, .sf .diagnosis-link { display: none; }
  .sf .diagnosis-count { font-size: 30px; grid-row: 1; }
  .sf .diagnosis-count span { font-size: 15px; }
  .sf .diagnosis-text { font-size: 15px; line-height: 1.25; min-height: 0; grid-row: 1; }
  .sf .diagnosis-cta { grid-row: 1; padding: 11px 16px; min-height: 44px; font-size: 15px; }
  .sf .diagnosis .cta-long { display: none; }
  .sf .diagnosis .cta-short { display: inline; }
}
@media (max-width: 620px) {
  .sf .symptom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sf .symptom { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
  .sf .symptom-body { padding: 12px 12px 14px; gap: 6px; }
  .sf .symptom-text { font-size: 15px; line-height: 1.25; }
  .sf .symptom-points { font-size: 12px; }
  .sf .symptom-check { top: 8px; right: 8px; margin: 0; width: 26px; height: 26px; }
  .sf .symptom-check::after { left: 8px; top: 4px; width: 6px; height: 11px; }
  .sf .symptom-stamp { left: 8px; bottom: 8px; font-size: 11px; padding: 4px 8px 3px; }
  /* Nine cards in two columns: the last one goes wide, picture beside the words */
  .sf .symptom-grid li:last-child { grid-column: 1 / -1; }
  .sf .symptom-grid li:last-child .symptom { flex-direction: row; }
  .sf .symptom-grid li:last-child .symptom-img { width: 46%; flex: none; }
  .sf .symptom-grid li:last-child .symptom-body { align-content: center; }
  .sf .diagnosis { padding: 10px 10px 10px 14px; gap: 2px 10px; }
  .sf .diagnosis-count { font-size: 26px; }
  .sf .diagnosis-text { font-size: 14px; }
}

/* ======================================================================
   v4.2: Sound familiar, shorter. Words sit on the picture, so a card is
   one square; tablets and phones get a two-row swipe strip.
   ====================================================================== */
.sf .symptom { position: relative; display: block; aspect-ratio: 1 / 1; height: auto; border: 0; background: #e9e7e3; }
.sf .symptom-img { position: absolute; inset: 0; aspect-ratio: auto; }
.sf .symptom-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,0) 38%, rgba(17,17,17,0.55) 62%, rgba(17,17,17,0.9) 100%); pointer-events: none; transition: opacity 250ms; }
.sf .symptom-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 16px 16px; background: none !important; color: #fff; }
.sf .symptom-text { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.22; text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.sf .symptom-points { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 1; transform: none; }
.sf .symptom-check { z-index: 3; }
.sf .symptom-stamp { z-index: 3; left: 12px; top: 12px; bottom: auto; transform: rotate(-4deg); white-space: nowrap; }
.sf .symptom-stamp::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--red); }
.sf .symptom[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--red); border: 0; }
.sf .symptom[aria-pressed="true"] .symptom-stamp { transform: rotate(-4deg); }
.sf .symptom[aria-pressed="true"] .symptom-img img { filter: contrast(1.05); }
.sf-strip-foot { display: none; }

@media (max-width: 1100px) {
  /* Two rows that swipe sideways: the whole set fits in about two card heights */
  .sf .symptom-grid { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: min(42vw, 236px); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter, 16px); margin: 0 calc(-1 * var(--gutter, 16px)); padding: 4px var(--gutter, 16px) 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sf .symptom-grid::-webkit-scrollbar { display: none; }
  .sf .symptom-grid li { scroll-snap-align: start; min-width: 0; }
  .sf .symptom-grid li:last-child { grid-column: auto; }
  .sf .symptom-grid li:last-child .symptom { flex-direction: column; }
  .sf .symptom-grid li:last-child .symptom-img { width: auto; }
  .sf .symptom:hover { transform: none; }
  .sf-strip-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
  .sf-progress { position: relative; flex: 1; height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
  .sf-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: var(--ink); }
  .sf-hint { font-size: 13px; font-weight: 600; color: var(--muted, #6b6b6b); white-space: nowrap; transition: opacity 250ms; }
  .sf-hint span { display: inline-block; animation: sf-nudge 1.6s var(--ease-out) infinite; }
  .sf-strip-foot.is-end .sf-hint { opacity: 0; }
  @keyframes sf-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
  /* The result sits right under the strip now, so it no longer needs to follow you */
  .sf .diagnosis { position: static; margin-top: 4px; }
  .sf .symptoms-layout { gap: 14px; margin-top: 28px; }
}
@media (max-width: 620px) {
  .sf .symptom-body { padding: 0 10px 10px; }
  .sf .symptom-text { font-size: 13.5px; line-height: 1.2; }
  .sf .symptom-stamp { left: 8px; top: 8px; font-size: 10.5px; padding: 3px 7px 2px; }
  .sf .symptom-stamp .stamp-long { display: none; }
  .sf .symptom-check { top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .sf-hint span { animation: none; } }
body.static .sf-hint span { animation: none; }

/* ======================================================================
   v4.3: home founder as "seats we have sat in"; contact offers the
   first thing to change as one-tap links into the form
   ====================================================================== */
.about-copy .seats-intro { color: var(--mute); font-size: 17px; margin-top: 20px; }
.seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.seat { width: 100%; height: 100%; display: grid; justify-items: start; gap: 14px; padding: 16px 14px 14px; text-align: left; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; transition: background-color 220ms, color 220ms, border-color 220ms, transform 220ms var(--ease-out); }
.seat:hover { border-color: var(--ink); transform: translateY(-2px); }
.seat-icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease-out); }
.seat.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.seat.is-on .seat-icon { stroke: var(--red); transform: translateY(-2px); }
.about-copy .seat-lesson { position: relative; margin-top: 18px; min-height: 2.6em; padding: 20px 22px 20px 52px; background: var(--paper); border-radius: 10px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); }
.seat-lesson-mark { position: absolute; left: 18px; top: 10px; font-size: 48px; line-height: 1; color: var(--red); font-weight: 800; }
.seat-lesson-text { display: block; }
.about-copy blockquote { font-size: clamp(18px, 1.7vw, 22px); color: var(--mute); border-left-width: 3px; }
@media (max-width: 1100px) { .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .seat { grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 12px; min-height: 52px; font-size: 14px; }
  .seat-icon { width: 22px; height: 22px; }
  .about-copy .seat-lesson { padding: 16px 16px 16px 44px; font-size: 18px; }
  .seat-lesson-mark { left: 14px; top: 8px; font-size: 40px; }
}

.need-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.need-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; color: var(--ink); transition: background-color 200ms, color 200ms, border-color 200ms, transform 200ms var(--ease-out); }
.need-chip span { transition: transform 250ms var(--ease-out); }
.need-chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.need-chip:hover span { transform: translateX(3px); }
.need-chip-360 { border-style: dashed; }
.contact .contact-layout { align-items: center; }
@media (max-width: 620px) {
  .need-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .need-chip { justify-content: space-between; padding: 10px 12px; font-size: 14px; border-radius: 12px; height: 100%; }
  .need-chips li:last-child { grid-column: 1 / -1; }
}

/* ======================================================================
   v5.0: the Meshka 360 page (lens wheel, how it runs, the map,
   answers wired to practices, questions)
   ====================================================================== */
.lenses { background: var(--paper); }
.lenses-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.lenses-copy h2 { margin-top: 18px; }
.lenses-copy .section-intro { margin-top: 18px; }
.lens-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.lens-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background-color 200ms, color 200ms, border-color 200ms; white-space: nowrap; }
.lens-chip span { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; transition: color 200ms; }
.lens-chip:hover { border-color: var(--ink); }
.lens-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.lens-chip.is-on span { color: var(--red); }

.wheel { position: relative; width: 100%; max-width: 480px; justify-self: center; }
.wheel-svg { display: block; width: 100%; height: auto; overflow: visible; }
.wheel-seg { fill: #fff; stroke: var(--rule); stroke-width: 1; cursor: pointer; transition: fill 250ms; }
.wheel-seg:hover { fill: #efede8; }
.wheel-seg.is-on { fill: var(--ink); stroke: var(--ink); }
.wheel-num { font-size: 13px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; font-variant-numeric: tabular-nums; }
.wheel-num.is-on { fill: #fff; }
.wheel-hub { fill: #fff; stroke: var(--rule); }
.wheel-pointer { position: absolute; left: 50%; top: -14px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 14px solid var(--red); transform: translateX(-50%); }
.wheel-center { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; text-align: center; pointer-events: none; }
.wheel-count { font-size: 13px; font-weight: 600; color: var(--mute); letter-spacing: 0.06em; }
.wheel-count b { color: var(--red); }
.wheel-name { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.wheel-q { display: block; position: relative; margin-top: 22px; padding: 18px 20px 18px 50px; background: #fff; border-radius: 12px; font-size: 18px; font-weight: 600; line-height: 1.35; min-height: 4.2em; }
.wheel-q::before { content: "“"; position: absolute; left: 16px; top: 8px; font-size: 44px; font-weight: 800; line-height: 1; color: var(--red); }
.wheel-nav { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
@media (max-width: 900px) {
  .lenses-layout { grid-template-columns: minmax(0, 1fr); }
  .wheel { max-width: 380px; margin-top: 8px; }
  .lens-chips { flex-wrap: nowrap; overflow-x: auto; margin: 22px calc(-1 * var(--gutter)) 0; padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .lens-chips::-webkit-scrollbar { display: none; }
  .wheel-q { font-size: 16px; padding: 14px 16px 14px 44px; }
}

.run-track { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.run-line { position: absolute; left: 0; right: 0; top: 17px; width: 100%; height: 4px; }
.run-line path { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.run-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); position: relative; }
.run-step { display: grid; gap: 18px; align-content: start; }
.run-num { width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; box-shadow: 0 0 0 6px #fff; }
.run-img { margin: 0; border-radius: 12px; overflow: hidden; background: #e9e7e3; aspect-ratio: 1 / 1; }
.run-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.run-step h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.025em; }
.run-step p { margin-top: 8px; color: var(--mute); font-size: 17px; max-width: 34ch; }
@media (max-width: 760px) {
  .run-line { display: none; }
  .run-steps { grid-template-columns: 1fr; gap: 14px; }
  .run-step { grid-template-columns: 38% 1fr; grid-template-areas: "img text"; gap: 14px; align-items: center; position: relative; }
  .run-step .run-img { grid-area: img; }
  .run-step > div { grid-area: text; }
  .run-num { position: absolute; left: 8px; top: 8px; z-index: 2; width: 30px; height: 30px; box-shadow: none; }
  .run-step p { font-size: 15px; }
}

.m360-get { background: var(--paper); }
.get-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.get-copy h2 { margin-top: 18px; }
.get-copy .section-intro { margin-top: 18px; }
.get-list { margin-top: 26px; display: grid; gap: 10px; }
.get-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 17px; padding: 14px 16px; background: #fff; border-radius: 10px; }
.get-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.m360-get .m360-doc { box-shadow: 0 24px 60px rgba(0,0,0,0.12); }
@media (max-width: 900px) { .get-layout { grid-template-columns: minmax(0, 1fr); } .m360-get .m360-doc { transform: none; } }

.after { background: var(--ink); color: #fff; }
.split-heading-light .section-intro { color: rgba(255,255,255,0.7); }
.links-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(48px, 12vw, 200px) minmax(0, 1.1fr); margin-top: clamp(36px, 5vw, 60px); }
.links-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.links-svg path { fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 1.5; transition: stroke 250ms, opacity 250ms; }
.links-board.has-active .links-svg path { opacity: 0.35; }
.links-svg path.is-on { stroke: var(--red); stroke-width: 2.5; opacity: 1 !important; }
.links-col { display: grid; gap: 10px; align-content: center; }
.links-verdicts { grid-column: 1; }
.links-practices { grid-column: 3; }
.link-verdict, .link-practice { width: 100%; display: grid; gap: 2px; text-align: left; padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #fff; font: inherit; cursor: pointer; transition: background-color 220ms, border-color 220ms, color 220ms, transform 220ms var(--ease-out); }
.link-verdict b, .link-practice b { font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; letter-spacing: -0.02em; }
.link-verdict span, .link-practice span { font-size: 14px; color: rgba(255,255,255,0.6); }
.link-verdict:hover, .link-practice:hover { border-color: rgba(255,255,255,0.5); }
.link-verdict.is-on { background: var(--red); border-color: var(--red); }
.link-verdict.is-on span { color: rgba(255,255,255,0.9); }
.link-practice.is-on { background: #fff; color: var(--ink); border-color: #fff; transform: translateX(-4px); }
.link-practice.is-on span { color: var(--mute); }
.links-board.has-active .link-practice:not(.is-on) { opacity: 0.55; }
@media (max-width: 620px) {
  .link-verdict, .link-practice { padding: 11px 12px; }
  .link-verdict span, .link-practice span { font-size: 12px; }
  .link-verdict b, .link-practice b { font-size: 16px; }
}

.faq-layout { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.faq-layout h2 { margin-top: 18px; }
.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; letter-spacing: -0.015em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--action); }
.faq-plus { position: relative; flex: none; width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: 50%; transition: background-color 200ms, border-color 200ms; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 250ms var(--ease-out); }
.faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-plus { background: var(--ink); border-color: var(--ink); }
.faq-item[open] .faq-plus::before, .faq-item[open] .faq-plus::after { background: #fff; }
.faq-item[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item p { padding: 0 48px 22px 0; color: var(--mute); font-size: 17px; max-width: 60ch; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: minmax(0, 1fr); } }
.wheel-dial { position: relative; }
.lenses-copy, .wheel { min-width: 0; }

/* ======================================================================
   v5.1: practice pages. Shared: bolder signals and a numbered list of
   the work. Signature sections (.sig) give each practice its own idea.
   ====================================================================== */
.page-practice .signal-list[data-checklist] { border-top: 0; display: grid; gap: 10px; }
.page-practice .signal-list .check-item { padding: 22px 64px 22px 22px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; font-size: clamp(20px, 1.9vw, 26px); }
.page-practice .signal-list .check-item::before { left: auto; right: 20px; width: 28px; height: 28px; margin-top: -14px; }
.page-practice .signal-list .check-item::after { left: auto; right: 30px; margin-top: -8px; width: 6px; height: 11px; }
.page-practice .signal-list .check-item[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.page-practice .acc { counter-reset: acc; }
.page-practice .acc-item summary::before { counter-increment: acc; content: counter(acc, decimal-leading-zero); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--red); width: 30px; flex: none; }
.page-practice .acc-item[open] { background: var(--paper); border-radius: 12px; border-bottom-color: transparent; margin: 4px 0; }
.page-practice .acc-item[open] summary { padding-left: 16px; padding-right: 16px; }
.page-practice .acc-item[open] > p { padding: 0 16px 22px 62px; }

.sig { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.sig .section-intro { color: rgba(255,255,255,0.7); }

/* Transform: follow one request */
.flow { margin-top: clamp(32px, 5vw, 56px); }
.flow-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.flow-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.08); }
.flow-switch button { min-height: 44px; padding: 10px 22px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.7); background: transparent; border: 0; cursor: pointer; transition: background-color 250ms, color 250ms; }
.flow-switch button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.flow[data-state="after"] .flow-switch button[aria-pressed="true"] { background: var(--red); color: #fff; }
.flow-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.flow-stats div { display: flex; align-items: baseline; gap: 8px; }
.flow-stats dd { order: -1; margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.flow-stats dt { font-size: 14px; color: rgba(255,255,255,0.6); }
.flow-track { position: relative; margin-top: clamp(32px, 4vw, 48px); }
.flow-line { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: rgba(255,255,255,0.18); }
.flow-token { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px rgba(217,75,53,0.25); opacity: 0; z-index: 3; pointer-events: none; }
.flow-stops { display: flex; position: relative; }
.flow-stop { flex: 1 1 0; min-width: 0; max-width: 400px; display: grid; justify-items: start; gap: 6px; padding-right: 12px; overflow: hidden; transition: flex-grow 600ms var(--ease-out), max-width 600ms var(--ease-out), opacity 400ms, padding 600ms; }
.flow-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); border: 2px solid rgba(255,255,255,0.4); position: relative; z-index: 2; transition: border-color 250ms, background-color 250ms; }
.flow-stop.is-done .flow-dot { border-color: #fff; }
.flow-stop.is-here .flow-dot { background: #fff; }
.flow-label { margin-top: 10px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.2; letter-spacing: -0.01em; }
.flow-tag { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.3; }
.flow-wait .flow-tag::before, .flow-loop .flow-tag::before, .flow-chase .flow-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--red); vertical-align: 1px; }
.flow-loop .flow-dot { border-style: dashed; }
.flow[data-state="after"] .flow-stop:not([data-keep]) { flex-grow: 0; max-width: 0; padding-right: 0; opacity: 0; }
.flow[data-state="after"] .flow-line { background: rgba(255,255,255,0.35); }
.flow-note { margin-top: clamp(28px, 4vw, 44px); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.015em; }
@media (max-width: 760px) {
  .flow-line { left: 13px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .flow-stops { flex-direction: column; }
  .flow-stop { max-width: none; max-height: 140px; grid-template-columns: 28px 1fr; grid-template-areas: "dot label" "dot tag"; column-gap: 14px; row-gap: 0; padding: 0 0 16px; transition: max-height 600ms var(--ease-out), opacity 400ms, padding 600ms; }
  .flow-dot { grid-area: dot; }
  .flow-label { grid-area: label; margin-top: 3px; }
  .flow-tag { grid-area: tag; }
  .flow[data-state="after"] .flow-stop:not([data-keep]) { max-height: 0; padding-bottom: 0; }
  .flow-stats { gap: 6px 18px; }
  .flow-stats dd { font-size: 26px; }
}

/* ---- v5.2: practice signatures: AI task quiz, Impact dashboard, Grow bucket, People curve ---- */
.sig .split-heading .eyebrow, .sig .eyebrow-light { color: rgba(255,255,255,0.7); }
.sig h2 { margin-top: 18px; }
.sig .section-intro { margin-top: 18px; }

.aiq-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.aiq-score { margin-top: 26px; font-size: 17px; color: rgba(255,255,255,0.7); }
.aiq-score b { font-size: 28px; color: #fff; font-weight: 800; margin-right: 4px; }
.aiq-copy .button { margin-top: 26px; }
.aiq-card { background: #fff; color: var(--ink); border-radius: 16px; padding: clamp(22px, 2.6vw, 34px); min-height: 250px; display: grid; align-content: start; gap: 18px; }
.aiq-progress { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; color: var(--mute); }
.aiq-progress b { color: var(--ink); }
.aiq-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.aiq-bar i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease-out); }
.aiq-task { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.aiq-feedback { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rule); }
.aiq-verdict { font-size: 19px; font-weight: 800; color: var(--action); }
.aiq-why { color: var(--mute); font-size: 16px; }
.aiq-next { justify-self: start; margin-top: 8px; }
.aiq-done-title { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; }
.aiq-done-text { color: var(--mute); margin-top: 6px; }
.aiq-again { margin-top: 12px; background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
.aiq-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.aiq-opt { position: relative; display: grid; gap: 4px; text-align: left; padding: 14px 14px 16px; min-height: 96px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); color: #fff; font: inherit; cursor: pointer; transition: background-color 220ms, border-color 220ms, transform 220ms var(--ease-out), opacity 220ms; }
.aiq-opt b { font-size: 18px; font-weight: 800; }
.aiq-opt span { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.3; }
.aiq-opt:hover:not(:disabled) { border-color: #fff; transform: translateY(-2px); }
.aiq-opt:disabled { cursor: default; opacity: 0.5; }
.aiq-opt.is-answer { opacity: 1; background: #fff; color: var(--ink); border-color: #fff; }
.aiq-opt.is-answer span { color: var(--mute); }
.aiq-opt.is-wrong { opacity: 1; border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.aiq-opt.is-right { background: var(--red); border-color: var(--red); color: #fff; }
.aiq-opt.is-right span { color: rgba(255,255,255,0.85); }
.aiq-n { position: absolute; right: 12px; top: 12px; font-style: normal; font-size: 13px; font-weight: 800; min-width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,0.12); }
.aiq-opt.is-answer .aiq-n { background: var(--ink); color: #fff; }
@media (max-width: 900px) { .aiq-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .aiq-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aiq-opt { min-height: 80px; } .aiq-card { min-height: 220px; } }

.dash-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dash-qs { display: grid; gap: 8px; margin-top: 26px; }
.dash-q { width: 100%; text-align: left; min-height: 52px; padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: background-color 220ms, border-color 220ms, color 220ms; }
.dash-q:hover { border-color: rgba(255,255,255,0.5); }
.dash-q.is-on { background: #fff; color: var(--ink); border-color: #fff; }
.dash-screen { margin: 0; background: #fff; color: var(--ink); border-radius: 16px; padding: clamp(18px, 2.4vw, 30px); box-shadow: 0 30px 70px rgba(0,0,0,0.4); }
.dash-title { font-size: clamp(20px, 1.9vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.dash-chart { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.ch-grid { stroke: var(--rule); stroke-width: 1; }
.ch-axis { font-size: 12px; fill: var(--mute); font-family: inherit; }
.ch-axis-strong { fill: var(--ink); font-weight: 600; font-size: 13px; }
.ch-val { font-size: 12px; font-weight: 700; fill: var(--ink); font-family: inherit; }
.ch-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { fill: rgba(17,17,17,0.05); }
.ch-dot { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.ch-dot.is-key { fill: var(--red); stroke: var(--red); }
.ch-bar { fill: #3a3a3a; }
.ch-bar.is-prev { fill: #c9c6c0; }
.ch-bar.is-key { fill: var(--red); }
.ch-track { fill: #f0eee9; }
.ch-target { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.dash-read { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.dash-read p { display: grid; gap: 4px; }
.dash-read span { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--action); }
.dash-read b { font-size: 16px; line-height: 1.35; }
.dash-note { margin-top: 14px; font-size: 13px; color: var(--mute); }
@media (max-width: 900px) { .dash-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .dash-read { grid-template-columns: 1fr; } }

.leak-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.leak-fixes { display: grid; gap: 8px; margin-top: 26px; }
.leak-fix, .curve-sup { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 220ms, border-color 220ms; }
.leak-fix:hover, .curve-sup:hover { border-color: rgba(255,255,255,0.5); }
.leak-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; background: rgba(255,255,255,0.2); transition: background-color 220ms; }
.leak-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 250ms var(--ease-out); }
[aria-pressed="true"] > .leak-switch { background: var(--red); }
[aria-pressed="true"] > .leak-switch::after { transform: translateX(16px); }
.leak-fix[aria-pressed="true"], .curve-sup[aria-pressed="true"] { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }
.leak-board, .curve-board { margin: 0; background: #fff; color: var(--ink); border-radius: 16px; padding: clamp(20px, 2.6vw, 34px); }
.leak-big { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; }
.leak-big b { font-size: clamp(44px, 5vw, 68px); font-weight: 800; letter-spacing: -0.04em; color: var(--red); font-variant-numeric: tabular-nums; margin-right: 6px; }
.leak-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(5px, 0.8vw, 9px); margin-top: 18px; }
.leak-dots span { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--rule); transition: background-color 400ms, border-color 400ms, transform 400ms var(--ease-out); }
.leak-dots span.is-kept { background: var(--ink); border-color: var(--ink); }
.leak-note { margin-top: 16px; font-size: 13px; color: var(--mute); }
.curve-chart { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.ch-ghost { stroke: var(--rule); stroke-dasharray: 5 5; stroke-width: 2; }
.curve-board .ch-line:not(.ch-ghost) { stroke: var(--red); stroke-width: 3; }
@media (max-width: 900px) { .leak-layout { grid-template-columns: minmax(0, 1fr); } }
.leak-dots { max-width: 400px; }
.leak-board { justify-self: stretch; }
@media (max-width: 900px) { .offer-grid, .offer-grid-wide { grid-template-columns: minmax(0, 1fr); } }

/* ======================================================================
   v5.3: What we do hub as a before/after board; ways in as tickets
   ====================================================================== */
.ba-bar { margin-top: clamp(28px, 4vw, 44px); }
.ba-switch { background: var(--paper); }
.ba-switch button { color: var(--mute); }
.ba-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ba-bar[data-state="after"] .ba-switch button[aria-pressed="true"] { background: var(--red); }
.ba-list { margin-top: 18px; border-top: 1px solid var(--rule); }
.ba-row { border-bottom: 1px solid var(--rule); }
.ba-link { display: grid; grid-template-columns: 76px 170px minmax(0, 1fr) 220px 32px; align-items: center; gap: 22px; padding: 18px 8px; transition: background-color 250ms, padding 250ms var(--ease-out); }
.ba-link:hover { background: var(--paper); padding-left: 16px; padding-right: 16px; }
.ba-thumb { width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: #e9e7e3; }
.ba-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.ba-link:hover .ba-thumb img { transform: scale(1.08); }
.ba-name { display: grid; gap: 4px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -0.03em; }
.ba-index { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--red); }
.ba-flip { display: grid; }
.ba-face { grid-area: 1 / 1; display: grid; gap: 4px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1.3; transition: opacity 300ms; }
.ba-face i { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.ba-after { opacity: 0; }
.ba-after i { color: var(--red); }
.ba-list[data-state="after"] .ba-before { opacity: 0; }
.ba-list[data-state="after"] .ba-after { opacity: 1; }
.ba-list[data-state="before"] .ba-before { color: var(--mute); }
.ba-offers { display: flex; flex-wrap: wrap; gap: 6px; }
.ba-offers span { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--paper); }
.ba-go { font-size: 22px; transition: transform 250ms var(--ease-out); }
.ba-link:hover .ba-go { transform: translateX(4px); color: var(--action); }
@media (max-width: 1100px) {
  .ba-link { grid-template-columns: 64px minmax(0, 1fr) 24px; grid-template-areas: "thumb name go" "thumb flip go" "thumb offers go"; gap: 6px 16px; align-items: start; }
  .ba-thumb { grid-area: thumb; width: 64px; height: 64px; }
  .ba-name { grid-area: name; font-size: 24px; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; }
  .ba-flip { grid-area: flip; }
  .ba-offers { grid-area: offers; margin-top: 6px; }
  .ba-go { grid-area: go; align-self: center; }
  .ba-face { font-size: 16px; }
}

/* Ways in, as tickets */
.modes-grid li { position: relative; border-top: 0; padding: 22px 20px 22px; background: #fff; border: 1px solid var(--rule); border-radius: 12px; transition: transform 250ms var(--ease-out), box-shadow 250ms; }
.modes-grid li::before { content: ""; position: absolute; left: 20px; right: 20px; top: 58px; border-top: 1.5px dashed var(--rule); }
.modes-grid li::after { content: ""; position: absolute; right: -1px; top: 50px; width: 9px; height: 16px; border-radius: 9px 0 0 9px; background: var(--paper); border: 1px solid var(--rule); border-right: 0; }
.modes-grid li:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: 0 16px 30px rgba(0,0,0,0.08); }
.modes-grid .mode-index { display: inline-flex; align-items: center; gap: 8px; height: 22px; }
.modes-grid .mode-index::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.modes-grid h3 { margin-top: 14px; }
.modes { background: var(--paper); }
.ba-offers span { background: #fff; border: 1px solid var(--rule); }

/* ======================================================================
   v5.4: How we work. Impact OS as a stack of six layers; Meshka 360 teaser
   ====================================================================== */
.os-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.os-copy h2 { margin-top: 18px; }
.os-copy .section-intro { margin-top: 18px; }
.os-layers { margin: 26px 0 24px; border-top: 1px solid var(--rule); }
.os-layers li { border-bottom: 1px solid var(--rule); }
.os-layer { width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 4px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.os-layer-num { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--red); width: 26px; }
.os-layer-name { font-size: clamp(20px, 1.9vw, 26px); font-weight: 800; letter-spacing: -0.025em; transition: transform 250ms var(--ease-out); }
.os-layer:hover .os-layer-name { transform: translateX(4px); }
.os-layer.is-on .os-layer-name { color: var(--ink); }
.os-layer:not(.is-on) .os-layer-name { color: #7a7a7a; }
.os-layer-text { padding: 0 4px 18px 46px; color: var(--mute); font-size: 17px; max-width: 48ch; }

.os-stack { position: relative; height: clamp(360px, 42vw, 520px); perspective: 1400px; }
.os-stack-inner { position: absolute; left: 50%; top: 50%; width: clamp(200px, 22vw, 290px); aspect-ratio: 1; transform: translate(-50%, -38%) rotateX(58deg) rotateZ(-42deg); transform-style: preserve-3d; }
.os-slab { --gap: 10px; position: absolute; inset: 0; border-radius: 18px; background: #fff; border: 1px solid rgba(0,0,0,0.14); box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 18px 30px rgba(0,0,0,0.07); transform: translateZ(calc(var(--i) * var(--gap))); transition: transform 900ms var(--ease-out), background-color 300ms, border-color 300ms; display: flex; align-items: flex-end; padding: 16px 18px; }
.os-stack.is-open .os-slab { --gap: clamp(34px, 4.4vw, 58px); }
.os-slab span { font-size: clamp(15px, 1.4vw, 19px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.os-slab.is-peek { background: #f4f2ee; }
.os-slab.is-on { background: var(--ink); border-color: var(--ink); transform: translateZ(calc(var(--i) * var(--gap) + 22px)); }
.os-slab.is-on span { color: #fff; }
.os-slab.is-on::after { content: ""; position: absolute; right: 16px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }
@media (max-width: 900px) {
  .os-layout { grid-template-columns: minmax(0, 1fr); }
  .os-stack { order: -1; height: 340px; }
  .os-stack-inner { width: 190px; }
  .os-stack.is-open .os-slab { --gap: 30px; }
}

.m360-teaser { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.m360-teaser-bg { position: absolute; inset: 0; margin: 0; }
.m360-teaser-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: 0.55; }
.m360-teaser-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,0.95) 0%, rgba(17,17,17,0.7) 45%, rgba(17,17,17,0.15) 100%); }
.m360-teaser-inner { position: relative; z-index: 2; max-width: 1360px; }
.m360-teaser-inner h2 { margin-top: 18px; max-width: 14ch; }
.m360-teaser-inner > p:not(.eyebrow) { margin-top: 18px; font-size: 19px; color: rgba(255,255,255,0.8); max-width: 40ch; }
.m360-teaser-inner .hero-actions { margin-top: 30px; }
@media (max-width: 760px) { .m360-teaser-bg::after { background: linear-gradient(180deg, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0.92) 60%); } }
.m360-teaser.grain > .m360-teaser-bg { position: absolute; inset: 0; z-index: 0; }
.m360-teaser.grain > .m360-teaser-inner { position: relative; z-index: 2; }

/* ======================================================================
   v5.5: About. Places under the founder, the name under a lamp,
   values that turn over, refusals struck through
   ====================================================================== */
.about-places { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-top: 24px; }
.about-places span { font-size: 15px; font-weight: 700; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; }
.about-places em { font-style: normal; color: var(--mute); font-size: 15px; margin-left: 4px; }

.name[data-lamp] { --lx: 30%; --ly: 50%; overflow: hidden; }
.name[data-lamp] .name-arabic { color: rgba(255,255,255,0.14); transition: color 300ms; }
.name[data-lamp] .lamp-glow { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; transform: translate(var(--lx), var(--ly)); border-radius: 50%; background: radial-gradient(circle, rgba(255,214,170,0.30) 0%, rgba(255,190,140,0.12) 35%, rgba(0,0,0,0) 70%); pointer-events: none; z-index: 1; mix-blend-mode: screen; }
.name[data-lamp] .name-layout { position: relative; z-index: 2; }
.name[data-lamp] .name-arabic { -webkit-mask-image: radial-gradient(circle 260px at var(--ax, 50%) var(--ay, 50%), #000 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.12) 100%); mask-image: radial-gradient(circle 260px at var(--ax, 50%) var(--ay, 50%), #000 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.12) 100%); color: #fff; }
.name.grain > .lamp-glow { position: absolute; z-index: 1; }

.vtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 52px); }
.vtile { display: block; width: 100%; aspect-ratio: 1 / 0.9; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; perspective: 900px; text-align: left; }
.vtile-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 700ms var(--ease-out); }
.vtile[aria-pressed="true"] .vtile-inner { transform: rotateY(180deg); }
.vtile-front, .vtile-back { position: absolute; inset: 0; display: grid; align-content: space-between; padding: clamp(18px, 2vw, 26px); border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.vtile-front { background: #fff; border: 1px solid var(--rule); }
.vtile-front b { font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.vtile-hint { font-size: 13px; color: var(--mute); }
.vtile:hover .vtile-front { border-color: var(--ink); }
.vtile-back { background: var(--ink); color: #fff; transform: rotateY(180deg); }
.vtile-back .value-index { color: var(--red); }
.vtile-text { font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; line-height: 1.35; }
.values { overflow: visible; background: var(--paper); }
.values-close { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 1100px) { .vtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vtile { aspect-ratio: 1 / 1.05; } .vtile-front b { font-size: 20px; } .vtile-text { font-size: 15px; } .vtile-front, .vtile-back { padding: 16px; } }

.refuse-list { border-top: 1px solid var(--rule); }
.refuse-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.refuse-no { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.refuse-what { font-size: clamp(20px, 2vw, 28px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.refuse-what s { text-decoration: none; background: linear-gradient(var(--red), var(--red)) 0 55% / 0% 3px no-repeat; transition: background-size 700ms var(--ease-out), color 400ms; }
.refuse-item.is-struck .refuse-what s { background-size: 100% 3px; color: #8a8a8a; }
.refuse-why { color: var(--ink); font-size: 17px; }
body.static .refuse-what s, .no-js .refuse-what s { background-size: 100% 3px; color: #8a8a8a; }
@media (max-width: 760px) { .refuse-item { grid-template-columns: 40px minmax(0, 1fr); } .refuse-why { grid-column: 2; font-size: 16px; color: var(--mute); } }
/* Phones: shorter method list and two-up tickets */
@media (max-width: 620px) {
  .method-scroller { margin-top: 28px; }
  .method-step { padding: 18px 0; gap: 8px; }
  .method-step h3 { font-size: 26px; }
  .method-q { font-size: 16px !important; line-height: 1.35; }
  .method-step summary { min-height: 40px; font-size: 14px; }
}
@media (max-width: 480px) {
  .modes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
  .modes-grid li:last-child { grid-column: 1 / -1; }
  .modes-grid li { padding: 16px 14px; }
  .modes-grid li::before { left: 14px; right: 14px; top: 50px; }
  .modes-grid li::after { top: 42px; }
  .modes-grid h3 { font-size: 20px; margin-top: 12px; }
  .modes-grid p { font-size: 14px; }
}

/* ======================================================================
   v5.6: About values on an eight-pointed star (the khatam), one picture
   and one "in practice" line per value
   ====================================================================== */
.values { background: var(--paper); overflow: hidden; }
.vstar-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin-top: clamp(32px, 4vw, 56px); }
.vstar { position: relative; width: 100%; max-width: 500px; justify-self: center; aspect-ratio: 1; }
.vstar-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(217,75,53,0.16) 0%, rgba(217,75,53,0.05) 45%, rgba(0,0,0,0) 70%); pointer-events: none; }
.vstar-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.vstar-ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.vstar-timer { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 1219; stroke-dashoffset: 1219; stroke-linecap: round; }
.vstar-petal { fill: #fff; stroke: rgba(0,0,0,0.16); stroke-width: 1; cursor: pointer; transition: fill 300ms, stroke 300ms; }
.vstar-petal:hover { fill: #f1eee9; }
.vstar-petal.is-on { fill: var(--red); stroke: var(--red); }
.vstar-octa { fill: var(--ink); }
.vstar-sq { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 1; }
.vstar-num { font-size: 15px; font-weight: 800; fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; font-variant-numeric: tabular-nums; font-family: inherit; }
.vstar-num.is-on { fill: #fff; }
.vstar-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; color: #fff; pointer-events: none; }
.vstar-center b { font-size: clamp(44px, 5vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.vstar-center span { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 6px; }

.vcard { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.08); touch-action: pan-y; }
.vcard-media { position: relative; margin: 0; aspect-ratio: 4 / 3; background: #e9e7e3; overflow: hidden; }
.vcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.vcard-img.is-on { opacity: 1; }
.vcard-body { padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px) 8px; display: grid; gap: 10px; }
.vcard-num { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.vcard-num b { color: var(--red); }
.vcard-name { font-size: clamp(28px, 2.8vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.vcard-text { color: var(--mute); font-size: 17px; max-width: 46ch; }
.vcard-practice { display: grid; gap: 4px; margin-top: 6px; padding: 14px 16px; border-left: 3px solid var(--red); background: var(--paper); border-radius: 0 10px 10px 0; }
.vcard-practice span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); }
.vcard-practice b { font-size: 17px; font-weight: 700; line-height: 1.35; }
.vcard-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 28px); }
.vdots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.vdot { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--mute); cursor: pointer; display: grid; place-items: center; transition: background-color 200ms, color 200ms; font-variant-numeric: tabular-nums; }
.vdot:hover { color: var(--ink); background: var(--paper); }
.vdot.is-on { background: var(--ink); color: #fff; }

.values .values-close { margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; text-align: center; font-size: clamp(22px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.025em; max-width: none; }
.values .values-close span { color: var(--red); }

@media (max-width: 900px) {
  .vstar-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .vstar { max-width: 300px; }
}
@media (max-width: 520px) {
  .vstar { max-width: 260px; }
  .vdot { width: 30px; height: 30px; font-size: 11px; }
  .vdots { gap: 2px; }
  .vcard-nav .room-btn { width: 44px; height: 44px; flex: none; }
  .vcard-text, .vcard-practice b { font-size: 15px; }
}
@media (min-width: 901px) { .vcard-media { aspect-ratio: 16 / 10; } }
@media (max-width: 520px) { .vcard-nav .room-btn { display: none; } .vcard-nav { justify-content: center; padding-top: 12px; } .vdots { flex-wrap: nowrap; } }

/* ======================================================================
   v5.7: Work with us. Four steps and a letter that writes itself;
   sending folds it into an envelope. What happens next, with pictures.
   ====================================================================== */
.wl-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.wl-form { background: #fff; border-radius: 18px; padding: clamp(22px, 3vw, 40px); }
.wl-form .form-title { margin-top: 14px; }
.wl-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 22px 0 6px; }
.wl-progress li { position: relative; padding-top: 12px; font-size: 13px; font-weight: 600; color: var(--mute); }
.wl-progress li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px; background: var(--rule); transition: background-color 300ms; }
.wl-progress li span { display: block; font-size: 11px; letter-spacing: 0.1em; color: var(--mute); }
.wl-progress li.is-done::before { background: var(--ink); }
.wl-progress li.is-on::before { background: var(--red); }
.wl-progress li.is-on { color: var(--ink); }
.wl-step { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.wl-q { display: grid; gap: 6px; font-size: clamp(22px, 2.1vw, 28px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; padding: 0; margin-bottom: 18px; }
.wl-q span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); }
.wl-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wl-need { position: relative; cursor: pointer; }
.wl-need input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wl-need-card { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; min-height: 60px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; transition: border-color 200ms, background-color 200ms, color 200ms, transform 200ms var(--ease-out); }
.wl-need-card img, .wl-need-card i { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; background: var(--paper); display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--mute); }
.wl-need-card b { font-size: 15px; font-weight: 700; line-height: 1.25; }
.wl-need:hover .wl-need-card { border-color: var(--ink); transform: translateY(-2px); }
.wl-need input:checked + .wl-need-card { background: var(--ink); color: #fff; border-color: var(--ink); }
.wl-need input:focus-visible + .wl-need-card { outline: 2px solid var(--action); outline-offset: 2px; }
.wl-need:last-child { grid-column: 1 / -1; }
.wl-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wl-nav .button { margin-left: auto; }
.wl-back { background: none; border: 0; font: inherit; font-weight: 600; color: var(--mute); cursor: pointer; padding: 10px 0; min-height: 44px; }
.wl-back:hover { color: var(--ink); }
.wl-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wl-starter { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 12px; min-height: 40px; border-radius: 999px; border: 1px dashed var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color 200ms, border-color 200ms; text-align: left; }
.wl-starter:hover { border-color: var(--ink); }
.wl-starter:disabled { opacity: 0.4; cursor: default; }
.wl-form .form-note { margin-top: 12px; }
.wl-form:not(.is-stepped) .wl-nav .wl-next, .wl-form:not(.is-stepped) .wl-back { display: none; }
.wl-form:not(.is-stepped) .wl-progress { display: none; }

.wl-desk { position: sticky; top: calc(var(--header-h) + 28px); min-height: 420px; display: grid; place-items: center; perspective: 1000px; }
.wl-letter { width: 100%; background: #fff; border-radius: 4px; padding: clamp(26px, 3vw, 42px); box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 30px 60px rgba(0,0,0,0.12); transform: rotate(1.2deg); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; display: grid; gap: 14px; position: relative; background-image: linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(0,0,0,0.035) calc(100% - 1px)); background-size: 100% 31px; }
.wl-letter::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); border-radius: 4px 0 0 4px; }
.wl-l-date { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--mute); }
.wl-slot { color: #a7a39c; border-bottom: 1.5px dashed #cfcac2; transition: color 250ms, border-color 250ms; }
.wl-slot.is-filled { color: var(--ink); border-bottom-color: transparent; font-weight: 600; }
.wl-slot-soft:not(.is-filled) { border-bottom: 0; }
.wl-l-msg .wl-slot { white-space: pre-wrap; overflow-wrap: anywhere; }
.wl-l-msg .wl-slot.is-filled { font-weight: 500; }
.wl-l-sign { margin-top: 6px; }
.wl-envelope { position: absolute; left: 50%; top: 50%; width: min(86%, 380px); aspect-ratio: 1.6; transform: translate(-50%, -50%); background: #f3f0ea; border-radius: 6px; box-shadow: 0 30px 60px rgba(0,0,0,0.16); opacity: 0; pointer-events: none; overflow: visible; }
.wl-envelope::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(to top right, transparent 49.5%, rgba(0,0,0,0.06) 50%, transparent 50.5%), linear-gradient(to top left, transparent 49.5%, rgba(0,0,0,0.06) 50%, transparent 50.5%); }
.wl-flap { position: absolute; left: 0; right: 0; top: 0; height: 56%; background: #ebe7df; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.wl-seal { position: absolute; left: 50%; top: 56%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px; box-shadow: 0 4px 10px rgba(217,75,53,0.4); }
.wl-desk.is-sent .wl-envelope { opacity: 1; }
.wl-desk.is-sent .wl-letter { opacity: 0; }

.wl-next-steps { background: #fff; }
.wl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(32px, 4vw, 52px); }
.wl-cards li { display: grid; gap: 10px; align-content: start; }
.wl-cards figure { margin: 0 0 6px; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #e9e7e3; }
.wl-cards img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.wl-cards li:hover img { transform: scale(1.04); }
.wl-cards span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--red); }
.wl-cards h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.025em; }
.wl-cards p { color: var(--mute); font-size: 16px; }
.wl-where { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: baseline; margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--rule); color: var(--mute); }
.wl-where b { display: block; color: var(--ink); font-size: 18px; }

@media (max-width: 900px) {
  .wl-layout { grid-template-columns: minmax(0, 1fr); }
  .wl-desk { position: static; min-height: 0; }
  .wl-letter { transform: none; font-size: 16px; }
  .wl-desk.is-sent { min-height: 260px; }
  .wl-cards { grid-template-columns: minmax(0, 1fr); }
  .wl-cards li { grid-template-columns: 38% minmax(0, 1fr); grid-template-areas: "img num" "img h" "img p"; column-gap: 14px; row-gap: 4px; align-items: start; }
  .wl-cards figure { grid-area: img; margin: 0; }
  .wl-cards span { grid-area: num; }
  .wl-cards h3 { grid-area: h; font-size: 19px; }
  .wl-cards p { grid-area: p; font-size: 14px; }
}
@media (max-width: 520px) {
  .wl-needs { gap: 6px; }
  .wl-need-card { min-height: 52px; gap: 8px; padding: 6px 8px 6px 6px; }
  .wl-need-card img, .wl-need-card i { width: 30px; height: 30px; border-radius: 6px; }
  .wl-need-card b { font-size: 13px; }
  .wl-progress li { font-size: 11px; }
}
.wl-step[hidden] { display: none !important; }

/* ---- v5.8: Work with us, step 1 with several areas and their specifics; team size; timing ---- */
.wl-hint { color: var(--mute); font-size: 15px; margin: -8px 0 14px; }
.wl-area { position: relative; cursor: pointer; }
.wl-area input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wl-area .wl-need-card > span { display: grid; gap: 2px; min-width: 0; }
.wl-area small { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.wl-tick { margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--rule); position: relative; font-style: normal; }
.wl-tick::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 200ms var(--ease-out); }
.wl-area input:checked + .wl-need-card { background: var(--ink); color: #fff; border-color: var(--ink); }
.wl-area input:checked + .wl-need-card small { color: rgba(255,255,255,0.6); }
.wl-area input:checked + .wl-need-card .wl-tick { background: var(--red); border-color: var(--red); }
.wl-area input:checked + .wl-need-card .wl-tick::after { transform: rotate(45deg) scale(1); }
.wl-area input:focus-visible + .wl-need-card { outline: 2px solid var(--action); outline-offset: 2px; }
.wl-areas .wl-area:last-child { grid-column: auto; }
.wl-specifics { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--paper); overflow: hidden; }
.wl-specifics-title { font-size: 14px; color: var(--mute); margin-bottom: 10px; }
.wl-specifics-title b { color: var(--ink); }
.wl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-chip { position: relative; cursor: pointer; }
.wl-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wl-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font-size: 14px; font-weight: 600; transition: background-color 180ms, color 180ms, border-color 180ms; }
.wl-chip:hover span { border-color: var(--ink); }
.wl-chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.wl-chip input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.wl-alt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--rule); }
.wl-chip-alt span { border-style: dashed; }
.wl-label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.wl-when { margin-top: 16px; }
.wl-l-list { margin: -6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.wl-l-list li { position: relative; padding-left: 18px; }
.wl-l-list li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.wl-l-detail { display: block; font-size: 0.86em; color: var(--mute); line-height: 1.4; }
.wl-l-needs { display: grid; gap: 14px; }
.wl-l-when:empty, .wl-l-when:has(.wl-slot:not(.is-filled)) { display: none; }
@media (max-width: 520px) {
  .wl-area .wl-need-card { padding-right: 10px; }
  .wl-area small { display: none; }
  .wl-tick { width: 18px; height: 18px; }
  .wl-tick::after { left: 5px; top: 1px; }
  .wl-chip span { font-size: 13px; min-height: 38px; padding: 7px 12px; }
}

/* ======================================================================
   v5.9: Work with us, the letter is the form. Blanks, a picker for
   what needs to change (Other in every area), tags in the letter.
   ====================================================================== */
.wl2-head { max-width: 760px; margin: 0 auto; text-align: center; }
.wl2-head h2 { margin-top: 14px; }
.wl2-head .section-intro { margin: 14px auto 0; }
.wl2-desk { position: relative; max-width: 860px; margin: clamp(32px, 4vw, 52px) auto 0; }
.wl2-letter { position: relative; background: #fff; border-radius: 6px; padding: clamp(24px, 4vw, 56px) clamp(20px, 4.5vw, 64px); box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 40px 80px rgba(0,0,0,0.10); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.7; background-image: linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(0,0,0,0.03) calc(100% - 1px)); background-size: 100% 36px; }
.wl2-letter::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--red); border-radius: 6px 0 0 6px; }
.wl2-letter .wl-l-date { margin-bottom: 18px; }
.wl2-p { margin: 0 0 14px; display: block; font-size: inherit; font-weight: 400; color: var(--ink); }
.blank { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 2px dashed #cfcac2; border-radius: 0; padding: 0 2px; margin: 0 2px; min-width: 6ch; max-width: 100%; line-height: 1.4; transition: border-color 200ms, background-color 200ms; }
.blank::placeholder { color: #a7a39c; }
.blank:hover { border-bottom-color: var(--ink); }
.blank:focus { outline: none; border-bottom-color: var(--red); background: #fff6f4; }
.blank.is-filled { border-bottom-style: solid; border-bottom-color: var(--ink); font-weight: 600; }
select.blank { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 18px; width: auto; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
select.blank:not(.is-filled) { color: #a7a39c; }
.blank-soft { font-size: 0.85em; }
.wl2-sign { line-height: 2.1; }
.wl2-needs { margin-bottom: 14px; }
.wl2-tokens { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.wl2-token { display: flex; align-items: stretch; border-radius: 10px; background: var(--paper); overflow: hidden; }
.wl2-token-edit { flex: 1; text-align: left; border: 0; background: none; font: inherit; font-size: 0.86em; line-height: 1.45; padding: 10px 14px; cursor: pointer; color: var(--ink); }
.wl2-token-edit b { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; font-weight: 800; }
.wl2-token-edit b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.wl2-token-x { border: 0; background: none; font-size: 22px; line-height: 1; padding: 0 14px; cursor: pointer; color: var(--mute); }
.wl2-token-x:hover { color: var(--action); }
.wl2-add { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 2px dashed #cfcac2; border-radius: 10px; background: #fff; font: inherit; font-size: 0.9em; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color 200ms, background-color 200ms; }
.wl2-add:hover { border-color: var(--ink); }
.wl2-add[aria-expanded="true"] { border-color: var(--red); background: #fff6f4; }
.wl2-picker { margin-top: 12px; padding: clamp(14px, 2vw, 20px); border-radius: 14px; background: #f7f5f1; border: 1px solid var(--rule); font-size: 16px; line-height: 1.4; }
.wl2-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wl2-tab { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 30px 6px 6px; text-align: left; border: 1px solid var(--rule); border-radius: 10px; background: #fff; font: inherit; color: var(--ink); cursor: pointer; transition: border-color 200ms, background-color 200ms, color 200ms; }
.wl2-tab img, .wl2-q { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; flex: none; }
.wl2-q { display: grid; place-items: center; background: var(--paper); font-style: normal; font-size: 22px; font-weight: 700; color: var(--mute); }
.wl2-tab span { display: grid; min-width: 0; }
.wl2-tab b { font-size: 14px; line-height: 1.2; }
.wl2-tab small { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.wl2-tab:hover { border-color: var(--ink); }
.wl2-tab.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.wl2-tab.is-on small { color: rgba(255,255,255,0.6); }
.wl2-count { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; display: none; place-items: center; }
.wl2-tab.has-picks .wl2-count { display: grid; }
.wl2-panel { margin-top: 14px; }
.wl2-panel-title { font-size: 14px; color: var(--mute); margin-bottom: 10px; }
.wl2-panel-title b { color: var(--ink); }
.wl2-other-text { display: block; width: 100%; margin-top: 10px; font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; }
.wl2-other-text:focus { outline: 2px solid var(--action); outline-offset: 1px; }
.wl2-other-chip span { border-style: dashed; }
.wl2-alt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--rule); }
.wl2-done { margin-top: 16px; }
.wl2-more { margin: 4px 0 14px; }
.blank-area { display: block; width: 100%; font: inherit; line-height: 1.6; color: var(--ink); background: transparent; border: 0; border-left: 3px solid var(--rule); padding: 6px 0 6px 14px; resize: none; min-height: 110px; transition: border-color 200ms; }
.blank-area::placeholder { color: #a7a39c; }
.blank-area:focus { outline: none; border-left-color: var(--red); }
.wl2-letter .wl-starters { margin-top: 8px; }
.wl2-letter .wl-starter { font-size: 13px; }
.wl2-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.wl2-send .form-note { margin: 0; font-size: 14px; }
.wl2-letter .form-error { margin-bottom: 14px; }
.wl2-letter .form-sent { padding: 20px 0 10px; }
.wl2-desk .wl-envelope { top: 50%; }
.wl2-desk.is-sent { min-height: 340px; }
.wl2-desk.is-sent .wl-envelope { opacity: 1; }
.wl2-desk.is-sent .wl2-letter { background: transparent; box-shadow: none; }
.wl2-desk.is-sent .wl2-letter::before, .wl2-desk.is-sent .wl-l-date { display: none; }
.wl2-desk.is-sent .form-sent { position: relative; z-index: 3; text-align: center; margin-top: 220px; }
.form:not(.is-live) .wl2-add, .form:not(.is-live) .wl2-done { display: none; }
@media (max-width: 760px) {
  .wl2-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl2-letter { line-height: 1.75; }
}
@media (max-width: 520px) {
  .wl2-tab { min-height: 50px; gap: 8px; padding-right: 26px; }
  .wl2-tab img, .wl2-q { width: 32px; height: 32px; }
  .wl2-tab b { font-size: 13px; }
  .wl2-tab small { display: none; }
  .wl2-letter { font-size: 16px; }
  .wl-chip span { font-size: 13px; }
}
.wl2-desk.is-sent { min-height: 470px; }
.wl2-desk.is-sent .wl-envelope { top: 150px; }
.wl2-desk.is-sent .form-sent { margin-top: 290px; }
@media (max-width: 520px) { .wl2-desk.is-sent .wl-envelope { top: 110px; } .wl2-desk.is-sent .form-sent { margin-top: 200px; } .wl2-desk.is-sent { min-height: 400px; } }
@media (max-width: 520px) { .wl2-letter { padding: 22px 16px 26px 20px; } .wl2-picker { padding: 10px; margin-left: -6px; margin-right: -6px; } }
.wl2-add { font-size: 1em; padding: 10px 18px; }
.wl2-add span:first-child { color: var(--red); font-size: 1.2em; }

.wl2-type-other[hidden] { display: none; }
.wl2-type-other .blank { min-width: 12ch; white-space: normal; }

/* ======================================================================
   v6.0 launch check: contrast. Small red text uses the darker action
   red (#BC3D2B, 5:1 on white); dimmed items stay at a readable level.
   ====================================================================== */
.run-num { background: var(--action); }
.ba-index, .vcard-num b, .refuse-no, .wl-cards span, .os-layer-num, .wheel-count b, .acc-num,
.page-practice .acc-item summary::before, .mode-index, .value-index, .vtile-back .value-index { color: var(--action); }
.vtile-back .value-index, .lens-chip.is-on span { color: #ff8a73; }
.method-step { opacity: 0.6; }
.method-step.is-active, body.static .method-step, body:not(.motion) .method-step { opacity: 1; }
.diagnosis-areas li.is-zero { opacity: 0.65; }
.diagnosis-areas li.is-zero { opacity: 1; }
.diagnosis-areas li.is-zero .area-name, .diagnosis-areas li.is-zero .area-count { color: #9a9a9a; }

/* ======================================================================
   v6.1: "In short": a plain, answer-first summary under each hero, for
   readers who skim, search engines and AI assistants.
   ====================================================================== */
.lede { padding: clamp(36px, 5vw, 64px) 0; background: #fff; border-bottom: 1px solid var(--rule); }
.lede-text { max-width: 62ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--ink); font-weight: 500; letter-spacing: -0.005em; }
.lede-text::first-line { font-weight: 600; }

/* ======================================================================
   v6.2: line icons instead of arrow characters. Characters such as the
   north-east arrow turn into colour emoji on iPhones; these SVG masks
   always draw in the text colour.
   ====================================================================== */
.ico { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.14em; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-ne { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E"); }
.ico-right { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E"); }
.ico-left { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12h-15M11 5.5 4.5 12l6.5 6.5'/%3E%3C/svg%3E"); }
.ico-down { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15M5.5 13l6.5 6.5 6.5-6.5'/%3E%3C/svg%3E"); }
.ico-up { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5v-15M5.5 11 12 4.5 18.5 11'/%3E%3C/svg%3E"); }
.ico-cw { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4.2h-4.2'/%3E%3C/svg%3E"); }
.ico-ccw { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12a7.5 7.5 0 1 0 2.2-5.3M4.5 4.5v4.2h4.2'/%3E%3C/svg%3E"); }
.ico-check { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.chain-loop .chain-steps li:last-child::after { content: ""; width: 24px; height: 24px; background-color: var(--red); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4.2h-4.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4.2h-4.2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ======================================================================
   Gold theme demo (/homeclone/ only, body.theme-gold). Accent gold for
   dots, lines and highlights; a deeper gold for small text and buttons so
   white text on it stays readable (about 5:1).
   ====================================================================== */
body.theme-gold { --meshka-vermilion: #C99A2E; --red: #C99A2E; --meshka-action: #8E6A17; --action: #8E6A17; --meshka-action-hover: #76580F; --hero-accent-rgb: 0.79 0.60 0.18; }
body.theme-gold .os-shape { fill: rgba(201,154,46,0.18); }
body.theme-gold .form-error { background: #fbf6ea; border-color: #ead9b0; }
body.theme-gold .s360-tile.is-hit { background: rgba(201,154,46,0.10); }
body.theme-gold .m360-rows.is-filtered .m360-row.is-match { background: #fbf6ea; }
body.theme-gold .flow-token { box-shadow: 0 0 0 6px rgba(201,154,46,0.28); }
body.theme-gold .vstar-glow { background: radial-gradient(circle, rgba(201,154,46,0.18) 0%, rgba(201,154,46,0.06) 45%, rgba(0,0,0,0) 70%); }
body.theme-gold .blank:focus, body.theme-gold .wl2-add[aria-expanded="true"] { background: #fdf9ef; }
body.theme-gold .vtile-back .value-index, body.theme-gold .lens-chip.is-on span { color: #e3c47a; }