/* ==========================================================================
   DesignMindset — Experience v2
   Cinematic interactive pitch · olive canvas · neon-lime storyline
   ========================================================================== */

@font-face {
  font-family: 'Asterone';
  src: url('assets/fonts/asterone-regular.woff2') format('woff2'),
       url('assets/fonts/asterone-regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Asterone';
  src: url('assets/fonts/asterone-bold.woff2') format('woff2'),
       url('assets/fonts/asterone-bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --blue:       #0001F7;
  --blue-soft:  #2A2CFF;
  --lime:       #AEFB3A;
  --lime-dim:   #8FD62B;
  --petal:      #FAD4D8;
  --black:      #000000;
  --bg:         #52533f;
  --ink:        #f2ede2;
  --gray:       #d0ccbe;
  --gray-dim:   #cac5b7;
  --muted:      rgba(242, 237, 226, 0.78);
  --muted-soft: rgba(242, 237, 226, 0.68);
  --panel:      rgba(20, 20, 16, 0.65);
  --panel-brd:  rgba(240, 236, 228, 0.16);

  --display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Montserrat', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --brand:   'Asterone', Georgia, serif;

  --max-w:  1260px;
  --gutter: 2rem;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur:    0.5s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }
:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}
body {
  font-family: var(--sans);
  background-color: #52533f;
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  isolation: isolate;
}
/* The page backdrop lives on a dedicated fixed pseudo-element (rather than
   background-attachment: fixed on body) because any 3D transform/perspective
   elsewhere on the page — e.g. the Proof tiles — otherwise breaks fixed
   backgrounds in Chrome/Safari and makes them drift while scrolling. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background-image:
    var(--noise),
    radial-gradient(ellipse 55% 45% at 80% 84%, rgba(196,196,158,0.4), transparent 62%),
    radial-gradient(ellipse 85% 75% at 8% 6%, rgba(28,29,20,0.45), transparent 64%),
    radial-gradient(ellipse 100% 90% at 50% 100%, rgba(24,25,17,0.32), transparent 70%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 180px 180px, auto, auto, auto;
  pointer-events: none;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }

*:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 2px; }

/* Cursor glow — soft lime light that trails the pointer across the whole page */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(174,251,58,0.22) 0%, rgba(174,251,58,0.08) 42%, rgba(174,251,58,0) 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.5s ease, width 0.3s ease, height 0.3s ease;
  will-change: transform;
}
.cursor-glow.is-active { opacity: 1; }
.cursor-glow.is-down { width: 380px; height: 380px; }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }

.experience-root { position: relative; }
.use-local-scroll { height: 100svh; overflow: hidden; }
.use-local-scroll .experience-root {
  height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.use-local-scroll .storyline { position: absolute; height: auto; will-change: transform; }
.use-virtual-scroll { height: 100svh; overflow: hidden; }
.use-virtual-scroll .experience-root {
  height: 100svh;
  overflow: hidden;
  scroll-behavior: auto;
}
.use-virtual-scroll .experience-root > * {
  transform: translate3d(0, var(--virtual-y, 0px), 0);
  will-change: transform;
}
.use-virtual-scroll .storyline { position: absolute; height: auto; }

h1, h2, h3 { font-family: var(--display); font-weight: 300; line-height: 1.02; letter-spacing: -0.01em; }

.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 9999;
  padding: 0.6rem 1.2rem; background: var(--lime); color: var(--black);
  font-size: 0.85rem; font-weight: 600; border-radius: 0 0 4px 4px;
}
.skip-link:focus { top: 0; }

/* Reading-progress bar (top edge, fills as the visitor moves through the story) */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 340; pointer-events: none;
  background: rgba(240, 236, 228, 0.08);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.scroll-progress.is-visible { opacity: 1; }
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--lime-dim), var(--lime));
  box-shadow: 0 0 10px rgba(174, 251, 58, 0.6);
}

/* --------------------------------------------------------------------------
   Neon connecting storyline (full-page SVG, drawn on scroll)
   -------------------------------------------------------------------------- */
.storyline {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.storyline svg { width: 100%; height: 100%; overflow: visible; display: block; }
.storyline__path {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(174, 251, 58, 0.55));
}
.storyline__path--track { stroke: rgba(174, 251, 58, 0.12); }

.media-placeholder {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(240,236,228,0.12), rgba(240,236,228,0.02)),
    repeating-linear-gradient(135deg, rgba(240,236,228,0.08) 0 1px, transparent 1px 14px),
    linear-gradient(150deg, #5f6049, #474832);
  border: 1px solid var(--panel-brd);
}
.media-placeholder::before {
  content: '';
  position: absolute;
  inset: 1rem;
  border: 1px dashed rgba(240,236,228,0.22);
  border-radius: inherit;
  pointer-events: none;
}
.media-placeholder::after {
  content: 'Placeholder';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: rgba(240,236,228,0.52);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Floating guide window (persistent host on the left)
   -------------------------------------------------------------------------- */
.guide {
  position: fixed;
  left: 1.75rem;
  bottom: 1.75rem;
  width: 340px;
  z-index: 400;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.guide.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* Circular portrait avatar (transparent silhouette placeholder by default) */
.guide__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--panel-brd);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
}
.guide__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: opacity 0.4s var(--ease);
}
.guide__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--lime);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
/* When we only have the silhouette (no real photo yet), keep it neutral;
   swap to initials only if a chapter explicitly requests the abstract mark. */
.guide.is-abstract .guide__photo { opacity: 0; }
.guide.is-abstract .guide__initials { opacity: 1; }

.guide__live {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--lime);
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 0 rgba(174, 251, 58, 0.6);
  animation: pulseDot 2s ease-out infinite;
}

/* Speech bubble carrying the name, role and quote */
.guide__bubble {
  position: relative;
  flex: 1 1 auto;
  background: var(--panel);
  border: 1px solid var(--panel-brd);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  padding: 0.85rem 1rem 0.95rem;
  transform-origin: left top;
  animation: bubblePop 0.5s var(--ease);
}
/* Tail pointing back toward the avatar */
.guide__bubble::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 24px;
  width: 13px;
  height: 13px;
  background: var(--panel);
  border-left: 1px solid var(--panel-brd);
  border-bottom: 1px solid var(--panel-brd);
  transform: rotate(45deg);
}
.guide__name { font-family: var(--display); font-size: 1.1rem; font-weight: 500; line-height: 1.1; }
.guide__role { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); margin-top: 0.15rem; }
.guide__quote {
  font-family: var(--display);
  font-size: 0.92rem; line-height: 1.5; color: rgba(240, 236, 228, 0.86);
  margin-top: 0.6rem; min-height: 3em;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), filter 0.35s var(--ease);
}
.guide__quote.is-swapping { opacity: 0; transform: translateY(4px); filter: blur(3px); }

