/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #f5f2e9;
  --bg-2: #eeeadd;
  --surface: #fcfbf7;
  --surface-2: #ffffff;
  --green: #3f5640;
  --green-mid: #5a7359;
  --accent: #3a5239;
  --accent-soft: #4d6a4c;
  --accent-rgb: 63, 86, 64;
  --ink: #10160f;
  --ink-soft: #4b5348;
  --ink-mute: #6b7167;
  --ink-rgb: 16, 22, 15;
  --brass: #8a6a2b;
  --line: rgba(16, 22, 15, 0.13);
  --line-strong: rgba(16, 22, 15, 0.26);
  --danger: #b0442c;
  --well: rgba(16, 22, 15, 0.04);
  --well-focus: rgba(16, 22, 15, 0.02);
  --glow: rgba(157, 181, 151, 0.42);
  --shadow: 0 40px 80px -48px rgba(16, 22, 15, 0.38);
  --btn-bg: #17211a;
  --btn-bg-hover: #24332a;
  --btn-fg: #f1ecdd;
  --nav-bg: 245, 242, 233;
  --logo-gradient: linear-gradient(90deg, #0b0e0b 0%, #0b0e0b 46%, #283626 66%, #3f5640 84%, #5a7359 100%);

  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --logo: "Poppins", "Inter", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
  --radius: 18px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nav-h: 72px;
}

/* Deep military-green blocks (game, featured cards, audit, footer) */
.on-dark {
  --bg: #141d16;
  --bg-2: #18231a;
  --surface: #1b271e;
  --surface-2: #213024;
  --accent: #9db597;
  --accent-soft: #b9c4ae;
  --accent-rgb: 157, 181, 151;
  --ink: #f1ecdd;
  --ink-soft: #b9b7a8;
  --ink-mute: #8d9084;
  --ink-rgb: 241, 236, 221;
  --brass: #c9ad72;
  --line: rgba(241, 236, 221, 0.13);
  --line-strong: rgba(241, 236, 221, 0.26);
  --danger: #e6977f;
  --well: rgba(0, 0, 0, 0.24);
  --well-focus: rgba(0, 0, 0, 0.34);
  --shadow: 0 44px 90px -44px rgba(16, 22, 15, 0.75);
  --btn-bg: #f1ecdd;
  --btn-bg-hover: #fffaf0;
  --btn-fg: #10160f;
  --logo-gradient: linear-gradient(90deg, #f1ecdd 0%, #f1ecdd 46%, #b9c4ae 66%, #8fa58a 84%, #9db597 100%);
  color: var(--ink);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--green); color: var(--ink); }

/* =============================================================
   3. Utilities
   ============================================================= */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--bg);
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =============================================================
   4. Typography
   ============================================================= */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; }
h1 em, h2 em, .statement em { font-style: italic; color: var(--accent); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brass); }
.h2 { margin-top: 18px; font-size: clamp(38px, 5.4vw, 76px); }
.lead { margin-top: 22px; max-width: 58ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); }

.logo {
  font-family: var(--logo); font-weight: 600; font-size: 26px; letter-spacing: -0.035em; line-height: 1.2;
  background-image: var(--logo-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* =============================================================
   5. Components
   ============================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav-h);
  background: rgba(var(--nav-bg), 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
@supports (backdrop-filter: blur(12px)) {
  .nav { background: rgba(var(--nav-bg), 0.7); backdrop-filter: blur(16px) saturate(1.2); }
}
.nav.is-scrolled { border-color: var(--line); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.nav-links { display: none; gap: 30px; margin-left: auto; font-size: 14.5px; color: var(--ink-soft); }
.nav-links a { position: relative; padding-block: 6px; transition: color 0.2s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-tools { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; }
.lang a { padding: 5px 11px; border-radius: 999px; color: var(--ink-mute); transition: color 0.2s, background 0.2s; }
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--bg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; line-height: 1.2; text-align: center;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 14px 30px -16px rgba(16, 22, 15, 0.6); }
.btn-primary:hover { background: var(--btn-bg-hover); box-shadow: 0 20px 40px -16px rgba(16, 22, 15, 0.7); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary .arrow { transition: transform 0.3s var(--ease); }
.btn-primary:hover .arrow { transform: translateY(3px); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-soft); background: rgba(var(--ink-rgb), 0.05); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-label-short { display: inline; }
.btn-label-long { display: none; }

/* =============================================================
   6. Sections
   ============================================================= */
.section { position: relative; padding-block: clamp(84px, 11vw, 160px); }
.section + .section { border-top: 1px solid var(--line); }

/* ---- Hero ---- */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(36px, 6vw, 80px)); padding-bottom: clamp(56px, 7vw, 96px); overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 28%, var(--glow), transparent 70%),
    radial-gradient(40% 40% at 6% 92%, rgba(194, 165, 106, 0.16), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.hero-title { margin-top: 22px; font-size: clamp(48px, 7.4vw, 108px); line-height: 0.96; }
.hero-lead { margin-top: 26px; max-width: 50ch; font-size: clamp(17px, 1.55vw, 20.5px); color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 13.5px; color: var(--ink-mute); }
.hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.hero-note span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ---- Game ---- */
.game {
  position: relative; border-radius: 22px; padding: clamp(20px, 2.4vw, 30px);
  background: linear-gradient(165deg, #223126, #141d16);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}
.game-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.game-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.game-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); animation: pulse 2.4s ease-out infinite; }
.game-round { font-size: 13px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.game-question { margin-top: 20px; min-height: 3.6em; font-family: var(--serif); font-size: clamp(22px, 2.3vw, 29px); line-height: 1.2; color: var(--ink); }
.game-question .caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -0.12em; background: var(--brass); animation: blink 1s steps(2) infinite; }
.game-prompt { margin-top: 16px; font-size: 13.5px; color: var(--ink-mute); }
.game-options { display: grid; gap: 10px; margin-top: 12px; }
.game-option {
  width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px;
  background: rgba(var(--ink-rgb), 0.03); border: 1px solid var(--line);
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease), opacity 0.3s;
}
.game-option:not(:disabled):hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); transform: translateX(4px); }
.game-option-name { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 15px; }
.game-option-name i { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity 0.3s; }
.game-option ul { margin-top: 6px; display: grid; gap: 2px; }
.game-option li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.game-option li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 1px; background: var(--ink-mute); }
.game-option.is-correct { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.game-option.is-correct .game-option-name i { opacity: 1; }
.game-option.is-dim { opacity: 0.42; }
.game-option.is-picked:not(.is-correct) { border-color: var(--danger); opacity: 0.8; }
.game-option:disabled { cursor: default; }
.game-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; min-height: 46px; }
.game-feedback { flex: 1 1 240px; font-size: 14px; line-height: 1.5; color: var(--accent-soft); opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s var(--ease); }
.game-feedback.is-on { opacity: 1; transform: none; }
.game-next { visibility: hidden; }
.game-next.is-on { visibility: visible; }
.game-final { padding: 26px 4px 6px; text-align: left; animation: rise 0.6s var(--ease) both; }
.game-final h3 { font-size: clamp(30px, 3.2vw, 42px); }
.game-final p { margin: 14px 0 24px; color: var(--ink-soft); font-size: 16.5px; }
.game-final-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Engines strip ---- */
.engines { position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 84px); padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 34px; }
.engines-label { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
.engines ul { display: flex; flex-wrap: wrap; gap: 6px 30px; }
.engines li { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); color: var(--ink-soft); }

/* ---- Shift ---- */
.shift-grid { display: grid; gap: 18px; margin-top: clamp(40px, 5vw, 68px); }
.shift-card { color: var(--ink); position: relative; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); }
.shift-card.is-geo { border-color: rgba(var(--accent-rgb), 0.5); background: linear-gradient(160deg, #2c3e2e, #141d16); }
.shift-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; }
.shift-card.is-geo .shift-tag { border-color: var(--accent); color: var(--accent); }
.shift-quote { margin-top: 22px; font-family: var(--serif); font-size: clamp(25px, 2.7vw, 36px); line-height: 1.12; }
.shift-card:not(.is-geo) .shift-quote { color: var(--ink-soft); }
.shift-example { margin-top: 26px; padding: 14px 16px; border-radius: 12px; background: var(--well); border: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); }
.shift-example b { display: block; margin-bottom: 4px; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.shift-goal { margin-top: 16px; font-size: 14.5px; color: var(--ink-mute); }
.statement { margin-top: clamp(48px, 7vw, 96px); font-family: var(--serif); font-size: clamp(32px, 5vw, 70px); line-height: 1.04; max-width: 20ch; }

/* ---- Score ---- */
.score-grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
.score-points { margin-top: 30px; display: grid; gap: 14px; }
.score-points li { position: relative; padding-left: 26px; color: var(--ink-soft); }
.score-points li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 14px; height: 1px; background: var(--brass); }
.panel { border-radius: 22px; padding: clamp(22px, 2.6vw, 34px); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.gauge { position: relative; flex: 0 0 auto; width: 118px; height: 118px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 7; }
.gauge .track { stroke: rgba(var(--ink-rgb), 0.1); }
.gauge .value { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.8s var(--ease); }
.panel.is-in .gauge .value { stroke-dashoffset: calc(327 - 327 * var(--score, 0) / 100); }
.gauge-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 44px; line-height: 1; }
.panel-title { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.panel-sub { margin-top: 6px; font-size: 13px; color: var(--ink-mute); }
.metrics { display: grid; gap: 15px; margin-top: 22px; }
.metric-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.metric-top span:last-child { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.metric-q { font-size: 12.5px; color: var(--ink-mute); }
.bar { margin-top: 7px; height: 3px; border-radius: 3px; background: rgba(var(--ink-rgb), 0.1); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--green-mid), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); transition-delay: calc(var(--i) * 90ms + 200ms); }
.panel.is-in .bar i { transform: scaleX(1); }
.panel-note { margin-top: 20px; font-size: 12px; color: var(--ink-mute); }

