/* ===========================================================
   Naor Daniel - Product Design Portfolio
   A single-column, scroll-driven narrative: the site reads like
   a story, not a stack of cards. Shared by the homepage and all
   7 case-study pages.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Mono:wght@700&family=Fraunces:opsz,wght,SOFT,WONK@9..144,100..600,0,1&display=swap');

:root{
  --radius: 20px;
  --radius-sm: 12px;

  --bg: #ffffff;
  --ink: #16151d;
  --ink-soft: #57566a;
  --ink-faint: #8b8a9c;
  --hairline: #e7e5ee;

  --accent-purple: #8b5cf6;
  --accent-pink: #ec4899;
  --accent-strong: #6d28d9;
  --accent-tint: #f4f0ff;
  --accent-tint-border: #e4d9ff;

  --good: #0ea472;
  --good-tint: #e9faf3;

  --shadow-card: 0 1px 2px rgba(22,21,29,.04), 0 12px 32px -16px rgba(22,21,29,.12);

  --dark-bg: #08070c;

  --work-blue: #0033ff;
  --work-blue-tint: #eaf0ff;

  --hero-bg: #060b16;
  --hero-accent: #1300fb;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.5;
  margin: 0;
  letter-spacing: -0.015em;
}

p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; }

.container{
  max-width: 780px;
  margin: 0 auto;
  padding: 0 32px;
}
.container--wide{ max-width: 1080px; }

.section{
  position: relative;
  padding: 130px 0;
  overflow: hidden;
}
.section > .container{ position: relative; z-index: 1; }

.kicker{
  display: block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent-strong);
  margin-bottom: 18px;
}

.nav__actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill{
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 6px 12px; border-radius: 0;
  background: #fff; border: .5px solid #bdbdbd;
  box-shadow: 0 4px 17.5px rgba(0,0,0,.05);
  font-size: 16px; font-weight: 500; letter-spacing: -0.32px; color: var(--ink); white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pill:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.pill svg{ width: 16px; height: 16px; flex-shrink: 0; color: var(--work-blue); }
.pill--icon{ width: 40px; padding: 6px; justify-content: center; }
.pill--solid{ background: #000; border-color: #000; color: #fff; }
.pill--solid svg{ color: #fff; }

.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }

/* Individual cards/rows inside a revealed section stagger in on top of the
   section's own fade-up, instead of arriving as one flat block. */