@keyframes bubblePop {
  0% { opacity: 0; transform: translateY(6px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(174,251,58,0.55); } 70%,100% { box-shadow: 0 0 0 10px rgba(174,251,58,0); } }

/* --------------------------------------------------------------------------
   Header (minimal, appears after hero)
   -------------------------------------------------------------------------- */
.exp-header {
  position: fixed; inset: 0 0 auto; z-index: 350;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  opacity: 0; transform: translateY(-100%);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background 0.4s ease;
}
.exp-header.is-visible { opacity: 1; transform: translateY(0); }
.exp-header.is-solid { background: transparent; }
.exp-header__logo { font-family: var(--brand); font-size: 1.05rem; letter-spacing: 0.01em; }
.exp-header__actions { display: flex; align-items: center; gap: 0.75rem; }
.exp-header__chapters {
  display: none; /* desktop uses the side rail; shown on mobile below */
  align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  padding: 0.55rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--panel-brd); background: var(--panel);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.exp-header__chapters-lines { display: inline-flex; flex-direction: column; gap: 3px; }
.exp-header__chapters-lines i { display: block; width: 15px; height: 2px; border-radius: 2px; background: var(--lime); }
.exp-header__cta {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
  padding: 0.65rem 1.3rem; border-radius: 999px;
  background: var(--lime); color: var(--black);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.exp-header__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(174, 251, 58, 0.3); }
/* The short CTA label ("Let's talk") is swapped in on narrow phones only. */
.exp-header__cta-short { display: none; }

/* --------------------------------------------------------------------------
   HERO — logo, eyebrow, tagline
   -------------------------------------------------------------------------- */
.hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  padding: 6rem var(--gutter);
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
  /* Keep the hero clean, then feather only the very bottom edge so the orb
     video dissolves into the olive content background right at the seam. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
}
.hero__video iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.78svh);
  height: max(56.25vw, 100svh);
  transform: translate(-50%, -50%);
  border: 0;
}
.hero__video video {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 100%;
  min-height: 100%;
  width: max(100vw, 177.78svh);
  height: max(56.25vw, 100svh);
  transform: translate(-50%, -50%);
  object-fit: cover;
  border: 0;
}
.hero__inner { position: relative; z-index: 3; max-width: min(1200px, 94vw); }
.hero__wordmark {
  font-family: var(--brand); font-weight: 400;
  font-size: clamp(1.25rem, 7.8vw, 4.4rem); letter-spacing: -0.01em; line-height: 0.94;
  color: rgba(255,255,255,0.97);
  /* Keep "DESIGNMINDSET." + the orb dot on a single line at every width — the
     clamp scales the size down on small screens instead of wrapping. The 7.8vw
     step keeps the (nowrap) wordmark inside the viewport: the Asterone face
     renders ~11.4× the font size wide, so a larger step would overflow the
     screen and knock the hero copy off-centre on phones/tablets. */
  white-space: nowrap;
  margin: 0 auto 0.5rem;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.3s forwards;
}
.logo-dot {
  display: inline-block;
  width: 0.28em;
  height: 0.28em;
  margin-left: 0.04em;
  vertical-align: baseline;
  background: url('assets/logo-favicon.png') center / contain no-repeat;
  /* Hide the literal "." — the glossy orb logo stands in for it. Using
     text-indent (not font-size:0) keeps the em-based sizing above working. */
  text-indent: -9999px;
  overflow: hidden;
  color: transparent;
}
.hero__tagline {
  font-family: var(--brand);
  font-size: clamp(0.55rem, 1vw, 0.8rem);
  font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 0.2em;
  line-height: 1.3; color: rgba(255,255,255,0.92);
  opacity: 0; animation: fadeUp 1.1s var(--ease) 0.55s forwards;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

.hero__scroll { position: absolute; z-index: 2; bottom: calc(clamp(72px, 14%, 128px) + 0.9rem); left: 50%; transform: translateX(-50%); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-dim); text-shadow: 0 1px 12px rgba(0,0,0,0.72); }

/* The storyline is born here — a short lime thread rises from the bottom */
.hero__thread {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 2px; height: clamp(72px, 14%, 128px);
  z-index: 2;
  background: linear-gradient(180deg, rgba(174, 251, 58, 0) 0%, rgba(174, 251, 58, 0.55) 40%, var(--lime) 100%);
  opacity: 0;
  animation: fadeUp 1.2s var(--ease) 1.3s forwards;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(174, 251, 58, 0.5));
}
.hero__thread::after {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #f2ffd6;
  box-shadow: 0 0 10px rgba(174, 251, 58, 0.95), 0 0 20px rgba(174, 251, 58, 0.6);
  animation: threadFlow 2.8s ease-in-out infinite 1.6s;
}
@keyframes threadFlow {
  0%   { top: 0%;   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Chapters (narrative scroll sections)
   -------------------------------------------------------------------------- */
.chapter {
  position: relative; z-index: 2;
  min-height: auto;
  display: grid; align-items: center;
  padding: 4.5rem 0;
}
/* Transition bridge — right after the hero animation, the next section slowly
   settles into the olive background instead of cutting in abruptly */
#chapter-1::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: min(42vh, 400px);
  z-index: -1;
  background: linear-gradient(180deg, rgba(18,19,13,0.55) 0%, rgba(18,19,13,0) 100%);
  pointer-events: none;
}
.chapter__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.chapter__grid--copy { grid-template-columns: minmax(0, 44rem); justify-content: center; }
/* Alternating copy sides so the neon storyline weaves left/right between titles */
.chapter__grid--copy.chapter__grid--left  { justify-content: start; text-align: left; }
.chapter__grid--copy.chapter__grid--right { justify-content: end; text-align: right; }
.chapter__grid--right .gfx__tags { justify-content: flex-end; }
.chapter__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime);
  margin-bottom: 1.5rem;
}
.chapter__eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--lime); }
/* Section titles: Asterone brand face, regular weight, upright, UPPERCASE. The
   emphasised phrase becomes a green textmarker with knocked-out letters. */
