/* ==========================================================================
   WWH-ARCHIVE.CSS  —  AWAL-pattern edition
   Modern music-industry vocabulary. Light surfaces, coral signal, bold serif headlines.
   Components mirror AWAL's: splash-hero, services-module, artist-slider, image-highlight-cta,
   trending masonry grid, departments-module, dark footer.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Libre+Baskerville:wght@400;700&family=Montserrat:wght@300;400;500;700;900&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ----- Palette — aliased to the canonical --brand-* tokens in styles.css ----- */
  --wwh-bg:           var(--brand-cream);
  --wwh-bg-warm:      var(--brand-sand);
  --wwh-ink:          var(--brand-ink);
  --wwh-ink-2:        #1a1a1a;
  --wwh-text-soft:    var(--brand-stone);
  --wwh-text-mute:    rgba(14,14,15,.5);
  --wwh-rule:         var(--brand-rule-strong);
  --wwh-rule-soft:    var(--brand-rule);

  /* Coral signal */
  --wwh-signal:        var(--brand-signal);
  --wwh-signal-deep:   var(--brand-signal-deep);
  --wwh-signal-soft:   var(--brand-signal-soft);

  --wwh-paper:        #fff;
  --wwh-paper-soft:   rgba(255,255,255,.78);

  /* ----- Type stacks ----- */
  --wwh-serif:    var(--font-serif);
  --wwh-sans:     var(--font-sans);
  --wwh-italic:   var(--font-italic);
}

/* ==========================================================================
   WARM PASTEL ATMOSPHERE — below the hero
   The hero is dark and grounding (night savanna). Below it, the cream sections
   get subtle warm gradient washes (lavender → rose → golden hour) so the
   pop-culture / creative side of the brand reads alongside the wildlife base.
   These are background-image layers, so any existing background-color shows
   through where the gradient is transparent.
   ========================================================================== */
.wwh-pillars,
.wwh-services,
.wwh-feature-video,
.wwh-departments,
.wwh-highlight,
.wwh-trending,
.wwh-roster-slider,
.wwh-page-band {
  background-image:
    radial-gradient(ellipse at 12% 95%, rgba(192, 155, 159, 0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 92% 5%, rgba(245, 199, 124, 0.10) 0%, transparent 45%);
}
.wwh-services {
  background-image:
    radial-gradient(ellipse at 88% 100%, rgba(155, 138, 161, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 8% 8%, rgba(218, 183, 181, 0.10) 0%, transparent 50%);
}
.wwh-trending {
  background-image:
    radial-gradient(ellipse at 75% 100%, rgba(155, 138, 161, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse at 12% 20%, rgba(245, 199, 124, 0.07) 0%, transparent 55%);
}
.wwh-highlight {
  background-image:
    linear-gradient(135deg, rgba(218, 183, 181, 0.16) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(221, 132, 63, 0.10) 0%, transparent 55%);
}
.wwh-page-band {
  background-image:
    linear-gradient(180deg, rgba(155, 138, 161, 0.10) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 100%, rgba(210, 176, 122, 0.06) 0%, transparent 50%);
}
:is(.wwh-pillar, .wwh-roster-slide, .wwh-trend-item, .wwh-highlight-cta, .wwh-form-submit) {
  position: relative;
  overflow: hidden;
}
:is(.wwh-pillar, .wwh-roster-slide, .wwh-trend-item, .wwh-highlight-cta, .wwh-form-submit)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg,
      transparent 0 42%,
      rgba(255,255,255,.26) 48%,
      rgba(210,176,122,.18) 50%,
      rgba(153,133,168,.13) 53%,
      transparent 59% 100%);
  opacity: 0;
  transform: translateX(-26%);
  transition: opacity .35s ease, transform .72s cubic-bezier(.22,1,.36,1);
}
:is(.wwh-pillar, .wwh-roster-slide, .wwh-trend-item, .wwh-highlight-cta, .wwh-form-submit):hover::before {
  opacity: .8;
  transform: translateX(24%);
}

/* ==========================================================================
   GLOBAL BASE — opt-in via body.wwh-awal
   ========================================================================== */
body.wwh-awal {
  background: var(--wwh-bg);
  color: var(--wwh-ink);
  font-family: var(--wwh-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.wwh-awal::before,
body.wwh-awal::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body.wwh-awal::before {
  z-index: 7;
  opacity: .22;
  background:
    linear-gradient(112deg,
      transparent 0 39%,
      rgba(201,122,102,.10) 44%,
      rgba(210,176,122,.16) 48%,
      rgba(255,255,255,.12) 50%,
      rgba(153,133,168,.10) 53%,
      transparent 59% 100%),
    radial-gradient(ellipse at 62% 18%, rgba(173,148,163,.16) 0%, transparent 44%),
    radial-gradient(ellipse at 20% 82%, rgba(221,132,63,.10) 0%, transparent 48%);
  mix-blend-mode: soft-light;
}
body.wwh-awal::after {
  z-index: 8;
  opacity: .13;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.75) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 28%, rgba(210,176,122,.65) 0 1px, transparent 1.8px),
    radial-gradient(circle at 34% 74%, rgba(192,155,159,.55) 0 1px, transparent 1.7px),
    radial-gradient(circle at 68% 88%, rgba(153,133,168,.45) 0 1px, transparent 1.8px);
  background-size: 260px 260px, 340px 340px, 300px 300px, 420px 420px;
}
body.wwh-awal ::selection { background: var(--wwh-signal); color: #fff; }
body.wwh-awal a { color: inherit; text-decoration: none; }
body.wwh-awal img { max-width: 100%; display: block; }

/* ==========================================================================
   1. HEADER  — sticky top, white, coral hover
   ========================================================================== */
/* Header: extends the night-savanna sky across the top of every page.
   Slimmer + slightly darker than the hero so the sticky bar reads against any
   content that scrolls behind it. */
.wwh-awal #header,
.wwh-awal .wwh-awal-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background:
    url('/brand/starfield.svg') center top / cover no-repeat,
    linear-gradient(180deg, #0A100A 0%, #050805 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-bottom: 1px solid rgba(0,0,0,0.5);
  color: var(--brand-cream);
}
/* Reverse the link colours to read on dusk */
.wwh-awal-nav a {
  color: rgba(251,247,238,0.9);
}
.wwh-awal-nav a:hover,
.wwh-awal-nav a.active {
  color: var(--brand-amber);
}
.wwh-awal-nav a::after {
  background: var(--brand-amber);
}
.wwh-awal-header-cta {
  color: rgba(251,247,238,0.95);
  border-color: rgba(251,247,238,0.4);
}
.wwh-awal-header-cta:hover {
  background: var(--brand-amber);
  border-color: var(--brand-amber);
  color: var(--brand-ink);
}
.wwh-awal-brand { color: var(--brand-cream); }
.wwh-awal-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* ---- Header brand: W monogram only (no wordmark text beside it) ----
   The original anchor still contains the text "WildWooHoo" for accessibility/SEO,
   but it is visually hidden — only the inline monogram SVG (injected by
   brand-effects.js) is rendered. Hover reveals the spectrum inside the cut. */
.wwh-awal-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  color: var(--brand-cream);
  cursor: pointer;
  font-size: 0; /* hide the "WildWooHoo" text node — the SVG replaces it visually */
  perspective: 420px;
}
.wwh-awal-brand .wwh-mono {
  display: block;
  width: 42px; height: 42px;
  color: currentColor;
  overflow: visible;
  transition: filter .35s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
.wwh-awal-brand:hover .wwh-mono {
  filter:
    drop-shadow(0 0 10px rgba(210,176,122,.58))
    drop-shadow(0 0 22px rgba(125,110,146,.28));
  transform: rotateY(16deg);
}
.wwh-awal-nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.wwh-awal-nav a {
  font-family: var(--wwh-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wwh-ink);
  position: relative;
  padding: 6px 0;
  transition: color .2s ease;
}
.wwh-awal-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--wwh-signal);
  transition: width .3s cubic-bezier(.7,.05,.2,1);
}
.wwh-awal-nav a:hover,
.wwh-awal-nav a.active { color: var(--wwh-signal); }
.wwh-awal-nav a:hover::after,
.wwh-awal-nav a.active::after { width: 100%; }
.wwh-awal-header-cta {
  font-family: var(--wwh-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wwh-ink);
  padding: 10px 16px;
  border: 1.5px solid var(--wwh-ink);
  transition: all .2s ease;
}
.wwh-awal-header-cta:hover {
  background: var(--wwh-signal);
  border-color: var(--wwh-signal);
  color: #fff;
}
@media (max-width: 800px) {
  .wwh-awal-header-inner { padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
  .wwh-awal-nav { order: 3; width: 100%; gap: 14px; flex-wrap: wrap; }
  .wwh-awal-nav a { font-size: 11px; }
  .wwh-awal-header-cta { font-size: 11px; padding: 8px 12px; }
}

/* ==========================================================================
   2. SPLASH HERO  — AWAL's pattern: bg + center logo + tagline + popup
   ========================================================================== */
.wwh-splash {
  position: relative;
  min-height: clamp(640px, 92vh, 880px);
  overflow: hidden;
  isolation: isolate;
  /* Night savanna: black sky at top with stars, dark forest/savanna green
     in the lower third, pure black at the ground. Pairs with the showreel
     photography (kangaroos in green grass, golden hour, etc.). */
  background:
    url('/brand/starfield.svg') center top / cover no-repeat,
    linear-gradient(180deg,
      #050805 0%,
      #0A1208 24%,
      #0F1A0C 52%,
      #142010 74%,
      #060A05 92%,
      #000000 100%);
}
.wwh-splash-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wwh-splash-bg .hero-showreel {
  position: absolute;
  inset: 0;
}
.wwh-splash-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.2) 0%, rgba(10,10,10,.45) 60%, rgba(10,10,10,.7) 100%);
  pointer-events: none;
  z-index: 1;
}
.wwh-splash-content {
  position: relative;
  z-index: 4;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vw, 96px) 28px;
  text-align: center;
}
.wwh-splash-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
}
.wwh-splash-logo .mark {
  /* Retired: the kangaroo placeholder. The new wordmark is the whole logo. */
  display: none;
}

