/* ==========================================================================
   THE ASCENT PLACEMENTS - DESIGN TOKENS
   Four colors. Two fonts. One radius language.
   ========================================================================== */

:root {
  /* --- Color: four values, nothing else gets added ---------------------- */
  --navy:  #0a192f;
  --gold:  #ffd700;
  --white: #ffffff;
  --slate: #8892b0;   /* secondary text + dividers. 5.1:1 on navy, AA pass */

  /* Surfaces are derived from the four above, never new hex values */
  --surface-1: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.06);
  --rule:      rgba(136, 146, 176, 0.22);
  --rule-soft: rgba(136, 146, 176, 0.12);
  --navy-deep: #061223;  /* navy at 70% lightness, for full-bleed contrast */

  /* Chrome sweep for the wordmark and one hero word only. Built from gold
     and white, nothing new - stops chosen to stay legible mid-sweep. */
  --chrome-gradient: linear-gradient(
    100deg,
    var(--gold) 0%,
    #fff6c9 22%,
    var(--white) 42%,
    var(--gold) 58%,
    #b8860b 74%,
    var(--gold) 100%
  );

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;

  /* Display sizes. Tight leading is what makes these read as designed. */
  --t-hero:  clamp(3.25rem, 9vw, 7.5rem);
  --t-d1:    clamp(2.6rem, 6.2vw, 5rem);
  --t-d2:    clamp(2rem, 4.2vw, 3.25rem);
  --t-d3:    clamp(1.55rem, 2.6vw, 2.15rem);

  /* Body sizes */
  --t-lead:  clamp(1.075rem, 1.55vw, 1.3rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Stat numerals get their own scale so one can dominate */
  --t-stat-lg: clamp(4rem, 12vw, 9.5rem);
  --t-stat-md: clamp(2.75rem, 6vw, 4.75rem);
  --t-stat-sm: clamp(2.25rem, 4.5vw, 3.5rem);

  --lh-display: 0.95;
  --lh-body: 1.65;
  --ls-display: -0.02em;
  --ls-eyebrow: 0.14em;

  /* --- Space ------------------------------------------------------------ */
  /* Section rhythm is deliberately uneven. Pick per section, do not default. */
  --pad-tight: clamp(3rem, 6vw, 5rem);
  --pad-base:  clamp(4.5rem, 9vw, 8rem);
  --pad-open:  clamp(7rem, 14vw, 12rem);
  --gutter:    clamp(1.25rem, 5vw, 3.5rem);

  --measure: 62ch;       /* readable line length for body copy */
  --container: 1240px;
  --container-narrow: 860px;

  /* --- Structure -------------------------------------------------------- */
  --radius: 4px;         /* the only radius. structural, not decorative */
  --border: 1px solid var(--rule);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.4s;

  --nav-h: 76px;
  --z-nav: 100;
  --z-drawer: 110;
  --z-progress: 90;
}

/* ==========================================================================
   RESET
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Smooth anchor scrolling for the no-Lenis case only. When Lenis is
     running it owns scrolling, and a native smooth animation fights it. */
  scroll-behavior: smooth;
}

/* Styles Lenis expects. The library ships these in lenis.css, which we do
   not load, so they live here. Without them Lenis and native smooth scroll
   fight each other and programmatic scrolling stalls. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

/* Scrollbars stay visible. This is a B2B site, users need scroll position. */

/* ==========================================================================
   FOCUS - visible, and not the browser default
   ========================================================================== */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: translateY(-120%);
  z-index: 200;
  background: var(--gold);
  color: var(--navy);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: var(--t-small);
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ==========================================================================
   MOTION GATE
   Reduced motion renders everything in its final state. JS checks the same
   query and never creates a ScrollTrigger or a Lenis instance.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Anything JS would have revealed is already in place */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Pre-animation state. Only applied when JS confirms motion is allowed,
   so a JS failure or a no-JS visitor still sees the content. */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}

/* ==========================================================================
   SCREEN READER
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}