[data-story-node] {
  font-family: var(--brand); font-weight: 400; font-style: normal;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05;
  color: var(--ink);
}
.chapter__title { font-size: clamp(1.35rem, 2.8vw, 2.1rem); }
/* Chapter 01 brand headline keeps its wordmark sizing. */
.chapter__title--brand { font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 0.98; }
/* Green textmarker with transparent (knocked-out) letters that reveal the fixed
   page backdrop — used for Chapter 01's "Why" and every title's emphasis. */
.chapter__mark,
[data-story-node] em {
  position: relative; display: inline-block; font-style: normal;
  padding: 0.12em 0.3em 0.01em; line-height: 0.9;
  color: transparent; -webkit-text-fill-color: transparent;
  background-color: #52533f;
  background-image:
    var(--noise),
    radial-gradient(ellipse 55% 45% at 80% 84%, rgba(196,196,158,0.4), transparent 62%),
    radial-gradient(ellipse 85% 75% at 8% 6%, rgba(28,29,20,0.45), transparent 64%),
    radial-gradient(ellipse 100% 90% at 50% 100%, rgba(24,25,17,0.32), transparent 70%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 180px 180px, auto, auto, auto;
  background-attachment: fixed;
  -webkit-background-clip: text; background-clip: text;
}
.chapter__mark::before,
[data-story-node] em::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--lime); border-radius: 2px;
}
.chapter__mark { margin-bottom: 0.12em; }
.chapter__wordmark { display: block; color: var(--ink); }
.chapter__q { color: var(--lime); }
.chapter__text { margin-top: 1.5rem; font-family: var(--body); font-weight: 400; color: rgba(255,255,255,0.9); font-size: 1rem; line-height: 1.35; max-width: 42ch; }

/* Copy sitting in the right-hand column of a chapter grid aligns to the right
   (eyebrow, title, body and tags); left-column copy keeps the default left. */
.reveal--right:has(.chapter__title),
.reveal--right:has(.chapter__eyebrow) { text-align: right; }
.reveal--right:has(.chapter__title) .chapter__text,
.reveal--right:has(.chapter__eyebrow) .chapter__text { margin-left: auto; }
.reveal--right:has(.chapter__title) .chapter__eyebrow,
.reveal--right:has(.chapter__eyebrow) .chapter__eyebrow { flex-direction: row-reverse; }
.reveal--right:has(.chapter__title) .gfx__tags { justify-content: flex-end; }

.chapter__visual {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 4 / 5; background: #52533f;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.chapter__visual img { width: 100%; height: 100%; object-fit: cover; }
.chapter__visual.media-placeholder { display: block; }
.chapter__visual--wide { aspect-ratio: 16 / 11; }
/* Clickable media thumbnail — opens the source (YouTube / Instagram) in a new
   tab, instead of embedding a heavy third-party iframe. */
.media-embed {
  position: relative; display: block; border-radius: 18px; overflow: hidden;
  background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.media-embed--video { aspect-ratio: 16 / 9; width: 100%; }
.media-embed--reel  { aspect-ratio: 9 / 16; width: 100%; max-width: 340px; margin-inline: auto; }
.media-embed img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.media-embed::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
}
.media-embed:hover img { transform: scale(1.04); }
.media-embed__play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(174, 251, 58, 0.92); color: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.media-embed:hover .media-embed__play { transform: translate(-50%, -50%) scale(1.08); background: var(--lime); }
.media-embed__play svg { width: 26px; height: 26px; margin-left: 3px; }
.media-embed__label {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; letter-spacing: 0.05em; color: #fff;
  background: rgba(0,0,0,0.5); padding: 0.42rem 0.85rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.media-embed__label svg { width: 13px; height: 13px; }
.chapter__visual--video {
  aspect-ratio: 16 / 9;
}
.chapter__visual--video-spacer {
  visibility: hidden;
}
.promo-release-buffer {
  height: 100vh;
}

/* Fixed overlay that docks into the spacer above, then grows toward
   near-fullscreen as it nears the viewport centre (driven by experience.js) */
.promo-overlay {
  position: fixed;
  top: 0; left: 0;
  z-index: 250;
  border-radius: 18px;
  overflow: hidden;
  background: #52533f;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  pointer-events: none;
}
.promo-overlay .promo { pointer-events: auto; }

#chapter1Text { transition: opacity 0.2s linear, transform 1s var(--ease); }

/* Promo film — muted preview loops in the background; click loads the full film */
.promo { position: absolute; inset: 0; }
.promo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo__preview { transition: opacity 0.5s var(--ease), filter 0.5s var(--ease); filter: saturate(1.02); }
.promo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.32) 100%);
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.promo__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lime); color: var(--black);
  z-index: 2;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), opacity 0.4s var(--ease);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.promo__play::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--lime); animation: promoPulse 2.6s ease-out infinite;
}
.promo__play svg { width: 30px; height: 30px; margin-left: 4px; }
.promo__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.promo__label {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  z-index: 2; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.9); text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
@keyframes promoPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.55); opacity: 0; } }

/* Once the real film is playing, hide the overlay/preview affordances */
.promo.is-playing .promo__play,
.promo.is-playing .promo__label,
.promo.is-playing .promo__preview { opacity: 0; pointer-events: none; }
.promo.is-playing::after { opacity: 0; }
.promo__full { position: absolute; inset: 0; z-index: 1; }

/* Reveal */
.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(34px); }
.reveal.is-in { opacity: 1; transform: none; }
.js .reveal--right { transform: translateX(40px); }
.reveal--right.is-in { transform: none; }

/* Contrast split (generic vs specialised) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--panel-brd); border: 1px solid var(--panel-brd); border-radius: 16px; overflow: hidden; margin-top: 2rem; }
.split__cell { background: #52533f; padding: 1.6rem; }
.split__cell h3 { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); margin-bottom: 0.7rem; }
.split__cell p { font-size: 0.9rem; color: var(--muted-soft); }
.split__cell--us { background: linear-gradient(160deg, rgba(0,1,247,0.28), rgba(24,24,18,0.88)); }
.split__cell--us h3 { color: var(--lime); }
.split__cell--us p { color: rgba(240,236,228,0.85); }

/* --------------------------------------------------------------------------
   Case study (Viabizzuno)
   -------------------------------------------------------------------------- */
