/* ============================================================
   PROJECT DETAIL PAGES (UNIFIED v3)
   Dark throughout. Project color used as small accent.
   ============================================================ */

.project-hero{
  padding: 120px 0 32px;
  position: relative;
  overflow: hidden;
}
/* coral glow at top right of every project hero (replaces per-project gradients) */
.project-hero::before{
  content: "";
  position: absolute;
  top: -150px; right: -150px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--coral-glow), transparent 60%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.project-hero > *{ position: relative; z-index: 1; }

.project-back{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 24px;
  transition: all .3s var(--ease-out);
}
.project-back:hover{ color: var(--coral); transform: translateX(-4px); }

.project-meta-line{
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 22px;
}
.project-meta-line .live-badge{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--coral);
  color: #fff;
  padding: 5px 12px; border-radius: 999px;
  font-weight: 500;
}
.project-meta-line .live-badge::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  animation: pulse 1.6s ease-in-out infinite;
}
.project-meta-line .pill{
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-coral);
  background: var(--bg-3);
}

.project-title{
  font-size: clamp(44px, 7.5vw, 110px);
  margin: 0;
  line-height: 0.95;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.project-title em{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--coral);
  letter-spacing: -0.02em;
}

.project-tagline{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-dim);
  margin: 16px 0 0;
  max-width: 640px;
  line-height: 1.45;
}

/* ============================================================
   BRIEF / CONTENT
   ============================================================ */
.project-content{
  padding: 56px 0;
  background: var(--bg-2);
}
.brief-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}
.brief-block{ margin-bottom: 32px; }
.brief-block:last-child{ margin-bottom: 0;}
.brief-block h3{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 14px;
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-coral);
  display: flex; align-items: center; gap: 8px;
}
.brief-block h3::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 8px var(--coral);
}
.brief-block p{
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 600px;
}
.brief-block p:last-child{ margin-bottom: 0; }
.brief-block p strong{ color: var(--ink); font-weight: 600;}

/* Tools pills */
.tools-pills{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.tools-pills .pill{
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-coral);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: all .25s var(--ease-out);
  background: var(--bg-3);
  font-weight: 500;
}
.tools-pills .pill:hover{
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
  transform: translateY(-2px);
}

/* Approach numbered list */
.approach-list{
  list-style: none; padding: 0; margin: 12px 0 0;
}
.approach-list li{
  display: flex; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-dim);
  line-height: 1.55;
}
.approach-list li:last-child{ border-bottom: none; }
.approach-list li .arrow{
  color: var(--coral);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  flex-shrink: 0;
  font-size: 18px;
}
.approach-list li strong{ color: var(--ink); font-weight: 600; }