/* ==========================================================================
   WORDMARK — the WildWooHoo display logo with diagonal light-beam treatment.
   The brand-effects script upgrades .wwh-splash-logo .name into an inline SVG
   that carries the cut + refraction + click-burst. This block styles both the
   pre-upgrade fallback and the post-upgrade SVG.
   ========================================================================== */
.wwh-splash-logo {
  cursor: pointer;
  user-select: none;
  outline: none;
}
.wwh-splash-logo:focus-visible .wwh-wordmark {
  filter:
    drop-shadow(0 0 18px rgba(255,247,216,.72))
    drop-shadow(0 0 34px rgba(210,176,122,.42));
}
.wwh-splash-logo .name {
  font-family: var(--font-display, "DM Serif Display", Georgia, serif);
  font-weight: 400;
  font-size: clamp(56px, 11vw, 156px);
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 0.9;
  transition: filter .25s ease;
}
.wwh-splash-logo:hover .name {
  filter: drop-shadow(0 0 22px rgba(210,176,122,0.55));
}
.wwh-wordmark {
  display: block;
  width: clamp(280px, 60vw, 720px);
  height: auto;
  color: #fff;
  transition: filter .25s ease;
}
.wwh-splash-logo:hover .wwh-wordmark {
  filter:
    drop-shadow(0 0 24px rgba(210,176,122,0.62))
    drop-shadow(0 0 42px rgba(125,110,146,0.24));
}
/* Splash wordmark - lab-locked zipper animation on hover.
   1. Top + bottom halves start with a slightly exaggerated refraction offset
      (top +2px, bot -2px on top of the SVG's built-in offset).
   2. The rainbow zipper sweeps left to right via stroke-dashoffset; a bright
      spark rides the leading edge.
   3. As the zipper crosses, top slides to 0 and bot slides to +8px in
      lockstep, so by the time the zipper exits the right edge the halves
      are aligned.
   4. At 78-95% an unclipped third "WildWooHoo" text fades in, erasing the
      diagonal cut. The clipped halves fade out at 85-100%.
   5. End-state while hovering: one solid clean "WildWooHoo", no rainbow,
      no glow. Hover-out reverses everything to the refraction state. */