.case { position: relative; z-index: 2; padding: 4rem 0; }
.case__head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.case__title { font-size: clamp(1.6rem, 3.8vw, 2.7rem); color: var(--ink); }
.case__title em { font-style: normal; }
.case__desc { margin-top: 1.2rem; color: rgba(240,236,228,0.7); font-size: 0.98rem; line-height: 1.65; }
.case__embed {
  position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background: #000; box-shadow: 0 40px 90px rgba(0,0,0,0.6);
}
.case__embed img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: opacity var(--dur), transform 0.6s var(--ease); }
.case__embed:hover img { opacity: 0.9; transform: scale(1.03); }
.case__embed.media-placeholder { cursor: default; }
.case__embed.media-placeholder::before { border-color: rgba(255,255,255,0.22); }
.case__embed.media-placeholder::after { color: rgba(255,255,255,0.55); }
.case__play {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  background: var(--lime); color: var(--black); display: grid; place-items: center;
  transition: transform var(--dur) var(--ease);
}
.case__play svg { width: 30px; height: 30px; margin-left: 4px; }
.case__embed:hover .case__play { transform: scale(1.1); }
.case__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case__brand { position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 2; font-family: var(--display); font-style: italic; font-size: 1.6rem; color: #fff; }
.case__label { position: absolute; top: 1.2rem; left: 1.4rem; z-index: 2; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); }

/* --------------------------------------------------------------------------
   Influencer / Instagram card
   -------------------------------------------------------------------------- */
.insta { position: relative; z-index: 2; padding: 4rem 0; }
.insta__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.insta__card {
  background: #52533f; border: 1px solid var(--panel-brd); border-radius: 22px; padding: 1.6rem; max-width: 380px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.insta__top { display: flex; align-items: center; gap: 1rem; }
.insta__avatar { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lime); }
.insta__handle { font-weight: 600; }
.insta__handle a:hover { text-decoration: underline; }
.insta__top a { display: inline-flex; }
.insta__verify { color: var(--lime); }
.insta__meta { font-size: 0.8rem; color: var(--gray); }
.insta__stats { display: flex; gap: 1.4rem; margin: 1.3rem 0; }
.insta__stat { flex: 1 1 0; min-width: 0; }
.insta__stat b { font-family: var(--display); font-size: 1.5rem; display: block; font-variant-numeric: tabular-nums; }
.insta__stat span { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); }
.insta__brands { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.insta__brands span { font-size: 0.68rem; padding: 0.3rem 0.7rem; border: 1px solid var(--panel-brd); border-radius: 999px; color: rgba(240,236,228,0.75); }
.insta__brands .insta__brands-more { color: var(--lime); border-color: rgba(174,251,58,0.4); }

/* --------------------------------------------------------------------------
   Ads / performance dashboard
   -------------------------------------------------------------------------- */
.ads { position: relative; z-index: 2; padding: 4rem 0; }
.ads__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.dash { background: #52533f; border: 1px solid var(--panel-brd); border-radius: 18px; padding: 1.6rem; }
.dash__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.dash__kpi b { font-family: var(--display); font-size: 1.6rem; color: var(--lime); display: block; }
.dash__kpi span { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }
.dash__flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; gap: 0.6rem; align-items: center; margin-bottom: 1.2rem; color: rgba(240,236,228,0.72); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.dash__flow i { display: block; height: 1px; background: linear-gradient(90deg, var(--lime), rgba(174,251,58,0.08)); }
.dash__chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.dash__bar { flex: 1; background: linear-gradient(180deg, var(--blue-soft), var(--blue)); border-radius: 4px 4px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform 0.9s var(--ease); }
.ads.is-in .dash__bar { transform: scaleY(1); }

/* --------------------------------------------------------------------------
   Graphic design (branding morph)
   -------------------------------------------------------------------------- */
.gfx { position: relative; z-index: 2; padding: 4rem 0; }
.gfx__tags { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.gfx__tags span {
  font-size: 0.82rem; padding: 0.55rem 1.1rem; border: 1px solid var(--panel-brd); border-radius: 999px;
  color: rgba(240,236,228,0.8); transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.gfx__tags span:hover { background: var(--lime); color: var(--black); border-color: var(--lime); }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.team { position: relative; z-index: 2; padding: 4rem 0; }
.team__head { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.member { text-align: center; }
.member--text {
  min-height: 8.5rem;
  padding: 1.35rem 1rem;
  border: 1px solid var(--panel-brd);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(240,236,228,0.035);
}
.member__name { font-family: var(--brand); font-weight: 400; font-size: 0.98rem; }
.member__role { font-family: var(--body); font-weight: 400; font-size: 0.72rem; color: var(--lime); letter-spacing: 0.04em; margin-top: 0.15rem; }
.member__socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem; }
.member__socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: var(--muted); border: 1px solid var(--panel-brd);
  transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.member__socials a:hover,
.member__socials a:focus-visible { color: var(--black); background: var(--lime); border-color: var(--lime); transform: translateY(-2px); }
.member__socials svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Final / portfolio / story / contact
   -------------------------------------------------------------------------- */
.final { position: relative; z-index: 2; background: transparent; }
.marquee-logos { border-top: 1px solid var(--panel-brd); border-bottom: 1px solid var(--panel-brd); padding: 1.8rem 0; overflow: hidden; }
.marquee-logos__track { display: flex; gap: 3.5rem; white-space: nowrap; animation: slide 26s linear infinite; }
.marquee-logos span { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--muted-soft); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.portfolio { padding: 4rem 0 2rem; }
.portfolio__head { max-width: 760px; margin-bottom: 2.5rem; }
.portfolio__head h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); }
.portfolio__head h2 em { font-style: normal; }

/* Horizontal scroll strip — a real overflow-x container so it can be swiped /
   scrolled left and right; experience.js also maps vertical wheel onto it
   (with easing) and releases back to vertical page scroll at either end.
   The tiles form a 3D wall of images angled into the distance, like a gallery
   corridor you flip through. */
.portfolio__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;         /* Firefox — hide the scrollbar */
  -ms-overflow-style: none;      /* old Edge */
  padding: 4rem clamp(1.5rem, 8vw, 8rem) 4.5rem;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  cursor: grab;
}
.portfolio__viewport.is-dragging { cursor: grabbing; }
.portfolio__viewport::-webkit-scrollbar { display: none; } /* WebKit — hide the scrollbar */
.portfolio__track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  width: max-content;
  transform-style: preserve-3d;
}