/* Deliverables sidebar */
.deliverables{
  padding: 24px;
  border: 1px solid var(--line-coral);
  border-radius: var(--radius);
  background: var(--bg-3);
  position: sticky;
  top: 90px;
}
.deliverables h4{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 16px;
  font-weight: 500;
}
.deliverables ul{
  list-style: none; padding: 0; margin: 0;
}
.deliverables li{
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.deliverables li:last-child{ border-bottom: none; }
.deliverables li .count{
  font-family: var(--display);
  font-style: italic;
  color: var(--coral);
  font-size: 22px;
  font-weight: 600;
}

.campaign-card{
  margin-top: 16px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--coral);
  color: #fff;
  position: relative;
}
.campaign-card .lab{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}
.campaign-card h5{
  font-family: var(--display);
  font-size: 28px;
  margin: 0 0 4px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.campaign-card h5 em{
  font-family: var(--serif); font-style: italic;
  color: var(--bg); font-weight: 400;
}
.campaign-card p{
  font-family: var(--serif);
  font-style: italic;
  color: rgba(255,255,255,0.92);
  margin: 0;
  font-size: 16px;
}

.cta-deck-link{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bg-2);
  color: var(--ink);
  padding: 13px 20px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all .3s var(--ease-out);
  margin-top: 14px;
  width: 100%;
  border: 1px solid var(--line-coral);
}
.cta-deck-link:hover{
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
  transform: translateY(-2px);
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-section{
  padding: 56px 0;
  background: var(--bg);
}
.gallery-head{
  margin-bottom: 22px;
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.gallery-head h3{
  font-family: var(--display);
  font-size: clamp(32px, 4.5vw, 56px);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.gallery-head h3 em{
  font-family: var(--serif); font-style: italic;
  color: var(--coral); font-weight: 400;
}

/* Static image grid */
.media-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
.media-grid.two-col{
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
}
.media-grid.three-col{
  grid-template-columns: repeat(3, 1fr);
  max-width: 800px;
}
.media-item{
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line-coral);
  position: relative;
  aspect-ratio: 9/16;
  transition: transform .4s var(--ease-out), border-color .35s ease;
}
.media-item.square{ aspect-ratio: 1/1; }
.media-item:hover{
  transform: translateY(-4px);
  border-color: var(--line-coral-strong);
}
.media-item.video-16-9{ aspect-ratio: 16/9; }
.media-item img, .media-item video{
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.media-caption{
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(14,14,18,0.85);
  backdrop-filter: blur(8px);
  color: var(--ink);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line-coral);
}

/* Caption shown above a reel */
.reel-caption{
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-dim);
  line-height: 1.5;
  max-width: 640px;
  margin: 0 0 22px;
}

/* Vertical reel grid (for Nori, UrbanSpace) */
.reel-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 320px));
  gap: 14px;
  justify-content: center;
}
.reel-item{
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-coral);
  aspect-ratio: 9/16;
  position: relative;
  transition: transform .4s var(--ease-out), border-color .35s ease;
}
.reel-item:hover{
  transform: translateY(-4px);
  border-color: var(--line-coral-strong);
}
.reel-item video{
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* Horizontal video grid (for JoySpoon — 16:9) */
.video-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.video-item{
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-coral);
  aspect-ratio: 16/9;
  position: relative;
  transition: transform .4s var(--ease-out), border-color .35s ease;
}
.video-item:hover{
  transform: translateY(-4px);
  border-color: var(--line-coral-strong);
}
.video-item video{
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* ============================================================
   NEXT PROJECT NAV
   ============================================================ */
.next-section{
  padding: 56px 0 48px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.next-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.next-card{
  padding: 28px;
  border: 1px solid var(--line-coral);
  border-radius: var(--radius);
  background: var(--bg-3);
  transition: all .35s var(--ease-out);
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  overflow: hidden;
}
.next-card::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, var(--coral-glow), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
}
.next-card:hover::before{ opacity: 1; }
.next-card:hover{
  transform: translateY(-3px);
  border-color: var(--line-coral-strong);
  background: var(--bg-4);
}
.next-card > *{ position: relative; z-index: 1;}
.next-card .lab{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--coral);
}
.next-card h4{
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 44px);
  margin: 0;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.next-card h4 em{
  font-family: var(--serif); font-style: italic;
  color: var(--coral); font-weight: 400;
}
.next-card .arrow-line{
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.next-card.next-prev{ text-align: left;}
.next-card.next-next{ text-align: right;}

/* Responsive */
@media (max-width: 900px){
  .brief-grid{ grid-template-columns: 1fr; gap: 32px; }
  .deliverables{ position: static; }
  .media-grid, .media-grid.three-col, .video-grid{ grid-template-columns: 1fr; }
  .reel-grid{ grid-template-columns: 1fr; max-width: 320px; margin: 0 auto;}
  .next-grid{ grid-template-columns: 1fr; }
  .next-card.next-next{ text-align: left;}
  .project-hero{ padding: 100px 0 24px; }
  .project-content, .gallery-section, .next-section{ padding: 44px 0; }
}

/* ============================================================
   NORI HERO — LIVELY (project's pink moment)
   ============================================================ */
:root{
  --nori-pink: #FF3D8B;
  --nori-pink-glow: rgba(255, 61, 139, 0.22);
}

.nori-hero{
  padding-bottom: 64px;
}
.nori-hero::before{
  background: radial-gradient(circle, var(--nori-pink-glow), transparent 60%);
}

.nori-hero-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 28px;
  position: relative;
}
.nori-hero-text .feature-pills{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 20px 0;
}
.nori-hero-text .feature-pills .pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 61, 139, 0.25);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--bg-3);
}
.nori-hero-text p{
  font-size: 16px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 16px 0 0;
  max-width: 540px;
}
.nori-visit-btn{
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px;
  background: var(--nori-pink);
  color: #fff;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all .3s var(--ease-out);
  box-shadow: 0 8px 30px rgba(255, 61, 139, 0.3);
}
.nori-visit-btn:hover{
  background: #fff; color: var(--nori-pink);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255, 61, 139, 0.5);
}

