/* trustedexp.com, site styles. Tokens live in tokens.css.
   Motion rules: transform/opacity/clip-path only, curves from tokens, hover gated,
   everything final-state under prefers-reduced-motion. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-base)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color 600ms var(--ease-in-out), color 600ms var(--ease-in-out);
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: var(--wt-light); }
ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--near-black); color: var(--warm-white); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 100; background: var(--near-black); color: var(--warm-white); padding: .75rem 1rem; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 1rem; }

/* Theme flip: while the Ventures section owns the screen the whole page goes dark (JS adds .is-dark). */
html.is-dark {
  --bg: var(--near-black); --text: var(--warm-white); --text-muted: #A7A59F;
  --line: rgba(247, 246, 242, 0.14); --focus: var(--warm-white);
}

/* ---------- Type ---------- */
.label { font: var(--wt-strong) var(--fs-label)/1.2 var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: var(--wt-light); }
.h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.04em; }
.h3 { font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.03em; font-weight: 400; }
.strong { font-weight: var(--wt-strong); letter-spacing: var(--tracking-strong); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-muted); max-width: 34ch; }
.line { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.line__in { display: block; text-wrap: balance; }

/* Buttons and links */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .8rem 1.5rem;
  border: 0; border-radius: 999px; background: var(--text); color: var(--bg);
  font-weight: 500; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), background-color 600ms var(--ease-in-out), color 600ms var(--ease-in-out);
}
.btn:active { transform: scale(.98); }
.textlink { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 3rem; font-weight: 500; text-decoration: none; }
.textlink::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% + .8em); height: 1px; background: currentColor; transform-origin: 0 50%; }
.arrow { display: inline-block; transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a:hover > .arrow, button:hover > .arrow { transform: translateX(3px); }
  a:hover > .arrow--ne { transform: translate(2px, -2px); }
  .textlink::after { transition: transform var(--dur-hover) var(--ease-out); }
  .textlink:hover::after { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top); color: var(--text); transition: color 400ms var(--ease-in-out); }
