/*
 * visit-mum.css
 * jimthompsoncreative.com/work/visit-mum.html
 * Visit Mum section styles only.
 * Standardization pass complete: body copy silver-bright weight 300 at 17px.
 * vm-stat__caption invalid weight 350 corrected to 400.
 * Requires: design-system.css v2 loaded first.
 * Last updated: 2026-05-16
 */


/* ============================================================
   §1 HERO
   90vh. Photo bg, no gradient. Text-shadow for legibility.
   Content anchored bottom-left.
   ============================================================ */
.vm-hero {
  width: 100%;
  height: 90vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 7vw 7vh;
  background-image: url('../assets/visit-mum/flipped-hero-thumbnail.webp');
  background-size: cover;
  background-position: center top;
  background-color: #1a1e26; /* fallback while image loads */
}

/* NO gradient on Visit Mum hero — photo carries it.
   Text-shadow provides legibility protection instead. */

.vm-hero__content {
  position: relative;
  z-index: 2;
  max-width: 540px;
}

.vm-hero__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--chart);
  text-transform: uppercase;
  letter-spacing: .28em;
  margin-bottom: 14px;
  text-shadow: 0 1px 20px rgba(0,0,0,0.5);
  opacity: 0;
  animation: riseIn 0.7s ease 0.3s forwards;
}

.vm-hero__headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 28px;
  text-shadow: 0 1px 20px rgba(0,0,0,0.5);
  text-wrap: balance;
  opacity: 0;
  animation: riseIn 0.8s ease 0.5s forwards;
}

.vm-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  animation: riseIn 0.7s ease 0.75s forwards;
}

/* Primary CTA */
.vm-cta-primary {
  display: inline-flex;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--chart);
  text-transform: uppercase;
  letter-spacing: .2em;
  text-decoration: none;
  min-height: 44px;
  padding: 12px 0;
  transition: opacity 0.2s ease;
}

.vm-cta-primary:hover {
  color: var(--chart-hot);
}

/* Play ring — used on video CTAs outside hero */
.play-ring {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(184,212,0,0.7);
  background: rgba(184,212,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.play-ring::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent var(--chart);
  margin-left: 2px;
}

/* Ghost CTA — bumped from whisper: brighter color, weight 500 */
.vm-cta-ghost {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: .18em;
  text-decoration: none;
  padding: 12px 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.2s ease;
}

.vm-cta-ghost:hover {
  color: var(--white);
}

/* Keyboard focus — invisible to mouse users, visible to keyboard users */
.vm-cta-primary:focus-visible,
.vm-cta-ghost:focus-visible {
  outline: 1px solid var(--chart);
  outline-offset: 6px;
  border-radius: 2px;
}


/* ============================================================
   §2 STATS RAIL
   S2 spec: 84px Bebas chartreuse / 14px IPM 350 silver
   4 stats, centered in columns, hairline dividers between.
   ============================================================ */
.vm-stats {
  width: 100%;
  background: var(--steel);
  padding: 80px 4vw;
}

.vm-stats__grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

.vm-stat {
  position: relative;
  text-align: center;
  padding: 0 32px;
}

/* Hairline dividers between columns only */
.vm-stat + .vm-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: rgba(255,255,255,0.07);
}

.vm-stat__number {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 84px;
  color: var(--chart);
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 20px;
}

.vm-stat__caption {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.45;
}

/* Scroll-triggered cascade reveal — JS adds .is-visible */
.vm-stat {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.vm-stat.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — left to right */
.vm-stat:nth-child(1) { transition-delay: 0s; }
.vm-stat:nth-child(2) { transition-delay: 0.12s; }
.vm-stat:nth-child(3) { transition-delay: 0.24s; }
.vm-stat:nth-child(4) { transition-delay: 0.36s; }


/* ============================================================
   §3–§10 PLACEHOLDERS
   Section shells ready to receive content as built.
   Remove placeholder styles when section is built.
   ============================================================ */
.vm-placeholder {
  width: 100%;
  padding: 80px 7vw;
  border-top: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.vm-placeholder__tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  color: var(--chart);
  text-transform: uppercase;
  letter-spacing: .3em;
  opacity: 0.5;
}

.vm-placeholder__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 200;
  color: rgba(241,242,246,0.25);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet — 2×2 stats grid */
@media (max-width: 900px) {
  .vm-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 56px 0;
  }

  .vm-stat + .vm-stat::before {
    display: none;
  }

  /* Restore right divider on first two items */
  .vm-stat:nth-child(1)::after,
  .vm-stat:nth-child(3)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: rgba(255,255,255,0.07);
  }

  .vm-stat__number { font-size: 72px; }
}

