/* ═══════════════════════════════════════════════════════════════════════════
   WAMKULU — Design System v3  |  Full-panel scroll
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root {
  --wk-black:       #050505;
  --wk-surface:     #0D0C0B;
  --wk-surface-2:   #161412;
  --wk-border:      rgba(255,255,255,0.06);
  --wk-border-gold: rgba(201,168,76,0.22);

  --wk-gold:        #C9A84C;
  --wk-gold-light:  #E2C472;
  --wk-gold-dim:    rgba(201,168,76,0.08);

  --wk-white:       #F0EEE8;
  --wk-text:        #D4D0C8;
  --wk-muted:       #9f9b93;
  --wk-faint:       #2A2825;

  --wk-font:   'Satoshi', sans-serif;
  --wk-mono:   'SF Mono', 'Fira Code', monospace;

  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur:         800ms;
  --dur-fast:    280ms;
  --dur-out:     440ms;

  --pad-x: clamp(1.5rem, 6vw, 4rem);
  --max-w: 1320px;

  --z-canvas:  0;
  --z-content: 2;
  --z-progress: 80;
  --z-nav:    100;
  --z-overlay: 200;
  --z-noise:   400;
}

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

/* ─ Scroll snap on the root ─ */
html {
  height: 100dvh;
  overflow-y: scroll;
  /* overflow-x: hidden is intentionally NOT set here — it would break position:sticky */
  scroll-snap-type: y mandatory;  /* JS in wk-story.js disables this inside story sections */
  scrollbar-width: none;   /* Firefox */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html::-webkit-scrollbar { display: none; }

body {
  font-family: var(--wk-font);
  background: var(--wk-black);
  color: var(--wk-text);
  /* overflow-x: clip does NOT create a new scroll container (unlike 'hidden'),
     so position:sticky inside wk-story__pin still works correctly. */
  overflow-x: clip;
}

img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* Grain — fixed, GPU-safe */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-noise);
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

/* ── 3. PANEL SYSTEM ─────────────────────────────────────────────────────── */
.wk-page { display: block; }

.wk-panel {
  /* Each panel = exactly one viewport */
  height: 100dvh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;

  /* Center content vertically */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wk-panel--dark { background: var(--wk-surface); }

/* Inner container */
.wk-panel__inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ── 4. SECTION-ANIMATION SYSTEM (data-sa) ────────────────────────────────
   Elements marked with data-sa="N" animate in/out based on panel state.
   N = stagger order (1..6)
──────────────────────────────────────────────────────────────────────────── */

/* BASE — elements waiting to enter (slide up from below) */
[data-sa] {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity  var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    filter   var(--dur) var(--ease);
  filter: blur(2px);
  will-change: opacity, transform;
}

/* ACTIVE — panel is in view, elements reveal with stagger */
.sa-active [data-sa]   { opacity: 1; transform: translateY(0); filter: blur(0); }

.sa-active [data-sa="1"] { transition-delay: 0ms; }
.sa-active [data-sa="2"] { transition-delay: 110ms; }
.sa-active [data-sa="3"] { transition-delay: 220ms; }
.sa-active [data-sa="4"] { transition-delay: 330ms; }
.sa-active [data-sa="5"] { transition-delay: 440ms; }
.sa-active [data-sa="6"] { transition-delay: 550ms; }

/* PAST — panel scrolled above, elements exit upward */
.sa-past [data-sa] {
  opacity: 0;
  transform: translateY(-36px);
  filter: blur(1px);
  transition:
    opacity   var(--dur-out) var(--ease-in) 0ms,
    transform var(--dur-out) var(--ease-in) 0ms,
    filter    var(--dur-out) var(--ease-in) 0ms;
}

/* Hero clip reveal (text mask) */
.sa-clip {
  overflow: hidden;
  display: block;
}

.sa-clip__inner {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur) var(--ease);
  transition-delay: 0ms;
}

.sa-active .sa-clip__inner { transform: translateY(0); }
.sa-past   .sa-clip__inner {
  transform: translateY(-105%);
  transition-duration: var(--dur-out);
  transition-timing-function: var(--ease-in);
}

/* ── 5. SIDE PROGRESS INDICATOR ─────────────────────────────────────────── */
.wk-progress {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-progress);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.wk-progress__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  cursor: pointer;
  padding: 2px 0;
}

.wk-progress__label {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: transparent;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
  font-family: var(--wk-mono);
}

.wk-progress__dot {
  width: 3px;
  height: 3px;
  border-radius: 2px;
  background: var(--wk-faint);
  flex-shrink: 0;
  transition: height 0.4s var(--ease-spring),
              background 0.35s var(--ease),
              width 0.3s var(--ease);
}

/* Active state */
.wk-progress__item.active .wk-progress__dot {
  height: 28px;
  background: var(--wk-gold);
}

.wk-progress__item.active .wk-progress__label {
  color: var(--wk-gold);
}

/* Hover */
.wk-progress__item:hover .wk-progress__label {
  color: var(--wk-muted);
}

.wk-progress__item:hover .wk-progress__dot {
  background: var(--wk-muted);
}

/* ── 6. TYPOGRAPHY ───────────────────────────────────────────────────────── */
.wk-label {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wk-muted);
  margin-bottom: 2rem;
  font-family: var(--wk-mono);
}

.wk-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.wk-label--gold { color: var(--wk-gold); }

.wk-display {
  font-size: clamp(4rem, 11vw, 11rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.88;
  color: var(--wk-white);
  text-transform: uppercase;
}

.wk-h2 {
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--wk-white);
  text-transform: uppercase;
}

.wk-h3 {
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wk-white);
}

.wk-body {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  line-height: 1.72;
  color: var(--wk-muted);
  max-width: 52ch;
}

/* ── 7. NAVIGATION ───────────────────────────────────────────────────────── */
.wk-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: 1.5rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.55s var(--ease), opacity 0.4s;
}

.wk-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,5,5,0.9) 0%, transparent 100%);
  pointer-events: none;
}

.wk-nav__logo {
  position: relative;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wk-white);
  transition: color var(--dur-fast) var(--ease);
}

.wk-nav__logo:hover { color: var(--wk-gold); }

.wk-nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.wk-nav__links a {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wk-muted);
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  transition: color var(--dur-fast) var(--ease);
}

.wk-nav__links a:hover { color: var(--wk-white); }

.wk-nav__right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.wk-lang-switch {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--wk-border);
  border-radius: 999px;
  padding: 3px;
}

.wk-lang-switch button {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wk-muted);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  transition: all var(--dur-fast) var(--ease);
}

.wk-lang-switch button.active { background: var(--wk-gold); color: var(--wk-black); }

.wk-nav__cta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wk-white);
  border: 1px solid var(--wk-border);
  border-radius: 999px;
  padding: 0.5rem 1.125rem;
  transition: border-color var(--dur-fast) var(--ease),
              background   var(--dur-fast) var(--ease),
              color        var(--dur-fast) var(--ease);
}