/* ---- Method ---- */
.pillars { margin-top: clamp(40px, 5vw, 68px); border-top: 1px solid var(--line); }
.pillar { display: grid; gap: 8px 28px; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding 0.4s var(--ease), background 0.4s; }
.pillar:hover { padding-inline: 14px; background: rgba(var(--ink-rgb), 0.025); }
.pillar-num { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--brass); }
.pillar h3 { font-size: clamp(26px, 2.8vw, 38px); transition: color 0.3s; }
.pillar:hover h3 { color: var(--accent); }
.pillar p { color: var(--ink-soft); max-width: 56ch; }

/* ---- Services ---- */
.services { display: grid; gap: 18px; margin-top: clamp(40px, 5vw, 68px); }
.service { position: relative; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); transition: border-color 0.3s, transform 0.4s var(--ease); }
.service:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.service-num { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--ink-mute); }
.service h3 { margin-top: 14px; font-size: 30px; }
.service p { margin-top: 10px; color: var(--ink-soft); font-size: 15.5px; }
.service.is-featured { border-color: rgba(var(--accent-rgb), 0.5); background: linear-gradient(150deg, #2c3e2e, #141d16); }
.service.is-featured h3 { font-size: clamp(34px, 3.6vw, 48px); }
.service-badge { position: absolute; top: 24px; right: 24px; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.service-facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 26px 0 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.service-facts strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1; color: var(--ink); }
.service-facts span { font-size: 13px; color: var(--ink-mute); }

/* ---- Four ---- */
.four { display: grid; gap: 0; margin-top: clamp(36px, 5vw, 60px); border-top: 1px solid var(--line); }
.four li { display: flex; align-items: baseline; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(28px, 4.2vw, 58px); line-height: 1.05; }
.four li span { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--brass); }
.four li em { font-style: italic; color: var(--accent); }
.four-close { margin-top: 30px; font-size: clamp(18px, 1.7vw, 22px); color: var(--ink-soft); }
.four-close b { color: var(--ink); font-weight: 600; }

/* ---- Audit / form ---- */
.audit { background: radial-gradient(70% 60% at 85% 0%, #24342a, transparent 70%), var(--bg); }
.section.audit { border-top: 0; }
.audit-grid { display: grid; gap: clamp(36px, 5vw, 72px); }
.audit-list { margin-top: 30px; display: grid; gap: 16px; }
.audit-list li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; color: var(--ink-soft); }
.audit-list li b { display: block; color: var(--ink); font-weight: 600; }
.audit-list li > span { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--brass); }
.audit-contact { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-mute); }
.audit-contact a { display: inline-block; margin-top: 4px; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); color: var(--ink); border-bottom: 1px solid var(--line-strong); transition: border-color 0.3s, color 0.3s; }
.audit-contact a:hover { color: var(--accent); border-color: var(--accent); }

.form { border-radius: 22px; padding: clamp(22px, 3vw, 38px); background: var(--surface); border: 1px solid var(--line-strong); }
.form-grid { display: grid; gap: 18px; }
.field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); }
.field input {
  width: 100%; height: 50px; padding: 0 15px; border-radius: 12px;
  background: var(--well); border: 1px solid var(--line-strong); color: var(--ink);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.field input::placeholder { color: var(--ink-mute); }
.field input:hover { border-color: var(--ink-mute); }
.field input:focus { outline: none; border-color: var(--accent); background: var(--well-focus); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); }
.field.has-error input { border-color: var(--danger); }
.field-error { display: block; min-height: 0; margin-top: 6px; font-size: 13px; color: var(--danger); }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-top: 22px; font-size: 13.5px; color: var(--ink-soft); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }
.form-actions { margin-top: 24px; }
.form-actions .btn { width: 100%; }
.form-status { margin-top: 14px; font-size: 14px; color: var(--accent-soft); min-height: 1.4em; }
.form-status.is-error { color: var(--danger); }
.form-small { margin-top: 10px; font-size: 12.5px; color: var(--ink-mute); }

/* ---- Footer ---- */
.footer { background: var(--bg); border-top: 1px solid var(--line); padding-block: 44px 36px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; }
.footer .logo { font-size: 40px; }
.footer-tag { margin-top: 4px; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.footer-mail { font-family: var(--serif); font-size: 24px; }
.footer-mail:hover { color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-mute); }
.footer-bottom a:hover { color: var(--ink); }

/* =============================================================
   7. Effects
   ============================================================= */
.has-js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.has-js .reveal.is-in { opacity: 1; transform: none; }
.has-js .service.reveal.is-in { transition: opacity 1s var(--ease), border-color 0.3s, transform 0.4s var(--ease); }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); } 100% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 560px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .btn-label-short { display: none; }
  .btn-label-long { display: inline; }
}
@media (min-width: 760px) {
  .shift-grid { grid-template-columns: 1fr 1fr; }
  .services { grid-template-columns: 1fr 1fr; }
  .service.is-featured { grid-column: 1 / -1; }
  .pillar { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.25fr); align-items: baseline; }
}
@media (min-width: 1000px) {
  .nav-links { display: flex; }
  .nav-tools { margin-left: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .score-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .audit-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .services { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================
   9. Reduced-motion (only the endless loops)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .game-label::before, .game-question .caret { animation: none; }
}

/* =============================================================
   10. Home additions: key stat, score levels, plain-language pillars
   ============================================================= */
.stat-grid { display: grid; gap: 20px clamp(32px, 6vw, 88px); align-items: center; }
.stat-num { font-family: var(--serif); font-size: clamp(130px, 24vw, 320px); line-height: 0.82; letter-spacing: -0.04em; color: var(--accent); white-space: nowrap; }
.stat-num i { font-style: italic; font-size: 0.5em; color: var(--brass); margin-left: 0.04em; }
.stat-title { margin-top: 18px; font-size: clamp(30px, 3.9vw, 56px); line-height: 1.05; }
.stat-source { margin-top: 18px; font-size: 12.5px; color: var(--ink-mute); }
.stat-source a { border-bottom: 1px solid var(--line-strong); }
.stat-source a:hover { color: var(--ink); }

.gauge-num b { font-weight: 400; }
.gauge-num small { font-size: 18px; margin-left: 2px; color: var(--ink-mute); }
.levels { display: grid; gap: 8px; margin-top: 22px; }
.level { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line); transition: border-color 0.3s, background 0.3s; }
.level-range { font-family: var(--serif); font-size: 25px; line-height: 1.1; white-space: nowrap; }
.level p { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.level b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.level b i { margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: var(--bg); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 2px; }
.level.is-current { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.09); }

.pillar p { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.game-question { min-height: 2.5em; }

@media (min-width: 760px) {
  .pillar { grid-template-columns: 64px minmax(0, 1fr) auto; }
}
@media (min-width: 900px) {
  .stat-grid { grid-template-columns: auto minmax(0, 1fr); }
}

/* =============================================================
   11. Repositioning: premium line, PR speciality, founder, sector select
   ============================================================= */
.hero-title { font-size: clamp(42px, 5.6vw, 84px); line-height: 1; }
.hero-premium { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--accent); }

.service.is-special { border-color: rgba(var(--accent-rgb), 0.55); background: var(--surface); display: grid; gap: 14px 48px; }
.service.is-special h3 { font-size: clamp(30px, 3.2vw, 42px); }
.service.is-special .service-badge { position: static; display: inline-block; margin-top: 16px; background: var(--accent); color: var(--bg); }
.service.is-special p { margin-top: 0; font-size: 17px; }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.service-tags li { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; color: var(--ink-soft); }

.founder-grid { display: grid; gap: clamp(28px, 5vw, 80px); align-items: center; }
.founder-photo { display: grid; place-items: center; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; border-radius: 22px; border: 1px dashed var(--line-strong); background: var(--bg-2); }
.founder-photo span { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
.founder-text > p:not(.eyebrow):not(.founder-sign) { margin-top: 22px; max-width: 54ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); }
.founder-sign { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 28px; line-height: 1.2; }
.founder-sign small { display: block; margin-top: 4px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }

.field select {
  width: 100%; height: 50px; padding: 0 40px 0 15px; border-radius: 12px;
  background-color: var(--well); border: 1px solid var(--line-strong); color: var(--ink); font: inherit;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b9b7a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.on-dark .field select { color-scheme: dark; }
.field select:hover { border-color: var(--ink-mute); }
.field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); }
.field select:invalid { color: var(--ink-mute); }
.field.has-error select { border-color: var(--danger); }

@media (min-width: 560px) {
  .field-wide { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .services { grid-template-columns: repeat(3, 1fr); }
  .service.is-special { grid-column: 1 / -1; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; }
}
@media (min-width: 1000px) {
  .services { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
  .founder-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.founder-quote { margin-top: 20px; font-family: var(--serif); font-size: clamp(25px, 2.7vw, 38px); line-height: 1.18; letter-spacing: -0.01em; color: var(--ink); max-width: 26em; text-wrap: pretty; }

/* Method steps in plain language: title + one-line explanation */
.pillar p { font-size: 16.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-soft); max-width: 52ch; }
.pillar h3 { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.08; }
@media (min-width: 760px) {
  .pillar { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.15fr); }
}

/* =============================================================
   12. Motion: hero entrance, scroll-linked effects
   ============================================================= */
.scroll-progress { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 2px; background: var(--brass); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Hero entrance */
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.07em 0.16em; margin: 0 -0.07em -0.16em; }
.hero-title .w > span { display: inline-block; transform: translateY(110%); animation: word-up 1.2s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 200ms); }
.hero-copy .eyebrow { animation: rise 1s var(--ease) 0.1s both; }
.hero-lead { animation: rise 1.1s var(--ease) 1.05s both; }
.hero-actions { animation: rise 1.1s var(--ease) 1.2s both; }
.hero-note, .hero-premium { animation: rise 1.1s var(--ease) 1.35s both; }
.hero .game { animation: rise 1.3s var(--ease) 0.8s both; }
.hero .engines { animation: rise 1.2s var(--ease) 1.5s both; }
@keyframes word-up { to { transform: none; } }
[data-parallax] { will-change: translate; }