html.nav-on-dark .nav { --text: var(--warm-white); --bg: var(--near-black); --line: rgba(247, 246, 242, 0.14); --text-muted: #A7A59F; --focus: var(--warm-white); }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: opacity 300ms var(--ease-out), background-color 400ms var(--ease-in-out);
}
.nav.is-scrolled::before { opacity: 1; }
.nav__inner { display: flex; align-items: center; gap: 2.25rem; height: 4.75rem; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.nav__logo { display: block; margin-right: auto; color: var(--text); padding: .75rem 0; transition: color 400ms var(--ease-in-out); }
.te-wordmark { width: 10.5rem; height: auto; }
.nav__links { display: flex; gap: 2.25rem; font-size: var(--fs-sm); }
.nav__links a, .nav__cta { text-decoration: none; padding: .5rem 0; }
.nav__links a { position: relative; }
.nav__cta { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .3rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-hover) var(--ease-out); }
  .nav__links a:hover::after { transform: scaleX(1); }
  .nav__cta { transition: border-color var(--dur-hover) var(--ease-out); }
  .nav__cta:hover { border-color: currentColor; }
}
.langs { display: inline-flex; align-items: center; font: var(--wt-strong) var(--fs-label)/1 var(--font-label); letter-spacing: var(--tracking-label); }
.langs a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .4rem; color: var(--text-muted); text-decoration: none; }
.langs a + a::before { content: "/" / ""; margin-right: .8rem; color: var(--text-muted); opacity: .5; }
.langs a[aria-current] { color: var(--text); }
.langs--nav { margin-right: -.4rem; }
.langs--menu { margin-top: 1rem; margin-left: -.4rem; font-size: .8125rem; }
@media (hover: hover) and (pointer: fine) { .langs a { transition: color var(--dur-hover) var(--ease-out); } .langs a:hover { color: var(--text); } }
.nav__toggle { display: none; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .25rem 0 .75rem; border: 0; background: none; cursor: pointer; font-size: var(--fs-sm); }
.nav__toggle-icon { position: relative; width: 1.25rem; height: .75rem; }
.nav__toggle-icon::before, .nav__toggle-icon::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 200ms var(--ease-out); }
.nav__toggle-icon::before { top: 0; } .nav__toggle-icon::after { bottom: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::before { transform: translateY(5.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::after { transform: translateY(-5.25px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: -1; background: var(--bg); padding: calc(6rem + env(safe-area-inset-top)) var(--gutter) calc(2rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.menu nav { display: flex; flex-direction: column; flex: 1; }
.menu__list { counter-reset: m; }
.menu__list li { border-top: 1px solid var(--line); }
.menu__list a { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -0.04em; font-weight: var(--wt-light); text-decoration: none; }
.menu__list a::before { counter-increment: m; content: "0" counter(m); font: var(--wt-strong) var(--fs-label) var(--font-label); letter-spacing: var(--tracking-label); color: var(--text-muted); }
.menu__cta { margin-top: auto; display: inline-flex; gap: .35rem; align-items: center; font-weight: 500; text-decoration: none; min-height: 3rem; }
/* Transitions, not keyframes: reopening mid-close picks up from where it is. */
.menu { clip-path: inset(0); transition: clip-path 350ms var(--ease-drawer), opacity 200ms var(--ease-out); }
.menu.is-closing { opacity: 0; }
.menu__list li { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.menu__list li:nth-child(2) { transition-delay: 30ms; }
.menu__list li:nth-child(3) { transition-delay: 60ms; }
.menu__list li:nth-child(4) { transition-delay: 90ms; }
@starting-style {
  .menu { clip-path: inset(0 0 100% 0); }
  .menu__list li { opacity: 0; transform: translateY(10px); }
}

/* ---------- Hero ---------- */
/* The stage is placed from the headline, not the window height: both the headline size and the stage size follow
   the viewport width, so the gap between them is the same in a tall or a short window. --text-bottom is the
   headline's bottom edge (padding + eyebrow + two display lines at line-height .94); the plates' highest point sits
   at least .13 of the stage width below the stage top (measured 0.13 to 0.19 across widths). The hero grows when needed so the plates aren't cropped. */
.hero {
  --stage-w: min(56vw, 58rem);
  --text-bottom: calc(8rem + .9rem + clamp(1.25rem, 2vw, 2rem) + var(--fs-display) * 1.88);
  --stage-top: calc(var(--text-bottom) + 3rem - var(--stage-w) * .13);
  position: relative; min-height: max(min(100svh, 62rem), calc(var(--stage-top) + var(--stage-w) * .78));
  display: grid; align-items: start; padding: 8rem 0 5rem; overflow: clip;
}
.hero__grid { position: relative; z-index: 2; width: 100%; }
.hero__copy { max-width: none; }
.hero__eyebrow { margin-bottom: clamp(1.25rem, 2vw, 2rem); }
.hero .display .strong { display: block; }
.hero__lead { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.hero .actions { margin-top: 2.25rem; }

.stage { position: absolute; z-index: 1; top: var(--stage-top); right: -10vw; width: var(--stage-w); aspect-ratio: 1 / .9; perspective: 1800px; pointer-events: none; }
.stage__tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
.stack { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-38deg); }
.plate {
  position: absolute; left: 18%; top: 18%; width: 62%; height: 62%; border-radius: 1.25rem;
  background: var(--warm-white); border: 1px solid rgba(17, 17, 17, .12);
  box-shadow: 0 40px 70px -30px rgba(17, 17, 17, .22), 0 2px 4px rgba(17, 17, 17, .04);
}
.plate--base { --depth: 30px; transform: translateZ(0); background-color: var(--soft-gray);
  background-image: linear-gradient(rgba(17,17,17,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,.07) 1px, transparent 1px);
  background-size: 2rem 2rem; background-position: -1px -1px; }
.plate--mid { --depth: 60px; transform: translateZ(70px) translate(6%, -6%); width: 50%; height: 48%; }
.plate--mist { --depth: 80px; transform: translateZ(118px) translate(-12%, 34%); width: 22%; height: 22%; background: var(--mist); border-color: rgba(17,17,17,.08); }
.plate--ink { --depth: 100px; transform: translateZ(150px) translate(4%, 58%); width: 30%; height: 30%; background: var(--near-black); border-color: transparent; box-shadow: 0 50px 80px -30px rgba(17,17,17,.45); }
/* The black plate catches light: a soft sheen that follows the pointer (JS sets --sx/--sy/--sg on this element only),
   a faint rim, and an occasional glint sweep. Without JS or with reduced motion it keeps a static resting sheen. */
.plate--ink { overflow: hidden; isolation: isolate; box-shadow: 0 50px 80px -30px rgba(17,17,17,.45), inset 1px 1px 0 rgba(247,246,242,.10); }
.plate--ink::before, .plate--ink::after { content: ""; position: absolute; pointer-events: none; }
.plate--ink::before {
  inset: 0; border-radius: inherit;
  background: radial-gradient(55% 70% at var(--sx, 35%) var(--sy, 25%), rgba(247,246,242,.30), rgba(247,246,242,.07) 45%, transparent 72%);
  opacity: calc(.35 + var(--sg, 0) * .65);
}
.plate--ink::after {
  inset: -10%;
  background: linear-gradient(100deg, transparent 38%, rgba(247,246,242,.16) 50%, transparent 62%);
  transform: translateX(-110%);
}
@keyframes glint { 0% { transform: translateX(-110%); } 18%, 100% { transform: translateX(110%); } }
@media (prefers-reduced-motion: no-preference) {
  .plate--ink::after { animation: glint 9s var(--ease-in-out) 2.5s infinite; }
  .stage.is-offscreen .plate--ink::after { animation-play-state: paused; }
}
.plate--open { --depth: 130px; transform: translateZ(214px) translate(-24%, 8%); width: 14%; height: 14%; background: transparent; border: 1px dashed rgba(17,17,17,.4); box-shadow: none; }
.trace { position: absolute; left: 14%; top: 53%; width: 70%; height: 1px; transform: translateZ(140px); } /* 10px under the ink plate (150) so the pointer tilt never flips their order */
.trace__line { position: absolute; inset: 0; background: var(--near-black); transform-origin: 0 50%; }
.trace__line::after { content: ""; position: absolute; top: -4px; border: 4.5px solid transparent; }
.trace--out .trace__line { transform-origin: 100% 50%; }
.trace--out .trace__line::after { left: -1px; border-right: 9px solid var(--near-black); border-left: 0; }
.trace--in { left: 30%; top: 60%; width: 40%; transform: translateZ(71px); }
.trace--in .trace__line::after { right: -1px; border-left: 9px solid var(--near-black); border-right: 0; }
.note { --depth: 150px; position: absolute; color: var(--text-muted); font-size: .6875rem; white-space: nowrap; }
.note::before { content: ""; display: inline-block; width: 1.75rem; height: 1px; margin-right: .6rem; vertical-align: middle; background: currentColor; }
.note--structure { left: -4%; top: 60%; }
.note--execution { left: 66%; top: 44%; }

/* ---------- Statement ---------- */
.statement { padding: var(--section) 0; }
.statement__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
.statement__label { grid-column: 1 / -1; margin-bottom: 2rem; color: var(--text-muted); }
.statement .h2 { grid-column: 1 / -1; }
@media (min-width: 901px) {
  .hero .line__in, .statement .line__in, .ventures .h2 .line__in, .contact__title .line__in { white-space: nowrap; }
}
.rule--v { grid-column: 6; grid-row: 3; justify-self: end; width: 1px; height: 100%; min-height: 10rem; margin-top: 4rem; background: var(--text); transform-origin: 50% 0; }
.statement__copy { grid-column: 7 / 13; grid-row: 3; margin-top: 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

/* ---------- Ventures (the Ascend AI moment) ---------- */
.ventures { position: relative; background: var(--near-black); color: var(--warm-white); padding: var(--section) 0; --line: rgba(247,246,242,.14); --text-muted: #A7A59F; }
.ventures__label { color: var(--text-muted); margin-bottom: 1.5rem; }
.field { position: relative; display: grid; grid-template-columns: 9rem minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; margin-top: clamp(3.5rem, 6vw, 6rem); }
.field__parent { position: relative; display: flex; align-items: center; color: var(--warm-white); }
.field__parent .te-mark { width: 3rem; }
.rail { position: absolute; left: 4rem; right: 0; top: 50%; height: 1px; }
.rail__line { position: absolute; inset: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(247,246,242,.55) 0, var(--ascend) 5.5rem, var(--ascend) 7rem, rgba(247,246,242,.2) 9rem, rgba(247,246,242,.2) 100%); }
.venture, .slot { position: relative; min-height: 20rem; border-radius: 1.25rem; }
.slot { --c: rgba(247,246,242,.34); --t: 1.1rem;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--t) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--t) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--t);
  background-repeat: no-repeat; border-radius: 0; }
.slot:nth-of-type(3) { opacity: .7; } .slot:nth-of-type(4) { opacity: .4; }
.venture {
  z-index: 1; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border: 1px solid rgba(232,162,76,.45);
  background: radial-gradient(120% 80% at 0% 0%, rgba(232,162,76,.18), transparent 60%), #171513;
}
.venture__label { color: var(--ascend); }
.venture__name { margin: 1rem 0 .85rem; font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.venture__copy { color: rgba(247,246,242,.74); font-size: var(--fs-sm); line-height: 1.6; max-width: 38ch; }
.venture__cta { margin-top: auto; padding-top: 2rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; font-weight: 500; text-decoration: none; }
.venture__cta .arrow { color: var(--ascend); }
.venture__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole panel clickable */
@media (hover: hover) and (pointer: fine) {
  .venture { transition: translate 200ms var(--ease-out), border-color 200ms var(--ease-out); }
  .venture:hover { translate: 0 -4px; border-color: rgba(232,162,76,.8); }
}
.venture:focus-within { border-color: var(--ascend); }
.venture__cta:focus-visible { outline-color: var(--ascend); }
.node { position: absolute; left: -.3rem; top: 50%; width: .6rem; height: .6rem; margin-top: -.3rem; border-radius: 50%; border: 1px solid rgba(247,246,242,.4); background: var(--near-black); }
.node--on { border-color: var(--ascend); background: var(--ascend); box-shadow: 0 0 0 5px rgba(232,162,76,.16); }
.ahead { display: grid; grid-template-columns: 9rem minmax(0, 1.7fr) minmax(0, 3fr); column-gap: 1.5rem; margin-top: 3rem; }
.ahead__title, .ahead__copy { grid-column: 3; }
.ahead__title { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: .75rem; }
.ahead__copy { color: var(--text-muted); max-width: 44ch; }

/* ---------- Principles ---------- */
.principles { padding: var(--section) 0; }
.principles__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
.principles__head { grid-column: 1 / 6; align-self: start; position: sticky; top: 7rem; }
.principles__head .label { color: var(--text-muted); margin-bottom: 1.5rem; }
.principles__list { grid-column: 6 / 13; }
.principle { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1rem; padding: 2.5rem 0 3rem; border-top: 1px solid var(--line); }
.principle:last-child { border-bottom: 1px solid var(--line); }
.principle__num { color: var(--text-muted); padding-top: .8rem; grid-row: 1 / 3; }
.principle p { margin-top: 1rem; color: var(--text-muted); max-width: 40ch; }

/* ---------- Story ---------- */
.story { background: var(--mist); color: var(--near-black); padding: var(--section) 0; --text-muted: #4F5556; }
.story__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: center; }
.story__mark { grid-column: 1 / 6; color: var(--near-black); }
.story__mark .te-mark { width: 100%; max-width: 26rem; }
.story__copy { grid-column: 7 / 13; }
.story__copy .label { color: var(--text-muted); margin-bottom: 1.5rem; }
.story__copy .h2 { margin-bottom: 2.5rem; }
.story__copy p:not(.label) { max-width: 44ch; margin-top: 1rem; }
.story__copy p:last-child { font-size: var(--fs-lead); line-height: 1.5; margin-top: 1.5rem; }

/* ---------- Geography ---------- */
.geo { padding: var(--section) 0 calc(var(--section) * .6); }
.geo__grid { display: grid; grid-template-columns: 1fr; row-gap: 1.25rem; font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.04em; font-weight: var(--wt-light); }
.geo__b { justify-self: end; text-align: right; }
.geo__link { position: relative; height: 1px; background: var(--text); margin: 0 4%; transform-origin: 50% 50%; }
.geo__link::before, .geo__link::after { content: ""; position: absolute; top: -4px; border: 4.5px solid transparent; }
.geo__link::before { left: -1px; border-right: 9px solid var(--text); border-left: 0; }
.geo__link::after { right: -1px; border-left: 9px solid var(--text); border-right: 0; }

/* ---------- Contact ---------- */
.contact { padding: calc(var(--section) * .6) 0 var(--section); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: end; }
.contact__title { grid-column: 1 / 8; }
.contact__side { grid-column: 8 / 13; }
.contact__side .actions { margin-top: 2rem; }

.formwrap { margin-top: 4rem; }
.form { max-width: 40rem; display: grid; gap: 1.25rem; }
.form__head { display: flex; align-items: center; justify-content: space-between; }
.form__title { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.03em; font-weight: 400; }
.field-row { display: grid; gap: .45rem; }
.field-row label { font-size: var(--fs-sm); font-weight: 500; }
.opt { color: var(--text-muted); font-weight: 400; }
.field-row input, .field-row select, .field-row textarea {
  width: 100%; min-height: 3rem; padding: .75rem .9rem; border-radius: .6rem;
  border: 1px solid rgba(17,17,17,.28); background: #FFFFFF; font-size: 1rem; color: var(--near-black);
  transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.field-row textarea { resize: vertical; min-height: 8rem; }
.field-row select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.field-row :is(input, select, textarea):focus-visible { outline: none; border-color: var(--near-black); box-shadow: 0 0 0 3px rgba(17,17,17,.14); }
.field-row [aria-invalid="true"] { border-color: #A3261B; }
.field-error { color: #A3261B; font-size: .875rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status { min-height: 1.5rem; font-size: var(--fs-sm); }
.form__status.is-error { color: #A3261B; }
.form__status.is-ok { color: var(--near-black); font-weight: 500; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form__note { font-size: .875rem; color: var(--text-muted); max-width: 30ch; }
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Slide-over panel (JS moves the form in here; without JS the form stays inline above). */
.panel {
  margin: 0 0 0 auto; height: 100dvh; max-height: none; max-width: none; width: min(34rem, 100vw); padding: 0; border: 0;
  background: var(--warm-white); color: var(--near-black); --text-muted: #5E5D58; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -30px 0 80px -30px rgba(17,17,17,.35);
}
.panel .form { padding: calc(1.75rem + env(safe-area-inset-top)) clamp(1.25rem, 4vw, 2.5rem) calc(2rem + env(safe-area-inset-bottom)); max-width: none; }
.panel { --panel-off: translateX(100%); transform: none; transition: transform var(--dur-panel) var(--ease-drawer); }
.panel::backdrop { background-color: rgba(17,17,17,.42); transition: background-color var(--dur-panel) var(--ease-out); }
.panel.is-closing { transform: var(--panel-off); transition: transform 240ms var(--ease-out); }
.panel.is-closing::backdrop { background-color: rgba(17,17,17,0); transition-duration: 240ms; }
@starting-style {
  .panel[open] { transform: var(--panel-off); }
  .panel[open]::backdrop { background-color: rgba(17,17,17,0); }
}
.form__close { position: relative; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(17,17,17,.14); border-radius: 50%; background: none; cursor: pointer; }
.form__close span::before, .form__close span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 1.5px; margin: -.75px 0 0 -.5rem; background: currentColor; transform: rotate(45deg); }
.form__close span::after { transform: rotate(-45deg); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 4rem 0 calc(2.5rem + env(safe-area-inset-bottom)); font-size: var(--fs-sm); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 3rem; }
.footer__brand { grid-column: 1 / 6; }
.lockup { display: inline-grid; gap: .55rem; }
.lockup__wordmark { width: 11.625rem; height: auto; }
.lockup__tagline { font-size: .6875rem; letter-spacing: .3em; color: var(--text-muted); padding-left: 2.1rem; }
.footer__line { margin-top: 1.5rem; color: var(--text-muted); }
.footer__nav { grid-column: 7 / 10; display: grid; align-content: start; justify-items: start; }
.footer__nav a, .footer__legal a { text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; }
.footer__legal { grid-column: 10 / 13; display: grid; align-content: start; gap: .6rem; color: var(--text-muted); }
.footer__legal p:nth-child(2) { display: flex; gap: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  .footer a { transition: color var(--dur-hover) var(--ease-out); }
  .footer__nav a:hover, .footer__legal a:hover { color: var(--text); }
  .footer__nav a { color: var(--text-muted); }
}

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes settle { from { opacity: 0; scale: .94; } }
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes reveal-left { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes reveal-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes failsafe { to { opacity: 1; transform: none; clip-path: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Page load: nav, then headline lines, then the stage, then details. */
  .nav__inner { animation: fade 450ms var(--ease-out) both; }
  .nav__logo .te-out { animation: reveal-left 700ms var(--ease-in-out) 120ms both; }
  .nav__logo .te-in { animation: reveal-right 700ms var(--ease-in-out) 220ms both; }
  .nav__logo .te-letters { animation: fade 500ms var(--ease-out) 360ms both; }
  .hero [data-load="1"] { animation: rise var(--dur-reveal) var(--ease-out) 150ms both; }
  .hero .line__in[data-load] { animation: line-up var(--dur-reveal) var(--ease-out) both; }
  .hero [data-load="2"] { animation-delay: 220ms; }
  .hero [data-load="3"] { animation-delay: calc(220ms + var(--stagger)); }
  .hero [data-load="5"] { animation: rise var(--dur-reveal) var(--ease-out) 620ms both; }
  .hero [data-load="6"] { animation: rise var(--dur-reveal) var(--ease-out) 700ms both; }
  .plate { animation: settle 1000ms var(--ease-out) both; }
  .plate--base { animation-delay: 520ms; } .plate--mid { animation-delay: 600ms; } .plate--mist { animation-delay: 680ms; }
  .plate--ink { animation-delay: 760ms; } .plate--open { animation-delay: 880ms; }
  .trace__line { animation: draw-x 900ms var(--ease-in-out) 1000ms both; }
  .trace--in .trace__line { animation-delay: 1150ms; }
  .note { animation: fade 600ms var(--ease-out) both; }
  .note--structure { animation-delay: 1250ms; } .note--execution { animation-delay: 1350ms; }
}

/* Scroll reveals: only hidden when JS can reveal them. Failsafe shows everything if the script never arrives. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(18px); animation: failsafe 1ms 3s forwards; }
  [data-lines] .line__in { transform: translateY(105%); animation: failsafe 1ms 3s forwards; }
  .rule--v { transform: scaleY(0); animation: failsafe 1ms 3s forwards; }
  .geo__link { transform: scaleX(0); animation: failsafe 1ms 3s forwards; }
  .field__parent, .venture, .slot, .ahead { opacity: 0; animation: failsafe 1ms 3s forwards; }
  .venture { transform: translateY(18px); }
  .rail__line { transform: scaleX(0); animation: failsafe 1ms 3s forwards; }
  .story__mark .te-out, .story__mark .te-in { clip-path: inset(0 0 0 100%); animation: failsafe 1ms 3s forwards; }
  .story__mark .te-in { clip-path: inset(0 100% 0 0); }
  .motion-ready :is([data-reveal], [data-lines] .line__in, .rule--v, .geo__link, .field__parent, .venture, .slot, .ahead, .rail__line, .story__mark .te-out, .story__mark .te-in) { animation: none; }

  [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--delay, 0ms); }
  [data-lines].is-in .line__in { transform: none; transition: transform var(--dur-reveal) var(--ease-out); }
  [data-lines].is-in .line:nth-child(2) .line__in { transition-delay: var(--stagger); }
  .rule--v.is-in { transform: none; transition: transform 1200ms var(--ease-in-out) 200ms; }
  .geo__link.is-in { transform: none; transition: transform 1100ms var(--ease-in-out) 150ms; }

  /* The venture sequence: parent resolves, rail draws, amber arrives, Ascend AI rises, open positions follow. */
  .field.is-in .field__parent { opacity: 1; transition: opacity 500ms var(--ease-out); }
  .field.is-in .rail__line { transform: none; transition: transform 900ms var(--ease-in-out) 150ms; }
  .field.is-in .venture { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) 350ms, transform 700ms var(--ease-out) 350ms, translate 200ms var(--ease-out), border-color 200ms var(--ease-out); }
  .field.is-in .slot { transition: opacity 700ms var(--ease-out); }
  .field.is-in .slot:nth-of-type(2) { opacity: 1; transition-delay: 550ms; }
  .field.is-in .slot:nth-of-type(3) { opacity: .7; transition-delay: 650ms; }
  .field.is-in .slot:nth-of-type(4) { opacity: .4; transition-delay: 750ms; }
  .field.is-in ~ .ahead { opacity: 1; transition: opacity 700ms var(--ease-out) 800ms; }

  .story__mark.is-in .te-out { clip-path: inset(0); transition: clip-path 1100ms var(--ease-in-out); }
  .story__mark.is-in .te-in { clip-path: inset(0); transition: clip-path 1100ms var(--ease-in-out) 250ms; }
}

/* Hero depth on the compositor: each layer drifts by its own --depth over the first viewport of scroll. */
@keyframes drift { to { translate: 0 var(--depth, 0px); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .plate { animation: settle 1000ms var(--ease-out) both, drift 1ms linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    .note { animation: fade 600ms var(--ease-out) both, drift 1ms linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    .plate--base { animation-delay: 520ms, 0s; } .plate--mid { animation-delay: 600ms, 0s; } .plate--mist { animation-delay: 680ms, 0s; }
    .plate--ink { animation-delay: 760ms, 0s; } .plate--open { animation-delay: 880ms, 0s; }
    .note--structure { animation-delay: 1250ms, 0s; } .note--execution { animation-delay: 1350ms, 0s; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage__tilt { transform: none; }
  .menu { transition: opacity 150ms var(--ease-out); }
  .menu__list li { transition: none; }
  .panel, .panel.is-closing { transition: opacity 150ms var(--ease-out); }
  @starting-style {
    .menu { clip-path: inset(0); opacity: 0; }
    .menu__list li { opacity: 1; transform: none; }
    .panel[open] { transform: none; opacity: 0; }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1360px) {
  .statement__copy { grid-column: 7 / 12; grid-template-columns: 1fr; gap: 1rem; font-size: var(--fs-lead); line-height: 1.5; }
}

@media (max-width: 1100px) {
  .nav__links { gap: 1.5rem; }
  .hero { --stage-w: 70vw; }
  .stage { right: -18vw; opacity: .9; }
  .field { grid-template-columns: 6rem minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  .field .slot:nth-of-type(4) { display: none; }
  .ahead { grid-template-columns: 6rem minmax(0, 2fr) minmax(0, 2fr); }
  .ahead__title, .ahead__copy { grid-column: 2 / 4; }
}

@media (max-width: 900px) {
  .nav__links, .nav__inner > .nav__cta, .langs--nav { display: none; }
  .nav__toggle { display: inline-flex; }
  .hero { min-height: 0; align-items: start; padding: 7.5rem 0 0; display: flex; flex-direction: column; }
  .stage { position: relative; top: auto; right: auto; translate: none; width: 118vw; margin: -1rem -26vw 0 auto; aspect-ratio: 1 / .78; }
  .hero .actions { margin-bottom: 0; }
  .note--execution { display: none; }
  .note--structure { left: 10%; top: 70%; }
  .hero .actions { margin-bottom: 1.5rem; }
  .statement__copy { grid-column: 3 / 13; grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }
  .rule--v { grid-column: 1; justify-self: start; margin-top: 3rem; }
  .principles__head { grid-column: 1 / -1; position: static; margin-bottom: 2.5rem; }
  .principles__list { grid-column: 1 / -1; }
  .story__mark { grid-column: 1 / -1; margin-bottom: 3rem; }
  .story__mark .te-mark { max-width: 11rem; }
  .story__copy { grid-column: 1 / -1; }
  .contact__title, .contact__side { grid-column: 1 / -1; }
  .contact__side { margin-top: 2rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__nav { grid-column: 1 / 7; }
  .footer__legal { grid-column: 7 / 13; }
}

@media (max-width: 900px) {
  /* The venture field turns vertical: the rail runs down the left edge. */
  .field { grid-template-columns: 1fr; row-gap: 1rem; padding-left: 2.5rem; }
  .field__parent { margin-left: -2.5rem; height: 3.5rem; }
  .field__parent .te-mark { width: 2.5rem; }
  .rail { left: .3rem; right: auto; top: 3.75rem; bottom: 0; width: 1px; height: auto; }
  .rail__line { transform-origin: 50% 0;
    background: linear-gradient(180deg, rgba(247,246,242,.55) 0, var(--ascend) 2.5rem, var(--ascend) 60%, rgba(247,246,242,.2) 72%); }
  .field .slot:nth-of-type(4) { display: block; }
  .venture { min-height: 0; }
  .venture__cta { padding-top: 1.75rem; }
  .slot { min-height: 0; height: 3.25rem; }
  .node { left: -2.5rem; top: 2.25rem; margin-left: 0; }
  .slot .node { top: 50%; }
  .ahead { grid-template-columns: 1fr; padding-left: 2.5rem; }
  .ahead__title, .ahead__copy { grid-column: 1; }
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .rail__line { transform: scaleY(0); }
    .field.is-in .rail__line { transform: none; }
  }
}

@media (max-width: 560px) {
  .statement__copy { grid-column: 1 / -1; }
  .rule--v { display: none; }
  .principle { grid-template-columns: 1fr; padding: 2rem 0 2.25rem; }
  .principle__num { grid-row: auto; padding: 0 0 .9rem; }
  .geo__grid { font-size: clamp(2rem, 9.5vw, 2.75rem); }
  .footer__nav, .footer__legal { grid-column: 1 / -1; }
  .actions .btn { width: 100%; justify-content: center; }
  .panel { --panel-off: translateY(100%); width: 100%; height: 94dvh; margin: auto 0 0; border-radius: 1.25rem 1.25rem 0 0; }
}

/* ---------- Subpages (privacy, terms, 404) ---------- */
.page__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.75rem; }
.page__nav img { width: 10.5rem; height: auto; }
.page__main { padding-block: clamp(3rem, 8vw, 7rem) var(--section); }
@media (hover: hover) and (pointer: fine) { a:hover > .arrow--back { transform: translateX(-3px); } }
.prose { max-width: 42rem; }
.prose .h2 { margin-bottom: 1rem; }
.page__meta { color: var(--text-muted); margin-bottom: 2.5rem; }
.page__note { margin: -1.5rem 0 2.5rem; color: var(--text-muted); font-size: var(--fs-sm); }
.page__note a { color: var(--text); text-underline-offset: 3px; }
.prose .lead { max-width: none; margin-bottom: 1rem; }
.prose h2 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; margin: 2.75rem 0 .75rem; }
.prose p + p { margin-top: 1rem; }
.prose a { text-underline-offset: 3px; }
.notfound { min-height: 50vh; display: grid; align-content: center; gap: 1.75rem; }
.notfound__es { color: var(--text-muted); }
.notfound__es a { color: var(--text); text-underline-offset: 3px; }


@media (min-width: 561px) and (max-width: 900px) {
  .hero { padding-bottom: 0; }
  .stage { width: 90vw; margin: -2rem -16vw -10rem auto; aspect-ratio: 1 / .7; }
}
.nowrap { white-space: nowrap; }