/* Phone mockup wrapper — adds glow halo + floating stickers */
.phone-wrap{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}
.phone-wrap::before{
  content: "";
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--nori-pink-glow), transparent 65%);
  filter: blur(50px);
  z-index: 0;
  animation: halo-pulse 4s ease-in-out infinite;
}
@keyframes halo-pulse{
  0%,100%{ transform: scale(1); opacity: 0.8; }
  50%{ transform: scale(1.08); opacity: 1; }
}
.phone-mockup{
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9/19;
  background: linear-gradient(180deg, #FF8A6B 0%, var(--nori-pink) 50%, #B847C4 100%);
  border-radius: 36px;
  padding: 14px;
  box-shadow: 0 30px 80px rgba(233, 75, 139, 0.45),
              inset 0 0 0 2px rgba(255,255,255,0.12);
  z-index: 1;
  animation: phone-breathe 6s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
@keyframes phone-breathe{
  0%,100%{ transform: translateY(0) rotate(-1deg); }
  50%{ transform: translateY(-8px) rotate(1deg); }
}
.phone-mockup::before{
  content: "";
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 88px; height: 18px;
  background: #111;
  border-radius: 12px;
  z-index: 3;
}
.phone-screen{
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #FF8A6B 0%, var(--nori-pink) 60%, #B847C4 100%);
  display: flex; flex-direction: column;
  padding: 32px 14px 14px;
  text-align: center;
  position: relative;
  isolation: isolate;
}
.phone-screen::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.10), transparent 50%);
  z-index: 0;
  pointer-events: none;
}
.phone-screen > *{ position: relative; z-index: 1; }

.phone-handle{
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.phone-handle em{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

/* Animated ring + N centerpiece */
.phone-centerpiece{
  position: relative;
  width: 92px; height: 92px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
}
.cp-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  border-top-color: rgba(255,255,255,1);
  animation: ring-spin 5s linear infinite;
}
.cp-ring::before{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.32);
  animation: ring-spin 8s linear infinite reverse;
}
@keyframes ring-spin{
  to{ transform: rotate(360deg); }
}
.cp-mark{
  font-family: var(--serif);
  font-style: italic;
  font-size: 50px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255,255,255,0.6);
  animation: mark-float 3s ease-in-out infinite;
}
@keyframes mark-float{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-2px) scale(1.04); }
}
.cp-tag{
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.92);
  color: var(--nori-pink);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

/* 3x3 post grid */
.phone-postgrid{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  align-content: end;
}
.post-tile{
  aspect-ratio: 1;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 20px;
  color: #fff;
  font-weight: 400;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.16);
  transition: all .3s var(--ease-out);
  animation: tile-shimmer 4s ease-in-out infinite;
}
.post-tile span{
  display: block;
  animation: tile-spin 6s ease-in-out infinite;
}
.post-tile:hover{ background: rgba(255,255,255,0.32); transform: scale(1.06);}
.post-tile.p1{ animation-delay: 0s; background: rgba(255,138,107,0.45); }
.post-tile.p2{ animation-delay: 0.2s; background: rgba(255,255,255,0.20); }
.post-tile.p3{ animation-delay: 0.4s; background: rgba(184,71,196,0.45); }
.post-tile.p4{ animation-delay: 0.6s; background: rgba(255,255,255,0.18); }
.post-tile.p5{
  animation-delay: 0.8s;
  background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,138,107,0.5));
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 600;
}
.post-tile.p6{ animation-delay: 1.0s; background: rgba(255,138,107,0.30); }
.post-tile.p7{ animation-delay: 1.2s; background: rgba(255,255,255,0.22); }
.post-tile.p8{ animation-delay: 1.4s; background: rgba(184,71,196,0.30); }
.post-tile.p9{ animation-delay: 1.6s; background: rgba(255,255,255,0.16); }

@keyframes tile-shimmer{
  0%,100%{ box-shadow: 0 0 0 rgba(255,255,255,0); }
  50%{ box-shadow: 0 0 12px rgba(255,255,255,0.4); }
}
@keyframes tile-spin{
  0%, 90%, 100%{ transform: rotate(0); }
  45%, 55%{ transform: rotate(8deg) scale(1.1); }
}

