/* ===================================================================
   NOT SO SOCIAL — design tokens
   =================================================================== */
@font-face{
  font-family: 'League Spartan';
  src: url('../assets/fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Sailors';
  src: url('../assets/fonts/sailors-condensed.ttf') format('truetype');
  size-adjust: 78%;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Fontatica';
  src: url('../assets/fonts/Fontatica4F.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --void: #F3EFED;
  --void-2: #E8DCC2;
  --ink: #1E1E1E;
  --ink-soft: #4B4540;
  --red: #872b32;
  --red-dim: #651f26;
  --cream: #F5E6CC;
  --linen: #E8DCC2;
  --oat: #D8CFC0;
  --pink: #FF007F;
  --visor: #6b1230;
  --ghost: rgba(74,72,80,0.16);
  --radius: 18px;
  --gutter: clamp(20px, 5vw, 72px);
  --font-title: 'League Spartan', 'Arial Black', sans-serif;
  --font-body: 'Sailors', 'Helvetica Neue', Arial, sans-serif;
  --font-agency: 'Fontatica', 'Sailors', sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: auto; overscroll-behavior: none; }
body{
  margin:0;
  overscroll-behavior: none;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  text-transform: uppercase;
  overflow-x: hidden;   /* body only — never html, or position:sticky breaks */
  -webkit-font-smoothing: antialiased;
}
.scroll-hint{ display:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3,
.section-title,
.panel-title,
.intro-line,
.cinematic__copy p.lead{
  font-family: var(--font-title);
}
.nav__tag,
.balloon-agency{
  font-family: var(--font-agency);
}

.section-title{
  font-size: clamp(36px, 5.5vw, 68px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align:center;
  padding-top: clamp(64px, 10vw, 120px);
  margin-bottom: clamp(32px, 6vw, 64px);
}

/* ===================================================================
   NAV
   =================================================================== */
.nav{
  --nav-brand-left: var(--gutter);
  --nav-brand-top: max(14px, env(safe-area-inset-top));
  position: fixed;
  top:var(--mobile-viewport-top, 0px); left:0; right:0;
  z-index: 500;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 14px;
}
.nav__brand{
  position:absolute;
  top:var(--nav-brand-top);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  transition:left .55s var(--ease), transform .55s var(--ease);
}
.nav.is-scrolled .nav__brand{
  left:var(--nav-brand-left);
  transform:translateX(0);
}
.nav__logo{ height: 84px; width:auto; flex-shrink:0; filter: drop-shadow(0 1px 6px rgba(0,0,0,0.12)); }
.nav__tag{
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  text-shadow: 0 1px 6px rgba(243,239,237,0.8);
}
.nav__cta{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:#fff;
  background: var(--red);
  border-radius: 999px;
  padding: 14px 30px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.nav__cta:hover{ background: var(--red-dim); transform: translateY(-1px); }
.nav__cta{
  background:rgba(48,48,48,.58);
  color:#fff;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.nav__cta-initial{ display:inline-block; font-size:1.12em; line-height:0; }

/* ===================================================================
   HERO (S1)
   =================================================================== */
.hero{
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--void);
}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
}
.hero__ghosts{ position:absolute; inset:0; pointer-events:none; }

.hero__copy{
  position:absolute;
  left:0; right:0; top: 40%;
  transform: translateY(-50%);
  text-align:center;
  pointer-events:none;
}
.hero__line{
  font-size: clamp(30px, 5.5vw, 64px);
  font-weight: 700;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.hero__line.is-visible{ opacity:1; transform:translateY(0); }

.hero__lockup{
  position:absolute;
  bottom: clamp(28px, 6vh, 64px);
  left:0; right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.hero__lockup.is-visible{ opacity:1; }
.hero__lockup img{ height: 110px; }
.hero__lockup span{
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.scroll-hint{
  position:absolute;
  bottom: 18px; left:50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  animation: hint-bob 2.4s ease-in-out infinite;
}
@keyframes hint-bob{
  0%,100%{ transform: translate(-50%,0); opacity:.5; }
  50%{ transform: translate(-50%,6px); opacity:1; }
}

/* ===================================================================
   CINEMATIC (t1 -> t5 scroll-scrubbed)
   =================================================================== */
.cinematic{
  position: relative;
  height: 850vh; /* scroll distance driving the whole chain (incl. end hold) */
  overflow-x: clip;
}
.cinematic__stage{
  position: sticky;
  top:0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}
.cinematic__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
}
.cinematic__video.is-active{ opacity: 1; z-index: 2; }
/* idle crowd loop shown before the first scroll */
.cinematic__idle{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  z-index: 3;                 /* above the paused t1 frame, below the copy/panels */
  transition: opacity .6s var(--ease);
}
.cinematic__idle.is-hidden{ opacity:0; pointer-events:none; }
.cinematic__ghosts{ position:absolute; inset:0; pointer-events:none; z-index:2; }

/* --- intro copy over the opening crowd frame --- */
.cinematic__intro{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding: 19vh 18px 8vh;
  text-align:center;
  pointer-events:none;
  z-index: 3;
  transition: opacity .5s var(--ease);
}
.intro-top{
  position:absolute;
  top:66vh;
  left:18px;
  right:18px;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.18em;
}
.cinematic__intro.is-hidden{ opacity:0; }
.intro-line{
  text-transform: uppercase;
  line-height: 1.2;
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color:#fff;
  opacity: 0;
  transform: translateY(16px);
  animation: intro-in .7s var(--ease) forwards;
}
.intro-top .intro-line:nth-child(1){ animation-delay: .2s; }
.intro-top .intro-line:nth-child(2){ animation-delay: .9s; }
.intro-line--punch{ animation: none; opacity: 0; transition: opacity .5s var(--ease); }
.intro-line--punch.show{ opacity: 1; }
.balloon-agency{
  position:absolute;
  top: 47vh;
  left:0; right:0;
  color: var(--ink);
  font-size: clamp(13px, 1.35vw, 18px);
  letter-spacing: 0.2em;
  font-weight: 700;
}
/* --- hero text highlights (PDF-inspired) --- */
.hl-underline{
  color:inherit;
  position: relative;
  white-space: nowrap;
}
/* hand-drawn marker underline (wobbly SVG stroke) */
.hl-underline::after{
  content:"";
  position:absolute;
  left:-4%; right:-4%; bottom:-0.22em;
  height:0.34em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 30' preserveAspectRatio='none'%3E%3Cpath d='M6 9 C60 2 120 15 175 7 C235 -1 285 13 334 5' fill='none' stroke='%23872b32' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M8 24 C64 18 118 28 176 22 C232 16 288 26 332 21' fill='none' stroke='%23872b32' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:100% 100%;
}
.hl-mark{
  font-style: normal;
  color:#fff;
  padding: 0.02em 0.24em;
  /* hand-swiped marker highlight with slightly rough edges */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44' preserveAspectRatio='none'%3E%3Cpath d='M5 8 C40 3 80 5 116 7 C118 16 117 30 115 37 C75 40 35 39 6 36 C3 27 4 16 5 8 Z' fill='%23872b32'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:100% 100%;
  display:inline-block;
  transform: rotate(-1deg);
}
.intro-line--statement,
.intro-line--question{
  width:fit-content;
  color:#fff;
  background:rgba(48,48,48,.58);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  padding:.06em .3em .1em;
  border-radius:4px;
}
.intro-line--statement{
  transform:rotate(.45deg);
}
.intro-line--question{
  transform:rotate(-.8deg);
}
.intro-line--statement .hl-underline{
  display:inline-block;
  padding:.05em .26em .09em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 52' preserveAspectRatio='none'%3E%3Cpath d='M5 10 C38 3 74 8 106 5 C137 2 164 7 176 11 L173 43 C137 49 102 42 69 47 C39 51 16 45 7 40 C3 30 4 19 5 10 Z' fill='%23872b32'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:112% 130%;
  background-position:center;
  transform:rotate(-1deg);
}
.intro-line--statement .hl-underline::after{ display:none; }

.intro-line--punch{
  position:absolute;
  left:0; right:0;
  top: 53vh;                 /* just below the balloon, not pinned to the bottom */
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 3.4vw, 44px);
  text-shadow: none;
}
.punch-box{
  background: var(--red);
  color:#fff;
  padding: 0.06em 0.5em;
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(135,43,50,0.48);
  display:inline-block;
  transform: rotate(-1.5deg) scale(.72);
  opacity: 0;
}
.intro-line--punch.show .punch-box{
  animation: exactly-pop .82s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes exactly-pop{
  0%{ opacity:0; transform: translateY(20px) rotate(-10deg) scale(.85); }
  45%{ opacity:1; transform: translateY(-18px) rotate(5deg) scale(1); }
  65%{ opacity:1; transform: translateY(6px) rotate(-3deg) scale(.98); }
  82%{ opacity:1; transform: translateY(-4px) rotate(1.5deg) scale(1); }
  100%{ opacity:1; transform: translateY(0) rotate(-1.5deg) scale(1); }
}
@keyframes intro-in{
  to{ opacity:1; transform: translateY(0); }
}
.intro-lockup{
  position:absolute;
  bottom: clamp(48px, 9vh, 90px);
  left:0; right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  opacity:0;
  animation: intro-in .7s var(--ease) 2.4s forwards;
}
.intro-lockup img{ height: 110px; }
.intro-lockup span{
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- scrub copy: anchored to the lower third, on a scrim, never on faces --- */
.cinematic__copy{
  position:absolute;
  left:0; right:0;
  bottom:0;
  padding: 20vh var(--gutter) 5vh;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition: opacity .5s var(--ease);
  z-index: 3;
  background: linear-gradient(to top, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.28) 55%, rgba(10,10,12,0) 100%);
}
.cinematic__copy.is-visible{ opacity:1; }
.cinematic__copy[data-zone="tagline"]{ background:none; }
.cinematic__copy p{
  max-width: 900px;
  margin: 0 auto 0.5em;
  color:#fff;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 600;
  line-height:1.35;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.cinematic__copy p.lead{
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.cinematic__copy .accent{ color: var(--red); text-transform: uppercase; }
.cinematic__copy .tagline-accent{
  color:#fff;
  background:var(--red);
  padding:.04em .2em .08em;
  border-radius:3px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transform:rotate(-.7deg);
}

.copy-underline,
.copy-highlight,
.manifesto-balloon,
.tagline-accent,
.cta-balloon{ position:relative; display:inline-block; }
.manifesto-balloon{ text-shadow:none; }
.influencer-final{ display:block; white-space:nowrap; }

@media (min-width: 861px){
  .nav__tag{
    font-size: 25px;
    line-height:1;
    letter-spacing: 0.1em;
  }
  .nav__cta{
    min-width:120px;
    text-align:center;
    font-size: 30px;
    line-height:1;
    padding: 17px 34px;
  }

  .hl-underline,
  .hl-mark,
  .punch-box,
  .manifesto-balloon,
  .tagline-accent,
  .cta-balloon{
    font-family: var(--font-body);
  }
  .hl-underline{ font-size: 1.15em; line-height:.8; }
  .hl-mark{ font-size: 1.32em; line-height:.8; }

  .cinematic__intro{ padding-top:17.5vh; }
  .cinematic__intro .intro-line,
  .cinematic__intro .balloon-agency{
    color:#fff;
    text-shadow:0 2px 18px rgba(0,0,0,.42);
  }
  .cinematic__intro .hl-underline{ color:inherit; }

  .balloon-agency{
    top: 55vh;
    font-size: clamp(80px, 7.2vw, 108px);
    line-height:.72;
    letter-spacing: .045em;
  }
  .intro-line--punch{
    top: 76vh;
    font-size: clamp(34px, 3.7vw, 50px);
  }
  .punch-box{ padding: .08em .48em; }

  .cinematic__copy[data-zone="manifesto"]{ padding-bottom: 9vh; }
  .cinematic__copy[data-zone="manifesto"] p.lead{ margin-bottom:.18em; }
  .manifesto-balloon{
    font-size: 1.22em;
    line-height:.82;
    letter-spacing:.015em;
  }
  .cinematic__copy[data-zone="manifesto"] p:not(.lead){
    max-width: 1100px;
    font-size: clamp(34px, 3.25vw, 46px);
    line-height: 1.25;
    margin-top:-16px;
  }
  .copy-underline::after{
    content:"";
    position:absolute;
    left:-2%; right:-2%; bottom:-.12em;
    height:4px;
    border-radius:99px;
    background:var(--red);
    transform:rotate(-1deg);
  }
  .copy-highlight{
    color:#fff;
    padding:.04em .22em;
    background:var(--red);
    transform:rotate(-1deg);
  }

  .cinematic__panel .panel-card h3, .cinematic__panel .panel-step h3{
    font-size: clamp(18px, 1.55vw, 22px);
    margin-bottom:8px;
  }
  .cinematic__panel .panel-card p, .cinematic__panel .panel-step p{
    font-size: clamp(25px, 1.7vw, 30px);
    line-height:1.18;
  }
  .cinematic__panel .panel-step > span{ font-size:24px; }
  .cinematic__panel .panel-step .desktop-break{
    color:inherit;
    font-size:inherit;
    font-weight:inherit;
    letter-spacing:inherit;
    margin-bottom:0;
  }

  .tagline-accent{
    font-size:1.52em;
    line-height:.86;
  }
  .work .work__sub{
    font-size: clamp(46px, 3.4vw, 58px);
    line-height:1;
    margin-bottom: clamp(18px,2.5vw,28px);
  }
  .cta-balloon{
    color:var(--red);
    font-size:0.93em;
    line-height:.85;
  }
  .cta-balloon::after{
    content:"";
    position:absolute;
    left:-2%; right:-2%; bottom:-.16em;
    height:5px;
    border-radius:99px;
    background:var(--red);
    transform:rotate(-1.5deg);
  }
  .cta .cta__button{ font-size:30px; }
  .cta .cta__mail{ font-size:24px; }

  .cinematic__copy[data-zone="partner"] p:not(.lead){
    max-width:1100px;
    font-size:clamp(34px, 3.15vw, 46px);
    line-height:1.18;
  }
  .cinematic__copy[data-zone="partner"] p.lead{
    max-width:1600px;
    white-space:nowrap;
    font-size:clamp(34px, 3.15vw, 50px);
  }
  .partner-highlight,
  .partner-underline{ position:relative; display:inline-block; }
  .partner-highlight{
    font-family:var(--font-body);
    color:#fff;
    background:var(--red);
    padding:.02em .2em;
    transform:rotate(-.7deg);
  }
  .partner-underline::after{
    content:"";
    position:absolute;
    left:-1%; right:-1%; bottom:-.12em;
    height:4px;
    border-radius:99px;
    background:var(--red);
    transform:rotate(-.6deg);
  }

  .cinematic__panel[data-zone="services"] .panel-card{
    background:rgba(14,14,17,.18);
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
    border-color:rgba(255,255,255,.12);
  }
  .cinematic__panel[data-zone="services"] .panel-card:hover{
    background:var(--red);
  }
  .influencer-second{
    display:block;
    white-space:normal;
  }

  #scroll-indicator.is-past-first-video{
    opacity:0;
    pointer-events:none;
    transform:translateY(14px);
  }
}

/* ===================================================================
   IN-CINEMA CONTENT PANELS (What we do / How we work)
   =================================================================== */
.cinematic__panel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap: clamp(14px, 3vh, 28px);
  padding: 6vh var(--gutter) 6vh;
  opacity:0;
  pointer-events:none;
  transition: opacity .5s var(--ease);
  z-index: 4;
}
.cinematic__panel.is-visible{ opacity:1; }
.panel-title{
  color:#fff;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
/* two side columns; the center stays clear for the characters */
.panel-grid{
  flex:1;
  display:grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 360px);
  justify-content: space-between;
  align-content: center;
  gap: clamp(10px, 2vh, 18px);
  width: min(1000px, 100%);
}
.panel-card:hover, .panel-step:hover{
  background: var(--red);
  border-color: var(--red);
}
.panel-card:hover h3, .panel-step:hover h3,
.panel-card:hover p, .panel-step:hover p,
.panel-step:hover > span{ color: #fff; }
.panel-card, .panel-step{
  background: rgba(14,14,17,0.30);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: clamp(14px,1.8vw,24px);
  color:#fff;
}
.panel-card h3, .panel-step h3{
  font-size: clamp(15px,1.35vw,19px);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.panel-card p, .panel-step p{
  font-size: clamp(13px,1.1vw,15px);
  line-height: 1.45;
  color: rgba(255,255,255,0.75);
}
.desktop-break{ display:block; }
.panel-step > span{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--red);
  display:block;
  margin-bottom: 4px;
}

/* ===================================================================
   FLOATING CODE-BALLOON
   =================================================================== */
.floating-balloon{
  position: fixed;
  top: 50%; left: 50%;
  width: 46px; height: auto;
  z-index: 400;
  opacity: 0;
  pointer-events:none;
  transition: opacity .4s var(--ease);
  will-change: transform;
}
.floating-balloon.is-visible{ opacity:1; }

/* ===================================================================
   SERVICES (S4)
   =================================================================== */
.services{ position:relative; z-index:1; background: var(--void); }
.services__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 8vw, 100px);
}
.service-card{
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(28px,3vw,40px) clamp(22px,2.4vw,32px);
  display:flex;
  flex-direction:column;
  gap: 14px;
  box-shadow: 0 2px 14px rgba(24,23,26,0.05);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.service-card:hover{ background: var(--ink); color:#fff; transform: translateY(-4px); }
.service-card:hover p{ color: rgba(255,255,255,0.78); }
.service-card h3{
  font-size: clamp(20px,1.9vw,27px);
  font-weight: 800;
  text-transform: uppercase;
}
.service-card p{ font-size:17px; color: var(--ink-soft); line-height:1.55; }

/* ===================================================================
   PROCESS (S5)
   =================================================================== */
.process{ position:relative; z-index:1; background: var(--void); }
.process__body{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px,8vw,100px);
  display:grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
}
.process__steps{ display:flex; flex-direction:column; gap: clamp(36px,5vw,64px); }
.process-step span{
  font-size: 13px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: 0.1em;
}
.process-step h3{
  font-size: clamp(24px,2.4vw,34px);
  font-weight: 800;
  text-transform: uppercase;
  margin: 6px 0 8px;
}
.process-step p{ color: var(--ink-soft); font-size:18px; max-width:560px; line-height:1.55; }

.process__visual{ position:relative; }
.process__string{
  position:absolute;
  left:50%; top:0;
  transform: translateX(-50%);
  width: 60px; height:100%;
  overflow: visible;
}
.process__string path{
  fill:none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset .1s linear;
}
.process__hand{
  position: sticky;
  top: 25vh;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(24,23,26,0.10);
}

/* ===================================================================
   WORK (S6)
   =================================================================== */
.work{
  position:relative;
  z-index:5;
  background: #1E1E1E;
  border-radius: 32px 32px 0 0;
  margin-top: -32px;
}
.work .section-title{
  color:#fff;
  padding-top: clamp(40px, 5vw, 64px);
  margin-bottom: 4px;
}
.work__sub{
  text-align:center;
  color: var(--linen);
  font-size:14px;
  margin-bottom: clamp(18px,2.5vw,28px);
}
.work__wrap{
  position:relative;
  padding-bottom: 14px;
}
.work__track{
  display:flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.work__track::-webkit-scrollbar{ display:none; }
.work__arrow{
  position:absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 5;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--red);
  color:#fff;
  font-size: 22px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.work__arrow:hover{ background: var(--red-dim); transform: translateY(-50%) scale(1.08); }
.work__arrow-icon{
  width:24px;
  height:24px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.work__arrow--prev .work__arrow-icon{ transform:rotate(180deg); }
.work__arrow--prev{ left: clamp(8px, 2vw, 28px); }
.work__arrow--next{ right: clamp(8px, 2vw, 28px); }
@keyframes pulse-red{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(135,43,50,0.55); }
  55%{ box-shadow: 0 0 0 14px rgba(135,43,50,0); }
}
.work__arrow, .nav__cta{ animation: pulse-red 2.6s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce){
  .work__arrow, .nav__cta{ animation: none; }
}
.work__reel{
  position:relative;
  flex: 0 0 auto;
  width: min(72vw, 280px);
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  overflow:hidden;
  scroll-snap-align: center;
  background:#000;
  transform: scale(0.92);
  opacity:0.55;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.work__reel.is-active{ transform: scale(1); opacity:1; }
.work__reel video{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}
.work__reel::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 42%);
  opacity:0;
  mix-blend-mode: screen;
}
.work__reel.flash::after{ animation: screenshot-flash .5s ease-out; }
@keyframes screenshot-flash{
  0%{ opacity:0; }
  15%{ opacity:0.9; }
  100%{ opacity:0; }
}
.work__reel .caption{
  position:absolute; bottom:10px; left:0; right:0;
  text-align:center;
  color:#fff;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0;
  transition: opacity .3s;
}
.work__reel.flash .caption{ opacity:0.9; }

/* ===================================================================
   CLIENTS (S7)
   =================================================================== */
.clients{ position:relative; z-index:1; background: #1E1E1E; }
.clients .section-title{
  color:#fff;
  padding-top: 0;
  font-size: clamp(24px, 3.2vw, 40px);
  margin-bottom: clamp(20px, 3vw, 36px);
}
.clients__grid{
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px var(--gutter) clamp(40px, 5vw, 64px);
  display:grid;
  grid-template-columns: repeat(10, 1fr);  /* two rows of 10 on desktop */
  gap: clamp(12px, 1.6vw, 22px);
  justify-items: center;
}
.client-chip{
  width: 100%;
  max-width: 108px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--oat);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8%;
  filter: grayscale(1);
  transition: background .3s var(--ease), filter .3s var(--ease), transform .3s var(--ease);
}
.client-chip:nth-child(3n+1){ background: var(--cream); }
.client-chip:nth-child(3n+2){ background: var(--linen); }
.client-chip:hover{
  background: var(--red);
  filter: grayscale(0);
  transform: translateY(-6px) scale(1.05);
}
.client-chip img{ width:100%; object-fit:contain; }

/* ===================================================================
   CTA (S8)
   =================================================================== */
.cta{
  position:relative;
  height: 100vh;
  height: 100svh;
  overflow:hidden;
  background: var(--void);
}
.cta__video, .cta__still{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform: translateX(-50%);
  height:100%;
  width:auto;
  max-width:none;
}
@media (max-width: 860px){
  .cta__video, .cta__still{ left:0; transform:none; width:100%; object-fit:cover; }
}
.cta__copy{
  position:absolute;
  left:0; right:0; bottom: 0;
  text-align:center;
  padding: clamp(120px,20vh,220px) var(--gutter) clamp(48px,10vh,110px);
  background: linear-gradient(to top, rgba(240,239,235,0.96) 30%, rgba(240,239,235,0.75) 60%, rgba(240,239,235,0) 100%);
}
.cta__copy h2{
  text-transform: uppercase;
  font-size: clamp(32px,5.2vw,58px);
  font-weight:800;
  margin-bottom: 26px;
}
.cta__button{ font-size: 19px; padding: 18px 40px; }
.cta__button{
  display:inline-block;
  background: var(--red);
  color:#fff;
  font-weight:700;
  letter-spacing:0.02em;
  padding: 16px 34px;
  border-radius: 999px;
  font-size: 16px;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.cta__button:hover{ background: var(--red-dim); transform: translateY(-2px); }
.cta__mail{
  display:block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-soft);
}
.cta__locations{
  margin-top:8px;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--ink-soft);
}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 18px;
  justify-content:center;
  padding: 28px var(--gutter) 40px;
  background: var(--void);
  font-size: 13px;
  color: var(--ink-soft);
}
.footer__icon{ width:20px; height:20px; }
.footer a:hover{ color: var(--red); }

/* ===================================================================
   UI GHOSTS (like-heart / comment / seen-tick particles)
   =================================================================== */
.ghost{
  position:absolute;
  color: var(--ghost);
  font-size: 20px;
  opacity: 0;
  animation: ghost-drift linear infinite;
}
@keyframes ghost-drift{
  0%{ opacity:0; transform: translateY(0) translateX(0); }
  10%{ opacity: 0.5; }
  90%{ opacity: 0.5; }
  100%{ opacity:0; transform: translateY(-120px) translateX(var(--dx,20px)); }
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */
/* Scroll-driven video is user-controlled motion and stays available.
   Reduced motion only disables autonomous animation: idle loops,
   particles, bobbing hints and autoplaying reels. */
@media (prefers-reduced-motion: reduce){
  .ghost, .scroll-hint{ display:none; }
  .hero__line, .hero__lockup{ opacity:1 !important; transform:none !important; }
  .work__reel{ transform:none; opacity:1; }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 860px){
  .nav{ padding: max(10px, env(safe-area-inset-top)) 18px 10px; }
  .nav__brand{ padding-left: 10px; }
  .nav__logo{ height: 40px; width:auto; }
  .nav__tag{ font-size: 8px; letter-spacing: 0.18em; }
  .nav__cta{ font-size: 13px; padding: 9px 16px; }
  .clients__grid{ grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 20px 28px; max-width: none; }
  .cinematic__intro{ padding-top: 13vh; }
  .cinematic__copy{ padding-bottom: 15vh; }
  .cinematic__copy p.lead{ font-size: clamp(24px, 7vw, 32px); }
  .cinematic__copy p{ font-size: clamp(16px, 4.6vw, 22px); }
  .intro-line{ font-size: clamp(18px, 4.6vw, 24px); }
  .intro-line--punch{ font-size: clamp(22px, 6vw, 30px); top: 56vh; }
  .panel-card, .panel-step{ padding: 12px; border-radius: 10px; }
  .panel-card p, .panel-step p{ font-size: 12px; }
  .panel-card h3, .panel-step h3{ font-size: 13px; }
  .cinematic__panel{ padding: 8vh 18px 4vh; justify-content:flex-end; }
  .panel-grid{ grid-template-columns: minmax(0,46%) minmax(0,46%); justify-content: space-between; align-content:end; gap:10px; }
  .panel-title{ position:absolute; top:12vh; left:0; right:0; text-align:center; font-size: clamp(24px, 6vw, 34px); }
  .clients__grid{ grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 20px 28px; max-width: none; }
  .work__arrow{ width: 44px; height: 44px; font-size: 18px; }
}

/* ===================================================================
   ENTRANCE REVEALS — sections rise into view as part of the journey
   =================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* Audit mode: all animation frozen at final state for screenshots */
.audit *, .audit *::before, .audit *::after{
  animation: none !important;
  transition: none !important;
}
.audit .intro-line{ opacity:1; transform:none; }

/* Utility: hidden until JS confirms viewport */
.no-js .js-only{ display:none; }

/* persistent scroll indicator */
#scroll-indicator{
  position: fixed;
  bottom:max(22px, env(safe-area-inset-bottom));
  left:0; right:0;
  width:max-content;
  max-width:calc(100% - 32px);
  margin-inline:auto;
  transform:none;
  z-index: 480;
  min-width: 46px; height: 46px;
  padding: 0 17px;
  gap: 10px;
  border:1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  cursor: default;
  opacity: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  transition: opacity .45s var(--ease), transform .45s var(--ease), background .3s var(--ease), padding .3s var(--ease), min-width .3s var(--ease);
  overflow:hidden;
  will-change:translate, box-shadow;
}
.si-label{ font-size:28px; letter-spacing:.08em; white-space:nowrap; }
#scroll-indicator::before{
  content:"";
  position:absolute;
  inset:-40% auto -40% -35%;
  width:24%;
  background:rgba(255,255,255,.34);
  transform:skewX(-20deg);
  animation:si-shine 2.4s ease-in-out infinite;
  pointer-events:none;
}
#scroll-indicator{ animation: si-pulse 1.55s ease-in-out infinite, si-float 1.55s ease-in-out infinite; }
#scroll-indicator .si-arrow{
  display:block;
  font-family:var(--font-title);
  font-size:30px;
  line-height:1;
  animation:si-nudge 1.15s ease-in-out infinite;
}
#scroll-indicator.is-past-first-video{ opacity:0; pointer-events:none; }
#scroll-indicator.at-end{ cursor: pointer; background: var(--ink); }
#scroll-indicator.at-end .si-arrow{ transform: rotate(180deg); }
@keyframes si-pulse{
  0%, 100%{ box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 0 0 0 rgba(135,43,50,0.5); }
  55%{ box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 0 0 12px rgba(135,43,50,0); }
}
@keyframes si-nudge{
  0%, 100%{ transform: translateY(-3px); }
  42%{ transform: translateY(5px); }
  58%{ transform: translateY(1px); }
  76%{ transform: translateY(5px); }
}
@keyframes si-float{
  0%, 100%{ translate:0 0; }
  50%{ translate:0 -5px; }
}
@keyframes si-shine{
  0%, 52%{ left:-35%; opacity:0; }
  62%{ opacity:1; }
  86%, 100%{ left:125%; opacity:0; }
}
#scroll-indicator.at-end .si-arrow{ animation: none; transform: rotate(180deg); }
/* scroll cue intentionally keeps its gentle pulse even under reduced motion
   so the affordance stays noticeable (per design request) */

/* preloader */
#preloader{
  position: fixed; inset: 0; z-index: 900;
  background: rgba(243,239,237,0.30);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
  transition: opacity .5s var(--ease);
}
#preloader img{ height: 90px; }
#preloader.done{ opacity: 0; pointer-events: none; }
.pre-bar{
  width: min(240px, 60vw); height: 4px;
  border-radius: 999px; background: var(--oat);
  overflow: hidden;
}
.pre-bar__fill{
  height: 100%; width: 0%;
  border-radius: 999px; background: var(--red);
  transition: width .25s var(--ease);
}
body.loading{ overflow: hidden; }

@media (max-width: 860px){
  .desktop-break{ display:inline; }
  .balloon-agency{ top:51vh; font-size:11px; }
}

/* MOBILE TYPOGRAPHY PARITY */
@media (max-width: 860px){
  .nav{
    --nav-brand-left:16px;
    --nav-brand-top:max(12px, env(safe-area-inset-top));
    padding: max(12px, env(safe-area-inset-top)) 16px 10px;
  }
  .nav__brand{ padding-left:0; }
  .nav__logo{ height:64px; }
  .nav__tag{
    font-size:12.5px;
    line-height:1;
    letter-spacing:.12em;
  }
  .nav__cta{
    font-size:14px;
    line-height:1;
    padding:12px 18px;
  }
  .cinematic__intro{ padding-top:16vh; }
  .cinematic__intro .intro-line,
  .cinematic__intro .balloon-agency{
    color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,.48);
  }
  .intro-line{
    font-size:clamp(24px, 6.4vw, 32px);
    line-height:1.16;
  }
  .balloon-agency{
    top:51vh;
    font-size:clamp(30px, 9vw, 42px);
    line-height:.82;
    letter-spacing:.06em;
  }
  .intro-line--punch{
    top:75vh;
    font-size:clamp(27px, 7.2vw, 33px);
  }
  .hl-underline,
  .hl-mark,
  .punch-box,
  .manifesto-balloon,
  .tagline-accent,
  .cta-balloon{
    font-family:var(--font-body);
  }
  .hl-underline{ font-size:1.04em; line-height:.86; }
  .hl-mark{ font-size:1.18em; line-height:.86; }
  .intro-line--statement .hl-underline{
    padding:.08em .3em .12em;
    margin-inline:.04em;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.22));
  }

  .cinematic__copy{ padding-bottom:11vh; }
  .cinematic__copy p.lead{
    font-size:clamp(30px, 8vw, 40px);
    line-height:1.08;
  }
  .cinematic__copy p{
    font-size:clamp(21px, 5.4vw, 28px);
    line-height:1.25;
  }
  .cinematic__copy[data-zone="manifesto"]{
    padding-bottom:5vh;
  }
  .cinematic__copy[data-zone="manifesto"] p.lead{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  .manifesto-break{ display:none; }
  .manifesto-line{ display:block; }
  .copy-underline::after{
    content:"";
    position:absolute;
    left:-3%; right:-3%; bottom:-.1em;
    height:3px;
    border-radius:99px;
    background:var(--red);
    transform:rotate(-1deg);
  }
  .cinematic__copy[data-zone="partner"]{
    padding-bottom:5vh;
  }
  .cinematic__copy[data-zone="partner"] p.lead{
    font-size:clamp(27px, 6.8vw, 34px);
    line-height:1.06;
  }
  .cinematic__copy[data-zone="partner"] p:not(.lead){
    font-size:clamp(23px, 5.8vw, 29px);
    line-height:1.2;
  }
  .cinematic__copy[data-zone="partner"] .partner-highlight{
    display:inline;
    font-family:var(--font-body);
    color:#fff;
    background:var(--red);
    padding:.02em .16em;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }
  .cinematic__copy[data-zone="partner"] .partner-underline{
    display:inline;
    text-decoration-line:underline;
    text-decoration-color:var(--red);
    text-decoration-thickness:3px;
    text-underline-offset:4px;
  }
  .cinematic__copy[data-zone="partner"] .partner-highlight--agency{
    display:block;
    width:fit-content;
    margin:.14em auto;
  }
  .cinematic__copy[data-zone="partner"] .partner-extension{
    display:block;
    margin-top:.12em;
  }
  .manifesto-balloon{ font-size:1.02em; line-height:.86; }
  .tagline-accent{ font-size:1.28em; line-height:.86; }
  .cta-balloon{ font-size:0.93em; }

  .cinematic__panel{
    padding:10vh 14px 3vh;
    gap:8px;
  }
  .panel-title{
    top:12.5vh;
    font-size:clamp(30px, 8vw, 40px);
  }
  .panel-grid{ gap:6px; }
  .panel-card,
  .panel-step{ padding:8px; }
  .panel-card h3,
  .panel-step h3{
    font-size:clamp(15px, 4vw, 18px);
    line-height:1.05;
    margin-bottom:5px;
  }
  .panel-card p,
  .panel-step p{
    font-size:clamp(17px, 4.2vw, 20px);
    line-height:1.12;
  }
  .panel-step > span{ font-size:20px; }
}

/* IOS FULL-VIEWPORT FIX */
@supports (height: 100lvh){
  @media (max-width: 860px){
    .cinematic__stage,
    .cta{
      height:100lvh;
      min-height:100lvh;
    }
    .cinematic__copy,
    .cinematic__panel{
      bottom:calc(100lvh - 100dvh);
    }
  }
}

/* MOBILE WORK REEL CENTERING */
@media (max-width: 860px){
  .work__track{
    padding-inline:calc((100% - min(72vw, 280px)) / 2);
    scroll-padding-inline:calc((100% - min(72vw, 280px)) / 2);
    touch-action:pan-y;
    -webkit-overflow-scrolling:auto;
    overscroll-behavior-x:contain;
  }
  .work__track.is-ios-locked{
    overflow-x:hidden;
    touch-action:pan-y;
    -webkit-overflow-scrolling:auto;
    overscroll-behavior-x:none;
  }
}