.wwh-wordmark .wwh-wm-beam,
.wwh-wordmark .wwh-wm-sunbeam {
  pointer-events: none;
  stroke-linecap: round;
  transition: opacity .35s ease;
}
.wwh-wordmark .wwh-wm-spark {
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255,250,220,.9)) drop-shadow(0 0 18px rgba(255,255,255,.6));
  transition: opacity .25s ease;
}
.wwh-wordmark .wwh-wm-full {
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.wwh-wordmark .wwh-wm-top,
.wwh-wordmark .wwh-wm-bot {
  transition: transform .65s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}

.wwh-splash-logo:hover .wwh-wm-top,
.wwh-splash-logo.is-burst .wwh-wm-top {
  animation: wwhWmTopMove 2.0s linear forwards, wwhWmHalvesFade 2.0s ease forwards;
}
.wwh-splash-logo:hover .wwh-wm-bot,
.wwh-splash-logo.is-burst .wwh-wm-bot {
  animation: wwhWmBotMove 2.0s linear forwards, wwhWmHalvesFade 2.0s ease forwards;
}
.wwh-splash-logo:hover .wwh-wm-full,
.wwh-splash-logo.is-burst .wwh-wm-full {
  animation: wwhWmFullIn 2.0s ease forwards;
}
.wwh-splash-logo:hover .wwh-wm-beam,
.wwh-splash-logo.is-burst .wwh-wm-beam {
  animation: wwhWmZip 2.0s cubic-bezier(.4, 0, .25, 1) forwards;
}
.wwh-splash-logo:hover .wwh-wm-sunbeam,
.wwh-splash-logo.is-burst .wwh-wm-sunbeam {
  animation: wwhWmSunGlow 2.0s ease forwards;
}
.wwh-splash-logo:hover .wwh-wm-spark,
.wwh-splash-logo.is-burst .wwh-wm-spark {
  animation: wwhWmSpark 2.0s cubic-bezier(.4, 0, .25, 1) forwards;
}

@keyframes wwhWmTopMove {
  0%   { transform: translateX(2px); }
  10%  { transform: translateX(2px); }
  90%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes wwhWmBotMove {
  0%   { transform: translateX(-2px); }
  10%  { transform: translateX(-2px); }
  90%  { transform: translateX(8px); }
  100% { transform: translateX(8px); }
}
@keyframes wwhWmHalvesFade {
  0%, 85%  { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes wwhWmFullIn {
  0%, 78%   { opacity: 0; }
  95%, 100% { opacity: 1; }
}
@keyframes wwhWmZip {
  0%   { stroke-dashoffset: 220; opacity: 0; stroke-width: 6; }
  6%   { opacity: 1; stroke-width: 14; }
  60%  { stroke-width: 11; }
  100% { stroke-dashoffset: -742; opacity: 1; stroke-width: 8; }
}
@keyframes wwhWmSunGlow {
  0%   { opacity: 0; stroke-width: 14; }
  20%  { opacity: 0.48; stroke-width: 22; }
  55%  { opacity: 0.42; stroke-width: 20; }
  100% { opacity: 0; stroke-width: 16; }
}
@keyframes wwhWmSpark {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: 1; }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translate(720px, -50px); }
}

/* Mirror W globe monogram - sequenced hover animation.
   1. White sunlight + rainbow flash in (0-15%).
   2. Reflected W flips up and merges with the top W (15-38%).
   3. Globe meridian + equator spin 2 full turns (15-100%, ending at 720deg
      which is visually 0 - so there's no snap on hover-out).
   4. Beams fade out (60-90%).
   5. End state: ONE rainbow-shiny W inside the globe (soft rainbow drop-
      shadow halo on the merged W).
   The W carries a subtle drop-shadow at all times to vest 3D around the globe. */
.wwh-mono {
  overflow: visible;
}
.wwh-mono .wwh-mono-beam,
.wwh-mono .wwh-mono-whitebeam {
  opacity: 0;
  stroke-linecap: round;
  pointer-events: none;
  transition: opacity .35s ease, stroke-width .35s ease;
}
.wwh-mono .wwh-mono-globe ellipse,
.wwh-mono .wwh-mono-globe circle {
  transform-origin: 50px 50px;
  transition: transform .55s ease;
}
.wwh-mono .wwh-mono-top {
  transform-origin: 50px 50px;
  /* Subtle drop-shadow gives the W a 3D vest around the globe at all times */
  filter: drop-shadow(0.6px 0.8px 0.5px rgba(0,0,0,.35));
  transition: filter .5s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.wwh-mono .wwh-mono-bot {
  transform-origin: 50px 50px;
  transform: scaleY(-1);
  filter: drop-shadow(0.6px 0.8px 0.5px rgba(0,0,0,.3));
  opacity: 0.55;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}

.wwh-awal-brand:hover .wwh-mono .wwh-mono-top {
  animation: wwhMonoTopShimmer 2.6s ease forwards;
}
.wwh-awal-brand:hover .wwh-mono .wwh-mono-bot {
  animation: wwhMonoBotFlip 2.6s cubic-bezier(.22, 1, .36, 1) forwards;
}
.wwh-awal-brand:hover .wwh-mono .wwh-mono-beam {
  animation: wwhMonoBeamFlash 2.6s ease forwards;
}
.wwh-awal-brand:hover .wwh-mono .wwh-mono-whitebeam {
  animation: wwhMonoWhiteFlash 2.6s ease forwards;
}
.wwh-awal-brand:hover .wwh-mono .wwh-mono-globe-meridian {
  animation: wwhMonoMeridianSpin 2.6s cubic-bezier(.5, 0, .3, 1) forwards;
}
.wwh-awal-brand:hover .wwh-mono .wwh-mono-globe-equator {
  animation: wwhMonoEquatorSpin 2.6s cubic-bezier(.5, 0, .3, 1) forwards;
}

/* Finale overlays - rainbow versions of W + globe lines fade in at 78-100% */
.wwh-mono .wwh-mono-top-rainbow,
.wwh-mono .wwh-mono-bot-rainbow,
.wwh-mono .wwh-mono-ring-rainbow,
.wwh-mono .wwh-mono-mer-rainbow,
.wwh-mono .wwh-mono-eq-rainbow {
  opacity: 0;
  transform-origin: 50px 50px;
  pointer-events: none;
}
.wwh-mono .wwh-mono-bot-rainbow { transform: scaleY(-1); transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.wwh-awal-brand:hover .wwh-mono .wwh-mono-bot-rainbow { animation: wwhMonoBotFlip 2.6s cubic-bezier(.22, 1, .36, 1) forwards, wwhMonoRainbowOn 2.6s ease forwards; }
.wwh-awal-brand:hover .wwh-mono .wwh-mono-top-rainbow,
.wwh-awal-brand:hover .wwh-mono .wwh-mono-ring-rainbow,
.wwh-awal-brand:hover .wwh-mono .wwh-mono-mer-rainbow,
.wwh-awal-brand:hover .wwh-mono .wwh-mono-eq-rainbow {
  animation: wwhMonoRainbowOn 2.6s ease forwards;
}
.wwh-awal-brand:hover .wwh-mono .wwh-mono-mer-rainbow {
  animation: wwhMonoMeridianSpin 2.6s cubic-bezier(.5, 0, .3, 1) forwards, wwhMonoRainbowOn 2.6s ease forwards;
}
.wwh-awal-brand:hover .wwh-mono .wwh-mono-eq-rainbow {
  animation: wwhMonoEquatorSpin 2.6s cubic-bezier(.5, 0, .3, 1) forwards, wwhMonoRainbowOn 2.6s ease forwards;
}
@keyframes wwhMonoRainbowOn {
  0%, 78%   { opacity: 0; }
  100%      { opacity: 1; }
}

@keyframes wwhMonoBotFlip {
  0%   { transform: scaleY(-1); opacity: 0.55; }
  38%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes wwhMonoBeamFlash {
  0%   { opacity: 0; stroke-width: 1; }
  15%  { opacity: 1; stroke-width: 4.5; }
  45%  { opacity: 1; stroke-width: 4; }
  85%  { opacity: 0; stroke-width: 3; }
  100% { opacity: 0; stroke-width: 3; }
}
@keyframes wwhMonoWhiteFlash {
  0%   { opacity: 0; stroke-width: 3; }
  15%  { opacity: 0.85; stroke-width: 7; }
  45%  { opacity: 0.6; stroke-width: 6; }
  85%  { opacity: 0; stroke-width: 5; }
  100% { opacity: 0; stroke-width: 5; }
}
@keyframes wwhMonoMeridianSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}
@keyframes wwhMonoEquatorSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-720deg); }
}
@keyframes wwhMonoTopShimmer {
  0% {
    filter: drop-shadow(0.6px 0.8px 0.5px rgba(0,0,0,.35));
  }
  38% {
    filter: drop-shadow(0.6px 0.8px 0.5px rgba(0,0,0,.35));
  }
  60% {
    filter:
      drop-shadow(0.6px 0.8px 0.5px rgba(0,0,0,.35))
      drop-shadow(0 0 3px rgba(201, 122, 102, 0.45))
      drop-shadow(0 0 5px rgba(210, 176, 122, 0.4))
      drop-shadow(0 0 7px rgba(153, 133, 168, 0.32));
  }
  100% {
    filter:
      drop-shadow(0.6px 0.8px 0.5px rgba(0,0,0,.35))
      drop-shadow(0 0 3px rgba(201, 122, 102, 0.5))
      drop-shadow(0 0 5px rgba(210, 176, 122, 0.45))
      drop-shadow(0 0 7px rgba(153, 133, 168, 0.35));
  }
}
@media (prefers-reduced-motion: reduce) {
  body.wwh-awal::before,
  body.wwh-awal::after,
  .wwh-mono .wwh-mono-globe,
  .wwh-splash-logo.is-burst .wwh-wm-beam,
  .wwh-splash-logo.is-burst .wwh-wm-sunbeam,
  .wwh-splash-logo.is-burst .wwh-wm-top,
  .wwh-splash-logo.is-burst .wwh-wm-bot,
  .wwh-awal-brand .wwh-mono,
  .wwh-awal-brand .wwh-mono .wwh-mono-beam,
  .wwh-awal-brand .wwh-mono .wwh-mono-whitebeam,
  .wwh-awal-brand .wwh-mono .wwh-mono-top,
  .wwh-awal-brand .wwh-mono .wwh-mono-bot { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .wwh-splash-logo.is-burst .wwh-wm-beam,
  .wwh-splash-logo.is-burst .wwh-wm-top,
  .wwh-splash-logo.is-burst .wwh-wm-bot { animation: none; }
}

/* ==========================================================================
   CTA LIGHT-SWEEP - the pop culture sparkle on interactive elements
   A thin warm light sweeps across each CTA on hover, picking up the golden-
   hour palette and echoing the rainbow beam on the main logo.
   ========================================================================== */
.wwh-awal-header-cta,
.wwh-highlight-cta,
.wwh-trend-call-cta,
.wwh-form-submit,
.wwh-footer-back-top,
.wwh-services-cta h2 a {
  position: relative;
  overflow: hidden;
}
.wwh-awal-header-cta::after,
.wwh-highlight-cta::after,
.wwh-trend-call-cta::after,
.wwh-form-submit::after,
.wwh-footer-back-top::after,
.wwh-services-cta h2 a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 90%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(210, 176, 122, 0.18) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(210, 176, 122, 0.18) 70%,
    transparent 100%);
  transition: left .9s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  z-index: 1;
}
.wwh-awal-header-cta:hover::after,
.wwh-highlight-cta:hover::after,
.wwh-trend-call-cta:hover::after,
.wwh-form-submit:hover::after,
.wwh-footer-back-top:hover::after,
.wwh-services-cta h2 a:hover::after {
  left: 130%;
}
.wwh-awal-header-cta > *,
.wwh-highlight-cta > *,
.wwh-trend-call-cta > *,
.wwh-form-submit > *,
.wwh-footer-back-top > *,
.wwh-services-cta h2 a > * {
  position: relative;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .wwh-awal-header-cta::after,
  .wwh-highlight-cta::after,
  .wwh-trend-call-cta::after,
  .wwh-form-submit::after,
  .wwh-footer-back-top::after,
  .wwh-services-cta h2 a::after { display: none; }
}
.wwh-splash-logo .name {
  font-family: var(--wwh-serif);
  font-weight: 700;
  font-size: clamp(56px, 11vw, 156px);
  letter-spacing: -.03em;
  line-height: .9;
  color: #fff;
  text-shadow: 0 4px 32px rgba(0,0,0,.4);
}
.wwh-splash-tagline-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding: 16px 28px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.6);
  color: #fff;
  font-family: var(--wwh-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: all .26s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wwh-splash-tagline-btn:hover {
  background: var(--wwh-signal);
  border-color: var(--wwh-signal);
  transform: translateY(-2px);
}
.wwh-splash-tagline-btn .plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.wwh-splash-tagline-btn .plus::before,
.wwh-splash-tagline-btn .plus::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.wwh-splash-tagline-btn .plus::before { width: 10px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.wwh-splash-tagline-btn .plus::after  { height: 10px; width: 1.5px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.wwh-splash-tagline-btn.is-open .plus::after { display: none; }

/* Manifesto popup (slides up from bottom) */
.wwh-splash-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(10,10,10,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wwh-splash-popup.is-open { display: flex; }
.wwh-splash-popup-content {
  max-width: 680px;
  background: var(--wwh-bg);
  padding: clamp(32px, 5vw, 64px);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.wwh-splash-popup-content p {
  font-family: var(--wwh-serif);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--wwh-ink);
  margin: 0 0 18px;
}
.wwh-splash-popup-content p:last-child { margin-bottom: 0; }
.wwh-splash-popup-content p strong { color: var(--wwh-signal-deep); }
.wwh-splash-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: 0;
  font-family: var(--wwh-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wwh-ink);
  padding: 4px 0;
}
.wwh-splash-popup-close:hover { color: var(--wwh-signal); }
.wwh-splash-popup-close::after {
  content: "×";
  font-size: 22px;
  line-height: 1;
}

/* ==========================================================================
   3. SERVICES MODULE  — AWAL pattern: headline + bullet list + giant Join Us link
   ========================================================================== */
.wwh-services {
  background: var(--wwh-bg);
  padding: clamp(64px, 9vw, 120px) 28px;
  border-bottom: 1px solid var(--wwh-rule);
}
.wwh-services-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.wwh-services-headline {
  font-family: var(--wwh-serif);
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--wwh-ink);
  margin: 0;
}
.wwh-services-headline em {
  font-style: italic;
  color: var(--wwh-signal-deep);
  font-family: var(--wwh-italic);
}
.wwh-services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.wwh-services-list li {
  padding: 16px 0;
  border-top: 1px solid var(--wwh-rule);
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--wwh-sans);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--wwh-ink);
  line-height: 1.4;
}
.wwh-services-list li:last-child { border-bottom: 1px solid var(--wwh-rule); }
.wwh-services-list li::before {
  content: counter(wwh-svc, decimal-leading-zero);
  counter-increment: wwh-svc;
  font-family: var(--wwh-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--wwh-signal-deep);
  flex-shrink: 0;
  width: 32px;
}
.wwh-services-list { counter-reset: wwh-svc; }

