/* ════════════════════════════════════════════════════════════════
   trespiesdesign.com — AMANECER (rainbow-field edition)
   ────────────────────────────────────────────────────────────────
   A parameter system, not a stylesheet of one-offs.
     --dawn (0 → 1)  derived from scroll; drives the horizon progress
                     line, the medallion's elevation, and (as a WebGL
                     uniform) the warmth/rate of the etched rainbow
                     field. Defaults to 1 (risen) without JS.
     --tp-*          the Rainbow layer (16 logo anchors + gradients).
     bare names      the Night Shift base set (kept for canonical
                     token parity; this page's ground is PAPER).
   Ground truth: light. Text is ink; accents are *-deep tokens; body
   text rides scrim cards over the moving field (scout legibility
   strategy). The dark canvas is gone — no navy ground anywhere.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   TresPies — Night Shift (v4)  ·  canonical WEB / site token set
   ────────────────────────────────────────────────────────────────
   Source of truth for public marketing sites:
     · trespies.dev          (trespies-poc/trespies-home/)
     · trespiesdesign.com    (CWD/trespiesdesign.com/)
     · cruzromeromorales.com (trespies-operator/personal-brand/)

   Mirrors the live apex homepage (trespies-poc/trespies-home/styles.css).
   NOT for deliverables — consulting decks / docs / one-pagers keep the
   house print palette in consulting/design-system/tokens.css
   (colors.md · Context C). Do not point deliverables at this file.

   Sites currently inline their :root; paste the block below verbatim.
   Doc: design-systems/TresPies/colors.md · Context A.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Night Shift · canonical ─────────────────────────────────── */
  --bg:      #0a0a0f;   /* page — near-black */
  --bg-alt:  #0c0c14;   /* alt band */
  --surface: #111118;   /* card / panel */
  --raised:  #16161f;   /* raised card, hover */
  --text:    #f0f0f5;   /* primary text */
  --muted:   #9a9aa8;   /* secondary text */
  --subtle:  #6e6e80;   /* captions / meta */
  --accent:  #fbbf24;   /* amber — primary accent, CTA, logo */

  --live:    #34d399;   /* positive / active */
  --gated:   #f59e0b;   /* gated / warning */
  --info:    #60a5fa;   /* informational */

  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  /* Signature gradients */
  --grad:       linear-gradient(135deg, #fbbf24 0%, #ec4899 50%, #8b5cf6 100%);  /* amber→pink→purple: eyebrows, section tags, accents */
  --grad-soft:  linear-gradient(135deg, rgba(251,191,36,0.14), rgba(236,72,153,0.14) 50%, rgba(139,92,246,0.14));
  --grad-title: linear-gradient(120deg, #ffffff 0%, #f2f2f7 38%, #cbb6ff 100%);  /* white→lavender: hero titles */
  --grad-cta:   linear-gradient(135deg, #fcd34d 0%, #f472b6 55%, #8b5cf6 100%);  /* primary buttons (brighter than --grad) */

  --r-card:  16px;
  --r-chip:  999px;
  --r-badge: 6px;
  --wrap:    1120px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Mono", Consolas, monospace;

  /* ── Back-compat aliases (old blue/gold names → Night Shift) ─────
     Let existing site CSS keep resolving without a mass rename.
     Prefer the canonical names above in new work. Custom props resolve
     lazily, so same-block var() aliasing is safe. */
  --bg-deep:        #0a0a0f;
  --bg-card:        var(--surface);
  --bg-card-hover:  var(--raised);
  --bg-surface:     rgba(255,255,255,0.03);
  --border-hover:   var(--border-strong);
  --text-secondary: var(--muted);
  --text-muted:     var(--subtle);
  --gold:           var(--accent);
  --gold-soft:      #f59e0b;
  --gold-glow:      rgba(251,191,36,0.15);
  --green:          var(--live);
  --green-glow:     rgba(52,211,153,0.12);
  --purple:         #8b5cf6;   /* software accent → gradient purple */
  --purple-glow:    rgba(139,92,246,0.14);
  --rust:           #ec4899;   /* research accent → gradient pink */
  --rust-glow:      rgba(236,72,153,0.14);
  --radius:         16px;
  --radius-sm:      10px;
  --max-width:      1120px;
}

/* ════════════════════════════════════════════════════════════════
   TresPies — RAINBOW token set  ·  logo-derived expressive palette
   ────────────────────────────────────────────────────────────────
   Every color below is sampled from the TresPies medallion logo
   (dojo-genesis/frontend/public/logo_trespies_with_name_4096_transparent.png):
   a Southwestern sunrise — near-black ring, a yellow→orange→red
   sunburst, cream mountain peaks, lime/emerald/teal hills + pines,
   and cyan/azure sky zigzags. A genuine full-spectrum rainbow.

   NAMESPACE — every token is prefixed --tp-* so this file drops in
   ALONGSIDE web-tokens.css with zero collision (that file owns bare
   names like --bg / --accent / --grad). Compose freely.
   Doc: design-systems/TresPies/colors.md · Context D.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── SPECTRUM · warm sunrise arc ─────────────────────────────── */
  --tp-cream:    #FEDC82;   /* mountain snow · sun halo */
  --tp-peach:    #FCB75E;   /* dawn dots     */
  --tp-sun:      #FBCE0B;   /* sun core gold */
  --tp-amber:    #FBA80B;   /* amber glow    */
  --tp-orange:   #F98A0B;   /* sunburst rays */
  --tp-ember:    #E7630B;   /* burnt-orange rays */
  --tp-red:      #E73B1F;   /* red ray tips  */
  --tp-brick:    #A11D13;   /* deepest ray shadow */

  /* ── SPECTRUM · cool land + sky arc ───────────────────────────── */
  --tp-lime:     #84BB2C;   /* chartreuse hills */
  --tp-emerald:  #37BB8F;   /* emerald river/valley */
  --tp-teal:     #0B7D91;   /* pine teal */
  --tp-cyan:     #0FA6E6;   /* bright sky cyan */
  --tp-ocean:    #0E6690;   /* deep ocean/azure */

  /* ── NEUTRAL SPINE · the dark that holds it together ──────────── */
  --tp-navy:     #0B0B21;   /* ring navy */
  --tp-ink:      #0C2222;   /* teal-black silhouette */
  --tp-black:    #0A0A0A;   /* deepest outline */
  --tp-paper:    #FAF7EF;   /* logo field cream (off-white background) */

  /* ── SOFT TINTS · badge / chip / highlight backgrounds ────────── */
  --tp-sun-soft:     rgba(251,206,11,0.15);
  --tp-orange-soft:  rgba(249,138,11,0.15);
  --tp-ember-soft:   rgba(231,99,11,0.15);
  --tp-red-soft:     rgba(231,59,31,0.15);
  --tp-lime-soft:    rgba(132,187,44,0.15);
  --tp-emerald-soft: rgba(55,187,143,0.15);
  --tp-teal-soft:    rgba(11,125,145,0.15);
  --tp-cyan-soft:    rgba(15,166,230,0.15);
  --tp-ocean-soft:   rgba(14,102,144,0.16);

  /* ── DEEP SHADES · text-on-light / hover / pressed ───────────────
     All 9 verified ≥4.5:1 (WCAG AA normal text) on --tp-paper. */
  --tp-sun-deep:     #8A6E08;
  --tp-orange-deep:  #A85E06;
  --tp-ember-deep:   #B44E08;
  --tp-red-deep:     #B22318;
  --tp-lime-deep:    #567A1B;
  --tp-emerald-deep: #22785E;
  --tp-teal-deep:    #08596A;
  --tp-cyan-deep:    #0B79A8;
  --tp-ocean-deep:   #0A4C6C;

  /* ── SIGNATURE GRADIENTS · rebuilt from the logo's own light ──── */
  --tp-grad-sunburst: radial-gradient(circle at 50% 62%,
        #FBCE0B 0%, #F98A0B 40%, #E7630B 68%, #E73B1F 100%);
  --tp-grad-spectrum: linear-gradient(120deg,
        #FBCE0B 0%, #F98A0B 20%, #E73B1F 36%,
        #84BB2C 54%, #37BB8F 68%, #0FA6E6 86%, #0E6690 100%);
  --tp-grad-dawn: linear-gradient(180deg,
        #FEDC82 0%, #FBCE0B 28%, #F98A0B 66%, #E73B1F 100%);
  --tp-grad-sky: linear-gradient(135deg, #0FA6E6 0%, #0B7D91 55%, #0E6690 100%);
  --tp-grad-land: linear-gradient(135deg, #84BB2C 0%, #37BB8F 55%, #0B7D91 100%);
  --tp-grad-wash: linear-gradient(120deg,
        rgba(251,206,11,0.12), rgba(231,59,31,0.10) 38%,
        rgba(55,187,143,0.10) 68%, rgba(15,166,230,0.12));

  /* ── CATEGORICAL DATA-VIZ SCALE · ordered for max distinctness ── */
  --tp-cat-1: #FBCE0B;   /* sun gold  */
  --tp-cat-2: #0E6690;   /* ocean     */
  --tp-cat-3: #E7630B;   /* ember     */
  --tp-cat-4: #37BB8F;   /* emerald   */
  --tp-cat-5: #E73B1F;   /* red       */
  --tp-cat-6: #0FA6E6;   /* cyan      */
  --tp-cat-7: #84BB2C;   /* lime      */
  --tp-cat-8: #6B4C8A;   /* bridge violet — NOT in logo */

  /* ── ON-COLOR TEXT · which foreground each anchor needs ───────── */
  --tp-on-cream:    var(--tp-ink);
  --tp-on-peach:    var(--tp-ink);
  --tp-on-sun:      var(--tp-ink);
  --tp-on-amber:    var(--tp-ink);
  --tp-on-orange:   var(--tp-ink);
  --tp-on-lime:     var(--tp-ink);
  --tp-on-emerald:  var(--tp-ink);
  --tp-on-cyan:     var(--tp-ink);
  --tp-on-ember:    var(--tp-ink);
  --tp-on-brick:    var(--tp-paper);
  --tp-on-teal:     var(--tp-paper);
  --tp-on-ocean:    var(--tp-paper);
  --tp-on-navy:     var(--tp-paper);
  --tp-on-red:      var(--tp-ink);   /* large-text / UI only */
}

/* ════════════════════════════════════════════════════════════════
   SITE LAYER · the parameter system, on paper
   ════════════════════════════════════════════════════════════════ */

:root {
  --dawn: 1;                       /* JS-off: the day is up. app.js drives 0→1 */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 640ms;
  --font-serif: Georgia, "Times New Roman", serif;
  --pad-band: clamp(72px, 10vw, 128px);
  --pad-inline: clamp(20px, 4.5vw, 48px);
  --ink-72: rgba(12,34,34,0.75);   /* secondary text on paper ≈ #465352 — 8.0:1 */
  --ink-60: rgba(12,34,34,0.66);   /* meta text on paper ≈ #576262 — 6.3:1 */
  --line: rgba(12,34,34,0.10);     /* hairlines on light */
  --line-strong: rgba(12,34,34,0.18);
  --scrim: rgba(250,247,239,0.85); /* card ground over the field */
  --halo: 0 0 14px var(--tp-paper), 0 0 34px var(--tp-paper);
}

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

html { -webkit-text-size-adjust: 100%; }
html.js:not(.no-motion) { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--tp-ink);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.6;
  overflow-x: hidden;
  /* JS-off / no-WebGL ground: static paper + flat etched grid + rainbow
     wash (the POC-B layer stack, motionless). The shader canvas paints
     over this when it is running. */
  background-color: var(--tp-paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(12,34,34,0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(12,34,34,0.05) 0 1px, transparent 1px 56px),
    var(--tp-grad-wash);
}
/* no-WebGL but JS on: the CSS layers take a gentle drift (POC-B tier) */
html.js:not(.no-motion) body.nogl {
  animation: gridDrift 7s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 56px, 56px 0, 0 0; }
}

/* the field canvas */
#bg { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; display: none; }
body.gl #bg { display: block; }

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, dl, dd, dt { margin: 0; }
ul { padding: 0; list-style: none; }
.mono { font-family: var(--font-mono); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.wrap-narrow { max-width: 820px; }

/* ── focus — visible everywhere on the light ground ────────────── */
:focus-visible {
  outline: 3px solid var(--tp-ocean-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--tp-ink);
  color: var(--tp-sun);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 160ms var(--ease);
}
.skip-link:focus-visible { top: 0; }

/* ── horizon line · scroll progress as spectrum ────────────────── */
.horizon {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  background: var(--tp-grad-spectrum);
  transform: scaleX(var(--dawn));
  transform-origin: 0 50%;
}

/* ── persistent corner mark ────────────────────────────────────── */
.corner-mark {
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 55;
  width: 44px; height: 44px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(12,34,34,0.18), 0 0 0 2px var(--tp-paper);
  pointer-events: none;
}

/* ════════════════ NAV ════════════════ */
.site-head {
  position: absolute;
  top: 3px; left: 0; right: 0;
  z-index: 40;
  background: linear-gradient(180deg, rgba(250,247,239,0.92), rgba(250,247,239,0.55) 70%, rgba(250,247,239,0));
}
.nav {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--pad-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand img:first-child { border-radius: 50%; }
.brand-word { display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.2vw, 26px);
  flex-wrap: wrap;
}
.nav-links > a:not(.btn) {
  color: var(--ink-72);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: color 160ms var(--ease);
}
.nav-links > a:not(.btn):hover { color: var(--tp-ember-deep); }
.lang-pair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--ink-60);
}
.lang-sep { color: var(--ink-60); }
.lang-link {
  color: var(--tp-ocean-deep);
  text-decoration: none;
  border-bottom: 1px dashed rgba(10,76,108,0.5);
  padding-bottom: 1px;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.lang-link:hover { color: var(--tp-ember-deep); border-bottom-color: var(--tp-ember-deep); }

/* ── buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: transform 180ms var(--ease), filter 180ms var(--ease),
              background-color 180ms var(--ease), border-color 180ms var(--ease),
              color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--tp-sun);
  color: var(--tp-ink);
  box-shadow: 0 4px 22px rgba(251,168,11,0.35);
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn-ghost {
  border: 1.5px solid var(--line-strong);
  color: var(--tp-ink);
  background: var(--scrim);
}
.btn-ghost:hover { border-color: var(--tp-ember-deep); background: var(--tp-sun-soft); transform: translateY(-2px); }
.btn-nav {
  padding: 9px 18px;
  font-size: 14.5px;
  background: var(--tp-sun);
  color: var(--tp-ink);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(251,168,11,0.3);
}
.btn-nav:hover { filter: brightness(1.05); }
.btn-day {
  background: var(--tp-ink);
  color: var(--tp-sun);
  font-size: 17px;
  padding: 16px 30px;
  box-shadow: 0 6px 30px rgba(12,34,34,0.25);
}
.btn-day:hover { transform: translateY(-2px); filter: brightness(1.12); }

/* ════════════════ HERO ════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: 96px;
}
.hero-grid {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  padding-bottom: clamp(150px, 20vw, 250px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  width: 100%;
}
.eyebrow {
  color: var(--tp-teal-deep);
  font-size: 14px;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  text-shadow: var(--halo);
}
.hero h1 {
  /* fluid + capped so the single word always fits its grid column —
     at 136px it overran the ~560px left column at 1280/1440 and the
     hero's overflow:hidden clipped the final glyph */
  font-size: clamp(44px, 8.6vw, 104px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
  width: fit-content;
  max-width: 100%;
  padding-right: 0.08em;   /* include the last glyph's overhang in the clip box */
  color: var(--tp-ember-deep);
  background: linear-gradient(115deg, var(--tp-sun-deep) 0%, var(--tp-ember-deep) 46%, var(--tp-red-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 18px rgba(250,247,239,0.9));
}
.thesis {
  margin-top: 22px;
  font-size: clamp(19px, 2.3vw, 26px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--tp-ink);
  max-width: 33ch;
  text-wrap: balance;
  text-shadow: var(--halo);
}
.actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.stat-strip {
  position: relative;
  z-index: 4;
  display: inline-block;
  margin-top: 30px;
  font-size: 14px;
  color: var(--tp-ink);
  letter-spacing: 0.02em;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  max-width: 100%;
}

/* the generated medallion */
.hero-sun {
  position: relative;
  display: flex;
  justify-content: center;
  /* The dawn-rise lives here, on the wrapper, so the mark and its glow halo
     travel together — on .medallion alone the mark drifted ~31px low inside
     a halo that stayed put, and read as off-centre at the top of the page. */
  transform: translateY(calc((1 - var(--dawn)) * 7%));
}
.hero-sun::before {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,206,11,0.18), rgba(254,220,130,0.10) 55%, transparent 72%);
  opacity: calc(0.4 + var(--dawn) * 0.6);
  pointer-events: none;
}
.medallion {
  width: min(42vw, 500px);
  aspect-ratio: 1;
  filter: drop-shadow(0 10px 30px rgba(12,34,34,0.16));
}
.medallion svg { width: 100%; height: 100%; display: block; }
.medallion svg g { transform-box: fill-box; transform-origin: center; }

/* the medallion assembles at dawn (one-time load sequence) */
html.js:not(.no-motion) .medallion .m-ring  { animation: mScale 700ms var(--ease) both; }
html.js:not(.no-motion) .medallion .m-sky   { animation: mFade 600ms var(--ease) 280ms both; }
html.js:not(.no-motion) .medallion .m-land  { animation: mRise 700ms var(--ease) 480ms both; }
html.js:not(.no-motion) .medallion .m-water { animation: mRise 700ms var(--ease) 640ms both; }
html.js:not(.no-motion) .medallion .m-sun   { animation: mSun 900ms var(--ease) 760ms both; }
@keyframes mScale { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mRise  { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mSun   { from { transform: scale(0.55); opacity: 0; } to { transform: none; opacity: 1; } }

html.js:not(.no-motion) .hero-copy > * { animation: riseIn 900ms var(--ease) both; }
html.js:not(.no-motion) .hero-copy > *:nth-child(1) { animation-delay: 350ms; }
html.js:not(.no-motion) .hero-copy > *:nth-child(2) { animation-delay: 500ms; }
html.js:not(.no-motion) .hero-copy > *:nth-child(3) { animation-delay: 650ms; }
html.js:not(.no-motion) .hero-copy > *:nth-child(4) { animation-delay: 800ms; }
html.js:not(.no-motion) .hero-copy > *:nth-child(5) { animation-delay: 950ms; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* the ridge — a soft land band on the light ground */
.ridge {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  z-index: 3;
  pointer-events: none;
}
.ridge svg { display: block; width: 100%; height: clamp(110px, 16vw, 240px); }
.ridge .r-back  { fill: rgba(132,187,44,0.20); }
.ridge .r-mid   { fill: rgba(55,187,143,0.24); }
.ridge .r-front { fill: rgba(11,125,145,0.26); }
.ridge .r-pines { fill: rgba(11,125,145,0.4); }

/* ════════════════ SHARED BAND PIECES ════════════════ */
.band { position: relative; padding-block: var(--pad-band); }

.marker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  color: var(--tp-ember-deep);
  margin-bottom: 18px;
  text-shadow: var(--halo);
}
.sun-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--tp-grad-sunburst);
  flex: none;
}
.section-title {
  font-size: clamp(30px, 4.4vw, 47px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--tp-ink);
  max-width: 24ch;
  text-wrap: balance;
  text-shadow: var(--halo);
}
.section-lead {
  margin-top: 14px;
  font-size: 17.5px;
  color: var(--ink-72);
  max-width: 52ch;
  text-shadow: var(--halo);
}
/* offers honesty legend — defines the chip vocabulary in one muted line */
.honest-legend {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-60);
  text-shadow: var(--halo);
}
.honest-legend b { color: var(--tp-ember-deep); font-weight: 700; }

/* reveal choreography — JS adds .in; without JS everything is visible */
html.js:not(.no-motion) .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.js:not(.no-motion) .reveal.in {
  opacity: 1;
  transform: none;
}

/* text links — deep tokens on the light ground */
.textlink {
  color: var(--tp-ocean-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(10,76,108,0.4);
  text-underline-offset: 4px;
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}
.textlink:hover { color: var(--tp-ember-deep); text-decoration-color: var(--tp-ember-deep); }
.textlink-day {
  color: var(--tp-ocean-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(10,76,108,0.4);
}
.textlink-day:hover { text-decoration-color: var(--tp-ocean-deep); }

/* scrim card — the shared surface over the moving field
   (scout legibility strategy: paper 85% + blur ⇒ effective surface
   ≈ paper, ink holds ~15:1; the field never competes with prose) */
.offer-col, .vent-card, .lab-card, .founder, .metrics-card, .proof-card, .params-panel {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(12,34,34,0.06);
}

/* ════════════════ 01 · OFFER LADDER ════════════════ */
/* Inline etched diagrams (process arc in #work, capability→proof map in
   #proof). Each keeps its own <title>/<desc> for screen readers. Wide
   diagrams scroll inside their own overflow-x container so the page body
   never scrolls horizontally; a min-width on narrow screens keeps the
   fine labels legible (scroll to read) instead of shrinking to a blur. */
.diagram-figure { margin: 30px 0 4px; }
.diagram-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.diagram-scroll svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 22px rgba(12,34,34,0.06));
}
@media (max-width: 640px) {
  .diagram-scroll svg { min-width: 600px; }
}

.rays-connector { margin-top: 8px; }
.rays-connector svg { display: block; width: 100%; height: clamp(56px, 8vw, 110px); }
.rc { stroke-width: 2; fill: none; stroke-dasharray: 640; stroke-dashoffset: 0; }
.rc-warm  { stroke: var(--tp-ember-deep); opacity: 0.55; }
.rc-green { stroke: var(--tp-emerald-deep); opacity: 0.55; }
.rc-blue  { stroke: var(--tp-cyan-deep); opacity: 0.55; }
html.js:not(.no-motion) .rays-connector .rc { stroke-dashoffset: 640; }
html.js:not(.no-motion) .rays-connector.in .rc {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms var(--ease) 180ms;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 6px;
}
.offer-col {
  --col: var(--tp-ember);
  --col-deep: var(--tp-ember-deep);
  --col-soft: var(--tp-ember-soft);
  position: relative;
  border-top: 3px solid var(--col);
  border-radius: var(--r-card);
  padding: 28px 26px 20px;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.offer-col:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  border-top-color: var(--col);
  box-shadow: 0 14px 40px rgba(12,34,34,0.10);
}
.col-warm  { --col: var(--tp-ember);   --col-deep: var(--tp-ember-deep);   --col-soft: var(--tp-ember-soft); }
.col-green { --col: var(--tp-emerald); --col-deep: var(--tp-emerald-deep); --col-soft: var(--tp-emerald-soft); }
.col-blue  { --col: var(--tp-cyan);    --col-deep: var(--tp-cyan-deep);    --col-soft: var(--tp-cyan-soft); }
.col-glyph {
  display: inline-flex;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--col-soft);
  color: var(--col-deep);
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.col-glyph svg { width: 28px; height: 28px; }
.offer-col h3 {
  font-size: 21.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tp-ink);
}
.col-lede {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-72);
  min-height: 3.1em;
}
.rungs { margin-top: 18px; }
.rungs li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 13px;
  border-top: 1px dashed var(--line-strong);
}
.rung-name { font-size: 15.5px; font-weight: 600; color: var(--tp-ink); }
.rung-meta { display: flex; align-items: center; gap: 10px; }
.price {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--tp-ember-deep);
  letter-spacing: 0.02em;
}
.rung-flagship { border-top: 2px solid var(--col); }
.rung-flagship .rung-name { font-size: 17px; font-weight: 800; }
.rung-flagship .price { font-size: 14.5px; }

.chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-chip);
  /* ink text on every tint (≥14:1); the hue lives in bg + border —
     *-deep on *-soft measured 3.9–4.4:1 at this size, below AA */
  color: var(--tp-ink);
}
.chip-live { background: var(--tp-emerald-soft); border: 1px solid rgba(34,120,94,0.5); }
.chip-open { background: var(--tp-sun-soft); border: 1px solid rgba(138,110,8,0.5); }
.chip-form { background: var(--tp-cyan-soft); border: 1px solid rgba(11,121,168,0.5); }
.chip-flag { background: var(--tp-sun); border: 1px solid rgba(138,110,8,0.5); }
.chip-recent { background: var(--tp-orange-soft); border: 1px solid rgba(168,94,6,0.55); }
.chip-new { background: var(--tp-cyan-soft); border: 1px solid rgba(11,121,168,0.5); }

/* ════════════════ 02 · PROOF ════════════════ */
.metrics-card {
  border-radius: var(--r-card);
  padding: clamp(24px, 3.5vw, 44px);
  margin-top: 44px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);
}
.metric {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;   /* column-reverse ⇒ numerals share a cap line */
  gap: 10px;
}
.metric dd {
  font-size: clamp(42px, 5.4vw, 64px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--tp-ink);
  white-space: nowrap;
}
.metric-wide dd { font-size: clamp(36px, 4.2vw, 50px); }
.metric .pre, .metric .suf { font-size: 0.62em; font-weight: 800; color: var(--tp-ember-deep); }
.metric .tick {
  display: block;
  width: 64px;
  height: 5px;
  border-radius: 3px;
  margin-top: 14px;
}
.t-1 { background: var(--tp-cat-1); }
.t-2 { background: var(--tp-cat-2); }
.t-3 { background: var(--tp-cat-3); }
.t-4 { background: var(--tp-cat-4); }
.t-5 { background: var(--tp-cat-5); }
.t-6 { background: var(--tp-cat-6); }
.t-7 { background: var(--tp-cat-7); }
.metric dt {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-72);
  max-width: 24ch;
}
/* proof — a prose opener, then uneven-length items on a scrim card
   (each leads with an emphasized figure; no counter — numbers are set,
   not animated, per the copy deck) */