.wk-nav__cta:hover { border-color: var(--wk-gold); background: var(--wk-gold); color: var(--wk-black); }

.wk-nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  padding: 4px 0;
  position: relative;
}

.wk-nav__burger span {
  display: block;
  height: 1px;
  background: var(--wk-white);
  transition: transform 0.4s var(--ease), opacity 0.3s;
}

.wk-nav__burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wk-nav__burger.open span:nth-child(2) { opacity: 0; }
.wk-nav__burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.wk-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(5,5,5,0.97);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--pad-x);
  padding-bottom: 4rem;
  gap: 0.25rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.wk-nav__overlay.open { opacity: 1; pointer-events: all; }

.wk-nav__overlay a {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--wk-faint);
  line-height: 1;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: color 0.3s var(--ease), opacity 0.5s var(--ease), transform 0.6s var(--ease);
}

.wk-nav__overlay.open a { opacity: 1; transform: translateY(0); }
.wk-nav__overlay.open a:nth-of-type(1) { transition-delay:  60ms; }
.wk-nav__overlay.open a:nth-of-type(2) { transition-delay: 110ms; }
.wk-nav__overlay.open a:nth-of-type(3) { transition-delay: 160ms; }
.wk-nav__overlay.open a:nth-of-type(4) { transition-delay: 210ms; }
.wk-nav__overlay.open a:nth-of-type(5) { transition-delay: 260ms; }
.wk-nav__overlay.open a:nth-of-type(6) { transition-delay: 310ms; }
.wk-nav__overlay.open a:nth-of-type(7) { transition-delay: 360ms; }
.wk-nav__overlay.open a:nth-of-type(8) { transition-delay: 410ms; }
.wk-nav__overlay a:hover { color: var(--wk-white); }

/* Close button inside overlay */
.wk-nav__overlay-close {
  position: absolute;
  top: var(--pad-x);
  right: var(--pad-x);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.wk-nav__overlay.open .wk-nav__overlay-close {
  opacity: 1;
  transition-delay: 200ms;
}
.wk-nav__overlay-close span {
  position: absolute;
  width: 22px;
  height: 1px;
  background: var(--wk-muted);
  transition: background var(--dur-fast) var(--ease);
}
.wk-nav__overlay-close span:nth-child(1) { transform: rotate(45deg); }
.wk-nav__overlay-close span:nth-child(2) { transform: rotate(-45deg); }
.wk-nav__overlay-close:hover span { background: var(--wk-white); }

/* ── 8. BUTTONS ─────────────────────────────────────────────────────────── */
.wk-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.8125rem 1.25rem 0.8125rem 1.625rem;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease);
  user-select: none;
}

.wk-btn:active { transform: scale(0.97); }

.wk-btn__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.wk-btn:hover .wk-btn__icon { transform: translate(2px, -2px) scale(1.1); }

.wk-btn--gold {
  background: var(--wk-gold);
  color: var(--wk-black);
}

.wk-btn--gold .wk-btn__icon { background: rgba(0,0,0,0.12); }
.wk-btn--gold:hover { box-shadow: 0 8px 40px rgba(201,168,76,0.3); }

.wk-btn--outline {
  background: transparent;
  color: var(--wk-muted);
  border: 1px solid var(--wk-border);
}

.wk-btn--outline .wk-btn__icon { background: rgba(255,255,255,0.05); color: var(--wk-text); }
.wk-btn--outline:hover { color: var(--wk-white); border-color: rgba(201,168,76,0.18); }

/* ── 9. HERO PANEL ───────────────────────────────────────────────────────── */

/*
 * Hero uses the default .wk-panel justify-content: center.
 * .wk-hero__content sits in the vertical center of the panel.
 * .wk-stats is position: absolute; bottom: 0 — never overlaps content.
 * padding-bottom on the content pushes the group slightly above center
 * (accounts for the stats strip height visually).
 */
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: var(--z-canvas);
  width: 100%; height: 100%;
}

.wk-hero__bg-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 55% 45%,
    rgba(201,168,76,0.05) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}

.wk-hero__content {
  position: relative;
  z-index: var(--z-content);
  padding: var(--pad-x);
  margin-bottom: 4rem;
  width: 100%;
}

/* Metadata bar */
.wk-hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.wk-hero__tag {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wk-gold);
  font-family: var(--wk-mono);
}

.wk-hero__year {
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  color: var(--wk-faint);
  font-family: var(--wk-mono);
}

/* Headline */
.wk-hero__hl {
  font-size: clamp(4rem, 11vw, 11rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.87;
  text-transform: uppercase;
  color: var(--wk-white);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.wk-hero__hl em { font-style: normal; color: var(--wk-gold); }

/* Bottom block — tagline stacked above CTAs, both left-aligned */
.wk-hero__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

.wk-hero__tagline {
  font-size: clamp(0.875rem, 1.3vw, 1rem);
  color: var(--wk-muted);
  line-height: 1.7;
  max-width: 38ch;
}

.wk-hero__ctas {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Scroll track — sits above the stats strip (≈ 5rem tall) */
.wk-hero__scroll {
  position: absolute;
  bottom: 6rem;   /* clears the stats strip + small gap */
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.wk-hero__scroll-text {
  font-size: 0.4375rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wk-faint);
  font-family: var(--wk-mono);
}

.wk-hero__scroll-track {
  width: 1px; height: 48px;
  background: var(--wk-faint);
  position: relative;
  overflow: hidden;
}

.wk-hero__scroll-track::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%; height: 100%;
  background: var(--wk-gold);
  animation: scrollLine 2s var(--ease) infinite;
}

@keyframes scrollLine {
  0%   { top: -100%; }
  100% { top: 100%; }
}

/* ── 10. STATS (bottom strip of hero panel) ─────────────────────────────── */
.wk-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--wk-border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(5,5,5,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--z-content);
}

.wk-stat {
  padding: 1rem clamp(1rem, 3vw, 2rem);
  border-right: 1px solid var(--wk-border);
}

.wk-stat:last-child { border-right: none; }

.wk-stat__num {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--wk-white);
  line-height: 1;
  display: block;
}

.wk-stat__num sup { font-size: 0.5em; color: var(--wk-gold); vertical-align: super; font-weight: 700; }

.wk-stat__label {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wk-muted);
  display: block;
  margin-top: 0.375rem;
  font-family: var(--wk-mono);
}