.wwh-services-cta {
  margin-top: clamp(36px, 5vw, 64px);
  text-align: center;
}
.wwh-services-cta h2 {
  font-family: var(--wwh-serif);
  font-weight: 700;
  font-size: clamp(72px, 14vw, 220px);
  letter-spacing: -.04em;
  line-height: .9;
  color: var(--wwh-ink);
  margin: 0;
  transition: color .3s ease;
}
.wwh-services-cta h2 a {
  color: inherit;
  display: inline-block;
  position: relative;
  text-decoration: none;
}
.wwh-services-cta h2 a:hover { color: var(--wwh-signal); }

@media (max-width: 800px) {
  .wwh-services-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   4. ARTIST/WORK SLIDER  — AWAL horizontal-image-slider pattern
   ========================================================================== */
.wwh-roster-slider {
  background: var(--wwh-bg);
  padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 120px);
  position: relative;
  overflow: hidden;
}
.wwh-roster-slider-head {
  max-width: 1280px;
  margin: 0 auto 36px;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
}
.wwh-roster-slider-head h2 {
  font-family: var(--wwh-serif);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0;
}
.wwh-roster-slider-head p {
  font-family: var(--wwh-sans);
  font-size: 14px;
  color: var(--wwh-text-soft);
  margin: 0;
  max-width: 42ch;
}
.wwh-roster-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 28px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--wwh-rule) transparent;
}
.wwh-roster-track::-webkit-scrollbar { height: 6px; }
.wwh-roster-track::-webkit-scrollbar-track { background: transparent; }
.wwh-roster-track::-webkit-scrollbar-thumb { background: var(--wwh-rule); border-radius: 3px; }