/* Floating sparkles around the phone */
.sparkle{
  position: absolute;
  z-index: 2;
  font-family: var(--serif);
  color: var(--coral);
  text-shadow: 0 0 10px rgba(255, 77, 46, 0.6);
  pointer-events: none;
  user-select: none;
}
.sp-1{ top: 12%; left: 8%; font-size: 22px; color: #FFD93D; text-shadow: 0 0 12px rgba(255,217,61,0.6); animation: sparkle-1 3.5s ease-in-out infinite; }
.sp-2{ top: 36%; right: 4%; font-size: 16px; animation: sparkle-2 4s ease-in-out infinite 0.4s; }
.sp-3{ bottom: 30%; left: 4%; font-size: 18px; color: var(--nori-pink); text-shadow: 0 0 10px rgba(255,61,139,0.6); animation: sparkle-3 4.2s ease-in-out infinite 0.8s; }
.sp-4{ top: 8%; right: 22%; font-size: 14px; color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.6); animation: sparkle-4 5s ease-in-out infinite 1.2s; }
.sp-5{ bottom: 8%; left: 20%; font-size: 20px; color: var(--coral); animation: sparkle-5 3.8s ease-in-out infinite 0.2s;}
.sp-6{ top: 60%; right: 8%; font-size: 14px; color: #FFD93D; text-shadow: 0 0 10px rgba(255,217,61,0.5); animation: sparkle-6 4.5s ease-in-out infinite 1.5s; }

@keyframes sparkle-1{
  0%,100%{ transform: scale(1) rotate(0); opacity: 0.9;}
  50%{ transform: scale(1.4) rotate(180deg); opacity: 1;}
}
@keyframes sparkle-2{
  0%,100%{ transform: scale(0.8) rotate(0); opacity: 0.7;}
  50%{ transform: scale(1.2) rotate(-180deg); opacity: 1;}
}
@keyframes sparkle-3{
  0%,100%{ transform: translateY(0) scale(1); opacity: 0.8;}
  50%{ transform: translateY(-8px) scale(1.3); opacity: 1;}
}
@keyframes sparkle-4{
  0%,100%{ transform: scale(1) rotate(0); opacity: 0.6;}
  50%{ transform: scale(1.5) rotate(120deg); opacity: 1;}
}
@keyframes sparkle-5{
  0%,100%{ transform: translateX(0) scale(1); opacity: 0.85;}
  50%{ transform: translateX(4px) scale(1.25); opacity: 1;}
}
@keyframes sparkle-6{
  0%,100%{ transform: scale(0.9) rotate(0); opacity: 0.7;}
  50%{ transform: scale(1.3) rotate(-90deg); opacity: 1;}
}

/* Floating stickers */
.sticker{
  position: absolute;
  font-family: var(--display);
  font-weight: 700;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.05em;
  border: 2px solid var(--bg);
  pointer-events: none;
}
.sticker-1{
  top: 6%; left: -8%;
  background: var(--coral); color: #fff;
  transform: rotate(-12deg);
  animation: float-1 6s ease-in-out infinite;
}
.sticker-2{
  top: 24%; right: -6%;
  background: #FFD93D; color: var(--bg);
  transform: rotate(8deg);
  font-family: var(--mono);
  letter-spacing: 0.16em;
  font-size: 10px;
  animation: float-2 7s ease-in-out infinite;
}
.sticker-3{
  bottom: 24%; left: -10%;
  background: #fff; color: var(--nori-pink);
  transform: rotate(-6deg);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  animation: float-3 8s ease-in-out infinite;
}
.sticker-4{
  bottom: 8%; right: -4%;
  background: var(--nori-pink); color: #fff;
  transform: rotate(10deg);
  animation: float-4 6.5s ease-in-out infinite;
}
@keyframes float-1{
  0%,100%{ transform: rotate(-12deg) translate(0,0); }
  50%{ transform: rotate(-9deg) translate(-3px, -8px); }
}
@keyframes float-2{
  0%,100%{ transform: rotate(8deg) translate(0,0); }
  50%{ transform: rotate(11deg) translate(4px, -6px); }
}
@keyframes float-3{
  0%,100%{ transform: rotate(-6deg) translate(0,0); }
  50%{ transform: rotate(-3deg) translate(-2px, -5px); }
}
@keyframes float-4{
  0%,100%{ transform: rotate(10deg) translate(0,0); }
  50%{ transform: rotate(13deg) translate(3px, -7px); }
}

@media (max-width: 900px){
  .nori-hero-grid{ grid-template-columns: 1fr; gap: 24px; }
  .phone-mockup{ max-width: 240px; }
  .phone-wrap{ padding: 30px 20px;}
  .phone-wrap::before{ width: 380px; height: 380px;}
}

/* ============================================================
   NORI REEL FEATURE — magazine row of stats
   ============================================================ */
.reel-feature{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 28px;
}
.reel-feature .reel-item{ max-width: 320px; margin: 0; }

/* UrbanSpace layout — text left, reel right */
.reel-feature.urbanspace-reel-feature{
  grid-template-columns: 1fr 320px;
  align-items: center;
  gap: 48px;
}
.reel-feature.urbanspace-reel-feature .gallery-head{
  margin-bottom: 14px;
}
.reel-feature.urbanspace-reel-feature .reel-caption{
  margin: 0;
}

/* UrbanSpace creatives layout — text left, two posts right (mirror of reel pattern) */
.creatives-feature{
  display: grid;
  grid-template-columns: 1fr minmax(420px, 540px);
  gap: 48px;
  align-items: center;
}
.creatives-feature .creatives-text .gallery-head{
  margin-bottom: 14px;
}
.creatives-feature .creatives-text .reel-caption{
  margin: 0;
}
.creatives-feature .creatives-posts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.creatives-feature .media-item{
  /* heights are not forced to match — square stays square, story stays portrait */
  aspect-ratio: 1/1;  /* default for static post */
}
.creatives-feature .media-item:not(.square){
  aspect-ratio: 9/16;  /* story stays portrait */
}

.reel-stats-block h4{
  font-family: var(--display);
  font-size: 36px;
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.025em;
}
.reel-stats-block h4 em{ font-family: var(--serif); font-style: italic; color: var(--nori-pink); font-weight: 400;}
.reel-stats-block .meta{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 24px;
}

/* Magazine-style stats — 6 across in a wrapping row, big numbers */
.reel-stats-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid rgba(255, 61, 139, 0.25);
  border-bottom: 1px solid rgba(255, 61, 139, 0.25);
  padding: 18px 0;
}
.reel-stat{
  padding: 6px 4px;
  text-align: left;
  position: relative;
}
.reel-stat:not(:last-child){
  border-right: 1px solid var(--line);
}
.reel-stat .v{
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.04em;
}
.reel-stat .v em{
  font-family: var(--serif); font-style: italic;
  color: var(--nori-pink);
  font-weight: 400;
  font-size: 0.6em;
  vertical-align: top;
  margin-left: 1px;
}
.reel-stat .l{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
}

