/* ==========================================================================
   We Are Fourth — foundations
   Ink: charcoal + black. Ground: paper. Type: Helvetica.

   The @font-face for the display face is printed inline by inc/assets.php so
   the preload hint and the declaration cannot drift apart.
   ========================================================================== */

:root {
  /* --- ink ------------------------------------------------------------- */
  --black: #000000;
  --ink: #0b0b0a;
  --charcoal: #262623;
  --charcoal-700: #3a3a36;
  --charcoal-500: #5c5c56;
  --charcoal-300: #8a8a82;

  /* --- ground ---------------------------------------------------------- */
  --paper: #edebe6;
  --paper-warm: #e4e1da;
  --paper-deep: #d8d4cb;
  --hairline: rgba(11, 11, 10, 0.14);
  --hairline-soft: rgba(11, 11, 10, 0.07);
  --hairline-inv: rgba(237, 235, 230, 0.18);

  /* The one colour on the site. Reserved for The SHIFT Promise, which is why
     it lands — spend it anywhere else and it stops meaning anything.
     Editable under Customize → Studio. */
  --shift-blue: #1c2e8a;

  /* --- type ------------------------------------------------------------ */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --brush: "Permanent Marker", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* The display face has a single weight; a faux bold would muddy it. */
  --brush-weight: 400;

  --step--1: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step-0: clamp(0.92rem, 0.88rem + 0.18vw, 1.02rem);
  --step-1: clamp(1.12rem, 1.02rem + 0.48vw, 1.44rem);
  --step-2: clamp(1.5rem, 1.24rem + 1.28vw, 2.4rem);
  --step-3: clamp(2.1rem, 1.5rem + 3vw, 4.4rem);
  --step-4: clamp(2.55rem, 1.1rem + 7.4vw, 9.5rem);

  /* --- space ----------------------------------------------------------- */
  --gutter: clamp(1.25rem, 0.7rem + 2.6vw, 3.5rem);
  --section: clamp(6rem, 3rem + 12vw, 15rem);
  --rule: 1px;

  /* --- motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

/* --- reset -----------------------------------------------------------------
   Scoped deliberately narrowly. A global `* { margin: 0 }` would also strip
   the admin bar and Elementor's own editor chrome.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.waf-native main img,
body.waf-native main svg,
body.waf-native main video {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* --- lenis ---------------------------------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}

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

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

/* --- primitives ----------------------------------------------------------- */
.shell {
  width: 100%;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-500);
  font-weight: 400;
}

.display {
  font-size: var(--step-4);
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-weight: 400;
}

.h2 {
  font-size: var(--step-3);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin: 0;
}

.h3 {
  font-size: var(--step-2);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--charcoal-700);
}

.dim {
  color: var(--charcoal-500);
}

/* Line-mask reveal: .line clips, .line__i is what GSAP moves. */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.line__i {
  display: block;
  will-change: transform;
}

/* --- inverted sections ---------------------------------------------------- */
.ink-field {
  background: var(--ink);
  color: var(--paper);
}

.ink-field .eyebrow,
.ink-field .dim {
  color: var(--charcoal-300);
}

/* --- link with wiping underline ------------------------------------------- */
.wipe {
  position: relative;
  display: inline-block;
  padding-bottom: 0.14em;
  color: inherit;
  text-decoration: none;
}

.wipe::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--rule);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.55s var(--ease-out);
}

.wipe:hover::after,
.wipe:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Visually hidden, still read aloud and still indexed. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: var(--rule) solid currentColor;
  outline-offset: 4px;
}

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