.wwh-roster-slide {
  flex: 0 0 clamp(240px, 28vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--wwh-ink);
  position: relative;
  transition: transform .3s ease;
}
.wwh-roster-slide:hover { transform: translateY(-4px); }
.wwh-roster-slide-img {
  aspect-ratio: 4/5;
  background: var(--wwh-ink);
  overflow: hidden;
  position: relative;
}
.wwh-roster-slide-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(15%) saturate(1.05);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.wwh-roster-slide:hover .wwh-roster-slide-img img { transform: scale(1.05); }
.wwh-roster-slide-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 50%);
  pointer-events: none;
}
.wwh-roster-slide-info {
  padding: 14px 0 0;
}
.wwh-roster-slide-info .name {
  font-family: var(--wwh-serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--wwh-ink);
}
.wwh-roster-slide-info .sub {
  font-family: var(--wwh-sans);
  font-size: 13px;
  color: var(--wwh-text-soft);
  margin: 4px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wwh-roster-slide-info .sub::after {
  content: "→";
  display: inline-block;
  transition: transform .2s ease;
}
.wwh-roster-slide:hover .wwh-roster-slide-info .sub { color: var(--wwh-signal); }
.wwh-roster-slide:hover .wwh-roster-slide-info .sub::after { transform: translateX(4px); }

/* ==========================================================================
   5. DEPARTMENTS MODULE  — AWAL pattern
   ========================================================================== */
.wwh-departments {
  background: var(--wwh-bg);
  padding: clamp(64px, 9vw, 120px) 28px;
  border-top: 1px solid var(--wwh-rule);
}
.wwh-departments-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.wwh-departments h2 {
  font-family: var(--wwh-serif);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0 0 36px;
  max-width: 22ch;
  color: var(--wwh-ink);
}
.wwh-departments h2 em {
  font-style: italic;
  color: var(--wwh-signal-deep);
  font-family: var(--wwh-italic);
}
.wwh-departments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
}
.wwh-departments-list li {
  font-family: var(--wwh-sans);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--wwh-ink);
  line-height: 1.1;
  padding: 6px 18px 6px 0;
  border-right: 1px solid var(--wwh-rule);
}
.wwh-departments-list li:last-child { border-right: 0; }

