/* ============================================
   Phil Dangerfield · Portfolio
   Design direction: Professional, but cheeky.
   Does-first, asks-forgiveness-later energy.
   Dark mode: near-black + violet glow, Pally-inspired.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --paper: #0B0C11;       /* page background, near-black and cool */
  --paper-dim: #15161D;   /* raised panel background */
  --ink: #F4F4F7;         /* primary text / light surfaces */
  --ink-soft: #9A9AA6;    /* secondary / muted text */
  --line: #24252E;        /* hairline borders */
  --accent: #7C5CFF;      /* electric violet, confident and a little cheeky */
  --accent-soft: #211A45; /* dark violet tint, for badges & soft fills */
  --pop: #9B8CFF;         /* lighter violet, sparing use only (dots/highlights) */
  --white: #FFFFFF;

  --mint: #3EEFB0;        /* ambient hero glow, swapped in for Discord's blue */
  --mint-soft: #123028;   /* deep mint-black, for the hero background blend */

  --serif: 'Space Grotesk', 'Inter', sans-serif; /* kept var name for compatibility w/ case study pages */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --max: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Type ---------- */
h1, h2, h3, h4{
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.eyebrow{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,12,17,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.wordmark{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
}

.wordmark img{
  height: 34px;
  width: auto;
  display: block;
}

.site-nav{
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
}

.site-nav a{
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color .15s ease;
}
.site-nav a:hover{ color: var(--ink); }

.site-nav a.btn{
  color: var(--paper);
  background: var(--ink);
  padding: 0.55rem 1.2rem;
  border-radius: 100px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.site-nav a.btn:hover{ background: var(--accent); color: var(--white); }

/* ---------- Hero ---------- */
.hero{
  padding: clamp(3.5rem, 9vw, 7.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.hero h1{
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  margin-top: 0.75rem;
}

.hero h1 em{
  font-style: italic;
  color: var(--accent);
}

.hero-side{
  border-left: 2px solid var(--ink);
  padding-left: 1.5rem;
}

.hero-side p{
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.stat-row{
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  flex-wrap: wrap;
}

.stat{
  font-family: var(--serif);
}

.stat .num{
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 600;
  display: block;
}

.stat .label{
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Section headings ---------- */
.section-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  gap: 1rem;
}

.section-head h2{
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.section{
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.section.border-t{ border-top: 1px solid var(--line); }
.section.tint{ background: var(--paper-dim); }

/* ---------- Case study cards (home) ---------- */
.case-list{
  display: flex;
  flex-direction: column;
}

.case-card{
  display: grid;
  grid-template-columns: 90px 1fr 1.1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--line);
  transition: opacity .2s ease;
}
.case-list .case-card:last-child{ border-bottom: 1px solid var(--line); }

.case-card:hover{ opacity: 0.72; }

.case-index{
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-soft);
}

.case-thumb{
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(150deg, var(--paper-dim) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.case-thumb img{ width: 100%; height: 100%; object-fit: cover; }

.case-body h3{
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 0.5rem;
}

.case-body .case-meta{
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

.case-body p{
  color: var(--ink-soft);
  max-width: 52ch;
}

.case-tags{
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}
.case-tags span{
  font-size: 0.72rem;
  border: 1px solid var(--line);
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  color: var(--ink-soft);
}

/* ---------- Archive grid (more work page) ---------- */
.archive-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
}

.archive-card{
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

.archive-thumb{
  aspect-ratio: 4/3;
  background: linear-gradient(150deg, var(--paper-dim) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--line);
  margin-bottom: 1rem;
  overflow: hidden;
}
.archive-thumb img{ width: 100%; height: 100%; object-fit: cover; }

.archive-card h4{
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}
.archive-card .yr{
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.archive-notice{
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  font-size: 0.95rem;
  color: var(--ink);
  max-width: 60ch;
}

a.archive-card{ cursor: pointer; }
div.archive-card{ cursor: default; }

/* ---------- Bio ---------- */
.bio-grid{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.bio-photo{
  aspect-ratio: 4/5;
  background: linear-gradient(150deg, var(--paper-dim) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.bio-photo img{ width:100%; height:100%; object-fit: cover; }

.bio-copy p{ margin-bottom: 1rem; max-width: 62ch; color: var(--ink-soft); }
.bio-copy p:first-child{ color: var(--ink); font-size: 1.1rem; }

.logo-strip{
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.logo-strip span{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.footer-grid{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-grid h3{
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  max-width: 14ch;
}
.footer-links{ display: flex; gap: 1.75rem; flex-wrap: wrap; }
.footer-links a{ font-size: 0.9rem; color: var(--ink-soft); }
.footer-links a:hover{ color: var(--accent); }
.footer-meta{
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Case study page ---------- */
.cs-hero{
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3rem);
}
.cs-hero .eyebrow{ margin-bottom: 0.9rem; display:block; }
.cs-hero h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 18ch; }
.cs-hero .lede{ margin-top: 1.25rem; max-width: 58ch; font-size: 1.15rem; }
.cs-hero .lede + .lede{ margin-top: 0.75rem; }

.cs-meta-row{
  display: flex;
  gap: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--line);
}
.cs-meta-row div{ min-width: 130px; }
.cs-meta-row .k{
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.cs-meta-row .v{ font-family: var(--serif); font-size: 1.05rem; font-weight: 500; }

.cs-hero-image{
  margin-top: clamp(2.5rem, 6vw, 4rem);
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #14121f 0%, #241a52 60%, var(--accent) 140%);
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.cs-hero-image img{ width: 100%; height: 100%; object-fit: cover; }

.cs-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-bottom: 1px solid var(--line);
}
.cs-stats .stat .num{ color: var(--accent); }

.cs-block{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-bottom: 1px solid var(--line);
}
.cs-block.reverse{ direction: rtl; }
.cs-block.reverse > *{ direction: ltr; }
.cs-block .cs-block-label{ align-self: start; position: sticky; top: 100px; }
.cs-block h3{ font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.cs-block p{ color: var(--ink-soft); margin-bottom: 1rem; max-width: 60ch; }
.cs-block p:last-child{ margin-bottom: 0; }
.cs-block blockquote, .cs-moment-body blockquote{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  margin: 1.25rem 0;
}

.cs-image-row{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.cs-image-row img, .cs-block-visual img{
  border-radius: 3px;
  border: 1px solid var(--line);
}
.cs-image-row.single{ grid-template-columns: 1fr; }

/* ---- Case study z-pattern blocks (image + text, alternating sides) ----
   Same alternation mechanic as the home page's .moment cards, but sized for
   real 16:9 product screenshots instead of the home page's 4:3 thumbnails. */
.cs-moment{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.cs-moment:nth-child(even){ direction: rtl; }
.cs-moment:nth-child(even) > *{ direction: ltr; }

.cs-moment-media{
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--paper-dim) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--line);
}
.cs-moment-media img{ width:100%; height:100%; object-fit: cover; }
.cs-moment-media:has(.placeholder-note){
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.cs-moment-body .eyebrow{ display: block; margin-bottom: 0.9rem; }
.cs-moment-body h3{ font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.cs-moment-body p{ color: var(--ink-soft); margin-bottom: 1rem; max-width: 58ch; }
.cs-moment-body p:last-child{ margin-bottom: 0; }

.cs-takeaways{
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.cs-takeaways ol{
  list-style: none;
  counter-reset: tk;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.cs-takeaways li{
  counter-increment: tk;
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
}
.cs-takeaways li::before{
  content: counter(tk, decimal-leading-zero);
  font-family: var(--serif);
  color: var(--accent);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.5rem;
}
.cs-takeaways li p{ color: var(--ink-soft); }

.cs-next{
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.cs-next .eyebrow{ display:block; margin-bottom: 0.5rem; }
.cs-next h3{ font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cs-next a.site-nav.btn{ border-radius: 100px; }

.placeholder-note{
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  padding: 0.6rem 0.9rem;
  border-radius: 3px;
  margin-top: 0.75rem;
}

/* ============================================
   New homepage: meta-case-study format
   ============================================ */

.accent{ color: var(--accent); }

.pill{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
}
.pill.pop{ background: var(--accent); color: var(--white); }
.pill.outline{ background: transparent; color: var(--ink); border: 1.5px solid var(--line); }

/* Overlapping decorative glow shapes */
.blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.blob-1{
  width: 46vw; height: 46vw;
  max-width: 640px; max-height: 640px;
  top: -10%; left: 8%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
}
.blob-2{
  width: 38vw; height: 38vw;
  max-width: 520px; max-height: 520px;
  top: 10%; right: -6%;
  background: radial-gradient(circle, var(--mint) 0%, transparent 70%);
  opacity: 0.4;
}

/* Faint dot-grid texture behind the hero */
.hero2::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 85%);
  pointer-events: none;
}

/* ---- Ambient zone ----
   Wraps hero through the deep-dive CTA so the Discord-style mint/violet
   backdrop reads as one continuous canvas instead of resetting at every
   section boundary. Ends before the bio section, which has its own
   opaque tint. */
.ambient-zone{
  position: relative;
  z-index: 0; /* establish a stacking context so .page-stars' negative
                 z-index stays contained here instead of escaping behind
                 body's own opaque background */
  overflow: hidden;
  background:
    radial-gradient(65% 22% at 88% 1%, rgba(62,239,176,0.30) 0%, transparent 60%),
    radial-gradient(55% 20% at 6% -2%, rgba(124,92,255,0.32) 0%, transparent 60%),
    radial-gradient(55% 20% at 38% 46%, rgba(124,92,255,0.16) 0%, transparent 65%),
    radial-gradient(55% 20% at 88% 80%, rgba(62,239,176,0.20) 0%, transparent 65%),
    linear-gradient(180deg, #0B0C11 0%, #0D1420 20%, #0A1613 42%, #0F1420 62%, #0A1613 82%, #0B0C11 100%);
}

/* ---- New hero ---- */
.hero2{
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem) 0 0;
}
.hero2 .wrap{ position: relative; z-index: 2; }
.hero2 h1{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.hero2 .hero-sub{
  margin-top: 1rem;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero2 .hero-sub strong{ color: var(--ink); }

/* ---- Ambient dotted grid (static backdrop texture behind the ambient zone) ----
   Spans the whole ambient-zone (hero through the moments), same footprint as
   the mint/violet background. Replaces the old JS-generated starfield with a
   single CSS dot-grid whose mask fades it in and out in bands as you scroll,
   so it reads in some areas and disappears in others rather than sitting at
   one flat opacity the whole way down. */
.page-stars{
  position: absolute;
  inset: 0;
  z-index: -1; /* behind every sibling in .ambient-zone, positioned or not */
  overflow: hidden;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,0.9) 9%, rgba(0,0,0,0.9) 30%, transparent 45%,
    transparent 58%, rgba(0,0,0,0.85) 72%, rgba(0,0,0,0.85) 88%, transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,0.9) 9%, rgba(0,0,0,0.9) 30%, transparent 45%,
    transparent 58%, rgba(0,0,0,0.85) 72%, rgba(0,0,0,0.85) 88%, transparent 100%);
}

.hero-cta-row{
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.btn-solid{
  background: var(--accent);
  color: var(--white);
  padding: 0.9rem 1.6rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-block;
  box-shadow: 0 8px 30px -8px rgba(124,92,255,0.55);
}
.btn-ghost{
  padding: 0.9rem 1.6rem;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-block;
  color: var(--ink);
}

/* ---- Hero video/proof block ---- */
.hero-media{
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(120deg, #0B0C11 0%, #2A1F6B 55%, var(--accent) 130%);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-media .play-badge{
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--paper);
}
.hero-media .hm-caption{
  position: absolute;
  bottom: 1.25rem; left: 1.5rem;
  color: var(--white);
  font-size: 0.85rem;
  opacity: 0.85;
}
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit: cover; position:absolute; inset:0; }

/* ---- Proof strip (stat marquee) ---- */
.proof-strip{
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(2rem, 5vw, 3rem) 0;
  margin-top: clamp(3rem, 7vw, 5rem);
  background: rgba(0,0,0,0.15);
}
.proof-strip .wrap{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.proof-item .num{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  color: var(--accent);
  display: block;
  line-height: 1;
}
.proof-item .lbl{
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

/* ---- Moment cards (meta-case-study) ---- */
.moments-head{
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}
.moments-head h2{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  max-width: 18ch;
}
.moments-head p{ margin-top: 1rem; color: var(--ink-soft); max-width: 56ch; font-size: 1.05rem; }

.moment{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.moment:nth-child(even){ direction: rtl; }
.moment:nth-child(even) > *{ direction: ltr; }
.moment:first-child{ border-top: none; }

.moment-media{
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--paper-dim) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--line);
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.8s ease;
}

/* Hover anywhere on the card (not just the image) triggers the glow + grow */
.moment:hover .moment-media{
  transform: scale(1.056);
  box-shadow:
    0 0 20px 3px rgba(124,92,255,0.29),
    0 0 45px 10px rgba(62,239,176,0.14);
}
.moment-media img{ width:100%; height:100%; object-fit:cover; }

.moment-body .pill{ margin-bottom: 1rem; }
.moment-body h3{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  margin-bottom: 0.9rem;
  letter-spacing: -0.01em;
}
.moment-body p{ color: var(--ink-soft); margin-bottom: 0.9rem; max-width: 54ch; }
.moment-body .moment-stat{
  font-family: var(--serif);
  font-weight: 700;
  color: var(--accent);
  font-size: 1.1rem;
}

/* ---- Deep-dive CTA (link to full case studies, placed low) ---- */
.deep-dive{
  background: radial-gradient(120% 160% at 12% 0%, #2a1f6b 0%, #100e1a 55%);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: clamp(3rem, 7vw, 5rem) auto;
  padding: clamp(2.5rem, 6vw, 4rem);
  position: relative;
  overflow: hidden;
}
.deep-dive h3{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  max-width: 20ch;
  margin-bottom: 0.75rem;
}
.deep-dive p{ color: #C9C6E0; max-width: 50ch; margin-bottom: 1.75rem; }
.deep-dive-links{ display: flex; gap: 1rem; flex-wrap: wrap; }
.deep-dive-links a{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0.7rem 1.2rem;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 500;
}
.deep-dive-links a:hover{ background: var(--pop); color: var(--paper); border-color: var(--pop); }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .moment, .moment:nth-child(even),
  .cs-moment, .cs-moment:nth-child(even){ grid-template-columns: 1fr; direction: ltr; }
  .proof-strip .wrap{ grid-template-columns: repeat(2, 1fr); }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-side{ border-left: none; border-top: 2px solid var(--ink); padding-left: 0; padding-top: 1.25rem; }
  .case-card{ grid-template-columns: 1fr; }
  .case-index{ display: none; }
  .bio-grid{ grid-template-columns: 1fr; }
  .bio-photo{ max-width: 220px; }
  .cs-block{ grid-template-columns: 1fr; }
  .cs-block.reverse{ direction: ltr; }
  .cs-image-row{ grid-template-columns: 1fr; }
  .site-nav a:not(.btn){ display: none; }
  .blob{ opacity: 0.3; }
}