.reel-narrative{
  margin-top: 22px;
  padding: 18px 22px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(255, 61, 139, 0.08), transparent 70%), var(--bg-3);
  border: 1px solid rgba(255, 61, 139, 0.18);
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}
.reel-narrative em{
  color: var(--nori-pink);
  font-weight: 400;
}

@media (max-width: 760px){
  .reel-feature{ grid-template-columns: 1fr; gap: 24px; }
  .reel-feature .reel-item{ margin: 0 auto; }
  .reel-feature.urbanspace-reel-feature{ grid-template-columns: 1fr; }
  .creatives-feature{ grid-template-columns: 1fr; gap: 24px;}
  .creatives-feature .creatives-posts{ grid-template-columns: 1fr 1fr; }
  .reel-stats-row{ grid-template-columns: 1fr 1fr 1fr; gap: 4px;}
  .reel-stat{ padding: 4px 2px;}
  .reel-stat .v{ font-size: 22px; }
}

/* ============================================================
   CASE STUDY PAGE (THG) — stats strip, data tables, prose
   ============================================================ */

/* Results strip under the hero */
.stats-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 36px;
}
.stats-strip .stat{
  padding: 20px;
  border: 1px solid var(--line-coral);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(255, 77, 46, 0.08), transparent 65%), var(--bg-3);
  transition: transform .35s var(--ease-out), border-color .35s ease;
}
.stats-strip .stat:hover{
  transform: translateY(-3px);
  border-color: var(--line-coral-strong);
}
.stats-strip .stat .v{
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.04em;
}
.stats-strip .stat .v em{
  font-family: var(--serif); font-style: italic;
  color: var(--coral); font-weight: 400;
  font-size: 0.7em;
}
.stats-strip .stat .l{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 10px;
  line-height: 1.4;
}