.proof-lead {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.6;
  color: var(--tp-ink);
  max-width: 60ch;
  text-shadow: var(--halo);
}
.proof-card {
  border-radius: var(--r-card);
  padding: clamp(20px, 3vw, 38px);
  margin-top: 28px;
}
.proof-item {
  padding-block: 20px;
  border-top: 1px solid var(--line-strong);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-72);
  max-width: 74ch;
}
.proof-item:first-child { border-top: none; padding-top: 2px; }
.proof-item:last-child { padding-bottom: 2px; }
.proof-figure { font-weight: 800; color: var(--tp-ink); }
.proof-item:nth-child(1) .proof-figure { color: var(--tp-red-deep); }
.proof-item:nth-child(2) .proof-figure { color: var(--tp-emerald-deep); }
.proof-item:nth-child(3) .proof-figure { color: var(--tp-ember-deep); }
.proof-item:nth-child(4) .proof-figure { color: var(--tp-teal-deep); }

/* ════════════════ 03 · VENTURES & LAB ════════════════ */
.vent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 40px;
}
.vent-card {
  position: relative;
  border-radius: var(--r-card);
  padding: 28px;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.vent-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(12,34,34,0.10); }
.vent-card::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
}
.vent-ns::before { background: linear-gradient(90deg, var(--tp-amber), var(--tp-ember)); }
.vent-sc::before { background: linear-gradient(90deg, var(--tp-emerald), var(--tp-teal)); }
.vent-shot {
  display: block;
  width: 64px; height: 44px;
  color: var(--tp-ember-deep);
  margin-bottom: 16px;
}
.vent-sc .vent-shot { color: var(--tp-emerald-deep); }
.vent-shot svg { width: 100%; height: 100%; display: block; }
.vent-tag {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tp-ember-deep);
  margin-bottom: 12px;
}
.vent-sc .vent-tag { color: var(--tp-emerald-deep); }
.vent-card h3 { font-size: 23px; font-weight: 800; color: var(--tp-ink); }
.vent-card p { margin-top: 10px; font-size: 15.5px; color: var(--ink-72); line-height: 1.6; }
.vent-card .textlink { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 14px; }