.reveal .proj-mini,
.reveal .home-card,
.reveal .proj-impact-grid__item,
.reveal .proj-numbered,
.reveal .proj-evidence__item,
.reveal .proj-worked > *{
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.in-view .proj-mini,
.reveal.in-view .home-card,
.reveal.in-view .proj-impact-grid__item,
.reveal.in-view .proj-numbered,
.reveal.in-view .proj-evidence__item,
.reveal.in-view .proj-worked > *{
  opacity: 1; transform: translateY(0);
}
.proj-trio > *:nth-child(1), .proj-closing__cards > *:nth-child(1),
.proj-impact-grid > *:nth-child(1), .proj-evidence > *:nth-child(1), .proj-worked > *:nth-child(1){ transition-delay: .05s; }
.proj-trio > *:nth-child(2), .proj-closing__cards > *:nth-child(2),
.proj-impact-grid > *:nth-child(2), .proj-evidence > *:nth-child(2), .proj-worked > *:nth-child(2){ transition-delay: .12s; }
.proj-trio > *:nth-child(3),
.proj-impact-grid > *:nth-child(3), .proj-evidence > *:nth-child(3), .proj-worked > *:nth-child(3){ transition-delay: .19s; }
.proj-impact-grid > *:nth-child(4), .proj-closing__cards > *:nth-child(4){ transition-delay: .26s; }
.proj-impact-grid > *:nth-child(5){ transition-delay: .33s; }
.proj-impact-grid > *:nth-child(6){ transition-delay: .4s; }

footer.site-footer{ padding: 40px 0 60px; text-align: center; color: var(--ink-faint); font-size: 13px; }

@media (max-width: 640px){
  .container{ padding: 0 20px; }
  .section{ padding: 90px 0; }
}

/* ===========================================================
   Home v2 - centered hero with a fanned row of project cards
   =========================================================== */

.container--wide{ max-width: 1180px; }

/* ---------------- Home - scroll intro + vertical reels ---------------- */
html.reel-snap{ scroll-snap-type: y mandatory; }
.reel-home{ position: relative; background: #fff; }
.reel-home__snap{ position: absolute; left: 0; width: 1px; height: 100vh; scroll-snap-align: start; pointer-events: none; }
.reel-home__stage{ position: sticky; top: 0; height: 100vh; overflow: hidden; }

.reel-home__bg{ position: absolute; inset: 0; background: #fff; pointer-events: none; }
.reel-home__bg-img{
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; opacity: 0;
}
.reel-home__bg::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, #fff 45.625%, rgba(255,255,255,.55));
}

/* Shared with the case-study header. */
.site-name{
  font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 400; line-height: 1.5; color: #000;
  font-variation-settings: "SOFT" 0, "WONK" 1; text-decoration: none; white-space: nowrap;
  letter-spacing: -0.03em;
}
.site-name strong{ font-weight: 600; }

.reel-contacts{ display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.reel-contacts__btn{
  display: flex; align-items: center; justify-content: center; padding: 8px; border: 0; border-radius: 8px;
  background: none; color: #000; cursor: pointer; filter: drop-shadow(0 4px 17.5px rgba(0,0,0,.05));
  transition: transform .15s cubic-bezier(.2,.8,.3,1);
}
.reel-contacts__btn:hover{ transform: translateY(-2px); }
.reel-contacts__btn svg{ width: 16px; height: 16px; }
.reel-contacts__btn--lg svg{ width: 24px; height: 24px; }
.reel-contacts__reveal{ display: flex; align-items: center; }
.reel-contacts__value{
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-size: 15px; font-weight: 500; color: #000;
  transition: max-width .35s cubic-bezier(.2,.8,.3,1), opacity .25s ease, padding .35s ease;
}
.reel-contacts__reveal.is-open .reel-contacts__value{ max-width: 260px; opacity: 1; padding-right: 8px; }
.reel-contacts__value:hover{ text-decoration: underline; }

.reel-home__grid{
  position: relative; height: 100%; padding: 32px;
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.reel-home__name{ grid-column: 1; grid-row: 1; align-self: start; }
.reel-home__grid > .reel-contacts{ grid-column: 3; grid-row: 1; align-self: start; }

.reel-card{
  grid-column: 2; grid-row: 1 / span 2; justify-self: center; align-self: stretch;
  position: relative; aspect-ratio: 90 / 160;
}
.reel-card__viewport{
  position: absolute; inset: 0; overflow: hidden; border-radius: 20px; background: #eee;
  box-shadow: 0 1px 3px rgba(22,21,29,.08), 0 18px 40px -18px rgba(22,21,29,.35);
}
.reel-card__track{ position: absolute; inset: 0; will-change: transform; }
.reel-card__media{
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.reel-card__ctrls{
  position: absolute; top: 0; right: 0; display: flex; gap: 4px; padding: 16px;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
.reel-home.is-intro-done .reel-card__ctrls{ opacity: 1; visibility: visible; transition: opacity .3s ease; }
.reel-home .reel-card__ctrls.is-hidden{ opacity: 0; visibility: hidden; }
.reel-card__ctrl{
  width: 24px; height: 24px; padding: 5px; border: 0; border-radius: 50%;
  background: #3a3f4b; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, opacity .15s ease;
}
.reel-card__ctrl:hover{ transform: scale(1.08); }
.reel-card__ctrl:disabled{ opacity: .6; cursor: default; transform: none; }
.reel-card__ctrl svg{ width: 14px; height: 14px; }

.reel-card__nav{ position: absolute; top: 50%; left: calc(100% + 32px); transform: translateY(-50%); display: flex; flex-direction: column; width: 48px; }
.reel-card__arrow{
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 200px; background: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.reel-card__arrow:hover{ background: rgba(0,0,0,.05); }
.reel-card__arrow:disabled{ opacity: .25; cursor: default; background: none; }
.reel-card__arrow img{ width: 8.36396px; height: 14.7279px; }
.reel-card__arrow--up img{ transform: rotate(-90deg); }
.reel-card__arrow--down img{ transform: rotate(90deg); }

/* Copy items stack in one cell; opacity/offset are scroll-driven from JS. */
.reel-copy{ grid-column: 1; grid-row: 2; align-self: stretch; display: grid; }
.reel-copy__item{ grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; justify-content: flex-end; padding: 16px; }
.reel-copy__text{ display: flex; flex-direction: column; gap: 8px; text-shadow: 0 0 14px #fff, 0 0 4px #fff; }
.reel-copy__title{ font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: #000; }
.reel-copy__desc{ font-size: 16px; font-weight: 400; line-height: 1.5; color: rgba(0,0,0,.82); }
.reel-copy__cta{
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px;
  border-radius: 8px; background: #000; color: #fff; font-size: 18px; font-weight: 500;
  transition: transform .15s cubic-bezier(.2,.8,.3,1);
}
.reel-copy__cta:hover{ transform: translateY(-2px); }
.reel-copy__cta img, .reel-copy__cta svg{ width: 8.11105px; height: 7.62709px; flex: none; }

.reel-intro{
  position: absolute; inset: 0; overflow: hidden;
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
}
/* Sits exactly where the grid's contact row does, so nothing jumps when the intro clears. */
.reel-intro > .reel-contacts{ position: absolute; top: 32px; right: 32px; z-index: 1; }
.reel-intro__lines{
  position: absolute; top: 0; left: 0; right: 0; padding: 0 64px;
  display: flex; flex-direction: column; gap: 200px; align-items: center;
  will-change: transform;
}
.reel-intro__line{
  font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 64px; line-height: 1.5;
  letter-spacing: -0.03em; color: #000; text-align: center; max-width: 1312px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  will-change: transform, opacity, filter;
}
.reel-intro__hint{
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(0,0,0,.55);
  animation: reel-float-in 1s cubic-bezier(.2,.8,.3,1) .9s backwards;
}
.reel-intro__mouse{
  position: relative; width: 22px; height: 34px; border: 1.5px solid rgba(0,0,0,.55); border-radius: 12px;
}
.reel-intro__mouse::after{
  content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: rgba(0,0,0,.55);
  animation: reel-wheel 1.6s ease-in-out infinite;
}
@keyframes reel-wheel{
  0%{ opacity: 0; transform: translateY(-3px); }
  30%{ opacity: 1; }
  100%{ opacity: 0; transform: translateY(9px); }
}
.reel-intro__line:first-child{ animation: reel-float-in 1.1s cubic-bezier(.2,.8,.3,1) .15s backwards; }
.reel-intro__line > span{ display: inline-block; animation: reel-bob 6s ease-in-out infinite; }
.reel-intro__line:nth-child(2n) > span{ animation-delay: -3s; }
@keyframes reel-float-in{
  from{ opacity: 0; transform: translateY(90px); filter: blur(10px); }
}
@keyframes reel-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce){
  .reel-intro__line:first-child, .reel-intro__line > span, .reel-intro__hint, .reel-intro__mouse::after{ animation: none; }
}

/* Mid widths: give the copy column more room than an even thirds split. */
@media (max-width: 1180px) and (min-width: 901px){
  .reel-home__grid{ grid-template-columns: minmax(0, 1fr) auto 120px; grid-template-rows: auto minmax(0, 1fr); gap: 16px 24px; }
  /* Header row spans above the reel so revealed email/phone never overlap it. */
  .reel-home__grid > .reel-contacts{ grid-column: 2 / 4; }
  .reel-card{ grid-row: 2; }
  .reel-copy{ grid-row: 2; }
}

/* Narrow: stack name/contacts, reel, then copy - full-width readable text. */
@media (max-width: 900px){
  .reel-home__grid{
    padding: 16px; gap: 12px;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .site-name{ font-size: 18px; }
  .reel-home__name{ white-space: normal; }
  .reel-home__grid > .reel-contacts{ grid-column: 2; }
  .reel-card{ grid-column: 1 / -1; grid-row: 2; }
  .reel-card__nav{ display: none; }
  .reel-copy{ grid-column: 1 / -1; grid-row: 3; width: 100%; max-width: 560px; justify-self: center; }
  .reel-copy__item{ padding: 0; gap: 12px; }
  .reel-copy__title{ font-size: 18px; }
  .reel-copy__desc{ font-size: 15px; color: rgba(0,0,0,.85); }
  .reel-copy__cta{ font-size: 16px; padding: 10px 6px; }
  .reel-intro > .reel-contacts{ top: 16px; right: 16px; }
  .reel-intro__lines{ padding: 0 16px; gap: 120px; }
  .reel-intro__line{ font-size: 36px; }
  .reel-intro__hint{ bottom: 20px; }
  .reel-contacts__reveal.is-open .reel-contacts__value{ max-width: 180px; font-size: 13px; }
}

.home-card{
  flex: 1 0 0; min-width: 0;
  display: flex; flex-direction: column; gap: 32px;
  text-decoration: none; padding-top: 32px;
  will-change: transform;
  transition: transform .2s cubic-bezier(.2,.8,.3,1);
}
.home-card__head{ display: flex; flex-direction: column; gap: 10px; text-align: left; }
.home-card__title{ font-size: 20px; font-weight: 600; line-height: 1.5; color: #fff; }
.home-card__desc{ font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.75); }
.home-card__media{
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 390 / 220; background: #f2f2f2;
}
.home-card__media img{ position: absolute; display: block; object-fit: cover; }
.home-card__media--video{ background: #000; }
.home-card__media--video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.home-card__media--video::before, .home-card__media--video::after{
  content: ''; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
}
.home-card__media--video::before{ top: 0; height: 26%; background: linear-gradient(to bottom, rgba(0,0,0,.9), transparent); }
.home-card__media--video::after{ bottom: 0; height: 22%; background: linear-gradient(to top, rgba(0,0,0,.9), transparent); }
.home-card__media--workflow{ background-image: linear-gradient(132.8deg, rgba(255,255,255,0) 4.37%, rgba(255,76,190,.615) 55.6%, rgb(151,71,255) 93.08%); }
.home-card__media--workflow img{ left: 9.16%; top: 8.4%; width: 81.6%; height: 83.37%; }
.home-card__media--videogen{ background-image: linear-gradient(171.2deg, rgba(255,255,255,0) 7.69%, rgba(16,130,162,.615) 117.26%, rgb(2,129,255) 195.36%); }
.home-card__media--videogen img{ left: 16.46%; top: 7.13%; width: 66.98%; height: 85.38%; }
.home-card__badge{
  position: absolute; top: 16px; right: 16px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; background: var(--hero-accent); color: #fff;
  font-size: 16px; font-weight: 500; white-space: nowrap;
}
.home-card__badge svg{ width: 8px; height: 8px; flex-shrink: 0; }

.accent-purple{ color: #bb6bd9; }

.bento-btn{
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 62px; border-radius: 0; padding: 0 24px; flex: 0 0 auto;
  font-weight: 600; font-size: 24px; letter-spacing: -0.02em;
  text-decoration: none; white-space: nowrap;
  will-change: transform;
  transition: transform .15s cubic-bezier(.2,.8,.3,1), box-shadow .15s ease;
}
.bento-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.bento-btn::after{
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.5), transparent 60%);
  opacity: 0; transition: opacity .25s ease; pointer-events: none; mix-blend-mode: overlay;
}
.bento-btn:hover::after{ opacity: 1; }
.bento-btn svg{ width: 20px; height: 20px; flex-shrink: 0; }
.bento-btn--solid{ background: #219653; color: #fff; padding: 0 48px; }
.bento-btn--outline{
  background: #fff; border: .5px solid #bdbdbd; box-shadow: 0 4px 17.5px rgba(0,0,0,.05);
  color: #222327; flex: 1; font-size: 16px; gap: 8px; min-width: 0; padding: 0 12px;
}
.bento-btn--outline svg{ color: var(--work-blue); }
.bento-btn--outline span{ overflow: hidden; text-overflow: ellipsis; }
.bento-btn--icon{
  background: #fff; border: .5px solid #bdbdbd; box-shadow: 0 4px 17.5px rgba(0,0,0,.05);
  color: var(--work-blue); width: 62px; padding: 0; flex-shrink: 0;
}
.bento-btn--icon svg{ width: 24px; height: 24px; }

.bento-ai-card{
  position: relative;
  flex: 1; min-height: 0;
  border-radius: 10px;
  padding: 48px 32px;
  cursor: pointer;
  background: #3a3f4b;
  overflow: hidden;
  will-change: transform;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
}
.bento-ai-card:hover{ box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.bento-ai-card::after{
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 55%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.bento-ai-card:hover::after{ opacity: 1; }
.bento-ai-card::before{
  content: '';
  position: absolute; inset: -25%;
  background: radial-gradient(ellipse 500px 400px at 30% 85%, rgba(177,0,247,.55), transparent 70%);
  animation: aiBreathe 6s ease-in-out infinite;
}
@keyframes aiBreathe{
  0%, 100%{ transform: scale(1); opacity: .8; }
  50%{ transform: scale(1.18); opacity: 1; }
}
.bento-ai-card p{
  position: relative; z-index: 1;
  font-size: 24px; font-weight: 900; line-height: 1.5; letter-spacing: -0.02em;
  color: #fff; max-width: 340px;
}
@media (prefers-reduced-motion: reduce){
  .bento-ai-card::before{ animation: none; }
}

/* The AI card opens into a centered 16:9 modal (not an in-place flip) -
   backdrop click, the × button, or Escape all close it. */
.ai-modal-backdrop{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,14,26,.75);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  perspective: 1600px;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
.ai-modal-backdrop.is-open{ opacity: 1; pointer-events: auto; }
.ai-modal{
  position: relative;
  width: min(760px, 100%); aspect-ratio: 16 / 9;
  background: #3a3f4b; border-radius: 16px; padding: 56px;
  display: flex; flex-direction: column; justify-content: center;
  transform: scale(.35) rotateY(-65deg);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.ai-modal-backdrop.is-open .ai-modal{ transform: scale(1) rotateY(0deg); }
.ai-modal__close{
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 0; color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.ai-modal__close:hover{ background: rgba(255,255,255,.18); }
.bento-ai-card__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.bento-ai-card__list li{ font-size: 18px; font-weight: 700; color: #fff; line-height: 1.5; }

/* .home-card is reused as-is inside .proj-closing__cards (case-study closing
   "Explore more" rows) - both contexts are already dark-background, so no
   per-context recolor is needed, just a grid-friendly width. */
.proj-closing__cards .home-card{ padding-top: 0; }

@keyframes floatBob{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce){
  .home-card{ transition: none; }
}

/* ---------------- Skills strip - an infinite marquee ---------------- */
.skills-strip{
  overflow: hidden;
  padding: 24px 0;
  border-top: .5px solid #e0e0e0;
  border-bottom: .5px solid #e0e0e0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.skills-strip__track{
  display: flex; align-items: center;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.skills-strip__item{
  display: flex; align-items: center; gap: 32px;
  padding-right: 32px;
  font-family: 'Space Mono', monospace;
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); white-space: nowrap;
}
.skills-strip:hover .skills-strip__track{ animation-play-state: paused; }
.skills-strip__dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #e0e0e0;
  display: inline-block;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .skills-strip__track{ animation: none; }
}


/* ---------------- Closing section ---------------- */
.closing-section{ text-align: center; padding-bottom: 0; }
.closing-section h2{ font-size: clamp(30px, 4.4vw, 48px); max-width: 900px; margin: 0 auto; }
.closing-section .nav__actions{ justify-content: center; margin-top: 28px; }
.closing-section .skills-strip{ margin-top: 64px; }

/* ===========================================================
   Case-study page template (dark "proj" theme)
   =========================================================== */

body.proj-page{ background: #171f32; }

.proj-topbar{
  position: sticky; top: 16px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  background: #171f32; border: 1px solid #3a3f4b; border-radius: 10px;
  max-width: 1040px; margin: 16px auto 0; padding: 8px 12px 8px 16px;
}
.proj-topbar__brand{ display: flex; align-items: center; gap: 16px; min-width: 0; }
.proj-topbar__name{ font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -0.4px; text-decoration: none; }
.proj-topbar__actions{ display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* The topbar reuses the CTA's .bento-btn shapes but at the compact size Figma
   specifies for this context - smaller than the closing CTA's 62px buttons. */
.proj-topbar__actions .bento-btn{ height: auto; }
.proj-topbar__actions .bento-btn--icon{ width: auto; padding: 8px; border-radius: 0; border: 0; box-shadow: none; background: transparent; }
.proj-topbar__actions .bento-btn--icon svg{ width: 24px; height: 24px; }
.proj-topbar__actions .bento-btn--outline{
  padding: 8px; gap: 8px; border: 0; box-shadow: none; background: transparent;
  font-size: 16px; font-weight: 500;
}
.proj-topbar__actions .bento-btn--outline svg{ width: 16px; height: 16px; }
.proj-topbar__actions .bento-btn--solid{ padding: 8px 12px; border-radius: 0; font-size: 16px; gap: 10px; }
.proj-topbar__actions .bento-btn--solid svg{ width: 16px; height: 16px; }

.proj-btn--dark{ background: transparent; border-color: rgba(255,255,255,.25); color: #fff; box-shadow: none; }
.proj-btn--dark svg{ color: #fff; }

.proj-back{
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #fff; text-decoration: none;
  transition: background .15s ease;
}
.proj-back svg{ width: 18px; height: 18px; }
.proj-back:hover{ background: rgba(255,255,255,.16); }

/* Long-form editorial layout: a narrow 1040px reading column, generous
   120px rhythm between sections, no card chrome around plain text - only
   media (the hero images, evidence shots) and the closing cards get boxes. */
.proj-hero2{
  max-width: 1040px; margin: 0 auto; padding: 80px 32px 32px;
  display: flex; flex-direction: column; gap: 24px; color: #fff;
}
.proj-hero2 h1{ font-size: 40px; font-weight: 900; letter-spacing: -0.8px; color: #fff; }
.proj-hero2__desc{ font-size: 24px; font-weight: 400; letter-spacing: -0.48px; color: #fff; }
.proj-meta-row{ display: flex; gap: 24px; flex-wrap: wrap; }
.proj-meta-row .proj-meta__item{ width: 220px; }
.proj-meta__item{ display: flex; flex-direction: column; gap: 4px; }
.proj-meta__item span{ font-size: 14px; letter-spacing: 1.4px; color: rgba(255,255,255,.5); font-weight: 500; }
.proj-meta__item strong{ font-size: 16px; font-weight: 500; letter-spacing: -0.32px; color: #fff; }

/* A peek carousel that deliberately breaks out wider than the 1040px reading
   column - each item is wide enough that the next one's edge peeks in,
   signalling there's more to page through via the arrow buttons. */
.proj-media-row{
  position: relative;
  margin-top: 32px;
  margin-left: max(32px, calc((100% - 1040px) / 2 + 32px));
  margin-right: 32px;
}
.proj-media-row__track{
  display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.proj-media-row__track::-webkit-scrollbar{ display: none; }
.proj-media-row__item{
  position: relative;
  flex: 0 0 88%; scroll-snap-align: start;
  aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden; background: #000;
}
.proj-media-row__item iframe{ width: 100%; height: 100%; border: 0; }
.proj-media-row__item::before, .proj-media-row__item::after{
  content: ''; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
}
.proj-media-row__item::before{ top: 0; height: 18%; background: linear-gradient(to bottom, rgba(0,0,0,.9), transparent); }
.proj-media-row__item::after{ bottom: 0; height: 14%; background: linear-gradient(to top, rgba(0,0,0,.9), transparent); }
.proj-media-row__item .proj-gallery__icon{
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--work-blue-tint), #fdf2fb);
}
.proj-media-row__item .proj-gallery__icon svg{ width: 25%; height: 25%; color: var(--work-blue); }
.proj-media-row__arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.12); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform .15s ease, background .15s ease;
}
.proj-media-row__arrow:hover{ transform: translateY(-50%) scale(1.08); background: rgba(255,255,255,.22); }
.proj-media-row__arrow svg{ width: 20px; height: 20px; }
.proj-media-row__arrow--prev{ left: 16px; }
.proj-media-row__arrow--next{ right: 16px; }
.proj-media-dots{ display: flex; justify-content: center; gap: 8px; margin: 16px auto 0; }
.proj-media-dots span{
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3);
  transition: background .2s ease;
}

.proj-block{
  max-width: 1040px; margin: 0 auto; padding: 120px 32px; color: #fff;
  display: flex; flex-direction: column; gap: 120px;
}
/* Challenge: eyebrow + title + body are ONE tight 4px-gap group per Figma -
   not split across the section's 120px rhythm. */
.proj-block__head{ display: flex; flex-direction: column; gap: 4px; }
.proj-block__eyebrow{ display: block; font-size: 24px; font-weight: 400; letter-spacing: -0.48px; color: #fff; }
.proj-block__title{ font-size: 32px; font-weight: 900; letter-spacing: -0.64px; color: #fff; }
.proj-block__body{ font-size: 24px; font-weight: 500; letter-spacing: -0.48px; color: rgba(255,255,255,.75); }

.proj-block--impact{ gap: 24px; }
.proj-impact-grid{ display: flex; flex-wrap: wrap; gap: 64px 32px; }
.proj-impact-grid__item{ flex: 1 1 260px; }
.proj-impact-grid__item--wide{ flex-basis: 100%; }
.proj-impact-grid__value{ display: block; font-size: 32px; font-weight: 900; letter-spacing: -0.64px; color: #fff; }
.proj-impact-grid__label{ display: block; font-size: 18px; font-weight: 500; letter-spacing: -0.48px; color: rgba(255,255,255,.75); margin-top: 4px; }

.proj-numbered__index{ display: block; font-size: 24px; font-weight: 400; color: #fff; }
.proj-numbered__title{ font-size: 32px; font-weight: 900; color: #fff; letter-spacing: -0.64px; margin-top: 4px; }
.proj-numbered__body{ font-size: 24px; font-weight: 500; color: rgba(255,255,255,.75); letter-spacing: -0.48px; margin-top: 4px; }

.proj-evidence{ display: flex; gap: 32px; margin-top: 24px; }
.proj-evidence__item{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.proj-evidence__media{
  aspect-ratio: 4 / 3; border-radius: 10px; background: #3a3f4b;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.proj-evidence__media svg{ width: 30%; height: 30%; color: var(--work-blue); }
.proj-evidence__caption{ font-size: 16px; font-style: italic; color: #fff; letter-spacing: -0.32px; }

.proj-worked{ display: flex; flex-direction: column; gap: 64px; }

.proj-closing{
  max-width: 1040px; margin: 0 auto; padding: 120px 32px 96px;
  display: flex; flex-direction: column; gap: 32px; align-items: flex-start;
}
.proj-closing__heading{ font-size: 40px; font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.proj-closing__cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; width: 100%; }
.proj-closing__cards .bento-ai-card{ min-height: 387px; padding: 40px; }

.proj-cta{
  min-height: 387px;
  background: #3a3f4b; border-radius: 10px; padding: 40px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px;
}
.proj-cta h2{ font-size: 38px; font-weight: 900; color: #fff; letter-spacing: -0.76px; }
.proj-cta__actions{ display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 420px; }
.proj-cta__group{ display: flex; gap: 16px; width: 100%; }

footer.proj-footer{ background: #08070c; color: rgba(255,255,255,.4); }

/* ===========================================================
   Long-form project pages (Amplify, AI workflow, AI video gen)
   - light theme, sticky left-rail nav with scroll-spy, and a
   shared "concept flow" animation system reused across all 3.
   =========================================================== */
.amp-page{ background: #fff; color: #000; }
.amp-closing{ background: #171f32; }
.amp-closing .proj-closing{ padding-top: 120px; }

.amp-header{
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 32px;
}

.amp-shell{ display: flex; gap: 64px; max-width: 1440px; margin: 0 auto; padding: 0 65px; align-items: flex-start; }
.amp-nav{
  position: sticky; top: 96px; width: 238px; flex-shrink: 0; padding-top: 64px;
  display: flex; flex-direction: column; gap: 32px;
  max-height: calc(100vh - 112px); overflow-y: auto;
}
.amp-nav__toggle{
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 600; color: #000; text-align: left;
}
.amp-nav__toggle svg{ width: 14px; height: 14px; flex-shrink: 0; transition: transform .3s ease; }
.amp-nav__toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }
.amp-nav__list{
  list-style: none; margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 24px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.amp-nav__list.is-open{ max-height: 600px; opacity: 1; margin-top: 24px; }
.amp-nav__list a{ font-size: 15px; color: rgba(0,0,0,.55); text-decoration: none; transition: color .15s ease, font-weight .15s ease; }
.amp-nav__list a.is-active{ color: #000; font-weight: 600; }
.amp-nav__other{ font-size: 15px; font-weight: 600; color: #000; text-decoration: none; }

.amp-content{ flex: 1; min-width: 0; max-width: 1008px; }
/* Section-level scroll-snap was tried here and reverted - it actively
   fought scroll-behavior:smooth plus the scroll-linked animations inside
   the very tall sections (styles scatter→group, concept-flow reveals),
   at points blocking scroll entirely. The per-section reveal/slide-in
   animations already carry the "one thing at a time" feel without it. */
.amp-section{ padding: 120px 0; scroll-margin-top: 96px; }
.amp-section--bubbles{ padding: 120px 0; position: relative; }

.amp-eyebrow{ font-size: 17px; color: rgba(0,0,0,.75); margin: 0 0 4px; }
.amp-h1{ font-size: 32px; font-weight: 700; margin: 0; }
.amp-h2{ font-size: 26px; font-weight: 600; line-height: 1.35; margin: 0 0 4px; }   /* type scale ≈1.2: h1 32 · h2 26 · h3 21 · h4 19 · body 17 · small 15 */
.amp-body{ font-size: 17px; color: rgba(0,0,0,.75); margin: 8px 0 0; line-height: 1.5; }
.amp-hero__title{ font-size: 32px; font-weight: 700; margin: 0; }
.amp-hero__sub{ font-size: 21px; font-weight: 400; margin: 8px 0 0; }
.amp-hero__media{ width: 100%; aspect-ratio: 3840 / 2160; object-fit: cover; border-radius: 10px; margin-top: 32px; display: block; }

.amp-stats{ display: flex; gap: 64px; margin-top: 56px; }
.amp-stats__item{ flex: 1; }
.amp-stats__value{ display: block; font-size: 32px; font-weight: 700; }
.amp-stats__label{ display: block; font-size: 17px; color: rgba(0,0,0,.75); margin-top: 4px; }

/* Preliminary-research bubbles: scattered quote pills, idle-floating once
   revealed, laid out with percentage positions over the section's own box
   so the scatter scales with viewport width. */
.amp-bubble-field{
  position: relative; text-align: center; padding: 0 40px;
  aspect-ratio: 1008 / 520; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.amp-bubble-field__caption{ position: absolute; left: 40px; bottom: 0; font-size: 15px; color: rgba(0,0,0,.5); }
@media (max-width: 900px){ .amp-bubble-field{ aspect-ratio: auto; } }
.amp-bubble{
  position: absolute; z-index: 2; background: #f2f2f2; border-radius: 20px; padding: 16px;
  font-size: 12px; line-height: 1.5; color: #000; text-align: center; width: max-content; max-width: 300px;
  opacity: 0; transform: translateY(14px) scale(.94);
  transition: opacity .5s ease, transform .5s ease;
}
.amp-bubble.in-view{ opacity: 1; transform: translateY(0) scale(1); animation: floatBob 5s ease-in-out infinite; animation-delay: .5s; }
@media (max-width: 900px){ .amp-bubble{ display: none; } }

/* Personas - a floating avatar photo with 3 floating iMessage-style quote
   bubbles (rounded pill + a small tail pointing back at the speaker). */
.amp-personas{ display: flex; gap: 64px; margin-top: 32px; }
.amp-persona{ flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; aspect-ratio: 472 / 467; }
@media (max-width: 900px){ .amp-persona{ aspect-ratio: auto; min-height: 320px; padding-top: 64px; } }
.amp-persona__avatar{
  position: relative; z-index: 1; overflow: hidden; border-radius: 12px;
  opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease;
}
.amp-persona__avatar img{ position: absolute; max-width: none; display: block; }
.amp-persona__avatar.in-view{ opacity: 1; transform: translateY(0); animation: floatBob 5.6s ease-in-out infinite; animation-delay: .4s; }
.amp-persona__title{ font-size: 21px; font-weight: 600; margin: 24px 0 0; text-align: center; }
.amp-persona__desc{ font-size: 17px; color: rgba(0,0,0,.75); margin: 4px 0 0; text-align: center; }
.chat-bubble{
  position: absolute; z-index: 2; background: #f2f2f2; border-radius: 18px; padding: 14px 16px;
  font-size: 12px; line-height: 1.5; color: #000; text-align: center; width: max-content; max-width: 280px;
  opacity: 0; transform: translateY(14px) scale(.94);
  transition: opacity .5s ease, transform .5s ease;
}
.chat-bubble::after{
  content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 14px; height: 14px; background: #f2f2f2; border-radius: 3px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.chat-bubble.in-view{ opacity: 1; transform: translateY(0) scale(1); animation: floatBob 4.8s ease-in-out infinite; animation-delay: .5s; }
@media (max-width: 900px){ .amp-personas{ flex-direction: column; } .chat-bubble{ display: none; } }

/* When the content column is narrower than the scatter was designed for, the
   absolutely placed quotes start covering the headings - lay them out in flow instead. */
@media (min-width: 901px) and (max-width: 1280px){
  .amp-bubble-field{ aspect-ratio: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; }
  .amp-bubble-field > .amp-eyebrow, .amp-bubble-field > .amp-h1{ width: 100%; }
  .amp-bubble-field > .amp-h1{ margin-bottom: 24px; }
  .amp-bubble{ position: static; max-width: min(300px, 46%); }
  .amp-bubble-field__caption{ position: static; width: 100%; margin-top: 16px; }
  .amp-personas{ flex-direction: column; gap: 72px; }
  .amp-persona{ aspect-ratio: auto; justify-content: flex-start; }
  .chat-bubble{ position: static; margin: 0 0 18px; max-width: min(320px, 90%); }
}

/* Concept flow - one pinned title for the whole section, with each block's
   media + callout + hand-drawn connector line scrolling underneath it. */
.amp-flow{ position: relative; }
.amp-flow__title{
  position: sticky; top: 96px; z-index: 10; width: 100%;
  background: #fff; padding: 16px 0;
}
.amp-flow__blocks{ display: flex; flex-direction: column; }
.amp-flow__block{
  display: flex; align-items: center; gap: 64px; padding: 96px 0;
  flex-direction: row;
}
.amp-flow__block--left{ flex-direction: row-reverse; }
.amp-flow__media{ flex: 0 0 60%; min-width: 0; border-radius: 10px; overflow: hidden; }
.amp-flow__media img{ display: block; width: 100%; height: auto; }
.amp-flow__block--peek .amp-flow__media{ margin-left: -15%; }
.amp-flow__block--peek.amp-flow__block--left .amp-flow__media{ margin-left: 0; margin-right: -15%; }
.amp-flow__callout{ flex: 1; min-width: 0; position: relative; }
.amp-flow__callout-title{ font-size: 21px; font-weight: 600; margin: 0; }
.amp-flow__callout-desc{ font-size: 17px; color: rgba(0,0,0,.75); margin: 8px 0 0; }
.amp-flow__line{ display: none; }
/* Wide screens get the real hand-drawn connector between callout and media. */
@media (min-width: 1100px){
  .amp-flow__line{
    display: block; position: absolute; top: 50%; width: 64px; height: 2px; overflow: visible;
  }
  .amp-flow__block--right .amp-flow__line{ right: 100%; }
  .amp-flow__block--left .amp-flow__line{ left: 100%; transform: scaleX(-1); }
  .amp-flow__line path{
    fill: none; stroke: rgba(0,0,0,.35); stroke-width: 2; stroke-dasharray: 4 4;
    stroke-dasharray: 100; stroke-dashoffset: 100; vector-effect: non-scaling-stroke;
    transition: stroke-dashoffset 1s ease;
  }
  .amp-flow__block.in-view .amp-flow__line path{ stroke-dashoffset: 0; }
}
.reveal-slide{ opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.reveal-slide--right{ transform: translateX(40px); }
.reveal-slide--left{ transform: translateX(-40px); }
.amp-flow__block.in-view .reveal-slide{ opacity: 1; transform: translateX(0); }
.amp-flow__media--placeholder{
  aspect-ratio: 635 / 378; background: var(--accent-tint); border: 1px solid var(--accent-tint-border);
  display: flex; align-items: center; justify-content: center; color: var(--accent-purple);
}
.amp-flow__media--placeholder svg{ width: 25%; height: 25%; }

/* Usability research - 3-up stat row, plain (no scroll animation). */
.amp-research-stats{ display: flex; gap: 32px; margin-top: 40px; }
.amp-research-stats__item{ flex: 1; min-width: 0; }
.amp-research-stats__value{ display: block; font-size: 19px; font-weight: 600; }
.amp-research-stats__label{ display: block; font-size: 15px; color: rgba(0,0,0,.75); margin-top: 4px; }

/* What-changed before/after cards. */
.amp-changed{ display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
.amp-changed__item{ display: flex; align-items: center; gap: 64px; }
.amp-changed__media{ flex: 0 0 48%; aspect-ratio: 1400 / 734; background: var(--accent-tint); border: 1px solid var(--accent-tint-border); border-radius: 10px; position: relative; overflow: hidden; }
.amp-changed__media video{ display: block; width: 100%; height: 100%; object-fit: cover; }
.amp-replay{
  position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; padding: 7px; border: 0; border-radius: 50%;
  background: rgba(22,21,29,.72); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.amp-replay svg{ width: 16px; height: 16px; }
.amp-replay:hover svg{ transform: rotate(-40deg); transition: transform .3s ease; }
.amp-changed__media.is-ended .amp-replay, .amp-anim.is-ended .amp-replay{ opacity: 1; transform: scale(1); pointer-events: auto; }
.amp-anim{ position: relative; }
.amp-anim video{ display: block; width: 100%; height: auto; aspect-ratio: 1650 / 1000; object-fit: cover; }
.amp-illustration-note{ margin: 8px 0 0; font-size: 12px; color: rgba(0,0,0,.5); text-align: center; }
.amp-changed__title{ font-size: 19px; font-weight: 600; margin: 0; }
.amp-changed__desc{ font-size: 15px; color: rgba(0,0,0,.75); margin: 12px 0 0; }

/* Reflection - reuses the eyebrow+title stacked pattern used site-wide. */
.amp-reflection{ display: flex; flex-direction: column; gap: 64px; }

@media (max-width: 900px){
  .amp-header{ padding: 16px; }
  .amp-shell{ flex-direction: column; padding: 0 20px; gap: 0; }
  .amp-nav{ display: none; }
  .amp-content{ max-width: none; }
  .amp-section{ padding: 64px 0; }
  .amp-stats, .amp-personas, .amp-research-stats{ flex-direction: column; gap: 32px; }
  .amp-flow__block, .amp-flow__block--left{ flex-direction: column; }
  .amp-flow__block--peek .amp-flow__media, .amp-flow__block--peek.amp-flow__block--left .amp-flow__media{ margin: 0; }
  .amp-changed__item{ flex-direction: column; gap: 16px; }
  .amp-changed__media{ flex-basis: auto; width: 100%; }
  .amp-pair{ flex-direction: column; }
  .amp-mission__steps{ flex-direction: column; }
  .amp-mission__arrow{ transform: rotate(90deg); }
}

/* Before/after two-column comparison - used repeatedly on the AI-workflow
   and AI-video-generator pages (research/usability/handoff/documentation). */
.amp-h3{ font-size: 21px; font-weight: 600; line-height: 1.4; margin: 0 0 4px; }
.amp-pair-block{ padding: 96px 0; }
.amp-pair{ display: flex; gap: 32px; margin-top: 32px; }
.amp-pair__col{ flex: 1; min-width: 0; }
.amp-pair__media{
  aspect-ratio: 549.5 / 312; background: #f2f2f2; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 24px;
}
.amp-pair__media img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.amp-pair__label{ font-size: 17px; font-weight: 600; margin: 16px 0 0; }
.amp-pair__label span{ font-weight: 400; }
.amp-pair__desc{ font-size: 15px; color: rgba(0,0,0,.75); margin: 8px 0 0; }

/* Mission / workflow step diagram - a wrapping row of steps with arrow
   separators, reading in order rather than replicating Figma's exact
   free-form zigzag (no animation was requested for this one). */
.amp-mission__steps{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 40px; }
.amp-mission__step{
  flex: 1 1 260px; background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  padding: 24px; font-size: 16px; font-weight: 500; text-align: center;
}
.amp-mission__arrow{ flex: 0 0 auto; color: rgba(0,0,0,.35); width: 20px; height: 20px; }

/* Style tiles (AI video generator) - a thumbnail + italic name pill. One set
   of elements does two jobs: floats in scattered on entry, then - as the
   section's own scroll-toggle trigger crosses the viewport - reels into an
   organized grid while the headline crossfades to "...narrowed to 6." Each
   tile carries its scatter (--sx/--sy) and grouped (--gx/--gy) position as
   CSS custom properties; toggling .is-grouped on the section swaps which
   pair drives left/top, so the same element visibly travels between them. */
.amp-styles{ position: relative; min-height: 180vh; }
.amp-styles__stage{ position: sticky; top: 96px; background: #fff; z-index: 1; }
.amp-styles__trigger{ position: absolute; top: 115vh; left: 0; width: 1px; height: 1px; pointer-events: none; }
.amp-styles__headline{ position: relative; }
.amp-styles__h{ transition: opacity .5s ease; }
.amp-styles__h--scatter{ opacity: 1; }
.amp-styles__h--grouped{ position: absolute; inset: 0; opacity: 0; }
.amp-styles.is-grouped .amp-styles__h--scatter{ opacity: 0; }
.amp-styles.is-grouped .amp-styles__h--grouped{ opacity: 1; position: static; }
.amp-styles .amp-bubble-field__caption.amp-styles__h--scatter{ position: static !important; margin-top: 24px; text-align: center; }
.amp-styles.is-grouped .amp-bubble-field__caption.amp-styles__h--scatter{ opacity: 0; pointer-events: none; }

.amp-style-tile{ display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.amp-style-tile__thumb{ width: 80px; height: 80px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,.25); object-fit: cover; display: block; }
.amp-style-tile__label{ background: #f2f2f2; border-radius: 20px; padding: 10px 16px; font-size: 15px; font-style: italic; white-space: nowrap; }

.amp-style-field{ position: relative; text-align: center; aspect-ratio: 1002 / 380; padding: 0 40px; margin-top: 40px; }
.amp-style-field .amp-style-tile{
  position: absolute; left: var(--sx); top: var(--sy);
  transform: translateY(16px) scale(.92);
  transition: opacity .6s ease, transform .6s ease, left .9s cubic-bezier(.16,1,.3,1), top .9s cubic-bezier(.16,1,.3,1);
}
.amp-style-field .amp-style-tile.in-view{ opacity: 1; transform: translateY(0) scale(1); animation: floatBob 5.2s ease-in-out infinite; animation-delay: .6s; }
.amp-styles.is-grouped .amp-style-field .amp-style-tile{ left: var(--gx); top: var(--gy); animation: none; }
.amp-styles.is-grouped .amp-style-field .amp-style-tile--drop{ opacity: 0 !important; transform: translateY(0) scale(.8); }
@media (max-width: 900px){ .amp-style-field{ display: none; } .amp-styles{ min-height: 0; } }

@media (max-width: 900px){
  .proj-topbar{ position: static; flex-wrap: wrap; }
  .proj-block{ padding: 64px 20px 0; }
  .proj-closing{ padding: 64px 20px; }
  .proj-media-row{ flex-direction: column; }
  .proj-evidence{ flex-direction: column; }
  .proj-closing__cards{ grid-template-columns: 1fr; }
}

/* ── Reel continuity: homepage card morphs into the case-study dock ───────── */
@view-transition { navigation: auto; }
.reel-card__viewport, .reel-dock__card{ view-transition-name: reel; }
::view-transition-group(reel){ animation-duration: .7s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-old(reel), ::view-transition-new(reel){ height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration: .45s; }

/* ── Docked reel (case-study pages) ──────────────────────────────────────── */
.reel-dock{
  /* Picture-in-picture: floats bottom-right over the case study. */
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: min(220px, calc((100vh - 140px) * 9 / 16));
  animation: reelDockIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes reelDockIn{ from{ opacity: 0; transform: translate(-30vw, -30vh) scale(1.8); } }
/* Coming from a homepage reel, the view transition flies the card here instead. */
html:active-view-transition .reel-dock{ animation: none; }
.reel-dock__card{ cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.reel-dock{ transition-property: left, top; }
.reel-dock .reel-dock__card{ transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, opacity .35s ease; }
.reel-dock.is-tucked{ pointer-events: none; }
.reel-dock.is-tucked .reel-dock__card{ opacity: 0; transform: translateY(40px) scale(.9); }
.reel-dock.is-dragging .reel-dock__card{
  cursor: grabbing; transform: scale(1.04);
  box-shadow: 0 2px 4px rgba(22,21,29,.08), 0 36px 64px -24px rgba(22,21,29,.5);
}
.reel-dock__card{
  position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #eee;
  box-shadow: 0 0 0 1px rgba(22,21,29,.08), 0 2px 14px rgba(22,21,29,.08), 0 24px 48px -24px rgba(22,21,29,.35);
}
.reel-dock__video{
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .26s ease, transform .5s cubic-bezier(.22,1,.36,1), filter .26s ease;
}
.reel-dock__card.is-switching .reel-dock__video{ opacity: 0; }
.reel-dock__loader{
  position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 3px solid rgba(22,21,29,.12); border-top-color: #8b5cf6; pointer-events: none;
  opacity: 0; transition: opacity .2s ease; animation: dockSpin .8s linear infinite;
}
.reel-dock__card.is-switching .reel-dock__loader{ opacity: 1; transition-delay: .15s; }
@keyframes dockSpin{ to{ transform: rotate(360deg); } }
.reel-dock__nav{ position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.reel-dock__btn{
  width: 28px; height: 28px; padding: 6px; border: 0; border-radius: 50%;
  background: rgba(58,63,75,.85); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, opacity .15s ease;
}
.reel-dock__btn:hover{ transform: scale(1.08); }
.reel-dock__btn:disabled{ opacity: .35; cursor: default; transform: none; }
.reel-dock__btn svg{ width: 16px; height: 16px; }
.reel-dock__ctrls{ position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 2; }
.reel-dock__replay{
  position: absolute; inset: 0; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(8,7,12,.45); color: #fff; font: 600 16px/1 'Inter', sans-serif;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
}
.reel-dock__replay svg{
  width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: rgba(255,255,255,.18);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.reel-dock__replay:hover svg{ transform: rotate(-30deg) scale(1.06); }
.reel-dock__card.is-ended .reel-dock__replay{ opacity: 1; visibility: visible; transition: opacity .35s ease; }
.reel-dock__card.is-ended .reel-dock__video{ filter: blur(2px); }

@media (max-width: 900px){
  /* Smaller floating player on phones. */
  .reel-dock{ right: 12px; bottom: 12px; width: 112px; }
  .reel-dock__card{ border-radius: 14px; }
  .reel-dock__nav{ display: none; }
  .reel-dock__ctrls{ right: 6px; bottom: 6px; }
  .reel-dock__ctrls .reel-dock__btn{ width: 24px; height: 24px; padding: 5px; }
}

/* ── Text-only reel card (reflection) ─────────────────────────────────────── */
.reel-text{
  box-sizing: border-box; padding: 9% 9% 10%;
  display: flex; flex-direction: column; justify-content: center; gap: 4.2%;
  background: linear-gradient(160deg, #fff 0%, #f4f0ff 55%, #fdeef6 100%);
  color: #16151d; container-type: inline-size;
}
.reel-text__eyebrow{ margin: 0; font: 600 3.9cqw/1.3 'Inter', sans-serif; letter-spacing: .02em; color: #6d28d9; text-transform: uppercase; }
.reel-text__heading{
  margin: 0 0 3%; font: 400 11.5cqw/1.05 'Fraunces', Georgia, serif;
  background: linear-gradient(90deg, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.reel-text__item{ padding-top: 4%; border-top: 1px solid #e4d9ff; }
.reel-text__label{ margin: 0 0 1.5%; font: 700 3.9cqw/1.3 'Inter', sans-serif; color: #6d28d9; }
.reel-text__body{ margin: 0; font: 400 5.2cqw/1.35 'Fraunces', Georgia, serif; color: #16151d; }
.reel-home__bg-img--text{ background: linear-gradient(160deg, #f4f0ff, #fdeef6); }

/* Case-study hero clips: shown whole on the page background (no tinted frame, no cropping). */
.amp-hero__clip{ margin-top: 32px; padding: 28px; border-radius: 16px; background: #f4f4f7; border: 1px solid #ececf2; }
.amp-hero__clip > video, .amp-hero__clip .amp-anim{ border-radius: 10px; overflow: hidden; }
.amp-hero__clip .amp-replay{ top: 12px; left: 12px; }
.amp-hero__clip video, .amp-hero__clip .amp-anim video{ display: block; width: 100%; height: auto; aspect-ratio: auto; }

/* Side menu: every project is a heading with a chevron; the open one lists its sections. */
.amp-nav__group{ display: flex; flex-direction: column; }
.amp-nav__other{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.amp-nav__other svg{ width: 14px; height: 14px; flex-shrink: 0; }

/* Big centered play button on the homepage reel. */
.reel-card__bigplay{
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 76px; height: 76px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, #8b5cf6, #ec4899);
  box-shadow: 0 14px 34px -8px rgba(139,92,246,.55);
  opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(.85);
  transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s linear .25s;
}
/* Soft pulsing ring so it reads as "press me" without shouting. */
.reel-card__bigplay::before{
  content: ''; position: absolute; inset: -10px; border-radius: 50%; background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(236,72,153,.22));
  z-index: -1; animation: bigplayPulse 2.4s ease-in-out infinite;
}
@keyframes bigplayPulse{ 50%{ transform: scale(1.12); opacity: .55; } }
.reel-card__bigplay svg{ width: 34px; height: 34px; display: block; /* the triangle's centroid sits at the centre of the viewBox */ }
.reel-card__bigplay.is-visible{ opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.reel-card__bigplay:hover{ transform: translate(-50%, -50%) scale(1.06); }

/* Reel CTA label: always one line (long labels shrink to fit - see fitCtaLabels in homepage.js). */
.reel-copy__cta span{ white-space: nowrap; min-width: 0; }

/* Persona quotes float around the avatar only (positions are relative to this stage, not the
   whole card), so they never cover the title and description below. */
.amp-persona__stage{ position: relative; width: 100%; flex: 1; display: flex; justify-content: center; align-items: flex-end; padding-top: 150px; min-height: 360px; }
.amp-persona{ aspect-ratio: auto; justify-content: flex-start; }
@media (min-width: 901px) and (max-width: 1280px){
  /* Quotes stacked on the left, the persona on the right. */
  .amp-persona__stage{ display: grid; grid-template-columns: 1fr auto; column-gap: 32px; row-gap: 14px; align-items: center; padding-top: 0; min-height: 0; }
  .amp-persona__stage .chat-bubble{ grid-column: 1; justify-self: end; margin: 0; }
  .amp-persona__stage .amp-persona__avatar{ grid-column: 2; grid-row: 1 / span 3; }
}

/* Animated illustrations sit inside a padded card (same frame as the hero clips). */
.amp-anim{ padding: 20px; background: #f4f4f7; border: 1px solid #ececf2; border-radius: 14px; }
.amp-anim video{ border-radius: 8px; }
.amp-anim .amp-replay{ top: 26px; left: 26px; }
.amp-hero__clip .amp-anim{ padding: 0; background: none; border: 0; border-radius: 10px; }
.amp-hero__clip .amp-anim .amp-replay{ top: 12px; left: 12px; }
.amp-changed__media{ padding: 14px; aspect-ratio: auto; }
.amp-changed__media video{ height: auto; aspect-ratio: 1400 / 734; border-radius: 8px; }
.amp-changed__media .amp-replay{ top: 20px; left: 20px; }
.amp-flow__media{ overflow: visible; }

/* Illustration boxes: one look everywhere - light grey, thin border, square corners. */
.amp-anim, .amp-hero__clip, .amp-changed__media{ background: #f4f4f7; border: 1px solid #ececf2; border-radius: 0; }
.amp-anim video, .amp-hero__clip > video, .amp-hero__clip .amp-anim, .amp-changed__media video{ border-radius: 0; }
.amp-hero__clip .amp-anim{ border: 0; }
.amp-flow__media{ border-radius: 0; }
.amp-anim, .amp-hero__clip, .amp-changed__media{ border-radius: 20px; }
.amp-hero__clip .amp-anim{ border-radius: 0; }

/* Sticky concept-flow title: cover the strip between the header and the title so content doesn't peek through. */
.amp-flow__title::before{ content: ''; position: absolute; left: -20px; right: -100vw; bottom: 100%; height: 140px; background: #fff; }
/* The sticky title's white band runs to the window's right edge, so screens that reach past the column never show beside it. */
.amp-flow__title::after{ content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; background: #fff; }
.amp-flow__title{ z-index: 20; }
/* The AI-workflow hero clip already has its own frame - no padding around it. */
.amp-hero__clip--flush{ padding: 0; overflow: hidden; }
.amp-hero__clip--flush > video{ display: block; }

/* Floating player: close, resize, hover-only controls. */
.reel-dock__btn--close{ position: absolute; top: 12px; left: 12px; z-index: 2; width: 26px; height: 26px; padding: 7px; }
.reel-dock__nav, .reel-dock__ctrls, .reel-dock__btn--close, .reel-dock__resize{ transition: opacity .3s ease; }
.reel-dock__card.is-idle .reel-dock__nav, .reel-dock__card.is-idle .reel-dock__ctrls,
.reel-dock__card.is-idle .reel-dock__btn--close, .reel-dock__card.is-idle .reel-dock__resize{ opacity: 0; pointer-events: none; }
.reel-dock__resize{
  position: absolute; z-index: 3; width: 22px; height: 22px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 45%, rgba(58,63,75,.85) 46%, rgba(58,63,75,.85) 54%, transparent 55%, transparent 65%, rgba(58,63,75,.85) 66%, rgba(58,63,75,.85) 74%, transparent 75%);
}
/* handle sits on the corner that faces the page */
.reel-dock[data-corner="br"] .reel-dock__resize, .reel-dock:not([data-corner]) .reel-dock__resize{ top: 4px; left: 4px; transform: rotate(180deg); }
.reel-dock[data-corner="bl"] .reel-dock__resize{ top: 4px; right: 4px; transform: rotate(270deg); cursor: nesw-resize; }
.reel-dock[data-corner="tr"] .reel-dock__resize{ bottom: 4px; left: 4px; transform: rotate(90deg); cursor: nesw-resize; }
.reel-dock[data-corner="tl"] .reel-dock__resize{ bottom: 4px; right: 4px; }
.reel-dock[data-corner="br"] .reel-dock__btn--close, .reel-dock:not([data-corner]) .reel-dock__btn--close{ left: 32px; }
.reel-dock.is-resizing{ transition: none !important; }
.reel-dock.is-closed{ opacity: 0; transform: scale(.85) translateY(20px); pointer-events: none; transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.reel-dock__reopen{
  position: fixed; right: 24px; bottom: 24px; z-index: 61; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: #16151d; color: #fff; font: 600 15px/1 'Inter', sans-serif; box-shadow: 0 10px 30px -10px rgba(22,21,29,.5);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.reel-dock__reopen svg{ width: 16px; height: 16px; }
.reel-dock__reopen.is-visible{ opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease; }
/* Resize: no visible handle - just an invisible grab area on the inner corner with the resize cursor. */
.reel-dock__resize{ background: none !important; width: 28px; height: 28px; transform: none !important; }
.reel-dock[data-corner="br"] .reel-dock__resize, .reel-dock:not([data-corner]) .reel-dock__resize{ top: 0; left: 0; cursor: nwse-resize; }
.reel-dock[data-corner="bl"] .reel-dock__resize{ top: 0; right: 0; left: auto; cursor: nesw-resize; }
.reel-dock[data-corner="tr"] .reel-dock__resize{ bottom: 0; left: 0; top: auto; cursor: nesw-resize; }
.reel-dock[data-corner="tl"] .reel-dock__resize{ bottom: 0; right: 0; top: auto; left: auto; cursor: nwse-resize; }
.reel-dock__card.is-idle .reel-dock__resize{ opacity: 1; pointer-events: auto; }
.reel-dock[data-corner="br"] .reel-dock__btn--close, .reel-dock:not([data-corner]) .reel-dock__btn--close{ left: 12px; top: 12px; }

/* ── Case-study endings ─────────────────────────────────────────────────── */
.next-project{ height: 170vh; position: relative; }
.next-project__sticky{ position: sticky; top: 0; height: 100vh; display: flex; align-items: center; max-width: 1440px; margin: 0 auto; padding: 0 65px; }
.next-project__inner{
  display: block; width: 100%; text-decoration: none; color: #16151d;
  opacity: calc(.3 + var(--p, 0) * 1.4); transform: translateY(calc((1 - min(1, var(--p, 0) * 2)) * 40px));
}
.next-project__eyebrow{ margin: 0 0 8px; font: 600 16px/1 'Inter', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #6d28d9; }
.next-project__name{ margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(48px, 7vw, 104px); line-height: 1.02;
  background: linear-gradient(90deg, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.next-project__desc{ max-width: 640px; margin: 16px 0 0; font-size: 20px; line-height: 1.5; color: rgba(0,0,0,.65); }
.next-project__hint{ display: inline-flex; gap: 8px; margin-top: 36px; font-size: 16px; font-weight: 600; color: #6d28d9; }
.next-project__hint span{ display: inline-block; animation: nextBob 1.4s ease-in-out infinite; }
@keyframes nextBob{ 50%{ transform: translateY(6px); } }

.next-splash{
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background: radial-gradient(120% 120% at 30% 20%, #8b5cf6 0%, #b05cf0 40%, #ec4899 100%);
  clip-path: circle(0px at 50% 80%);
}
/* Same layout as the section underneath, in white - the name stays put while the colour floods in. */
.next-splash .next-project__inner{ color: #fff; }
.next-splash .next-project__eyebrow, .next-splash .next-project__hint{ color: #fff; }
.next-splash .next-project__name{ background: none; color: #fff; }
.next-splash .next-project__desc{ color: rgba(255,255,255,.85); }
.next-splash-in{
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: radial-gradient(120% 120% at 30% 20%, #8b5cf6 0%, #b05cf0 40%, #ec4899 100%);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.next-splash-in.is-out{ opacity: 0; transform: scale(1.06); }

.moves-numbers{ background: #08070c; color: #fff; padding: 140px 65px; }
.moves-numbers__inner{ max-width: 1310px; margin: 0 auto; }
.moves-numbers__title{ margin: 0; max-width: 900px; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(40px, 5.5vw, 76px); line-height: 1.1; }
.moves-numbers__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.moves-numbers__eyebrow{
  margin: 0 0 18px; font: 600 14px/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(90deg, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.moves-numbers__sub{ max-width: 620px; margin: 20px 0 0; font-size: 20px; line-height: 1.5; opacity: .7; }
.moves-btn{
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25); color: #fff; text-decoration: none; font: 500 18px/1 'Inter', sans-serif;
  transition: background-color .2s ease, transform .2s ease;
}
.moves-btn svg{ width: 20px; height: 20px; flex-shrink: 0; }
.moves-btn:hover{ background: rgba(255,255,255,.08); transform: translateY(-2px); }
.moves-btn--solid{ background: #fff; color: #08070c; border-color: #fff; }
.moves-btn--solid:hover{ background: #f0eef7; }
.moves-btn--icon{ width: 56px; padding: 0; justify-content: center; }
@media (max-width: 900px){ .next-project__sticky, .moves-numbers{ padding-left: 20px; padding-right: 20px; } }

/* Before/after boxes match the other illustration boxes. */
.amp-pair__media{ position: relative; aspect-ratio: auto; padding: 20px; background: #f4f4f7; border: 1px solid #ececf2; border-radius: 20px; display: block; }
.amp-pair__media img, .amp-pair__media video{ display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: contain; }
.amp-pair__media .amp-replay{ top: 26px; left: 26px; }
.amp-pair__media.is-ended .amp-replay{ opacity: 1; transform: scale(1); pointer-events: auto; }

/* Room between the sticky side nav and the page ending, so the nav never runs into it. */
.amp-shell:has(+ .moves-numbers), .amp-shell:has(+ .next-project){ padding-bottom: 160px; }

/* ── Reel progress bar (scrubbable) ─────────────────────────────────────── */
.reel-scrub{
  position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 4; cursor: pointer; touch-action: none;
  display: flex; align-items: flex-end;
}
.reel-scrub::before{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(22,21,29,.12); transition: height .15s ease; }
.reel-scrub__fill{
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, #8b5cf6, #ec4899); transition: height .15s ease;
}
.reel-scrub__knob{
  position: absolute; bottom: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(22,21,29,.35); opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease;
}
.reel-scrub:hover::before, .reel-scrub:hover .reel-scrub__fill, .reel-scrub.is-dragging::before, .reel-scrub.is-dragging .reel-scrub__fill{ height: 6px; }
.reel-scrub:hover .reel-scrub__knob, .reel-scrub.is-dragging .reel-scrub__knob, .reel-scrub:focus-visible .reel-scrub__knob{ opacity: 1; transform: scale(1); bottom: 0; }
.reel-scrub.is-hidden{ display: none; }

/* ── "Next project" interstitial on the homepage reel ───────────────────── */
.reel-card__project{
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center; color: #fff; pointer-events: none;
  background: radial-gradient(120% 120% at 30% 20%, #8b5cf6 0%, #b05cf0 40%, #ec4899 100%);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s;
}
.reel-card__project.is-visible{ opacity: 1; visibility: visible; transition: opacity .3s ease; }
.reel-card__project-eyebrow{ margin: 0; font: 600 13px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.reel-card__project-name{ margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.reel-card__project-bar{ width: 96px; height: 3px; margin-top: 14px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.reel-card__project-bar span{ display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.reel-card__project.is-visible .reel-card__project-bar span{ animation: projectLoad 1.6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes projectLoad{ to{ transform: scaleX(1); } }
.reel-card__project.is-visible .reel-card__project-name{ animation: projectIn .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes projectIn{ from{ opacity: 0; transform: translateY(12px); } }

/* Homepage: frosted contact screen after the last reel (same glass as the intro). */
.reel-outro{
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; opacity: 0;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  pointer-events: none;
}
.reel-outro.is-on{ pointer-events: auto; }
.reel-outro .moves-numbers{ width: 100%; background: transparent; color: #16151d; }
.reel-outro .moves-btn{ border-color: rgba(22,21,29,.2); color: #16151d; }
.reel-outro .moves-btn:hover{ background: rgba(22,21,29,.05); }
.reel-outro .moves-btn--solid{ background: #16151d; border-color: #16151d; color: #fff; }
.reel-outro .moves-btn--solid:hover{ background: #2a2833; }

/* Reels for projects without a case-study page yet */
.reel-copy__date{ margin: 0 0 6px; font: 400 14px/1.4 'Inter', sans-serif; color: rgba(0,0,0,.55); }   /* plain label - no pill */
.reel-copy__cta--soon{ cursor: default; background: #f1f1f4 !important; color: rgba(22,21,29,.45) !important; box-shadow: none !important; }
.reel-copy__cta--soon:hover{ transform: none !important; }
.moves-numbers__title strong{ font-weight: 600; }
.moves-numbers__lead{ font-weight: 200; opacity: .55; }
/* Homepage contact screen: the two lines reveal one after the other, then the buttons. */
.reel-outro .moves-numbers__lead, .reel-outro .moves-numbers__title strong, .reel-outro .moves-numbers__actions{
  display: inline-block; opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1), filter .7s ease;
}
.reel-outro .moves-numbers__actions{ display: flex; }
.reel-outro.is-on .moves-numbers__lead{ opacity: .55; transform: none; filter: none; transition-delay: .1s; }
.reel-outro.is-on .moves-numbers__title strong{ opacity: 1; transform: none; filter: none; transition-delay: .45s; }
.reel-outro.is-on .moves-numbers__actions{ opacity: 1; transform: none; filter: none; transition-delay: .8s; }

/* Room for the floating reel (set by reel-dock.js), so it never hides page content. */
@media (min-width: 1100px){
  .amp-shell{
    padding-right: max(65px, var(--dock-reserve-r, 0px));
    padding-left: max(65px, var(--dock-reserve-l, 0px));
    max-width: calc(1440px + var(--dock-reserve-r, 0px) + var(--dock-reserve-l, 0px));
    transition: padding .45s cubic-bezier(.22,1,.36,1);
  }
}

/* Quote scatter needs its full design width. Decide by the content column's real width
   (it narrows when room is kept for the floating reel), not by the window width. */
.amp-content{ container-type: inline-size; }
@container (max-width: 1000px){
  .amp-bubble-field{ aspect-ratio: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; }
  .amp-bubble-field > .amp-eyebrow, .amp-bubble-field > .amp-h1{ width: 100%; }
  .amp-bubble-field > .amp-h1{ margin-bottom: 24px; }
  .amp-bubble{ position: static; max-width: min(300px, 46%); }
  .amp-bubble-field__caption{ position: static; width: 100%; margin-top: 16px; }
}

/* Grey illustration boxes: no border, 10px corners. */
.amp-anim, .amp-hero__clip, .amp-changed__media, .amp-pair__media{ border: 0; border-radius: 10px; }
.amp-hero__clip .amp-anim{ border-radius: 0; }

/* Styles research - scroll-scrubbed: tiles glide from the scatter to their group with --p (0 → 1). */
.amp-style-field .amp-style-tile{
  left: calc(var(--sx) + (var(--gx) - var(--sx)) * var(--p, 0));
  top: calc(var(--sy) + (var(--gy) - var(--sy)) * var(--p, 0));
  transition: opacity .6s ease, transform .6s ease;
}
.amp-styles.is-moving .amp-style-field .amp-style-tile{ animation: none; }
.amp-style-field .amp-style-tile--drop.in-view{ opacity: calc(1 - var(--p, 0) * 1.6); transform: scale(calc(1 - var(--p, 0) * .2)); }
.amp-styles .amp-styles__h--scatter{ opacity: calc(1 - var(--p, 0) * 2); transition: none; }
.amp-styles .amp-styles__h--grouped{ opacity: calc(var(--p, 0) * 2 - 1); transition: none; position: absolute; inset: 0; }

/* ── Homepage on phones: Instagram-Reels style ────────────────────────────
   The reel fills the screen; copy sits over its bottom on a dark gradient; name + contacts over the top. */
@media (max-width: 700px){
  .reel-home__bg{ display: none; }
  .reel-home__grid{ display: block; padding: 0; }
  .reel-card{ position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; justify-self: stretch; z-index: 0; }
  .reel-card__viewport{ border-radius: 0; box-shadow: none; background: #111; }
  .reel-card__viewport::before, .reel-card__viewport::after{ content: ''; position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
  .reel-card__viewport::before{ top: 0; height: 110px; background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)); }
  .reel-card__viewport::after{ bottom: 0; height: 46%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.72)); }

  .reel-home__name{ position: absolute; top: 14px; left: 16px; z-index: 5; margin: 0; white-space: nowrap; font-size: 15px; color: #fff; }
  .reel-home__grid > .reel-contacts{ position: absolute; top: 6px; right: 8px; z-index: 5; gap: 2px; }
  .reel-home__grid > .reel-contacts .reel-contacts__btn{ color: #fff; background: transparent; }
  .reel-card__ctrls{ top: 44px; padding: 8px 12px; z-index: 5; }

  .reel-copy{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; max-width: none; pointer-events: none; }
  .reel-copy__item{ padding: 0 16px 24px; gap: 10px; justify-content: flex-end; }
  .reel-copy__text{ text-shadow: none; gap: 4px; }
  .reel-copy__date{ color: rgba(255,255,255,.7); font-size: 12px; margin: 0; }
  .reel-copy__title{ font-size: 16px; color: #fff; }
  .reel-copy__desc{ font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.85); }
  .reel-copy__cta{ pointer-events: auto; align-self: flex-start; background: #fff; color: #16151d; font-size: 13px; padding: 8px 14px; border-radius: 8px; }
  .reel-copy__cta svg path{ stroke: #16151d; }
  .reel-card .reel-scrub{ z-index: 6; }
  .reel-intro, .reel-outro{ z-index: 10; }
}

/* Case studies on phones: full-width content column, compact floating reel. */
@media (max-width: 900px){
  .amp-content{ width: 100%; align-self: stretch; }
}
@media (max-width: 700px){
  .reel-dock{ width: var(--dock-w-phone, 140px) !important; right: 12px; bottom: 12px; }   /* pinch to resize (reel-dock.js) */
}
@media (max-width: 700px){
  /* Reel fits the screen (whole frame visible); letterbox matches the reels' white. */
  .reel-card__viewport{ background: #fff; }
  .reel-card__media{ object-fit: contain; background-color: #fff !important; background-size: contain !important; }
  /* Case-study header on one line. */
  .amp-header{ padding: 14px 16px; gap: 8px; }
  .amp-header .site-name{ font-size: 15px; white-space: nowrap; }
  .amp-header .reel-contacts{ gap: 0; flex-shrink: 0; }
  .amp-header .reel-contacts__btn{ width: 34px; height: 34px; }
}
@media (max-width: 700px){
  /* Black letterbox (expected on a phone) + softer, eased gradients. */
  .reel-home .reel-card__viewport{ background: #000; }
  .reel-home .reel-card__media{ background-color: #000 !important; }
  .reel-home__stage{ background: #000; }
  .reel-card__viewport::before{ height: 96px; background: linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,.16) 55%, rgba(0,0,0,0)); }
  .reel-card__viewport::after{ height: 42%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.18) 35%, rgba(0,0,0,.48) 70%, rgba(0,0,0,.62)); }
}

/* Phones: email / phone open as a small panel under the header instead of squeezing in next to the icons. */
@media (max-width: 700px){
  .reel-contacts__reveal .reel-contacts__value{
    position: fixed; left: 12px; right: 12px; top: 58px; z-index: 60;
    display: flex; flex-direction: column; gap: 2px; max-width: none !important; padding: 14px 16px !important;
    background: #fff; color: #16151d; border-radius: 12px; box-shadow: 0 10px 30px -8px rgba(22,21,29,.35);
    font: 600 16px/1.3 'Inter', sans-serif !important; text-decoration: none; white-space: nowrap;
    opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1);
  }
  .reel-contacts__reveal.is-open .reel-contacts__value{ opacity: 1; transform: none; pointer-events: auto; }
  .reel-contacts__reveal .reel-contacts__value::before{ font-size: 12px; font-weight: 500; color: rgba(22,21,29,.55); }
  .reel-contacts__reveal[data-kind="email"] .reel-contacts__value::before{ content: 'Email · tap to write'; }
  .reel-contacts__reveal[data-kind="phone"] .reel-contacts__value::before{ content: 'Phone · tap for WhatsApp'; }
}

/* First section starts level with the side menu, not 120px down. */
.amp-content > .amp-section:first-child{ padding-top: 64px; }
@media (max-width: 900px){ .amp-content > .amp-section:first-child{ padding-top: 24px; } }

/* Personas, stacked layout: tails point sideways at the character; the second persona is mirrored. */
@media (min-width: 901px) and (max-width: 1280px){
  .amp-persona__stage .chat-bubble::after{ left: auto; right: -7px; top: 50%; bottom: auto; transform: translateY(-50%); clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .amp-persona:nth-child(2) .amp-persona__stage{ grid-template-columns: auto 1fr; }
  .amp-persona:nth-child(2) .amp-persona__stage .chat-bubble{ grid-column: 2; justify-self: start; }
  .amp-persona:nth-child(2) .amp-persona__stage .amp-persona__avatar{ grid-column: 1; }
  .amp-persona:nth-child(2) .amp-persona__stage .chat-bubble::after{ right: auto; left: -7px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
}
@container (max-width: 1000px){
  .amp-personas{ flex-direction: column; gap: 72px; }
  .amp-persona__stage{ display: grid; grid-template-columns: 1fr auto; column-gap: 32px; row-gap: 14px; align-items: center; padding-top: 0; min-height: 0; }
  .amp-persona__stage .chat-bubble{ position: static; grid-column: 1; justify-self: end; margin: 0; max-width: min(320px, 90%); }
  .amp-persona__stage .amp-persona__avatar{ grid-column: 2; grid-row: 1 / span 3; }
  .amp-persona__stage .chat-bubble::after{ left: auto; right: -7px; top: 50%; bottom: auto; transform: translateY(-50%); clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .amp-persona:nth-child(2) .amp-persona__stage{ grid-template-columns: auto 1fr; }
  .amp-persona:nth-child(2) .amp-persona__stage .chat-bubble{ grid-column: 2; justify-self: start; }
  .amp-persona:nth-child(2) .amp-persona__stage .amp-persona__avatar{ grid-column: 1; }
  .amp-persona:nth-child(2) .amp-persona__stage .chat-bubble::after{ right: auto; left: -7px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
}
@media (min-width: 901px) and (max-width: 1280px){
  .amp-persona__stage, .amp-persona:nth-child(2) .amp-persona__stage{ grid-template-columns: auto auto; justify-content: center; }
}
@container (max-width: 1000px){
  .amp-persona__stage, .amp-persona:nth-child(2) .amp-persona__stage{ grid-template-columns: auto auto; justify-content: center; }
}
/* Phones: thumb-sized targets (≈44px). */
@media (max-width: 700px){
  .reel-home__grid > .reel-contacts .reel-contacts__btn,
  .amp-header .reel-contacts__btn{ width: 44px; height: 44px; }
  .reel-card__ctrls{ top: 58px; right: 4px; gap: 10px; padding: 8px 12px; }
  .reel-card__ctrl{ width: 40px; height: 40px; padding: 10px; background: rgba(22,21,29,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .reel-card__ctrl svg{ width: 20px; height: 20px; }
  .reel-scrub{ height: 30px; }
  .reel-dock__btn{ width: 34px; height: 34px; padding: 8px; }
}

/* Hamburger + menu sheet (phones only). */
.amp-burger{ display: none; }
@media (max-width: 900px){
  .amp-burger{
    display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0 11px;
    margin-left: 2px; border: 0; background: none; cursor: pointer; flex-shrink: 0;
  }
  .amp-burger span{ display: block; height: 2px; border-radius: 2px; background: #16151d; transition: transform .25s ease; }
  body.nav-open .amp-burger span:first-child{ transform: translateY(4px) rotate(45deg); }
  body.nav-open .amp-burger span:last-child{ transform: translateY(-4px) rotate(-45deg); }
  body.nav-open{ overflow: hidden; }
  body.nav-open .amp-nav{
    display: flex; position: fixed; top: 62px; left: 0; right: 0; bottom: 0; z-index: 55; width: auto;
    padding: 24px 24px 40px; background: #fff; overflow-y: auto; gap: 28px;
  }
  body.nav-open .amp-nav__list{ max-height: none; opacity: 1; }
  body.nav-open .amp-nav__list a, body.nav-open .amp-nav__other, body.nav-open .amp-nav__toggle{ font-size: 17px; padding: 6px 0; }
  body.nav-open .reel-dock{ display: none; }
}
@media (max-width: 700px){ .amp-header .reel-contacts{ margin-left: auto; } }

@media (max-width: 900px){ body.nav-open .amp-nav{ max-height: none; height: auto; } }
@media (max-width: 700px){
  /* Header on phones: name only, so the icons and menu fit. */
  .amp-header .site-name{ font-size: 0; }
  .amp-header .site-name strong{ font-size: 17px; }
  .amp-header .reel-contacts__btn{ width: 42px; height: 42px; }
}


/* Phones size the page to its widest element; slide-in animations start off to the right, which made
   the page 730px wide on a 375px screen. Clip horizontally at the root (clip keeps sticky elements working). */
html, body{ overflow-x: clip; }

/* Last intro line: colour splash on a scroll hold (like the case-study endings). */
.reel-intro__splash{
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(120% 120% at 30% 20%, #8b5cf6 0%, #b05cf0 40%, #ec4899 100%);
  clip-path: circle(0px at 50% 50%);
}
.reel-intro__splash .reel-intro__line{ color: #fff; margin: 0; opacity: 1; transform: none; filter: none; text-align: center; }
.reel-intro__splash{ padding: 0 64px; }
@media (max-width: 900px){ .reel-intro__splash{ padding: 0 16px; } }


/* Intro lines that act out their idea - they play once the line settles in the centre (.is-here). */
/* 1 · simple text: the filler words get struck out, then collapse away. */
.il-cut{
  display: inline-block; vertical-align: bottom; white-space: nowrap; overflow: hidden; max-width: 12em;
  color: rgba(22,21,29,.4); text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: .06em;
}
.reel-intro__line.is-here .il-cut{ animation: ilStrike .45s ease .5s forwards, ilCollapse .7s cubic-bezier(.65,0,.35,1) 1.2s forwards; }
@keyframes ilStrike{ to{ text-decoration-color: #ec4899; } }
@keyframes ilCollapse{ to{ max-width: 0; opacity: 0; text-decoration-color: #ec4899; } }
/* 2 · drives action: a cursor glides in and clicks the word, which presses like a button. */
.il-click{ position: relative; display: inline-block; }
.il-click::after{
  content: ''; position: absolute; width: .42em; height: .58em; left: 55%; top: 55%; opacity: 0;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 56'%3E%3Cpath d='M4 4v40l10-10 7 16 7-3-7-16h14z' fill='%2316151d' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: translate(2.4em, 1.4em);
}
.reel-intro__line.is-here .il-click{ animation: ilPress .32s ease 1.25s; }
.reel-intro__line.is-here .il-click::after{ animation: ilCursor .8s cubic-bezier(.22,1,.36,1) .4s forwards; }
@keyframes ilCursor{ to{ opacity: 1; transform: translate(0, 0); } }
@keyframes ilPress{ 45%{ transform: scale(.93); } }
/* 3 · video tells the story: words light up one by one, like captions. */
.il-cap{ color: rgba(22,21,29,.16); }
.reel-intro__line.is-here .il-cap{ animation: ilCaption .35s ease forwards; animation-delay: calc(.35s + var(--i, 0) * .32s); }
@keyframes ilCaption{ to{ color: #16151d; } }

/* Phones: hamburger left of the name; the menu is a drawer sliding in from the left. */
@media (max-width: 900px){
  .amp-header .amp-burger{ order: -1; margin: 0 4px 0 -10px; }
  .amp-header .site-name{ margin-right: auto; }
  .amp-nav{
    display: flex !important; position: fixed !important; top: 62px; left: 0; bottom: 0; z-index: 56;
    width: min(320px, 84vw); max-height: none; height: auto; padding: 24px 24px 40px; gap: 26px;
    background: #fff; overflow-y: auto; box-shadow: 12px 0 40px -20px rgba(22,21,29,.35);
    transform: translateX(-105%); transition: transform .35s cubic-bezier(.22,1,.36,1); visibility: hidden;
  }
  body.nav-open .amp-nav{ transform: none; visibility: visible; right: auto; }
  /* Dim the page with the drawer's own shadow (a separate overlay ended up above the drawer). */
  body.nav-open .amp-nav{ box-shadow: 0 0 0 100vmax rgba(22,21,29,.32); }
}
@media (max-width: 900px){
  /* Open state: the two lines become a clear ✕ (centred). */
  .amp-burger span{ transform-origin: center; }
  body.nav-open .amp-burger span:first-child{ transform: translateY(4px) rotate(45deg); }
  body.nav-open .amp-burger span:last-child{ transform: translateY(-4px) rotate(-45deg); }
}
@media (max-width: 900px){ body.nav-open .amp-header{ z-index: 57; } }

/* No connector line between a flow screen and its text. */
.amp-flow__line{ display: none !important; }
/* Concept flow alternates: 1st screen right / text left, the next one flipped, and so on. */
@media (min-width: 901px){
  .amp-flow__blocks > .amp-flow__block:nth-child(odd){ flex-direction: row-reverse; }
  .amp-flow__blocks > .amp-flow__block:nth-child(even){ flex-direction: row; }
  .amp-flow__blocks > .amp-flow__block:nth-child(odd).amp-flow__block--peek .amp-flow__media{ margin-left: 0; margin-right: -15%; }
  .amp-flow__blocks > .amp-flow__block:nth-child(even).amp-flow__block--peek .amp-flow__media{ margin-right: 0; margin-left: -15%; }
}

/* Impact benefits: an even grid - every row uses the same columns. */
.amp-benefits{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; margin-top: 40px; }
.amp-benefits__item{ display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid rgba(22,21,29,.1); }
.amp-benefits__title{ font-size: 19px; font-weight: 600; }
.amp-benefits__desc{ font-size: 15px; line-height: 1.5; color: rgba(0,0,0,.65); }
@container (max-width: 760px){ .amp-benefits{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px){ .amp-benefits{ grid-template-columns: 1fr; gap: 20px; } }

/* Case-study top: less empty space, and the header shares the page's side margins (same left edge as the menu). */
.amp-nav{ padding-top: 24px; }
.amp-content > .amp-section:first-child{ padding-top: 24px; }
@media (min-width: 901px){
  .amp-header{ padding-left: max(65px, calc((100vw - 1440px) / 2 + 65px)); padding-right: max(65px, calc((100vw - 1440px) / 2 + 65px)); }
}
@media (max-width: 900px){ .amp-header{ padding-left: 20px; padding-right: 20px; } }

/* Hidden visitor dashboard (3 clicks on the name). */
.stats-panel{ position: fixed; inset: 0; z-index: 200; background: #fff; display: flex; flex-direction: column; font-family: 'Inter', sans-serif; color: #16151d; }
.stats-panel__head{ display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e7e5ee; }
.stats-panel__head h2{ margin: 0; font-size: 22px; } .stats-panel__head small{ color: rgba(0,0,0,.5); font-weight: 500; margin-left: 6px; }
.stats-panel__head button{ width: 44px; height: 44px; border: 0; background: none; font-size: 20px; cursor: pointer; }
.stats-panel__body{ overflow-y: auto; padding: 8px 24px 40px; display: grid; gap: 16px; }
.stats-panel__visitor{ border: 1px solid #e7e5ee; border-radius: 10px; padding: 16px; }
.stats-panel__visitor header{ display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 14px; color: rgba(0,0,0,.6); }
.stats-panel__visitor header strong{ font-size: 16px; color: #16151d; }
.stats-panel__pages{ display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0; font-size: 13px; color: rgba(0,0,0,.65); }
.stats-panel__visitor table{ width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-panel__visitor td{ padding: 4px 6px; border-top: 1px solid #f0eff4; }
.stats-panel__visitor td:nth-child(2){ width: 40%; }
.stats-panel__visitor td i{ display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #16151d var(--w), #ececf2 var(--w)); }
@media (max-width: 700px){
  /* Intro sentences: plain white, no reel gradients or black bars showing through. */
  .reel-card__viewport::before, .reel-card__viewport::after{ transition: opacity .4s ease; }
  .reel-home:not(.is-intro-done) .reel-card__viewport::before,
  .reel-home:not(.is-intro-done) .reel-card__viewport::after{ opacity: 0; }
  .reel-intro{ background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.stats-panel__legend{ margin: 0; padding: 10px 24px; font-size: 13px; color: rgba(0,0,0,.55); border-bottom: 1px solid #f0eff4; }
.stats-panel__visitor{ display: flex; gap: 18px; align-items: flex-start; }
.stats-panel__score{ flex: none; width: 76px; text-align: center; padding-top: 2px; }
.stats-panel__score b{ display: block; font-size: 30px; line-height: 1; }
.stats-panel__score span{ display: block; margin-top: 6px; font-size: 12px; color: rgba(0,0,0,.55); }
.stats-panel__main{ flex: 1; min-width: 0; }
.stats-panel__contacts{ display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 13px; color: rgba(0,0,0,.45); }
.stats-panel__contacts .is-yes{ color: #0ea472; font-weight: 600; }
.stats-panel__project{ border-top: 1px solid #f0eff4; }
.stats-panel__project summary{ display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.stats-panel__project summary span:last-child{ font-weight: 400; color: rgba(0,0,0,.55); }
.stats-panel__muted{ font-size: 13px; color: rgba(0,0,0,.45); }
@media (max-width: 700px){ .stats-panel__visitor{ flex-direction: column; } .stats-panel__score{ text-align: left; width: auto; display: flex; gap: 10px; align-items: baseline; } }

/* Visitors dashboard v2 */
.stats-panel__head h2{ font-size: 20px; }
.stats-sum{ display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 12px; padding: 16px 24px; border-bottom: 1px solid #f0eff4; }
.stats-sum > div{ padding: 12px 16px; border-radius: 10px; background: #f4f4f7; min-width: 0; }
.stats-sum b{ display: block; font-size: 24px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-sum .stats-sum__wide b{ font-size: 16px; padding-top: 5px; }
.stats-sum span{ font-size: 12px; color: rgba(0,0,0,.55); }
.stats-panel__body{ gap: 8px; }
.stats-v{ border: 1px solid #e7e5ee; border-radius: 10px; }
.stats-v[open]{ border-color: #c9c6d6; }
.stats-v summary{ display: flex; gap: 16px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.stats-v summary::-webkit-details-marker{ display: none; }
.stats-v__score{ flex: none; width: 92px; font-size: 11px; color: rgba(0,0,0,.55); text-align: center; }
.stats-v__score b{ display: block; font-size: 26px; color: #16151d; }
.stats-v__score--hi b{ color: #0ea472; } .stats-v__score--lo b{ color: rgba(0,0,0,.4); }
.stats-v__text{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stats-v__who{ font-weight: 700; font-size: 15px; } .stats-v__who em{ font-style: normal; font-weight: 400; color: rgba(0,0,0,.5); margin-left: 6px; }
.stats-v__what{ font-size: 14px; color: rgba(0,0,0,.7); line-height: 1.5; } .stats-v__what b{ color: #16151d; } .stats-v__what .is-yes{ color: #0ea472; }
.stats-v__detail{ padding: 0 16px 12px 124px; }
@media (max-width: 700px){
  .stats-sum{ grid-template-columns: repeat(3, 1fr); } .stats-sum__wide{ grid-column: 1 / -1; }
  .stats-v summary{ align-items: flex-start; } .stats-v__score{ width: 56px; } .stats-v__detail{ padding: 0 12px 12px; }
}
@media (max-width: 900px){
  /* Wider menu drawer on phones. */
  .amp-nav{ width: min(420px, 88vw) !important; padding-left: 24px !important; padding-right: 24px !important; }
  .amp-nav .amp-nav__group, .amp-nav .amp-nav__list{ width: 100%; }
  .amp-nav .amp-nav__toggle, .amp-nav .amp-nav__other{ width: 100%; }
}


/* Phones, homepage: a solid black header bar; the reel fits underneath it, centred in the space left. */
@media (max-width: 700px){
  .reel-home{ --home-head: 56px; }
  .reel-home .reel-card{ top: var(--home-head); bottom: 0; height: auto; }
  .reel-home .reel-card__media{ object-position: center; background-position: center !important; }
  .reel-home .reel-card__viewport::before{ display: none; }
  .reel-home .reel-home__name{ top: 0; height: var(--home-head); display: flex; align-items: center; gap: 6px; }
  .reel-home .reel-home__grid > .reel-contacts{ top: 0; height: var(--home-head); display: flex; align-items: center; }
  .reel-home .reel-card__ctrls{ top: 8px; }
}

/* Phones: the research and persona quotes show stacked in the flow (they were hidden). */
@media (max-width: 900px){
  .amp-bubble-field{ flex-direction: column; align-items: stretch; gap: 10px; padding: 0; text-align: left; }
  .amp-bubble-field > .amp-h1{ margin-bottom: 16px; }
  .amp-bubble{ display: block; position: static; max-width: 88%; font-size: 15px; text-align: left; padding: 12px 16px; }
  .amp-bubble:nth-of-type(even){ align-self: flex-end; }
  .amp-bubble-field__caption{ position: static; margin-top: 12px; }
  .amp-persona{ padding-top: 0; min-height: 0; }
  .amp-persona__stage{ display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 0; min-height: 0; }
  .amp-persona__stage .chat-bubble{ display: block; position: static; max-width: 90%; font-size: 15px; margin: 0; }
  .amp-persona__stage .amp-persona__avatar{ margin-top: 10px; }
}
@media (max-width: 900px){ .amp-bubble br, .chat-bubble br{ display: none; } .amp-persona__stage .chat-bubble{ text-align: left; } }

/* Phones: size the reel to the area the browser actually shows (not under Safari's / Chrome's bars),
   and keep the button clear of the home indicator. */
.reel-home__stage{ height: 100dvh; }
.reel-home__snap{ height: 100dvh; }
@media (max-width: 700px){
  .reel-copy__item{ padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* Phones: LinkedIn (a solid logo) at the same visual weight as the outlined email / phone icons beside it. */
@media (max-width: 700px){
  .reel-contacts__btn--lg svg{ width: 16px; height: 16px; }
  .reel-contacts__btn{ filter: none; }   /* no soft halo behind the icons */
}

/* Phones, homepage: white background (header + the space around the reel), dark name and icons. */
@media (max-width: 700px){
  .reel-home__stage, .reel-home .reel-card__viewport{ background: #fff; }
  .reel-home .reel-card__media{ background-color: #fff !important; }
  .reel-home .reel-home__name{ color: #16151d; }
  .reel-home .reel-home__grid > .reel-contacts .reel-contacts__btn{ color: #16151d; }
}

/* Floating reel controls: pause / play big in the middle, mute top-right, close top-left, prev / next bottom-right. */
.reel-dock .reel-dock__ctrls{ position: absolute; inset: 0; right: auto; bottom: auto; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 2; }
.reel-dock .reel-dock__ctrls .reel-dock__btn{ position: absolute; pointer-events: auto; }
.reel-dock .reel-dock__btn--play{ left: 50%; top: 50%; width: 52px; height: 52px; padding: 15px; margin: -26px 0 0 -26px; }
.reel-dock .reel-dock__btn--play svg{ width: 22px; height: 22px; }
.reel-dock .reel-dock__btn--play:hover{ transform: scale(1.06); }
.reel-dock .reel-dock__btn--sound{ top: 12px; right: 12px; width: 32px; height: 32px; padding: 8px; }
.reel-dock .reel-dock__nav{ top: auto; bottom: 12px; right: 12px; }
.reel-dock .reel-dock__btn--close{ z-index: 4; width: 32px; height: 32px; padding: 9px; }
/* A soft dim behind the controls while they show, so they read on any frame. */
.reel-dock .reel-dock__card::before{ content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.22); opacity: 1; transition: opacity .3s ease; pointer-events: none; }
.reel-dock .reel-dock__card.is-idle::before, .reel-dock .reel-dock__card.is-ended::before{ opacity: 0; }

/* Phones: bigger, thumb-sized controls (shown with a tap). */
@media (max-width: 900px){
  .reel-dock .reel-dock__btn--play{ width: 48px; height: 48px; padding: 14px; margin: -24px 0 0 -24px; }
  .reel-dock .reel-dock__btn--sound{ top: 6px; right: 6px; width: 36px; height: 36px; padding: 10px; }
  .reel-dock .reel-dock__btn--close, .reel-dock[data-corner] .reel-dock__btn--close, .reel-dock:not([data-corner]) .reel-dock__btn--close{ top: 6px; left: 6px; width: 36px; height: 36px; padding: 11px; }
  .reel-dock .reel-dock__resize{ display: none; }
}
.reel-dock__card.is-ended .reel-dock__btn--play{ display: none; }

/* Light only: stop phone browsers (auto dark mode) from inverting the white pages. */
:root{ color-scheme: only light; }

/* Hidden controls must not catch taps (the first tap only shows them). */
.reel-dock__card.is-idle .reel-dock__ctrls .reel-dock__btn, .reel-dock__card.is-idle .reel-dock__nav .reel-dock__btn{ pointer-events: none; }

/* Floating reel: no previous / next buttons (the next reel follows on its own). */
.reel-dock .reel-dock__nav{ display: none; }