/* ── 11. ABOUT ───────────────────────────────────────────────────────────── */
/* ── 11. ABOUT ───────────────────────────────────────────────────────────── */
.wk-about__grid {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.wk-about__left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wk-about__statement {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.10;
  color: var(--wk-white);
  margin-top: 1.25rem;
  margin-bottom: 2rem;
}

/* Gold italic word inside statement */
.wk-about__statement em {
  font-style: italic;
  color: var(--wk-gold);
  font-weight: 800;
}

.wk-about__body-wrap {
  border-left: 2px solid var(--wk-border-gold);
  padding-left: 1.25rem;
}

.wk-about__body {
  font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
  line-height: 1.72;
  color: var(--wk-muted);
}

/* Decorative divider */
.wk-about__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2.25rem 0;
}

.wk-about__divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--wk-gold), transparent);
  opacity: 0.35;
}

.wk-about__divider-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wk-gold);
  opacity: 0.55;
  flex-shrink: 0;
}

/* Right side: pillars */
.wk-about__right {
  position: relative;
}

.wk-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--wk-border);
  border-top: 2px solid var(--wk-border-gold);
  overflow: hidden;
}

.wk-pillar {
  position: relative;
  overflow: hidden;
  background: var(--wk-black);
  padding: 2.25rem 2rem;
  transition: background var(--dur-fast) var(--ease);
}

.wk-panel--dark .wk-pillar { background: var(--wk-surface); }

.wk-pillar:hover {
  background: var(--wk-surface-2);
}

.wk-pillar:hover .wk-pillar__ghost {
  opacity: 0.10;
}

/* Large ghost number — decorative background */
.wk-pillar__ghost {
  position: absolute;
  right: -0.25rem;
  bottom: -0.75rem;
  font-size: 6.5rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--wk-gold);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.5s var(--ease);
}

.wk-pillar__num {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--wk-gold);
  font-family: var(--wk-mono);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wk-pillar__title {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--wk-white);
  margin-bottom: 0.75rem;
  position: relative;
}

.wk-pillar__desc {
  font-size: 0.9375rem;
  color: var(--wk-muted);
  line-height: 1.65;
  position: relative;
}

/* ── 12. ÁREAS DE ACTUAÇÃO ───────────────────────────────────────────────── */

/* Panel override: top-aligned so domains fill remaining height */
.wk-panel--areas {
  justify-content: flex-start;
  padding-top:    clamp(5rem, 9vh, 7.5rem); /* min 5rem to clear fixed nav (~4.5rem) */
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
}

.wk-panel--areas .wk-panel__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vh, 2rem);
}

/* ─ Section header ─ */
.wk-areas__header {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex-shrink: 0;
}

.wk-areas__headline-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.wk-areas__hl {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.07;
  color: var(--wk-white);
}

.wk-areas__hl em {
  font-style: italic;
  color: var(--wk-gold);
}

/* Mini metrics — anchored to the bottom-right of the headline row */
.wk-areas__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
  padding-bottom: 0.2rem; /* optically align to headline baseline */
}

.wk-areas__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: right;
}

.wk-areas__meta-num {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--wk-white);
  line-height: 1;
}

.wk-areas__meta-num sup { font-size: 0.75em; }

.wk-areas__meta-label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wk-muted);
  font-family: var(--wk-mono);
}

.wk-areas__meta-sep {
  width: 1px;
  height: 2rem;
  background: var(--wk-border);
  flex-shrink: 0;
}

/* ─ Domain columns grid (N-up, driven by --domain-count CSS var) ─ */
.wk-areas__domains {
  flex: 1;
  min-height: 0;                  /* allow flex shrink */
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* always 4 columns */
  grid-template-rows: repeat(2, 1fr);     /* 2 equal rows */
  border: 1px solid var(--wk-border);
  border-top: 2px solid var(--wk-border-gold);
  overflow: hidden;
}

/* ─ Individual domain card ─ */
.wk-domain {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--wk-border);
  background: transparent;
  transition: background 0.6s var(--ease);
  cursor: default;
}

/* End of each row — no right border */
.wk-domain:nth-child(4n) { border-right: none; }

/* Second row — top separator */
.wk-domain:nth-child(n+5) { border-top: 1px solid var(--wk-border); }

.wk-domain:hover { background: var(--wk-surface-2); }

/* Top gold accent hairline — intensifies on hover */
.wk-domain::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 168, 76, 0.07) 35%,
    rgba(201, 168, 76, 0.07) 65%,
    transparent 100%
  );
  transition: background 0.5s var(--ease);
  z-index: 3;
  pointer-events: none;
}

.wk-domain:hover::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 168, 76, 0.70) 35%,
    rgba(201, 168, 76, 0.70) 65%,
    transparent 100%
  );
}

/* Gold fill sweep — rises from the bottom on hover */
.wk-domain__fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(201, 168, 76, 0.08) 0%,
    rgba(201, 168, 76, 0.025) 40%,
    transparent 70%
  );
  transform: translateY(110%);
  transition: transform 0.65s var(--ease);
  pointer-events: none;
}

.wk-domain:hover .wk-domain__fill { transform: translateY(0); }

/* Ghost number watermark */
.wk-domain__ghost {
  position: absolute;
  right: -0.125rem;
  bottom: -0.625rem;
  font-size: clamp(5.5rem, 9vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.08em;
  color: var(--wk-white);
  opacity: 0.022;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  transition: opacity 0.6s var(--ease);
}

.wk-domain:hover .wk-domain__ghost { opacity: 0.06; }

/* ─ Inner content ─ */
.wk-domain__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.25rem, 2.2vh, 1.875rem) 1.625rem clamp(1.25rem, 2.5vh, 2rem);
}

/* Top bar: index number + icon */
.wk-domain__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(1rem, 2.5vh, 1.625rem);
}

.wk-domain__num {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--wk-gold);
  font-family: var(--wk-mono);
}

.wk-domain__icon {
  width: 22px;
  height: 22px;
  color: rgba(201, 168, 76, 0.28);
  flex-shrink: 0;
  transition: color 0.45s var(--ease), transform 0.45s var(--ease-spring);
}

.wk-domain:hover .wk-domain__icon {
  color: rgba(201, 168, 76, 0.82);
  transform: scale(1.14) translateY(-1px);
}

/* Tag + name group */
.wk-domain__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wk-domain__tag {
  display: inline-block;
  width: fit-content;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wk-gold);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 999px;
  padding: 0.275rem 0.625rem;
  font-family: var(--wk-mono);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.wk-domain:hover .wk-domain__tag {
  border-color: rgba(201, 168, 76, 0.52);
  background: rgba(201, 168, 76, 0.07);
}

.wk-domain__name {
  font-size: clamp(1rem, 1.45vw, 1.3125rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.18;
  color: var(--wk-white);
  transition: color 0.4s var(--ease);
}

.wk-domain:hover .wk-domain__name { color: var(--wk-gold-light); }

/* Description — pushed to bottom */
.wk-domain__desc {
  margin-top: auto;
  padding-top: clamp(0.875rem, 1.5vh, 1.25rem);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--wk-muted);
  transition: color 0.4s var(--ease);
}

