/* ==========================================================================
   VELOCITY — Design System : Foundations
   Tokens taken verbatim from Velocity Brand Book V1.0 (Approved).
   Visual principle: "Intelligent simplicity" — sophistication through
   structure, contrast, typography, space and precision, not decoration.
   ========================================================================== */

:root {
  /* ---- Colour system (5.6 — six approved colours, no others) ---- */
  --midnight:   #0F172A;   /* Primary — anchor, authority */
  --white:      #FFFFFF;   /* Primary light — default background */
  --silver:     #E2E8F0;   /* Secondary — structure without weight */
  --ice:        #F8FAFC;   /* Soft background — calm areas */
  --deep-text:  #111827;   /* Body copy on light */
  --gold:       #C9A86A;   /* Premium accent — a detail, never a field */

  /* Tints derived from the approved six (opacity only, no new hues) */
  --ink-70: rgba(17, 24, 39, 0.70);
  --ink-55: rgba(17, 24, 39, 0.55);
  --ink-62: rgba(17, 24, 39, 0.62);   /* the lightest ink that still clears AA on white */
  --ink-40: rgba(17, 24, 39, 0.40);
  --ink-14: rgba(17, 24, 39, 0.14);
  --ink-07: rgba(17, 24, 39, 0.07);

  --sky-80: rgba(255, 255, 255, 0.80);
  --sky-58: rgba(255, 255, 255, 0.58);
  --sky-48: rgba(255, 255, 255, 0.48);  /* the dimmest white that still clears AA on midnight */
  --sky-38: rgba(255, 255, 255, 0.38);
  --sky-16: rgba(255, 255, 255, 0.16);
  --sky-08: rgba(255, 255, 255, 0.08);

  --gold-40: rgba(201, 168, 106, 0.40);
  --gold-14: rgba(201, 168, 106, 0.14);

  /* ---- Typography (5.11 — Manrope display / Inter text) ---- */
  --ff-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-text:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero:  clamp(2.6rem, 6.4vw, 5.6rem);
  --fs-h1:    clamp(2.1rem, 4.6vw, 3.6rem);
  --fs-h2:    clamp(1.65rem, 3.1vw, 2.55rem);
  --fs-h3:    clamp(1.15rem, 1.7vw, 1.4rem);
  --fs-lead:  clamp(1.02rem, 1.35vw, 1.22rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.72rem;

  /* ---- Space & structure ---- */
  --pad:    clamp(20px, 5vw, 64px);
  /* The page is full-bleed: every container — the nav, every section, the
     hero and the footer — runs to --pad of the viewport edge and shares one
     left edge. The cap only engages above 1920px, so that ultra-wide monitors
     do not stretch the forms and grids past the point of being readable; at
     that size the whole page centres together rather than the hero alone
     running out to the glass. Long-form measure is held by the caps on the
     elements themselves (.shead, p, .solx__desc) rather than by this. */
  --maxw:   1920px;
  --maxw-narrow: 760px;
  /* Display measure. Text on this page starts at the left edge and should
     carry to about the middle before it wraps — a short line against a wide
     page reads as a column that ran out of room, not as a considered break.
     56% tracks the middle at every width; the 940px cap keeps it from running
     past a comfortable display measure on the widest screens. Body copy keeps
     its own, shorter measure — see the note on p below. */
  --measure-head: min(940px, 56%);
  --sec-y:  clamp(72px, 10vw, 148px);
  --radius: 4px;            /* precision, not softness */

  /* ---- Motion (one language across the whole site) ---- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur:       420ms;
  --dur-slow:  900ms;

  --nav-h: 72px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--white);
  color: var(--deep-text);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

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

/* ---- Typography scale ---- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--midnight);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.28; }

/* Body copy stays at 68ch. It is the one measure that is about reading rather
   than composition: past roughly 75 characters the eye loses the start of the
   next line. Headings and leads use --measure-head instead, which is why they
   reach the middle of the page and paragraphs stop short of it. */
p { max-width: 68ch; }

strong { font-weight: 600; }

/* ---- Shared utility layer ---- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}


.section { padding-block: var(--sec-y); }
/* --sec-y is calibrated for a section that has to separate itself from its
   neighbours on its own. Some do not.

   "What we build" is the one section on the page whose padding lands white on
   white at both ends: above it the reviews band is already closed by a gold
   rule, and below it the Transformation Study arrives on midnight with a full
   --sec-y of its own — so the gap under it was 148px of white followed by
   148px more before any text. Nothing was separating anything; it was two
   sections' worth of air read as one empty screen.

   Less at the foot than at the head, because the colour change below does the
   work the padding was there to do, while the rule above only marks an edge. */
.section--tight { padding-block: clamp(56px, 6.4vw, 96px) clamp(40px, 4.6vw, 72px); }
.section--ice { background: var(--ice); }
.section--midnight { background: var(--midnight); color: var(--sky-80); }
.section--midnight h1,
.section--midnight h2,
.section--midnight h3 { color: var(--white); }

/* Eyebrow: the small tracked label used across the whole site */
.eyebrow {
  display: inline-block;
  font-family: var(--ff-display);
  /* Its own size rather than --fs-micro. That token is shared with the footer
     titles, the solutions numerals and the scroll cue, which are all meant to
     sit at the very bottom of the scale; the eyebrow is the first line of a
     block and reads as a label, so it carries about a fifth more. */
  font-size: clamp(0.82rem, 0.95vw, 0.94rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.eyebrow--ink { color: var(--ink-40); }

/* Every eyebrow on the page wipes in on the same five-second loop: empty,
   uncovered left to right over 0.9s, held 3s, then cleared in the same
   direction and begun again after a beat. Clearing the way it arrived — not
   fading — keeps the loop reading as one continuous movement rather than a
   blink, and both ends of the cycle are invisible, so the wrap from the last
   keyframe back to the first has nothing to show.

   Keyed off .is-in so it starts when the block is revealed and is never found
   mid-cycle. Two selectors because the eyebrows are marked up both ways: some
   carry .reveal themselves, others sit inside a revealed block. */
.reveal.is-in .eyebrow,
.eyebrow.reveal.is-in {
  animation: eyebrowWipe 5s var(--ease-out) infinite;
}
@keyframes eyebrowWipe {
  0%   { clip-path: inset(0 100% 0 0); }   /* covered from the right */
  18%  { clip-path: inset(0 0 0 0); }      /* 0.9s to uncover */
  78%  { clip-path: inset(0 0 0 0); }      /* held 3.0s */
  92%  { clip-path: inset(0 0 0 100%); }   /* 0.7s to clear, same direction */
  100% { clip-path: inset(0 0 0 100%); }   /* 0.4s of nothing before it repeats */
}
@media (prefers-reduced-motion: reduce) {
  .reveal.is-in .eyebrow,
  .eyebrow.reveal.is-in { animation: none; clip-path: none; }
}

.lead {
  /* Lead type is display-scale, so it takes the display measure — but capped
     in ch as well, because at 1920px the column alone would run it past 90
     characters. On anything up to about 1700px the column binds first and the
     line does reach the middle. */
  max-width: 72ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-70);
}
.section--midnight .lead { color: var(--sky-58); }


/* Numeral used for ordered ideas (pillars, steps, values) */


.skip-link {
  position: absolute; top: -100px; left: var(--pad); z-index: 200;
  background: var(--midnight); color: var(--white);
  padding: 0.7rem 1.1rem; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

/* ---- Scroll reveal: one motion language, site-wide ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}