/* Eldarion site styles — aligned to brand-guide.html v0.2.
   Replaces the earlier editorial/paper aesthetic (Instrument Serif, forest greens,
   warm cream, paper grain) with the brand system: off-white canvas, charcoal ink,
   Manrope sans, quant-ink signature, no decorative serifs. */

html { scroll-behavior: smooth; }

body {
  background: #FAFAF7;          /* Off-white canvas */
  color: #1A1714;               /* Charcoal */
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
}

/* Display — sans, not serif. Tight tracking matches brand-guide type scale. */
.font-display {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.display-xl {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* ── Unified H1 ─────────────────────────────────────────────
   Every page title is Manrope Medium at one responsive size.
   Element selector + !important so this wins over the per-page
   utility classes (text-[clamp…], font-display, display-xl,
   seg-h1, am-h1, h-cover, art-title) and inline font-size,
   without touching h2/h3 (e.g. the <h2 class="seg-h1"> CTAs). */
h1 {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(40px, 6.2vw, 76px) !important;
}

/* Italic-accent neutralized: no italic, quant-ink color, slight weight bump.
   Brand rejects decorative italic; the class stays so existing markup still
   compiles, but the visual treatment is now coherent with the system. */
.italic-accent {
  font-style: normal;
  color: #0F1A2E;
  font-weight: 600;
}

/* Hairlines tuned to brand neutrals */
.hairline       { border-color: rgba(26, 23, 20, 0.10); }
.hairline-light { border-color: rgba(250, 250, 247, 0.15); }

/* ── Ancho de página ────────────────────────────────────────────
   Medido sobre harvey.ai con Chrome headless a 1440 / 1920 / 2560:

     ancho    logo nav    banda de contenido    sangría del titular
     1440        32       32 → 1408 (a sangre)  ninguna
     1920        40      136 → 1784 (1648)      +143
     2560       360      454 → 2103 (1648)      +142

   Es decir: por debajo de ~1445px va a sangre; por encima, la página
   se topa en 1648px de contenido y el texto se mete una columna. El
   sistema hv-* de este sitio ya lo reproduce exacto (--page-max 1728
   = 1648 + 40 de gutter a cada lado, más .hv-band en 2/12), así que
   no se toca.

   Lo que sí se quedaba corto son los shells heredados de 1400px
   (.max-w-[1400px], .seg-wrap, .am-wrap): 1320px de contenido, más
   estrechos que los 1648px del sistema y flotando en el centro en
   desktop. Pasan a --page-max y así todas las secciones comparten
   una sola columna.

   El nav y el footer van más anchos que el contenido, también como
   Harvey: se topan en --chrome-max (1920px), no a sangre infinita. */
:root {
  --page-max:   1728px;   /* secciones  → 1648px de contenido */
  --chrome-max: 1920px;   /* nav y footer, algo más anchos */
}

/* La clase doble gana a la utilidad de Tailwind (mismo peso, pero el CDN
   inyecta su hoja después de esta) sin recurrir a !important. */
.max-w-\[1400px\].mx-auto { max-width: var(--page-max); }

.site-header nav,
.plt-panel > div,
.wws-panel > div,
.cmp-panel > div,
.elda-footer .ef-wrap { max-width: var(--chrome-max); margin-inline: auto; }

/* Reveal on scroll — kept */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Dotted divider — tuned to brand neutrals */
.dotted-line {
  background-image: radial-gradient(circle, rgba(26,23,20,.25) 1px, transparent 1px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: center;
  height: 1px;
}

/* Marquee — kept */
.marquee-track { animation: marquee 50s linear infinite; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Editorial underline link */
.link-edit {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s ease;
}
.link-edit:hover { background-size: 0 1px; background-position: 100% 100%; }

.ticker-pill { font-variant-numeric: tabular-nums; }

/* Paper grain — disabled. Brand canvas is clean institutional, not editorial paper. */
.paper-grain { display: none; }

/* Squiggle — neutralized to a clean underline. Brand rejects wavy decorative underlines. */
.squiggle {
  text-decoration: underline;
  text-decoration-color: #0F1A2E;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.stat-num {
  font-feature-settings: "tnum";
  letter-spacing: -0.04em;
}

/* Caret — quant-ink, not forest */
.cursor::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 1em;
  background: #0F1A2E;
  vertical-align: -2px;
  margin-left: 4px;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Eyebrow — JetBrains Mono, quant-ink. Drops the ◆ chevron from the editorial direction
   in favor of the ▲ glyph used as accent across the brand-strategy doc. */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0F1A2E;
}
.eyebrow::before {
  content: '▲';
  margin-right: 8px;
  font-size: 9px;
  transform: translateY(-1px);
  display: inline-block;
  color: #0F1A2E;
}

/* Buttons — square corners (4px), institutional. Brand rejects the pill-shaped
   consumer-y radius (999px) used by the previous palette. */
.btn-primary {
  background: #1A1714;
  color: #FAFAF7;
  border-radius: 4px;
  padding: 14px 22px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  transition: background .25s ease, transform .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover { background: #0F1A2E; }

.btn-ghost {
  border: 1px solid rgba(26, 23, 20, .18);
  color: #1A1714;
  border-radius: 4px;
  padding: 13px 22px;
  font-weight: 500;
  font-size: 14px;
  transition: border-color .25s ease, background .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-ghost:hover { border-color: #0F1A2E; background: rgba(15, 26, 46, .04); }

/* Dark section overrides — invert ink/cream, keep quant-ink as accent */
.section-dark .btn-primary {
  background: #FAFAF7;
  color: #1A1714;
}
.section-dark .btn-primary:hover { background: #FFFFFF; }

.section-dark .btn-ghost {
  color: #FAFAF7;
  border-color: rgba(250, 250, 247, .22);
}
.section-dark .btn-ghost:hover {
  border-color: #FAFAF7;
  background: rgba(250, 250, 247, .06);
}

.section-dark .eyebrow { color: rgba(250, 250, 247, .65); }
.section-dark .eyebrow::before { color: #FAFAF7; }
.section-dark .italic-accent { color: #FAFAF7; }

/* Source tag — JetBrains Mono */
.src-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .02em;
}

/* Editorial input — tuned to brand neutrals + quant-ink focus */
.input-edit {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(26, 23, 20, .25);
  padding: 14px 4px;
  font-size: 16px;
  outline: none;
  transition: border-color .25s ease;
  color: #1A1714;
}
.input-edit:focus { border-bottom-color: #0F1A2E; }
.input-edit::placeholder { color: rgba(26, 23, 20, .4); }

.fade-x {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.row-hover { position: relative; }
.row-hover::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: #0F1A2E;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.row-hover:hover::after { transform: scaleX(1); }

::selection { background: #0F1A2E; color: #FAFAF7; }

/* Client logos on dark hero — kept (brightness invert reads white on charcoal) */
.client-logo {
  filter: brightness(0) invert(1);
  opacity: .72;
  transition: opacity .25s ease;
}
.client-logo:hover { opacity: 1; }

/* Mega-menu backdrop — dims page content when mega-panel opens.
   Sits below the panel (z-45) but above all page content. Brand-aligned charcoal dim. */
.mega-backdrop {
  position: fixed;
  top: 64px;          /* matches nav height (h-16) */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: rgba(26, 23, 20, 0.45);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.mega-host.solutions-open .mega-backdrop,
.mega-host.plt-open .mega-backdrop,
.mega-host.cmp-open .mega-backdrop,
.mega-host.wws-open .mega-backdrop {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Mega-menu — kept (functional, color inherits from ink/cream) */
.mega-panel {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.mega-host.solutions-open .mega-panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}
.mega-host.solutions-open .mega-chevron {
  transform: rotate(180deg);
}
.mega-chevron { transition: transform .22s ease; }

/* While a menu is closed, force EVERYTHING inside its panel non-clickable.
   The default is-active detail (Numen / Asset Managers) sets pointer-events:auto
   on itself, so even with the panel hidden it stays invisibly clickable over the
   hero and hijacks clicks (redirecting to numen.html). A parent's pointer-events
   :none does not cascade to a child that re-enables it — so we override here. */
.mega-host:not(.solutions-open) .mega-panel,
.mega-host:not(.solutions-open) .mega-panel *,
.mega-host:not(.wws-open) .wws-panel,
.mega-host:not(.wws-open) .wws-panel *,
.mega-host:not(.plt-open) .plt-panel,
.mega-host:not(.plt-open) .plt-panel *,
.mega-host:not(.cmp-open) .cmp-panel,
.mega-host:not(.cmp-open) .cmp-panel * {
  pointer-events: none !important;
}

/* ============================================================
   Sticky site header · always visible, never collapses.
   .mega-host stays in normal flow to reserve the 80px nav height
   (no layout shift); .nav-bar is the fixed bar that stays put at
   every scroll position, full links and actions included.
   ============================================================ */
.site-header {
  position: relative;      /* keeps :has() hover selectors working */
  display: block;
  height: 4rem;            /* 64px — matches nav h-16, reserves flow space */
  z-index: 50;
}
.nav-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* The bar paints itself the color sampled from the section behind it (set inline
   by the scroll script) so it reads as an extension of that section — navy over
   the hero, cream over light sections. A hairline divider fades in once scrolled. */
.nav-bar { border-bottom: 1px solid transparent; }
.nav-bar.is-scrolled { border-bottom-color: rgba(250, 250, 247, .10); }
.nav-bar.is-scrolled.nav-light { border-bottom-color: rgba(15, 26, 46, .08); }
/* Over a light section the transparent bar would hide its cream links, so the
   scroll script adds .nav-light (via luminance sampling) and we flip the logo,
   links and CTA to dark ink. Reverts to cream over dark backdrops. */
.nav-bar.nav-light .brand-logo { color: #0F1A2E; }
/* Scoped to the bar itself (direct links + the menu trigger). The mega-panel is a
   descendant of .nav-links, so a loose `.nav-links a` here painted the panel's own
   links dark ink over its navy background — the whole menu went invisible on light
   sections. Keep these selectors off the panel. */
.nav-bar.nav-light .nav-links > a,
.nav-bar.nav-light .nav-links .wws-trigger,
.nav-bar.nav-light .nav-links .plt-trigger,
.nav-bar.nav-light .nav-links .cmp-trigger,
.nav-bar.nav-light .nav-actions a { color: rgba(15, 26, 46, .72); }
.nav-bar.nav-light .nav-links > a:hover,
.nav-bar.nav-light .nav-links .wws-trigger:hover,
.nav-bar.nav-light .nav-links .plt-trigger:hover,
.nav-bar.nav-light .nav-links .cmp-trigger:hover,
.nav-bar.nav-light .nav-actions a:hover { color: #0F1A2E; }
/* El hover de los triggers (Platform / Solutions / Company) vive en el <span>
   interior — `hover:text-cream-100` de Tailwind — y una regla puesta en el
   <button> padre no lo gana: el hijo tiene color propio. Sobre una seccion clara
   eso pintaba el nombre de crema sobre crema y el label desaparecia al pasar el
   raton. Repintamos ese span (y la pastilla de hover, que en blanco al 8% tampoco
   se ve sobre cream) en tinta oscura. */
.nav-bar.nav-light .nav-links .plt-trigger > span:hover,
.nav-bar.nav-light .nav-links .wws-trigger > span:hover,
.nav-bar.nav-light .nav-links .cmp-trigger > span:hover,
.nav-bar.nav-light .nav-links > a:hover {
  color: #0F1A2E;
  background-color: rgba(15, 26, 46, .06);
}
/* Belt and braces: the panel is always cream-on-navy, whatever the bar is doing. */
.nav-bar.nav-light .wws-panel .wws-name { color: rgba(250, 250, 247, .92); }
.nav-bar.nav-light .wws-panel .wws-item:hover .wws-name,
.nav-bar.nav-light .wws-panel .wws-item.is-active .wws-name { color: #FAFAF7; }
.nav-bar.nav-light .plt-panel .plt-name { color: rgba(250, 250, 247, .92); }
.nav-bar.nav-light .plt-panel .plt-item:hover .plt-name,
.nav-bar.nav-light .plt-panel .plt-item.is-active .plt-name { color: #FAFAF7; }
.nav-bar.nav-light .cmp-panel .cmp-name { color: rgba(250, 250, 247, .92); }
.nav-bar.nav-light .cmp-panel .cmp-item:hover .cmp-name { color: #FAFAF7; }
/* Los dos botones de la derecha (Login y Request a Demo) tienen que seguir
   leyéndose como botones sobre una seccion clara: el relleno crema del CTA y el
   velo blanco al 6% del Login desaparecen sobre cream y quedan como texto suelto.
   Se seleccionan por href y no por :last-child — el ultimo hijo de .nav-actions
   es el boton de hamburguesa, así que `a:last-child` no llegaba a casar nunca.
   El borde transparente va en la regla base para que el ancho no salte cuando el
   script de scroll enciende o apaga .nav-light. */
/* Login y Request a Demo se leen como un unico bloque de accion: van pegados
   entre si, y el aire de .nav-actions (gap-5) se recupera solo a la izquierda
   del conmutador de idioma y a la derecha de la hamburguesa. Va aqui y no en
   utilidades Tailwind porque el navbar esta incrustado en ~25 paginas.
   Los margenes son fijos, asi que el par sigue igual de junto en ES, donde el
   boton crece si algun dia se traduce. */
.nav-bar .nav-actions { gap: 8px; }
.nav-bar .nav-actions .lang-toggle { margin-right: 12px; }
.nav-bar .nav-actions .nav-burger { margin-left: 12px; }

.nav-actions a[href*="login"],
.nav-actions a[href="demo.html"] { border: 1px solid transparent; }
.nav-actions a[href*="login"] { border-color: rgba(250, 250, 247, .16); }

.nav-bar.nav-light .nav-actions a[href*="login"] {
  background: transparent;
  border-color: rgba(15, 26, 46, .22);
  color: rgba(15, 26, 46, .78);
}
.nav-bar.nav-light .nav-actions a[href*="login"]:hover {
  background: rgba(15, 26, 46, .06);
  border-color: rgba(15, 26, 46, .42);
  color: #0F1A2E;
}
/* Request a Demo es el CTA solido: se invierte crema→navy para que aguante. */
.nav-bar.nav-light .nav-actions a[href="demo.html"] {
  background: #0F1A2E;
  border-color: #0F1A2E;
  color: #FAFAF7;
}
.nav-bar.nav-light .nav-actions a[href="demo.html"]:hover {
  background: #9388D9;
  border-color: #9388D9;
  color: #FFFFFF;
}
/* ============================================================
   Conmutador de idioma (EN / ES) · vive en .nav-actions.
   Píldora de dos segmentos: el idioma activo se pinta sólido.
   Hereda el color del bar, así que funciona sobre fondo oscuro
   y sobre .nav-light sin reglas de color extra por segmento.
   ============================================================ */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 999px;
  background: rgba(250, 250, 247, .06);
  color: rgba(250, 250, 247, .75);
}
.lang-toggle .lang-opt {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.lang-toggle .lang-opt:hover { color: #FAFAF7; }
.lang-toggle .lang-opt.is-active { background: rgba(250, 250, 247, .92); color: #1A1714; }
/* Mientras el backend traduce la página el botón queda inerte y a media tinta. */
.lang-toggle.is-busy { pointer-events: none; opacity: .55; }

.nav-bar.nav-light .lang-toggle { background: rgba(15, 26, 46, .06); color: rgba(15, 26, 46, .72); }
.nav-bar.nav-light .lang-toggle .lang-opt:hover { color: #0F1A2E; }
.nav-bar.nav-light .lang-toggle .lang-opt.is-active { background: #0F1A2E; color: #FAFAF7; }

/* En el cajón móvil va suelto sobre fondo oscuro, con algo más de aire. */
.nav-drawer .lang-toggle { background: rgba(250, 250, 247, .08); color: rgba(250, 250, 247, .75); }
.nav-drawer .lang-toggle .lang-opt { padding: 9px 16px; }
.nav-drawer .lang-toggle { align-self: center; }
/* Páginas sin navbar (demo.html): el conmutador va suelto arriba a la derecha. */
.lang-toggle.is-floating {
  position: fixed; top: 18px; right: 20px; z-index: 90;
  background: rgba(250, 250, 247, .10);
  backdrop-filter: blur(8px);
}
@media (max-width: 640px) { .lang-toggle.is-floating { top: 12px; right: 12px; } }

/* Brand logo · clean cream, always in the bar (no floating badge clone). */
.brand-logo { color: #FAFAF7; }

.nav-bar .nav-links,
.nav-bar .nav-actions {
  transition: opacity .3s ease, transform .3s ease;
}

/* Botones del navbar (Log in / Request a Demo) y sus gemelos del drawer:
   Manrope explícito. Heredaban del <body>, pero varias páginas redefinen la
   tipografía con !important, así que se fija aquí para que los CTAs salgan
   siempre en la fuente de marca. */
.nav-bar .nav-actions a,
.nav-drawer-login,
.nav-drawer-cta {
  font-family: 'Manrope', system-ui, sans-serif !important;
}
/* On any scroll, force every mega-menu shut. Without this a panel opened before
   scrolling stays latched by :has(.mega-panel:hover) (the cursor ends up over the
   panel after a wheel scroll) and floats over the hero. The panels live outside
   .nav-links so hiding the links isn't enough. */
.nav-bar.menus-suppressed .mega-panel,
.nav-bar.menus-suppressed .wws-panel,
.nav-bar.menus-suppressed .plt-panel,
.nav-bar.menus-suppressed .cmp-panel,
.nav-bar.menus-suppressed .mega-backdrop {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition-delay: 0s !important;
}

/* ============================================================
   Hamburger button + slide-in drawer · mobile navigation.
   The desktop nav-links are hidden below md; the burger reveals
   a full menu drawer so the nav is reachable on small screens.
   ============================================================ */
/* Tres trazos sueltos, sin chip: al lado del botón de demo —que sí es una
   pastilla sólida— un segundo recuadro sombreado competía con él. La caja de
   34×32 se queda para el área de pulsación, pero no se pinta. */
.nav-burger {
  display: none;                 /* shown < md via the query below */
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  width: 34px; height: 32px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
/* El foco de teclado sí necesita verse: es lo único que dibuja la caja. */
.nav-burger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nav-burger span {
  display: block;
  height: 1.8px; width: 16px;
  background: #FAFAF7;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* Sobre secciones claras sólo cambia la tinta de los trazos. */
.nav-bar.nav-light .nav-burger span { background: #0F1A2E; }

@media (max-width: 767px) {
  .nav-burger { display: flex; }
  /* Marca · "Request a Demo" · chip. El Login vive dentro del cajón.
     El gap de 8px de .nav-actions ya vale aquí; sólo se quita el margen
     extra que separa la hamburguesa en escritorio. */
  .nav-bar .nav-actions .nav-burger { margin-left: 0; }
  .nav-bar .nav-actions .nav-login { display: none; }
}

.nav-drawer {
  position: fixed; inset: 0; z-index: 80;
  visibility: hidden; pointer-events: none;
}
.nav-drawer.is-open { visibility: visible; pointer-events: auto; }
.nav-drawer-scrim {
  position: absolute; inset: 0;
  background: rgba(6, 11, 20, 0.55);
  opacity: 0; transition: opacity .3s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.nav-drawer.is-open .nav-drawer-scrim { opacity: 1; }
/* Panel a pantalla completa (patrón Harvey): el menú móvil no es un cajón
   estrecho, es una hoja que ocupa toda la ventana, con los enlaces en grande y
   acordeones para los grupos que tienen hijos. */
.nav-drawer-panel {
  position: absolute; top: 0; right: 0;
  height: 100%; width: 100%;
  background: #0F1A2E;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22,.7,.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
}
/* El sello guarda con la palabra la misma proporcion que en la navbar
   (circulo visible ~1.6x el cuerpo de texto): aqui solo cambia de tamano. */
.nav-drawer-brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1;
  text-transform: lowercase;
  color: #FAFAF7;
}
.nav-drawer-brand svg { width: 35px; height: 35px; flex: none; display: block; }
.nav-drawer-close {
  width: 40px; height: 40px; border: 0; background: transparent;
  color: rgba(250,250,247,.75); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nav-drawer-close:hover { color: #FAFAF7; }
.nav-drawer-close svg { width: 24px; height: 24px; }

/* El cuerpo empuja el pie al fondo de la hoja. */
.nav-drawer-body { padding: 26px 20px 8px; flex: 1 1 auto; }

/* Fila de primer nivel: mismo tamaño tenga hijos (botón) o no (enlace). */
.nav-drawer-link,
.nav-drawer-acc {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 9px 0;
  border: 0; background: transparent; text-align: left;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(28px, 8vw, 34px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.25;
  color: #FAFAF7; text-decoration: none; cursor: pointer;
}
.nav-drawer-link:hover,
.nav-drawer-acc:hover { color: #9388D9; }
.nav-drawer-chev {
  width: 18px; height: 18px; flex: 0 0 auto;
  color: rgba(250,250,247,.55);
  transition: transform .3s cubic-bezier(.22,.7,.2,1);
}
.nav-drawer-acc[aria-expanded="true"] .nav-drawer-chev { transform: rotate(180deg); }
/* El chevron se centra en el mismo eje que el aspa de cerrar. El aspa va dentro
   de un botón de 40px con 20px de margen, así que su centro cae a 40px del borde;
   el chevron (18px) colgaría a 29px, de ahí los 11px extra de padding. */
.nav-drawer-acc { padding-right: 11px; }

/* Acordeón: 0fr -> 1fr anima la altura sin fijar un max-height a ojo. */
.nav-drawer-fold {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.22,.7,.2,1);
}
.nav-drawer-acc[aria-expanded="true"] + .nav-drawer-fold { grid-template-rows: 1fr; }
.nav-drawer-fold > div { overflow: hidden; }
/* Cada hijo lleva su descripción, la misma copy que el mega-menú de escritorio:
   en móvil no hay hover que revele el panel de detalle, así que el texto va
   debajo del nombre. */
.nav-drawer-sub {
  display: block; padding: 11px 0 12px 2px;
  font-family: 'Manrope', system-ui, sans-serif;
  text-decoration: none;
}
.nav-drawer-sub + .nav-drawer-sub { border-top: 1px solid rgba(250,250,247,.07); }
.nav-drawer-sub:first-child { padding-top: 6px; }
.nav-drawer-sub:last-child { padding-bottom: 18px; }
.nav-drawer-sub-name {
  display: block;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  color: rgba(250,250,247,.92);
}
.nav-drawer-sub-desc {
  display: block; margin-top: 3px;
  font-size: 12.5px; line-height: 1.45;
  color: rgba(250,250,247,.5);
}
.nav-drawer-sub:hover .nav-drawer-sub-name { color: #FAFAF7; }
.nav-drawer-sub:hover .nav-drawer-sub-desc { color: rgba(250,250,247,.68); }

/* Pie: los dos CTAs uno al lado del otro, como en la referencia. */
.nav-drawer-foot {
  margin-top: auto;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.nav-drawer-login,
.nav-drawer-cta {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 15px 12px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; border-radius: 999px;
}
.nav-drawer-cta { background: #FAFAF7; color: #1A1714; }
.nav-drawer-cta:hover { background: #fff; }
.nav-drawer-login {
  background: transparent; color: #FAFAF7;
  border: 1px solid rgba(250,250,247,.28);
}
.nav-drawer-login:hover { border-color: rgba(250,250,247,.6); }


/* ============================================================
   "Platform" mega-menu  ·  self-contained (plt- namespace)
   Two columns of modules, no preview card. Same open/close
   machinery and the same navy surface as the Solutions panel,
   so the two menus read as one system.
   ============================================================ */
.plt-wrap { display: flex; align-items: center; }
.plt-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: #0F1A2E; border-top: 1px solid rgba(250,250,247,.08);
  visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.mega-host.plt-open .plt-panel {
  visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
  transition-delay: 0s;
}
.plt-caret { transition: transform .22s ease; }
.mega-host.plt-open .plt-caret { transform: rotate(180deg); }

/* The preview card is gone, but the module list keeps the exact track it had
   next to it: same two columns, same 64px gutter, right track left empty. */
.plt-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr);
  gap: 64px; align-items: start;
}
/* Column-major: the list reads down the first column, then down the second. */
.plt-cols {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto);
  grid-auto-flow: column; gap: 34px 64px;
}
.plt-item { display: flex; flex-direction: column; gap: 8px; }
.plt-name {
  font-family: 'Manrope', sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
  color: rgba(250,250,247,.92); transition: color .2s ease;
}
.plt-desc {
  font-family: 'Manrope', sans-serif;
  font-size: 14px; line-height: 1.5; letter-spacing: -.005em;
  color: rgba(250,250,247,.5); max-width: 34ch; transition: color .2s ease;
}
.plt-item:hover .plt-name,
.plt-item.is-active .plt-name { color: #FAFAF7; }
.plt-item:hover .plt-desc,
.plt-item.is-active .plt-desc { color: rgba(250,250,247,.72); }

@media (max-width: 1180px) {
  .plt-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 860px) {
  .plt-cols {
    grid-template-columns: 1fr; grid-template-rows: none;
    grid-auto-flow: row; gap: 24px;
  }
}

/* ============================================================
   "Solutions" mega-menu  ·  self-contained (wws- namespace)
   Same layout as the Platform panel (.plt-*): segments on the
   left, a preview card on the right that swaps as you hover.
   Own classes + open/close so the two menus never collide; the
   left-list -> right-preview swap is latched by JS in
   partials/nav.html.
   ============================================================ */
.wws-wrap { display: flex; align-items: center; }
.wws-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: #0F1A2E; border-top: 1px solid rgba(250,250,247,.08);
  visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.mega-host.wws-open .wws-panel {
  visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
  transition-delay: 0s;
}
.wws-caret { transition: transform .22s ease; }
.mega-host.wws-open .wws-caret { transform: rotate(180deg); }

.wws-sol { display: grid; grid-template-columns: 1fr; align-items: start; }
/* Three segments stacked in one column: Investing · Advising · Family Capital.
   Max-width keeps the description measure the same as the old two-column grid. */
.wws-cols { display: grid; grid-template-columns: 1fr; gap: 28px; }
.wws-item { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.wws-name {
  font-family: 'Manrope', sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
  color: rgba(250,250,247,.92); transition: color .2s ease;
}
.wws-desc {
  font-family: 'Manrope', sans-serif;
  font-size: 14px; line-height: 1.5; letter-spacing: -.005em;
  color: rgba(250,250,247,.5); max-width: 34ch; transition: color .2s ease;
}
.wws-item:hover .wws-name,
.wws-item.is-active .wws-name { color: #FAFAF7; }
.wws-item:hover .wws-desc,
.wws-item.is-active .wws-desc { color: rgba(250,250,247,.72); }

@media (max-width: 1180px) {
  .wws-sol { gap: 34px; }
}
@media (max-width: 860px) {
  .wws-cols { gap: 24px; }
}


/* ============================================================
   COMPANY menu (.cmp-*) — the third mega panel in the navbar.
   Same shell as the Solutions panel (.wws-*): full-width navy
   sheet under the bar, its own open class so the three menus
   never collide. Two destinations only — Company and Careers —
   so it is a plain list, no hover-swap preview.
   ============================================================ */
.cmp-wrap { display: flex; align-items: center; }
.cmp-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: #0F1A2E; border-top: 1px solid rgba(250,250,247,.08);
  visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.mega-host.cmp-open .cmp-panel {
  visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
  transition-delay: 0s;
}
.cmp-caret { transition: transform .22s ease; }
.mega-host.cmp-open .cmp-caret { transform: rotate(180deg); }

.cmp-cols { display: grid; grid-template-columns: 1fr; gap: 28px; }
.cmp-item { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.cmp-name {
  font-family: 'Manrope', sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
  color: rgba(250,250,247,.92); transition: color .2s ease;
}
.cmp-desc {
  font-family: 'Manrope', sans-serif;
  font-size: 14px; line-height: 1.5; letter-spacing: -.005em;
  color: rgba(250,250,247,.5); max-width: 34ch; transition: color .2s ease;
}
.cmp-item:hover .cmp-name { color: #FAFAF7; }
.cmp-item:hover .cmp-desc { color: rgba(250,250,247,.72); }

@media (max-width: 860px) {
  .cmp-cols { gap: 24px; }
}

/* ==========================================================================
   TWO WAYS TO WORK · business-model section (home)
   Two dark cards side by side — header block (eyebrow · title · copy · ghost
   button) over a product panel that bleeds past the card's bottom edge and is
   cropped by overflow. Reuses the .mk mock chrome from the "why" section; adds
   only the .mk--rail variant (dark app rail) on top of it.
   ========================================================================== */
.tww-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch;
  margin-inline: auto;
  transition: grid-template-columns .55s cubic-bezier(.2,.7,.3,1);
}
/* La rejilla se alinea con la imagen interior del hero, no con la banda de
   contenido: esa imagen es el 83% de la plancha (.hv-shot--plate > img). El
   1120px fijo que había antes equivalía al 83% a 1440px y por eso cuadraba en
   portátil, pero dejaba de seguir a la imagen en desktop.
   .page-shell le da a esta sección el mismo gutter que .hv-page, así que su caja
   de contenido es la plancha y el 83% cae exacto a cualquier ancho.
   Por debajo de 861px las tarjetas se apilan y la rejilla va a ancho completo. */
/* Shell de página: el gutter de .hv-page en vez del px-6/lg:px-10 de Tailwind,
   que iba 8px desfasado entre 1025 y 1729px. Todas las secciones comparten caja. */
.page-shell { padding-inline: var(--page-pad, 1.75rem); }

/* Banda de contenido, un nivel dentro del shell: a partir de 1445px se mete una
   columna por lado, exactamente lo que hace .hv-band en el hero y lo que hace
   Harvey. A 1920px eso es 276→1644, dentro del tramo que va del final del logo
   (159) al principio del botón Login (1670); el shell completo (136→1784) se
   salía por ambos lados.
   El 83% es esa columna expresada como proporción: la rejilla de 12 columnas
   con sus gaps da 1370 sobre 1648, y es el mismo número al que se alinean la
   imagen interior del hero y la rejilla de "Two Ways In". */
@media (min-width: 1445px) {
  .page-band { width: 83%; margin-inline: auto; }
}
@media (min-width: 861px) { .tww-grid { max-width: 83%; } }
/* Hovering a card widens it and gives the width back by narrowing its
   neighbour, so the pair keeps the same footprint — more of the cropped
   product panel comes into view as the card opens up. */
@media (min-width: 1181px) {
  /* Fixed height, so the rewrapped copy in the narrowed card can never push
     the row taller mid-hover. The header keeps its natural size; the slack
     lives between the button and the mock, which stays pinned to the bottom.
     It sits on the grid, not the card: a subgrid item is always stretched to
     its tracks in the subgridded axis, so its own height would be ignored. */
  .tww-grid { height: 593px; }
  .tww-grid:has(.tww-card--a:hover), .tww-grid:has(.tww-card--a:focus-within) {
    grid-template-columns: 1.26fr .74fr;
  }
  .tww-grid:has(.tww-card--b:hover), .tww-grid:has(.tww-card--b:focus-within) {
    grid-template-columns: .74fr 1.26fr;
  }
  /* The copy keeps one fixed measure in every state. Left to a ch cap it would
     be wider than the narrowed card can hold, so opening a card would rewrap
     both headers mid-transition. 300px is what the .74fr card has room for. */
  .tww-title, .tww-lede { width: min(300px, 100%); max-width: none; }
}
@media (min-width: 861px) {
  /* The card you are not on sits behind a veil, so the active one reads as
     the one in focus. .tww-veil is painted over the card's own content. */
  .tww-grid:has(.tww-card:hover) .tww-card:not(:hover) .tww-veil,
  .tww-grid:has(.tww-card:focus-within) .tww-card:not(:focus-within) .tww-veil {
    opacity: 1;
  }
}

.tww-card {
  position: relative; isolation: isolate; z-index: 0;
  display: flex; flex-direction: column; overflow: hidden;
  min-height: 520px; border-radius: 8px; padding: 40px 48px 0;
  color: #FAFAF7;
  transition: box-shadow .55s cubic-bezier(.2,.7,.3,1);
}
.tww-card:hover, .tww-card:focus-within { box-shadow: 0 24px 60px rgba(15, 26, 46, .18); }
/* Translucent scrim, above everything the card holds — mock included. */
.tww-veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0; background: rgba(146, 142, 136, .58);
  backdrop-filter: saturate(.55);
  transition: opacity .55s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .tww-grid, .tww-card, .tww-veil { transition: none; }
}
.tww-card--a { background: #0F1A2E; }              /* quant-ink · cool */
.tww-card--b { background: #221D17; }              /* warm dark · the counterpart */

/* Film grain, the way the reference cards carry texture rather than flat fill. */
.tww-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .85; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* A soft light source in the top corner, so the flat fill has depth. */
.tww-card::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -180px; right: -120px; width: 520px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(147,136,217,.20), rgba(147,136,217,0));
}
.tww-card--b::after { background: radial-gradient(closest-side, rgba(140,107,34,.26), rgba(140,107,34,0)); }

.tww-title {
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(30px, 2.7vw, 42px); line-height: 1.04; letter-spacing: -.032em;
  margin: 0 0 16px; max-width: 13ch;
}
.tww-lede {
  font-size: 15px; line-height: 1.45; color: rgba(250, 250, 247, .78);
  margin: 0 0 20px; max-width: 38ch;
}


/* CTA — Apple-style pill: solid fill, no outline, full radius, 44px target. */
.tww-btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 16px; border-radius: 980px;
  background: #FAFAF7; color: #1A1714;
  font-size: 13px; font-weight: 500; letter-spacing: -.008em; line-height: 1;
  transition: background .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.tww-btn:hover { background: #FFFFFF; transform: scale(1.03); }
.tww-btn:active { transform: scale(.99); }
.tww-btn:focus-visible { outline: 2px solid #FAFAF7; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .tww-btn { transition: background .3s ease; }
  .tww-btn:hover, .tww-btn:active { transform: none; }
}

/* Product panel — pushed to the bottom, inset from the left, cropped by the card.
   The .mk base chrome is declared here rather than borrowed from the "why" section's
   inline <style>, so this section renders standalone. */
/* --mk-bleed = how far the mock runs past the card's right edge before the
   card's overflow crops it. */
.tww-mock { --mk-bleed: 146px; margin-top: auto; flex: 0 0 auto; padding: 28px 0 0 52px; }
.tww-mock .mk {
  height: 370px; margin-bottom: -105px; margin-right: calc(-1 * var(--mk-bleed));
  background: #FFFFFF; border-radius: 10px 10px 0 0; overflow: hidden;
  box-shadow: 0 -4px 70px rgba(0, 0, 0, .40);
}
/* ---------- .mk--shot · a real capture of the product inside the chrome ----------
   The screenshots are wider than the slot, so each one is placed rather than
   fitted: --shot-w scales the capture until its UI reads at this size, and
   --shot-x / --shot-y pick the corner of it worth showing. Whatever falls
   outside is cropped here and again by the card, which is the intent — the
   panel is meant to look like a window onto a running app, not a thumbnail. */
.tww-mock .mk--shot { display: flex; flex-direction: column; }
.mk__shot {
  flex: 1 1 auto; min-height: 0; overflow: hidden; background: #FFFFFF;
}
/* max-width:none overrides the Tailwind preflight rule, which would otherwise
   cap the capture at the slot's width and undo --shot-w entirely. */
.mk__shot img {
  display: block; width: var(--shot-w, 100%); max-width: none; height: auto;
  margin: var(--shot-y, 0) 0 0 var(--shot-x, 0);
}
.mk--shot-a { --shot-w: 160%; --shot-x: 0;      --shot-y: 0; }
/* La captura del lienzo ya viene dibujada a tamaño de lectura, así que
   pide bastante menos aumento que las capturas de pantalla reales. */
.mk--shot-b { --shot-w: 118%; --shot-x: 0;      --shot-y: 0; }

/* Side by side, the two cards share the grid's rows rather than each stacking
   its own copy: title, lede, CTA and mock sit in the same four tracks, so the
   button never drifts because one card's lede wrapped onto an extra line. */
@media (min-width: 861px) {
  @supports (grid-template-rows: subgrid) {
    .tww-grid { grid-template-rows: auto auto auto 1fr; row-gap: 0; }
    .tww-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
    .tww-btn { justify-self: start; align-self: start; }
    /* align-self rather than the base rule's margin-top:auto — an auto margin
       collapses to 0 once the track is shorter than the panel, which would let
       the mock slide down instead of staying pinned to the card's bottom. */
    .tww-mock { align-self: end; margin-top: 0; }
  }
}

@media (max-width: 1180px) {
  .tww-card { padding: 34px 34px 0; min-height: 480px; }
  .tww-mock { --mk-bleed: 120px; padding-left: 30px; }
}
@media (max-width: 860px) {
  .tww-grid { grid-template-columns: 1fr; gap: 16px; }
  .tww-card { min-height: 0; padding: 34px 26px 0; }
  .tww-title { max-width: none; }
  .tww-mock { --mk-bleed: 18px; padding: 32px 0 0 18px; }
  .tww-mock .mk { height: 320px; margin-bottom: -40px; }
  .mk--shot-a { --shot-w: 190%; }
  .mk--shot-b { --shot-w: 150%; }
}

/* ============================================================
   LEGACY — collapsing nav, kept for employee-portal.html only.

   The rest of the site moved to a nav that stays put, so these
   rules were dropped. employee-portal.html was deliberately left
   out of that merge and still runs the old scroll script: on load
   it clones .brand-logo into a body-level .brand-logo-blend and
   toggles .is-collapsed / .show while scrolling. Without the rules
   below that clone has no positioning and renders as a second,
   in-flow Eldarion logo at the foot of the page.

   Nothing else sets these classes — the current partials/nav.html
   never adds .is-collapsed — so this block is inert everywhere
   else. Delete it the day employee-portal.html adopts the new nav.
   ============================================================ */
.nav-bar.is-collapsed { background-color: transparent !important; border-bottom-color: transparent; }
.nav-bar.is-collapsed .brand-logo { visibility: hidden; }
.brand-logo-blend {
  position: fixed; z-index: 70;
  opacity: 0; pointer-events: none;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
  /* circular badge */
  width: 44px; height: 44px;
  margin-left: -8px; margin-top: -8px;   /* centre the 28px mark within the disc */
  border-radius: 50%;
  background: #FAFAF7;
  color: #0F1A2E;
  align-items: center; justify-content: center;
  gap: 0;
  box-shadow: 0 6px 20px -6px rgba(15, 26, 46, .45), 0 0 0 1px rgba(15, 26, 46, .06);
}
.brand-logo-blend span { display: none; }   /* badge shows the mark only, no wordmark */
.brand-logo-blend svg { width: 24px; height: 24px; }
.brand-logo-blend.show { opacity: 1; pointer-events: auto; }
.nav-bar.is-collapsed .nav-links,
.nav-bar.is-collapsed .nav-actions {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
}
.nav-bar.is-collapsed .mega-panel,
.nav-bar.is-collapsed .wws-panel,
.nav-bar.is-collapsed .plt-panel,
.nav-bar.is-collapsed .cmp-panel,
.nav-bar.is-collapsed .mega-backdrop {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition-delay: 0s !important;
}