.wk-domain:hover .wk-domain__desc { color: var(--wk-text); }

/* ── 13. PRODUCT DETAIL ─────────────────────────────────────────────────── */
.wk-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.wk-detail--flip { direction: rtl; }
.wk-detail--flip > * { direction: ltr; }

.wk-detail__name {
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--wk-white);
  margin-bottom: 1.25rem;
}

.wk-detail__body {
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  color: var(--wk-muted);
  line-height: 1.72;
  margin-bottom: 1.75rem;
  max-width: 52ch;
}

.wk-features {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--wk-border);
}

.wk-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--wk-border);
  transition: padding-left 0.35s var(--ease);
}

.wk-feature:hover { padding-left: 0.5rem; }

.wk-feature__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--wk-gold);
  flex-shrink: 0;
  margin-top: 0.45rem;
}

.wk-feature__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wk-white);
  letter-spacing: -0.01em;
  margin-bottom: 0.2rem;
}

.wk-feature__desc {
  font-size: 0.75rem;
  color: var(--wk-muted);
  line-height: 1.55;
}

.wk-device-stage {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-device-stage canvas { width: 100% !important; height: 100% !important; }

/* Product philosophy quote (Gasoza, Micretor, Lexitor detail panels) */
.wk-quote {
  margin-bottom: 1.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--wk-gold);
}

.wk-quote p {
  font-size: clamp(0.9rem, 1.8vw, 1.125rem);
  font-weight: 600;
  color: var(--wk-white);
  letter-spacing: -0.01em;
  line-height: 1.5;
}

/* ── 14. SERVICES ────────────────────────────────────────────────────────── */
/*
 * Layout: left col = header + nav controls  |  right col = carousel
 * Controls live in the left column — visually separate from the cards.
 * Card widths are set by JS so the peek effect is pixel-perfect.
 */

.wk-services__layout {
  display: grid;
  grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
  gap: clamp(3rem, 5vw, 5rem);
  align-items: stretch;
}

/* ─── Left column ───────────────────────────────────────────────────────── */
.wk-services__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
}

.wk-services__text { display: flex; flex-direction: column; }

/* ─── Right column: carousel ────────────────────────────────────────────── */
.wk-services__carousel {
  display: flex;
  flex-direction: column;
}

/*
 * Viewport clips the horizontal track.
 * flex:1 + min-height:0 lets it fill the grid row height.
 * mask-image creates a soft fade on both edges.
 */
.wk-services__viewport {
  overflow: hidden;
  flex: 1;
  min-height: 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent      0%,
    rgba(0,0,0,0.6) 10%,
    black           22%,
    black           72%,
    rgba(0,0,0,0.6) 88%,
    transparent     100%
  );
  mask-image: linear-gradient(
    to right,
    transparent      0%,
    rgba(0,0,0,0.6) 10%,
    black           22%,
    black           72%,
    rgba(0,0,0,0.6) 88%,
    transparent     100%
  );
}

/*
 * Horizontal track — card widths set by JS.
 * gap: 16px must stay in sync with GAP_PX = 16 in initServicesCarousel().
 */
.wk-services__track {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 16px;
  will-change: transform;
  /* No CSS transition — continuous scroll driven by requestAnimationFrame */
}

/* ─── Individual service card ───────────────────────────────────────────── */
.wk-service {
  /* width injected by JS — do not set min-width here */
  flex-shrink: 0;
  background: var(--wk-surface-2);
  border: 1px solid var(--wk-border);
  border-top: 2px solid var(--wk-border-gold);
  padding: clamp(1.75rem, 3.5vh, 2.75rem) clamp(1.5rem, 2.5vw, 2.25rem);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wk-service__ghost {
  position: absolute;
  right: -0.25rem;
  bottom: -0.75rem;
  font-size: clamp(5rem, 9vw, 8rem);
  font-weight: 900;
  color: var(--wk-white);
  opacity: 0.025;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}

.wk-service__num {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--wk-gold);
  font-family: var(--wk-mono);
  margin-bottom: 1.25rem;
}

.wk-service__title {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wk-white);
  margin-bottom: 0.875rem;
  line-height: 1.2;
}

.wk-service__desc {
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  color: var(--wk-text);
  line-height: 1.72;
  margin-top: auto;
}

/* ── 15. CONTACT ─────────────────────────────────────────────────────────── */

/* Push contact inner above fixed nav (top) and footer (bottom) */
#contacto .wk-panel__inner {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

.wk-contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.wk-contact__headline {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--wk-white);
  margin-bottom: 2rem;
}

.wk-contact__headline em { font-style: normal; color: var(--wk-gold); }

.wk-contact__detail {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--wk-border);
}

.wk-contact__detail:last-of-type { border-bottom: 1px solid var(--wk-border); }

.wk-contact__detail-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wk-muted);
  min-width: 72px;
  font-family: var(--wk-mono);
}

.wk-contact__detail-value {
  font-size: 0.875rem;
  color: var(--wk-text);
  font-weight: 500;
}

.wk-form {
  background: var(--wk-surface);
  border: 1px solid var(--wk-border);
  padding: 2rem;
}

.wk-field { margin-bottom: 1rem; }

.wk-field label {
  display: block;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wk-muted);
  margin-bottom: 0.5rem;
  font-family: var(--wk-mono);
}

.wk-field input,
.wk-field textarea,
.wk-field select {
  width: 100%;
  background: var(--wk-black);
  border: 1px solid var(--wk-border);
  color: var(--wk-text);
  font-family: var(--wk-font);
  font-size: 0.875rem;
  padding: 0.75rem 0.875rem;
  outline: none;
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.wk-field input::placeholder,
.wk-field textarea::placeholder { color: var(--wk-faint); }

.wk-field input:focus,
.wk-field textarea:focus { border-color: var(--wk-gold); }

.wk-field textarea { resize: vertical; min-height: 90px; }

.wk-form__status {
  font-size: 0.8125rem;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  display: none;
  border-left: 2px solid;
}

.wk-form__status--success { border-color: #4ade80; color: #4ade80; background: rgba(74,222,128,0.05); }
.wk-form__status--error   { border-color: #f87171; color: #f87171; background: rgba(248,113,113,0.05); }

/* ── 16. FOOTER ──────────────────────────────────────────────────────────── */
.wk-footer {
  border-top: 1px solid var(--wk-border);
  padding: 2rem var(--pad-x);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-content);
}

.wk-footer__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.wk-footer__logo {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wk-muted);
  transition: color var(--dur-fast) var(--ease);
}

.wk-footer__logo:hover { color: var(--wk-gold); }

.wk-footer__copy {
  font-size: 0.625rem;
  color: var(--wk-faint);
  font-family: var(--wk-mono);
}

.wk-footer__links {
  display: flex;
  gap: 1.5rem;
}

.wk-footer__links a {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wk-muted);
  transition: color var(--dur-fast) var(--ease);
}