/* Mobile — single column */
@media (max-width: 520px) {
  .vm-hero {
    padding: 0 6vw 8vh;
  }

  .vm-stats {
    padding: 64px 6vw;
  }

  .vm-stats__grid {
    grid-template-columns: 1fr;
    gap: 48px 0;
  }

  .vm-stat::after,
  .vm-stat + .vm-stat::before {
    display: none;
  }

  .vm-stat__number { font-size: 80px; }
  .vm-stat__caption { font-size: 13px; }
}
/* ═══════════════════════════════════════════════════════════════════════
   visit-mum.css
   Page-specific styles for /work/visit-mum.html
   Appends to design-system.css — expects Steel bg, font imports, etc.
   
   § ECOSYSTEM — LOCKED 2026-04-24 (v4.4)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── ECOSYSTEM SECTION ─────────────────────────────────────────────── */

.ecosystem-section {
  max-width: 1600px;
  margin: 0 auto;
  padding: 100px 7vw;
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 60px;
  align-items: center;
}

.eco-copy { max-width: 340px; }

.eco-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--chart);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.eco-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.eco-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 300;
  color: var(--silver-bright);
  line-height: 1.7;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.eco-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--chart);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
  min-height: 44px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease, transform 0.55s ease, color 0.2s ease;
}
.eco-link:hover { color: var(--chart-hot); }

.eco-link-ring {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(184, 212, 0, 0.7);
  background: rgba(184, 212, 0, 0.06);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eco-link-ring svg { width: 8px; height: 10px; }

/* ─── SPHERE STAGE ──────────────────────────────────────────────────── */

.eco-stage {
  position: relative;
  aspect-ratio: 1400 / 900;
  width: 100%;
}

.sphere-arrows-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sphere {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.88);
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}

.sphere.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.sphere img {
  width: 100%;
  height: auto;
  display: block;
  /* TEMPORARY: strips black bg on sphere PNGs. Remove once PNGs are re-exported
     with transparent bg (see HANDOFF outstanding). */
  mix-blend-mode: lighten;
}

/* Sphere positions. Satellite widths are per-sphere tuned to normalize
   visible diameters despite inconsistent cropping in source PNGs.
   Once PNGs are re-cropped to uniform bounds, revert all satellites to 25%. */
.sphere.hub     { left: 50%;  top: 50%; width: 40%; }
.sphere.email   { left: 8%;   top: 18%; width: 23.68%; }
.sphere.earned  { left: 8%;   top: 50%; width: 26.22%; }
.sphere.display { left: 8%;   top: 82%; width: 24.88%; }
.sphere.social  { left: 92%;  top: 18%; width: 26.99%; }
.sphere.ugc     { left: 92%;  top: 50%; width: 23.63%; }
.sphere.crm     { left: 92%;  top: 82%; width: 28.01%; }

/* ─── SPHERE LABELS ─────────────────────────────────────────────────── */

.sphere-label {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  top: 100%;
  transform: translateY(14px);
  width: 100%;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  font-weight: 400;
  color: #C8CDD8;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
  line-height: 1;
}

.sphere.hub .sphere-label {
  font-size: 9px;
}

/* ─── SIGNAL ARROWS ─────────────────────────────────────────────────── */

