/* ─── BRAND TOKENS ────────────────────────────────── */
    :root {
      --black:      #0d0f0e;
      --charcoal:   #1e2220;
      --olive-dark: #3d4a2e;
      --olive:      #5c6e3a;
      --olive-light:#8a9e5c;
      --sage:       #b5c49a;
      --gray:       #9aa0a6;
      --gray-light: #d4d8d0;
      --off-white:  #f0ede8;
      --white:      #ffffff;

      --font-display: 'Bebas Neue', sans-serif;
      --font-cond:    'Barlow Condensed', sans-serif;
      --font-body:    'Barlow', sans-serif;

      --section-pad: clamp(5rem, 10vw, 9rem);
      --container:   1200px;
      --radius:      4px;
      --transition:  0.3s cubic-bezier(0.4, 0, 0.2, 1);

      /* ─── GLASS / AURORA TOKENS ──────────────────────────
         WCC's take on glassmorphism: instead of literal blue/violet
         "screen glow," the refracted light running through the glass
         is built from the brand's own canopy palette — olive, sage,
         a whisper of dawn-gold and irrigation-teal — so the frosted
         panels read as sunlight through leaves, not a UI trend. */
      --aurora-1: rgba(138,158,92,0.30);   /* sage light streak   */
      --aurora-2: rgba(61,74,46,0.34);     /* olive-dark streak   */
      --aurora-3: rgba(212,196,140,0.16);  /* dawn-gold hint      */
      --aurora-4: rgba(96,150,142,0.18);   /* irrigation-teal hint*/
      --glass-fill:    rgba(24,28,26,0.46);
      --glass-fill-lt: rgba(48,56,42,0.34);
      --glass-edge:    rgba(255,255,255,0.10);
      --glass-edge-hi: rgba(210,224,190,0.55);
      --glass-blur:    22px;
    }

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

html { scroll-behavior: smooth; }

body {
      background: var(--black);
      color: var(--off-white);
      font-family: var(--font-body);
      font-weight: 300;
      line-height: 1.65;
      overflow-x: hidden;
    }

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

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

ul { list-style: none; }

/* ─── UTILITY ─────────────────────────────────────── */
    .container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; }

.tag {
      display: inline-block;
      font-family: var(--font-cond);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--olive-light);
      margin-bottom: 1.2rem;
    }

.section-title {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 5vw, 4rem);
      letter-spacing: 0.04em;
      line-height: 1;
      color: var(--white);
    }

.divider {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin: 1rem 0 2rem;
    }

.divider span {
      height: 1px;
      background: var(--olive);
      flex: 1;
      max-width: 60px;
    }

.divider em {
      font-style: normal;
      font-family: var(--font-cond);
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--olive-light);
    }

h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 3.5vw, 3rem);
      line-height: 1.05;
      letter-spacing: 0.03em;
      color: var(--white);
      margin-bottom: 0.4rem;
    }

h1 .accent { color: var(--olive-light); }

.text-accent { color: var(--olive-light); }
.text-emphasis { color: var(--white); }