.wk-footer__links a:hover { color: var(--wk-gold); }

/* ── 17. RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .wk-about__grid      { grid-template-columns: 1fr; gap: 3rem; }
  .wk-about__body-wrap { border-left: none; padding-left: 0; border-top: 2px solid var(--wk-border-gold); padding-top: 1.25rem; }

  /* Areas: 2×2 grid on tablet */
  .wk-areas__domains {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  /* Reset desktop 4-col rules */
  .wk-domain:nth-child(4n)  { border-right: 1px solid var(--wk-border); }
  .wk-domain:nth-child(n+5) { border-top: none; }
  /* Apply 2-col rules */
  .wk-domain:nth-child(2n)  { border-right: none; }
  /* Border between each row of 2 (items 1-6 get border-bottom, last row doesn't) */
  .wk-domain:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--wk-border); }

  /* Services: stack left/right cols on tablet */
  .wk-services__layout { grid-template-columns: 1fr; }
  .wk-stats            { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  :root { --pad-x: 1.25rem; }

  .wk-nav__links,
  .wk-lang-switch,
  .wk-nav__cta { display: none; }
  .wk-nav__burger { display: flex; }

  .wk-progress { right: 1rem; }
  .wk-progress__label { display: none; }

  .wk-detail,
  .wk-contact__layout  { grid-template-columns: 1fr; }
  .wk-detail--flip     { direction: ltr; }
  .wk-device-stage     { display: none; }

  /* Areas: headline stacks, meta left-aligned */
  .wk-areas__headline-row { flex-direction: column; gap: 1.25rem; }
  .wk-areas__meta         { justify-content: flex-start; }
  .wk-areas__meta-item    { text-align: left; }

  .wk-stats            { grid-template-columns: repeat(2, 1fr); }

  /* Services: full single-column layout on mobile */
  .wk-services__left { flex-direction: column; align-items: flex-start; }

  /* Hero: restore padding on mobile */
  .wk-hero__content    { padding-right: var(--pad-x); }
  .wk-hero__ctas       { flex-direction: row; }

  .wk-footer__inner    { flex-direction: column; align-items: flex-start; }
  .wk-footer__links    { flex-wrap: wrap; gap: 1rem; }

  /* Contact: natural height on mobile — form + footer flow without clipping */
  #contacto {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    align-items: flex-start;
    justify-content: flex-start;
  }
  #contacto .wk-panel__inner {
    padding-top: 5.5rem;
    padding-bottom: 2rem;
  }
  #contacto .wk-footer {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
  }
}