.signal-arrow {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.signal-arrow.draw { opacity: 1; }

.signal-arrow .core,
.signal-arrow .halo {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.signal-arrow.draw .core,
.signal-arrow.draw .halo {
  stroke-dashoffset: 0;
}

/* Terminus bloom — radial flash at arrival points */
.terminus-bloom {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
}
.terminus-bloom.bloom {
  animation: bloomPulse 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bloomPulse {
  0%   { opacity: 0; transform: scale(0.4); }
  50%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.4; transform: scale(1); }
}

/* ─── RESPONSIVE ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .ecosystem-section {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 7vw;
  }
}

/* ─── REDUCED MOTION ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sphere {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
  .signal-arrow { opacity: 1 !important; }
  .signal-arrow .core,
  .signal-arrow .halo { stroke-dashoffset: 0 !important; }
  .terminus-bloom {
    opacity: 0.4 !important;
    transform: scale(1) !important;
  }
  .eco-eyebrow,
  .eco-headline,
  .eco-body,
  .eco-link {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 SOCIAL + DISPLAY — Refactored 2026-04-25
   Was: 360vh sticky-scroll with rotating copy chunks + dot indicator.
   UX problem: dots read as carousel; 360vh pin felt like a frozen page.
   Now: static two-column layout, body paragraphs all visible,
   natural section height, entry fade-in only.
   ═══════════════════════════════════════════════════════════════════════ */

.sd4 {
  position: relative;
  padding: 120px 0;
}

.sd4-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 7vw;
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 6vw;
  width: 100%;
  align-items: center;
}

.sd4-copy {
  max-width: 460px;
  position: relative;
}

.sd4-copy h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 28px;
}

/* Eyebrow scoped to §4 — uses standard design system token */
.sd4 .sd-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--chart);
  margin-bottom: 24px;
}

/* Static body — paragraphs stacked, all visible */
.sd4-body p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--silver-bright);
}
.sd4-body p + p {
  margin-top: 16px;
}

/* Video stage */
.sd4-video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.sd4-video-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Initial reveal — eyebrow + headline + body + video fade up when section enters viewport */
.sd4 .sd-eyebrow,
.sd4 .sd4-copy h2,
.sd4 .sd4-body,
.sd4 .sd4-video-stage {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sd4.is-visible .sd-eyebrow {
  opacity: 1;
  transform: translateY(0);
}
.sd4.is-visible .sd4-copy h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 120ms;
}
.sd4.is-visible .sd4-body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 240ms;
}
.sd4.is-visible .sd4-video-stage {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 360ms;
}

/* Mobile — stack copy above video */
@media (max-width: 900px) {
  .sd4 { padding: 80px 0; }
  .sd4-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 7vw;
  }
}

/* Reduced motion — show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .sd4 .sd-eyebrow, .sd4 .sd4-copy h2,
  .sd4 .sd4-body, .sd4 .sd4-video-stage {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 UGC — #VISITMUM SHUFFLE STACK
   ═══════════════════════════════════════════════════════════════════════
   Integrated 2026-04-25 from _wip-visit-mum-s5-stack-v8-EMBEDDED specimen.
   Mechanic: 4-card looping shuffle (3 Twitter + 1 Facebook winner).
   Click stack → bottom card moves to top peek, others step down.
   ─────────────────────────────────────────────────────────────────────── */
.ugc-section{
  max-width:1600px;
  margin:0 auto;
  padding:120px 7vw 140px;
  display:grid;
  grid-template-columns:minmax(280px,340px) 1fr;
  gap:60px;
  align-items:center;
  position:relative;
}

/* ── Copy column ── */
.ugc-copy{max-width:340px;}
.ugc-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;font-weight:500;color:var(--chart);
  letter-spacing:.28em;text-transform:uppercase;margin-bottom:20px;
}
.ugc-headline{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(28px,2.6vw,38px);font-weight:300;
  color:var(--white);line-height:1.2;letter-spacing:-.005em;
  margin-bottom:28px;
}
.ugc-headline .hash{color:var(--white);}
.ugc-body{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:17px;font-weight:300;line-height:1.55;
  color:var(--silver-bright);margin-bottom:28px;
}
.ugc-body em{font-style:normal;color:var(--white);}
.ugc-meta{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:400;letter-spacing:.28em;
  color:var(--silver);text-transform:uppercase;
  display:flex;align-items:center;gap:12px;
}
.ugc-meta-dot{width:5px;height:5px;background:var(--chart);border-radius:50%;}

