/* ==========================================================================
   home.css — splash (camera intro), hero slider, statement, services stack,
   featured work, process, numbers
   ========================================================================== */

/* Splash — a camera viewfinder that pulls focus on the mark --------------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-splash);
  display: none;
  color: #f5f2ff;
  background: radial-gradient(90% 70% at 50% 45%, #1e0a55 0%, #0a0420 55%, #030109 100%);
  --hole: 0px;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
  mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
}
html.has-splash .splash { display: block; }
html.has-splash body { overflow: hidden; }

.splash__frame { position: absolute; inset: clamp(14px, 3vw, 40px); }
.splash__frame .vf { --vf-inset: 0; }
.splash__frame .vf i { inline-size: clamp(22px, 3vw, 42px); block-size: clamp(22px, 3vw, 42px); }
.splash__grid { position: absolute; inset: 0; pointer-events: none; }
.splash__grid i { position: absolute; background: rgba(255, 255, 255, 0.09); }
.splash__grid i:nth-child(1), .splash__grid i:nth-child(2) { inset-block: 0; inline-size: 1px; transform-origin: top; }
.splash__grid i:nth-child(1) { inset-inline-start: 33.333%; }
.splash__grid i:nth-child(2) { inset-inline-start: 66.666%; }
.splash__grid i:nth-child(3), .splash__grid i:nth-child(4) { inset-inline: 0; block-size: 1px; transform-origin: left; }
.splash__grid i:nth-child(3) { inset-block-start: 33.333%; }
.splash__grid i:nth-child(4) { inset-block-start: 66.666%; }

.splash__hud {
  position: absolute;
  inset-inline: clamp(16px, 2.5vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  color: rgba(255, 255, 255, 0.78);
}
.splash__hud--top { inset-block-start: clamp(16px, 2.5vw, 30px); }
.splash__hud--bottom { inset-block-end: clamp(16px, 2.5vw, 30px); }
.splash__hud-group { display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); }
.splash__tc { font-variant-numeric: tabular-nums; }
.splash__battery { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid currentColor; border-radius: 3px; }
.splash__battery i { inline-size: 5px; block-size: 8px; background: currentColor; }
.splash__af { color: #fff; }
.splash__af.is-locked { color: #7dffb3; }

.splash__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-5);
  text-align: center;
}
.splash__logo {
  display: block;
  inline-size: min(56vw, 440px);
  filter: blur(22px) drop-shadow(0 0 40px rgba(170, 90, 255, 0.6));
  opacity: 0;
}
.splash__title { display: flex; gap: 0.5em; font-size: clamp(0.9rem, 0.7rem + 0.7vw, 1.3rem); letter-spacing: 0.5em; font-weight: 500; text-transform: uppercase; }
.splash__title span { display: inline-block; opacity: 0; }
.splash__tag { color: rgba(255, 255, 255, 0.6); opacity: 0; }

/* Shot list — each service is a "scene" the camera racks focus onto */
.splash__shots {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.splash__shot {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding-inline: var(--sp-4);
  text-align: center;
  opacity: 0;
}
.splash__shot span { color: rgba(255, 255, 255, 0.55); }
.splash__shot strong {
  font-size: clamp(2.6rem, 1.2rem + 6vw, 7rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.splash__shot em {
  font-family: var(--f-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline-end: 0.05em;
}
.splash__scene { color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
.splash__reel { display: flex; gap: 6px; }
.splash__reel i { inline-size: clamp(14px, 2vw, 26px); block-size: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); transition: background-color 0.3s; }
.splash__reel i.is-on { background: var(--c-pink); box-shadow: 0 0 8px var(--c-pink); }

.splash__focus {
  /* centred by layout only; JS moves it (x/y) onto whatever it focuses */
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: min(78vw, 640px);
  block-size: min(40vw, 300px);
  color: #fff;
  opacity: 0;
}
.splash__focus .vf { --vf-inset: 0; }
.splash__focus.is-locked { color: #7dffb3; }
.splash__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.splash__skip {
  position: absolute;
  inset-block-end: clamp(54px, 7vw, 80px);
  inset-inline-end: clamp(16px, 2.5vw, 34px);
  padding: 9px 16px;
  border-radius: var(--r-pill);
  color: #fff;
}

@media (max-width: 640px) {
  .splash__hud .hide-sm { display: none; }
  .splash__focus { block-size: 38vw; }
}

/* Hero — the project journey (home.js → initJourney) --------------------
   A pinned "studio map": scrolling moves the client's project along a road
   from station to station; the camera follows it sideways. */
.hero { position: relative; padding: 0; overflow: clip; }
.hero__pin {
  position: relative;
  block-size: 100vh;
  block-size: 100svh;
  overflow: hidden;
  background: var(--c-night);
  transform-origin: 50% 100%;
}
.hero__kicker { display: flex; align-items: center; gap: var(--sp-3); color: var(--fg-2); }
.hero__kicker b { color: var(--fg); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-2); }

/* Journey (04): a task board worked on as you scroll (home.js → initJourney) */
.jt .journey__pin { display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--c-night); }
.jt .aurora { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 80%, transparent); }
.jt-head { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--sp-3); padding: 96px var(--gutter) 0; text-align: center; will-change: transform; }
.jt-head .s__meta { justify-content: center; }
.jt-headline { min-block-size: 1.1em; }
.jt-headline em { font-family: var(--f-serif); font-style: italic; font-weight: 400; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: 0.04em; }
.jt-caret { display: inline-block; inline-size: 0.06em; block-size: 0.82em; margin-inline-start: 0.04em; vertical-align: -0.06em; background: var(--c-pink); box-shadow: 0 0 18px var(--c-pink); animation: blink 1s steps(2) infinite; }
.jt-lead { max-inline-size: 52ch; color: var(--fg-2); }

/* workspace window */
.jt-ws {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: center;
  inline-size: min(100% - 2 * var(--gutter), 1320px);
  block-size: min(100% - 24px - clamp(16px, 3vh, 32px), 620px);
  margin-block-end: clamp(16px, 3vh, 32px);
  display: grid;
  grid-template-rows: 40px auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 22px;
  color: #120a2b;
  background: #fbfaff;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 13px;
  line-height: 1.35;
  will-change: transform;
}
.jt-bar { display: flex; align-items: center; gap: 16px; padding-inline: 16px; border-block-end: 1px solid rgba(18, 10, 43, 0.07); background: #f4f1fb; }
.jt-dots { display: flex; gap: 6px; }
.jt-dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: #ff5f57; }
.jt-dots i:nth-child(2) { background: #febc2e; } .jt-dots i:nth-child(3) { background: #28c840; }
.jt-crumb { color: rgba(18, 10, 43, 0.5); }
.jt-crumb b { color: #120a2b; font-weight: 600; }
.jt-count { margin-inline-start: auto; color: rgba(18, 10, 43, 0.5); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.jt-count b { color: #6a2bff; }

/* the board: seven columns, one project card */
.jt-board { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 12px 14px; border-block-end: 1px solid rgba(18, 10, 43, 0.07); background: #f7f5fd; }
.jt-lane { min-block-size: 96px; padding: 8px; border-radius: 12px; background: rgba(106, 43, 255, 0.05); border: 1px dashed rgba(106, 43, 255, 0.14); transition: background-color 0.4s, border-color 0.4s; }
.jt-lane small { display: flex; gap: 6px; color: rgba(18, 10, 43, 0.55); font: 600 10px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-lane small b { color: #6a2bff; }
.jt-lane.is-on { background: rgba(106, 43, 255, 0.1); border-color: rgba(106, 43, 255, 0.4); border-style: solid; }
.jt-card {
  position: absolute;
  inset-block-start: 36px;
  inset-inline-start: 22px;
  inline-size: calc((100% - 28px - 48px) / 7 - 16px);
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 22px -14px rgba(60, 25, 150, 0.6), 0 0 0 1px rgba(18, 10, 43, 0.06);
  font-size: 11px;
  will-change: transform, left;
}
.jt-card__top { display: flex; align-items: center; gap: 6px; color: rgba(18, 10, 43, 0.55); font-size: 10px; }
.jt-card__top i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #ff5fd2; }
.jt-card b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-card__prog { block-size: 4px; border-radius: 3px; background: rgba(18, 10, 43, 0.07); overflow: hidden; }
.jt-card__prog i { display: block; block-size: 100%; inline-size: 6%; border-radius: inherit; background: var(--grad-brand); }
.jt-card__avs { display: flex; }
.jt-card__avs i, .jt-av { display: grid; place-items: center; inline-size: 20px; block-size: 20px; margin-inline-end: -5px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--c); font: 600 7px/1 var(--f-mono); font-style: normal; }
.jt-card.is-grabbed { box-shadow: 0 30px 40px -20px rgba(60, 25, 150, 0.7), 0 0 0 2px #6a2bff; }

/* the task page (Notion-like) */
.jt-pages { position: relative; min-block-size: 0; }
.jt-page { position: absolute; inset: 0; display: grid; grid-template-rows: 64px minmax(0, 1fr); opacity: 0; }
.jt-cover { position: relative; background: linear-gradient(120deg, var(--a), var(--b)); }
.jt-icon { position: absolute; inset-block-end: -26px; inset-inline-start: clamp(20px, 5%, 64px); display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -12px rgba(60, 25, 150, 0.5); font-size: 28px; }
.jt-doc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); padding: 40px clamp(20px, 5%, 64px) 20px; min-block-size: 0; }
.jt-title { min-block-size: 1.2em; margin: 0 0 14px; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; }
.jt-title .jt-ch { opacity: 0; }
.jt-props { display: grid; gap: 4px; margin: 0; }
.jt-prop { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 8px; border-radius: 8px; }
.jt-prop dt { color: rgba(18, 10, 43, 0.45); font-size: 12px; }
.jt-prop dd { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.jt-pill { padding: 4px 10px; border-radius: 6px; color: #fff; background: var(--c); font-size: 11px; font-weight: 700; }
.jt-av { margin: 0; inline-size: 24px; block-size: 24px; font-size: 8px; border: 0; }
.jt-tags i { padding: 3px 9px; border-radius: 6px; background: rgba(106, 43, 255, 0.08); color: #4b2bb5; font-style: normal; font-size: 11px; font-weight: 600; }
.jt-sec { margin: 0 0 8px; color: rgba(18, 10, 43, 0.45); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.jt-tasks { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.jt-task { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid rgba(18, 10, 43, 0.07); }
.jt-box { display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 6px; border: 1.5px solid rgba(18, 10, 43, 0.25); }
.jt-box i { color: #fff; font-style: normal; font-size: 12px; font-weight: 700; transform: scale(0); }
.jt-ttext { font-weight: 600; }
.jt-who { padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(18, 10, 43, 0.14); color: rgba(18, 10, 43, 0.55); font: 600 9px/1 var(--f-mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.jt-who--you { color: #b77a00; border-color: rgba(255, 176, 87, 0.6); background: rgba(255, 230, 128, 0.25); }
.jt-who--nx { color: #0d8fb0; border-color: rgba(79, 214, 255, 0.6); }
.jt-file { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(106, 43, 255, 0.06); font-weight: 600; }
.jt-cursor { position: absolute; z-index: 5; inset-block-start: 0; inset-inline-start: 0; inline-size: 24px; block-size: 24px; filter: drop-shadow(0 4px 6px rgba(18, 10, 43, 0.35)); pointer-events: none; will-change: transform; }
.jt-cursor svg { position: relative; z-index: 1; }
.jt-cursor i { position: absolute; inset-inline-start: -14px; inset-block-start: -14px; inline-size: 32px; block-size: 32px; border-radius: 50%; background: rgba(106, 43, 255, 0.35); transform: scale(0); opacity: 0; }

/* the finish: a message about working together, then the CTA */
.jt-end { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; padding: var(--gutter); opacity: 0; pointer-events: none; background: radial-gradient(70% 70% at 50% 55%, rgba(7, 3, 26, 0.55), rgba(7, 3, 26, 0.85)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.jt-end.is-on { pointer-events: auto; }
.jt-end__card { display: grid; justify-items: center; gap: var(--sp-4); max-inline-size: 860px; text-align: center; }
.jt-end__kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.jt-end__title { max-inline-size: 20ch; }
.jt-end__lead { max-inline-size: 56ch; color: var(--fg-2); font-size: var(--fs-lead); line-height: 1.5; }
.jt-end__perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; inline-size: 100%; margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.jt-end__perks li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; text-align: start; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.jt-end__perks i { display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border-radius: 10px; background: var(--grad-brand); font-style: normal; font-size: 15px; color: #fff; }
.jt-end__perks span { display: grid; gap: 3px; color: var(--fg-2); font-size: 0.85rem; line-height: 1.35; }
.jt-end__perks b { color: var(--fg); font-size: 0.95rem; }
.jt-end__cta { justify-content: center; margin-block-start: var(--sp-2); }
@media (max-width: 760px) { .jt-end__perks { grid-template-columns: 1fr; } .jt-end__perks li { padding: 12px; } .jt-end__lead { font-size: var(--fs-body); } }
.jt-ok { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; color: #07031a; background: #3ee08f; font-size: 0.7rem; }

@media (max-width: 900px) {
  .jt-board { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 8px; }
  .jt-lane { min-block-size: 70px; padding: 5px; }
  .jt-lane small { font-size: 0; }
  .jt-lane small b { font-size: 10px; }
  .jt-card { inset-block-start: 26px; padding: 6px; }
  .jt-card b, .jt-card__avs { display: none; }
  .jt-doc { grid-template-columns: 1fr; gap: 12px; padding: 34px 16px 14px; overflow: hidden; }
  .jt-file { display: none; }
  .jt-crumb { display: none; }
  .jt-ws { font-size: 12px; }
}
/* phones: tighten the page so the task list fits on screen */
@media (max-width: 600px) {
  .jt-head { padding-block-start: 78px; gap: var(--sp-2); }
  .jt-lead { font-size: 0.95rem; line-height: 1.4; }
  .jt-ws { margin-block-end: 12px; block-size: calc(100% - 20px); }
  .jt-page { grid-template-rows: 44px minmax(0, 1fr); }
  .jt-icon { inline-size: 44px; block-size: 44px; inset-block-end: -20px; font-size: 22px; border-radius: 12px; }
  .jt-doc { gap: 8px; padding-block-start: 26px; }
  .jt-title { margin-block-end: 6px; font-size: 1.45rem; }
  .jt-prop { padding: 4px 6px; grid-template-columns: 74px minmax(0, 1fr); }
  .jt-prop:has(.jt-tags) { display: none; }
  .jt-task { padding: 8px 10px; }
}
@media (max-width: 600px) and (max-height: 740px) {
  .jt-lead { display: none; }
}
/* phones (home.js adds .jt--phone): readable columns that slide sideways
   with the card, and task apps that open over the whole screen */
.jt--phone .jt-ws { grid-template-columns: minmax(0, 1fr); }
.jt--phone .jt-board { justify-self: start; inline-size: max-content; grid-template-columns: repeat(7, 104px); gap: 8px; padding: 8px 10px; will-change: transform; }
.jt--phone .jt-lane { min-block-size: 70px; padding: 7px 8px; }
.jt--phone .jt-lane small { font-size: 9px; }
.jt--phone .jt-lane small b { font-size: 9px; }
.jt--phone .jt-card { inset-block-start: 30px; inline-size: 88px; padding: 7px 8px; gap: 5px; }
.jt--phone .jt-card__top { font-size: 10px; white-space: nowrap; }
.jt--phone .journey__pin > .jt-app {
  z-index: 3;
  inset: 86px 12px 14px;
  border-radius: 20px;
  color: #120a2b;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.jt--phone .journey__pin > .jt-cursor { z-index: 3; }

/* no painted background: the page colour itself moves from the light mood
   to the dark one as this section arrives (scene blending in motion.js) */
.jt .journey__pin { background: transparent; }

/* the task opens in its own app and gets worked on */
.jt-sec { display: flex; align-items: center; justify-content: space-between; }
.jt-open { padding: 4px 10px; border-radius: 6px; color: #6a2bff; background: rgba(106, 43, 255, 0.08); font-size: 10px; letter-spacing: 0.08em; }
.jt-app { position: absolute; z-index: 3; inset: 14px clamp(14px, 3%, 40px); display: grid; grid-template-rows: 40px minmax(0, 1fr) 4px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 40px 80px -30px rgba(40, 15, 110, 0.55), 0 0 0 1px rgba(18, 10, 43, 0.08); opacity: 0; transform-origin: 50% 40%; }
.jt-app__bar { display: flex; align-items: center; justify-content: space-between; padding-inline: 14px; border-block-end: 1px solid rgba(18, 10, 43, 0.07); background: #faf8ff; }
.jt-app__name { display: flex; align-items: center; gap: 10px; color: rgba(18, 10, 43, 0.6); font-size: 12px; }
.jt-app__name b { color: #120a2b; }
.jt-app__ic { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c) 16%, #fff); font-style: normal; font-size: 14px; }
.jt-app__state { position: relative; display: grid; font: 600 10px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.jt-app__state b { grid-area: 1 / 1; justify-self: end; padding: 5px 10px; border-radius: 999px; }
.jt-app__w { color: #6a2bff; background: rgba(106, 43, 255, 0.1); }
.jt-app__d { color: #1fae6b; background: rgba(31, 174, 107, 0.12); opacity: 0; }
.jt-app__prog { background: rgba(18, 10, 43, 0.06); }
.jt-app__prog i { display: block; block-size: 100%; inline-size: 0; background: var(--grad-brand); }
.jt-app__body { position: relative; padding: 18px; min-block-size: 0; }
/* brief form */
.ja-form { display: grid; align-content: start; gap: 10px; max-inline-size: 760px; }
.ja-field { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(18, 10, 43, 0.1); }
.ja-field small { color: rgba(18, 10, 43, 0.5); font: 600 10px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.ja-field span { font-weight: 600; font-size: 15px; }
/* moodboard */
.ja-mood { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ja-tile { display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--a, #eee), var(--b, #ddd)); }
.ja-note { padding: 12px; background: #ffe680; color: #2b1d00; font: italic 400 16px/1.15 var(--f-serif); text-align: center; rotate: 3deg; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.4); }
.ja-type { background: #f4f1fb; font: italic 400 46px/1 var(--f-serif); }
.ja-sw { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 14px; background: #f4f1fb; }
.ja-sw i { inline-size: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--c); justify-self: center; }
.ja-badge { position: absolute; inset-block-end: 26px; inset-inline-end: 26px; padding: 9px 16px; border-radius: 999px; color: #fff; background: var(--grad-brand); font-weight: 700; box-shadow: 0 14px 30px -12px rgba(106, 43, 255, 0.7); }
/* storyboard + schedule */
.ja-plan { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.ja-sb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ja-sb figure { display: grid; gap: 6px; margin: 0; }
.ja-sb span { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 8px; border: 1.5px solid #2a1b52; color: #2a1b52; background: #fbfaff; font-size: 22px; white-space: pre; line-height: 1; }
.ja-sb figcaption { color: rgba(18, 10, 43, 0.5); font: 600 10px/1 var(--f-mono); }
.ja-gantt { display: grid; align-content: start; gap: 8px; }
.ja-gantt div { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 10px; }
.ja-gantt small { color: rgba(18, 10, 43, 0.5); font: 600 10px/1 var(--f-mono); text-transform: uppercase; }
.ja-gantt span { position: relative; block-size: 12px; border-radius: 6px; background: rgba(18, 10, 43, 0.06); }
.ja-gantt i { position: absolute; inset-block: 0; inset-inline-start: var(--s); inline-size: calc(var(--e) - var(--s)); border-radius: 6px; background: var(--grad-brand); transform-origin: left; }
/* shoot */
.ja-shoot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
.ja-vf { position: relative; border-radius: 12px; background: linear-gradient(135deg, #1d2bff, #7b3bff 55%, #ff4fbf); overflow: hidden; }
.ja-rec, .ja-tc { position: absolute; inset-block-start: 12px; color: #fff; font: 600 11px/1 var(--f-mono); }
.ja-rec { inset-inline-start: 14px; color: #ff6b85; } .ja-tc { inset-inline-end: 14px; }
.ja-subject { position: absolute; inset: 26% 34%; border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 6px; }
.ja-shots { display: grid; align-content: start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ja-shots li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(18, 10, 43, 0.1); font-size: 13px; }
.ja-shots em { margin-inline-start: auto; color: #1fae6b; font-style: normal; font-weight: 700; }
.ja-bin { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; block-size: 60px; }
.ja-bin span { border-radius: 8px; background: linear-gradient(135deg, var(--a), var(--b)); }
/* design */
.ja-design { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 14px; }
.ja-canvas { display: grid; place-items: center; border-radius: 12px; background: repeating-linear-gradient(45deg, rgba(18, 10, 43, 0.03) 0 6px, transparent 6px 12px); }
.ja-poster { position: relative; display: grid; align-content: end; block-size: 92%; aspect-ratio: 3 / 4; padding: 14px; border-radius: 6px; overflow: hidden; box-shadow: 0 18px 30px -16px rgba(60, 25, 150, 0.6); background: #fff; }
.ja-bg { position: absolute; inset: 0; background: linear-gradient(180deg, #2a0f78, #6a2bff 60%, #ff5fd2); }
.ja-moon { position: absolute; inset-inline-end: 14%; inset-block-start: 12%; inline-size: 34%; aspect-ratio: 1; border-radius: 50%; background: #ffe680; box-shadow: 0 0 30px #ffe680; }
.ja-ptitle { position: relative; color: #fff; font: italic 400 26px/1 var(--f-serif); }
.ja-sel { position: absolute; inset: 58% 6% 4% 6%; border: 1.5px solid #4fd6ff; }
.ja-formats { display: grid; align-content: start; gap: 10px; }
.ja-formats small { color: rgba(18, 10, 43, 0.5); font: 600 10px/1 var(--f-mono); text-transform: uppercase; }
.ja-formats span { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 1px solid rgba(18, 10, 43, 0.1); font-weight: 600; font-size: 12px; }
.ja-formats span i { flex: none; block-size: 22px; inline-size: calc(22px * var(--r)); max-inline-size: 44px; border-radius: 4px; background: linear-gradient(135deg, #6a2bff, #ff5fd2); }
/* edit + site */
.ja-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ja-tl { position: relative; border-radius: 12px; background: #120a2b; }
.ja-tl i { position: absolute; inset-block-start: calc(26% + var(--r) * -16%); block-size: 16%; inset-inline-start: calc(6% + var(--s) * 0.88); inline-size: calc(var(--w) * 0.88); border-radius: 6px; background: var(--c); }
.ja-tl i:nth-child(n + 4) { inset-block-start: 12%; }
.ja-ph { position: absolute; inset-block: 8%; inset-inline-start: 40%; inline-size: 2px; background: #fff; box-shadow: 0 0 10px #fff; }
.ja-browser { position: relative; display: grid; grid-template-rows: 30px minmax(0, 1fr); overflow: hidden; border-radius: 12px; border: 1px solid rgba(18, 10, 43, 0.1); }
.ja-url { padding: 8px 12px; color: rgba(18, 10, 43, 0.55); background: #f4f1fb; font: 600 11px/1 var(--f-mono); }
.ja-site { display: grid; grid-template-rows: 1.3fr 1fr 1fr; gap: 8px; padding: 10px; }
.ja-site i { border-radius: 8px; background: rgba(106, 43, 255, 0.1); }
.ja-site .ja-hero { background: linear-gradient(135deg, #2a0f78, #6a2bff, #ff5fd2); }
.ja-nx { position: absolute; inset-inline-end: 10px; inset-block-start: 4px; padding: 4px 8px; border-radius: 6px; color: #0d8fb0; background: rgba(79, 214, 255, 0.15); font: 700 10px/1 var(--f-mono); letter-spacing: 0.14em; }
/* delivery */
.ja-deliver { display: grid; align-content: start; gap: 10px; max-inline-size: 760px; }
.ja-file { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(18, 10, 43, 0.1); }
.ja-file span { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 10px; color: #fff; background: var(--grad-brand); font: 700 10px/1 var(--f-mono); }
.ja-file em { color: #1fae6b; font-style: normal; font-weight: 700; }
.ja-sent { justify-self: start; padding: 10px 18px; border-radius: 999px; color: #fff; background: #1fae6b; font-weight: 700; }
@media (max-width: 900px) {
  .jt-app { inset: 8px; }
  .ja-shoot, .ja-design, .ja-edit { grid-template-columns: 1fr; }
  .ja-shots, .ja-formats, .ja-browser { display: none; }
  .ja-mood { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* phones: the app has the whole screen, so each one is laid out tall */
.jt--phone .jt-app__bar { gap: 10px; }
.jt--phone .jt-app__name { min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.jt--phone .jt-app__name .jt-app__ic { display: inline-grid; vertical-align: middle; margin-inline-end: 8px; }
.jt--phone .jt-app__state { flex: none; }
.jt--phone .jt-app__body { padding: 14px; }
.jt--phone .ja-form { align-content: center; block-size: 100%; }
.jt--phone .ja-field { grid-template-columns: 1fr; gap: 6px; }
.jt--phone .ja-mood { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); block-size: 100%; }
.jt--phone .ja-plan { grid-template-rows: auto auto; align-content: center; block-size: 100%; gap: 22px; }
.jt--phone .ja-sb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jt--phone .ja-gantt { gap: 12px; }
.jt--phone .ja-shoot { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; block-size: 100%; }
.jt--phone .ja-shots { display: grid; }
.jt--phone .ja-shots li { padding: 8px 10px; font-size: 12px; }
.jt--phone .ja-bin { block-size: 48px; }
.jt--phone .ja-design { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; block-size: 100%; }
.jt--phone .ja-poster { block-size: auto; inline-size: min(72%, 260px); max-block-size: 96%; }
.jt--phone .ja-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.jt--phone .ja-formats small { grid-column: 1 / -1; }
.jt--phone .ja-edit { grid-template-columns: 1fr; grid-template-rows: 200px minmax(0, 1fr); block-size: 100%; }
.jt--phone .ja-browser { display: grid; }
.jt--phone .ja-deliver { align-content: center; block-size: 100%; }

/* the journey section (04): one screen; the workspace plays itself */
.journey { position: relative; padding: 0; overflow: clip; }
.journey__pin { position: relative; block-size: 100vh; block-size: 100svh; overflow: hidden; background: var(--c-night); }

.is-under-curtain { position: relative; z-index: 1; }

/* the player bar under the workspace: play/pause, LIVE, one segment per stop */
.jt-player {
  position: absolute;
  z-index: 5;
  inset-block-end: 22px;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: min(560px, calc(100% - 2 * var(--gutter)));
  padding: 8px 14px 8px 8px;
  border-radius: var(--r-pill);
  background: rgba(14, 7, 38, 0.72);
  color: #fff;
}
.jt-play { flex: none; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--btn-solid); color: #fff; transition: background-color 0.3s, transform 0.3s var(--ease-spring); }
.jt-play:hover { background: var(--btn-solid-hover); transform: scale(1.06); }
.jt-play__play { display: none; }
.jt.is-paused .jt-play__play { display: block; }
.jt.is-paused .jt-play__pause { display: none; }
.jt-live { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 0.6rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.jt-live i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 10px #ff3b5c; animation: blink 1.2s steps(2) infinite; }
.jt.is-paused .jt-live i { animation: none; background: rgba(255, 255, 255, 0.4); box-shadow: none; }
.jt-segs { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.jt-seg { position: relative; display: grid; gap: 5px; padding: 6px 0 2px; color: rgba(255, 255, 255, 0.5); text-align: start; cursor: pointer; }
.jt-seg::before { content: ""; grid-row: 1; block-size: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.jt-seg i { grid-row: 1; block-size: 3px; border-radius: 3px; background: var(--grad-brand); transform-origin: 0 50%; transform: scaleX(0); }
.jt-seg span { font-size: 0.55rem; transition: color 0.3s; }
.jt-seg.is-on span, .jt-seg:hover span { color: #fff; }
@media (max-width: 600px) {
  .jt-player { inset-block-end: 14px; gap: 8px; padding: 6px 10px 6px 6px; }
  .jt-live { display: none; }
  .jt-seg span { font-size: 0.5rem; }
}

/* Hero — name, mark, showreel (home.js → initHeroReel) ------------------- */
.hero--reel { position: relative; z-index: 3; overflow: visible; }
.hero--reel .hero__pin {
  background: #efeaf6;
  border-end-start-radius: clamp(28px, 4vw, 64px);
  border-end-end-radius: clamp(28px, 4vw, 64px);
  box-shadow: 0 50px 90px -40px rgba(40, 15, 110, 0.45);
}

/* the render: the glass mark fills the hero; a soft light wash on the left
   keeps the copy readable */
/* the render sits shifted right so the copy has clear air on the left; the
   strip it leaves is painted in the render's own edge colours (sampled), and
   the render's left edge fades into it, so there's no seam */
.hero--reel .hero__pin { background: linear-gradient(180deg, #b8c0d4 0%, #bdc5d8 22%, #9aa4b8 42%, #8f97ab 52%, #a6a9b6 60%, #6e778c 72%, #535f78 100%); }
.hero--reel .hero__pin::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(236, 239, 246, 0.9) 0%, rgba(236, 239, 246, 0.62) 26%, rgba(236, 239, 246, 0) 46%), linear-gradient(0deg, rgba(20, 22, 34, 0.2), transparent 32%); }
.hr-bg { position: absolute; z-index: 0; inset-block: 0; inset-inline: clamp(0px, 16vw, 320px) 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%); mask-image: linear-gradient(90deg, transparent, #000 16%); }
.hr-bg__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; object-position: 50% 52%; transform-origin: 55% 55%; }
html.js .hero--reel .hr-bg { opacity: 0; transform: scale(1.05); transition: opacity 1.4s var(--ease-out), transform 2.2s var(--ease-out); }
html.js .hero--reel.is-in .hr-bg { opacity: 1; transform: none; }

/* the copy, top-left in the light part of the render */
.hr-copy { position: absolute; z-index: 3; inset-inline-start: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); inset-block-start: clamp(120px, 20vh, 220px); display: grid; gap: var(--sp-4); justify-items: start; max-inline-size: min(520px, 46vw); }
.hero--reel .ht__type { font-size: clamp(2rem, 0.9rem + 2.6vw, 3.8rem); }
.hr-lead { max-inline-size: 38ch; color: var(--fg-2); font-size: var(--fs-body); line-height: 1.5; }

/* the reel: a small card bottom-right that grows to the whole hero */
.hr-slot { position: absolute; inset-inline-end: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); inset-block-end: clamp(28px, 6vh, 64px); inline-size: clamp(240px, 24vw, 380px); aspect-ratio: 16 / 9; pointer-events: none; }
.hr-reel { position: absolute; z-index: 4; inset-inline-end: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); inset-block-end: clamp(28px, 6vh, 64px); inline-size: clamp(240px, 24vw, 380px); aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-radius: 18px; background: #0b0420; box-shadow: 0 30px 60px -24px rgba(30, 10, 90, 0.6); }
html.js .hero--reel .hr-reel { inset: auto; aspect-ratio: auto; }
.hr-reel__frame { position: absolute; inset: 0; container-type: size; color: #fff; }
.hr-reel__slides, .hr-slide, .hr-reel__video { position: absolute; inset: 0; }
.hr-reel__video { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hr-reel.has-video .hr-reel__slides { display: none; }
/* an embedded (16:9) player covers the frame at every size, like object-fit:
   cover — wider than the frame on tall screens, taller on wide ones — and
   lets clicks and scrolling pass through to the page */
.hr-reel__embed { position: absolute; inset: 50% auto auto 50%; inline-size: max(100cqw, 177.78cqh); block-size: max(100cqh, 56.25cqw); translate: -50% -50%; border: 0; pointer-events: none; opacity: 0; transition: opacity 0.9s var(--ease-out); }
.hr-reel.has-video .hr-reel__embed { opacity: 1; }
.hr-slide { display: grid; place-items: center; overflow: hidden; opacity: 0; transition: opacity 0.9s var(--ease-out); }
.hr-slide.is-on { opacity: 1; }
.hr-slide .mesh { transition: transform 3s linear; }
.hr-slide.is-on .mesh { transform: scale(1.08); }
.hr-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 3, 26, 0.2), transparent 40%, rgba(7, 3, 26, 0.55)); }
.hr-slide__txt { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.6cqh; text-align: center; translate: 0 6px; transition: translate 1.2s var(--ease-out); }
.hr-slide.is-on .hr-slide__txt { translate: 0 0; }
.hr-slide__txt small { color: rgba(255, 255, 255, 0.75); font-size: max(8px, 2.2cqh); }
.hr-slide__txt b { font: italic 400 max(18px, min(11cqh, 9cqw)) / 0.95 var(--f-serif); letter-spacing: -0.02em; }
.hr-reel .vf { --vf-inset: max(8px, 4cqh); color: rgba(255, 255, 255, 0.7); z-index: 2; }
.hr-reel .vf i { inline-size: max(10px, 5cqh); block-size: max(10px, 5cqh); }
.hr-reel__hud { position: absolute; z-index: 2; inset-block-start: max(12px, 6cqh); inset-inline: max(14px, 7cqh); display: flex; justify-content: space-between; font-size: max(8px, 2.3cqh); color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.hr-reel__hud .rec { color: #ff6b85; }
.hr-reel__play { position: absolute; z-index: 3; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; display: grid; place-items: center; inline-size: max(40px, 13cqh); block-size: max(40px, 13cqh); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.4); opacity: 0; transition: opacity 0.5s, transform 0.5s var(--ease-out); }
.hr-reel__play svg { inline-size: 40%; block-size: 40%; }
.hr-reel:hover .hr-reel__play, .hr-reel.is-full .hr-reel__play { opacity: 1; }
.hr-reel__play:hover { transform: scale(1.08); }
.hr-reel__cap { position: absolute; z-index: 2; inset-block-end: 10px; inset-inline-start: 14px; font-size: 0.6rem; color: rgba(255, 255, 255, 0.8); }
/* the slide titles move off-centre once the reel has the whole screen, so the
   play button owns the middle */
.hr-reel.is-full .hr-slide { place-items: end start; padding: 0 0 9cqh 7cqh; }
.hr-reel.is-full .hr-slide__txt { justify-items: start; text-align: start; }

html.js .hero--reel .hr-copy > :not(.ht__type), html.js .hero--reel .ht-scroll, html.js .hero--reel .hr-reel { opacity: 0; translate: 0 18px; transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out); }
html.js .hero--reel.is-typed .hr-copy > :not(.ht__type), html.js .hero--reel.is-typed .ht-scroll, html.js .hero--reel.is-typed .hr-reel { opacity: 1; translate: 0 0; }
html.js .hero--reel.is-typed .hr-reel { transition-delay: 0.25s; }
html.js .hero--reel.is-typed .ht-scroll { transition-delay: 0.45s; }
.hero--reel .ht-scroll { inset-inline-end: 50%; translate: 50% 0; }
html.js .hero--reel.is-typed .ht-scroll { translate: 50% 0; }

@media (max-width: 760px) {
  /* phones: the render sits in the top half (cropped around the mark) and
     fades into the page; the copy goes to the bottom */
  .hero--reel .hero__pin { background: #e9ecf3; }
  .hero--reel .hero__pin::before { display: none; }
  /* height tied to the width so the whole mark (about 60% of the render's
     width) always fits across the screen */
  .hr-bg { inset: 84px 0 auto; block-size: 72vw; -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent); mask-image: linear-gradient(180deg, #000 74%, transparent); }
  .hr-bg__img { object-position: 44% 56%; }
  .hr-copy { inset-inline: var(--gutter); max-inline-size: none; inset-block-start: auto; inset-block-end: 22px; gap: var(--sp-3); }
  .hr-lead { display: none; }
  .hero--reel .ht__type { font-size: clamp(2rem, 10vw, 3rem); }
  .hero--reel .hero__actions { gap: 10px; }
  .hero--reel .hero__actions .btn { --btn-h: 46px; }
  .hr-slot, .hr-reel { inline-size: 48vw; inset-inline-end: var(--gutter); inset-block-end: auto; inset-block-start: calc(84px + 64vw); }
  .hero--reel .ht-scroll { display: none; }
}
.ht__type { margin: 0; color: var(--fg); font-size: clamp(2.6rem, 0.8rem + 4.4vw, 6rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.045em; text-transform: uppercase; }
.ht__ch { opacity: 0; transition: opacity 0.08s; }
.ht__ch.is-on { opacity: 1; }
.ht__worth { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; text-transform: none; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: 0.04em; }
.ht__caret { display: inline-block; inline-size: 0.055em; block-size: 0.8em; margin-inline-start: 0.04em; vertical-align: -0.04em; background: var(--c-pink); box-shadow: 0 0 18px rgba(255, 95, 210, 0.7); animation: blink 1s steps(2) infinite; }
.ht-scroll { position: absolute; z-index: 3; inset-block-end: var(--sp-5); inset-inline-end: max(var(--gutter), calc((100% - 1440px) / 2)); display: grid; justify-items: center; gap: 8px; color: var(--fg-3); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; }
.ht-scroll:hover { color: var(--fg); }
.ht-scroll__mouse { position: relative; inline-size: 22px; block-size: 34px; border: 1.5px solid currentColor; border-radius: 12px; }
.ht-scroll__mouse i { position: absolute; inset-inline-start: 50%; inset-block-start: 6px; inline-size: 3px; block-size: 7px; margin-inline-start: -1.5px; border-radius: 2px; background: var(--c-pink); animation: wheel 1.8s var(--ease-out) infinite; }

@media (max-width: 900px) {
  .ht__type { font-size: clamp(2.5rem, 12vw, 4.2rem); }
  .ht-scroll { display: none; }
}
/* Frames: the four glass "screens" -------------------------------------- */
.frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.2s linear;
}
.frame .vf { --vf-inset: 22px; color: rgba(255, 255, 255, 0.7); z-index: 2; }
.frame__letterbox { position: absolute; inset-inline: 0; block-size: 11%; background: rgba(4, 1, 14, 0.85); z-index: 1; }
.frame__letterbox--top { inset-block-start: 0; }
.frame__letterbox--bottom { inset-block-end: 0; }
.frame__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: clamp(64px, 8vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  --glass-bg: rgba(255, 255, 255, 0.16);
  --glass-border: rgba(255, 255, 255, 0.35);
}
.frame__play svg { inline-size: 30%; translate: 8% 0; }
@keyframes scrub { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.phone__island { position: absolute; inset-block-start: 20px; inset-inline-start: 50%; translate: -50% 0; inline-size: 34%; block-size: 22px; border-radius: 20px; background: #000; z-index: 3; }
.phone__rail { position: absolute; inset-inline-end: 22px; inset-block-end: 90px; z-index: 2; display: grid; gap: 18px; justify-items: center; color: #fff; font-size: 0.72rem; font-weight: 600; }
.phone__rail svg { inline-size: 26px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); }
/* Statement — words light up as you scroll ------------------------------ */
.statement__text {
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.8rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 22ch;
}
.statement__text em { font-family: var(--f-serif); font-weight: 400; }
.statement__foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-block-start: var(--sp-9);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--line);
}
.statement__foot p { color: var(--fg-2); }
.statement__foot h3 { margin-block-end: var(--sp-2); }
@media (max-width: 760px) { .statement__foot { grid-template-columns: 1fr; } }

/* statement → services read as one move: a tighter seam than the default
   section spacing (the scroll-in motion adds its own air on top) */
.s--statement { padding-block-end: var(--sp-7); }
.s--services { padding-block-start: var(--sp-7); }

/* Services — cards that stack as you scroll (each sticks a little lower) -- */
.services { overflow: clip; }
/* the glow melts in at the top instead of starting on a hard line */
.s--services > .aurora { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 85%, transparent 100%); }

.stk-list { display: grid; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; }
.stk {
  /* light cards first, getting deeper toward the brand night */
  --stk-bg: var(--c-mist);
  --stk-fg: var(--c-ink);
  --stk-fg-2: rgba(14, 7, 38, 0.66);
  --stk-line: rgba(14, 7, 38, 0.16);
  --dim: 0;
  position: sticky;
  inset-block-start: calc(96px + var(--k) * 12px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(28px, 4vw, 64px);
  min-block-size: min(22rem, calc(100svh - 140px));
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--stk-bg);
  color: var(--stk-fg);
  transform-origin: 50% 0;
  box-shadow: 0 -20px 60px -30px rgba(7, 3, 26, 0.6);
}
/* darkens a card as the next one slides over it (home.js sets --dim) */
.stk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #07031a; opacity: calc(var(--dim) * 0.55); pointer-events: none; }
.stk--2 { --stk-bg: var(--c-lilac); }
.stk--3 { --stk-bg: #d3c4ff; }
.stk--4 { --stk-bg: var(--c-violet); --stk-fg: #fff; --stk-fg-2: rgba(255, 255, 255, 0.78); --stk-line: rgba(255, 255, 255, 0.28); }
.stk--5 { --stk-bg: #3c14a6; --stk-fg: #fff; --stk-fg-2: rgba(255, 255, 255, 0.72); --stk-line: rgba(255, 255, 255, 0.22); }
.stk--6 { --stk-bg: var(--c-deep); --stk-fg: var(--fg); --stk-fg-2: var(--fg-2); --stk-line: var(--line-2); }
.stk--7 { --stk-bg: var(--c-ink); --stk-fg: var(--fg); --stk-fg-2: var(--fg-2); --stk-line: var(--line-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 -20px 60px -30px rgba(0, 0, 0, 0.8); }

.stk__side { display: flex; flex-direction: column; justify-content: flex-end; min-inline-size: 0; }
.stk__num { font-size: clamp(5rem, 3rem + 7vw, 10rem); font-weight: 500; line-height: 0.8; letter-spacing: -0.07em; }

.stk__content { display: flex; flex-direction: column; gap: var(--sp-5); min-inline-size: 0; }
.stk__meta { display: flex; justify-content: space-between; gap: var(--sp-4); margin-block-end: auto; padding-block-end: var(--sp-4); border-block-end: 1px solid var(--stk-line); color: var(--stk-fg-2); }
.stk__title { margin: 0; padding-block-start: var(--sp-5); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.stk__title em { font-weight: 400; letter-spacing: -0.02em; }
.stk__title a { transition: opacity 0.3s; }
.stk__title a:hover { opacity: 0.72; }
.stk__desc { margin: 0; max-inline-size: 30rem; color: var(--stk-fg-2); font-size: var(--fs-body); line-height: 1.45; font-weight: 500; }
.stk__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stk__tags .chip { padding: 6px 12px; font-size: 0.78rem; color: var(--stk-fg); border-color: var(--stk-line); background: rgba(255, 255, 255, 0.35); }
.stk--4 .stk__tags .chip, .stk--5 .stk__tags .chip, .stk--6 .stk__tags .chip, .stk--7 .stk__tags .chip { background: rgba(255, 255, 255, 0.06); }
.stk__go {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stk-line);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}
.stk__go svg { transition: transform 0.5s var(--ease-out); }
.stk__go:hover, .stk__go:focus-visible { color: #fff; background: var(--btn-solid); border-color: var(--btn-solid); }
.stk--4 .stk__go:hover, .stk--4 .stk__go:focus-visible { color: var(--c-violet); background: #fff; border-color: #fff; }
.stk__go:hover svg { transform: rotate(45deg); }

@media (max-width: 760px) {
  .stk {
    inset-block-start: calc(84px + var(--k) * 8px);
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    min-block-size: 0;
    padding: 22px;
    border-radius: var(--r-md);
  }
  .stk__side { order: -2; }
    .stk__num { font-size: clamp(3rem, 15vw, 4.2rem); }
  .stk__content { gap: var(--sp-4); }
  .stk__meta { order: -1; margin-block-end: 0; }
  .stk__title { padding-block-start: 0; font-size: clamp(1.6rem, 7.4vw, 2.1rem); }
  .stk__desc { font-size: 0.95rem; }
  .stk__tags .chip { padding: 5px 10px; font-size: 0.72rem; }
}

/* a clear way in after the list */
.svx-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-block-start: var(--sp-8); }
.svx-cta__text { max-inline-size: 34ch; color: var(--fg-2); font-size: var(--fs-lead); line-height: 1.4; }
.svx-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }

/* Featured work: a staggered grid of tall frames ------------------------- */
.s--work .s__title { max-inline-size: none; }
.work-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4) var(--sp-5); }
.mw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 48px); align-items: start; }
/* the right column sits lower, so the grid reads as a staggered contact sheet */
.mw:nth-child(even) { margin-block-start: clamp(80px, 14vw, 220px); }
.mw { display: grid; gap: var(--sp-4); }
.mw__media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.mw__frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--bg-2); }
.mw__frame .mesh.ph { transition: scale 1.2s var(--ease-out); }
.mw__media:hover .mesh.ph, .mw__media:focus-visible .mesh.ph { scale: 1.06; }
.mw__media .vf { --vf-inset: 18px; z-index: 2; color: rgba(255, 255, 255, 0.8); opacity: 0; transform: scale(1.08); transition: opacity 0.5s, transform 0.6s var(--ease-out); }
.mw__media:hover .vf, .mw__media:focus-visible .vf { opacity: 1; transform: none; }
.mw__info { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.mw__title { margin: 0; font-size: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.mw__meta { color: var(--fg-3); white-space: nowrap; }
.mw-foot { display: flex; justify-content: center; margin-block-start: var(--sp-8); }
@media (max-width: 760px) {
  .mw-grid { grid-template-columns: 1fr; }
  .mw:nth-child(even) { margin-block-start: 0; }
  .mw__media { aspect-ratio: 4 / 4.4; }
}

/* What you get — folders on a track; files drop in as each one arrives ---- */
.wyg__head { display: grid; gap: var(--sp-4); }
.wyg__head .s__title { max-inline-size: none; }
.wyg__head .t-lead { color: var(--fg-2); max-inline-size: 40ch; }
.s--wyg { padding-block-end: var(--sp-8); }

/* without the pinned scroll (no JS / reduced motion) the track simply scrolls sideways */
.fd-pin { position: relative; margin-block-start: var(--sp-7); }
.fd-track {
  display: flex;
  gap: clamp(24px, 3vw, 48px);
  margin: 0;
  padding: clamp(40px, 6vh, 64px) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) var(--sp-5);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fd-track::-webkit-scrollbar { display: none; }
/* pinned (home.js): the section holds the screen and the track slides left */
.fd-pin.is-pinned { margin-block-start: var(--sp-5); overflow: hidden; }
.fd-pin.is-pinned .fd-track { overflow: visible; inline-size: max-content; scroll-snap-type: none; }

.fd { flex: none; inline-size: clamp(270px, 27vw, 390px); scroll-snap-align: center; }
.fd__folder { position: relative; display: block; aspect-ratio: 5 / 4; perspective: 900px; }
.fd__back {
  position: absolute;
  inset: 9% 0 0 0;
  border-radius: 6px 22px 22px 22px;
  background: linear-gradient(170deg, #2a1173 0%, var(--c-deep) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.fd__tab {
  position: absolute;
  inset-block-end: calc(100% - 1px);
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  block-size: clamp(26px, 2.6vw, 34px);
  padding-inline: 16px 26px;
  border-radius: 14px 18px 0 0;
  background: #2a1173;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.62rem;
  clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}
.fd__files { position: absolute; inset: 15% 6% 0; }
.fd-file {
  position: absolute;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  inline-size: 44%;
  aspect-ratio: 4 / 5;
  padding: 6px;
  border-radius: 10px;
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7);
}
.fd-file--1 { inset-inline-start: 2%; transform: rotate(-7deg); }
.fd-file--2 { inset-inline-start: 28%; transform: rotate(2deg); }
.fd-file--3 { inset-inline-start: 54%; transform: rotate(8deg); }
.fd-file__thumb { position: relative; flex: 1; overflow: hidden; border-radius: 6px; background: var(--c-night); }
.fd-file__lines { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 10px 6px; border-radius: 6px; background: var(--c-mist); }
.fd-file__lines i { display: block; block-size: 4px; border-radius: 4px; background: rgba(14, 7, 38, 0.14); }
.fd-file__lines i:nth-child(1) { inline-size: 70%; background: rgba(106, 43, 255, 0.45); }
.fd-file__lines i:nth-child(3) { inline-size: 85%; }
.fd-file__lines i:nth-child(4) { inline-size: 55%; }
.fd-file__name { display: flex; align-items: center; gap: 5px; min-inline-size: 0; overflow: hidden; font-size: 0.56rem; letter-spacing: 0.02em; white-space: nowrap; text-overflow: ellipsis; }
.fd-file__name b { flex: none; padding: 2px 5px; border-radius: 4px; background: var(--btn-solid); color: #fff; font-weight: 500; text-transform: uppercase; font-size: 0.5rem; }
.fd-file[data-ext="pdf"] .fd-file__name b { background: #ff4f7a; }
.fd-file[data-ext="zip"] .fd-file__name b, .fd-file[data-ext="xls"] .fd-file__name b { background: #18a26b; }
.fd-file[data-ext="srt"] .fd-file__name b, .fd-file[data-ext="doc"] .fd-file__name b { background: #2b6dff; }
.fd-file[data-ext="fig"] .fd-file__name b, .fd-file[data-ext="svg"] .fd-file__name b { background: #c24dff; }
.fd__front {
  position: absolute;
  inset: 40% 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: 18px 18px 22px 22px;
  background: linear-gradient(160deg, rgba(150, 100, 255, 0.62) 0%, rgba(106, 43, 255, 0.55) 55%, rgba(60, 20, 166, 0.7) 100%);
  border-block-start: 1px solid rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  transform-origin: 50% 100%;
  box-shadow: 0 -10px 30px -12px rgba(7, 3, 26, 0.6);
}
.fd:nth-child(3n+2) .fd__front { background: linear-gradient(160deg, rgba(200, 110, 255, 0.6) 0%, rgba(150, 60, 230, 0.58) 55%, rgba(80, 20, 160, 0.72) 100%); }
.fd:nth-child(3n) .fd__front { background: linear-gradient(160deg, rgba(255, 120, 210, 0.55) 0%, rgba(190, 70, 230, 0.58) 55%, rgba(90, 25, 170, 0.72) 100%); }
.is-touch .fd__front { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* phones skip the blur, so the flap is solid enough to hide the files behind it */
.is-touch .fd__front { background: linear-gradient(160deg, #8f5cff 0%, #6a2bff 55%, #3c14a6 100%); }
.is-touch .fd:nth-child(3n+2) .fd__front { background: linear-gradient(160deg, #b86bff 0%, #8f3ce6 55%, #4a1596 100%); }
.is-touch .fd:nth-child(3n) .fd__front { background: linear-gradient(160deg, #ee78d6 0%, #b046e6 55%, #571aa6 100%); }
.fd__count { font-size: 0.62rem; opacity: 0.85; }
.fd__num { align-self: flex-end; font-size: clamp(2.6rem, 1.6rem + 2.6vw, 4.2rem); font-weight: 500; line-height: 0.8; letter-spacing: -0.06em; }
.fd__title { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.fd__desc { margin: 0; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.5; max-inline-size: 36ch; }

.fd-progress { display: flex; align-items: center; gap: var(--sp-4); margin-block-start: var(--sp-6); color: var(--fg-3); font-size: var(--fs-mono); }
.fd-progress b { color: var(--fg); font-weight: 500; }
.fd-progress__bar { flex: 1; block-size: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.fd-progress__bar i { display: block; block-size: 100%; background: var(--grad-brand); transform-origin: 0 50%; transform: scaleX(0); }
.fd-pin:not(.is-pinned) .fd-progress { display: none; }

@media (max-width: 760px) {
  .fd { inline-size: 76vw; }
  .fd-track { gap: 20px; }
  .fd-file__name { font-size: 0.5rem; }
}

/* Notes from the studio ------------------------------------------------- */
.nt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); }
.nt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin-block-start: var(--sp-7); }
.nt__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-md); background: var(--bg-2); }
.nt__media .mesh.ph { transition: scale 1.2s var(--ease-out); }
.nt__media:hover .mesh.ph, .nt__media:focus-visible .mesh.ph { scale: 1.06; }
.nt__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 18px; color: var(--fg-2); }
.nt__tag { padding: 5px 11px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); font-size: 0.78rem; font-weight: 500; }
.nt__dot { color: var(--fg-3); }
.nt__title { margin: 14px 0 8px; font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.nt__title a { transition: opacity 0.3s; }
.nt__title a:hover { opacity: 0.7; }
.nt__desc { margin: 0; color: var(--fg-2); line-height: 1.5; }
@media (max-width: 900px) { .nt-grid { grid-template-columns: 1fr; gap: var(--sp-7); } }

/* Partnership: Worthy × NEURAX ------------------------------------------- */
.s--collab { overflow: clip; }
/* the glow melts in from nothing at the top (and out at the bottom), so the
   section blends into its neighbours instead of starting at a hard edge */
.s--collab > .aurora {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 80%, transparent 100%);
}
.collab { position: relative; z-index: 1; display: grid; gap: var(--sp-7); }
.collab__head { margin-block-end: 0; }
.collab__badge { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--fg-2); }
.collab__brands { display: flex; align-items: center; gap: var(--sp-4); }
.collab__worthy.nav__wordmark { block-size: 46px; animation-duration: 8s; }
.collab__x { font-family: var(--f-serif); font-style: italic; font-size: 2rem; color: var(--fg-3); }
/* NEURAX wordmark: a technical, cool-toned counterpart to the script mark */
.collab__neurax {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: 0.32em;
  background: linear-gradient(90deg, #4fd6ff, #8a7bff 60%, #c8b6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(79, 214, 255, 0.35));
}
.collab__neurax--sm { font-size: 1.05rem; }
.collab__lead { max-width: 52ch; }
.collab__lead b { color: var(--fg); font-weight: 600; }

/* design → code stage */
.collab__stage {
  --split: 70%;
  position: relative;
  block-size: clamp(380px, 22rem + 14vw, 560px);
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  padding: 0;
}
.collab__pane { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; }
.collab__pane--design { clip-path: inset(0 calc(100% - var(--split)) 0 0); background: #f4f1fb; color: #120a2b; }
.collab__pane--code { background: #0b0620; color: #d9d2ff; }
.collab__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 12px 18px;
  font-size: 0.66rem;
  border-block-end: 1px solid rgba(127, 110, 200, 0.18);
}
.collab__pane--design .collab__bar { color: rgba(18, 10, 43, 0.5); background: rgba(255, 255, 255, 0.7); }
.collab__pane--code .collab__bar { color: rgba(217, 210, 255, 0.55); background: rgba(255, 255, 255, 0.03); }
.collab__dots { display: inline-flex; gap: 6px; }
.collab__dots i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #ff5f57; }
.collab__dots i:nth-child(2) { background: #febc2e; }
.collab__dots i:nth-child(3) { background: #28c840; }
.collab__live { color: #4fd6ff; }
.collab__pre {
  margin: 0;
  padding: clamp(1rem, 2.5vw, 2rem);
  font-family: var(--f-mono);
  font-size: clamp(0.68rem, 0.6rem + 0.3vw, 0.86rem);
  line-height: 1.8;
  white-space: pre;
  overflow: hidden;
}
.c-c { color: #6f6890; font-style: italic; }
.c-t { color: #ff7ad9; }
.c-a { color: #8fd8ff; }
.c-s { color: #b9f18c; }
.c-k { color: #c48bff; }
.c-v { color: #f5f2ff; }
.c-f { color: #4fd6ff; }
.c-n { color: #ffb86b; }
.collab__caret { display: inline-block; inline-size: 0.55em; block-size: 1.1em; margin-inline-start: 2px; vertical-align: -0.2em; background: #4fd6ff; animation: blink 1s steps(2) infinite; }

/* the design mock (Figma-like frame) */
.mock { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 18px; padding: clamp(1rem, 2.5vw, 2rem); }
.mock__nav { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 999px; background: #fff; box-shadow: 0 8px 20px -14px rgba(56, 22, 140, 0.4); }
.mock__logo { inline-size: 70px; block-size: 14px; border-radius: 7px; background: var(--grad-brand); }
.mock__links { display: flex; gap: 10px; }
.mock__links i { inline-size: 38px; block-size: 8px; border-radius: 4px; background: rgba(18, 10, 43, 0.15); }
.mock__btn { inline-size: 74px; block-size: 22px; border-radius: 999px; background: var(--grad-brand); }
.mock__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; }
.mock__copy { display: grid; gap: 10px; align-content: center; }
.mock__kicker { inline-size: 120px; block-size: 7px; border-radius: 4px; background: rgba(18, 10, 43, 0.18); }
.mock__h { font-size: clamp(1.4rem, 0.9rem + 2vw, 2.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; }
.mock__h em { font-family: var(--f-serif); font-weight: 400; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mock__line { inline-size: 90%; block-size: 7px; border-radius: 4px; background: rgba(18, 10, 43, 0.12); }
.mock__line--s { inline-size: 62%; }
.mock__cta { inline-size: 120px; block-size: 30px; border-radius: 999px; background: var(--grad-brand); margin-block-start: 6px; box-shadow: 0 10px 20px -10px rgba(140, 70, 255, 0.8); }
.mock__media { position: relative; aspect-ratio: 16 / 11; border-radius: 18px; overflow: hidden; }
.mock__play { position: absolute; inset: 50% auto auto 50%; inline-size: 44px; block-size: 44px; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.6); }
/* selection frame like a design tool */
.mock__select { position: absolute; inset: 22% 3% 6% 3%; border: 1.5px solid #6a2bff; border-radius: 4px; pointer-events: none; }
.mock__select i { position: absolute; inline-size: 9px; block-size: 9px; background: #fff; border: 1.5px solid #6a2bff; }
.mock__select i:nth-child(1) { inset-block-start: -5px; inset-inline-start: -5px; }
.mock__select i:nth-child(2) { inset-block-start: -5px; inset-inline-end: -5px; }
.mock__select i:nth-child(3) { inset-block-end: -5px; inset-inline-start: -5px; }
.mock__select i:nth-child(4) { inset-block-end: -5px; inset-inline-end: -5px; }
.mock__select b { position: absolute; inset-block-end: -26px; inset-inline-start: 50%; translate: -50% 0; padding: 3px 8px; border-radius: 4px; font-size: 0.6rem; font-weight: 500; color: #fff; background: #6a2bff; white-space: nowrap; }

/* divider */
.collab__split { position: absolute; inset-block: 0; inset-inline-start: var(--split); inline-size: 2px; translate: -1px 0; z-index: 3; background: linear-gradient(#b44dff, #4fd6ff); box-shadow: 0 0 18px rgba(140, 120, 255, 0.8); pointer-events: none; }
.collab__knob {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(20, 10, 50, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  font-size: 0.6rem;
}
.collab__knob i { font-style: normal; font-size: 0.9rem; }

/* columns + flow */
.collab__cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-5); align-items: stretch; }
.collab__col { display: grid; gap: var(--sp-4); align-content: start; padding: var(--sp-6); border-radius: var(--r-lg); }
.collab__col header { display: flex; align-items: center; justify-content: space-between; }
.collab__col header .t-mono { color: var(--fg-3); }
.collab__who.nav__wordmark { block-size: 30px; }
.collab__col ul { display: grid; gap: 10px; }
.collab__col li { display: flex; gap: 10px; align-items: baseline; color: var(--fg-2); }
.collab__col li::before { content: ""; flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--grad-brand); translate: 0 -2px; }
.collab__col--neurax li::before { background: linear-gradient(90deg, #4fd6ff, #8a7bff); }
.collab__flow { display: grid; justify-items: center; align-content: center; gap: 6px; }
.collab__flow i { inline-size: 1.5px; block-size: 18px; background: linear-gradient(#b44dff, #4fd6ff); }
.collab__flow .chip { padding: 6px 14px; font-size: 0.8rem; color: var(--fg); }
.collab__cta { display: flex; justify-content: center; }

@media (max-width: 900px) {
  .collab__cols { grid-template-columns: 1fr; }
  .collab__flow { grid-auto-flow: column; justify-content: center; align-items: center; }
  .collab__flow i { inline-size: 14px; block-size: 1.5px; }
  .mock__hero { grid-template-columns: 1fr; }
  .mock__media { display: none; }
}
@media (max-width: 560px) {
  .collab__brands { flex-wrap: wrap; }
  .collab__neurax { font-size: 1.15rem; }
  .collab__flow .chip { padding: 5px 9px; font-size: 0.7rem; }
}

/* 08 Kind words — pinned reviews, words light up as you read (home.js → initVoices) */
.s--voices { padding: 0; }
.vo__pin { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(16px, 3vh, 32px); block-size: 100vh; block-size: 100svh; padding: clamp(96px, 12vh, 120px) max(var(--gutter), calc((100% - 1440px) / 2)) clamp(20px, 4vh, 36px); overflow: hidden; }
.vo__head { display: grid; gap: var(--sp-3); }
.vo__title { max-inline-size: none; }
.vo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: clamp(24px, 5vw, 80px); min-block-size: 0; }
.vo__quotes { position: relative; block-size: 100%; min-block-size: 260px; }
.vo__mark { position: absolute; inset-block-start: 0.02em; inset-inline-start: -0.06em; font: italic 400 clamp(8rem, 5rem + 8vw, 15rem)/1 var(--f-serif); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.35; pointer-events: none; }
.vo__quote { position: absolute; inset-inline: 0; inset-block-start: 50%; translate: 0 -50%; margin: 0; padding-inline-start: clamp(36px, 5vw, 80px); font-size: clamp(1.7rem, 1rem + 2.2vw, 3.2rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.025em; opacity: 0; }
.vo-w { display: inline-block; color: rgba(18, 10, 43, 0.14); transition: color 0.2s; }
.vo-w--hot { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.vo-w.is-lit { color: var(--fg); }
.vo-w--hot.is-lit { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

.vo__cards { position: relative; display: grid; block-size: 100%; min-block-size: 0; perspective: 1400px; }
.vo-card { grid-area: 1 / 1; align-self: center; display: grid; gap: 14px; padding: 14px; border-radius: 26px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 50px 90px -50px rgba(60, 25, 150, 0.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform-origin: 50% 50%; backface-visibility: hidden; opacity: 0; }
.vo-card__thumb { position: relative; display: grid; align-content: end; gap: 4px; aspect-ratio: 4 / 3; padding: 18px; border-radius: 18px; overflow: hidden; isolation: isolate; color: #fff; }
.vo-card__thumb .mesh { z-index: -1; animation-duration: 22s; }
.vo-card__thumb::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(7, 3, 26, 0.55)); }
.vo-card__thumb b { font: italic 400 clamp(1.6rem, 1rem + 1.2vw, 2.2rem)/1 var(--f-serif); }
.vo-card__thumb small { color: rgba(255, 255, 255, 0.8); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.vo-card__chip { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; padding: 7px 12px; border-radius: 999px; color: #1fae6b; background: #fff; font-weight: 700; font-size: 0.8rem; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.4); }
.vo-card__who { display: flex; align-items: center; gap: 12px; padding-inline: 6px 4px; color: #120a2b; }
.vo-card__av { display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%; color: #fff; background: var(--grad-brand); font: 700 13px/1 var(--f-mono); }
.vo-card__who b { display: block; font-size: 1rem; }
.vo-card__who small { color: rgba(18, 10, 43, 0.55); font-size: 0.82rem; }
.vo-card__stars { margin-inline-start: auto; color: #ffb057; letter-spacing: 2px; font-size: 0.95rem; }

.vo__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-inline-size: 980px; }
.vo-step { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 16px; text-align: start; color: var(--fg-3); background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(18, 10, 43, 0.06); transition: background-color 0.4s, color 0.4s, box-shadow 0.4s; }
.vo-step__av { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; color: #6a2bff; background: rgba(106, 43, 255, 0.1); font: 700 10px/1 var(--f-mono); transition: background 0.4s, color 0.4s; }
.vo-step__txt { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo-step i { grid-column: 1 / -1; position: relative; block-size: 3px; border-radius: 3px; background: rgba(18, 10, 43, 0.08); overflow: hidden; }
.vo-step i b { position: absolute; inset: 0; background: var(--btn-solid); transform: scaleX(0); transform-origin: left; }
.vo-step.is-active { color: var(--fg); background: #fff; box-shadow: 0 16px 34px -20px rgba(60, 25, 150, 0.5); }
.vo-step.is-active .vo-step__av { color: #fff; background: var(--btn-solid); }

/* no motion: all reviews readable, one after another */
.vo--static .vo__pin { block-size: auto; }
.vo--static .vo { grid-template-columns: 1fr; }
.vo--static .vo__quotes { block-size: auto; display: grid; gap: var(--sp-6); }
.vo--static .vo__quote { position: static; translate: none; opacity: 1; }
.vo--static .vo-w { color: var(--fg); }
.vo--static .vo__cards { display: none; }

@media (max-width: 900px) {
  .vo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
  .vo__quote { padding-inline-start: 28px; font-size: clamp(1.25rem, 5.4vw, 1.7rem); }
  .vo__cards { block-size: auto; }
  .vo-card { grid-template-columns: 120px minmax(0, 1fr); align-items: center; padding: 10px; border-radius: 20px; }
  .vo-card__thumb { aspect-ratio: 1; padding: 10px; }
  .vo-card__thumb b, .vo-card__thumb small, .vo-card__chip { display: none; }
  .vo-card__who { flex-wrap: wrap; }
  .vo-card__stars { margin-inline-start: 0; }
  .vo__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .vo-step { grid-template-columns: 1fr; justify-items: center; padding: 8px; }
  .vo-step__txt { display: none; }
}

/* Numbers (06): "The work, measured." — an interactive glass bento ------- */
.s--numbers { position: relative; overflow: clip; }
.mx-glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(40% 35% at 70% 18%, rgba(180, 77, 255, 0.16), transparent 70%),
  radial-gradient(35% 40% at 15% 85%, rgba(106, 43, 255, 0.12), transparent 70%),
  radial-gradient(30% 30% at 95% 80%, rgba(255, 95, 210, 0.1), transparent 70%); }
.s--numbers .container { position: relative; }
.mx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5) var(--sp-7); margin-block-end: var(--sp-7); }
.mx-head .s__title { margin: 0; }
.mx-head__side { display: flex; align-items: center; gap: var(--sp-5); }
.mx-head__side p { margin: 0; max-inline-size: 36ch; color: var(--fg-2); line-height: 1.5; }
.mx-arrow { flex: none; display: grid; place-items: center; inline-size: 54px; block-size: 54px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.6); color: var(--fg); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.mx-arrow:hover { background: var(--btn-solid); border-color: var(--btn-solid); color: #fff; }

.mx { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.mx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-inline-size: 0;
  padding: clamp(22px, 2.2vw, 32px);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 40px 80px -50px rgba(106, 43, 255, 0.45), inset 0 1px 0 #fff;
  color: var(--c-ink);
  overflow: hidden;
}
.mx-card--projects { grid-column: span 11; }
.mx-card--views { grid-column: span 13; }
.mx-card--retention { grid-column: span 7; }
.mx-card--brands { grid-column: span 10; }
.mx-card--reply { grid-column: span 7; }

.mx-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(14, 7, 38, 0.55); }
.mx-big { display: flex; align-items: flex-start; font-size: clamp(3rem, 1.9rem + 2.8vw, 4.6rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1; }
.mx-big b { font-weight: inherit; font-variant-numeric: tabular-nums; padding-block-end: 0.08em; padding-inline-end: 0.04em; }
.mx-big sup { margin-inline-start: 0.04em; font-size: 0.5em; line-height: 1; padding-block-start: 0.55em; color: #a05bff; }
.mx-big sup.t-grad { color: transparent; padding-inline-end: 0.08em; padding-block-end: 0.1em; letter-spacing: 0; }
.mx-big--xl { font-size: clamp(4.2rem, 2.4rem + 5.4vw, 7.6rem); }
.mx-big--xl b { background: linear-gradient(180deg, #0e0726 50%, #6a2bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mx-big--xl sup { font-size: 0.18em; padding-block-start: 0.2em; }
.mx-label { margin: 0; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(14, 7, 38, 0.55); }
.mx-note { margin: 0; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.5; max-inline-size: 34ch; }

/* projects ---------------------------------------------------------------- */
.mx-projects { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: var(--sp-4); flex: 1; }
.mx-projects__main { display: grid; gap: var(--sp-3); }
.mx-stack { position: relative; justify-self: center; inline-size: min(100%, 440px); aspect-ratio: 5 / 4; perspective: 900px; }
.mx-stack__wall { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-26deg) rotateX(12deg) rotateZ(-5deg); transition: transform 0.8s var(--ease-out); }
.mx-shot {
  position: absolute;
  inline-size: 30%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  background: var(--c-night);
  box-shadow: 0 20px 34px -18px rgba(14, 7, 38, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.5);
  transform: translateZ(calc(var(--i) * -8px));
  transition: transform 0.6s var(--ease-out), opacity 0.4s, box-shadow 0.4s;
}
.mx-shot:nth-child(1) { left: 2%; top: 4%; }
.mx-shot:nth-child(2) { left: 35%; top: 0; }
.mx-shot:nth-child(3) { left: 68%; top: 6%; }
.mx-shot:nth-child(4) { left: 2%; top: 52%; }
.mx-shot:nth-child(5) { left: 35%; top: 48%; }
.mx-shot:nth-child(6) { left: 68%; top: 54%; }
.mx-stack.has-on .mx-shot { opacity: 0.5; }
.mx-stack .mx-shot.is-on { z-index: 5; opacity: 1; transform: translateZ(50px) scale(1.08); box-shadow: 0 40px 60px -24px rgba(106, 43, 255, 0.65), 0 0 0 2px #fff; }
.mx-shot__tag { position: absolute; inset: auto 8px 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 7px 10px; border-radius: 9px; background: rgba(14, 7, 38, 0.72); color: #fff; font-size: 0.66rem; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.4s var(--ease-out); }
.mx-shot__tag b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-shot__tag em { font-style: normal; font-weight: 700; font-size: 0.95rem; }
.mx-shot.is-on .mx-shot__tag { opacity: 1; transform: none; }

.mx-crafts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.mx-craft { display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 9px 14px; border-radius: var(--r-pill); color: var(--c-ink); font-size: var(--fs-small); text-align: start; transition: background-color 0.3s, box-shadow 0.3s; }
.mx-craft i { flex: none; inline-size: 9px; block-size: 9px; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.mx-craft span { flex: 1; color: var(--fg-2); }
.mx-craft b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mx-craft:hover, .mx-craft.is-on { background: rgba(106, 43, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(106, 43, 255, 0.12); }
.mx-craft.is-on span { color: var(--c-ink); }

/* views --------------------------------------------------------------------- */
.mx-select { position: relative; display: inline-flex; align-items: center; color: var(--c-ink); }
.mx-select select { appearance: none; -webkit-appearance: none; padding: 9px 36px 9px 16px; border-radius: 14px; border: 1px solid rgba(14, 7, 38, 0.1); background: rgba(255, 255, 255, 0.75); color: inherit; font: 500 0.82rem var(--f-sans); letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: 0 6px 16px -10px rgba(106, 43, 255, 0.4); }
.mx-select svg { position: absolute; inset-inline-end: 12px; pointer-events: none; }
.mx-delta { align-self: flex-start; margin: 0; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(31, 174, 107, 0.12); color: #138a55; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; }
.mx-chart { position: relative; flex: 1; min-block-size: clamp(180px, 17vw, 240px); margin-block-start: -70px; padding-block-end: 26px; }
.mx-chart__svg { position: absolute; inset: 0 0 26px; inline-size: 100%; block-size: calc(100% - 26px); overflow: visible; }
.mx-chart__grid line { stroke: rgba(106, 43, 255, 0.1); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.mx-chart__line { filter: drop-shadow(0 8px 10px rgba(143, 92, 255, 0.35)); }
.mx-chart__guide { position: absolute; inset-block: 0 26px; inset-inline-start: var(--x, 100%); inline-size: 1px; background: linear-gradient(to bottom, rgba(106, 43, 255, 0), rgba(106, 43, 255, 0.35)); transition: inset-inline-start 0.25s var(--ease-out); }
.mx-chart__dot { position: absolute; inset-inline-start: var(--x, 100%); inset-block-start: var(--y, 0); inline-size: 18px; block-size: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 5px #8f5cff, 0 6px 16px rgba(106, 43, 255, 0.5); transition: inset-inline-start 0.25s var(--ease-out), inset-block-start 0.25s var(--ease-out); }
.mx-chart__tip { position: absolute; z-index: 2; inset-inline-start: var(--x, 100%); inset-block-start: var(--y, 0); display: grid; gap: 4px; padding: 9px 12px; border-radius: 12px; background: #fff; color: var(--c-ink); box-shadow: 0 14px 30px -12px rgba(14, 7, 38, 0.35); transform: translate(var(--tx, -50%), calc(-100% - 20px)); white-space: nowrap; pointer-events: none; transition: inset-inline-start 0.25s var(--ease-out), inset-block-start 0.25s var(--ease-out); }
.mx-chart__tip small { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(14, 7, 38, 0.5); }
.mx-chart__tip b { display: flex; align-items: center; gap: 6px; font: 700 0.95rem var(--f-sans); }
.mx-chart__tip b::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: #8f5cff; }
.mx-chart__axis { position: absolute; inset: auto 0 0; block-size: 1.2em; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(14, 7, 38, 0.4); }
/* each month sits under its own point */
.mx-chart__axis span { position: absolute; inset-block-start: 0; translate: -50% 0; white-space: nowrap; }
.mx-chart__axis span:first-child { translate: 0 0; }
.mx-chart__axis span:last-child { translate: -100% 0; }
.mx-chart__axis span.is-on { color: #6a2bff; }

/* retention -------------------------------------------------------------- */
.mx-ret { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: var(--sp-3); flex: 1; }
.mx-ret__copy { display: grid; gap: var(--sp-3); }
.mx-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-tabs button { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgba(14, 7, 38, 0.1); font-size: 0.74rem; color: var(--fg-2); transition: background-color 0.3s, color 0.3s; }
.mx-tabs button[aria-selected="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.mx-donut { position: relative; aspect-ratio: 1; margin-inline-end: -14%; perspective: 700px; }
.mx-donut svg { inline-size: 100%; block-size: 100%; overflow: visible; transform: rotateX(22deg) rotateY(-22deg); filter: drop-shadow(0 22px 22px rgba(180, 77, 255, 0.35)); }
.mx-donut__track { fill: none; stroke: rgba(106, 43, 255, 0.08); stroke-width: 30; }
.mx-donut__arc { fill: none; stroke-width: 30; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 100px 100px; }
.mx-donut__knob { position: absolute; inline-size: 16px; block-size: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #b44dff, 0 4px 10px rgba(106, 43, 255, 0.5); inset-inline-start: var(--kx, 50%); inset-block-start: var(--ky, 0); transform: perspective(700px) rotateX(22deg) rotateY(-22deg); }
.mx-badge { position: absolute; inset: auto 6% 0 auto; display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; padding: 9px 14px; border-radius: 14px; background: #fff; box-shadow: 0 16px 30px -14px rgba(14, 7, 38, 0.35); }
.mx-badge i { grid-row: span 2; display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: rgba(31, 174, 107, 0.14); color: #138a55; font-style: normal; font-size: 0.8rem; }
.mx-badge b { font-size: 0.95rem; }
.mx-badge small { font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(14, 7, 38, 0.5); }

/* brands ------------------------------------------------------------------- */
.mx-brands__head { display: flex; align-items: center; gap: var(--sp-5); }
.mx-flow { perspective: 900px; margin-inline: calc(-1 * clamp(22px, 2.2vw, 32px)); }
.mx-flow__track { display: flex; gap: 6px; margin: 0; padding: 14px clamp(22px, 2.2vw, 32px); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.mx-flow__track::-webkit-scrollbar { display: none; }
.mx-tile {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: clamp(96px, 8.6vw, 124px);
  aspect-ratio: 1 / 1.12;
  border-radius: 14px;
  background: linear-gradient(160deg, #fff, #efe9ff);
  border: 1px solid #fff;
  box-shadow: 0 16px 26px -18px rgba(106, 43, 255, 0.55);
  scroll-snap-align: start;
  transform: rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform 0.2s linear;
}
.mx-logo { text-align: center; line-height: 1.05; }
.mx-logo--devon { color: #1f3fd1; font-weight: 800; letter-spacing: 0.1em; font-size: 0.95rem; }
.mx-logo--tanuzi { color: #a3123a; font-family: var(--f-serif); letter-spacing: 0.12em; font-size: 1.15rem; }
.mx-logo--green { color: #0f8a4b; font-weight: 700; font-size: 0.95rem; max-inline-size: 6ch; }
.mx-logo--neurax { color: var(--c-ink); font-weight: 800; letter-spacing: 0.02em; font-size: 1.05rem; }
.mx-logo--nelly { color: #9a93b8; font-weight: 300; letter-spacing: 0.08em; font-size: 1.25rem; }
.mx-logo--nafath { color: #222; font-weight: 600; letter-spacing: 0.16em; font-size: 0.72rem; }
.mx-flow__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.mx-round { display: grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 50%; background: #fff; color: var(--c-ink); box-shadow: 0 8px 18px -10px rgba(14, 7, 38, 0.35); transition: background-color 0.3s, color 0.3s; }
.mx-round:hover { background: var(--btn-solid); color: #fff; }
.mx-dots { display: flex; gap: 8px; }
.mx-dots button { inline-size: 8px; block-size: 8px; border-radius: 50%; background: rgba(14, 7, 38, 0.15); transition: background-color 0.3s, transform 0.3s; }
.mx-dots button.is-on { background: #8f5cff; transform: scale(1.2); }

/* reply time -------------------------------------------------------------- */
.mx-oncall { display: inline-flex; align-items: center; gap: 7px; font-size: 0.62rem; }
.mx-oncall::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: #1fae6b; box-shadow: 0 0 0 4px rgba(31, 174, 107, 0.16); animation: blink 1.6s steps(2) infinite; }
.mx-reply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sp-3); flex: 1; }
.mx-reply .mx-label { margin-block-start: var(--sp-4); }
.mx-coin { position: relative; block-size: clamp(170px, 15vw, 220px); perspective: 600px; }
.mx-coin__disc {
  --z: 0px;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  display: grid;
  place-items: center;
  inline-size: 132px;
  block-size: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  transform: rotateX(55deg) rotateZ(-28deg) translateZ(var(--z));
  transition: transform 0.7s var(--ease-spring);
}
.mx-coin__disc--1 { --z: 26px; background: radial-gradient(circle at 34% 28%, #fff 0%, #d9c9ff 28%, #9a6bff 70%, #6a2bff 100%); box-shadow: inset 0 -6px 14px rgba(60, 20, 166, 0.45), inset 0 4px 10px rgba(255, 255, 255, 0.8), 0 18px 30px -10px rgba(106, 43, 255, 0.55); }
.mx-coin__disc--1 svg { transform: rotateZ(28deg); filter: drop-shadow(0 2px 6px rgba(60, 20, 166, 0.5)); }
.mx-coin__disc--2 { --z: 8px; background: rgba(167, 123, 255, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.mx-coin__disc--3 { --z: -10px; background: rgba(200, 180, 255, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.mx-card--reply:hover .mx-coin__disc--1 { --z: 58px; }
.mx-card--reply:hover .mx-coin__disc--2 { --z: 24px; }
.mx-card--reply:hover .mx-coin__disc--3 { --z: -14px; }
.mx-coin__orbit { position: absolute; inset: 14% -4%; border: 1.5px dashed rgba(180, 77, 255, 0.45); border-radius: 50%; transform: rotateX(68deg) rotateZ(0deg); animation: mx-orbit 9s linear infinite; }
.mx-coin__orbit i { position: absolute; inset-block-start: -7px; inset-inline-start: 50%; inline-size: 14px; block-size: 14px; margin-inline-start: -7px; border-radius: 50%; background: #ff5fd2; box-shadow: 0 0 14px #ff5fd2; }
@keyframes mx-orbit { to { transform: rotateX(68deg) rotateZ(360deg); } }

@media (max-width: 1100px) {
  .mx-card--projects, .mx-card--views { grid-column: span 24; }
  .mx-card--retention, .mx-card--reply { grid-column: span 12; }
  .mx-card--brands { grid-column: span 24; order: 5; }
}
@media (max-width: 700px) {
  /* one column: 24 tracks' worth of gaps alone is wider than a phone */
  .mx { grid-template-columns: minmax(0, 1fr); }
  .mx .mx-card { grid-column: auto; }
  .mx-head__side { align-items: flex-start; }
  .mx-projects { grid-template-columns: 1fr; }
  .mx-stack { inline-size: min(100%, 300px); }
  .mx-crafts { gap: 2px 8px; }
  .mx-craft { padding: 8px 10px; font-size: 0.8rem; }
  .mx-chart { margin-block-start: -20px; }
  .mx-chart__axis span:nth-child(even) { visibility: hidden; }
  .mx-brands__head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  /* phones: the logos as a tidy 3 × 2 sheet — no turning tiles, no arrows */
  .mx-flow { margin-inline: 0; perspective: none; }
  .mx-flow__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 6px 0 0; overflow: visible; scroll-snap-type: none; }
  .mx-tile { inline-size: auto; aspect-ratio: 1 / 0.82; transform: none !important; }
  .mx-tile:nth-child(n + 7) { display: none; }
  .mx-logo { font-size: 0.82rem; }
  .mx-logo--nelly { font-size: 1rem; }
  .mx-logo--nafath { font-size: 0.62rem; }
  .mx-flow__nav { display: none; }
}

/* KSA (home): the Saudi brands work, in Saudi green ------------------------ */
.s--ksa { --ksa: #00843d; --ksa-2: #1fbf6a; --ksa-3: #b9f2cf; position: relative; overflow: clip; color: #f2fff7; }
/* the section colour lives on this layer: page sections are kept transparent for the scene blend */
.hk-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 55% at 85% 30%, rgba(0, 132, 61, 0.35), transparent 70%), radial-gradient(35% 40% at 10% 90%, rgba(31, 191, 106, 0.16), transparent 70%), linear-gradient(160deg, #021a10 0%, #04120c 45%, var(--c-night) 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 80%, transparent 100%); }
.hk__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.hk__copy { display: grid; gap: var(--sp-5); align-content: center; }
.s--ksa .s__meta, .s--ksa .s__rule { color: rgba(210, 255, 228, 0.6); }
.hk-flagdot { color: var(--ksa-3); }
.s--ksa .s__index::before { background: var(--ksa-2); box-shadow: 0 0 10px var(--ksa-2); }
.hk-green .split-inner { background: linear-gradient(100deg, var(--ksa-2) 0%, var(--ksa-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: 0.06em; }
.hk-green { background: linear-gradient(100deg, var(--ksa-2) 0%, var(--ksa-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: 0.06em; }
.hk__lead { max-inline-size: 46ch; margin: 0; color: rgba(225, 255, 238, 0.72); font-size: var(--fs-lead); line-height: 1.45; }
.hk-stats { display: flex; gap: clamp(20px, 3vw, 44px); }
.hk-stats div { display: grid; gap: 6px; }
.hk-stats b { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.hk-stats span { color: rgba(210, 255, 228, 0.5); font-size: var(--fs-mono); }
.hk-brands { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hk-brand { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid rgba(185, 242, 207, 0.18); background: rgba(0, 132, 61, 0.12); font-size: 0.86rem; font-weight: 500; transition: background-color 0.3s, border-color 0.3s; }
.hk-brand small { color: rgba(210, 255, 228, 0.5); font-size: 0.7rem; font-weight: 400; }
.hk-brand:hover { background: var(--ksa); border-color: var(--ksa); }
.hk-brand:hover small { color: rgba(255, 255, 255, 0.8); }
.hk__cta { display: grid; gap: var(--sp-3); justify-items: start; }
.hk-btn { background: var(--ksa); color: #fff; box-shadow: 0 12px 30px -12px rgba(0, 132, 61, 0.8); }
.hk-btn:hover { background: #006a31; }
.hk-credit { margin: 0; color: rgba(210, 255, 228, 0.5); font-size: 0.68rem; letter-spacing: 0.06em; }
.hk-credit a { color: #e6fff0; }

/* the wall: three columns of posts drifting up and down */
.hk-wall { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; block-size: clamp(520px, 72vh, 760px); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
.hk-col { position: relative; overflow: hidden; }
.hk-col__track { display: grid; gap: 12px; animation: hk-up 70s linear infinite; }
.hk-col--2 .hk-col__track { animation-name: hk-down; animation-duration: 80s; }
.hk-col--3 .hk-col__track { animation-duration: 60s; }
.hk-wall:hover .hk-col__track { animation-play-state: paused; }
@keyframes hk-up { to { transform: translateY(-50%); } }
@keyframes hk-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.hk-post { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; background: #062014; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.8); }
.hk-post img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 0.8s var(--ease-out); }
.hk-post:hover img { scale: 1.05; }
.hk-post__tag { position: absolute; inset: auto 8px 8px auto; padding: 4px 8px; border-radius: var(--r-pill); background: rgba(2, 26, 16, 0.75); color: #e6fff0; font-size: 0.56rem; opacity: 0; transition: opacity 0.3s; }
.hk-post:hover .hk-post__tag { opacity: 1; }
@media (max-width: 900px) {
  .hk__inner { grid-template-columns: 1fr; }
  .hk-wall { block-size: 440px; }
}
@media (max-width: 520px) {
  .hk-wall { block-size: 380px; gap: 8px; }
  .hk-col__track { gap: 8px; }
  .hk-post { border-radius: 10px; }
  .hk-stats { gap: 18px; }
  .hk-brand { padding: 6px 11px; font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) { .hk-col__track { animation: none; } }