@media (max-width: 480px) {
  .wk-stats          { grid-template-columns: repeat(2, 1fr); }
  .wk-pillars        { grid-template-columns: 1fr; }

  /* Areas: single column on small phones */
  .wk-areas__domains  {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, auto);
  }
  .wk-domain {
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--wk-border) !important;
  }
  .wk-domain:last-child { border-bottom: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL STORY SECTIONS  (Micretor / Lexitor / Gasoza)
   Tall sections with sticky viewport pin + scroll-driven animations
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Story wrapper ─────────────────────────────────────────────────────── */
.wk-story {
  position: relative;
  height: calc(var(--story-screens, 6) * 100dvh);
  background: var(--wk-black);
  scroll-snap-align: start;
  /* Note: no scroll-snap-stop so the sticky interior can scroll freely */
}

/* ── Sticky pin (the visible viewport) ────────────────────────────────── */
.wk-story__pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 3-D canvas ────────────────────────────────────────────────────────── */
.wk-story__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Section header (title block) ──────────────────────────────────────── */
.wk-story__header {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  /* Initial: centred but in lower half of top portion */
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition:
    top    0.9s cubic-bezier(0.16, 1, 0.3, 1),
    left   0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.wk-story__header.is-corner {
  top: 5rem;
  left: var(--pad-x, 4vw);
  transform: none;
  text-align: left;
}

/* Product name headline */
.wk-story__hl {
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--wk-white);
  transition: font-size 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.wk-story__header.is-corner .wk-story__hl {
  font-size: clamp(1.375rem, 2.5vw, 2.25rem);
}

/* Category label above headline */
.wk-story__header .wk-label {
  margin-bottom: 0.75rem;
  transition: opacity 0.4s ease;
}

.wk-story__header.is-corner .wk-label {
  display: none;
}

/* Tagline below headline */
.wk-story__tagline {
  margin-top: 0.75rem;
  font-size: clamp(0.875rem, 1.4vw, 1.0625rem);
  color: var(--wk-muted);
  max-width: 42ch;
  line-height: 1.6;
  transition: opacity 0.4s ease 0.1s;
}

.wk-story__header.is-corner .wk-story__tagline {
  opacity: 0;
  pointer-events: none;
}

/* ── HUD cockpit overlay ───────────────────────────────────────────────── */
.wk-story__hud {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.wk-story__hud.is-visible {
  opacity: 1;
}

/* Subtle scanlines texture */
.wk-hud__scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(201, 168, 76, 0.012) 3px,
    rgba(201, 168, 76, 0.012) 4px
  );
  opacity: 0.6;
}

/* HUD floating node */
.wk-hud__node {
  position: absolute;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transition:
    opacity  0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.wk-hud__node.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Active card: gold top accent + elevated glow */
.wk-hud__node.is-active .wk-hud__card {
  border-color: rgba(201, 168, 76, 0.5);
  border-top: 2px solid rgba(201, 168, 76, 0.85);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(201, 168, 76, 0.07);
}

.wk-hud__node.is-past {
  opacity: 0.28;
  transform: translateY(-6px) scale(0.96);
}

/* Node positions — laptop (device centred) */
.wk-hud__node--top-left    { top: 14%;    left: 9vw; }
.wk-hud__node--top-right   { top: 14%;    right: 9vw; }
.wk-hud__node--mid-left    { top: 42%;    left: 9vw; }
.wk-hud__node--mid-right   { top: 42%;    right: 9vw; }
.wk-hud__node--btm-right   { bottom: 16%; right: 9vw; }
.wk-hud__node--btm-left    { bottom: 16%; left: 9vw; }

/* Node positions — phone (taller device, narrower) */
.wk-hud__node--left-hi     { top: 16%;    left: 8vw; }
.wk-hud__node--right-hi    { top: 16%;    right: 8vw; }
.wk-hud__node--left-lo     { bottom: 18%; left: 8vw; }
.wk-hud__node--right-lo    { bottom: 18%; right: 8vw; }

/* Glass card inside the node */
.wk-hud__card {
  background: rgba(10, 9, 8, 0.82);
  border: 1px solid rgba(201, 168, 76, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 0.875rem;
  padding: 1.0625rem 1.25rem 1.125rem;
  max-width: 230px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* ── Connector — hidden; active state expressed on the card itself ───────── */
.wk-hud__connector {
  display: none;
}

/* Endpoint dot — solid circle at the device-facing tip */
.wk-hud__connector::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--wk-gold);
  box-shadow:
    0 0 0   2px rgba(201, 168, 76, 0.15),
    0 0 8px     rgba(201, 168, 76, 0.6);
}

/* Pulsing ring around the dot */
.wk-hud__connector::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  top: 50%;
  border: 1px solid rgba(201, 168, 76, 0.55);
  animation: hud-ping 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

@keyframes hud-ping {
  0%   { transform: translateY(-50%) scale(0.7); opacity: 0.9; }
  65%  { transform: translateY(-50%) scale(2.4); opacity: 0;   }
  100% { transform: translateY(-50%) scale(2.4); opacity: 0;   }
}

/* ── LEFT-side nodes: connector extends RIGHTWARD toward device ── */
.wk-hud__node--top-left  .wk-hud__connector,
.wk-hud__node--mid-left  .wk-hud__connector,
.wk-hud__node--btm-left  .wk-hud__connector,
.wk-hud__node--left-hi   .wk-hud__connector,
.wk-hud__node--left-lo   .wk-hud__connector {
  left: 100%;   /* starts flush with card's right edge */
  background: linear-gradient(90deg,
    rgba(201,168,76,0.03)  0%,
    rgba(201,168,76,0.35) 45%,
    rgba(201,168,76,0.55) 78%,
    rgba(201,168,76,0.08) 100%
  );
}

/* dot + ring at RIGHT end (device side) */
.wk-hud__node--top-left  .wk-hud__connector::before,
.wk-hud__node--mid-left  .wk-hud__connector::before,
.wk-hud__node--btm-left  .wk-hud__connector::before,
.wk-hud__node--left-hi   .wk-hud__connector::before,
.wk-hud__node--left-lo   .wk-hud__connector::before,
.wk-hud__node--top-left  .wk-hud__connector::after,
.wk-hud__node--mid-left  .wk-hud__connector::after,
.wk-hud__node--btm-left  .wk-hud__connector::after,
.wk-hud__node--left-hi   .wk-hud__connector::after,
.wk-hud__node--left-lo   .wk-hud__connector::after {
  right: 0;
  left: auto;
}

/* ── RIGHT-side nodes: connector extends LEFTWARD toward device ── */
.wk-hud__node--top-right  .wk-hud__connector,
.wk-hud__node--btm-right  .wk-hud__connector,
.wk-hud__node--mid-right  .wk-hud__connector,
.wk-hud__node--right-hi   .wk-hud__connector,
.wk-hud__node--right-lo   .wk-hud__connector {
  right: 100%;  /* starts flush with card's left edge */
  background: linear-gradient(90deg,
    rgba(201,168,76,0.08)  0%,
    rgba(201,168,76,0.55) 22%,
    rgba(201,168,76,0.35) 55%,
    rgba(201,168,76,0.03) 100%
  );
}

/* dot + ring at LEFT end (device side) */
.wk-hud__node--top-right  .wk-hud__connector::before,
.wk-hud__node--btm-right  .wk-hud__connector::before,
.wk-hud__node--mid-right  .wk-hud__connector::before,
.wk-hud__node--right-hi   .wk-hud__connector::before,
.wk-hud__node--right-lo   .wk-hud__connector::before,
.wk-hud__node--top-right  .wk-hud__connector::after,
.wk-hud__node--btm-right  .wk-hud__connector::after,
.wk-hud__node--mid-right  .wk-hud__connector::after,
.wk-hud__node--right-hi   .wk-hud__connector::after,
.wk-hud__node--right-lo   .wk-hud__connector::after {
  left: 0;
  right: auto;
}

/* btm-left: restored to standard position (connector removed) */
.wk-hud__node--btm-left {
  bottom: 16%;
}

/* Override straight line → ⌐ curve: horizontal segment at bottom,
   then rises on the right side. Dot sits at the TOP end of the rise. */
.wk-hud__node--btm-left .wk-hud__connector {
  top: auto;
  transform: none;
  background: none;

  left: 100%;          /* starts flush with card's right edge */
  bottom: 50%;         /* bottom of connector = card's vertical centre */

  width:  clamp(110px, calc(16vw + 40px), 280px);   /* horizontal reach */
  height: clamp(165px, 11vh, 390px);   /* how high the line climbs */

  /* horizontal at bottom → curve → vertical rising on the right */
  border-bottom: 1px solid rgba(201, 168, 76, 0.38);
  border-right:  1px solid rgba(201, 168, 76, 0.45);
  border-top:    none;
  border-left:   none;
  border-radius: 0 0 10px 0;   /* elbow at the BOTTOM-RIGHT corner */
}

/* Dot + ping ring at the TOP-RIGHT — the end of the rising segment */
.wk-hud__node--btm-left .wk-hud__connector::before,
.wk-hud__node--btm-left .wk-hud__connector::after {
  top: 0;
  right: -3px;   /* shift 3px right to sit centred on the border-right edge */
  left: auto;
  transform: translateY(-50%);
}

/* Index badge */
.wk-hud__index {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--wk-gold);
  letter-spacing: 0.14em;
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}

/* Feature name */
.wk-hud__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wk-white);
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

/* Feature desc */
.wk-hud__desc {
  font-size: 0.8125rem;
  color: var(--wk-muted);
  line-height: 1.55;
  margin-bottom: 0.65rem;
}

/* Metric */
.wk-hud__metric {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(201, 168, 76, 0.12);
}

.wk-hud__metric-val {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wk-gold);
  line-height: 1;
}

.wk-hud__metric-label {
  font-size: 0.6875rem;
  color: var(--wk-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Feature dot strip (bottom) */
.wk-story__feat-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.wk-story__hud.is-visible ~ .wk-story__feat-dots,
.wk-story__feat-dots.is-visible {
  opacity: 1;
}

.wk-story__feat-dot {
  height: 3px;
  width: 20px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.35s ease, width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.wk-story__feat-dot.is-active {
  background: var(--wk-gold);
  width: 36px;
}

.wk-story__feat-dot.is-past {
  background: rgba(201, 168, 76, 0.35);
}

/* ── Story end state ────────────────────────────────────────────────────── */
.wk-story__end {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem var(--pad-x, 4vw);
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition:
    opacity   0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.wk-story__end.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.wk-story__end-hl {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: var(--wk-white);
  letter-spacing: -0.025em;
  margin-bottom: 0.25rem;
  text-align: center;
}

.wk-story__end-sub {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  color: var(--wk-muted);
  margin-bottom: 2rem;
  text-align: center;
}

/* ── Pricing cards ─────────────────────────────────────────────────────── */
/* ── Billing toggle ─────────────────────────────────────────────────────── */
.wk-billing-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9999px;
  padding: 0.25rem;
  margin-bottom: 1.25rem;
}
.wk-billing-toggle__btn {
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.45);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.wk-billing-toggle__btn.is-active {
  background: rgba(255,255,255,0.1);
  color: var(--wk-white);
}
.wk-billing-toggle__save {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--wk-gold);
  letter-spacing: 0.02em;
}

.wk-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 860px;
}

.wk-pricing__card {
  background: var(--wk-surface);
  border: 1px solid var(--wk-border);
  border-radius: 1.125rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wk-pricing__card:hover {
  transform: translateY(-3px);
}

.wk-pricing__card--featured {
  border-color: rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.04);
  position: relative;
}

.wk-pricing__card--featured::before {
  content: '★ Popular';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wk-gold);
  color: var(--wk-black);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 0 0 0.5rem 0.5rem;
}