.lab-title {
  margin-top: 52px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--tp-ink);
  text-shadow: var(--halo);
}
.lab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: 18px;
}
.lab-card {
  border-left: 3px solid var(--tp-teal);
  border-radius: 12px;
  padding: 20px;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.lab-card:nth-child(2) { border-left-color: var(--tp-cyan); }
.lab-card:nth-child(3) { border-left-color: var(--tp-lime); }
.lab-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(12,34,34,0.09); }
.lab-card h4 { font-size: 16.5px; font-weight: 700; color: var(--tp-ink); }
.lab-card p { margin-top: 6px; font-size: 14px; color: var(--ink-72); line-height: 1.55; }
.lab-card .textlink { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 13px; }
.lab-line {
  margin-top: 44px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tp-ink);
  text-shadow: var(--halo);
}
.meta-line {
  margin-top: 44px;
  display: inline-block;
  font-size: 15px;
  color: var(--ink-72);
  max-width: 66ch;
  line-height: 1.7;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
}

/* ════════════════ 04 · FOUNDER ════════════════ */
.founder {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 40px);
  margin-top: 40px;
  align-items: start;
  border-radius: var(--r-card);
  padding: clamp(24px, 3.5vw, 40px);
}
.founder-mark { border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 6px 24px rgba(251,168,11,0.25); }
.founder-text p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--tp-ink);
  max-width: 58ch;
}
.founder-text p + p { margin-top: 20px; }
.founder-sig {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--tp-ember-deep);
}
.sig-role { color: var(--ink-60); }

