/* ==========================================================================
   Base — design tokens, reset, typography & utilities
   Fluid values interpolate between the mobile (393px) and desktop (1920px)
   Figma frames: clamp(mobile, intercept + slope·vw, desktop).
   ========================================================================== */

:root {
  /* Colors */
  --color-dark: #121212;
  --color-black: #000;
  --color-white: #fff;
  --color-accent: #eb9718;
  --color-gold: #e5ad32;
  --color-surface: #f1f1f1;
  --color-muted: rgba(0, 0, 0, 0.6);
  --color-border: rgba(0, 0, 0, 0.15);
  --color-muted-inverse: rgba(255, 255, 255, 0.6);

  /* Fonts */
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-alt: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale */
  --fs-eyebrow: clamp(12px, 9.43px + 0.6549vw, 22px);
  --fs-h1: clamp(28px, 16.68px + 2.8815vw, 72px);
  --lh-h1: clamp(34.5px, 20.78px + 3.4905vw, 87.8px);
  --fs-h2: clamp(22px, 11.19px + 2.7505vw, 64px);
  --lh-h2: clamp(24px, 10.62px + 3.4054vw, 76px);
  --fs-lead: clamp(14px, 12.46px + 0.3929vw, 20px);
  --lh-lead: clamp(17px, 13.14px + 0.9823vw, 32px);
  --fs-body: clamp(14px, 12.97px + 0.262vw, 18px);
  --lh-body: clamp(20px, 18.97px + 0.262vw, 24px);
  --fs-card-title: clamp(16px, 11.88px + 1.0478vw, 32px);
  --fs-card-text: clamp(11px, 9.2px + 0.4584vw, 18px);
  --lh-card-text: clamp(14px, 11.43px + 0.6549vw, 24px);

  /* Layout */
  --container: 1680px;
  --gutter: clamp(18px, -8.25px + 6.6798vw, 120px);
  --section-pt: clamp(35px, 1.8px + 8.4479vw, 164px);
  --section-pb: clamp(47px, 14.83px + 8.186vw, 172px);
  --gap-eyebrow: clamp(0px, -8.49px + 2.1611vw, 33px);
  --gap-desc: clamp(5px, 1.14px + 0.9823vw, 20px);
  --gap-content: clamp(20px, 8.16px + 3.0124vw, 66px);
  --gap-content-split: clamp(20px, 10.48px + 2.4231vw, 57px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --header-z: 50;
}

/* Reset
   ========================================================================== */

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

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

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 500;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  cursor: pointer;
  background: none;
  border: 0;
}

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

::selection {
  color: var(--color-white);
  background-color: var(--color-accent);
}

/* Utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pt) var(--section-pb);
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-accent);
  border-radius: 999px;
  transform: translateY(-200%);
  transition: transform 0.3s var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

.text-accent {
  color: var(--color-accent);
}

.text-gold {
  color: var(--color-gold);
}

/* Line breaks that only apply on small screens.
   Use .line-sm inside [data-split] headings — SplitText treats every <br> as a break. */
.br-sm {
  display: none;
}

@media (max-width: 767px) {
  .br-sm {
    display: inline;
  }

  .line-sm {
    display: block;
  }
}

/* SplitText helpers */
.split-line {
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}