/* ==========================================================================
   6. IMAGE HIGHLIGHT CTA  — AWAL's rotating card stack
   ========================================================================== */
.wwh-highlight {
  background: var(--wwh-ink);
  color: #fff;
  padding: clamp(80px, 12vw, 140px) 28px;
  position: relative;
  overflow: hidden;
}
.wwh-highlight::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 22% 50%, rgba(251,110,90,.25) 0%, rgba(251,110,90,0) 65%),
    radial-gradient(ellipse 55% 45% at 80% 60%, rgba(255,180,120,.15) 0%, rgba(255,180,120,0) 65%);
  pointer-events: none;
}
.wwh-highlight-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.wwh-highlight-cards {
  position: relative;
  min-height: 380px;
  display: grid;
  place-items: center;
}
.wwh-highlight-card {
  position: absolute;
  width: 240px;
  aspect-ratio: 4/5;
  background: var(--wwh-bg);
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
  overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.wwh-highlight-card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(10%) saturate(1.05);
}
.wwh-highlight-card.is-active {
  transform: translate(0, 0) rotate(0deg) scale(1.05);
  z-index: 5;
}
.wwh-highlight-card:nth-child(1) { transform: translate(-30%, -15%) rotate(-9deg) scale(.9); z-index: 1; }
.wwh-highlight-card:nth-child(2) { transform: translate(-15%, 18%)  rotate(-4deg) scale(.92); z-index: 2; }
.wwh-highlight-card:nth-child(3) { transform: translate(0, 0)        rotate(0deg)  scale(1);   z-index: 3; }
.wwh-highlight-card:nth-child(4) { transform: translate(20%, 12%)   rotate(7deg)  scale(.92); z-index: 2; }
.wwh-highlight-card:nth-child(5) { transform: translate(34%, -10%)  rotate(11deg) scale(.88); z-index: 1; }

.wwh-highlight-copy h2 {
  font-family: var(--wwh-serif);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0 0 24px;
}
.wwh-highlight-copy h2 em {
  font-style: italic;
  color: var(--wwh-signal);
  font-family: var(--wwh-italic);
}
.wwh-highlight-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wwh-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  padding: 14px 24px;
  border: 1.5px solid #fff;
  transition: all .26s ease;
}
.wwh-highlight-cta:hover {
  background: var(--wwh-signal);
  border-color: var(--wwh-signal);
}
.wwh-highlight-cta::after {
  content: "→";
  font-size: 16px;
  transition: transform .2s ease;
}
.wwh-highlight-cta:hover::after { transform: translateX(4px); }
@media (max-width: 800px) {
  .wwh-highlight-inner { grid-template-columns: 1fr; gap: 48px; }
  .wwh-highlight-cards { min-height: 320px; }
  .wwh-highlight-card { width: 180px; }
}

/* ==========================================================================
   7. TRENDING MASONRY GRID  — AWAL's exact pattern
   ========================================================================== */
.wwh-trending {
  background:
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Cfilter id="n"%3E%3CfeTurbulence baseFrequency=".7"/%3E%3CfeColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0"/%3E%3C/filter%3E%3Crect width="200" height="200" filter="url(%23n)" opacity=".7"/%3E%3C/svg%3E'),
    linear-gradient(to bottom right, var(--wwh-bg) 60%, var(--wwh-signal));
  padding: clamp(64px, 9vw, 120px) 28px;
  position: relative;
}
.wwh-trending-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.wwh-trending-head {
  margin-bottom: 36px;
  max-width: 700px;
}
.wwh-trending-head h2 {
  font-family: var(--wwh-serif);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--wwh-ink);
  margin: 0 0 12px;
}
.wwh-trending-head h2 em {
  font-style: italic;
  color: var(--wwh-signal-deep);
  font-family: var(--wwh-italic);
}
.wwh-trending-head p {
  font-family: var(--wwh-sans);
  font-size: 15px;
  color: var(--wwh-ink-2);
  margin: 0;
  max-width: 56ch;
  line-height: 1.55;
}
.wwh-trending-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
}
.wwh-trend-item {
  position: relative;
  overflow: hidden;
  background: #000;
  text-decoration: none;
  color: #fff;
  display: block;
  transition: transform .3s cubic-bezier(.7,.05,.2,1);
}
.wwh-trend-item:hover { transform: translateY(-3px); }
.wwh-trend-item.size-large { grid-column: span 2; grid-row: span 2; }
.wwh-trend-item.size-med   { grid-column: span 2; grid-row: span 1; }
.wwh-trend-item.size-tall  { grid-column: span 1; grid-row: span 2; }
.wwh-trend-item.size-small { grid-column: span 1; grid-row: span 1; }

.wwh-trend-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.wwh-trend-item:hover img { transform: scale(1.04); }
.wwh-trend-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.wwh-trend-info .title {
  font-family: var(--wwh-serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 4px;
}
.wwh-trend-info .sub {
  font-family: var(--wwh-sans);
  font-size: 12px;
  color: rgba(255,255,255,.85);
  margin: 0;
  letter-spacing: .01em;
}
.wwh-trend-item.size-large .wwh-trend-info .title { font-size: 24px; }

/* Quote / tweet tile (no image) */
.wwh-trend-item.is-quote {
  background: var(--wwh-paper);
  color: var(--wwh-ink);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.wwh-trend-item.is-quote .wwh-trend-quote-icon {
  width: 28px; height: 28px;
  background: var(--wwh-signal);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-family: var(--wwh-serif);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.wwh-trend-item.is-quote .wwh-trend-quote-icon::before { content: "“"; line-height: .6; transform: translateY(2px); display: inline-block; }
.wwh-trend-item.is-quote .quote-text {
  font-family: var(--wwh-serif);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--wwh-ink);
  margin: 0;
  flex: 1;
}
.wwh-trend-item.is-quote .quote-handle {
  font-family: var(--wwh-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wwh-text-soft);
  margin: 0;
}

/* Video tile */
.wwh-trend-item.is-video::after {
  content: "▶";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--wwh-ink);
  display: grid;
  place-items: center;
  font-size: 18px;
  padding-left: 4px;
  z-index: 1;
  transition: transform .3s ease, background .3s ease;
}
.wwh-trend-item.is-video:hover::after {
  background: var(--wwh-signal);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.1);
}