/* Full-width prose block */
.prose-section{
  padding: 56px 0;
}
.prose-section.alt{ background: var(--bg-2); }
.prose-section.base{ background: var(--bg); }
.prose-block{ max-width: 760px; }
.prose-block.wide{ max-width: none; }
.prose-block h3{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 16px;
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-coral);
  display: flex; align-items: center; gap: 8px;
}
.prose-block h3::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 8px var(--coral);
}
.prose-block h2{
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.02;
  margin: 0 0 18px;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.prose-block h2 em{
  font-family: var(--serif); font-style: italic;
  color: var(--coral); font-weight: 400;
}
.prose-block p{
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 14px;
}
.prose-block p:last-child{ margin-bottom: 0; }
.prose-block p strong{ color: var(--ink); font-weight: 600; }
.prose-block .lede{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2vw, 23px);
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 20px;
}
.prose-block .lede em{ color: var(--coral); font-style: italic; }

/* Checklist / change list */
.change-list{
  list-style: none; padding: 0; margin: 14px 0 0;
}
.change-list li{
  display: flex; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-dim);
  line-height: 1.55;
}
.change-list li:last-child{ border-bottom: none; }
.change-list li::before{
  content: "→";
  color: var(--coral);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  flex-shrink: 0;
  font-size: 17px;
  line-height: 1.4;
}
.change-list li strong{ color: var(--ink); font-weight: 600; }

/* Numbered lessons */
.lesson-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.lesson{
  padding: 22px;
  border: 1px solid var(--line-coral);
  border-radius: var(--radius);
  background: var(--bg-3);
  transition: transform .35s var(--ease-out), border-color .35s ease, background .35s ease;
}
.lesson:hover{
  transform: translateY(-3px);
  border-color: var(--line-coral-strong);
  background: var(--bg-4);
}
.lesson .n{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.lesson h4{
  font-family: var(--display);
  font-size: 20px;
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.lesson h4 em{
  font-family: var(--serif); font-style: italic;
  color: var(--coral); font-weight: 400;
}
.lesson p{
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 0;
}

/* Data tables */
.table-wrap{
  overflow-x: auto;
  border: 1px solid var(--line-coral);
  border-radius: var(--radius);
  background: var(--bg-3);
  margin-top: 18px;
  -webkit-overflow-scrolling: touch;
}
table.data{
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
table.data th, table.data td{
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  white-space: nowrap;
}
table.data thead th{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 500;
  background: rgba(255, 77, 46, 0.06);
  border-bottom: 1px solid var(--line-coral);
}
table.data tbody th{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
table.data td{
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
table.data tbody tr:last-child th,
table.data tbody tr:last-child td{ border-bottom: none; }
table.data tbody tr:hover th,
table.data tbody tr:hover td{ background: rgba(255,255,255,0.025); }
table.data td.dim{ color: var(--ink-mute); font-weight: 400; }
table.data td.hi{ color: var(--coral); }

/* Decision callouts */
.callout{
  margin-top: 16px;
  padding: 20px 22px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(255, 77, 46, 0.07), transparent 70%), var(--bg-3);
  border: 1px solid var(--line-coral);
}
.callout + .callout{ margin-top: 10px; }
.callout .q{
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.callout .q em{
  font-family: var(--serif); font-style: italic;
  color: var(--coral); font-weight: 400;
}
.callout p{
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 0;
}

/* Finding blocks (numbered observations) */
.finding{
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.finding:last-child{ border-bottom: none; padding-bottom: 0; }
.finding h4{
  font-family: var(--display);
  font-size: 21px;
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ink);
}
.finding h4 em{
  font-family: var(--serif); font-style: italic;
  color: var(--coral); font-weight: 400;
}
.finding p{
  font-size: 15px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0;
}

/* Evidence screenshots */
.evidence-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}
.evidence{
  border: 1px solid var(--line-coral);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-3);
}
.evidence img{ width: 100%; display: block; }
.evidence .cap{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 11px 16px;
  border-top: 1px solid var(--line);
}

@media (max-width: 860px){
  .stats-strip{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stats-strip .stat{ padding: 16px 14px; }
  .lesson-grid{ grid-template-columns: 1fr; }
  .prose-section{ padding: 44px 0; }
  table.data th, table.data td{ padding: 11px 14px; font-size: 13px; }
}