/* Section titles rise from behind a mask */
.has-js .h2.reveal { transform: translateY(60px); transition: transform 1.3s var(--ease), opacity 1.1s var(--ease); }
.has-js .h2.reveal.is-in { transform: none; }

/* Cards and lines enter from the sides */
.has-js .founder-photo.reveal { transform: scale(0.94); transition: transform 1.4s var(--ease), opacity 1.1s var(--ease); }
.has-js .founder-photo.reveal.is-in { transform: none; }
@media (min-width: 760px) {
  .has-js .shift-card.reveal { transform: translateX(-56px); }
  .has-js .shift-card.is-geo.reveal { transform: translateX(56px); }
  .has-js .shift-card.reveal.is-in { transform: none; }
  .has-js .four li.reveal { transform: translateX(-48px); }
  .has-js .four li.reveal.is-in { transform: none; }
}

/* Score levels cascade in */
.has-js .panel .level { opacity: 0; transform: translateX(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), border-color 0.3s, background 0.3s; }
.has-js .panel.is-in .level { opacity: 1; transform: none; }
.panel .level:nth-child(1) { transition-delay: 0.35s; }
.panel .level:nth-child(2) { transition-delay: 0.47s; }
.panel .level:nth-child(3) { transition-delay: 0.59s; }
.panel .level:nth-child(4) { transition-delay: 0.71s; }
.panel .level:nth-child(5) { transition-delay: 0.83s; }

/* Statement fills in word by word as you scroll */
.statement .fw { transition: opacity 0.2s linear; }

/* Method: steps light up and a line grows as you scroll */
.has-fx .pillar > * { opacity: 0.3; transition: opacity 0.6s var(--ease), color 0.3s; }
.has-fx .pillar.is-active > * { opacity: 1; }

/* Tagline band that slides sideways with the scroll */
.band { overflow: hidden; padding-block: clamp(36px, 6vw, 84px); border-top: 1px solid var(--line); }
.band-track { display: flex; align-items: center; gap: 0.5em; width: max-content; font-family: var(--serif); font-style: italic; font-size: clamp(60px, 11vw, 168px); line-height: 1.05; white-space: nowrap; color: var(--accent); will-change: transform; transform: translate3d(-4%, 0, 0); }
.band-track span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px var(--accent); }
.band-track i { font-style: normal; font-size: 0.22em; color: var(--brass); }

@media (min-width: 760px) {
  .has-fx .pillars { position: relative; padding-left: 36px; border-top: 0; }
  .has-fx .pillars::before, .has-fx .pillars::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; }
  .has-fx .pillars::before { bottom: 0; background: var(--line-strong); }
  .has-fx .pillars::after { width: 2px; left: -0.5px; height: calc(var(--p, 0) * 100%); background: var(--brass); }
}
html { overflow-x: clip; }