/* ── Stage column ── */
.ugc-stage-col{display:flex;flex-direction:column;align-items:center;}

.ugc-stack{
  position:relative;
  width:100%;
  max-width:440px;
  aspect-ratio:440/680;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

/* ============================================================
   UNIFIED CARD SPEC — v7
   Slot 0 (active) is at BOTTOM. 
   Slot 3 (next-to-flip-in) sits at TOP.
   Peek = 56px each, header bands of upper cards visible above active.
   z-index reversed: top of stack visually = highest z.
   ============================================================ */
.ugc-card{
  position:absolute;
  left:0;right:0;
  width:100%;
  aspect-ratio:11/14;
  background:#fff;
  border-radius:6px;
  overflow:hidden;
  box-shadow:
    0 14px 32px rgba(0,0,0,0.32),
    0 4px 10px rgba(0,0,0,0.22),
    0 0 0 1px rgba(0,0,0,0.05);
  transition:
    top 0.55s cubic-bezier(.4,0,.2,1),
    z-index 0s linear 0.275s,
    filter 0.55s cubic-bezier(.4,0,.2,1),
    transform 0.55s cubic-bezier(.4,0,.2,1);
  will-change:top, filter, transform;
  display:flex;
  flex-direction:column;
}

/* B-direction slot positions:
   - slot 0 (ACTIVE) sits LOWEST in the stack — top:168px
   - slot 1 peeks above it — top:112px (its header band visible above active)
   - slot 2 — top:56px
   - slot 3 — top:0 (highest in pile, only header band visible)
   z-index: HIGHEST z for the visible-on-top peek cards (so they layer correctly).
   The ACTIVE card has highest z-index (it's the one you can fully read).
   Wait — re-thinking. If peek bands show ABOVE the active card, then each peek
   card's BODY needs to be HIDDEN BEHIND the card below it.
   So: slot 0 (active, bottom of pile, top:168) needs HIGHEST z (z=4)
       slot 1 (top:112) needs z=3 (slot 0 is on top of it)
       slot 2 (top:56) needs z=2
       slot 3 (top:0) needs z=1
   Each card below covers the body of the card above, leaving only the header band peeking. */

.ugc-card[data-slot="0"]{ top:168px; z-index:4; filter:brightness(1);    }
.ugc-card[data-slot="1"]{ top:112px; z-index:3; filter:brightness(0.96); }
.ugc-card[data-slot="2"]{ top:56px;  z-index:2; filter:brightness(0.92); }
.ugc-card[data-slot="3"]{ top:0;     z-index:1; filter:brightness(0.88); }

/* ============================================================
   TWITTER CARD CHROME (3 entries)
   Period: 2013-2014
   ============================================================ */
.tw-card{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  color:#292F33;
  display:flex;flex-direction:column;
  height:100%;
  background:#fff;
}
.tw-head{
  padding:12px 14px 8px;
  display:flex;align-items:flex-start;gap:10px;
  /* Min-height ensures peek band shows the full head row */
  min-height:56px;
}
.tw-avatar{
  width:36px;height:36px;
  border-radius:4px;
  background:#E1E8ED;
  flex-shrink:0;
  overflow:hidden;
  position:relative;
}
.tw-avatar img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.tw-namegroup{flex:1;min-width:0;}
.tw-name{
  font-size:14px;
  font-weight:700;
  color:#292F33;
  line-height:1.15;
}
.tw-handle{
  font-size:12px;
  color:#8899A6;
  margin-top:1px;
  line-height:1.15;
}
.tw-follow{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;
  color:#1DA1F2;
  border:1px solid #1DA1F2;
  border-radius:14px;
  padding:4px 10px;
  background:#fff;
  white-space:nowrap;
  flex-shrink:0;
}
.tw-follow::before{
  content:"";display:inline-block;
  width:8px;height:8px;
  border:1.4px solid #1DA1F2;border-radius:50%;
}

.tw-text{
  padding:0 14px 10px;
  font-size:14px;line-height:1.4;
  color:#292F33;
  word-wrap:break-word;
}
.tw-text .mention,
.tw-text .hashtag,
.tw-text .link{ color:#1DA1F2; }
.tw-text .mention{font-weight:400;}

.tw-actions{
  padding:6px 14px 8px;
  display:flex;align-items:center;gap:24px;
  color:#8899A6;
  font-size:12px;
}
.tw-actions svg{
  width:14px;height:14px;
  fill:currentColor;
  opacity:0.7;
}

.tw-photo{
  flex:1;
  background:#000;
  position:relative;
  overflow:hidden;
  min-height:0;
}
.tw-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ============================================================
   FACEBOOK CARD CHROME (winner)
   Period: 2013-2015 + reference shell
   ============================================================ */
.fb-card{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  color:#1c1e21;
  display:flex;flex-direction:column;
  height:100%;
  background:#fff;
}
.fb-head{
  padding:12px 14px 10px;
  display:flex;align-items:flex-start;gap:10px;
  min-height:56px;
}
.fb-avatar{
  width:40px;height:40px;
  border-radius:50%;
  background:#fff;
  flex-shrink:0;
  overflow:hidden;
  position:relative;
}
.fb-avatar img{
  width:100%;height:100%;
  object-fit:cover;
}
.fb-namegroup{flex:1;min-width:0;}
.fb-name{
  font-size:14px;
  font-weight:600;
  color:#385898;
  display:flex;align-items:center;gap:5px;
  line-height:1.2;
}
.fb-verified{
  width:13px;height:13px;
  fill:#1877F2;
  flex-shrink:0;
}
.fb-meta{
  font-size:12px;
  color:#65676B;
  margin-top:2px;
  display:flex;align-items:center;gap:4px;
}
.fb-globe{
  display:inline-block;width:11px;height:11px;
  border:1.2px solid #65676B;border-radius:50%;
  position:relative;flex-shrink:0;
}
.fb-globe::before,
.fb-globe::after{
  content:"";position:absolute;
  border-color:#65676B;border-style:solid;
}
.fb-globe::before{
  inset:0;border-width:0 1.2px;border-radius:50%;
  width:38%;left:31%;
}
.fb-globe::after{
  left:0;right:0;top:50%;
  border-top-width:1.2px;
}
.fb-menu{
  font-size:18px;color:#65676B;
  line-height:1;letter-spacing:1px;
  flex-shrink:0;padding:2px 6px;
}
.fb-text{
  padding:0 14px 12px;
  font-size:14px;line-height:1.4;
  color:#1c1e21;
}
.fb-text .mention,
.fb-text .hashtag{color:#385898;}
.fb-photo{
  flex:1;
  background:linear-gradient(135deg,#3a3548 0%,#2a2f3d 100%);
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:0;
}
.fb-photo img{width:100%;height:100%;object-fit:cover;}
.fb-photo-tk{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:500;letter-spacing:.32em;
  color:rgba(241,242,246,0.45);
  text-transform:uppercase;text-align:center;line-height:1.5;
}
.fb-photo-tk small{
  display:block;font-size:8px;letter-spacing:.22em;
  color:rgba(241,242,246,0.3);margin-top:6px;font-weight:400;
}

/* ── Tap hint — placed on the active (bottom) card via JS ── */
.ugc-stack-hint{
  position:absolute;
  bottom:14px;right:14px;
  z-index:20;  /* always above any card */
  width:30px;height:30px;
  border-radius:50%;
  background:rgba(184,212,0,0.92);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  opacity:0;
  animation:hintPulse 2.4s ease-in-out 0.6s infinite;
  box-shadow:0 4px 14px rgba(184,212,0,0.35);
}
.ugc-stack-hint svg{width:12px;height:12px;}
.ugc-stack.is-touched .ugc-stack-hint{
  animation:none;opacity:0;
  transition:opacity 0.4s ease;
}
@keyframes hintPulse{
  0%,100% { opacity:0; transform:scale(0.85); }
  50%     { opacity:1; transform:scale(1); }
}

/* ── Counter ── */
.ugc-stack-counter{
  margin-top:32px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:400;letter-spacing:.32em;
  color:var(--silver);text-transform:uppercase;
  display:flex;align-items:center;gap:14px;
}
.ugc-stack-counter::before,
.ugc-stack-counter::after{
  content:"";width:24px;height:1px;
  background:rgba(157,162,181,0.3);
}
.ugc-stack-counter strong{
  color:var(--white);font-weight:500;font-variant-numeric:tabular-nums;
  min-width:60px;text-align:center;display:inline-block;
}

/* ── Shuffle CTA ── */
.ugc-shuffle-cta {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--chart);
  text-transform: uppercase;
  letter-spacing: .22em;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  min-height: 44px;
  transition: color 0.2s ease;
}
.ugc-shuffle-cta:hover { color: var(--white); }
.ugc-shuffle-ring {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(184,212,0,0.6);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--chart);
}

/* §5 reduced-motion */
@media (prefers-reduced-motion:reduce){
  .ugc-card{transition:none;}
  .ugc-stack-hint{animation:none;opacity:0;}
}

/* §5 responsive */
@media (max-width: 900px) {
  .ugc-section { grid-template-columns: 1fr; gap: 48px; padding: 80px 7vw 100px; }
  .ugc-stack { max-width: 340px; }
  .ugc-card[data-slot="0"] { top: 144px; }
  .ugc-card[data-slot="1"] { top: 96px; }
  .ugc-card[data-slot="2"] { top: 48px; }
  .ugc-card[data-slot="3"] { top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §6 EARNED LOVE — Marquee with headline
   ═══════════════════════════════════════════════════════════════════════
   Direction locked 2026-04-25.
   Pattern: photo-quote / press / photo-quote / press / photo-quote.
   Mechanic: continuous CSS @keyframes loop, hover-pause, mask-faded edges.
   No scroll-tied behavior — section is bombproof.
   ─────────────────────────────────────────────────────────────────────── */

.earned {
  position: relative;
  padding: 120px 0 140px;
  contain: layout paint;
}

.earned-header {
  margin: 0 0 64px;
  padding: 0 7vw;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1400px;
}

.earned-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--chart);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.earned-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 2.6vw, 40px);
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 24px;
}

.earned-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: var(--silver-bright);
  line-height: 1.6;
  max-width: 460px;
  margin: 0;
}

