/*
  SEED: 1791899614324

  A — Layout:      digit 4 → Mosaic — CSS grid, no uniform card sizes
  B — Color:       digit 2 → Mid-tone slate (#2a3240) base, sky blue + white type
  C — Typography:  digit 3 → Display: Space Grotesk + Body: Merriweather
  D — Visual lang: digit 4 → Diagonal stripe patterns as section accents and button fills
  E — Navigation:  digit 1 → Fullscreen overlay — hamburger, giant links
  F — Tone:        digit 6 → Dry wit — understated, self-aware, confident understatement

  These choices were determined by the seed and must not be changed
  for reasons of "appropriateness" or "better fit for the content".
  Tension between content and form is intentional.
*/

/*
  BRAND ARCHETYPE:    Provocateur
  LAYOUT PARADIGM:    12-column mosaic, asymmetric spans; reading pattern is a
                      magazine scan — the eye jumps across unequal tiles
  SECTION ORDER:      Announce → Overlay nav → Hero → Intro → Product →
                      Discretion → Movement → Context → Pelvic floor →
                      Three-layer → Connector → Voices → CTA → Footer
  DISPLAY FONT:       Space Grotesk — https://fonts.google.com/specimen/Space+Grotesk
  BODY FONT:          Merriweather — https://fonts.google.com/specimen/Merriweather
  PRIMARY COLOR:      #1570c2 sky blue — a saturated sky on slate, loud enough
                      to commit, dark enough for white type at WCAG AA
  SHAPE LANGUAGE:     Sharp — no radius, hard cuts, diagonal stripes
  SIGNATURE MOMENT:   Hero headline scrambles into place on load, while a
                      portrait overlaps the type and a giant 70 sits in the void
  TONE OF VOICE:      Dry, self-aware, understated
*/

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;1,300;1,400&family=Space+Grotesk:wght@700&display=swap');

:root {
  /* One commitment: sky on slate. Tints of sky do not count as new hues.
     The second hue is the slate field itself. White is the type color. */
  --brand-primary:   #1570c2;
  --brand-secondary: #121a24;
  --brand-accent:    #5eb6ff;

  --surface-base:    #2a3240;
  --surface-raised:  #343e4e;
  --surface-inverse: #1570c2;
  --surface-deep:    #121a24;

  --text-primary:    #f4f7fb;
  --text-secondary:  #b7c3d1;
  --text-inverse:    #f7fbff;
  --text-on-accent:  #122033;
  --text-link:       #9fd4ff;

  --border-subtle:   rgba(244, 247, 251, 0.16);
  --border-strong:   #5eb6ff;

  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:    'Merriweather', 'Palatino Linotype', serif;

  --text-hero: clamp(3.5rem, 10vw, 9rem);
  --text-h1:   clamp(2.5rem, 6vw, 5rem);
  --text-h2:   clamp(1.75rem, 4vw, 3rem);
  --text-h3:   clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body: clamp(1rem, 1.5vw, 1.125rem);
  --text-sm:   clamp(0.75rem, 1vw, 0.875rem);
  --text-xs:   0.6875rem;

  --ff-display: "kern" 1, "liga" 1;
  --ff-body:    "kern" 1, "liga" 1, "onum" 1;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --gutter: clamp(1rem, 3vw, 2.5rem);
  --mosaic-max: 1480px;
  --radius-none: 0;

  --transition-fast: 180ms ease;
  --transition-base: 240ms ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-base: 1;
  --z-raised: 5;
  --z-nav: 40;
  --z-overlay: 50;

  --stripe-thin: repeating-linear-gradient(
    -45deg,
    transparent 0 7px,
    rgba(94, 182, 255, 0.55) 7px 9px
  );
  --stripe-soft: repeating-linear-gradient(
    -45deg,
    transparent 0 10px,
    rgba(94, 182, 255, 0.14) 10px 12px
  );
  --stripe-strong: repeating-linear-gradient(
    -45deg,
    rgba(18, 32, 51, 0.14) 0 8px,
    transparent 8px 16px
  );
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--surface-base);
  background-image:
    radial-gradient(980px 520px at 100% -8%, rgba(21, 112, 194, 0.38), transparent 60%),
    radial-gradient(720px 480px at -12% 30%, rgba(94, 182, 255, 0.08), transparent 55%),
    var(--stripe-soft);
  font-feature-settings: var(--ff-body);
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; }

a {
  color: var(--text-link);
  text-underline-offset: 0.18em;
  transition: color var(--transition-fast);
}

a:hover { color: var(--text-primary); }

:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--brand-primary);
  color: var(--text-inverse);
}

h1, h2, h3, .wordmark__name, .overlay__links a, .btn, .kicker, .idx {
  font-family: var(--font-display);
  font-weight: 700;
  font-feature-settings: var(--ff-display);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

p { margin: 0 0 var(--space-4); }

.skip {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  background: var(--brand-accent);
  color: var(--text-on-accent);
  padding: var(--space-2) var(--space-4);
  z-index: 80;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.skip:focus { top: var(--space-4); }

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