.wk-pricing__tier {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--wk-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.wk-pricing__price {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--wk-white);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0.25rem 0;
}

.wk-pricing__period {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--wk-muted);
  letter-spacing: 0;
  vertical-align: baseline;
}

.wk-pricing__desc {
  font-size: 0.8125rem;
  color: var(--wk-muted);
  line-height: 1.55;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--wk-border);
  margin-bottom: 0.25rem;
}

.wk-pricing__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

.wk-pricing__features li {
  font-size: 0.8125rem;
  color: var(--wk-text);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.4;
}

.wk-pricing__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wk-gold);
  opacity: 0.55;
}

/* ── Gasoza CTA ────────────────────────────────────────────────────────── */
.wk-story__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  max-width: 560px;
}

.wk-story__cta-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--wk-gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.wk-story__cta-hl {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  color: var(--wk-white);
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.wk-story__cta-sub {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  color: var(--wk-muted);
  line-height: 1.6;
  max-width: 38ch;
}

.wk-story__cta-btns {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ── Scroll scrub bar ──────────────────────────────────────────────────── */
.wk-story__scrub {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 6;
  pointer-events: none;
}

.wk-story__scrub-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wk-gold-dim), var(--wk-gold));
  transform-origin: left center;
  transform: scaleX(0);
  /* Updated via JS inline style */
}

/* ── Corner nav (back to story) ────────────────────────────────────────── */
.wk-story__corner-nav {
  position: absolute;
  top: 2.25rem;
  right: var(--pad-x, 4vw);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.wk-story__header.is-corner ~ .wk-story__corner-nav,
.wk-story__pin .wk-story__corner-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .wk-hud__card { max-width: 190px; }
  .wk-pricing { max-width: 700px; }
}

@media (max-width: 768px) {
  /* Compact HUD on mobile */
  .wk-hud__card {
    max-width: 150px;
    padding: 0.75rem 0.875rem;
  }

  .wk-hud__name { font-size: 0.8125rem; }
  .wk-hud__desc { display: none; }
  .wk-hud__metric-val { font-size: 1.125rem; }

  .wk-hud__node--top-left   { left: 1.5vw; }
  .wk-hud__node--top-right  { right: 1.5vw; }
  .wk-hud__node--mid-left   { left: 1.5vw; }
  .wk-hud__node--mid-right  { right: 1.5vw; }
  .wk-hud__node--btm-right  { right: 1.5vw; }
  .wk-hud__node--btm-left   { left: 1.5vw; }

  /* Pricing: single column */
  .wk-pricing {
    grid-template-columns: 1fr;
    max-width: 340px;
    overflow-y: auto;
    max-height: 70dvh;
  }

  .wk-story__cta-btns { flex-direction: column; align-items: center; }

  .wk-story__end-hl { font-size: 1.25rem; }
}

/* ── Story end state: dark overlay so cards read over canvas ── */
.wk-story__end {
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Corner label stripe (links back to the section name) ──── */
.wk-story__header.is-corner .wk-label {
  display: flex;  /* override the earlier display:none */
  font-size: 0.625rem;
}

/* ── Keep wk-pricing__card--featured badge text language-safe ─ */
.wk-pricing__card--featured::before {
  content: 'Popular';
}

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGES  (archive-insight, single-insight, case studies, etc.)
   ─ scroll-snap is disabled; normal document flow
   ═══════════════════════════════════════════════════════════════════════════ */

html.wk-inner-page {
  height: auto;
  overflow-y: auto;
  scroll-snap-type: none;
}
html.wk-inner-page body {
  min-height: 100vh;
}
html.wk-inner-page .wk-nav {
  position: sticky;
  top: 0;
}
html.wk-inner-page .wk-progress { display: none; }

/* ── Inner-page nav link overrides ─────────────────────────────────────── */
html.wk-inner-page .wk-nav__links a[href*="#"],
html.wk-inner-page .wk-nav__cta { opacity: 0.7; }
html.wk-inner-page .wk-nav__links a[href^="http"],
html.wk-inner-page .wk-nav__links a[href^="/"] { opacity: 1; }

/* ── Shared inner-page layout ───────────────────────────────────────────── */
.wk-archive__inner,
.wk-single__inner {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ── Archive hero ───────────────────────────────────────────────────────── */
.wk-archive {
  background: var(--wk-black);
  color: var(--wk-text);
  padding-bottom: 6rem;
}
.wk-archive__hero {
  padding: 6rem 0 4rem;
  border-bottom: 1px solid var(--wk-border);
  margin-bottom: 4rem;
}
.wk-archive__hl {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wk-white);
  margin-top: 1rem;
  line-height: 1.15;
}
.wk-archive__sub {
  margin-top: 0.75rem;
  color: var(--wk-muted);
  font-size: 1rem;
  max-width: 42ch;
}

/* ── Post grid ──────────────────────────────────────────────────────────── */
.wk-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
.wk-post-card {
  background: var(--wk-surface-2);
  border: 1px solid var(--wk-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s;
}
.wk-post-card:hover { border-color: var(--wk-border-gold); }

.wk-post-card__thumb {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.wk-post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.wk-post-card:hover .wk-post-card__thumb img { transform: scale(1.04); }

.wk-post-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.wk-post-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--wk-muted);
  margin-bottom: 0.75rem;
}
.wk-post-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--wk-white);
  margin-bottom: 0.6rem;
}
.wk-post-card__title a { color: inherit; }
.wk-post-card__title a:hover { color: var(--wk-gold); }
.wk-post-card__excerpt {
  font-size: 0.875rem;
  color: var(--wk-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1.25rem;
}
.wk-post-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--wk-gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: auto;
}
.wk-post-card__cta:hover { color: var(--wk-gold-light); }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.wk-archive__pagination {
  margin-top: 3rem;
}
.wk-archive__pagination .nav-links {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.wk-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--wk-border);
  border-radius: 3px;
  font-size: 0.85rem;
  color: var(--wk-muted);
  transition: border-color 0.2s, color 0.2s;
}
.wk-archive__pagination .page-numbers.current,
.wk-archive__pagination .page-numbers:hover {
  border-color: var(--wk-gold);
  color: var(--wk-gold);
}
.wk-archive__empty {
  color: var(--wk-muted);
  padding: 3rem 0;
}