.portfolio-card {
  position: relative; cursor: pointer;
  flex: 0 0 clamp(300px, 34vw, 460px);
  transform-style: preserve-3d;
  transition: transform 0.55s var(--ease);
}
.portfolio-card:hover, .portfolio-card:focus-within { z-index: 6; }

/* Evenly spaced panes, each turned slightly in 3D for a gallery-corridor feel.
   On hover/focus the card straightens to face you, lifts forward, and the JS
   controller glides it to the centre of the strip. */
.portfolio-card__media {
  position: relative; z-index: 1;
  aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: #111;
  transform: rotateY(-32deg);
  transform-origin: center center;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.portfolio-card:hover .portfolio-card__media,
.portfolio-card:focus-within .portfolio-card__media {
  transform: rotateY(0deg) translateZ(80px) scale(1.04);
}
.portfolio-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.portfolio-card:hover .portfolio-card__media img,
.portfolio-card:focus-within .portfolio-card__media img { transform: scale(1.05); }
.portfolio-card__trigger { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; background: transparent; }
.portfolio-card__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.85);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lime); color: var(--black); opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.portfolio-card__play svg { width: 22px; height: 22px; margin-left: 3px; }
.portfolio-card:hover .portfolio-card__play,
.portfolio-card:focus-within .portfolio-card__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Just the title, centred underneath the image — revealed on hover/focus. */
.portfolio-card__caption {
  position: absolute; left: 50%; top: 100%; z-index: 4;
  width: max-content; max-width: 82%;
  margin-top: 0.9rem;
  transform: translateX(-50%) translateY(6px);
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.portfolio-card:hover .portfolio-card__caption,
.portfolio-card:focus-within .portfolio-card__caption { opacity: 1; transform: translateX(-50%) translateY(0); }
.portfolio-card__caption span { color: #fff; font-size: clamp(0.9rem, 1.3vw, 1.05rem); letter-spacing: 0.02em; }
.portfolio-card__caption h3 { display: none; }

/* Centred description below the whole strip — reveals the hovered/focused
   card's brand label in one fixed place in the middle. */
.portfolio__desc {
  max-width: 720px; margin: 0 auto; text-align: center;
  min-height: 2.4rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.portfolio__desc.is-active { opacity: 1; transform: translateY(0); }
.portfolio__desc-brand {
  color: var(--lime); margin-bottom: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem); letter-spacing: 0.08em; text-transform: uppercase;
}
.portfolio__desc-hook { display: none; }
/* The centred hover description is a pointer-only affordance — only show it on
   wide screens (>=1000px); on smaller/touch layouts it just adds clutter. */
@media (max-width: 999px) { .portfolio__desc { display: none; } }

/* Placeholder tiles (content coming later). */
.portfolio-card--ph { pointer-events: none; }
.portfolio-card--ph .portfolio-card__media {
  background:
    linear-gradient(135deg, rgba(240,236,228,0.14), rgba(240,236,228,0.02)),
    linear-gradient(150deg, #5f6049, #3c3d29);
  display: grid; place-items: center;
}
.portfolio-card--ph .portfolio-card__phlabel {
  color: rgba(240,236,228,0.5); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  transform: rotate(0deg);
}
.portfolio-card--ph .portfolio-card__caption span { color: rgba(240,236,228,0.6); }

@media (prefers-reduced-motion: reduce) {
  .portfolio-card__media { transform: none; }
  .portfolio-card:hover .portfolio-card__media,
  .portfolio-card:focus-within .portfolio-card__media { transform: scale(1.02); }
  .portfolio__viewport { scroll-behavior: auto; perspective: none; }
}

.story { padding: 3.25rem 0; }
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.story__grid--copy { grid-template-columns: minmax(0, 44rem); justify-content: center; }
.story__grid--logo { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); justify-content: center; align-items: center; }
.story__logo { max-width: 240px; margin-inline: auto; }
.story__logo img { width: 100%; height: auto; display: block; }
.story h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin-bottom: 0.9rem; }
.story h2 em { font-style: normal; }
.story p { color: var(--muted); margin-bottom: 0.55rem; line-height: 1.5; font-size: 1rem; }
.story p:last-child { margin-bottom: 0; }
.story__visual { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; }
.story__visual img { width: 100%; height: 100%; object-fit: cover; }
.story__visual.media-placeholder { display: block; }

/* Storyline finale — once the neon line reaches "Let's tell your story", fade
   everything above the closing CTA so it becomes the sole focus. The base
   transition lives on the elements themselves so they also fade back IN when
   you scroll up (a transition set only on the .finale-focus state would snap). */
.final > .marquee-logos,
.final > .portfolio,
.final > .story { transition: opacity 0.9s var(--ease); }
.finale-focus .final > .marquee-logos,
.finale-focus .final > .portfolio,
.finale-focus .final > .story,
.finale-focus .exp-header,
.finale-focus .scroll-progress {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.9s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .finale-focus .final > .marquee-logos,
  .finale-focus .final > .portfolio,
  .finale-focus .final > .story,
  .finale-focus .exp-header,
  .finale-focus .scroll-progress { transition: none; }
}

.services, .process, .proof { position: relative; z-index: 2; }
.services { padding: 4.5rem 0 2.5rem; }
.services__head { max-width: 780px; margin-bottom: 2.2rem; }
.services__head h2, .process__intro h2 { font-size: clamp(2rem, 5vw, 3.8rem); margin-bottom: 1.2rem; }
.services__head h2 em, .process__intro h2 em { font-style: normal; }
.services__head p { color: var(--muted); max-width: 62ch; }
.services__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--panel-brd); border-radius: 18px; overflow: hidden; background: var(--panel-brd); gap: 1px; }
.service { min-height: 260px; padding: 1.35rem; background: rgba(20,20,16,0.58); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.service span { color: var(--lime); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }
.service h3 { font-family: var(--brand); font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.08; }
.service p { color: var(--muted-soft); font-size: 0.92rem; line-height: 1.62; }
.process { padding: 3rem 0; }
.process__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.process__steps { display: grid; gap: 1px; background: var(--panel-brd); border: 1px solid var(--panel-brd); border-radius: 18px; overflow: hidden; }
.process__steps li { display: grid; grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 1fr); gap: 1rem; align-items: start; background: rgba(20,20,16,0.52); padding: 1.2rem; }
.process__steps span { color: var(--ink); font-weight: 600; }
.process__steps p { color: var(--muted-soft); }
.proof { padding: 1rem 0 3.5rem; }
.proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--panel-brd); border: 1px solid var(--panel-brd); border-radius: 18px; overflow: hidden; }
.proof__item { background: rgba(20,20,16,0.5); padding: 1.25rem; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; }
.proof__item b { font-family: var(--brand); color: var(--lime); font-weight: 400; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 0.95; }
.proof__item span { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }

.contact {
  min-height: 100svh;
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem 0; text-align: center;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 30%, #000 55%);
}
/* Title sits at the vertical centre; the actions are lifted out of the flow
   and pinned into the lower quarter of the viewport. */
.contact .container { position: static; }
.contact__actions {
  position: absolute;
  left: 0; right: 0;
  bottom: 11%;
  display: flex; flex-direction: column; align-items: center;
}
.contact__title { font-size: clamp(1.75rem, 4vw, 2.7rem); line-height: 1.1; color: var(--ink); }
.contact__title em { font-style: normal; }
.is-chapter [data-story-node] em,
.portfolio [data-story-node] em,
.story [data-story-node] em,
.services [data-story-node] em,
.process [data-story-node] em,
.contact [data-story-node] em {
  display: inline;
  padding: 0;
  color: var(--lime);
  -webkit-text-fill-color: currentColor;
  font-style: normal;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.is-chapter [data-story-node] em::before,
.portfolio [data-story-node] em::before,
.story [data-story-node] em::before,
.services [data-story-node] em::before,
.process [data-story-node] em::before,
.contact [data-story-node] em::before {
  content: none;
}
.contact__sub { color: var(--muted); max-width: 58ch; margin: 1.4rem auto 2.5rem; }
.contact__cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 0;
  background: var(--lime); color: var(--black); font-family: var(--brand); font-weight: 400; font-size: 0.95rem;
  padding: 1.1rem 2.4rem; border-radius: 999px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact__cta:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(174,251,58,0.3); }
.contact__email { display: block; margin-top: 1.6rem; color: var(--gray); font-size: 0.85rem; letter-spacing: 0.04em; }

.exp-footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 2.5rem 0; background: #000; }
.exp-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem; align-items: center; }
.exp-footer__brand { display: flex; align-items: center; gap: 1.4rem; }
.exp-footer__logo { font-family: var(--brand); font-size: 1.15rem; letter-spacing: 0.01em; }
.exp-footer__text { display: flex; flex-direction: column; gap: 0.25rem; }
.exp-footer__tagline { font-size: 0.8rem; color: var(--gray); letter-spacing: 0.03em; }
.exp-footer__copy { font-size: 0.72rem; color: rgba(242,237,226,0.58); }
.exp-footer a { color: var(--gray); font-size: 0.8rem; transition: color var(--dur); }
.exp-footer a:hover { color: var(--ink); }
.exp-footer__social { display: flex; gap: 1.4rem; }
.exp-footer__social a { display: inline-flex; align-items: center; min-height: 44px; }

/* --------------------------------------------------------------------------
   Portfolio case-study detail page (fullscreen takeover)
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.4s var(--ease); }
.lightbox__backdrop { position: absolute; inset: 0; background: #0c0d09; }
.lightbox__page {
  position: absolute; inset: 0; overflow-y: auto;
  background: #16170f;
  transform: translateY(3%); opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.4s var(--ease);
}
.lightbox.is-open .lightbox__page { transform: none; opacity: 1; }
.lightbox__bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(180deg, rgba(22,23,15,0.95), rgba(22,23,15,0.7) 75%, transparent);
  backdrop-filter: blur(6px);
}
.lightbox__back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; letter-spacing: 0.02em; color: rgba(240,236,228,0.8); transition: color 0.3s var(--ease); }
.lightbox__back svg { width: 18px; height: 18px; }
.lightbox__back:hover { color: var(--lime); }
.lightbox__close {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(240,236,228,0.1); color: var(--ink);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}
.lightbox__close:hover { background: var(--lime); color: var(--black); transform: rotate(90deg); }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__panel { max-width: 980px; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem) 5rem; }
.lightbox__video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 18px; overflow: hidden; margin-top: 0.6rem; box-shadow: 0 40px 100px rgba(0,0,0,0.5); }
.lightbox__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox__body { padding-top: 2.2rem; max-width: 66ch; }
.lightbox__eyebrow { display: inline-flex; color: var(--lime); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.7rem; }
.lightbox__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--ink); margin-bottom: 1.2rem; line-height: 1.15; }
.lightbox__desc p { color: rgba(240,236,228,0.72); font-size: 1rem; line-height: 1.7; margin-bottom: 1rem; }
.lightbox__desc p:last-child { margin-bottom: 0; }
.lightbox__yt {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.8rem;
  background: var(--lime); color: var(--black); font-weight: 600; font-size: 0.9rem;
  padding: 0.95rem 1.8rem; border-radius: 999px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.lightbox__yt svg { width: 16px; height: 16px; }
.lightbox__yt:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(174,251,58,0.3); }
body.lightbox-open { overflow: hidden; }
body.chapters-open { overflow: hidden; }
@media (max-width: 640px) {
  .lightbox__bar { padding: 1rem 1.2rem; }
  .lightbox__back span { display: none; }
}

/* --------------------------------------------------------------------------
   Mobile chapters sheet (fullscreen table of contents)
   -------------------------------------------------------------------------- */
.chapters-sheet {
  position: fixed; inset: 0; z-index: 1200;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.chapters-sheet.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s var(--ease); }