@media (max-width: 900px) {
  .wwh-trending-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .wwh-trend-item.size-large { grid-column: span 2; grid-row: span 2; }
  .wwh-trend-item.size-med { grid-column: span 2; grid-row: span 1; }
  .wwh-trend-item.size-tall { grid-column: span 1; grid-row: span 2; }
  .wwh-trend-item.size-small { grid-column: span 1; grid-row: span 1; }
}

/* ==========================================================================
   8. FEATURED VIDEO  — Kangaroo Time YouTube embed
   ========================================================================== */
.wwh-feature-video {
  background: var(--wwh-bg);
  padding: clamp(64px, 9vw, 120px) 28px;
  border-top: 1px solid var(--wwh-rule);
}
.wwh-feature-video-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.wwh-feature-video-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.wwh-feature-video-head h2 {
  font-family: var(--wwh-serif);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -.025em;
  margin: 0;
}
.wwh-feature-video-head h2 em {
  font-style: italic;
  color: var(--wwh-signal-deep);
  font-family: var(--wwh-italic);
}
.wwh-feature-video-head p {
  font-family: var(--wwh-sans);
  font-size: 14px;
  color: var(--wwh-text-soft);
  margin: 0;
  max-width: 42ch;
}
.wwh-feature-video-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}
.wwh-feature-video-frame iframe {
  width: 100%; height: 100%; border: 0;
}
.wwh-feature-video-caption {
  font-family: var(--wwh-sans);
  font-size: 13px;
  color: var(--wwh-text-soft);
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}
.wwh-feature-video-caption a {
  color: var(--wwh-signal-deep);
  border-bottom: 1px solid currentColor;
  transition: opacity .2s ease;
}
.wwh-feature-video-caption a:hover { opacity: .7; }

/* ==========================================================================
   9. FOOTER  — AWAL dark footer pattern
   ========================================================================== */
.wwh-footer {
  background: var(--wwh-ink);
  color: #fff;
  padding: clamp(56px, 7vw, 96px) 28px clamp(32px, 4vw, 48px);
  position: relative;
}
.wwh-footer-back-top {
  display: block;
  text-align: right;
  max-width: 1280px;
  margin: 0 auto 32px;
  font-family: var(--wwh-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .2s ease;
}
.wwh-footer-back-top:hover { color: var(--wwh-signal); }
.wwh-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
/* ---- Footer brand: full wordmark only (no W monogram beside it) ----
   The text "WildWooHoo" is rendered via DM Serif Display, no cut treatment at
   this size — the cut signature lives in the hero. */
.wwh-footer-brand {
  font-family: var(--font-display, "DM Serif Display", Georgia, serif);
  font-weight: 400;
  font-size: 38px;
  letter-spacing: -.018em;
  color: #fff;
  display: inline-block;
  text-decoration: none;
}
/* Remove any historical footer-brand ::before pseudo-mark */
.wwh-footer-brand::before { display: none !important; content: none !important; }
.wwh-footer-menus {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.wwh-footer-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wwh-footer-menu h4 {
  font-family: var(--wwh-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 6px;
}
.wwh-footer-menu a {
  font-family: var(--wwh-sans);
  font-size: 13px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s ease;
}
.wwh-footer-menu a:hover { color: var(--wwh-signal); }
.wwh-footer-socials {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.wwh-footer-socials a {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff;
  font-family: var(--wwh-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: all .2s ease;
}
.wwh-footer-socials a:hover {
  background: var(--wwh-signal);
  border-color: var(--wwh-signal);
}
.wwh-footer-bottom {
  max-width: 1280px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--wwh-sans);
  font-size: 12px;
  color: rgba(255,255,255,.5);
}
.wwh-footer-bottom a { color: inherit; }
.wwh-footer-bottom a:hover { color: var(--wwh-signal); }

/* ==========================================================================
   10. MOTION
   ========================================================================== */
.wwh-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.wwh-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .wwh-reveal { opacity: 1; transform: none; transition: none; }
  .wwh-highlight-card { transition: none; }
}

/* ==========================================================================
   11. PILLAR STRIP (home page nav-to-pillars)
   ========================================================================== */
.wwh-pillars {
  background: var(--wwh-paper);
  border-top: 1px solid var(--wwh-rule);
  border-bottom: 1px solid var(--wwh-rule);
  padding: 0;
}
.wwh-pillars-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.wwh-pillar {
  display: block;
  padding: 28px 28px 32px;
  border-right: 1px solid var(--wwh-rule);
  color: var(--wwh-ink);
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease;
  min-height: 156px;
}
.wwh-pillar:last-child { border-right: 0; }
.wwh-pillar:hover { background: var(--wwh-bg); }
.wwh-pillar .wwh-pillar-num {
  display: block;
  font-family: var(--wwh-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wwh-signal);
  margin-bottom: 18px;
}
.wwh-pillar .wwh-pillar-name {
  display: block;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 8px;
}
.wwh-pillar .wwh-pillar-sub {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--wwh-ink-soft, #555);
}
.wwh-pillar:hover .wwh-pillar-name { color: var(--wwh-signal); }
@media (max-width: 900px) {
  .wwh-pillars-inner { grid-template-columns: repeat(2, 1fr); }
  .wwh-pillar { border-bottom: 1px solid var(--wwh-rule); min-height: 130px; }
  .wwh-pillar:nth-child(odd) { border-right: 1px solid var(--wwh-rule); }
  .wwh-pillar:nth-child(even) { border-right: 0; }
  .wwh-pillar:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .wwh-pillars-inner { grid-template-columns: 1fr; }
  .wwh-pillar, .wwh-pillar:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--wwh-rule); }
  .wwh-pillar:last-child { border-bottom: 0; }
}

/* ==========================================================================
   12. PAGE HEADLINE BAND (Projects/Impact/Network/Portal top)
   ========================================================================== */
.wwh-page-band {
  background: var(--wwh-bg);
  padding: clamp(96px, 14vw, 180px) 0 clamp(56px, 7vw, 96px);
}
.wwh-page-band-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.wwh-page-stamp {
  font-family: var(--wwh-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wwh-signal);
  margin: 0 0 22px;
}
.wwh-page-band h1 {
  font-family: "Libre Baskerville", serif;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  max-width: 18ch;
}
.wwh-page-band h1 em {
  font-style: italic;
  color: var(--wwh-signal);
}
.wwh-page-lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  max-width: 64ch;
  margin: 0 0 28px;
  color: var(--wwh-ink);
}
.wwh-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  font-family: var(--wwh-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--wwh-ink-soft, #555);
}
.wwh-page-meta strong { color: var(--wwh-ink); font-weight: 700; }
.wwh-page-meta a { color: var(--wwh-signal); }