/* ─── Marquee container ─── */
.earned-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0, #000 8%, #000 92%, transparent 100%);
}

.earned-track {
  display: flex;
  gap: 24px;
  animation: earned-scroll 50s linear infinite;
  width: max-content;
  align-items: center;
  /* GPU promotion: smooth scroll on mobile, no flicker on desktop */
  will-change: transform;
  transform: translateZ(0);
}

@keyframes earned-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 12px), 0, 0); }
}

.earned-track:hover { animation-play-state: paused; }

/* ─── Photo-quote tile (V5 treatment: cinematic backdrop, bottom-anchor) ─── */
.earned-pq {
  flex-shrink: 0;
  height: clamp(280px, 30vw, 420px);
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  background: var(--mid);
  margin: 0;
}

.earned-pq-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.earned-pq-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,0)   35%,
    rgba(0,0,0,.45) 75%,
    rgba(0,0,0,.65) 100%);
  pointer-events: none;
}

.earned-pq-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 6% 6%;
  margin: 0;
}

.earned-pq-quote {
  color: var(--white);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.3;
  letter-spacing: -.005em;
  max-width: 78%;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  margin: 0;
}

.earned-pq-attr {
  margin-top: 10px;
  color: var(--silver-bright);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(11px, .82vw, 13px);
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
.earned-pq-attr b { color: var(--white); }

/* ─── Press clipping (matched height to photo-quotes, no tilt) ─── */
.earned-clip {
  flex-shrink: 0;
  height: clamp(280px, 30vw, 420px);
  aspect-ratio: 5/6;
  position: relative;
  background: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  overflow: hidden;
  margin: 0;
}
.earned-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .earned-track {
    animation: none;
    transform: none;
  }
}