.chapters-sheet__backdrop { position: absolute; inset: 0; background: rgba(8, 9, 6, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.chapters-sheet__panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1b1c13, #16170f);
  transform: translateY(2.5%); opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.35s var(--ease);
}
.chapters-sheet.is-open .chapters-sheet__panel { transform: none; opacity: 1; }
.chapters-sheet__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 6vw, 2rem);
  border-bottom: 1px solid var(--panel-brd);
}
.chapters-sheet__title { font-family: var(--brand); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); }
.chapters-sheet__close {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(240, 236, 228, 0.1); color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.chapters-sheet__close:hover { background: var(--lime); color: var(--black); }
.chapters-sheet__close svg { width: 18px; height: 18px; }
.chapters-sheet__list {
  list-style: none; margin: 0;
  flex: 1 1 auto; overflow-y: auto;
  padding: 0.5rem clamp(1.25rem, 6vw, 2rem) 2rem;
}
.chapters-sheet__item {
  display: flex; align-items: baseline; gap: 1rem; width: 100%;
  padding: 1.05rem 0.4rem;
  border-bottom: 1px solid rgba(240, 236, 228, 0.08);
  color: var(--ink); text-align: left;
  transition: color 0.3s var(--ease);
}
.chapters-sheet__item:hover { color: var(--lime); }
.chapters-sheet__num { font-family: var(--brand); font-size: 0.78rem; color: var(--gray); min-width: 2ch; }
.chapters-sheet__label { font-family: var(--display); font-size: 1.35rem; font-weight: 300; line-height: 1.1; }
.chapters-sheet__item.is-active { color: var(--lime); }
.chapters-sheet__item.is-active .chapters-sheet__num { color: var(--lime); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .container, .chapter__grid, .promo-release-buffer { max-width: 100vw; }
  .chapter__grid, .insta__grid, .ads__grid, .story__grid, .portfolio__grid, .process__inner { grid-template-columns: 1fr; }
  /* Mobile: the copy always stacks above its image / video / graphic,
     whichever side it sits on at desktop — push every visual after the text. */
  .chapter__visual, .media-embed, .dash, .insta__card, .story__logo { order: 2; }
  /* The promo film no longer pins/grows on phones (see experience.js), so the
     tall scroll buffer it reserved would just be dead space — collapse it. */
  .promo-release-buffer { height: 0; }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof__grid { grid-template-columns: repeat(2, 1fr); }
  .exp-header__chapters { display: inline-flex; }
  /* Stack copy left-aligned on mobile for readability (no side alternation) */
  .chapter__grid--copy.chapter__grid--left,
  .chapter__grid--copy.chapter__grid--right { justify-content: start; text-align: left; }
  .chapter__grid--right .gfx__tags { justify-content: flex-start; }
  .chapter { min-height: auto; padding: 3.25rem 0; }
  .js .reveal--right { transform: translateY(34px); }
  .reveal--right.is-in { transform: none; }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .guide { left: 1rem; right: 1rem; bottom: 1rem; width: auto; display: flex; align-items: flex-start; }
  .guide__avatar { width: 60px; height: 60px; }
  .guide__bubble { padding: 0.7rem 0.9rem; }
  .guide__quote { min-height: 0; font-size: 0.82rem; }
  .storyline { opacity: 0.85; }
  .portfolio-card { min-height: 0; }
  .portfolio__viewport { padding: 2rem var(--gutter) 1.5rem; perspective: none; }
  /* The caption sits below the (hover-only) thumbnail and is hidden on mobile,
     so the cards should hug their images instead of reserving desktop height. */
  .portfolio { padding-bottom: 0.5rem; }
  .story { padding-top: 2rem; }
  .portfolio-card { flex-basis: min(82vw, 390px); margin-right: 1rem; transform: none; }
  .portfolio-card__media,
  .portfolio-card:hover .portfolio-card__media,
  .portfolio-card:focus-within .portfolio-card__media { transform: none; }
  .portfolio-card:hover + .portfolio-card,
  .portfolio-card:focus-within + .portfolio-card,
  .portfolio-card:has(+ .portfolio-card:hover),
  .portfolio-card:has(+ .portfolio-card:focus-within) { transform: none; }
  .portfolio-card__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 560px) {
  :root { --gutter: 1.25rem; }
  .container { padding-left: 1.25rem; padding-right: 1.25rem; }
  .chapter__grid > *, .split, .dash, .insta__card, .service, .process__steps li, .proof__item { min-width: 0; }
  [data-story-node] { overflow-wrap: anywhere; }
  .chapter__mark,
  [data-story-node] em { padding-left: 0.18em; padding-right: 0.18em; }
  .split { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: 1fr 1fr; }
  .services__grid, .proof__grid { grid-template-columns: 1fr; }
  .service { min-height: 210px; }
  .process__steps li { grid-template-columns: 1fr; }
  .guide__name { font-size: 1rem; }
  .dash { padding: 1.3rem; }
  .dash__row { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .dash__kpi b { font-size: 1.3rem; }
  .dash__flow { gap: 0.4rem; font-size: 0.58rem; letter-spacing: 0.06em; }
  /* Keep the fixed header from crowding on narrow phones: shrink the wordmark,
     reduce the Chapters control to an icon and swap in the short CTA label. */
  .exp-header { padding: 0.7rem 1rem; gap: 0.5rem; }
  .exp-header__actions { gap: 0.5rem; }
  .exp-header__logo { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.78rem; }
  .exp-header__chapters { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .exp-header__chapters-label { display: none; }
  .exp-header__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.74rem; }
  .exp-header__cta-full { display: none; }
  .exp-header__cta-short { display: inline; }
  .contact__email { display: inline-flex; align-items: center; min-height: 44px; }
  /* Pull the closing title and its actions into one centred cluster instead of
     pinning the button to the bottom (which left the title stranded high up). */
  .contact__actions { position: static; left: auto; right: auto; bottom: auto; margin-top: 2.25rem; }
  /* Tighten the footer so it doesn't dominate the small screen. */
  .exp-footer { padding: 1.75rem 0; }
  .exp-footer__inner { gap: 1rem; }
  .exp-footer__brand { gap: 1rem; align-items: flex-start; }
  .exp-footer__logo { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .reveal .chapter__eyebrow::before { width: 26px; }
  .hero__wordmark, .hero__tagline { opacity: 1; animation: none; }
  .hero__thread { opacity: 1; animation: none; }
  .dash__bar { transform: scaleY(1); }
  .marquee-logos__track { animation: none; }
}

/* ==========================================================================
   Experience v2.1 — storyline comet · chapter rail · richer motion
   ========================================================================== */

/* Glowing comet head that leads the storyline as it draws */
.storyline__comet {
  fill: none;
  stroke: #f2ffd6;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(174, 251, 58, 0.95)) drop-shadow(0 0 18px rgba(174, 251, 58, 0.6));
  transition: opacity 0.5s var(--ease);
}
.storyline.is-live .storyline__comet { opacity: 1; }
.storyline.is-live .storyline__path:not(.storyline__path--track) {
  animation: lineGlow 3.4s ease-in-out infinite;
}
@keyframes lineGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(174, 251, 58, 0.4)); }
  50%      { filter: drop-shadow(0 0 11px rgba(174, 251, 58, 0.8)); }
}