/* ════════════════ DAYBREAK · the sky ignites ════════════════ */
.daybreak {
  position: relative;
  height: clamp(180px, 26vw, 320px);
  background: linear-gradient(180deg,
    rgba(254,220,130,0) 0%,
    var(--tp-cream) 20%,
    var(--tp-sun) 42%,
    var(--tp-amber) 60%,
    var(--tp-ember) 78%,
    var(--tp-red) 94%);
}
.daybreak-ridge {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: clamp(90px, 14vw, 200px);
}
.daybreak-ridge .r-mid { fill: rgba(12,34,34,0.62); }
.daybreak-ridge .r-front { fill: var(--tp-ink); }

/* ════════════════ 05 · CONTACT — full daylight ════════════════ */
.band-contact {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(251,206,11,0.20), transparent 70%),
    var(--tp-paper);
  color: var(--tp-ink);
  text-align: center;
}
.band-contact .marker { color: var(--tp-ember-deep); }
.band-contact .section-title { color: var(--tp-ink); margin-inline: auto; }
.contact-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(31px, 4.6vw, 54px);
  letter-spacing: 0;
}
.contact-sub {
  margin: 20px auto 0;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink-72);
  max-width: 46ch;
}
.contact-actions {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.contact-meta {
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--tp-teal-deep);
}