/* >>> SERIOUS-TRIAL START — colours and typography only; delete this block to step back <<< */
:root {
  --bg: #f6f5f1;
  --bg-2: #eceae4;
  --surface: #fbfbf9;
  --surface-2: #ffffff;
  --green: #2a4a39;
  --green-mid: #3f6350;
  --accent: #1f3a2c;
  --accent-soft: #2f5140;
  --accent-rgb: 31, 58, 44;
  --ink: #111413;
  --ink-soft: #454a47;
  --ink-mute: #6a6f6c;
  --ink-rgb: 17, 20, 19;
  --brass: #6b6453;
  --line: rgba(17, 20, 19, 0.13);
  --line-strong: rgba(17, 20, 19, 0.28);
  --glow: rgba(150, 170, 160, 0.3);
  --btn-bg: #111a15;
  --btn-bg-hover: #1f3a2c;
  --btn-fg: #f6f5f1;
  --nav-bg: 246, 245, 241;
  --logo-gradient: linear-gradient(90deg, #0b0e0d 0%, #0b0e0d 46%, #17291f 66%, #1f3a2c 84%, #3f6350 100%);
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
}
.on-dark {
  --bg: #0f1c16;
  --bg-2: #13231c;
  --surface: #172a21;
  --surface-2: #1d3329;
  --accent: #a9c2b2;
  --accent-soft: #c3d2c8;
  --accent-rgb: 169, 194, 178;
  --ink: #f2f2ee;
  --ink-soft: #b9bfba;
  --ink-mute: #8b928d;
  --ink-rgb: 242, 242, 238;
  --brass: #b9b3a2;
  --line: rgba(242, 242, 238, 0.13);
  --line-strong: rgba(242, 242, 238, 0.26);
  --btn-bg: #f2f2ee;
  --btn-bg-hover: #ffffff;
  --btn-fg: #0f1c16;
  --logo-gradient: linear-gradient(90deg, #f2f2ee 0%, #f2f2ee 46%, #c3d2c8 66%, #a9c2b2 84%, #b5cbbd 100%);
}
.hero::before { background: radial-gradient(60% 50% at 78% 28%, var(--glow), transparent 70%); }
.game { background: linear-gradient(165deg, #1a2f25, #0f1c16); }
.shift-card.is-geo, .service.is-featured { background: linear-gradient(155deg, #1d3529, #0f1c16); }
.audit { background: radial-gradient(70% 60% at 85% 0%, #193026, transparent 70%), var(--bg); }

h1, h2, h3 { font-weight: 500; letter-spacing: -0.022em; line-height: 1.06; }
h1 em, h2 em, .statement em, .four li em { font-style: normal; color: var(--accent); }
.hero-title { font-size: clamp(38px, 4.7vw, 70px); line-height: 1.04; }
.h2 { font-size: clamp(33px, 4.3vw, 60px); line-height: 1.06; }
.stat-title { font-size: clamp(25px, 2.9vw, 40px); line-height: 1.14; font-weight: 500; }
.stat-num { font-weight: 500; letter-spacing: -0.05em; }
.stat-num i { font-style: normal; }
.statement { font-size: clamp(28px, 3.7vw, 52px); line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; max-width: 22ch; }
.four li { font-size: clamp(25px, 3.3vw, 44px); font-weight: 500; letter-spacing: -0.02em; }
.shift-quote { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.2; font-weight: 500; }
.game-question { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.25; font-weight: 500; }
.game-final h3 { font-size: clamp(26px, 2.6vw, 34px); }
.panel-title { font-size: 22px; font-weight: 500; }
.gauge-num { font-size: 38px; font-weight: 500; }
.level-range { font-size: 20px; font-weight: 500; }
.pillar h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; }
.pillar-num { font-style: normal; font-size: 17px; font-weight: 500; }
.service h3 { font-size: 25px; }
.service.is-featured h3 { font-size: clamp(28px, 3vw, 40px); }
.service.is-special h3 { font-size: clamp(25px, 2.6vw, 34px); }
.service-facts strong { font-size: 40px; font-weight: 500; }
.founder-quote { font-size: clamp(21px, 2.1vw, 29px); line-height: 1.3; letter-spacing: -0.01em; }
.founder-sign { font-size: 22px; font-weight: 500; }
.audit-list li > span { font-style: normal; font-size: 17px; font-weight: 500; }
.audit-contact a { font-size: clamp(21px, 2.1vw, 26px); }
.footer-mail { font-size: 20px; }
.engines li { font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; }
.hero-premium { font-family: var(--sans); font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); }
.band-track { font-style: normal; font-weight: 500; letter-spacing: -0.03em; font-size: clamp(52px, 9vw, 136px); }
.eyebrow { color: var(--ink-mute); }
.on-dark .eyebrow { color: var(--ink-mute); }
.eyebrow::before { background: currentColor; }
/* >>> SERIOUS-TRIAL END <<< */

/* >>> HERO-GLOW START — hero background: soft colour that follows the pointer <<< */
.hero::before { background: none; }
.hero-glow { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-glow span { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; transform: translate3d(calc(var(--x, 72vw) - 50%), calc(var(--y, 40vh) - 50%), 0); }
.hero-glow span:nth-child(1) { width: 78vmax; height: 78vmax; background: radial-gradient(closest-side, rgba(150, 176, 160, 0.5), rgba(150, 176, 160, 0.18) 55%, transparent 100%); }
.hero-glow span:nth-child(2) { width: 42vmax; height: 42vmax; background: radial-gradient(closest-side, rgba(63, 99, 80, 0.34), rgba(63, 99, 80, 0.1) 60%, transparent 100%); }
/* >>> HERO-GLOW END <<< */

/* Footer: the wordmark fills the width, pale and fading into the background */
.footer { padding-bottom: 28px; overflow: hidden; }
.footer > .wrap { container-type: inline-size; }
.footer-top { align-items: center; }
.footer-tag { margin-top: 0; }
.footer .footer-word {
  display: block; margin: clamp(18px, 3vw, 40px) 0 clamp(6px, 1vw, 14px) -0.045em;
  font-size: 21vw; font-size: 23.7cqw; line-height: 0.92; letter-spacing: -0.04em; white-space: nowrap;
  background-image: linear-gradient(180deg, rgba(242, 242, 238, 0.52) 0%, rgba(195, 210, 200, 0.24) 55%, rgba(169, 194, 178, 0.05) 100%);
  transition: opacity 0.6s var(--ease);
}
.footer .footer-word:hover { opacity: 0.8; }
.footer-bottom { margin-top: 0; }

/* >>> METHOD-STAGE START — "How we get you there" as a dark, full-screen stage <<< */
body { overflow-x: clip; }
.method-stage { position: relative; padding-block: clamp(72px, 9vw, 120px); background: #0c1711; color: var(--ink); overflow: clip; }
.section.method-stage, .method-stage + .section { border-top: 0; }
.stage-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(75% 95% at 88% 58%, #2f6b50 0%, #1d4433 36%, rgba(15, 28, 22, 0) 72%), linear-gradient(180deg, #09120d, #0f1c16); }
.stage-blob, .stage-ghost, .stage-foot { display: none; }
.stage-inner { position: relative; z-index: 1; }
.stage-top { display: grid; gap: 18px 48px; align-items: start; }
.stage-top .h2 { margin-top: 14px; }
.stage-lead { max-width: 30ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--ink-soft); }
.stage-cards { display: grid; gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
.stage-card { position: relative; padding: clamp(26px, 3.4vw, 44px); border-radius: 26px; background: rgba(242, 242, 238, 0.07); border: 1px solid rgba(242, 242, 238, 0.16); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .stage-card { -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); }
}
.stage-step { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.stage-card h3 { margin-top: 18px; font-size: clamp(34px, 4.6vw, 64px); line-height: 1; }
.stage-card p { margin-top: 16px; max-width: 46ch; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; color: var(--ink-soft); }
.stage-card .btn { margin-top: 26px; }
@media (min-width: 760px) {
  .stage-top { grid-template-columns: minmax(0, 1fr) auto; }
  .stage-step { position: absolute; top: clamp(26px, 3.4vw, 44px); right: clamp(26px, 3.4vw, 44px); }
  .stage-card h3 { margin-top: 0; padding-right: 150px; }
}

/* Pinned behaviour: only when the script has enabled it (motion allowed) */
.has-stage .method-stage { padding-block: 0; overflow: visible; }
.has-stage .method-stage .scene-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; }
.has-stage .stage-bg { background: radial-gradient(75% 95% at calc(88% - var(--p, 0) * 22%) calc(58% - var(--p, 0) * 14%), #2f6b50 0%, #1d4433 36%, rgba(15, 28, 22, 0) 72%), linear-gradient(180deg, #09120d, #0f1c16); }
.has-stage .stage-blob { display: block; position: absolute; left: 50%; top: 52%; width: 52vmin; height: 44vmin; border-radius: 26% 42% 30% 46%; background: linear-gradient(140deg, rgba(169, 194, 178, 0.55), rgba(47, 107, 80, 0.2) 60%, rgba(9, 18, 13, 0.6)); transform: translate(-50%, -50%) rotate(calc(-14deg + var(--p, 0) * 110deg)) scale(calc(1 + var(--p, 0) * 0.12)); }
.has-stage .stage-ghost { display: flex; position: absolute; left: 0; top: 50%; font-family: var(--logo); font-weight: 600; font-size: clamp(170px, 30vw, 470px); line-height: 1; letter-spacing: -0.05em; white-space: nowrap; color: rgba(242, 242, 238, 0.055); transform: translate3d(calc(12vw - var(--p, 0) * (var(--n, 4) - 1) * 86vw), -50%, 0); will-change: transform; }
.has-stage .stage-ghost span { flex: 0 0 86vw; }
.has-stage .stage-inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-top: calc(var(--nav-h) + clamp(16px, 3vh, 36px)); padding-bottom: clamp(20px, 4vh, 44px); }
.has-stage .stage-top .h2 { font-size: clamp(30px, 3.6vw, 52px); }
.has-stage .stage-cards { flex: 1; align-content: center; justify-items: center; margin: 0; padding-block: clamp(12px, 2vh, 28px); gap: 0; }
.has-stage .stage-card { grid-area: 1 / 1; align-self: center; width: min(100%, 860px); opacity: 0; transform: translate3d(70px, 0, 0) scale(0.98); transition: opacity 0.8s var(--ease), transform 1s var(--ease); pointer-events: none; }
.has-stage .stage-card.is-past { transform: translate3d(-70px, 0, 0) scale(0.98); }
.has-stage .stage-card.is-current { opacity: 1; transform: none; pointer-events: auto; }
.has-stage .stage-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.stage-progress { width: min(240px, 100%); height: 2px; background: rgba(242, 242, 238, 0.22); overflow: hidden; border-radius: 2px; }
.stage-progress i { display: block; height: 100%; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: left; }
.stage-dots { display: flex; gap: 14px; }
.stage-dots i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); transition: background 0.5s var(--ease); }
.stage-dots i.is-on { background: var(--ink); }
.stage-hint { justify-self: end; font-family: var(--serif); font-size: clamp(17px, 1.7vw, 24px); color: var(--ink); transition: opacity 0.6s var(--ease); }
.has-stage .scene-pin.is-last .stage-hint { opacity: 0; }
@media (max-width: 759px) {
  .has-stage .stage-lead { display: none; }
  .has-stage .stage-foot { grid-template-columns: 1fr auto; }
  .has-stage .stage-hint { display: none; }
  .has-stage .stage-ghost span { flex-basis: 120vw; }
  .has-stage .stage-ghost { transform: translate3d(calc(8vw - var(--p, 0) * (var(--n, 4) - 1) * 120vw), -50%, 0); }
}
/* >>> METHOD-STAGE END <<< */

/* >>> TONE START — the dark green glow of the method stage, carried to other dark blocks <<< */
.tone-stage, .audit {
  background: radial-gradient(75% 95% at 88% 45%, #2f6b50 0%, #1d4433 36%, rgba(15, 28, 22, 0) 72%), linear-gradient(180deg, #09120d, #0f1c16);
  color: var(--ink);
}
.tone-stage { background: radial-gradient(70% 95% at 8% 55%, #2f6b50 0%, #1d4433 36%, rgba(15, 28, 22, 0) 72%), linear-gradient(180deg, #09120d, #0f1c16); }
.section.tone-stage, .tone-stage + .section { border-top: 0; }
.footer { background: #0f1c16; }
.game, .shift-card.is-geo, .service.is-featured {
  background: radial-gradient(95% 130% at 100% 100%, #2f6b50 0%, #1d4433 38%, rgba(15, 28, 22, 0) 76%), linear-gradient(165deg, #10201a, #09120d);
  border-color: rgba(242, 242, 238, 0.16);
}
.audit .form { border-radius: 26px; background: rgba(242, 242, 238, 0.07); border: 1px solid rgba(242, 242, 238, 0.16); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .audit .form { -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); }
}
/* >>> TONE END <<< */

.stage-top .h2 { margin-top: 0; }

/* Statement spans the full width of the page */
.statement { max-width: none; font-size: clamp(32px, 5.9vw, 88px); line-height: 1.06; text-wrap: wrap; }

.has-stage .stage-foot { grid-template-columns: 1fr auto 1fr; }
@media (max-width: 759px) { .has-stage .stage-foot { grid-template-columns: 1fr auto; } }

/* =============================================================
   13. Navigation menu on small screens, article pages
   ============================================================= */
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-alt-lang { display: none; }
.nav-toggle { display: inline-grid; place-content: center; gap: 6px; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform 0.35s var(--ease); }
.nav.is-open .nav-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav.is-open .nav-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 999px) {
  .nav-links { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; margin: 0; padding: 6px var(--gutter) 22px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 30px 40px -30px rgba(17, 20, 19, 0.35); font-size: 18px; color: var(--ink); }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .nav-links a::after { display: none; }
  .nav.is-open { background: var(--bg); }
}
@media (max-width: 559px) {
  .nav-tools { gap: 10px; }
  .nav-tools .lang { display: none; }
  .nav-alt-lang { display: block; color: var(--ink-mute); }
}
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
}

.page-head { padding: calc(var(--nav-h) + clamp(44px, 8vw, 110px)) 0 clamp(30px, 4vw, 52px); }
.page-head h1 { margin-top: 18px; max-width: 22ch; font-size: clamp(36px, 5vw, 66px); line-height: 1.04; }
.page-head .lead { max-width: 56ch; }
.crumb { display: inline-flex; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-mute); transition: color 0.2s; }
.crumb:hover { color: var(--ink); }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-mute); }
.page-body { padding-bottom: clamp(72px, 10vw, 140px); }

.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.9em; font-size: clamp(25px, 2.6vw, 34px); line-height: 1.14; }
.prose p, .prose li { font-size: 18px; line-height: 1.72; color: var(--ink-soft); }
.prose p { margin-top: 1.05em; }
.prose ul, .prose ol { margin-top: 1em; padding-left: 1.3em; display: grid; gap: 0.55em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ink); }
.takeaways { padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); }
.prose .takeaways h2 { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
.prose .takeaways li { font-size: 16.5px; line-height: 1.6; color: var(--ink); }

.article-cta { display: grid; gap: 24px 48px; align-items: center; margin-top: clamp(56px, 8vw, 96px); padding: clamp(28px, 4vw, 52px); border-radius: 26px; color: var(--ink);
  background: radial-gradient(95% 130% at 100% 100%, #2f6b50 0%, #1d4433 38%, rgba(15, 28, 22, 0) 76%), linear-gradient(165deg, #10201a, #09120d); }
.article-cta h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.06; }
.article-cta p { margin-top: 12px; max-width: 52ch; color: var(--ink-soft); }
.article-cta .btn { justify-self: start; }

.post-grid { display: grid; gap: 18px; }
.post-card { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); transition: border-color 0.3s, transform 0.4s var(--ease); }
.post-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.post-meta { font-size: 13px; color: var(--ink-mute); }
.post-card h2 { margin-top: 16px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; }
.post-card p { margin-top: 12px; color: var(--ink-soft); }
.post-more { margin-top: auto; padding-top: 22px; font-size: 14.5px; font-weight: 600; color: var(--accent); }
.has-js .post-card.reveal.is-in { transition: opacity 1s var(--ease), border-color 0.3s, transform 0.4s var(--ease); }

@media (min-width: 760px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
  .article-cta { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Footer: social links under the email */
.footer-contact { display: grid; gap: 12px; justify-items: end; }
.footer-social { display: flex; gap: 26px; }
.footer-social a { position: relative; padding-block: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.25s; }
.footer-social a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.footer-social a:hover { color: var(--ink); }
.footer-social a:hover::after { transform: scaleX(1); }
@media (max-width: 559px) {
  .footer-contact { justify-items: start; }
}
.footer-social { gap: 12px; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease); }
.footer-social a::after { display: none; }
.footer-social a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-2px); }
.footer-social svg { width: 20px; height: 20px; }

/* Founder: smaller photo, quote without a label above */
.founder-photo { max-width: 300px; }
.founder-quote { margin-top: 0; }
@media (min-width: 860px) {
  .founder-grid { grid-template-columns: 300px minmax(0, 1fr); }
}

/* >>> HERO-TITLE-SOLID START — hero headline in the logo's solid sans <<< */
.hero-title { font-family: var(--logo); font-weight: 600; font-size: clamp(35px, 4.3vw, 64px); line-height: 1.06; letter-spacing: -0.035em; }
/* >>> HERO-TITLE-SOLID END <<< */

/* Legal links in the footer, hidden anti-spam field, pending marks in legal texts */
.footer-legal { display: inline-flex; flex-wrap: wrap; gap: 6px 22px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose mark.pending { padding: 1px 8px; border-radius: 4px; background: #f3d98b; color: #3a2c00; font-size: 0.82em; font-weight: 600; letter-spacing: 0.06em; }

/* Legal: first-layer privacy notice in the form, tables in legal pages */
.form-legal { margin-top: 22px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--well); }
.form-legal-title { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.form-legal ul { margin-top: 10px; display: grid; gap: 5px; }
.form-legal li { font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }
.form-legal b { font-weight: 600; color: var(--ink-soft); }
.form-legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
mark.pending { padding: 1px 7px; border-radius: 4px; background: #f3d98b; color: #3a2c00; font-size: 0.86em; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.form-legal + .hp + .consent, .form-legal ~ .consent { margin-top: 18px; }
.table-wrap { margin-top: 1.1em; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.prose th, .prose td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.prose th { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); background: var(--bg-2); }
.prose tr:last-child td { border-bottom: 0; color: var(--ink-soft); }

/* Footer fix: the giant wordmark's letters spill over the rows above and below it and were
   catching the clicks meant for the links there. Keep those rows on top and keep the
   wordmark from ever rising above them. */
.footer-top, .footer-bottom { position: relative; z-index: 2; }
.footer .footer-word { position: relative; z-index: 1; transition: none; }
.footer .footer-word:hover { opacity: 1; }

/* =============================================================
   14. Learn section: chapter index, chapters, FAQ, glossary
   ============================================================= */
.learn-link { margin-top: 18px; }
.learn-link a { display: inline-flex; gap: 8px; padding-bottom: 3px; font-size: 15.5px; font-weight: 600; color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb), 0.4); transition: border-color 0.3s, gap 0.3s var(--ease); }
.learn-link a:hover { border-color: var(--accent); gap: 12px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--ink-mute); }
.crumbs a { color: var(--ink-soft); border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; }
.crumbs a:hover { color: var(--ink); border-color: var(--line-strong); }
.page-head h1 { max-width: 20ch; }
.draft { padding: 2px 10px; border-radius: 999px; background: #f3d98b; color: #3a2c00; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }

.learn-grid { display: grid; gap: 18px; counter-reset: none; }
.learn-card { display: flex; flex-direction: column; height: 100%; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); transition: border-color 0.3s, transform 0.4s var(--ease); }
.learn-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.learn-num { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; color: var(--accent); }
.learn-card h2 { margin-top: 18px; font-size: clamp(22px, 2.1vw, 27px); line-height: 1.14; }
.learn-card p { margin-top: 10px; color: var(--ink-soft); }
.learn-meta { display: flex; justify-content: space-between; margin-top: auto; padding-top: 24px; font-size: 13.5px; color: var(--ink-mute); }
.has-js .learn-card.reveal.is-in { transition: opacity 1s var(--ease), border-color 0.3s, transform 0.4s var(--ease); }

.prose .source { margin-top: 0.6em; font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); }
.prose .note { font-size: 14.5px; color: var(--ink-mute); }
.prose h3 { font-size: 20px; line-height: 1.2; }
.prose em { font-style: italic; }
.prose ol.timeline, .prose .trio, .prose .compare { padding-left: 0; list-style: none; }

.compare { display: grid; gap: 14px; margin-top: 1.2em; }
.compare-item { padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); }
.compare-item.is-strong { border-color: transparent; color: #f2f2ee; background: radial-gradient(95% 130% at 100% 100%, #2f6b50 0%, #1d4433 38%, rgba(15, 28, 22, 0) 76%), linear-gradient(165deg, #10201a, #09120d); }
.compare-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.compare-item.is-strong .compare-tag { color: #a9c2b2; }
.prose .compare-q { margin-top: 12px; font-family: var(--serif); font-size: 21px; line-height: 1.25; color: var(--ink); }
.prose .compare-item.is-strong .compare-q { color: #f2f2ee; }
.prose .compare-item p:last-child { margin-top: 10px; font-size: 15.5px; }
.prose .compare-item.is-strong p:last-child { color: #b9bfba; }

.trio { display: grid; gap: 14px; margin-top: 1.2em; }
.trio-item { padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.trio-item span { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--brass); }
.trio-item h3 { margin-top: 10px; }
.prose .trio-item p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; }

.timeline { display: grid; gap: 0; margin-top: 1.2em; border-left: 2px solid var(--line-strong); }
.prose .timeline li { position: relative; padding: 4px 0 26px 26px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.timeline-when { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.timeline h3 { margin-top: 6px; }
.prose .timeline p { margin-top: 6px; font-size: 16.5px; }

.prose table th[scope], .prose tbody th { width: 24%; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); background: transparent; vertical-align: top; }
.prose tbody td { vertical-align: top; line-height: 1.5; }
.prose tbody tr:last-child th { border-bottom: 0; }

.faq { margin-top: 3em; padding-top: 0.4em; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 0.9; color: var(--accent); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.prose .faq details p { margin: 0; padding: 0 0 20px; max-width: 62ch; }

.glossary { display: grid; gap: 0; margin-top: 1.4em; border-top: 1px solid var(--line); }
.glossary > div { display: grid; gap: 4px 28px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.glossary dt { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--ink); }
.glossary dd { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }

.chapter-next { max-width: 70ch; margin-top: clamp(40px, 6vw, 64px); }
.chapter-next-link { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: center; padding: 22px 26px; border-radius: var(--radius); border: 1px solid var(--line-strong); transition: border-color 0.3s, background 0.3s; }
.chapter-next-link:hover { border-color: var(--accent); background: var(--surface); }
.chapter-next-link span { grid-column: 1; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.chapter-next-link strong { grid-column: 1; font-family: var(--serif); font-size: clamp(20px, 2vw, 25px); font-weight: 500; line-height: 1.2; }
.chapter-next-link i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 22px; color: var(--accent); transition: transform 0.3s var(--ease); }
.chapter-next-link:hover i { transform: translateX(5px); }

@media (min-width: 700px) {
  .learn-grid { grid-template-columns: 1fr 1fr; }
  .compare { grid-template-columns: 1fr 1fr; }
  .trio { grid-template-columns: repeat(3, 1fr); }
  .glossary > div { grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 1000px) {
  .learn-grid { grid-template-columns: repeat(3, 1fr); }
}

.learn-grid { list-style: none; padding: 0; margin: 0; }
.learn-grid > li { display: block; }

@media (max-width: 699px) {
  .prose .table-wrap table { min-width: 540px; }
  .prose tbody th { width: 22%; }
}

/* >>> MOTION-POLISH START (prueba: mejoras de animación y móvil) */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* 2. Sin parpadeo gris al tocar; toque inmediato */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, select, label, .game-option { touch-action: manipulation; }
.btn, .game-option, .nav-toggle, .lang a, .footer-social a { -webkit-user-select: none; user-select: none; }

/* 1. Los efectos de "pasar el ratón" solo existen con ratón: en el móvil no se quedan enganchados */
@media (hover: none), (pointer: coarse) {
  .btn-primary:hover { background: var(--btn-bg); box-shadow: 0 14px 30px -16px rgba(16, 22, 15, 0.6); }
  .btn-primary:hover .arrow { transform: none; }
  .btn-ghost:hover { border-color: var(--line-strong); background: transparent; }
  .game-option:not(:disabled):hover { border-color: var(--line); background: rgba(var(--ink-rgb), 0.03); transform: none; }
  .pillar:hover { background: transparent; }
  .pillar:hover > * { transform: none; }
  .pillar:hover h3 { color: inherit; }
  .service:hover, .post-card:hover, .learn-card:hover { border-color: var(--line); transform: none; }
  .footer-social a:hover { background: transparent; color: var(--ink); border-color: var(--line-strong); transform: none; }
  .chapter-next-link:hover { border-color: var(--line); background: transparent; }
  .chapter-next-link:hover i { transform: none; }
  .learn-link a:hover { gap: 8px; }
}

/* 3. Todo lo que se pulsa se "hunde" un poco, y rápido */
.btn { transition: transform 160ms var(--ease-out), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.btn:active { transform: scale(0.97); }
.game-option { transition: border-color 0.25s, background 0.25s, transform 160ms var(--ease-out), opacity 0.3s; }
.game-option:not(:disabled):active { transform: scale(0.985); }
.nav-toggle, .footer-social a, .lang a { transition: transform 160ms var(--ease-out), background 0.3s, color 0.3s, border-color 0.3s; }
.nav-toggle:active, .footer-social a:active, .lang a:active { transform: scale(0.94); }

/* 4. La entrada de la portada termina antes: los botones aparecen enseguida */
.hero-title .w > span { animation-duration: 1s; animation-delay: calc(var(--i) * 55ms + 120ms); }
.hero-copy .eyebrow { animation-duration: 0.8s; animation-delay: 0.05s; }
.hero .game { animation-duration: 1s; animation-delay: 0.45s; }
.hero-lead { animation-duration: 0.8s; animation-delay: 0.5s; }
.hero-actions { animation-duration: 0.8s; animation-delay: 0.6s; }
.hero-note, .hero-premium { animation-duration: 0.8s; animation-delay: 0.72s; }
.hero .engines { animation-duration: 0.9s; animation-delay: 0.85s; }

/* 6. "Qué mide": el mismo gesto al pasar el ratón, pero moviendo el texto en vez de ensanchar la fila */
.pillar { padding-inline: 0; transition: background 0.4s var(--ease); }
.pillar > *, .has-fx .pillar > * { transition: transform 0.4s var(--ease), opacity 0.6s var(--ease), color 0.3s; }
.pillar:hover { padding-inline: 0; }
@media (hover: hover) and (pointer: fine) {
  .pillar:hover > * { transform: translateX(14px); }
}

/* 7. El menú del móvil entra con un gesto corto desde arriba */
@media (max-width: 999px) {
  .nav.is-open .nav-links { animation: menu-in 220ms var(--ease-out) both; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* 5. "Reducir movimiento": las cosas aparecen suavemente, pero sin desplazarse */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal, .has-js .h2.reveal, .has-js .founder-photo.reveal,
  .has-js .shift-card.reveal, .has-js .shift-card.is-geo.reveal, .has-js .four li.reveal,
  .has-js .panel .level { transform: none !important; transition: opacity 0.5s ease !important; transition-delay: 0ms !important; }
  .hero-title .w > span { animation: none; transform: none; }
  .hero-copy .eyebrow, .hero .game, .hero-lead, .hero-actions, .hero-note, .hero-premium, .hero .engines, .game-final { animation: fade-in 0.5s ease both; animation-delay: 0s; }
  .nav.is-open .nav-links { animation: fade-in 0.15s ease both; }
  .pillar:hover > *, .btn-primary:hover .arrow, .chapter-next-link:hover i { transform: none; }
  .btn:active, .game-option:not(:disabled):active, .nav-toggle:active, .footer-social a:active, .lang a:active { transform: none; }
}
/* <<< MOTION-POLISH END */

/* >>> SCROLL-LINE START (prueba: línea verde que se dibuja al bajar) */
#main { position: relative; }
.scroll-line { position: absolute; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.scroll-line path { fill: none; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; opacity: 0.86; }
@media (max-width: 759px) { .scroll-line path { stroke-width: 15; } }
/* <<< SCROLL-LINE END */

/* >>> SPREAD-TITLE START (prueba: frase que se abre y se amplía al bajar) */
.spread { margin-top: 0; }
.spread-title { font-size: clamp(46px, 9.4vw, 156px); line-height: 1.02; letter-spacing: -0.025em; text-wrap: initial; }
.spread-line { display: flex; justify-content: space-between; gap: 0.3em; }
.spread-line.is-one { justify-content: center; }
.spread-title .sw { display: inline-block; white-space: nowrap; }
.has-spread .spread { position: relative; height: 380vh; margin-inline: calc(50% - 50vw); }
.has-spread .spread-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; padding-inline: var(--gutter); }
.has-spread .spread-title { width: 100%; transform-origin: 50% 50%; }
.has-spread .spread-title .sw { will-change: auto; }
.has-spread .spread.is-gone .spread-title { visibility: hidden; }
.has-spread #shift .learn-link { margin-top: 0; }
/* <<< SPREAD-TITLE END */
.spread.is-measuring .spread-line { justify-content: center; gap: 0.26em; }

/* >>> SPREAD-STAGE START (prueba: escena verde oscuro con aro de luz y preguntas flotando) */
.has-spread .spread-pin { position: sticky; isolation: isolate; color: #f1ecdd;
  background: radial-gradient(85% 75% at 50% 52%, #17301f 0%, #0d1a12 52%, #070f0a 100%); }
.has-spread .spread-title { position: relative; z-index: 3; color: #f1ecdd; }
.has-spread .spread-title em { color: #9db597; }
.spread-ring, .spread-qs { display: none; }
.has-spread .spread-ring { display: block; position: absolute; left: 50%; top: 50%; z-index: 1; width: min(84vw, 92vh); aspect-ratio: 1; margin: calc(min(84vw, 92vh) / -2) 0 0 calc(min(84vw, 92vh) / -2); pointer-events: none; will-change: transform, opacity; }
.spread-ring i { position: absolute; inset: 0; border-radius: 50%; }
.spread-ring .glow { background: radial-gradient(closest-side, rgba(47, 107, 80, 0.32), rgba(47, 107, 80, 0.08) 62%, transparent 78%); }
.spread-ring .band { background: conic-gradient(from 0deg, rgba(157, 181, 151, 0.05), rgba(185, 205, 175, 0.75), rgba(138, 106, 43, 0.5), rgba(47, 107, 80, 0.85), rgba(157, 181, 151, 0.1), rgba(214, 226, 200, 0.7), rgba(157, 181, 151, 0.05));
  -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 89%, #000 92%, transparent 99%); mask: radial-gradient(closest-side, transparent 84%, #000 89%, #000 92%, transparent 99%);
  filter: blur(10px); animation: ring-spin 38s linear infinite; }
@keyframes ring-spin { to { transform: rotate(1turn); } }
.has-spread .spread-qs { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: transform, opacity; }
.spread-q { position: absolute; max-width: min(320px, 70vw); padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(241, 236, 221, 0.14); background: rgba(241, 236, 221, 0.035);
  font-family: var(--sans); font-size: 14px; line-height: 1.35; color: rgba(241, 236, 221, 0.5); white-space: normal; animation: q-float var(--t, 11s) ease-in-out var(--dl, 0s) infinite alternate; transition: opacity 0.9s ease; }
.spread-q.is-swap { opacity: 0; }
@keyframes q-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--dx, 10px), var(--dy, -18px), 0); } }
@media (max-width: 759px) { .spread-q { max-width: 58vw; font-size: 12px; padding: 7px 12px; } .spread-q.is-extra { display: none; } }
/* <<< SPREAD-STAGE END */

/* "¿Nuevo en esto?" moved into the hero, under the premium line */
.hero-learn { margin-top: 14px; animation: rise 0.8s var(--ease) 0.8s both; }
@media (prefers-reduced-motion: reduce) { .hero-learn { animation: fade-in 0.5s ease both; } }
.hero-learn { margin-top: 22px; }

/* No thin dividing lines between sections */
.section + .section { border-top: 0; }
.band { border-top: 0; }

/* "No competimos…": centred and a little lower */
#shift .statement { margin-top: clamp(110px, 13vw, 200px); margin-inline: auto; text-align: center; }

/* Smoothness: the line paints on its own layer; the scene's loops pause while it is off screen */
.scroll-line { will-change: transform; }
.spread:not(.is-live) .spread-ring .band, .spread:not(.is-live) .spread-q { animation-play-state: paused; }

/* >>> CLARITY-LAYOUT START (portada reordenada: qué hacemos, para quién y servicios al principio) */
/* Hero: one column, the message first */
.hero-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.hero-grid.is-solo .hero-copy { max-width: 980px; }
.hero-grid.is-solo .hero-title { font-size: clamp(36px, 5.2vw, 76px); max-width: 17ch; }
.hero-grid.is-solo .hero-lead { font-size: clamp(18px, 1.7vw, 22px); color: var(--ink); }
.hero { padding-bottom: clamp(40px, 5vw, 72px); }
.hero-services { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 24px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); animation: rise 0.8s var(--ease) 0.72s both; }
.hero-services span { display: inline-flex; align-items: center; gap: 14px; }
.hero-services span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

/* Services: four clear cards right after the hero */
.services-first { padding-top: clamp(32px, 4vw, 56px); }
.svc-grid { display: grid; gap: 16px; margin-top: clamp(28px, 3.5vw, 48px); }
@media (min-width: 700px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); transition: border-color 0.3s, transform 0.4s var(--ease); }
.svc.is-featured { border-color: rgba(var(--accent-rgb), 0.45); background: linear-gradient(155deg, #24382a, #121c15); }
.svc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.svc-num { font-family: var(--serif); font-size: 17px; color: var(--ink-mute); }
.svc-badge { padding: 4px 10px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.14); color: var(--accent); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; }
.svc.is-featured .svc-badge { background: var(--accent); color: #121c15; }
.svc h3 { margin-top: 18px; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.08; }
.svc p { margin-top: 14px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.svc p b { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.svc .svc-why { color: var(--ink); }
.svc-more { margin-top: auto; padding-top: 22px; align-self: flex-start; font-size: 15px; font-weight: 600; color: var(--accent); }
.svc-more span { display: inline-block; transition: transform 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .svc:hover { border-color: var(--line-strong); transform: translateY(-4px); }
  .svc.is-featured:hover { border-color: rgba(var(--accent-rgb), 0.8); }
  .svc:hover .svc-more span { transform: translateX(4px); }
}
.svc:active { transform: scale(0.99); }

/* How we work: indicative timing on each step */
.stage-time { display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(242, 242, 238, 0.22); font-size: 13px; font-weight: 600; color: var(--ink); }
@media (min-width: 760px) { .stage-card .stage-time { position: absolute; top: clamp(58px, 6vw, 78px); right: clamp(26px, 3.4vw, 44px); margin: 0; } }

/* Why now */
.why-now-eyebrow { margin-bottom: clamp(24px, 3vw, 40px); }
.game-slot { max-width: 640px; margin: clamp(64px, 8vw, 110px) auto 0; }

/* Learn block */
.learn-block .btn { margin-top: 28px; }
.learn-list { display: grid; border-top: 1px solid var(--line); }
.learn-list a { display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(19px, 1.8vw, 24px); line-height: 1.25; color: var(--ink); transition: color 0.25s; }
.learn-list a span { color: var(--accent); transition: transform 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .learn-list a:hover { color: var(--accent); } .learn-list a:hover span { transform: translateX(4px); } }
/* <<< CLARITY-LAYOUT END */
@media (max-width: 520px) { .hero-services { flex-wrap: nowrap; gap: 0 9px; font-size: 11.5px; letter-spacing: 0.1em; } .hero-services span { gap: 9px; white-space: nowrap; } }

/* (old centred home learn block removed: the home now uses .learn-cards) */
.learn-list { width: 100%; max-width: 620px; text-align: left; }

/* Game + learn, side by side: play how AI decides, then read why */
.play-learn { display: grid; gap: clamp(40px, 5vw, 64px) clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(72px, 9vw, 130px); scroll-margin-top: calc(var(--nav-h) + 24px); }
@media (min-width: 1000px) { .play-learn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.play-learn-text > div { display: flex; flex-direction: column; align-items: flex-start; }
.play-learn-text .h2 { font-size: clamp(32px, 3.6vw, 52px); }
.play-learn-text .learn-list { margin-top: 28px; max-width: none; }
.play-learn-text .btn { margin-top: 28px; }

/* Learn: centred title + three chapter cards in a row */
.learn-head { display: flex; flex-direction: column; align-items: center; max-width: 760px; margin-inline: auto; text-align: center; }
.learn-head .eyebrow::before { display: none; }
.learn-head .lead { margin-inline: auto; }
.learn-row { display: grid; gap: 16px; margin-top: clamp(32px, 4vw, 52px); }
@media (min-width: 760px) { .learn-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.learn-cards .learn-card { display: flex; flex-direction: column; min-height: 210px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color 0.3s, transform 0.4s var(--ease); }
.learn-cards .learn-card h3 { margin-top: 16px; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.18; }
.learn-cards .learn-num { font-family: var(--serif); font-size: 17px; color: var(--ink-mute); }
.learn-read { margin-top: auto; padding-top: 22px; font-size: 15px; font-weight: 600; color: var(--accent); }
.learn-read span { display: inline-block; transition: transform 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .learn-cards .learn-card:hover { border-color: var(--accent); transform: translateY(-4px); } .learn-cards .learn-card:hover .learn-read span { transform: translateX(4px); } }
.learn-cta { margin-top: clamp(28px, 3.5vw, 44px); text-align: center; }
@media (max-width: 759px) { .learn-cards .learn-card { min-height: 0; } }

/* Play: a short explanation next to the game */
.play-grid { display: grid; gap: clamp(32px, 4vw, 48px) clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 1000px) { .play-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.play-text .lead { max-width: 40ch; }

/* >>> COMPACT-WARM START: less scrolling between blocks, and a little colour so it is not all white */
.section { padding-block: clamp(60px, 7.5vw, 112px); }
.services-first { padding-top: clamp(24px, 3vw, 44px); }
#shift .statement { margin-top: clamp(80px, 9vw, 140px); }
.why-now-eyebrow { margin-bottom: clamp(18px, 2vw, 28px); }
/* soft alternating tones */
#learn { background: var(--bg-2); }
#founder { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
#play { background: radial-gradient(70% 90% at 78% 50%, rgba(var(--accent-rgb), 0.16), transparent 70%), var(--bg); }
#services { background: radial-gradient(60% 80% at 100% 0%, rgba(var(--accent-rgb), 0.09), transparent 70%); }
.learn-cards .learn-card { background: var(--surface-2); }
/* the learn block and the game sit closer together */
#learn { padding-bottom: clamp(48px, 6vw, 88px); }
#play { padding-top: clamp(48px, 6vw, 88px); }
/* <<< COMPACT-WARM END */

/* "Why we bring both worlds together": the classics (press, reputation) + the new (ChatGPT, Gemini, Google) */
.tw-grid { display: grid; gap: clamp(36px, 5vw, 64px) clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 1000px) { .tw-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.tw-text .lead { max-width: 54ch; color: var(--ink); }
.tw-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 30px; }
.tw-chip { display: inline-flex; flex-direction: column; gap: 3px; padding: 12px 18px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 14.5px; color: var(--ink-soft); }
.tw-chip b { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.tw-chip.is-new { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.08); }
.tw-chip.is-new b { color: var(--accent); }
.tw-plus { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--accent); }
.tw-stat { margin: 0; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--radius); background: linear-gradient(155deg, #24382a, #121c15); color: var(--ink); box-shadow: var(--shadow); }
.tw-num { font-family: var(--serif); font-size: clamp(72px, 9vw, 128px); line-height: 0.9; letter-spacing: -0.03em; color: var(--accent); }
.tw-stat figcaption p { margin-top: 18px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.45; color: var(--ink); }
.tw-stat figcaption a { display: inline-block; margin-top: 18px; font-size: 12.5px; color: var(--ink-mute); border-bottom: 1px solid var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .tw-stat figcaption a:hover { color: var(--ink); } }
.tw-num { white-space: nowrap; font-size: clamp(64px, 7.4vw, 112px); }
@media (max-width: 600px) { .tw-pair { flex-direction: column; align-items: stretch; gap: 8px; } .tw-plus { align-self: center; } }

/* Small labels above the titles: no line in front, a little bigger so they read better */
.eyebrow::before { display: none !important; }
.eyebrow { gap: 0; font-size: 13.5px; letter-spacing: 0.18em; }
@media (max-width: 600px) { .eyebrow { font-size: 12.5px; } }

/* Hero top line: who we are and for whom, in plain words */
.hero-kicker { max-width: 44ch; font-size: clamp(15px, 1.25vw, 17px); font-weight: 500; line-height: 1.45; color: var(--accent); animation: rise 0.8s var(--ease) 0.05s both; }
@media (prefers-reduced-motion: reduce) { .hero-kicker { animation: fade-in 0.5s ease both; } }
.hero-grid.is-solo .hero-title { max-width: 21ch; }

/* AI systems row, now inside the hero text column, right under GEO · SEO · Digital PR · Contenido */
.hero-copy .engines { margin-top: 28px; padding-top: 22px; animation: rise 0.8s var(--ease) 0.85s both; }
@media (prefers-reduced-motion: reduce) { .hero-copy .engines { animation: fade-in 0.5s ease both; } }

/* Hero line under the title: in the serif of the section titles, larger and softer, for a more elegant pairing */
.hero-grid.is-solo .hero-lead { max-width: 34ch; margin-top: 22px; font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2vw, 28px); line-height: 1.32; letter-spacing: -0.005em; color: var(--ink-soft); }
.hero-grid.is-solo .hero-lead { max-width: 46ch; }

/* Founder photo */
.founder-photo.has-img { display: block; margin: 0; max-width: 340px; aspect-ratio: 1 / 1; overflow: hidden; border: 0; background: var(--bg-2); box-shadow: 0 30px 60px -36px rgba(16, 22, 15, 0.45); }
.founder-photo.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* Founder on phones: small photo on the left, quote and name on the right */
@media (max-width: 759px) {
  .founder-grid { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: start; }
  .founder-photo.has-img { max-width: 92px; border-radius: 14px; }
  .founder-quote { font-size: 17px; line-height: 1.4; }
  .founder-sign { margin-top: 18px; padding-top: 14px; font-size: 17px; }
}
/* Founder on phones, v2: the photo grows to the full height of the quote, so the left side is never empty */
@media (max-width: 759px) {
  .founder-grid { grid-template-columns: 118px minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .founder-photo.has-img { max-width: none; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 16px; transform: none !important; }
  .founder-photo.has-img img { object-position: 50% 30%; }
}

/* >>> HERO-DARK START: home hero in deep green with cream text (option B, 23 Oct) */
.hero { background: radial-gradient(70% 90% at 85% 25%, #2f5a40 0%, #1b3324 45%, #0f1d14 100%); color: #f1ecdd; padding-bottom: clamp(90px, 9vw, 130px); }
.hero .hero-title { color: #f4f0e4; }
.hero .hero-title em { color: #a9c4a2; }
.hero .hero-lead { color: #c9cfc2 !important; }
.hero .btn-primary { background: #f1ecdd; color: #10160f; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.6); }
.hero .btn-ghost { border-color: rgba(241, 236, 221, 0.35); color: #f1ecdd; }
@media (hover: hover) and (pointer: fine) {
  .hero .btn-primary:hover { background: #fffaf0; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.7); }
  .hero .btn-ghost:hover { border-color: rgba(241, 236, 221, 0.6); background: rgba(241, 236, 221, 0.08); }
}
.hero .hero-services, .hero .engines-label { color: #9fa99a; }
.hero .hero-services span + span::before { background: #a9c4a2; }
.hero .engines { border-color: rgba(241, 236, 221, 0.18); }
.hero .engines li { color: #d6dccf; }
.hero :focus-visible { outline-color: #a9c4a2; }
.hero-glow span:nth-child(1) { background: radial-gradient(closest-side, rgba(157, 181, 151, 0.28), rgba(157, 181, 151, 0.08) 55%, transparent 100%); }
.hero-glow span:nth-child(2) { background: radial-gradient(closest-side, rgba(120, 170, 130, 0.25), transparent 100%); }
.hero::after { height: 80px; background: linear-gradient(180deg, rgba(15, 29, 20, 0), var(--bg)); }
/* top bar matches the dark hero until you scroll (home only) */
body:has(.hero) .nav:not(.is-scrolled):not(.is-open) { --nav-bg: 15, 29, 20; --ink: #f1ecdd; --ink-soft: #c9cfc2; --ink-mute: #9fa99a; --bg: #0f1d14; --line-strong: rgba(241, 236, 221, 0.3); --btn-bg: #f1ecdd; --btn-bg-hover: #fffaf0; --btn-fg: #10160f; --logo-gradient: linear-gradient(90deg, #f1ecdd 0%, #f1ecdd 46%, #b9c4ae 66%, #8fa58a 84%, #9db597 100%); }
/* <<< HERO-DARK END */


/* >>> HERO-MOTION START (prueba): a light passing over "Y habla de tu marca." + a giant faint "bloomox" drifting behind */
.hero-title em .w > span {
  background: linear-gradient(100deg, #a9c4a2 0%, #a9c4a2 38%, #f7f3e8 50%, #a9c4a2 62%, #a9c4a2 100%);
  background-size: 320% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation-name: word-up, title-shine;
  animation-duration: 1s, 7s;
  animation-timing-function: var(--ease), cubic-bezier(0.45, 0, 0.25, 1);
  animation-delay: calc(var(--i) * 55ms + 120ms), calc(var(--i) * 110ms + 2.2s);
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
}
@keyframes title-shine { 0% { background-position: 100% 0; } 32% { background-position: 0% 0; } 100% { background-position: 0% 0; } }
.hero-ghost { position: absolute; z-index: 0; left: 50%; bottom: 4%; font-family: var(--logo); font-weight: 600; font-size: min(30vw, 470px); line-height: 0.8; letter-spacing: -0.05em; white-space: nowrap; color: rgba(242, 242, 238, 0.045); pointer-events: none; user-select: none;
  transform: translateX(-46%); animation: ghost-drift 38s ease-in-out infinite alternate; }
@keyframes ghost-drift { to { transform: translateX(-56%); } }
@media (max-width: 759px) { .hero-ghost { bottom: 2%; font-size: 46vw; } }
@media (prefers-reduced-motion: reduce) {
  .hero-title em .w > span { animation: none; transform: none; background-position: 50% 0; }
  .hero-ghost { animation: none; }
}
/* <<< HERO-MOTION END */
/* HERO-MOTION v2: shine every ~3.5 s (first one right after the title appears), wordmark centred */
.hero-title em .w > span { animation-duration: 1s, 3.6s; animation-delay: calc(var(--i) * 55ms + 120ms), calc(var(--i) * 90ms + 1.3s); }
@keyframes title-shine { 0% { background-position: 100% 0; } 45% { background-position: 0% 0; } 100% { background-position: 0% 0; } }
.hero-ghost { top: 50%; bottom: auto; transform: translate(-46%, -50%); animation-name: ghost-drift-c; }
@keyframes ghost-drift-c { to { transform: translate(-54%, -50%); } }
@media (max-width: 759px) { .hero-ghost { top: 46%; bottom: auto; } }
/* Shine fix: the gradient only paints inside each word's box, so give it room for letters that hang below the line (g, y, p) */
.hero-title .w { padding-bottom: 0.26em; margin-bottom: -0.26em; }
.hero-title em .w > span { padding: 0 0.06em 0.26em; margin: 0 -0.06em -0.26em; }
/* HERO-MOTION v3: the whole word "bloomox" fits on screen and glides from one side to the other */
.hero-ghost { left: 3vw; font-size: min(21vw, 330px); transform: translate(0, -50%); animation: ghost-glide 22s ease-in-out infinite alternate; }
@keyframes ghost-glide { from { transform: translate(0, -50%); } to { transform: translate(calc(94vw - 100% - 8px), -50%); } }
@media (max-width: 759px) { .hero-ghost { font-size: 21vw; } }
@media (prefers-reduced-motion: reduce) { .hero-ghost { animation: none; left: 50%; transform: translate(-50%, -50%); } }
.hero-ghost { font-size: min(18vw, 290px); animation-duration: 14s; }
@media (max-width: 759px) { .hero-ghost { font-size: 19vw; animation-duration: 10s; } }
/* HERO-MOTION v4: original size again; glides far enough to show the whole word (b on the left, then x on the right), gently */
.hero-ghost { font-size: min(30vw, 470px); animation-duration: 40s; }
@media (max-width: 759px) { .hero-ghost { font-size: 46vw; animation-duration: 30s; } }
/* HERO-MOTION v5: starts with the b half off the left edge, ends with the x at the right edge */
.hero-ghost { left: 0; animation-name: ghost-glide-b; }
@keyframes ghost-glide-b { from { transform: translate(-0.3em, -50%); } to { transform: translate(calc(97vw - 100% - 8px), -50%); } }

/* "No competimos…" as a held screen: the scroll draws the arc while the phrase stays put */
.arc-scene { margin-top: clamp(80px, 9vw, 140px); }
.arc-scene .statement { margin-top: 0; }
.has-arc .arc-scene { position: relative; height: 230vh; margin-inline: calc(50% - 50vw); margin-top: clamp(20px, 3vw, 48px); }
.has-arc .arc-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; padding-inline: var(--gutter); }
.has-arc .arc-pin .statement { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0; }
.arc-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; will-change: transform; }
.arc-line path { fill: none; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; opacity: 0.86; }
@media (max-width: 759px) { .arc-line path { stroke-width: 15; } .has-arc .arc-scene { height: 210vh; } }

/* Survey changes (25 Oct): one-line explanation under GEO and SEO; hero service line may wrap on phones */
.svc-sub { margin-top: 6px !important; font-size: 14px !important; line-height: 1.4; color: var(--accent) !important; }
@media (max-width: 520px) { .hero-services { flex-wrap: wrap; row-gap: 6px; } .hero-services span { white-space: normal; } }
@media (max-width: 520px) { .hero-services { gap: 6px 16px; } .hero-services span + span::before { display: none; } }

/* Small audit box halfway through each Aprende article */
.article-mid-cta { margin-top: 2.2em; padding: 22px 26px; border-radius: 18px; border: 1px solid rgba(var(--accent-rgb), 0.28); background: rgba(var(--accent-rgb), 0.06); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.prose .article-mid-cta p { margin: 0; flex: 1 1 280px; font-size: 18px; line-height: 1.45; color: var(--ink); font-weight: 500; }
.prose .article-mid-cta a { flex: none; display: inline-flex; gap: 8px; align-items: center; padding: 12px 20px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 15px; font-weight: 600; text-decoration: none; transition: background 0.25s; }
.prose .article-mid-cta a:hover { background: var(--btn-bg-hover); }

/* Short GEO / SEO explanation next to the card title */
h3 .svc-def { font-family: var(--sans); font-style: italic; font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--accent); vertical-align: 0.15em; }

/* Founder quote: the closing line in the green accent, like the highlighted words in the headings */
.founder-quote em { font-style: normal; color: var(--accent); }

/* Aprende index in blocks (Primeros pasos / Visibilidad en IA / Prensa…) */
.learn-group { margin: clamp(44px, 6vw, 72px) 0 18px; font-size: 12px; font-family: var(--sans); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.learn-group:first-child { margin-top: 0; }
.learn-card h3 { margin-top: 18px; font-size: clamp(22px, 2.1vw, 27px); line-height: 1.14; }

/* Press: "Han hablado de nosotros" strip on the home and the /prensa/ page (data in _herramientas/prensa-articulos.cjs) */
.section.press-strip { padding-block: clamp(52px, 6.5vw, 96px); }
/* Home: one compact row across the full width (title | logo | headline | link); stacked on phones */
.press-band { display: grid; gap: 22px; }
.press-band .press-title { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.08; }
.press-band .press-all { margin-top: 10px; }
.press-band .press-item { display: grid; gap: 14px; justify-items: start; padding-block: 22px; }
.press-band .press-item:first-child { padding-top: 0; }
.press-band .press-media.has-logo img { height: clamp(34px, 3.4vw, 46px); }
.press-band .press-headline { margin-top: 0; max-width: 46ch; font-size: clamp(18px, 1.6vw, 21px); }
.press-band .press-meta { margin-top: 8px; font-size: 11px; }
.press-band .press-read { margin-top: 0; white-space: nowrap; }
@media (min-width: 900px) {
  .press-band { grid-template-columns: minmax(0, 0.85fr) minmax(0, 3fr); align-items: center; gap: clamp(40px, 5vw, 80px); }
  .press-band .press-item { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(28px, 3.4vw, 52px); }
  .press-band .press-item:only-child { padding-block: 0; }
  .press-band .press-list { padding-left: clamp(40px, 5vw, 80px); border-left: 1px solid var(--line); }
}
.press-all { margin-top: 18px; font-size: 14px; font-weight: 500; }
.press-all a { color: var(--ink-mute); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: color 0.25s, border-color 0.25s; }
.press-all a:hover { color: var(--ink); border-color: var(--brass); }
.press-list { display: grid; }
.press-item { padding-block: 26px; border-top: 1px solid var(--line); }
.press-item:first-child { border-top: 0; padding-top: 0; }
.press-media { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
/* Outlet logos in one grey tone, so they sit with the palette; multiply drops the white background */
.press-media.has-logo img { display: block; width: auto; height: clamp(44px, 4.4vw, 60px); filter: grayscale(1) contrast(1.05) brightness(0.95); opacity: 0.8; mix-blend-mode: multiply; }
.press-headline { margin-top: 20px; max-width: 42ch; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.22; color: var(--ink-soft); }
.press-quote { margin-top: 22px; max-width: 32em; padding-left: 20px; border-left: 1px solid var(--brass); font-family: var(--serif); font-size: clamp(21px, 2vw, 27px); line-height: 1.25; color: var(--brass); }
.press-quote small { display: block; margin-top: 8px; font-family: var(--sans); font-size: 12.5px; line-height: 1.4; color: var(--ink-mute); }
.press-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.press-read { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; padding-bottom: 3px; font-size: 15px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line-strong); transition: color 0.25s, border-color 0.25s, gap 0.3s var(--ease); }
.press-read:hover { color: var(--accent); border-color: var(--accent); gap: 12px; }
.press-page-list { max-width: 760px; }
.press-page-list .press-item { padding-block: clamp(30px, 4vw, 48px); }
.press-page-list .press-item:first-child { padding-top: 8px; }