/* ================================================================
   FERKNOT — case study theme
   Colors: #C8102E red · #1D4ED8 blue · #059669 emerald
   No gold. No purple. Paisley on every dark section.
   ================================================================ */

/* ================================================================
   HERO CTA — vibrant red primary button
   ================================================================ */
/* Root background — prevents white d-root seam above dark hero */
.fk-root { background: #09090b }

.fk-btn-dark {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
  backdrop-filter: blur(6px) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: var(--font-mono) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 1.125rem 1.75rem !important;
  border-radius: 62.4375rem !important;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.fk-btn-dark:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
}
.fk-btn-dark:hover svg, .fk-btn-dark:hover i { color: #000 !important; stroke: #000 !important; }
}

/* FK page-level CTAs use specific classes (fk-btn-dark / vt-btn / vt-btn-green).
   Header + footer must stay site pink — do NOT override ds-btn--primary globally. */

/* Ghost button in the hero — semi-transparent black, slightly more see-through */
.fk-root .lv3-hero-cta .ds-btn--ghost-dark {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.28);
}
.fk-root .lv3-hero-cta .ds-btn--ghost-dark:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}
.fk-root .lv3-hero-cta .ds-btn--ghost-dark:hover svg,
.fk-root .lv3-hero-cta .ds-btn--ghost-dark:hover i { color: #000 !important; stroke: #000 !important; }
}

/* ================================================================
   HERO
   ================================================================ */
.fk-root .lv3-hero { background: #09090b; overflow: hidden }

/* Paisley on hero */
.fk-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../../assets/work/ferknot-paisley-bg.png');
  background-size: 1100px;
  background-repeat: repeat;
  opacity: .72;
  filter: brightness(.68);
  pointer-events: none;
  z-index: 0;
}

.fk-root .lv3-hero-in { position: relative; z-index: 3 }
.fk-root .lv3-hero-copy { position: relative; z-index: 2 }

.fk-hero-name-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.fk-hero-inline-logo {
  height: 3.25rem;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .85;
  margin-top: 0.5rem;
}

/* Emblem logo beside FERKNOT wordmark */
.fk-hero-emblem {
  height: clamp(2.8rem, 5.5vw, 5.2rem);
  width: auto;
  display: block;
  flex: none;
  opacity: .92;
}

/* Wide logo — 5% smaller than before */
.fk-hero-wide-logo-h { margin: 0 0 0.25rem; padding: 0; font-size: 0; line-height: 0 }
.fk-hero-wide-logo {
  display: block;
  height: clamp(2.66rem, 5.2vw, 4.94rem);
  width: auto;
  max-width: 100%;
  opacity: .95;
}

/* Left-side white glow to balance page + illuminate paisley */
.fk-root .lv3-hero::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -4%;
  width: 52%;
  height: 110%;
  background: radial-gradient(circle at 28% 50%, rgba(255,255,255,.09), transparent 64%);
  filter: blur(22px);
  pointer-events: none;
  z-index: 1;
}

/* Hero: pull content slightly higher */
.fk-root .lv3-hero { padding-top: 108px !important }

/* Hero glow — no colour, let the paisley breathe */
.fk-root .lv3-hero-glow { background: none }
.fk-root .lv3-hero-art-glow { background: none }

/* Hero model — sized and positioned within hero vis */
.fk-root .lv3-hero-art { max-width: 466px !important; margin-top: 28px !important; }

/* Badge — anchored inside the vis bounds */
.fk-root .lv3-hero-badge { left: 50% !important; transform: translateX(-50%) !important; bottom: 8% !important; white-space: nowrap; }

/* Hero meta — stacked vertically */
.fk-root .fk-hero-meta { flex-direction: column; gap: 0.625rem; align-items: flex-start }