/* ─── Tablet ─── */
@media (max-width: 1100px) {
  .earned { padding: 100px 0 110px; }
  .earned-header {
    padding: 0 6vw;
    margin-bottom: 48px;
  }
  .earned-pq,
  .earned-clip { height: clamp(260px, 38vw, 360px); }
  .earned-track { animation-duration: 42s; }
}

/* ─── Mobile ─── */
@media (max-width: 760px) {
  .earned { padding: 80px 0 90px; }
  .earned-header {
    padding: 0 6vw;
    margin-bottom: 40px;
  }
  .earned-pq,
  .earned-clip { height: 60vw; }
  .earned-pq-quote {
    font-size: 15px;
    line-height: 1.32;
    max-width: 88%;
  }
  .earned-pq-attr { font-size: 11px; }
  .earned-pq-content { padding: 0 5% 6%; }
  .earned-track {
    animation-duration: 35s;
    gap: 16px;
  }
}

/* ─── Touch devices: hover-pause is meaningless, disable it ─── */
@media (hover: none) {
  .earned-track:hover { animation-play-state: running; }
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 RECIPES — In-flight Experience
   ═══════════════════════════════════════════════════════════════════════
   Integrated 2026-04-25 from _wip-visit-mum-s8-B-relaid-r4 specimen.
   (Section was previously §8; renumbered after §7 CRM was cut.)
   Two-column: left copy, right two-panel pair (card + announcement, butted).
   ═══════════════════════════════════════════════════════════════════════ */

.s7__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: start;
}