/* ════════════════ FOOTER · the field runs on ════════════════ */
.site-foot {
  position: relative;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  padding-block: 56px 40px;
}
.site-foot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tp-grad-spectrum);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 32px 48px;
  align-items: start;
}
.foot-brand { display: flex; gap: 14px; align-items: center; }
.foot-brand img { border-radius: 50%; }
.foot-name { font-weight: 800; font-size: 17px; color: var(--tp-ink); }
.foot-line { font-size: 14px; color: var(--ink-72); margin-top: 2px; }
.foot-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-self: end;
  text-align: right;
}
.foot-links a {
  color: var(--tp-ocean-deep);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 14px;
  transition: color 160ms var(--ease);
}
.foot-links a:hover { color: var(--tp-ember-deep); }
.foot-legal {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--ink-60);
  letter-spacing: 0.03em;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

/* ── parámetros · the working exhibit ──────────────────────────── */
.params { grid-column: 1 / -1; }
.params-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  color: var(--tp-ember-deep);
  font-size: 13.5px;
  letter-spacing: 0.1em;
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.params-toggle:hover { border-color: var(--tp-ember-deep); background: var(--tp-sun-soft); }
.params-toggle[aria-expanded="true"] { border-style: solid; border-color: var(--tp-ember-deep); }
.params-panel {
  margin-top: 18px;
  max-width: 560px;
  border-radius: var(--r-card);
  padding: 24px;
}
.params-note { font-size: 12.5px; color: var(--ink-72); margin-bottom: 12px; letter-spacing: 0.02em; }
.params-pipe {
  font-size: 12px;
  line-height: 1.9;
  color: var(--tp-ember-deep);
  background: var(--tp-sun-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.param-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 56px;
  align-items: center;
  gap: 14px;
  padding-block: 10px;
}
.param-row + .param-row { border-top: 1px dashed var(--line); }
.param-row label, .param-row .param-label { font-size: 13px; color: var(--ink-72); }
.param-row output { font-size: 13px; color: var(--tp-ink); text-align: right; }
.param-row input[type="range"] { width: 100%; accent-color: var(--tp-ember-deep); }
.param-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--tp-ember-deep); justify-self: start; }
.btn-seed {
  background: var(--tp-sun-soft);
  border: 1px solid rgba(138,110,8,0.4);
  color: var(--tp-sun-deep);
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.btn-seed:hover { background: rgba(251,206,11,0.28); border-color: var(--tp-sun-deep); }

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: 108px; padding-bottom: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 8px; padding-bottom: 128px; }
  .hero-sun { order: -1; }
  .medallion { width: min(56vw, 300px, 34svh); }
  .eyebrow { margin-bottom: 10px; }
  .thesis { margin-top: 12px; }
  .actions { margin-top: 20px; }
  .stat-strip { margin-top: 18px; }
  .offer-grid { grid-template-columns: 1fr; }
  .col-lede { min-height: 0; }
  .rays-connector { display: none; }
  .vent-grid { grid-template-columns: 1fr; }
  .lab-grid { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .founder-mark { width: 88px; height: 88px; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-links { justify-self: start; text-align: left; }
  .param-row { grid-template-columns: 1fr; gap: 8px; }
  .param-row output { text-align: left; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  /* brand + EN|ES + Book share the first row; links flow beneath */
  .nav { padding-block: 12px; }
  .btn-nav { position: absolute; top: 14px; right: 16px; }
  .lang-pair { position: absolute; top: 24px; right: 94px; }
  .nav-links { gap: 14px; }
  .nav-links > a:not(.btn) { font-size: 14px; }
  .brand { gap: 10px; }
  .brand img:first-child { width: 40px; height: 40px; }
  .brand-word { height: 20px; width: auto; }
  .actions .btn { width: 100%; }
  .metric dd { font-size: 46px; }
  .metric-wide dd { font-size: 38px; }
  .corner-mark { width: 36px; height: 36px; right: 10px; bottom: 10px; }
}

/* ════════════════ REDUCED MOTION ════════════════ */
/* The static state is the risen day: one engraved field frame, the
   medallion fully assembled, no scroll-driven changes. The parámetros
   motion switch (html.force-motion) may re-enable motion as an
   explicit user choice. */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html:not(.force-motion) { scroll-behavior: auto !important; }
}
html.no-motion .reveal { opacity: 1 !important; transform: none !important; }
html.no-motion .rays-connector .rc { stroke-dashoffset: 0 !important; }
html.no-motion .medallion svg g,
html.no-motion .hero-copy > * { animation: none !important; }
html.no-motion body { animation: none !important; }