/* ==========================================================================
   13. PROJECT CARDS (Projects page)
   ========================================================================== */
.wwh-projects {
  background: var(--wwh-paper);
  padding: clamp(48px, 7vw, 96px) 0;
  border-top: 1px solid var(--wwh-rule);
}
.wwh-projects-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}
.wwh-project {
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--wwh-rule);
}
.wwh-project:last-child { border-bottom: 0; padding-bottom: 0; }
.wwh-project-num {
  font-family: var(--wwh-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wwh-signal);
  margin-bottom: 14px;
}
.wwh-project h2 {
  font-family: "Libre Baskerville", serif;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.wwh-project h2 .wwh-project-sub {
  opacity: .55;
  font-weight: 400;
  font-size: 0.7em;
  font-style: italic;
}
.wwh-project-tag {
  font-size: 14px;
  color: var(--wwh-ink-soft, #555);
  margin: 0 0 28px;
  letter-spacing: .01em;
}
.wwh-project-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.wwh-project-media {
  border-radius: 8px;
  overflow: hidden;
  background: var(--wwh-bg);
  aspect-ratio: 16 / 9;
  position: relative;
}
.wwh-project-media iframe,
.wwh-project-media img {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.wwh-project-body p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 12px;
}
.wwh-project-body p strong {
  font-family: var(--wwh-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wwh-signal);
  display: inline-block;
  margin-right: 6px;
}
.wwh-project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 18px;
}
.wwh-project-links a {
  font-family: var(--wwh-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--wwh-ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--wwh-ink);
  transition: color 200ms ease, border-color 200ms ease;
}
.wwh-project-links a:hover { color: var(--wwh-signal); border-color: var(--wwh-signal); }
@media (max-width: 900px) {
  .wwh-project-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   14. FORMS (Network apply, Portal login)
   ========================================================================== */
.wwh-form {
  max-width: 720px;
  margin-top: 12px;
}
.wwh-form label {
  display: block;
  margin-bottom: 18px;
}
.wwh-form label > span {
  display: block;
  font-family: var(--wwh-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wwh-ink);
  margin-bottom: 8px;
}
.wwh-form input[type="text"],
.wwh-form input[type="email"],
.wwh-form input[type="password"],
.wwh-form select,
.wwh-form textarea {
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid var(--wwh-rule);
  border-radius: 4px;
  background: var(--wwh-paper);
  color: var(--wwh-ink);
  box-sizing: border-box;
  transition: border-color 180ms ease;
}
.wwh-form input:focus,
.wwh-form select:focus,
.wwh-form textarea:focus {
  outline: none;
  border-color: var(--wwh-signal);
}
.wwh-form input:disabled,
.wwh-form select:disabled,
.wwh-form textarea:disabled,
.wwh-form button:disabled {
  background: var(--wwh-bg);
  color: var(--wwh-ink-soft, #888);
  cursor: not-allowed;
}
.wwh-form textarea { resize: vertical; min-height: 80px; }
.wwh-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wwh-form-row label { margin-bottom: 18px; }
@media (max-width: 640px) {
  .wwh-form-row { grid-template-columns: 1fr; }
}
.wwh-form-hp { position: absolute; left: -10000px; height: 0; width: 0; overflow: hidden; }
.wwh-form-consent {
  margin: 8px 0 22px;
}
.wwh-form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}
.wwh-form-consent input[type="checkbox"] {
  margin-top: 3px;
  width: 16px; height: 16px;
  accent-color: var(--wwh-signal);
}
.wwh-form-consent span {
  display: inline;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wwh-ink-soft, #555);
  margin: 0;
}
.wwh-form-submit {
  font-family: var(--wwh-mono, "JetBrains Mono", monospace);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--wwh-signal);
  color: var(--wwh-paper);
  border: 0;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.wwh-form-submit:hover { background: var(--wwh-signal-deep, #db4f3c); transform: translateY(-1px); }
.wwh-form-fallback {
  font-size: 12px;
  color: var(--wwh-ink-soft, #777);
  margin: 12px 0 0;
  line-height: 1.5;
}
.wwh-form-fallback a { color: var(--wwh-signal); }

/* ==========================================================================
   15. OPEN CALL TILES (Network page — extends .wwh-trend-item)
   ========================================================================== */
.wwh-trend-item.is-call {
  background: var(--wwh-paper);
  border: 1px solid var(--wwh-rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  text-decoration: none;
  color: var(--wwh-ink);
}
.wwh-trend-item.is-call:hover {
  border-color: var(--wwh-signal);
  transform: translateY(-3px);
}
.wwh-trend-call-tag {
  font-family: var(--wwh-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wwh-signal);
  margin-bottom: 4px;
}
.wwh-trend-call-title {
  font-family: "Libre Baskerville", serif;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}
.wwh-trend-call-meta {
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--wwh-ink-soft, #555);
  margin: 0;
}
.wwh-trend-call-body {
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 0 0;
}
.wwh-trend-call-cta {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--wwh-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--wwh-signal);
  text-decoration: none;
  border-bottom: 1px solid var(--wwh-signal);
  align-self: flex-start;
}
.wwh-trend-item.size-large.is-call .wwh-trend-call-title { font-size: 26px; }

/* ==========================================================================
   16. IMPACT-PAGE responsive overrides (two-area grid + four-step process)
   ========================================================================== */
@media (max-width: 800px) {
  #impact-areas .wwh-projects-inner { grid-template-columns: 1fr !important; }
}
@media (max-width: 1000px) {
  #process ol { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  #process ol { grid-template-columns: 1fr !important; }
}