.s7__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 24px;
}

.s7__eyebrow {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--chart);
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  animation: s7FadeUp 0.7s ease 0.1s forwards;
}

.s7__headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 200;
  color: var(--white);
  line-height: 1.25;
  opacity: 0;
  animation: s7FadeUp 0.8s ease 0.25s forwards;
}

.s7__body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 300;
  color: var(--silver-bright);
  line-height: 1.7;
  opacity: 0;
  animation: s7FadeUp 0.8s ease 0.4s forwards;
}

.s7__body--punch {
  margin-top: 8px;
  animation: s7FadeUp 0.8s ease 0.55s forwards;
}

.s7__pair {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  align-items: stretch;
}

.s7__panel {
  background: var(--mid);
  overflow: hidden;
  position: relative;
  opacity: 0;
}
.s7__panel:nth-child(1) { animation: s7FadeUp 0.9s ease 0.5s forwards; }
.s7__panel:nth-child(2) { animation: s7FadeUp 0.9s ease 0.7s forwards; }

.s7__panel img {
  width: 100%;
  height: 100%;
  display: block;
}

.s7__panel--announcement {
  aspect-ratio: 9/16;
}
.s7__panel--announcement img {
  object-fit: cover;
  object-position: left center;
}

.s7__panel--card img {
  object-fit: cover;
  object-position: 70% center;
}

@keyframes s7FadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .s7__eyebrow, .s7__headline, .s7__body, .s7__panel {
    animation: none;
    opacity: 1;
  }
}
@media (max-width: 1100px) {
  .s7__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .s7__copy {
    padding-top: 0;
  }
}
@media (max-width: 760px) {
  .s7__pair {
    grid-template-columns: 1fr;
  }
  .s7__panel--card {
    aspect-ratio: 4/3;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 RECOGNITION — Awards grid
   ═══════════════════════════════════════════════════════════════════════
   Integrated 2026-04-25 from _wip-visit-mum-s9-recognition-r4 specimen.
   (Section was previously §9; renumbered after §7 CRM was cut.)
   12-cell grid (6×2 desktop), tier label chartreuse, show name Bebas white.
   No intro copy — eyebrow + grid only.
   ═══════════════════════════════════════════════════════════════════════ */

/* §8 sits closer to §7 above — Recognition is data, doesn't need
   120px breathing room when §7 above it has done the storytelling. */
.s8-section {
  padding-top: 80px;
}

.s8__eyebrow {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--chart);
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  animation: s8FadeUp 0.7s ease 0.1s forwards;
}

.s8__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--mid);
  border-left: 1px solid var(--mid);
}