/* Node dots where the line meets each section title */
.storyline__node {
  fill: #0a0d05;
  stroke: rgba(174, 251, 58, 0.45);
  stroke-width: 2;
  transition: fill 0.45s var(--ease), stroke 0.45s var(--ease);
}
.storyline__node.is-on {
  fill: var(--lime);
  stroke: var(--lime);
  filter: drop-shadow(0 0 7px rgba(174, 251, 58, 0.95));
  animation: nodePop 0.55s var(--ease);
}
@keyframes nodePop {
  0%   { transform: scale(0.4); transform-box: fill-box; transform-origin: center; }
  60%  { transform: scale(1.35); transform-box: fill-box; transform-origin: center; }
  100% { transform: scale(1); transform-box: fill-box; transform-origin: center; }
}

/* Title highlight when the line reaches it */
/* Title reacts as the line threads through it — neon "ignite" */
[data-story-node] {
  position: relative;
  z-index: 0;
  transition: text-shadow 0.55s var(--ease), color 0.55s var(--ease);
}
/* soft halo that blooms behind the title when the line arrives */
[data-story-node]::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 128%; height: 190%;
  transform: translate(-50%, -50%) scale(0.5);
  background: radial-gradient(ellipse at center, rgba(174, 251, 58, 0.22), rgba(174, 251, 58, 0) 68%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
[data-story-node].is-linked::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
[data-story-node].is-linked { animation: titleIgnite 0.9s var(--ease) both; }
/* The emphasised word is a green textmarker (see .chapter__mark rules), so no
   separate lime colour swap or sweeping underline is applied here. */

@keyframes titleIgnite {
  0%   { text-shadow: 0 0 0 rgba(174, 251, 58, 0); }
  12%  { text-shadow: 0 0 26px rgba(174, 251, 58, 0.95); }
  22%  { text-shadow: 0 0 4px rgba(174, 251, 58, 0.25); }
  38%  { text-shadow: 0 0 34px rgba(174, 251, 58, 1); }
  100% { text-shadow: 0 0 26px rgba(174, 251, 58, 0.3); }
}

/* ---- Grand finale: the closing title where the whole line culminates ---- */
.storyline__node--finale.is-on {
  filter: drop-shadow(0 0 12px rgba(174, 251, 58, 1)) drop-shadow(0 0 26px rgba(174, 251, 58, 0.7));
}
[data-story-node].is-finale::after {
  width: 190%; height: 360%;
  background: radial-gradient(ellipse at center, rgba(174, 251, 58, 0.34), rgba(174, 251, 58, 0) 70%);
}
[data-story-node].is-finale::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  border: 2px solid var(--lime);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
[data-story-node].is-finale.is-linked { animation: titleFinale 1.5s var(--ease) both; }
[data-story-node].is-finale.is-linked::before { animation: finaleRing 1.9s var(--ease) forwards; }
[data-story-node].is-finale.is-linked::after { animation: finaleHalo 1.9s var(--ease) infinite; }

@keyframes titleFinale {
  0%   { text-shadow: 0 0 0 rgba(174, 251, 58, 0); transform: scale(0.95); }
  20%  { text-shadow: 0 0 50px rgba(174, 251, 58, 1); }
  45%  { transform: scale(1.06); }
  70%  { text-shadow: 0 0 28px rgba(174, 251, 58, 0.8); }
  100% { text-shadow: 0 0 42px rgba(174, 251, 58, 0.55); transform: scale(1); }
}
@keyframes finaleRing {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(7.5); }
}
@keyframes finaleHalo {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* Chapter navigation rail (right side) */
.chapter-nav {
  position: fixed; right: 1.35rem; top: 50%;
  transform: translateY(-50%);
  z-index: 360;
  display: flex; flex-direction: column; gap: 0.85rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.chapter-nav.is-visible { opacity: 1; pointer-events: auto; }
.chapter-nav__dot {
  position: relative; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(240, 236, 228, 0.24);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.chapter-nav__dot::after {
  content: attr(data-label);
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, 0.72);
  padding: 0.32rem 0.6rem; border-radius: 7px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.chapter-nav__dot:hover { transform: scale(1.3); background: rgba(240, 236, 228, 0.55); }
.chapter-nav__dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.chapter-nav__dot.is-active {
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(174, 251, 58, 0.16);
  transform: scale(1.35);
}

/* Reveal variants + staggered grids + eyebrow line draw */
.js .reveal--blur { filter: blur(14px); }
.reveal--blur.is-in { filter: blur(0); }
.team__grid > .reveal,
.portfolio__grid > .reveal { transition-delay: calc(var(--i, 0) * 65ms); }
.reveal .chapter__eyebrow::before { width: 0; transition: width 0.7s var(--ease) 0.25s; }
.reveal.is-in .chapter__eyebrow::before { width: 26px; }

/* Living aura behind the hero logo */
.hero__inner::before {
  content: '';
  position: absolute; left: 50%; top: 34%;
  width: min(640px, 116vw); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(174, 251, 58, 0.16), rgba(174, 251, 58, 0) 62%);
  filter: blur(14px); z-index: -1; pointer-events: none;
  animation: auraFloat 8s ease-in-out infinite;
}
@keyframes auraFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.75; }
  50%      { transform: translate(-50%, -53%) scale(1.09); opacity: 1; }
}

/* Magnetic buttons */
.contact__cta, .exp-header__cta { will-change: transform; }

@media (max-width: 900px) {
  .chapter-nav { display: none; }
}