/* Eyebrow dot — glowing blue */
.fk-root .lv3-eb-dot { background: #0EA5E9; box-shadow: 0 0 10px 2px rgba(14,165,233,.7), 0 0 22px 4px rgba(14,165,233,.35); animation: none }

.fk-hero-cat {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin: 0.5rem 0 1rem;
}

.fk-hero-vis {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* Hero art — LipDoctor glow and card treatment used as-is */

.fk-hero-vis-logo {
  position: absolute;
  bottom: 2.25rem;
  right: 2.25rem;
  z-index: 2;
  pointer-events: none;
}
.fk-hero-vis-logo-img {
  height: 2.375rem;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .4;
}

/* TICKER — all white glowing dots (30% reduced glow) */
.fk-root .lv3-tick .tlk-tick-item .tlk-tick-dot { background: #fff !important; color: rgba(255,255,255,.85) !important; box-shadow: 0 0 8px 1px rgba(255,255,255,.49) !important }
/* Mobile ticker — kill VT top margin gap, white dots */
.fk-mroot .lv3m-tick { margin-top: 0 !important }
.fk-mroot .fk-m-tick { border-bottom: 1px solid var(--ink-600) !important }
/* Final audit (Concern C): the FERKNOT hero ticker is a direct child of the
   full-width .m-scroll (no horizontal padding), but inherits .vt-m-tick's
   symmetric -1.25rem breakout meant for a padded parent. With nothing to cancel
   against, the right edge over-extends by one padding (1.25rem ≈ 20px), creating
   internal horizontal overflow. The scroll container is already edge-to-edge, so
   flush margins ARE the correct full bleed. Scoped to .fk-mroot only. */
.fk-mroot .fk-m-tick { margin-left: 0 !important; margin-right: 0 !important; width: auto !important }
.fk-mroot .mtlk-htick-dot { background: #fff !important; color: rgba(255,255,255,.85) !important; box-shadow: 0 0 8px 1px rgba(255,255,255,.49) !important }
.fk-root .lv3-tick .tlk-tick-item:nth-child(4n+1) .tlk-tick-dot { background: #fff !important; color: rgba(255,255,255,.85) !important }
.fk-root .lv3-tick .tlk-tick-item:nth-child(4n+2) .tlk-tick-dot { background: #fff !important; color: rgba(255,255,255,.85) !important }
.fk-root .lv3-tick .tlk-tick-item:nth-child(4n+3) .tlk-tick-dot { background: #fff !important; color: rgba(255,255,255,.85) !important }
.fk-root .lv3-tick .tlk-tick-item:nth-child(4n+4) .tlk-tick-dot { background: #fff !important; color: rgba(255,255,255,.85) !important }
/* Ticker bg — 20% darker gray */
.fk-root .lv3-tick { background: #111113 !important; border-top-color: rgba(255,255,255,.06) !important; border-bottom-color: rgba(255,255,255,.06) !important }
.fk-root .lv3-tick .lv3-tick-fade { background: linear-gradient(90deg, #111113 52%, transparent) !important }
/* Header — white bottom glow at top only; disappears on scroll */
.fk-root .d-header:not(.is-solid) {
  background: rgba(9,9,11,.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  box-shadow: 0 4px 28px -6px rgba(255,255,255,.14) !important;
}
/* Hide CTA button before scrolling — keep space so nav stays put */
.fk-root .d-header:not(.is-solid) .d-header-cta { visibility: hidden !important; pointer-events: none !important }
.fk-root .d-header.is-solid {
  box-shadow: none !important;
}
/* Scrolled CTA — black button, white text + arrow */
.fk-root .d-header.is-solid .d-header-cta {
  background: #000 !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  box-shadow: none !important;
}
.fk-root .d-header.is-solid .d-header-cta svg { color: #fff !important; stroke: #fff !important }
.fk-root .d-header.is-solid .d-header-cta:hover { background: #1a1a1a !important }

/* BTS secondary — dark full-bleed image section */
.fk-bts-sec {
  background: #09090b;
  overflow: hidden;
  position: relative;
}
.fk-bts-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../../assets/work/ferknot-paisley-bg.png');
  background-size: 1100px;
  background-repeat: repeat;
  opacity: .38;
  pointer-events: none;
  z-index: 0;
}
.fk-bts-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 72vh;
  object-fit: cover;
  display: block;
  opacity: .88;
}

/* ================================================================
   CAMPAIGN BOARD  v2 — landscape layout · staggered transitions
   ================================================================ */
.fk-cb {
  background: #fff;
  padding: 4.5rem 0 5rem;
}
.fk-cb-in {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 2.25rem;
  display: flex;
  align-items: stretch;
  gap: 0.375rem;
  height: 37.5rem;
}

/* Left — single full-height editorial panel */
.fk-cb-left {
  flex: 1.6;
  position: relative;
  overflow: hidden;
}

/* Centre — fixed brand panel */
.fk-cb-center {
  flex: 0 0 244px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.375rem;
}
.fk-cb-emblem {
  width: 5.125rem;
  margin-bottom: 1.125rem;
}
.fk-cb-rule {
  display: block;
  width: 2.625rem;
  height: 1px;
  background: rgba(0,0,0,.24);
  margin: 0.8125rem auto;
  flex-shrink: 0;
}
.fk-cb-wordmark {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 2.375rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: #0a0a10;
  margin: 0;
  line-height: 1;
}
.fk-cb-worldwide {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .26em;
  color: #18244f;
  margin: 0.5rem 0 0;
  text-transform: uppercase;
}
.fk-cb-tagline {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: .11em;
  color: #0a0a10;
  text-transform: uppercase;
  line-height: 1.9;
  margin: 0.9375rem 0 0;
}
.fk-cb-body {
  font-size: 0.71875rem;
  line-height: 1.75;
  color: #666;
  margin: 0.8125rem 0 0;
  max-width: 11.75rem;
}
.fk-cb-cta {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #0a0a10;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  opacity: 1;
  transition: opacity .2s;
}
.fk-cb-cta:hover { opacity: .62; }

/* Right — two flex rows, each row mirrors proportions for true diagonal */
.fk-cb-right-group {
  flex: 2.8;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.fk-cb-row-top,
.fk-cb-row-bot {
  flex: 1;
  display: flex;
  gap: 0.375rem;
}
/* RED always wide (1.55), BLUE always narrow (1) — but swapped per row */
.fk-cb-red-a,
.fk-cb-red-b  { flex: 1.55; position: relative; overflow: hidden; }
.fk-cb-blue-a,
.fk-cb-blue-b { flex: 1;    position: relative; overflow: hidden; }

/* Images — synchronized crossfade with cinematic scale-in · static during dwell */
.fk-cb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition: opacity 1.4s cubic-bezier(.4,0,.2,1),
              transform 1.4s cubic-bezier(.4,0,.2,1);
}
.fk-cb-img.is-active {
  opacity: 1;
  transform: scale(1.0);
  pointer-events: auto;
  cursor: pointer;
}

/* Lightbox */
.fk-cb-lb {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.94);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: fkLbIn .3s ease;
}
@keyframes fkLbIn { from { opacity: 0; } to { opacity: 1; } }
.fk-cb-lb-x {
  position: absolute;
  top: 1.375rem; right: 1.625rem;
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  width: 2.375rem; height: 2.375rem;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: .7;
  transition: opacity .2s;
}
.fk-cb-lb-x:hover { opacity: 1; }
.fk-cb-lb-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  cursor: default;
  border-radius: 0.125rem;
}

/* ================================================================
   CAMPAIGN IMAGERY  (white editorial strip)
   ================================================================ */
.fk-campaign { background: #fff; overflow: hidden }
.fk-campaign-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr 1.1fr .9fr 1.2fr;
  height: 33.75rem;
  gap: 0.1875rem;
}
.fk-campaign-cell { overflow: hidden; position: relative }
.fk-campaign-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .7s ease;
  filter: grayscale(.08) contrast(1.03);
}
.fk-campaign-cell:hover img {
  transform: scale(1.07);
  filter: grayscale(0) contrast(1.06);
}

/* ================================================================
   PAISLEY on ALL dark sections (::after pseudo-element)
   ================================================================ */
/* Elevate — very subtle paisley, reads as texture not pattern */
.fk-root .vt-elevate::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../../assets/work/ferknot-paisley-bg.png');
  background-size: 1100px;
  background-repeat: repeat;
  opacity: .13;
  pointer-events: none;
  z-index: 0;
}
.fk-root .vt-lc::after,
.fk-root .vt-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../../assets/work/ferknot-paisley-bg.png');
  background-size: 1100px;
  background-repeat: repeat;
  opacity: .11;
  pointer-events: none;
  z-index: 0;
}
.fk-root .vt-elevate,
.fk-root .vt-bp,
.fk-root .vt-lc,
.fk-root .vt-cta { position: relative }

.fk-root .vt-elevate .d-wrap,
.fk-root .vt-bp .d-wrap,
.fk-root .vt-lc .d-wrap,
.fk-root .vt-cta .d-wrap { position: relative; z-index: 1 }

/* ================================================================
   ELEVATE / OVERVIEW  (dark — paisley + red/blue glow)
   ================================================================ */
.fk-root .vt-elevate { background: #09090b }
/* Glow — matches VitaminTea reference: soft pink-rose top-right, purple lower-left */
.fk-root .vt-elevate-glow {
  display: block;
  background:
    radial-gradient(55% 70% at 100% 2%,  rgba(244,63,94,.30),   transparent 62%),
    radial-gradient(55% 80% at -2% 104%, rgba(124,92,255,.20),  transparent 60%);
}
.fk-root .vt-eyebrow  { color: var(--pink-500) }
.fk-root .vt-accent   { color: rgba(255,255,255,.92) }
.fk-root .vt-elevate-dot { color: #fff }
.fk-root .vt-elevate-rule { background: var(--acc) }

/* Purple-pink gradient on 'elevate' — exact VitaminTea match */
.fk-root .vt-elevate-h em {
  background: linear-gradient(100deg, #F4B6FF, #A855F7 72%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
}

/* ================================================================
   WHAT WE BUILT  (white)
   ================================================================ */
.fk-root .vt-built-numdot { background: #C8102E; box-shadow: 0 0 4px 1px rgba(200,16,46,.45) }

/* ================================================================
   BRAND PRINCIPLE  (dark — paisley + blue/red glow, no gold breath)
   ================================================================ */
.fk-root .vt-bp { background: #09090b }
/* Garment dev carousel — subtle rounded corners */
.fk-root .vt-dev-carousel { border-radius: 0.75rem !important; } gap after dark vt-lc) */
.fk-root .vt-results { padding-top: 7.5rem }

/* Brand Principle — VT-matched glow, white separators, reduced logo */
.fk-root .vt-bp-top { gap: 3.375rem }
.fk-root .vt-bp-glow {
  display: block;
  background:
    radial-gradient(45% 60% at 12% 18%, rgba(38,210,196,.12), transparent 60%),
    radial-gradient(45% 60% at 92% 96%, rgba(168,85,247,.14), transparent 62%);
}
.fk-root .vt-bp-logo img { width: min(17rem,64%) !important }
.fk-root .vt-bp-logo-breath {
  background: radial-gradient(ellipse, rgba(38,210,196,.10), transparent 64%);
  box-shadow: none;
}
/* Vertical separator — white, animated like VT */
.fk-root .vt-bp-brand::after {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,.06) 22%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.06) 78%,
    transparent 100%) !important;
  background-size: 100% 200% !important;
  animation: vtbpLine 6s ease-in-out infinite !important;
}
/* Horizontal separator — white, animated like VT */
.fk-root .vt-bp-top::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.06) 24%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.06) 76%,
    transparent 100%) !important;
  background-size: 200% 100% !important;
  animation: vtbpLineH 6s ease-in-out infinite !important;
}
/* Paisley square in principle area */
.fk-bp-paisley {
  display: block;
  width: 5rem;
  height: 5rem;
  border-radius: 0;
  overflow: hidden;
  margin-top: 0.875rem;
  flex-shrink: 0;
}
.fk-bp-paisley img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ================================================================
   GARMENT DEV  (white — emerald active)
   ================================================================ */
.fk-root .vt-dev-block.is-active { border-bottom-color: #0a0a10 }
.fk-root .vt-dev-block.is-active .vt-dev-block-ic { color: #0a0a10 }
.fk-root .vt-dev-block.is-active .vt-dev-block-bar { background: #EC4899 }
/* Loading bar matches the 7s rotation interval */
.fk-root .vt-dev-block.is-active .vt-dev-block-bar { animation-duration: 7s }
.fk-root .vt-dev-block:hover { border-bottom-color: rgba(10,10,16,.28) }

/* ================================================================
   DIGITAL / E-COM  (white)
   ================================================================ */
.fk-root .vt-ecom-bullets li svg { stroke: #1D4ED8 !important; color: #1D4ED8 !important }
.fk-root .vt-btn-green {
  background: #1a1a22 !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  box-shadow: none !important;
  color: #fff !important;
}
.fk-root .vt-btn-green:hover { background: #26262e !important; border-color: rgba(255,255,255,.38) !important; color: #fff !important }

/* ================================================================
   LAUNCH CREATIVE  (dark — VT-matched purple/pink glow)
   ================================================================ */
.fk-root .vt-lc { background: #060607 }
.fk-root .vt-lc-glow {
  display: block;
  background:
    radial-gradient(60% 50% at 50% 108%, rgba(236,72,153,.22), transparent 60%),
    radial-gradient(50% 50% at 88% 60%,  rgba(139,92,246,.16), transparent 62%);
}
/* Play button — matches VT */
.fk-root .vt-lc-play {
  background: rgba(255,255,255,.14);
  border: 2px solid rgba(255,255,255,.9);
  backdrop-filter: blur(3px);
}
.fk-root .vt-lc-frame:hover .vt-lc-play {
  background: rgba(255,255,255,.26);
}
/* Video frame — VT-matched purple/pink glow */
.fk-root .vt-lc-frame {
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.10),
    0 30px 80px -20px rgba(0,0,0,.60),
    0 0 80px -10px rgba(139,92,246,.40);
}
/* Large ambient glow pool behind/below the video — matches VT reference */
.fk-root .vt-lc-media::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1.875rem;
  transform: translateX(-50%);
  width: 130%;
  height: 75%;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(236,72,153,.55) 0%,
    rgba(168,85,247,.40) 30%,
    transparent 70%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
/* QR hover text — purple gradient like VT's green */
.fk-root .vt-lc-hoverqr-t {
  background: linear-gradient(90deg, #EC4899, #A855F7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fk-root .vt-lc-eb { color: #EC4899 !important }

/* ================================================================
   RESULTS  (white — red rebuild list)
   ================================================================ */
.fk-root .vt-results-rebuild .lv3-rebuild-ic {
  background: color-mix(in srgb, #A855F7 12%, #fff);
}
.fk-root .vt-results-rebuild .lv3-rebuild-n { color: #A855F7 }
.fk-root .vt-results .vt-eyebrow { color: var(--pink-500) }
.fk-root .vt-results-split .vt-built-imgcol { margin-top: -0.875rem }
.fk-root .vt-results-rebuild .lv3-rebuild-row::before {
  background: linear-gradient(180deg, #A855F7, #7C5CFF);
}
.fk-root .vt-results-rebuild .lv3-rebuild-row:hover {
  box-shadow: 0 18px 42px -28px rgba(168,85,247,.32);
}
.fk-root .vt-results-rebuild .lv3-rebuild-row:hover .lv3-rebuild-n { color: #A855F7 }
.fk-root .vt-results-rebuild .lv3-rebuild-row:hover .lv3-rebuild-ic { background: #A855F7 }
/* Proof carousel — active row + crossfade image stack */
.fk-root .vt-results-rebuild .lv3-rebuild-row.is-active::before { opacity: 1 }
.fk-root .vt-results-rebuild .lv3-rebuild-row.is-active .lv3-rebuild-n { color: #A855F7 }
.fk-root .vt-results-rebuild .lv3-rebuild-row.is-active .lv3-rebuild-ic { background: #A855F7 }
.fk-root .vt-results-rebuild .lv3-rebuild-row.is-active .lv3-rebuild-ic svg { stroke: #fff !important; color: #fff !important }
.fk-root .vt-results-rebuild .lv3-rebuild-row.is-active { box-shadow: 0 18px 42px -28px rgba(168,85,247,.32) }
/* Issue 255: purple progress bar on the active Proof of Reach card. Mirrors the Garment Development
   .vt-dev-block-bar behaviour exactly — the same vtDevBar scaleX keyframe, gated by .is-active so it
   restarts whenever the active card switches (auto-cycle or click) and resets when the card leaves
   active. Tuned to this section's 6s cadence (6.5s like garment's +0.5s over its 7s dwell) and the
   FERKNOT purple. overflow:hidden keeps the bar inside the row's rounded corners. */
.fk-root .vt-results-rebuild .lv3-rebuild-row { overflow: hidden }
.fk-root .fk-proof-bar { position: absolute; left: 0; bottom: 0; height: 0.1875rem; width: 100%; background: linear-gradient(90deg, #7C3AED, #A855F7); transform: scaleX(0); transform-origin: left; border-radius: 0.125rem; pointer-events: none }
.fk-root .vt-results-rebuild .lv3-rebuild-row.is-active .fk-proof-bar { animation: vtDevBar 6.5s linear forwards }
/* Issue 271: make the Proof of Reach cards manually selectable. Issue 248's global
   `.vt-results-rebuild .lv3-rebuild-row{pointer-events:none}` (VitaminTea scroll-only) also disabled
   pointer/click on the FERKNOT proof rows; this .fk-root-scoped override restores them on FERKNOT ONLY,
   so VitaminTea Results stays scroll-only. Click selection, active-state sync, purple-bar restart and
   the 6s timer reset are already wired (button onClick=setProofIdx; timer keyed on proofIdx; bar gated
   by .is-active) — mirroring the Garment Development interaction. Native <button> + global
   :focus-visible give Enter/Space activation and a visible keyboard focus ring. */
.fk-root .vt-results-rebuild .lv3-rebuild-row { pointer-events: auto }
.fk-root .fk-proof-stack { position: relative; flex: 1; align-self: stretch; min-height: 30rem; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-200) }
.fk-root .fk-proof-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% center; border: 0; border-radius: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none }
.fk-root .fk-proof-img.is-active { opacity: 1; pointer-events: auto }

/* ================================================================
   FINAL CTA  (dark — red glow + red primary button)
   ================================================================ */
.fk-root .vt-cta { background: #09090b }
.fk-root .vt-cta-aura {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, rgba(168,85,247,.12) 0%, transparent 58%);
}
.fk-root .vt-eyebrow-d { color: rgba(255,255,255,.65) }
.fk-root .vt-btn {
  background: var(--pink-500) !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--pink-500) 45%, transparent) !important;
  color: #fff !important;
}
.fk-root .vt-btn:hover {
  filter: brightness(1.1) !important;
}

/* ================================================================
   HERO ATMOSPHERE — visible luminous depth effects
   ================================================================ */
.fk-hero-atm {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Luminous glowing orbs — white/neutral only, no colour tints */
.fk-atm-orb { position: absolute; border-radius: 50%; }
/* Left-edge glow — slim ellipse hugging the left side of the hero */
.fk-atm-orb--a {
  width: 20rem; height: 110%;
  top: -5%; left: -9%;
  background: radial-gradient(ellipse at 0% 50%, rgba(255,255,255,.09), transparent 62%);
  animation: fkOrbA 13s ease-in-out infinite;
}
.fk-atm-orb--b {
  width: 31.25rem; height: 31.25rem;
  bottom: -5%; left: 14%;
  background: radial-gradient(circle, rgba(255,255,255,.038), transparent 64%);
  animation: fkOrbB 17s ease-in-out infinite;
}
.fk-atm-orb--c {
  width: 23.75rem; height: 23.75rem;
  top: 22%; right: 6%;
  background: radial-gradient(circle, rgba(255,255,255,.04), transparent 64%);
  animation: fkOrbC 10s ease-in-out infinite;
}
@keyframes fkOrbA {
  0%,100% { transform: translate(0,0) scale(1);        opacity: .8; }
  50%      { transform: translate(32px,20px) scale(1.1); opacity: .45; }
}
@keyframes fkOrbB {
  0%,100% { transform: translate(0,0);                  opacity: .7; }
  50%      { transform: translate(-24px,-18px) scale(.9); opacity: 1; }
}
@keyframes fkOrbC {
  0%,100% { transform: translate(0,0);   opacity: .55; }
  50%      { transform: translate(16px,26px); opacity: .25; }
}

/* Slow travelling scan band — visible white wash */
.fk-atm-scan {
  position: absolute;
  left: -5%; right: -5%;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.042), transparent);
  animation: fkScan 17s linear infinite;
}
@keyframes fkScan {
  0%   { top: -28%; }
  100% { top: 115%; }
}

/* Diagonal light rays — removed */
/* Floating dust particles — removed */

@media (prefers-reduced-motion: reduce) {
  .fk-atm-orb--a, .fk-atm-orb--b, .fk-atm-orb--c,
  .fk-atm-scan { animation: none !important; }
}

/* ================================================================
   MOBILE  .fk-mroot
   ================================================================ */
.fk-m-dark { position: relative; overflow: hidden }
.fk-mroot .fk-m-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../../assets/work/ferknot-paisley-bg.png');
  background-size: 900px;
  background-repeat: repeat;
  opacity: .38;
  pointer-events: none;
  z-index: 0;
}
.fk-mroot .fk-m-dark > * { position: relative; z-index: 1 }

.fk-mroot .tlk-tick-dot { background: #fff !important; box-shadow: 0 0 8px 1px rgba(255,255,255,.49) !important }
.fk-mroot .lv3m-eb-dot { display:inline-block; width:0.4375rem; height:0.4375rem; border-radius:50%; flex:none; background:#fff; box-shadow:0 0 6px 1px rgba(255,255,255,.55); animation:fkdot 2.4s ease-in-out infinite }
@keyframes fkmc-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fkdot{0%,100%{box-shadow:0 0 7px 1px rgba(255,255,255,.5)}50%{box-shadow:0 0 14px 3px rgba(255,255,255,.85)}}
/* Hero glow — purple only */
.fk-mroot .fk-m-hero-glow { position:absolute;top:2%;right:-20%;width:90%;height:60%;background:radial-gradient(circle at 60% 40%,rgba(168,85,247,.26),transparent 68%);filter:blur(20px);pointer-events:none;z-index:1 }
.fk-mroot .fk-m-art-glow { position:absolute;inset:-8% 4%;background:radial-gradient(circle at 54% 46%,rgba(168,85,247,.22),transparent 68%);filter:blur(22px);pointer-events:none }
/* Hero top bar — arrow + eyebrow centered as a group above logo */
.fk-mroot .lv3m-hero-top { justify-content: center !important; }
.fk-mroot .lv3m-hero { padding-top: 1.75rem !important; padding-bottom: 2.25rem !important; background: var(--ink-900) }
/* Mobile primary CTA — dark pill w/ light edge + wide purple glow (match reference) */
.fk-mroot .lv3m-hero-cta { position: relative; }
.fk-mroot .lv3m-hero-cta::before {
  content: "";
  position: absolute;
  inset: -3.4375rem -2.8125rem;
  background: radial-gradient(58% 130% at 50% 50%, rgba(168,85,247,.13) 0%, rgba(168,85,247,.06) 38%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
  z-index: 0;
}
.fk-mroot .lv3m-hero-cta > * { position: relative; z-index: 1; }
.fk-mroot .vt-m-cta .ds-btn--primary {
  background: linear-gradient(135deg, rgba(22,21,26,.34) 0%, #18171d 46%, #09090c 100%) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
  color: #fff !important;
}
/* Hero CTA — near-transparent black glass (no white edge/glow) */
.fk-mroot .lv3m-hero-cta .ds-btn--primary {
  background: rgba(0,0,0,.1) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: none !important;
  color: #fff !important;
}
.fk-mroot .lv3m-hero-cta .ds-btn--primary svg,
.fk-mroot .vt-m-cta .ds-btn--primary svg {
  color: #fff !important; stroke: #fff !important;
}
.fk-mroot .lv3m-hero-cta { margin-top: 0.875rem !important }
.fk-mroot .lv3m-hero-lead { margin-bottom: 0.375rem !important }
.fk-mroot .lv3m-hero-meta { margin-top: 0.375rem !important }
.fk-mroot .lv3m-hero-art { width:78%;max-width:18.75rem;border-radius:0.75rem;filter:drop-shadow(0 30px 56px rgba(0,0,0,.7));-webkit-mask-image:none;mask-image:none }
/* Wide logo — full section width */
.fkm-hero-logo { width:100%;max-width:100%;height:auto;display:block;margin:0 0 0.625rem;filter:brightness(0) invert(1) }
/* Wide logo moved above hero image — 10% smaller, centered */
.fk-mroot .fkm-hero-logo--top { width:90%;max-width:90%;margin:1px auto 0.875rem }
/* Brand principle — teal + purple glows (match desktop) */
.fk-mroot .vt-m-bp-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 36% at 90% 92%, rgba(168,85,247,.16), transparent 62%);
  animation: vtbpDrift 16s ease-in-out infinite;
}
.fk-mroot .vt-m-bp-logo-breath { background: none !important; box-shadow: none !important }
.fk-mroot .vt-m-bp-period { color: #fff; text-shadow: none }
.fk-mroot .vt-m-bp-period::after { content: none !important; display: none !important; background: none !important }
/* Launch creative — purple glow (match desktop) */
.fk-mroot .vt-m-lc { background: #060607 }
.fk-mroot .vt-m-lc-play { background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.9) }
.fk-mroot .vt-m-lc-frame { box-shadow: 0 20px 60px -16px rgba(139,92,246,.45), 0 0 0 1.5px rgba(255,255,255,.08) }
.fk-mroot .vt-m-lc-eb { color: #EC4899 !important }
/* Results rebuild — purple */
.fk-mroot .vt-m-results-rebuild .lv3-rebuild-row::before { background: linear-gradient(180deg, #A855F7, #7C5CFF) }
.fk-mroot .vt-m-results-rebuild .lv3-rebuild-ic { background: color-mix(in srgb, #A855F7 12%, #0a0a10) }
/* Eyebrow — pink-500 */
.fk-mroot .vt-eyebrow { color: var(--pink-500) }
.fk-mroot .vt-m-eyebrow { color: var(--pink-500) }
.fk-mroot .vt-elevate-dot { color: #EC4899 }
.fk-mroot .fk-branding-eb { color: #fff !important }
/* Mobile popup — X sits above image, not over it */
.fk-mroot .vtb-modal { padding-top: 44px !important }
.fk-mroot .vtb-x { top: 6px !important; right: 10px !important }

/* ============================================================
   PACKAGE 6 — FERKNOT MOBILE AUDIT (Issues 55-66)
   Mobile-only, scoped to .fk-mroot. Desktop (.fk-root) untouched.
   ============================================================ */

/* --- Issue 55: official white wide logo BELOW the hero image, centred --- */
.fk-mroot .fkm-hero-logo-h { margin: 0 }
.fk-mroot .fkm-hero-logo--below { width: 84%; max-width: 20.5rem; margin: 1.25rem auto 0.625rem }

/* --- Issue 56: Role / Scope / Status circular icon medallions --- */
.fk-mroot .fkm-meta { display: flex; flex-direction: column; gap: 0; margin-top: 1rem }
.fk-mroot .fkm-meta-row { display: flex; align-items: center; gap: 0.9375rem; padding: 0.9375rem 0; border-top: 1px solid rgba(255,255,255,.1) }
.fk-mroot .fkm-meta-row:last-child { border-bottom: 1px solid rgba(255,255,255,.1) }
.fk-mroot .fkm-meta-ic { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--acc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 44%, transparent) }
.fk-mroot .fkm-meta-body { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0 }
.fk-mroot .fkm-meta-k { font-family: var(--font-mono); font-weight: 600; font-size: 0.78rem; letter-spacing: .16em; text-transform: uppercase; color: #AEB8E8; margin: 0 }
.fk-mroot .fkm-meta-v { font-family: var(--font-sans); font-weight: 600; font-size: 1.04rem; line-height: 1.32; color: #fff }

/* --- Issue 57: hero CTA contrast — outlined-white secondary + solid-white primary --- */
.fk-mroot .lv3m-hero-cta .ds-btn--primary { background: transparent !important; border: 1.5px solid rgba(255,255,255,.9) !important; box-shadow: none !important; color: #fff !important }
.fk-mroot .lv3m-hero-cta .ds-btn--primary svg { color: #fff !important; stroke: #fff !important }
.fk-mroot .lv3m-hero-cta .ds-btn--ghost-dark { background: #fff !important; border: 1.5px solid #fff !important; color: #0a0a10 !important; font-weight: 700 !important }
.fk-mroot .lv3m-hero-cta .ds-btn--ghost-dark svg { color: #0a0a10 !important; stroke: #0a0a10 !important }

/* --- Issue 58: overview cards typography (01-04) --- */
.fk-mroot .vt-m-elevate-num { font-size: 1.5rem }
.fk-mroot .vt-m-elevate-k { font-size: 1.25rem; margin-top: 0.5rem }
.fk-mroot .vt-m-elevate-d { font-size: 1.05rem; line-height: 1.56 }

/* --- Issue 59: What We Built eyebrow + heading + accordion scale --- */
.fk-mroot .vt-m-built .vt-m-eyebrow { font-size: 1rem }
.fk-mroot .vt-m-built .vt-m-sec-h { font-size: 2.1rem; line-height: 1.04 }
.fk-mroot .vt-mba-head { padding: 1rem }
.fk-mroot .vt-mba-ic { width: 3.5rem; height: 3.5rem }
.fk-mroot .vt-mba-k { font-size: 1.3rem; line-height: 1.12 }
.fk-mroot .vt-mba-d { font-size: 1.06rem; line-height: 1.55; padding-left: 5.3125rem }
.fk-mroot .vt-mba-more { font-size: 0.82rem; margin-left: 5.3125rem }
.fk-mroot .vt-mba-more svg { width: 1rem; height: 1rem }
.fk-mroot .vt-mba-row.is-open .vt-mba-bd { max-height: 34rem }

/* --- Issue 60: signature paisley copy larger + view-in-action text trigger --- */
.fk-mroot .vt-m-bp-sub { font-size: 1.12rem; line-height: 1.56 }
.fk-mroot .fkm-paisley-link { display: inline-flex; align-items: center; gap: 0.4375rem; margin-top: 0.125rem;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #5AD2E6; background: none; border: 0; cursor: pointer; padding: 0.5rem 0.5rem; -webkit-tap-highlight-color: transparent }
.fk-mroot .fkm-paisley-link svg { stroke: #5AD2E6; color: #5AD2E6 }
.fk-mroot .fkm-paisley-link:focus-visible { outline: 2px solid #5AD2E6; outline-offset: 3px; border-radius: 4px }
.fk-mroot .fkm-paisley-link:active { opacity: .65 }

/* --- Issue 61: brand-system mini headings (+25%, brighter) + icon circles (+11%) --- */
.fk-mroot .vt-m-bp-pillar-k { font-size: 0.86rem; color: rgba(255,255,255,.82) }
.fk-mroot .vt-m-bp-pillar-ic { width: 3.05rem; height: 3.05rem }

/* --- Issue 64: production contributions typography + icons --- */
.fk-mroot .vt-m-lc-contrib-label { font-size: 0.85rem; margin-bottom: 0.75rem }
.fk-mroot .vt-m-lc-contrib-ic { width: 3.45rem; height: 3.45rem }
.fk-mroot .vt-m-lc-contrib-k { font-size: 1.54rem }
.fk-mroot .vt-m-lc-contrib-d { font-size: 1.02rem; line-height: 1.42 }

/* ============================================================
   PACKAGE 8 — FERKNOT MOBILE CLEANUP (Issues 128-132)
   Mobile-only, scoped to .fk-mroot. Desktop (.fk-root) untouched.
   ============================================================ */

/* --- Issue 128A: logo stacking — force the wide hero logo above the
   hero glow and the art image drop-shadow so it reads bright, not dull --- */
.fk-mroot .fkm-hero-logo-h { position: relative; z-index: 5 }
/* Issue 161: the img must be positioned so the whitened logo paints ABOVE the
   .fk-m-dark::after paisley scrim (opacity .38). As a static child it painted
   below the positioned scrim and the texture dimmed it to grey; position+z-index
   lifts it into the positioned layer so it renders true bright white. */
.fk-mroot .fkm-hero-logo { opacity: 1; position: relative; z-index: 2 }

/* --- Issue 128B: logo bigger + left-aligned (left edge tracks the
   category line "B"), balanced within the content width --- */
.fk-mroot .fkm-hero-logo--below { width: 100%; max-width: 22.5rem; margin: 0.75rem 0 0.5rem }

/* --- Issue 128D: tighten the gap between the category line and the
   supporting paragraph so they read as one group --- */
.fk-mroot .mtlk-hero-cat { margin-bottom: 0.5rem !important }

/* --- Issue 128E: nudge the hero paragraph wrap so the first line ends
   on "ground up" and the next begins "as a premium fashion brand..."
   (small size + tracking correction only; fluid 320-480) --- */
.fk-mroot .lv3m-hero-lead { font-size: 1.16rem; letter-spacing: -0.006em }

/* --- Issue 129: ROLE / SCOPE / STATUS rows must be icon-LEFT, text-RIGHT.
   The shared `.tlk-mroot .lv3m-hero-meta > div` rule (column) outranks the
   base `.fkm-meta-row` flex rule because of its element selector, so raise
   specificity here to restore the horizontal row.
   Issue 216: as a flex row, the icon→text gap collapsed to ~6px on the rows whose
   value wraps to multiple lines (Role, Scope) while the single-line Status row kept
   the intended 0.9375rem. Switch this (already high-specificity) rule to a grid with a
   fixed 3rem icon column + fixed 0.9375rem column-gap so the text column starts at the
   SAME x for every row, matching the (correct) Status spacing. Mobile-only (.fk-mroot). --- */
.fk-mroot .lv3m-hero-meta.fkm-meta > .fkm-meta-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.9375rem; align-items: center; text-align: left }

/* --- Issue 131: defensive — keep the "What we built" heading first
   portion black on the white section (accent stays the pink gradient) --- */
.fk-mroot .vt-m-built .vt-m-sec-h { color: #0a0a10 }

/* --- Issue 165: reduce the black gap between the YOUR BRAND CTA paragraph and the MSHRM
   footer (~50%): trim the CTA section's bottom padding (2.75rem -> 1.375rem). --- */
.fk-mroot .vt-m-cta { padding-bottom: 1.375rem }