/* ── Single article ──────────────────────────────────────────────────────── */
.wk-single {
  background: var(--wk-black);
  color: var(--wk-text);
  padding-bottom: 6rem;
}
.wk-single__header {
  padding: 5rem 0 3rem;
  border-bottom: 1px solid var(--wk-border);
  margin-bottom: 0;
}
.wk-single__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--wk-muted);
  margin-bottom: 1.5rem;
}
.wk-single__breadcrumb a { color: var(--wk-muted); }
.wk-single__breadcrumb a:hover { color: var(--wk-gold); }
.wk-single__cats {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.wk-single__title {
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--wk-white);
  margin-bottom: 1.25rem;
}
.wk-single__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--wk-muted);
}
.wk-single__cover {
  margin: 2.5rem 0 0;
}
.wk-single__cover img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 4px;
}

/* ── Prose body ──────────────────────────────────────────────────────────── */
.wk-single__body { padding-top: 3rem; }

.wk-prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--wk-text);
  max-width: 68ch;
}
.wk-prose h2 { font-size: 1.5rem; font-weight: 700; color: var(--wk-white); margin: 2.5rem 0 1rem; letter-spacing: -0.02em; }
.wk-prose h3 { font-size: 1.2rem; font-weight: 600; color: var(--wk-white); margin: 2rem 0 0.75rem; }
.wk-prose p  { margin-bottom: 1.25rem; }
.wk-prose a  { color: var(--wk-gold); text-decoration: underline; text-underline-offset: 3px; }
.wk-prose ul, .wk-prose ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.wk-prose li { margin-bottom: 0.4rem; }
.wk-prose blockquote {
  border-left: 3px solid var(--wk-gold);
  padding-left: 1.25rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--wk-muted);
}
.wk-prose code {
  font-family: var(--wk-mono);
  background: var(--wk-surface-2);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}
.wk-prose pre {
  background: var(--wk-surface-2);
  border: 1px solid var(--wk-border);
  border-radius: 4px;
  padding: 1.25rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}
.wk-prose pre code { background: none; padding: 0; }
.wk-prose img { border-radius: 4px; margin: 1.5rem 0; }
.wk-prose hr { border: none; border-top: 1px solid var(--wk-border); margin: 2.5rem 0; }

/* ── Share bar ───────────────────────────────────────────────────────────── */
.wk-single__share {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--wk-border);
}
.wk-single__share-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wk-muted);
}
.wk-single__share a {
  color: var(--wk-muted);
  display: inline-flex;
  transition: color 0.2s;
}
.wk-single__share a:hover { color: var(--wk-gold); }

/* ── Prev / Next nav ─────────────────────────────────────────────────────── */
.wk-single__nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--wk-border);
}
.wk-single__nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 48%;
}
.wk-single__nav-link--next { align-items: flex-end; }
.wk-single__nav-dir {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wk-muted);
}
.wk-single__nav-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--wk-white);
}
.wk-single__nav-link:hover .wk-single__nav-title { color: var(--wk-gold); }

/* ── Inner-page footer ───────────────────────────────────────────────────── */
.wk-inner-footer {
  background: var(--wk-surface);
  border-top: 1px solid var(--wk-border);
  padding: 2rem 0;
}
.wk-inner-footer__inner {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wk-inner-footer__logo {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--wk-white);
}
.wk-inner-footer__copy {
  font-size: 0.75rem;
  color: var(--wk-muted);
}

/* ── Small button variant ────────────────────────────────────────────────── */
.wk-btn--sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CPT COMPONENTS  (team-grid, testimonials-row, jobs-list)
   ─ used inside homepage panels or standalone pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Team grid ───────────────────────────────────────────────────────────── */
.wk-team { margin-top: 3.5rem; }
.wk-team__heading {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wk-muted);
  margin-bottom: 1.5rem;
}
.wk-team__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.wk-team-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--wk-surface-2);
  border: 1px solid var(--wk-border);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  min-width: 220px;
  flex: 1 1 220px;
  transition: border-color 0.25s;
}
.wk-team-card:hover { border-color: var(--wk-border-gold); }
.wk-team-card__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--wk-faint);
}
.wk-team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.wk-team-card__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wk-gold);
}
.wk-team-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wk-team-card__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wk-white);
}
.wk-team-card__role {
  font-size: 0.75rem;
  color: var(--wk-muted);
}
.wk-team-card__li {
  color: var(--wk-muted);
  margin-top: 0.4rem;
  display: inline-flex;
  transition: color 0.2s;
}
.wk-team-card__li:hover { color: var(--wk-gold); }

/* ── Testimonials ────────────────────────────────────────────────────────── */
.wk-testimonials { margin-top: 3.5rem; }
.wk-testimonials__heading {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wk-muted);
  margin-bottom: 1.5rem;
}
.wk-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.wk-tcard {
  background: var(--wk-surface-2);
  border: 1px solid var(--wk-border);
  border-radius: 4px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.25s;
}
.wk-tcard:hover { border-color: var(--wk-border-gold); }
.wk-tcard__icon { color: var(--wk-gold); }
.wk-tcard__quote {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--wk-text);
  font-style: italic;
  flex: 1;
}
.wk-tcard__author {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  border-top: 1px solid var(--wk-border);
  padding-top: 0.75rem;
}
.wk-tcard__author strong { color: var(--wk-white); font-style: normal; }
.wk-tcard__author span { color: var(--wk-muted); font-style: normal; }

/* ── Jobs list ───────────────────────────────────────────────────────────── */
.wk-jobs { margin-top: 3.5rem; }
.wk-jobs__heading {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wk-muted);
  margin-bottom: 1.25rem;
}
.wk-jobs__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.wk-job-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--wk-surface-2);
  border: 1px solid var(--wk-border);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  transition: border-color 0.25s;
}
.wk-job-row:hover { border-color: var(--wk-border-gold); }
.wk-job-row__left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
.wk-job-row__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wk-white);
}
.wk-job-row__area {
  font-size: 0.8rem;
  color: var(--wk-muted);
}
.wk-job-row__desc {
  font-size: 0.8rem;
  color: var(--wk-muted);
  line-height: 1.55;
  margin-top: 0.4rem;
  max-width: 55ch;
}
.wk-job-row__right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.wk-job-row__type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wk-gold);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .wk-job-row { flex-direction: column; }
  .wk-job-row__right { justify-content: space-between; }
  .wk-single__cover img { height: 240px; }
  .wk-post-grid { grid-template-columns: 1fr; }
}