.s8__cell {
  border-right: 1px solid var(--mid);
  border-bottom: 1px solid var(--mid);
  padding: 32px 28px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
}
.s8__cell:nth-child(1)  { animation: s8FadeUp 0.6s ease 0.25s forwards; }
.s8__cell:nth-child(2)  { animation: s8FadeUp 0.6s ease 0.32s forwards; }
.s8__cell:nth-child(3)  { animation: s8FadeUp 0.6s ease 0.39s forwards; }
.s8__cell:nth-child(4)  { animation: s8FadeUp 0.6s ease 0.46s forwards; }
.s8__cell:nth-child(5)  { animation: s8FadeUp 0.6s ease 0.53s forwards; }
.s8__cell:nth-child(6)  { animation: s8FadeUp 0.6s ease 0.60s forwards; }
.s8__cell:nth-child(7)  { animation: s8FadeUp 0.6s ease 0.67s forwards; }
.s8__cell:nth-child(8)  { animation: s8FadeUp 0.6s ease 0.74s forwards; }
.s8__cell:nth-child(9)  { animation: s8FadeUp 0.6s ease 0.81s forwards; }
.s8__cell:nth-child(10) { animation: s8FadeUp 0.6s ease 0.88s forwards; }
.s8__cell:nth-child(11) { animation: s8FadeUp 0.6s ease 0.95s forwards; }
.s8__cell:nth-child(12) { animation: s8FadeUp 0.6s ease 1.02s forwards; }

.s8__tier {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--chart);
  text-transform: uppercase;
  letter-spacing: .25em;
  line-height: 1;
}

.s8__show {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: 400;
  color: var(--white);
  letter-spacing: .04em;
  line-height: 1;
  margin-top: 12px;
}

.s8__category {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: 1.4;
  margin-top: auto;
}

@keyframes s8FadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .s8__eyebrow, .s8__cell {
    animation: none;
    opacity: 1;
  }
}
@media (max-width: 1100px) {
  .s8__grid { grid-template-columns: repeat(2, 1fr); }
  .s8__cell { min-height: 160px; padding: 28px 24px; }
  .s8__show { font-size: clamp(26px, 3vw, 32px); }
}
@media (max-width: 600px) {
  .s8__grid { grid-template-columns: 1fr; }
  .s8__cell { min-height: 140px; padding: 24px 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 NEXT BAR — Case study navigation
   ═══════════════════════════════════════════════════════════════════════
   Integrated 2026-04-25 from _wip-visit-mum-s9-nextbar-r1 specimen.
   Tight band: 48px top / 80px bottom. No border.
   Left: ← All Work. Right: Next: BA Ungrounded →
   ═══════════════════════════════════════════════════════════════════════ */

.s9 {
  width: 100%;
  padding: 48px 7vw 80px;
}

.s9__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  opacity: 0;
  animation: s9FadeUp 0.7s ease 0.1s forwards;
}

.s9__link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: .18em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 4px;
  transition: color 0.25s ease;
  white-space: nowrap;
}
.s9__link:hover,
.s9__link:focus-visible {
  color: var(--white);
}
.s9__link:focus-visible {
  outline: 1px solid var(--chart);
  outline-offset: 6px;
}
.s9__link--next { color: var(--chart); }
.s9__link--next:hover { color: var(--chart-hot); }

.s9__arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
}
.s9__link--prev:hover .s9__arrow,
.s9__link--prev:focus-visible .s9__arrow {
  transform: translateX(-4px);
}
.s9__link--next:hover .s9__arrow,
.s9__link--next:focus-visible .s9__arrow {
  transform: translateX(4px);
}

.s9__prefix {
  color: var(--silver);
  opacity: 0.7;
  margin-right: 4px;
}
.s9__link:hover .s9__prefix,
.s9__link:focus-visible .s9__prefix {
  opacity: 1;
}

@keyframes s9FadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .s9__inner { animation: none; opacity: 1; }
  .s9__link, .s9__arrow, .s9__prefix { transition: none; }
}
@media (max-width: 760px) {
  .s9__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}